feat: add encoding & generator options

README.md

@@ -207,6 +207,94 @@ module.exports = {
 };
 ```
 
+### `encoding`
+
+Type: `String`
+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"]`.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              encoding: 'utf8',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+### `source`
+
+Type: `Function`
+Default: `data:${mimetype || ''};${encoding},${src.toString(encoding)}`
+
+You can create you own custom implementation for encoding data. `source` argument is a [`Buffer`](https://nodejs.org/api/buffer.html) instance. 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: {
+              source: (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:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              source: (svgContentBuffer) => {
+                return `data:image/svg;utf8,${svgContentBuffer.toString(
+                  'utf8'
+                )}`;
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ### `esModule`
 
 Type: `Boolean`

src/index.js

@@ -36,6 +36,7 @@ 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';
 
     if (typeof src === 'string') {
       // eslint-disable-next-line no-param-reassign
@@ -45,11 +46,13 @@ export default function loader(src) {
     const esModule =
       typeof options.esModule !== 'undefined' ? options.esModule : true;
 
+    const encodedData = options.source
+      ? options.source(src)
+      : `data:${mimetype || ''};${encoding},${src.toString(encoding)}`;
+
     return `${
       esModule ? 'export default' : 'module.exports ='
-    } ${JSON.stringify(
-      `data:${mimetype || ''};base64,${src.toString('base64')}`
-    )}`;
+    } ${JSON.stringify(encodedData)}`;
   }
 
   // Normalize the fallback.

src/options.json

@@ -5,6 +5,24 @@
       "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.",
+      "type": "string",
+      "enum": [
+        "utf8",
+        "utf16le",
+        "latin1",
+        "base64",
+        "hex",
+        "ascii",
+        "binary",
+        "ucs2"
+      ]
+    },
+    "source": {
+      "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"

test/encoding-option.test.js

@@ -0,0 +1,165 @@
+import {
+  compile,
+  execute,
+  getCompiler,
+  normalizeErrors,
+  readAsset,
+} from './helpers';
+
+describe('"encoding" option', () => {
+  it('should work with unspecified value with the default base64 encoding', async () => {
+    const compiler = getCompiler('simple-svg.js');
+    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',
+    });
+    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 (hex)', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      encoding: 'hex',
+    });
+    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 (utf16le)', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      encoding: 'utf16le',
+    });
+    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 (latin1)', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      encoding: 'latin1',
+    });
+    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 (base64)', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      encoding: 'base64',
+    });
+    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 (ascii)', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      encoding: 'ascii',
+    });
+    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 (binary)', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      encoding: 'binary',
+    });
+    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 (ucs2)', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      encoding: 'ucs2',
+    });
+    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 throw an error with "String" wrong encoding value equal to xyz', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      encoding: 'xyz',
+    });
+    const stats = await compile(compiler);
+
+    try {
+      execute(readAsset('main.bundle.js', compiler, stats));
+      expect(true).toBe(false);
+    } catch (err) {
+      expect(err.message.indexOf('ValidationError')).not.toBe(-1);
+    }
+  });
+});

test/helpers/customSourceImplementation.js

@@ -0,0 +1,9 @@
+export default (content) => {
+  return (
+    `data:image/svg+xml,${ 
+    content
+      .toString()
+      .trim()
+      .replace(/\s+/g, ' ')}`
+  );
+};

test/helpers/index.js

@@ -3,5 +3,13 @@ import execute from './execute';
 import getCompiler from './getCompiler';
 import normalizeErrors from './normalizeErrors';
 import readAsset from './readAsset';
+import customSourceImplementation from './customSourceImplementation';
 
-export { compile, execute, getCompiler, normalizeErrors, readAsset };
+export {
+  compile,
+  execute,
+  getCompiler,
+  normalizeErrors,
+  readAsset,
+  customSourceImplementation,
+};

test/source-option.test.js

@@ -0,0 +1,54 @@
+import {
+  compile,
+  execute,
+  getCompiler,
+  normalizeErrors,
+  readAsset,
+  customSourceImplementation,
+} from './helpers';
+
+describe('"source" option', () => {
+  it('should work with unspecified value with the default base64 encoding', async () => {
+    const compiler = getCompiler('simple-svg.js');
+    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" right custom source implementation for encoding', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      source: (content) => customSourceImplementation(content),
+    });
+    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" that return the encoding manually', async () => {
+    const compiler = getCompiler('simple-svg.js', {
+      source: (content) => `data:image/svg+xml;utf8,${content}`,
+    });
+    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');
+  });
+});