Skip to content

Readme edit #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ibnlanre wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Readme edit #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1529491
made changes to the readme file
ibnlanre Jun 12, 2020
b3883c9
corrected some text
ibnlanre Jun 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 70 additions & 59 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,17 @@ This package contains scripts that help build client code:

- `inline-environment-variables` replaces references to `process.env.<envVarName>` with their values in a JS file.

# Installation
---
Copy link
Copy Markdown
Owner

@mahhov mahhov Jun 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a fan of manually styling md's and would rather the md renderer do it's thing. Not only because I trust the renderer more than myself to decide when to add lines for best readability, but also because manually doing this could lead to consistency issues.


## Installation

`npm i --save-dev inline-scripts`

# CLI Examples
---

## CLI Examples

## `inline-script-tags`
### inline-script-tags

```html
<!-- src/index.html -->
Expand All @@ -26,29 +30,31 @@ This package contains scripts that help build client code:

```js
// src/main.js
console.log('Welcome');
console.log("Welcome");
Copy link
Copy Markdown
Owner

@mahhov mahhov Jun 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this isn't consistent with either the src nor js common style.

```

`$ inline-scripts src/index.html out/index.html`
`$ inline-script-tags src/index.html out/index.html`
Copy link
Copy Markdown
Owner

@mahhov mahhov Jun 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this!


```html
<!-- out/index.html -->
<p>Welcome</p>
<script>console.log('Welcome');</script>
<script>
Copy link
Copy Markdown
Owner

@mahhov mahhov Jun 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although this is easier to read, it's actually inaccurate. The script doesn't generate the new lines and indentation.

console.log("Welcome");
</script>
```

## `inline-stylesheets`
### inline-stylesheets

```html
<!-- src/index.html -->
<p>Welcome</p>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css" />
Copy link
Copy Markdown
Owner

@mahhov mahhov Jun 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a fan of unnecessary characters that don't improve readability.

```

```css
/* src/style.css */
body {
color: red;
color: red;
}
```

Expand All @@ -57,112 +63,117 @@ body {
```html
<!-- out/index.html -->
<p>Welcome</p>
<style>body {
color: red;
}</style>
<style>
body {
color: red;
}
</style>
```

## `inline-images`
### inline-images

```html
<!-- src/index.html -->
<p>Welcome</p>
<img src="red_dot.png">
<img src="red_dot.png" />
```

`$ inline-images src/index.html out/index.html`

```html
<!-- out/index.html -->
<p>Welcome</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
<img
Copy link
Copy Markdown
Owner

@mahhov mahhov Jun 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like above, the script doesn't line-wrap, and I think the output snippet should reflect the actual behavior.

src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
/>
```

## `inline-requires`
### inline-requires

```js
// src/main.js
let math = require('./mathHelper');
console.log('10 ^ 2 =', math.square(10));
let math = require("./mathHelper");
console.log("10 ^ 2 =", math.square(10));
```

```js
// src/mathHelper.js
module.exports = {
square: a => a * a,
add: (a, b) => a + b,
double: a => a * 2,
increment: a => a++,
square: (a) => a * a,
Copy link
Copy Markdown
Owner

@mahhov mahhov Jun 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like above, not a fan of the unnecessary ()

add: (a, b) => a + b,
double: (a) => a * 2,
increment: (a) => a++,
};

```

`$ inline-requires src/main.js out/main.js`

```js
// out/main.js
let dependencies = {
'main': (require, module) => {
let math = require('./mathHelper');
console.log('10 ^ 2 =', math.square(10));
},
'mathHelper': (require, module) => {
module.exports = {
square: a => a * a,
add: (a, b) => a + b,
double: a => a * 2,
increment: a => a++,
};
}
main: (require, module) => {
let math = require("./mathHelper");
console.log("10 ^ 2 =", math.square(10));
},
mathHelper: (require, module) => {
module.exports = {
square: (a) => a * a,
add: (a, b) => a + b,
double: (a) => a * 2,
increment: (a) => a++,
};
},
};

let fakeRequire = (currentPath, dependencyPath) => {
currentPath.pop();
dependencyPath
.replace(/.js$/, '')
.split('/')
.filter(a => a !== '.')
.forEach(pathFragment => {
if (pathFragment === '..')
currentPath.pop();
else
currentPath.push(pathFragment);
});

let module = {};
dependencies[currentPath.toString()](fakeRequire.bind(null, currentPath), module);
return module.exports;
currentPath.pop();
dependencyPath
.replace(/.js$/, "")
.split("/")
.filter((a) => a !== ".")
.forEach((pathFragment) => {
if (pathFragment === "..") currentPath.pop();
else currentPath.push(pathFragment);
});

let module = {};
dependencies[currentPath.toString()](
fakeRequire.bind(null, currentPath),
module
);
return module.exports;
};

dependencies['main'](fakeRequire.bind(null, ['main']));
dependencies["main"](fakeRequire.bind(null, ["main"]));
```

## `inline-environment-variables`

### inline-environment-variables

```js
// src/main.js
console.log('server URL is' + process.env.SERVER_URL);
console.log("server URL is" + process.env.SERVER_URL);
```

`$ inline-environment-variables src/main.js out/main.js`

```js
// out/main.js
console.log('server URL is' + 'https://api.github.com');
console.log("server URL is" + "https://api.github.com");
```

## Note on parameters
### Note on parameters

All scripts usually take 2 parameters: the input and output files.

`$ inline-scripts src/index.html out/index.html .`
`$ inline-[script_type] src/index.html out/index.html`
Copy link
Copy Markdown
Owner

@mahhov mahhov Jun 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for consistency, let's prefer dash-case to underscore.


For convenience, if the 2nd parameter is `.`, the output will replace the input file.

`$ inline-scripts out/index.html .`
`$ inline-[script_type] src/index.html .`

---

# JS API
## JS API

`const {inlineEnvironmentVariables, inlineRequires, inlineScriptTags} = require(inline-scripts);`

Expand Down