@eik/webpack-plugin 2.0.1 → 2.0.2

package/README.md

@@ -7,38 +7,38 @@ WebPack [Eik](https://eik.dev/) plugin to support the use of import maps to map
 ## Installation
 
 ```bash
-$ npm install @eik/webpack-plugin
+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' 
-                    },
-                },
-            },
-        ],
-    },
+	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",
+					},
+				},
+			},
+		],
+	},
 };
 ```
 
@@ -55,20 +55,20 @@ The path to the location of an `eik.json` file can be specified with the `path`
 
 ```js
 export default {
-    //...
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                use: {
-                    loader: '@eik/webpack-plugin',
-                    options: {
-                        path: '/path/to/eik-json-folder' 
-                    },
-                },
-            },
-        ],
-    },
+	//...
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				use: {
+					loader: "@eik/webpack-plugin",
+					options: {
+						path: "/path/to/eik-json-folder",
+					},
+				},
+			},
+		],
+	},
 };
 ```
 
@@ -76,20 +76,20 @@ The plugin can also be told which URLs to load import maps from directly using t
 
 ```js
 export default {
-    //...
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                use: {
-                    loader: '@eik/webpack-plugin',
-                    options: {
-                        urls: ['http://myserver/import-map']
-                    },
-                },
-            },
-        ],
-    },
+	//...
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				use: {
+					loader: "@eik/webpack-plugin",
+					options: {
+						urls: ["http://myserver/import-map"],
+					},
+				},
+			},
+		],
+	},
 };
 ```
 
@@ -97,24 +97,26 @@ 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",
-                            }
-                        }],
-                    },
-                },
-            },
-        ],
-    },
+	//...
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				use: {
+					loader: "@eik/webpack-plugin",
+					options: {
+						maps: [
+							{
+								imports: {
+									"lit-element": "https://cdn.eik.dev/lit-element/v2",
+								},
+							},
+						],
+					},
+				},
+			},
+		],
+	},
 };
 ```
 
@@ -124,26 +126,28 @@ 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",
-                            }
-                        }],
-                    },
-                },
-            },
-        ],
-    },
+	//...
+	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",
+								},
+							},
+						],
+					},
+				},
+			},
+		],
+	},
 };
 ```
 
