[init] create first version

.gitignore

@@ -0,0 +1 @@
+.idea/

README.md

@@ -0,0 +1,30 @@
+# inject-assets-webpack-plugin
+A plugin for webpack 4 which replaces assets in other assets. It was created to be used for caching in service workers.
+
+The plugin comes in handy when you add hashes to your assets during the webpack build.
+
+It can also be used in watch mode.
+
+## installation
+````
+npm i -D @mightyplow/inject-assets-webpack-plugin
+````
+
+## usage
+The assets you want to be replaced have to be wrapped by double curly braces. The assets can only
+be replaced if the target is also a webpack asset. 
+
+So for example if you want to replace the assets
+in a service worker, it has either be built by webpack or at least run through another plugin. Personally I like to
+use the [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) to copy the service worker 
+to the target directory.  
+
+### inside ServiceWorker
+````
+const FILES_TO_CACHE = [
+    '/',
+    '{{vendor}}',
+    '{{app}}'
+]
+````
+The asset names will be replaced by the output filesnames specified in the webpacks (or it's plugins) options.

index.js

@@ -0,0 +1,50 @@
+const getChunkFiles = require('./lib/getChunkFiles.js');
+const replaceAssets = require('./lib/replaceAssets.js');
+const createAsset = require('./lib/createAsset.js');
+
+/**
+ * A webpack plugin which can be used to replace asset names in compiled chunks.
+ * It listens to webpack's emit event and it therefore can also be used in watch mode.
+ *
+ * @param {Object} options - the options for the plugin
+ * @param {string[]} options.targets - the target chunks in which the assets should be replaced
+ * @constructor
+ */
+function InjectAssetsPlugin (options = {}) {
+    if (!options.hasOwnProperty('targets')) {
+        throw Error('targets must be specified');
+    }
+
+    this.options = options;
+}
+
+InjectAssetsPlugin.prototype = {
+    apply (compiler) {
+        compiler.plugin('emit', function injectAssets(compilation, callback) {
+            const {targets} = this.options;
+            const {assets} = compilation;
+
+            targets.forEach(function replaceAssetsForTarget (targetAssetName) {
+                const targetAsset = assets[targetAssetName];
+
+                if (!targetAsset) {
+                    console.warn(`the target asset '${targetAsset}' was not found in the compilation 
+                                  and therefore gets skipped`.replace(/\s+/, ' '));
+                    return;
+                }
+
+                const chunkFiles = getChunkFiles(compilation);
+                const targetSource = targetAsset.source().toString();
+                const modifiedTarget = replaceAssets(targetSource, chunkFiles);
+
+                assets[targetAssetName] = modifiedTarget
+                    ? createAsset(modifiedTarget, targetAssetName)
+                    : assets[targetAsset];
+            });
+
+            callback();
+        }.bind(this));
+    }
+};
+
+module.exports = InjectAssetsPlugin;

lib/createAsset.js

@@ -0,0 +1,40 @@
+/**
+ * @typedef {Object} WebpackAsset
+ * @param {Function} size
+ * @param {Function} source
+ */
+
+/**
+ * Creates a webpack asset object from a string. If the asset is falsy, the function returns
+ * undefined.
+ *
+ * @param {string} assetContent - the content for the webpack asset
+ * @param {string} [target] - a target name to be included in an eventual warning
+ * @return {WebpackAsset|undefined}
+ */
+function createAsset (assetContent, target) {
+    if (!assetContent) {
+        const message = [
+            'the asset content for the target',
+            `'${target}'`,
+            'is empty'
+        ]
+            .filter((part) => !!part)
+            .join(' ');
+
+        console.warn(message);
+        return;
+    }
+
+    return {
+        size () {
+            return assetContent.length;
+        },
+
+        source () {
+            return assetContent;
+        }
+    };
+}
+
+module.exports = createAsset;

lib/getChunkFiles.js

@@ -0,0 +1,18 @@
+const isRequired = require('./isRequired.js');
+
+/**
+ * Finds all chunks of a webpack compilation object and maps the chunk name
+ * to the containing files.
+ *
+ * @param {Object} compilation - a webpack compilation object
+ * @param {Object[]} compilation.chunks - an array of webpack chunks
+ * @return {Object}
+ */
+function getChunkFiles (compilation = isRequired('compilation')) {
+    return compilation.chunks.reduce(function mapChunksToFiles(files, chunk) {
+        files[chunk.name] = chunk.files;
+        return files;
+    }, {});
+}
+
+module.exports = getChunkFiles;

lib/isRequired.js

@@ -0,0 +1,16 @@
+/**
+ * A function which can be used as a function parameter default which throws an error
+ * if the parameter is undefined
+ *
+ * @param {string} varname - name of the variable for the output
+ * @throws {Error}
+ */
+function isRequired (varname) {
+    const message = varname
+        ? `missing parameter '${varname}'`
+        : 'missing parameter';
+
+    throw Error(message);
+}
+
+module.exports = isRequired;

lib/replaceAssets.js

@@ -0,0 +1,26 @@
+/**
+ * The regular expression to find asset names in a string
+ *
+ * @type {RegExp}
+ */
+const defaultAssetRegex = /[{]{2}([^}]+)[}]{2}/g;
+
+/**
+ * Replaces asset names with the first of the asset files from a webpack compilation.
+ *
+ * @param {string} targetSource - a string in which to replace the assets
+ * @param {Object} assetFiles - a map of available asset names and their containing files
+ * @return {string}
+ */
+function replaceAssets (targetSource, assetFiles) {
+    return targetSource.replace(defaultAssetRegex, function replaceAsset (match, assetName) {
+        if (!(assetFiles[assetName] && assetFiles[assetName].length)) {
+            console.warn(`no asset for '${assetName}' was found`);
+            return match;
+        }
+
+        return assetFiles[assetName][0];
+    });
+}
+
+module.exports = replaceAssets;

package-lock.json

@@ -0,0 +1,5 @@
+{
+  "name": "@mightyplow/inject-assets-webpack-plugin",
+  "version": "1.0.0",
+  "lockfileVersion": 1
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@mightyplow/inject-assets-webpack-plugin",
+  "version": "1.0.0",
+  "description": "webpack plugin to inject built assets into a file",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.mightyplow.net/mightyplow/inject-assets-webpack-plugin"
+  },
+  "keywords": [
+    "webpack",
+    "assets"
+  ],
+  "author": "mightyplow@gmail.com",
+  "license": "ISC",
+  "peerDependencies": {
+    "webpack": "^4.0.0"
+  }
+}