@eik/webpack-plugin 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 FINN.no
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,200 @@
+# @eik/webpack-plugin
+
+Plugin to rewrite bare imports to URLs as defined in import maps
+
+WebPack [Eik](https://eik.dev/) plugin to support the use of import maps to map "bare" import specifiers in ES modules.
+
+## Installation
+
+```bash
+$ npm install @eik/webpack-plugin
+```
+
+## Usage
+
+```js
+export default {
+    experiments: {
+        outputModule: true,
+    },
+    entry: '/src/input.js',
+    mode: 'production',
+    output: {
+        environment: {
+            module: true,
+        },
+        filename: 'bundle.js',
+        path: '/out/',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: {
+                    loader: '@eik/webpack-plugin',
+                    options: {
+                        path: '/path/to/eik-json-folder' 
+                    },
+                },
+            },
+        ],
+    },
+};
+```
+
+## Description
+
+This plugin transforms "bare" import specifiers to absolute URL specifiers in
+ES modules. The module refered to by the "bare" import specifier will be
+treated as external and its source will not be included in the bundle but
+refered to by URL.
+
+The plugin will attempt to read import map URLs from `eik.json` if present.
+
+The path to the location of an `eik.json` file can be specified with the `path` option.
+
+```js
+export default {
+    //...
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: {
+                    loader: '@eik/webpack-plugin',
+                    options: {
+                        path: '/path/to/eik-json-folder' 
+                    },
+                },
+            },
+        ],
+    },
+};
+```
+
+The plugin can also be told which URLs to load import maps from directly using the `urls` option.
+
+```js
+export default {
+    //...
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: {
+                    loader: '@eik/webpack-plugin',
+                    options: {
+                        urls: ['http://myserver/import-map']
+                    },
+                },
+            },
+        ],
+    },
+};
+```
+
+Additionally, individual mappings can be specified using the `maps` option.
+
+```js
+export default {
+    //...
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: {
+                    loader: '@eik/webpack-plugin',
+                    options: {
+                        maps: [{
+                            imports: {
+                                "lit-element": "https://cdn.eik.dev/lit-element/v2",
+                            }
+                        }],
+                    },
+                },
+            },
+        ],
+    },
+};
+```
+
+If several of these options are used, `maps` takes precedence over `urls` which takes precedence over values loaded from an `eik.json` file.
+
+ie. in the following example
+
+```js
+export default {
+    //...
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: {
+                    loader: '@eik/webpack-plugin',
+                    options: {
+                        path: '/path/to/eik-json-folder',
+                        urls: ['http://myserver/import-map'],
+                        maps: [{
+                            imports: {
+                                "lit-element": "https://cdn.eik.dev/lit-element/v2",
+                            }
+                        }],
+                    },
+                },
+            },
+        ],
+    },
+};
+```
+
+Any import map URLs in `eik.json` will be loaded first, then merged with (and overridden if necessary by) the result of fetching from `http://myserver/import-map` before finally being merged with (and overriden if necessary by) specific mappings defined in `maps`. (In this case `lit-element`)
+
+### Plugin result
+
+Bundles will have bare imports mapped to absolute URLs. 
+
+Ie. Something like this...
+
+```js
+import { LitElement, html, css } from "lit-element";
+```
+
+Will be mapped to something like this...
+
+```js
+import { LitElement, html, css } from "https://cdn.eik.dev/lit-element/v2";
+```
+
+## Options
+
+This plugin takes the following options:
+
+| option  | default        | type     | required | details                                                     |
+| ------- | -------------- | -------- | -------- | ----------------------------------------------------------- |
+| path    | `cwd/eik.json` | `string` | `false`  | Path to eik.json file.                                      |
+| urls    | `[]`           | `array`  | `false`  | Array of import map URLs to fetch from.                     |
+| maps    | `[]`           | `array`  | `false`  | Array of import map as objects.                             |
+
+## Note on ESM with WebPack
+
+This plugin will only apply import maps to ESM modules. Due to this its more or less given that the source of your build must be ESM and that your build output is ESM. WebPack does __not__ by default output ESM so this needs to be configured.
+
+You enable ESM output in WebPack as follows ([reference](https://webpack.js.org/configuration/output/#outputmodule)):
+
+```js
+export default {
+  //...
+  experiments: {
+    outputModule: true,
+  },
+  output: {
+    environment: {
+        module: true,
+    },
+  },
+};
+```
+
+## License
+
+See license file.

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@eik/webpack-plugin",
+  "version": "1.0.0",
+  "description": "WebPack plugin for loading import maps from an Eik server and applying the mapping to ECMAScript modules in preparation for upload to the same server.",
+  "type": "module",
+  "main": "./src/loader.cjs",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "tap --no-coverage",
+    "test:snapshot": "TAP_SNAPSHOT=1 tap --no-coverage",
+    "lint": "eslint . --ext=js,cjs",
+    "lint:fix": "eslint . --fix --ext=js,cjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:eik-lib/webpack-plugin.git"
+  },
+  "keywords": [
+    "webpack-plugin",
+    "webpack.js",
+    "webpack",
+    "import",
+    "url",
+    "esm"
+  ],
+  "author": "Finn.no",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/eik-lib/webpack-plugin/issues"
+  },
+  "homepage": "https://github.com/eik-lib/webpack-plugin#readme",
+  "devDependencies": {
+    "@semantic-release/changelog": "6.0.1",
+    "@semantic-release/git": "10.0.1",
+    "webpack": "5.67.0",
+    "webpack-cli": "4.9.2",
+    "eslint": "8.7.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-import": "2.25.4",
+    "fastify": "3.27.0",
+    "semantic-release": "19.0.2",
+    "tap": "15.1.6",
+    "memfs": "3.4.1"
+  },
+  "dependencies": {
+    "@eik/common": "3.0.0",
+    "undici": "4.12.2"
+  }
+}

