refactor: dropped webpack@4 (#126)

BREAKING CHANGE: minimum supported `webpack` version is `5`

Author: cap-Bernardito

.github/workflows/nodejs.yml

@@ -56,7 +56,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
         node-version: [10.x, 12.x, 14.x]
-        webpack-version: [4, latest]
+        webpack-version: [latest]
 
     runs-on: ${{ matrix.os }}
 

README.md

@@ -36,7 +36,7 @@ The documentation and syntax examples can be read [here](#syntax).
 > ⚠ `%20` is space in a query string, because you can't use spaces in URLs
 
 ```js
-import $ from "expose-loader?exposes[]=$&exposes[]=jQuery!jquery";
+import $ from "expose-loader?exposes=$,jQuery!jquery";
 //
 // Adds the `jquery` to the global object under the names `$` and `jQuery`
 ```
@@ -51,7 +51,7 @@ import { concat } from "expose-loader?exposes=_.concat!lodash/concat";
 import {
   map,
   reduce,
-} from "expose-loader?exposes[]=_.map|map&exposes[]=_.reduce|reduce!underscore";
+} from "expose-loader?exposes=_.map|map,_.reduce|reduce!underscore";
 //
 // Adds the `map` and `reduce` method from `underscore` to the global object under the name `_.map` and `_.reduce`
 ```

package-lock.json

@@ -38,40 +38,36 @@
     "dist"
   ],
   "peerDependencies": {
-    "webpack": "^4.0.0 || ^5.0.0"
-  },
-  "dependencies": {
-    "loader-utils": "^2.0.0",
-    "schema-utils": "^3.0.0"
+    "webpack": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.8",
-    "@babel/core": "^7.12.9",
-    "@babel/preset-env": "^7.12.7",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.1",
-    "cross-env": "^7.0.2",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "eslint": "^7.14.0",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "husky": "^4.3.0",
+    "husky": "^4.3.8",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.2",
+    "lint-staged": "^10.5.3",
     "memfs": "^3.2.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.0",
+    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "rx": "^4.1.0",
-    "standard-version": "^9.0.0",
+    "standard-version": "^9.1.0",
     "styled-components": "^5.2.1",
-    "webpack": "^5.6.0"
+    "webpack": "^5.19.0"
   },
   "keywords": [
     "webpack"

package.json

@@ -3,27 +3,18 @@
   Author Tobias Koppers @sokra
 */
 
+import schema from "./options.json";
+
 import {
-  getOptions,
+  getExposes,
+  contextify,
+  getNewUserRequest,
   stringifyRequest,
-  getRemainingRequest,
   interpolateName,
-} from "loader-utils";
-
-import { validate } from "schema-utils";
-
-import schema from "./options.json";
-
-import { getExposes, contextify, getNewUserRequest } from "./utils";
+} from "./utils";
 
 export default function loader() {
-  const options = getOptions(this);
-
-  validate(schema, options, {
-    name: "Expose Loader",
-    baseDataPath: "options",
-  });
-
+  const options = this.getOptions(schema);
   const callback = this.async();
 
   let exposes;
@@ -57,7 +48,7 @@ export default function loader() {
 
   // Change the request from an /abolute/path.js to a relative ./path.js.
   // This prevents [chunkhash] values from changing when running webpack builds in different directories.
-  const newRequest = contextify(this.context, getRemainingRequest(this));
+  const newRequest = contextify(this.context, this.remainingRequest);
   const stringifiedNewRequest = stringifyRequest(this, `-!${newRequest}`);
 
   let code = `var ___EXPOSE_LOADER_IMPORT___ = require(${stringifiedNewRequest});\n`;

src/index.js

@@ -1,4 +1,5 @@
 {
+  "title": "Expose Loader options",
   "definitions": {
     "ObjectPattern": {
       "type": "object",

src/options.json

@@ -80,12 +80,14 @@ function resolveExposes(item) {
 }
 
 function getExposes(items) {
-  let result = [];
+  let result;
+  const exposeItems =
+    typeof items === "string" && items.includes(",") ? items.split(",") : items;
 
-  if (typeof items === "string") {
-    result.push(resolveExposes(items));
+  if (typeof exposeItems === "string") {
+    result = [resolveExposes(exposeItems)];
   } else {
-    result = [].concat(items).map((item) => resolveExposes(item));
+    result = [].concat(exposeItems).map((item) => resolveExposes(item));
   }
 
   return result;
@@ -118,4 +120,52 @@ function contextify(context, request) {
     .join("!");
 }
 
-export { getNewUserRequest, getExposes, contextify };
+function isAbsolutePath(str) {
+  return path.posix.isAbsolute(str) || path.win32.isAbsolute(str);
+}
+
+function stringifyRequest(loaderContext, request) {
+  const splitted = request.split("!");
+  const context =
+    loaderContext.context ||
+    (loaderContext.options && loaderContext.options.context);
+
+  return JSON.stringify(
+    splitted
+      .map((part) => {
+        // First, separate singlePath from query, because the query might contain paths again
+        const splittedPart = part.match(/^(.*?)(\?.*)/);
+        const query = splittedPart ? splittedPart[2] : "";
+        let singlePath = splittedPart ? splittedPart[1] : part;
+
+        if (isAbsolutePath(singlePath) && context) {
+          singlePath = path.relative(context, singlePath);
+        }
+
+        return singlePath.replace(/\\/g, "/") + query;
+      })
+      .join("!")
+  );
+}
+
+function interpolateName(loaderContext, filename) {
+  let basename = "file";
+
+  if (loaderContext.resourcePath) {
+    const parsed = path.parse(loaderContext.resourcePath);
+
+    if (parsed.dir) {
+      basename = parsed.name;
+    }
+  }
+
+  return filename.replace(/\[name\]/gi, () => basename);
+}
+
+export {
+  getNewUserRequest,
+  getExposes,
+  contextify,
+  stringifyRequest,
+  interpolateName,
+};

src/utils.js

@@ -1,4 +1,4 @@
 import myExports from '../../src/cjs.js?exposes=myGlobal!./simple-commonjs2-single-export.js';
-import myExports2 from '../../src/cjs.js?exposes[]=myOtherGlobal.globalObject2|globalObject2&exposes[]=myOtherGlobal.globalObject3|globalObject3!./simple-commonjs2-multiple-export.js';
+import myExports2 from '../../src/cjs.js?exposes=myOtherGlobal.globalObject2|globalObject2,myOtherGlobal.globalObject3|globalObject3!./simple-commonjs2-multiple-export.js';
 
 export { myExports, myExports2 };

test/fixtures/inline-import-2.js

@@ -1,5 +1,5 @@
-export default (compiler) => {
-  return new Promise((resolve, reject) => {
+export default (compiler) =>
+  new Promise((resolve, reject) => {
     compiler.run((error, stats) => {
       if (error) {
         return reject(error);
@@ -8,4 +8,3 @@ export default (compiler) => {
       return resolve(stats);
     });
   });
-};

test/helpers/compile.js

@@ -36,11 +36,7 @@ export default (fixture, loaderOptions = {}, config = {}) => {
   const compiler = webpack(fullConfig);
 
   if (!config.outputFileSystem) {
-    const outputFileSystem = createFsFromVolume(new Volume());
-    // Todo remove when we drop webpack@4 support
-    outputFileSystem.join = path.join.bind(path);
-
-    compiler.outputFileSystem = outputFileSystem;
+    compiler.outputFileSystem = createFsFromVolume(new Volume());
   }
 
   return compiler;