@@ -151,7 +155,7 @@ Any import map URLs in `eik.json` will be loaded first, then merged with (and ov
 
 ### Plugin result
 
-Bundles will have bare imports mapped to absolute URLs. 
+Bundles will have bare imports mapped to absolute URLs.
 
 Ie. Something like this...
 
@@ -169,29 +173,29 @@ import { LitElement, html, css } from "https://cdn.eik.dev/lit-element/v2";
 
 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.                             |
+| 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.
+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,
-    },
-  },
+	//...
+	experiments: {
+		outputModule: true,
+	},
+	output: {
+		environment: {
+			module: true,
+		},
+	},
 };
 ```
 

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@eik/webpack-plugin",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "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",
+  "main": "./src/loader.js",
+  "types": "./types/loader.d.ts",
   "files": [
-    "src"
+    "src",
+    "types"
   ],
   "scripts": {
     "test": "tap --disable-coverage --allow-empty-coverage",
     "test:snapshot": "TAP_SNAPSHOT=1 tap --allow-empty-coverage",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+    "types": "run-s types:module types:test",
+    "types:module": "tsc",
+    "types:test": "tsc --project tsconfig.test.json"
   },
   "repository": {
     "type": "git",
@@ -31,18 +37,20 @@
   },
   "homepage": "https://github.com/eik-lib/webpack-plugin#readme",
   "devDependencies": {
-    "@semantic-release/changelog": "6.0.3",
-    "@semantic-release/git": "10.0.1",
-    "webpack": "5.91.0",
-    "webpack-cli": "5.1.4",
+    "@eik/eslint-config": "1.0.2",
+    "@eik/prettier-config": "1.0.1",
+    "@eik/semantic-release-config": "1.0.0",
+    "@eik/typescript-config": "1.0.0",
     "eslint": "9.6.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "5.1.3",
     "fastify": "4.28.1",
-    "globals": "15.8.0",
+    "memfs": "4.11.1",
+    "npm-run-all": "4.1.5",
+    "prettier": "3.3.3",
     "semantic-release": "24.0.0",
     "tap": "21.0.0",
-    "memfs": "4.9.3"
+    "typescript": "5.5.4",
+    "webpack": "5.93.0",
+    "webpack-cli": "5.1.4"
   },
   "dependencies": {
     "@eik/common": "3.0.1",

package/src/builders.js

@@ -4,41 +4,59 @@ const RX_SIDE_EFFECTS_IMPORT = parsers.sideEffectsImport();
 const RX_STANDARD_IMPORT = parsers.standardImport();
 const RX_DYNAMIC_IMPORT = parsers.dynamicImport();
 
+/**
+ * @typedef {object} BuilderParams
+ * @property {Map<string, string>} [dictionary]
+ * @property {string} [source]
+ */
+
+/**
+ * @param {BuilderParams} params
+ * @returns {BuilderParams}
+ */
 export 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,
-  };
+	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,
+	};
 };
 
+/**
+ * @param {BuilderParams} params
+ * @returns {BuilderParams}
+ */
 export 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,
-  };
+	const result = source.replace(RX_DYNAMIC_IMPORT, (replacer, g1, g2) => {
+		const dep = dictionary.get(g2) || g2;
+		return `${g1}('${dep}')`;
+	});
+
+	return {
+		source: result,
+		dictionary,
+	};
 };
 
+/**
+ * @param {BuilderParams} params
+ * @returns {BuilderParams}
+ */
 export 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,
-  };
+	const result = source.replace(RX_SIDE_EFFECTS_IMPORT, (replacer, g1, g2) => {
+		const dep = dictionary.get(g2) || g2;
+		return `${g1} '${dep}'`;
+	});
+
+	return {
+		source: result,
+		dictionary,
+	};
 };

package/src/loader.js

@@ -1,67 +1,73 @@
 import { helpers } from "@eik/common";
 import * as utils from "./utils.js";
 import {
-  standardImport,
-  dynamicImport,
-  sideEffectsImport,
+	standardImport,
+	dynamicImport,
+	sideEffectsImport,
 } from "./builders.js";
 
 const dictionary = new Map();
 let cold = true;
 
+/**
+ * @param {string} source
+ */
 export default async function loader(source) {
-  const options = this.getOptions();
-  const callback = this.async();
+	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];
+	if (cold) {
+		/** @type {string} */
+		const pPath = options.path ? options.path : process.cwd();
+		/** @type {import("./utils.js").ImportMap[]} */
+		const pMaps = Array.isArray(options.maps) ? options.maps : [options.maps];
+		/** @type {string[]} */
+		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;
-    });
+		// 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;
-    });
+		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);
+		// 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,
-    ]);
+		// 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);
-        });
-      });
+		// 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;
-  }
+		// 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);
-    });
+	new Promise((resolve) => {
+		resolve({
+			dictionary,
+			source,
+		});
+	})
+		.then(standardImport)
+		.then(dynamicImport)
+		.then(sideEffectsImport)
+		.then((obj) => {
+			callback(null, obj.source);
+		});
 }

package/src/parsers.js

@@ -1,11 +1,11 @@
 export const standardImport = (flags = "sgm") =>
-  new RegExp(
-    "(import)\\s*([\\w{},\\n\\s\\[\\]\\*\\.]+?)\\s*(from)\\s*['\"]([\\w@\\-\\./]+?)['\"]",
-    flags,
-  );
+	new RegExp(
+		"(import)\\s*([\\w{},\\n\\s\\[\\]\\*\\.]+?)\\s*(from)\\s*['\"]([\\w@\\-\\./]+?)['\"]",
+		flags,
+	);
 
 export const dynamicImport = (flags = "gm") =>
-  new RegExp("(import)[(]['\"](.+?)['\"][)]", flags);
+	new RegExp("(import)[(]['\"](.+?)['\"][)]", flags);
 
 export const sideEffectsImport = (flags = "gm") =>
-  new RegExp("(import)\\s*['\"](.+?)['\"]", flags);
+	new RegExp("(import)\\s*['\"](.+?)['\"]", flags);

package/src/utils.js

@@ -6,16 +6,16 @@ import { request } from "undici";
  * @returns {boolean}
  */
 export const isBare = (str) => {
-  if (
-    str.startsWith("/") ||
-    str.startsWith("./") ||
-    str.startsWith("../") ||
-    str.substr(0, 7) === "http://" ||
-    str.substr(0, 8) === "https://"
-  ) {
-    return false;
-  }
-  return true;
+	if (
+		str.startsWith("/") ||
+		str.startsWith("./") ||
+		str.startsWith("../") ||
+		str.substr(0, 7) === "http://" ||
+		str.substr(0, 8) === "https://"
+	) {
+		return false;
+	}
+	return true;
 };
 
 /**
@@ -26,46 +26,50 @@ export const isBare = (str) => {
 export const isString = (str) => typeof str === "string";
 
 /**
- * @param {any} map
- * @returns {Array<{ key: string; value: string }>}
+ * @param {ImportMap} map
+ * @returns {Array<{ key: string; value: string; }>}
  */
 export const validate = (map) =>
-  Object.keys(map.imports).map((key) => {
-    const value = map.imports[key];
+	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}"`,
-      );
-    }
+		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 };
-  });
+		return { key, value };
+	});
 
 /**
- *
- * @param {string[]} [urls=[]]
- * @returns
+ * @typedef {object} ImportMap
+ * @property {Record<string, string>} imports
+ */
+
+/**
+ * @param {string[]} urls
+ * @returns {Promise<ImportMap[]>}
  */
 export const fetchImportMaps = async (urls = []) => {
-  try {
-    const maps = urls.map(async (map) => {
-      const { statusCode, body } = await request(map, { maxRedirections: 2 });
+	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");
-      }
+			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}`,
-    );
-  }
+			return /** @type {Promise<ImportMap>} */ (body.json());
+		});
+		return await Promise.all(maps);
+	} catch (err) {
+		throw new Error(
+			`Unable to load import map file from server: ${err.message}`,
+		);
+	}
 };

package/types/builders.d.ts

@@ -0,0 +1,7 @@
+export function standardImport({ dictionary, source }: BuilderParams): BuilderParams;
+export function dynamicImport({ dictionary, source }: BuilderParams): BuilderParams;
+export function sideEffectsImport({ dictionary, source }: BuilderParams): BuilderParams;
+export type BuilderParams = {
+    dictionary?: Map<string, string>;
+    source?: string;
+};

package/types/loader.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @param {string} source
+ */
+export default function loader(source: string): Promise<void>;

package/types/parsers.d.ts

@@ -0,0 +1,3 @@
+export function standardImport(flags?: string): RegExp;
+export function dynamicImport(flags?: string): RegExp;
+export function sideEffectsImport(flags?: string): RegExp;

package/types/utils.d.ts

@@ -0,0 +1,10 @@
+export function isBare(str: string): boolean;
+export function isString(str: any): boolean;
+export function validate(map: ImportMap): Array<{
+    key: string;
+    value: string;
+}>;
+export function fetchImportMaps(urls?: string[]): Promise<ImportMap[]>;
+export type ImportMap = {
+    imports: Record<string, string>;
+};