package/src/builders.cjs

@@ -0,0 +1,44 @@
+const parsers = require('./parsers.cjs');
+
+const RX_SIDE_EFFECTS_IMPORT = parsers.sideEffectsImport();
+const RX_STANDARD_IMPORT = parsers.standardImport();
+const RX_DYNAMIC_IMPORT = parsers.dynamicImport();
+
+const standardImport = ({ dictionary = new Map(), source = '' }) => {
+    const result = source.replace(RX_STANDARD_IMPORT, (replacer, g1, g2, g3, g4) => {
+        const dep = dictionary.get(g4) || g4;
+        return `${g1} ${g2} ${g3} '${dep}'`;
+    });
+
+    return {
+        source: result,
+        dictionary,
+    };
+};
+module.exports.standardImport = standardImport;
+
+const dynamicImport = ({ dictionary = new Map(), source = '' }) => {
+    const result = source.replace(RX_DYNAMIC_IMPORT, (replacer, g1, g2) => {
+        const dep = dictionary.get(g2) || g2;
+        return `${g1}('${dep}')`;
+    });
+
+    return {
+        source: result,
+        dictionary,
+    };
+};
+module.exports.dynamicImport = dynamicImport;
+
+const sideEffectsImport = ({ dictionary = new Map(), source = '' }) => {
+    const result = source.replace(RX_SIDE_EFFECTS_IMPORT, (replacer, g1, g2) => {
+        const dep = dictionary.get(g2) || g2;
+        return `${g1} '${dep}'`;
+    });
+
+    return {
+        source: result,
+        dictionary,
+    };
+};
+module.exports.sideEffectsImport = sideEffectsImport;

package/src/loader.cjs

