Skip to content
This repository has been archived by the owner on Mar 17, 2021. It is now read-only.

feat: add encoding & generator options #210

Merged
merged 15 commits into from Apr 8, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
88 changes: 88 additions & 0 deletions README.md
Expand Up @@ -207,6 +207,94 @@ module.exports = {
};
```

### `encoding`

Type: `String|Boolean`
Default: `base64`

Specify the encoding which the file will be in-lined with. It supports [Node.js Buffers and Character Encodings](https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings) which are `["utf8","utf16le","latin1","base64","hex","ascii","binary","ucs2"]`.

> If you don't want to use any encoding you can set `encoding` to `false` however if you set it to `true` it will use the default encoding `base64`.

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'url-loader',
options: {
encoding: 'utf8',
},
},
],
},
],
},
};
```

### `generator`

Type: `Function`

You can create you own custom implementation for encoding data. `generator` argument is a [`Buffer`](https://nodejs.org/api/buffer.html) instance of the file. in the example we are compressing svg files using [mini-svg-data-uri](https://github.com/tigt/mini-svg-data-uri) implementation.

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'url-loader',
options: {
generator: (svgContentBuffer) => {
const svgToMiniDataURI = require('mini-svg-data-uri');

return svgToMiniDataURI(svgContentBuffer.toString());
},
},
},
],
},
],
},
};
```

By using your own implementation, `mimetype` and `encoding` won't have effect on the final output. until you specify them in the output manually for Example:

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'url-loader',
options: {
generator: (svgContentBuffer) =>
`data:image/svg;utf8,${svgContentBuffer.toString('utf8')}`,
},
},
],
},
],
},
};
```

### `esModule`

Type: `Boolean`
Expand Down
6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Expand Up @@ -73,6 +73,7 @@
"jest-junit": "^10.0.0",
"lint-staged": "^10.0.8",
"memfs": "^3.1.2",
"mini-svg-data-uri": "^1.1.3",
"npm-run-all": "^4.1.5",
"prettier": "^1.19.1",
"standard-version": "^7.1.0",
Expand Down
15 changes: 12 additions & 3 deletions src/index.js
Expand Up @@ -37,6 +37,11 @@ export default function loader(src) {
const file = this.resourcePath;
const mimetype = options.mimetype || mime.contentType(path.extname(file));

const encoding =
options.encoding === true || typeof options.encoding === 'undefined'
? 'base64'
: options.encoding;

if (typeof src === 'string') {
// eslint-disable-next-line no-param-reassign
src = Buffer.from(src);
Expand All @@ -45,11 +50,15 @@ export default function loader(src) {
const esModule =
typeof options.esModule !== 'undefined' ? options.esModule : true;

const encodedData = options.generator
? options.generator(src)
: `data:${mimetype || ''}${encoding ? `;${encoding}` : ''},${
encoding ? src.toString(encoding) : src.toString()
Copy link
Member

Choose a reason for hiding this comment

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

Can be simplified to src.toString(encoding), when encoding is undefined it will be as src.toString()

Copy link
Contributor Author

@EslamHiko EslamHiko Apr 7, 2020

Choose a reason for hiding this comment

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

encoding here is never undefined it's base64 if it was already undefined or true or a string value or false and src.toString(false) will cause a bug.

}`;

return `${
esModule ? 'export default' : 'module.exports ='
} ${JSON.stringify(
`data:${mimetype || ''};base64,${src.toString('base64')}`
)}`;
} ${JSON.stringify(encodedData)}`;
}

// Normalize the fallback.
Expand Down
24 changes: 24 additions & 0 deletions src/options.json
Expand Up @@ -5,6 +5,30 @@
"description": "Enables/Disables transformation target file into base64 URIs (https://github.com/webpack-contrib/url-loader#limit).",
"type": ["boolean", "number", "string"]
},
"encoding": {
"description": "Specify the encoding which the file will be in-lined with.",
"oneOf": [
{
"enum": [
"utf8",
"utf16le",
"latin1",
"base64",
"hex",
"ascii",
"binary",
"ucs2"
]
},
{
"type": "boolean"
}
]
},
"generator": {
"description": "Adding custom implementation for encoding files.",
"instanceof": "Function"
},
"mimetype": {
"description": "The MIME type for the file to be transformed (https://github.com/webpack-contrib/url-loader#mimetype).",
"type": "string"
Expand Down
378 changes: 378 additions & 0 deletions test/__snapshots__/encoding-option.test.js.snap

Large diffs are not rendered by default.