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

feat: add encoding & generator options #210

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
8a4832d
feat: add encoding option
EslamHiko Apr 5, 2020
b577422
feat: specify the allowed encodings
EslamHiko Apr 6, 2020
c94d8e8
docs: fix url
EslamHiko Apr 6, 2020
6b827fa
feat: add source option
EslamHiko Apr 6, 2020
18e6e9d
fix: remove dependancies
EslamHiko Apr 6, 2020
9ccc3a0
fix: allow user to manipulate Buffer instance
EslamHiko Apr 6, 2020
2bb2de6
docs: fix an option mistake
EslamHiko Apr 6, 2020
a735888
feat: change source to generator & update tests
EslamHiko Apr 6, 2020
79a88fe
docs: update option name in examples
EslamHiko Apr 6, 2020
f1649c0
test: writing better descriptions
EslamHiko Apr 6, 2020
218b623
feat: allow boolean type for encoding option
EslamHiko Apr 7, 2020
1522c1c
test: improve tests
EslamHiko Apr 7, 2020
21f8bf1
docs: specify file in the second example
EslamHiko Apr 7, 2020
f287bfd
fix: use typeof for comparing with undefined
EslamHiko Apr 7, 2020
44374dc
fix: define the types of the option using oneOf
EslamHiko Apr 7, 2020
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
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Expand Up @@ -209,11 +209,13 @@ module.exports = {

### `encoding`

Type: `String`
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
Expand Down
10 changes: 8 additions & 2 deletions src/index.js
View file
Open in desktop
Expand Up @@ -36,7 +36,11 @@ export default function loader(src) {
if (shouldTransform(options.limit, src.length)) {
const file = this.resourcePath;
const mimetype = options.mimetype || mime.contentType(path.extname(file));
const encoding = options.encoding || 'base64';

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

if (typeof src === 'string') {
// eslint-disable-next-line no-param-reassign
Expand All @@ -48,7 +52,9 @@ export default function loader(src) {

const encodedData = options.generator
? options.generator(src)
: `data:${mimetype || ''};${encoding},${src.toString(encoding)}`;
: `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 •
edited

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 ='
Expand Down
6 changes: 4 additions & 2 deletions src/options.json
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@
},
"encoding": {
"description": "Specify the encoding which the file will be in-lined with.",
"type": "string",
"type": ["boolean", "string"],
Copy link
Member

Choose a reason for hiding this comment

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

oneOf - https://ajv.js.org/keywords.html#oneof

"oneOf": [ { "enum" : ["value", "value", "value"] }, { "type": "boolean" } ]

"enum": [
"utf8",
"utf16le",
Expand All @@ -16,7 +16,9 @@
"hex",
"ascii",
"binary",
"ucs2"
"ucs2",
true,
false
]
},
"generator": {
Expand Down
73 changes: 73 additions & 0 deletions test/__snapshots__/encoding-option.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

61 changes: 61 additions & 0 deletions test/__snapshots__/generator-option.test.js.snap
View file
Open in desktop
@@ -1,5 +1,66 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`"generator" option should work with "Function" generating encoded file manually, encoding & mimetype should not have any effect: assets 1`] = `
Array [
"main.bundle.js",
]
`;

exports[`"generator" option should work with "Function" generating encoded file manually, encoding & mimetype should not have any effect: errors 1`] = `Array []`;

exports[`"generator" option should work with "Function" generating encoded file manually, encoding & mimetype should not have any effect: result 1`] = `
"data:image/svg;utf8,<?xml version=\\"1.0\\" encoding=\\"UTF-8\\" standalone=\\"no\\"?>
<svg width=\\"75px\\" height=\\"75px\\" viewBox=\\"0 0 75 75\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
<!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
<title>mochi</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id=\\"path-1\\" x=\\"0\\" y=\\"0\\" width=\\"70\\" height=\\"70\\" rx=\\"3\\"></rect>
<mask id=\\"mask-2\\" maskContentUnits=\\"userSpaceOnUse\\" maskUnits=\\"objectBoundingBox\\" x=\\"0\\" y=\\"0\\" width=\\"70\\" height=\\"70\\" fill=\\"white\\">
<use xlink:href=\\"#path-1\\"></use>
</mask>
</defs>
<g id=\\"Page-1\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
<g id=\\"mochi\\">
<g id=\\"Group-15\\" transform=\\"translate(1.000000, 1.000000)\\">
<rect id=\\"Rectangle-68-Copy-7\\" fill=\\"#414141\\" opacity=\\"0.149055504\\" x=\\"3\\" y=\\"3\\" width=\\"70\\" height=\\"70\\" rx=\\"3\\"></rect>
<use id=\\"Rectangle-68\\" stroke=\\"#636363\\" mask=\\"url(#mask-2)\\" stroke-width=\\"5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" xlink:href=\\"#path-1\\"></use>
<g id=\\"Group-9\\" transform=\\"translate(7.000000, 8.000000)\\">
<path d=\\"M12.7087955,2.76166786 L41.7087955,2.76166786 L12.7087955,2.76166786 Z\\" id=\\"Path-41\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" transform=\\"translate(27.208795, 2.761668) scale(-1, 1) translate(-27.208795, -2.761668) \\"></path>
<g id=\\"Group-7\\">
<path d=\\"M31.3359142,55.5629258 C44.9723574,55.5629258 56.0268789,44.5084044 56.0268789,30.8719611 C56.0268789,17.2355178 44.9723574,6.18099642 31.3359142,6.18099642 C17.6994709,6.18099642 6.6449495,17.2355178 6.6449495,30.8719611 C6.6449495,44.5084044 17.6994709,55.5629258 31.3359142,55.5629258 Z\\" id=\\"Oval-31-Copy-5\\" fill=\\"#414141\\" opacity=\\"0.149055504\\"></path>
<path d=\\"M28.3359142,52.5629258 C41.9723574,52.5629258 53.0268789,41.5084044 53.0268789,27.8719611 C53.0268789,14.2355178 41.9723574,3.18099642 28.3359142,3.18099642 C14.6994709,3.18099642 3.6449495,14.2355178 3.6449495,27.8719611 C3.6449495,41.5084044 14.6994709,52.5629258 28.3359142,52.5629258 Z\\" id=\\"Oval-31\\" stroke=\\"#636363\\" stroke-width=\\"2.5\\" fill=\\"#FFFFFF\\"></path>
<path d=\\"M23.0794925,7.04758997 C16.7071225,8.74491579 11.6454525,12.970402 8.98981238,18.4999219\\" id=\\"Path-21\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path>
<ellipse id=\\"Oval-32\\" fill=\\"#F3A5A5\\" cx=\\"40.8211184\\" cy=\\"28.6625021\\" rx=\\"3.57559958\\" ry=\\"2.31226622\\"></ellipse>
<ellipse id=\\"Oval-32\\" fill=\\"#F3A5A5\\" cx=\\"17.5314022\\" cy=\\"28.4940298\\" rx=\\"3.57559958\\" ry=\\"2.31226622\\"></ellipse>
<path d=\\"M39.3706572,27 L68.3706572,27 L39.3706572,27 Z\\" id=\\"Path-41\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" transform=\\"translate(53.870657, 27.000000) rotate(-270.000000) translate(-53.870657, -27.000000) \\"></path>
<path d=\\"M52.4161117,26.882831 C53.1433844,26.1555583 54.5979299,26.1555583 55.3252026,26.882831 C56.0524753,27.6101037 56.0524753,29.0646492 55.3252026,29.7919219 C54.5979299,30.5191946 53.1433844,30.5191946 52.4161117,29.7919219 C51.688839,29.0646492 51.688839,27.6101037 52.4161117,26.882831 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(53.870657, 28.337376) rotate(-270.000000) translate(-53.870657, -28.337376) \\"></path>
<path d=\\"M52.4161117,11.882831 C53.1433844,11.1555583 54.5979299,11.1555583 55.3252026,11.882831 C56.0524753,12.6101037 56.0524753,14.0646492 55.3252026,14.7919219 C54.5979299,15.5191946 53.1433844,15.5191946 52.4161117,14.7919219 C51.688839,14.0646492 51.688839,12.6101037 52.4161117,11.882831 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(53.870657, 13.337376) rotate(-270.000000) translate(-53.870657, -13.337376) \\"></path>
<path d=\\"M52.4161117,41.882831 C53.1433844,41.1555583 54.5979299,41.1555583 55.3252026,41.882831 C56.0524753,42.6101037 56.0524753,44.0646492 55.3252026,44.7919219 C54.5979299,45.5191946 53.1433844,45.5191946 52.4161117,44.7919219 C51.688839,44.0646492 51.688839,42.6101037 52.4161117,41.882831 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(53.870657, 43.337376) rotate(-270.000000) translate(-53.870657, -43.337376) \\"></path>
<path d=\\"M-11.6293428,27 L17.3706572,27 L-11.6293428,27 Z\\" id=\\"Path-41\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" transform=\\"translate(2.870657, 27.000000) rotate(-270.000000) translate(-2.870657, -27.000000) \\"></path>
<path d=\\"M1.4161117,26.882831 C2.14338442,26.1555583 3.59792988,26.1555583 4.32520261,26.882831 C5.05247533,27.6101037 5.05247533,29.0646492 4.32520261,29.7919219 C3.59792988,30.5191946 2.14338442,30.5191946 1.4161117,29.7919219 C0.688838969,29.0646492 0.688838969,27.6101037 1.4161117,26.882831 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(2.870657, 28.337376) rotate(-270.000000) translate(-2.870657, -28.337376) \\"></path>
<path d=\\"M1.4161117,11.882831 C2.14338442,11.1555583 3.59792988,11.1555583 4.32520261,11.882831 C5.05247533,12.6101037 5.05247533,14.0646492 4.32520261,14.7919219 C3.59792988,15.5191946 2.14338442,15.5191946 1.4161117,14.7919219 C0.688838969,14.0646492 0.688838969,12.6101037 1.4161117,11.882831 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(2.870657, 13.337376) rotate(-270.000000) translate(-2.870657, -13.337376) \\"></path>
<path d=\\"M1.4161117,41.882831 C2.14338442,41.1555583 3.59792988,41.1555583 4.32520261,41.882831 C5.05247533,42.6101037 5.05247533,44.0646492 4.32520261,44.7919219 C3.59792988,45.5191946 2.14338442,45.5191946 1.4161117,44.7919219 C0.688838969,44.0646492 0.688838969,42.6101037 1.4161117,41.882831 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(2.870657, 43.337376) rotate(-270.000000) translate(-2.870657, -43.337376) \\"></path>
<path d=\\"M12.7087955,52.7616679 L41.7087955,52.7616679 L12.7087955,52.7616679 Z\\" id=\\"Path-41\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" transform=\\"translate(27.208795, 52.761668) scale(-1, 1) translate(-27.208795, -52.761668) \\"></path>
<path d=\\"M26.794633,51.3071224 C27.5219057,50.5798497 28.9764511,50.5798497 29.7037239,51.3071224 C30.4309966,52.0343951 30.4309966,53.4889406 29.7037239,54.2162133 C28.9764511,54.943486 27.5219057,54.943486 26.794633,54.2162133 C26.0673602,53.4889406 26.0673602,52.0343951 26.794633,51.3071224 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(28.249178, 52.761668) scale(-1, 1) translate(-28.249178, -52.761668) \\"></path>
<path d=\\"M41.79675,51.3071224 C42.5240228,50.5798497 43.9785682,50.5798497 44.7058409,51.3071224 C45.4331137,52.0343951 45.4331137,53.4889406 44.7058409,54.2162133 C43.9785682,54.943486 42.5240228,54.943486 41.79675,54.2162133 C41.0694773,53.4889406 41.0694773,52.0343951 41.79675,51.3071224 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(43.251295, 52.761668) scale(-1, 1) translate(-43.251295, -52.761668) \\"></path>
<path d=\\"M10.79675,51.3071224 C11.5240228,50.5798497 12.9785682,50.5798497 13.7058409,51.3071224 C14.4331137,52.0343951 14.4331137,53.4889406 13.7058409,54.2162133 C12.9785682,54.943486 11.5240228,54.943486 10.79675,54.2162133 C10.0694773,53.4889406 10.0694773,52.0343951 10.79675,51.3071224 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(12.251295, 52.761668) scale(-1, 1) translate(-12.251295, -52.761668) \\"></path>
<path d=\\"M26.794633,1.30712241 C27.5219057,0.579849678 28.9764511,0.579849678 29.7037239,1.30712241 C30.4309966,2.03439513 30.4309966,3.48894059 29.7037239,4.21621331 C28.9764511,4.94348604 27.5219057,4.94348604 26.794633,4.21621331 C26.0673602,3.48894059 26.0673602,2.03439513 26.794633,1.30712241 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(28.249178, 2.761668) scale(-1, 1) translate(-28.249178, -2.761668) \\"></path>
<path d=\\"M41.79675,1.30712241 C42.5240228,0.579849678 43.9785682,0.579849678 44.7058409,1.30712241 C45.4331137,2.03439513 45.4331137,3.48894059 44.7058409,4.21621331 C43.9785682,4.94348604 42.5240228,4.94348604 41.79675,4.21621331 C41.0694773,3.48894059 41.0694773,2.03439513 41.79675,1.30712241 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(43.251295, 2.761668) scale(-1, 1) translate(-43.251295, -2.761668) \\"></path>
<path d=\\"M10.79675,1.30712241 C11.5240228,0.579849678 12.9785682,0.579849678 13.7058409,1.30712241 C14.4331137,2.03439513 14.4331137,3.48894059 13.7058409,4.21621331 C12.9785682,4.94348604 11.5240228,4.94348604 10.79675,4.21621331 C10.0694773,3.48894059 10.0694773,2.03439513 10.79675,1.30712241 Z\\" id=\\"Rectangle-30\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"#FFFFFF\\" transform=\\"translate(12.251295, 2.761668) scale(-1, 1) translate(-12.251295, -2.761668) \\"></path>
<path d=\\"M26.8573052,31.9032203 C26.8573052,30.8244029 27.715362,29.7537529 29.1641302,29.753753 C30.6128985,29.753753 31.4952154,30.8648768 31.4952154,31.9845914\\" id=\\"Path-185-Copy\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" transform=\\"translate(29.176260, 30.869172) rotate(-180.000000) translate(-29.176260, -30.869172) \\"></path>
<path d=\\"M17.7408648,25.0760063 C17.7408648,25.0760063 17.4799907,21.5368219 20.2364086,21.5368221 C22.780818,21.5368223 22.7319523,25.0760063 22.7319523,25.0760063\\" id=\\"Path-71-Copy-2\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path>
<path d=\\"M35.0054141,25.0760063 C35.0054141,25.0760063 34.74454,21.5368219 37.5009578,21.5368221 C40.0453672,21.5368223 39.9965015,25.0760063 39.9965015,25.0760063\\" id=\\"Path-71-Copy\\" stroke=\\"#636363\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path>
</g>
</g>
</g>
</g>
</g>
</svg>"
`;

exports[`"generator" option should work with "Function" generating encoded file manually, encoding & mimetype should not have any effect: warnings 1`] = `Array []`;

exports[`"generator" option should work with "Function" generating encoded file manually: assets 1`] = `
Array [
"main.bundle.js",
Expand Down
32 changes: 32 additions & 0 deletions test/encoding-option.test.js
View file
Open in desktop
Expand Up @@ -21,6 +21,38 @@ describe('"encoding" option', () => {
expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
});

it('should work with "Boolean" true (default base64)', async () => {
const compiler = getCompiler('simple-svg.js', {
encoding: true,
});
const stats = await compile(compiler);

expect(
execute(readAsset('main.bundle.js', compiler, stats))
).toMatchSnapshot('result');
expect(Object.keys(stats.compilation.assets)).toMatchSnapshot('assets');
expect(normalizeErrors(stats.compilation.warnings)).toMatchSnapshot(
'warnings'
);
expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
});

it('should work with "Boolean" false (no encoding)', async () => {
const compiler = getCompiler('simple-svg.js', {
encoding: false,
});
const stats = await compile(compiler);

expect(
execute(readAsset('main.bundle.js', compiler, stats))
).toMatchSnapshot('result');
expect(Object.keys(stats.compilation.assets)).toMatchSnapshot('assets');
expect(normalizeErrors(stats.compilation.warnings)).toMatchSnapshot(
'warnings'
);
expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
});

it('should work with "String" right encoding value (utf8)', async () => {
const compiler = getCompiler('simple-svg.js', {
encoding: 'utf8',
Expand Down
17 changes: 17 additions & 0 deletions test/generator-option.test.js
View file
Open in desktop
Expand Up @@ -43,6 +43,23 @@ describe('"generator" option', () => {
});
const stats = await compile(compiler);

expect(
execute(readAsset('main.bundle.js', compiler, stats))
).toMatchSnapshot('result');
expect(Object.keys(stats.compilation.assets)).toMatchSnapshot('assets');
expect(normalizeErrors(stats.compilation.warnings)).toMatchSnapshot(
'warnings'
);
expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
});
it('should work with "Function" generating encoded file manually, encoding & mimetype should not have any effect', async () => {
const compiler = getCompiler('simple-svg.js', {
mimetype: 'image/png',
encoding: 'base64',
generator: (content) => `data:image/svg;utf8,${content.toString('utf8')}`,
});
const stats = await compile(compiler);

expect(
execute(readAsset('main.bundle.js', compiler, stats))
).toMatchSnapshot('result');
Expand Down