@@ -0,0 +1,58 @@
+const { helpers } = require('@eik/common');
+const utils = require('./utils.cjs');
+const { standardImport, dynamicImport, sideEffectsImport } = require('./builders.cjs');
+
+const dictionary = new Map();
+let cold = true;
+
+async function loader(source) {
+    const options = this.getOptions();
+    const callback = this.async();
+
+    if (cold) {
+        const pPath = options.path ? options.path : process.cwd();
+        const pMaps = Array.isArray(options.maps) ? options.maps : [options.maps];
+        const pUrls = Array.isArray(options.urls) ? options.urls : [options.urls];
+
+        // Filter out any empty (undefined, null) values in the option arrays
+        const urls = pUrls.filter((item) => {
+            if (item) return true;
+            return false;
+        });
+
+        const maps = pMaps.filter((item) => {
+            if (item) return true;
+            return false;
+        });
+
+        // Load eik config from eik.json or package.json
+        const eikConfig = await helpers.getDefaults(pPath);
+
+        // Merge map from eik config and the plugin options and Fetch all import maps over http
+        const fetchedMaps = await utils.fetchImportMaps([...eikConfig.map, ...urls]);
+
+        // Validate each import map and push each import statement into a dictionary
+        maps.concat(fetchedMaps).map((item) => utils.validate(item)).forEach((item) => {
+            item.forEach((obj) => {
+                dictionary.set(obj.key, obj.value);
+            });
+        });
+
+        // Loading of config and import maps should only happen once
+        cold = false;
+    }
+
+    new Promise((resolve) => {
+        resolve({
+            dictionary,
+            source,
+        });
+    })
+        .then(standardImport)
+        .then(dynamicImport)
+        .then(sideEffectsImport)
+        .then((obj) => {
+            callback(null, obj.source);
+        });
+}
+module.exports = loader;

package/src/parsers.cjs

@@ -0,0 +1,8 @@
+const standardImport = (flags = 'sgm') => new RegExp('(import)\\s*(.+?)\\s*(from)\\s*[\'"](.+?)[\'"]', flags);
+module.exports.standardImport = standardImport;
+
+const dynamicImport = (flags = 'gm') => new RegExp('(import)[(][\'"](.+?)[\'"][)]', flags);
+module.exports.dynamicImport = dynamicImport;
+
+const sideEffectsImport = (flags = 'gm') => new RegExp('(import)\\s*[\'"](.+?)[\'"]', flags);
+module.exports.sideEffectsImport = sideEffectsImport;

package/src/utils.cjs

@@ -0,0 +1,50 @@
+const { request } = require('undici');
+
+const isBare = (str) => {
+    if (str.startsWith('/') || str.startsWith('./') || str.startsWith('../') || str.substr(0, 7) === 'http://' || str.substr(0, 8) === 'https://') {
+        return false;
+    }
+    return true;
+};
+module.exports.isBare = isBare;
+
+const isString = (str) => typeof str === 'string';
+module.exports.isString = isString;
+
+const validate = (map) => Object.keys(map.imports).map((key) => {
+    const value = map.imports[key];
+
+    if (isBare(value)) {
+        throw Error(`Import specifier can NOT be mapped to a bare import statement. Import specifier "${key}" is being wrongly mapped to "${value}"`);
+    }
+
+    return { key, value };
+});
+module.exports.validate = validate;
+
+const fetchImportMaps = async (urls = []) => {
+    try {
+        const maps = urls.map(async (map) => {
+            const {
+                statusCode,
+                body,
+            } = await request(map, { maxRedirections: 2 });
+
+            if (statusCode === 404) {
+                throw new Error('Import map could not be found on server');
+            } else if (statusCode >= 400 && statusCode < 500) {
+                throw new Error('Server rejected client request');
+            } else if (statusCode >= 500) {
+                throw new Error('Server error');
+            }
+
+            return body.json();
+        });
+        return await Promise.all(maps);
+    } catch (err) {
+        throw new Error(
+            `Unable to load import map file from server: ${err.message}`,
+        );
+    }
+};
+module.exports.fetchImportMaps = fetchImportMaps;