update dependencies and wrapper logic

Author: okwolf

.vscode/launch.json

@@ -12,6 +12,26 @@
       "cwd": "${workspaceFolder}/example",
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Build example",
+      "program": "${workspaceFolder}/bin/index.js",
+      "args": ["build", "--stats"],
+      "cwd": "${workspaceFolder}/example",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Test example",
+      "program": "${workspaceFolder}/bin/index.js",
+      "args": ["test"],
+      "cwd": "${workspaceFolder}/example",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
     }
   ]
 }

bin/dummyTransform.js

@@ -9,6 +9,13 @@ const getLoadersFromRules = (rules, path, loaderName) =>
     .reduce(flatten, [])
     .filter(get("loader"))
     .filter(({ loader }) => loader.includes(loaderName));
+const getRulesByTest = (rules, path, testPart) =>
+  rules
+    .filter(get(path))
+    .map(get(path))
+    .reduce(flatten, [])
+    .filter(get("test"))
+    .filter(({ test }) => test.toString().includes(testPart));
 
 const script = process.argv[2] || "start";
 process.env.NODE_ENV = script === "build" ? "production" : "development";
@@ -21,23 +28,23 @@ const webpackConfig = require(webpackConfigPath)(process.env.NODE_ENV);
 if (!webpackConfig) {
   throw new Error(`no Webpack config found for: ${webpackConfigPath}`);
 }
+
+webpackConfig.plugins = (webpackConfig.plugins || []).filter(
+  plugin => !(plugin?.constructor?.name || "").toLowerCase().includes("react")
+);
 const { module: { rules = [] } = {} } = webpackConfig;
 
 // use for unminified prod builds
 // webpackConfig.optimization.minimize = false;
 
-const eslintLoaders = getLoadersFromRules(rules, "use", "eslint");
-if (!eslintLoaders.length) {
-  throw new Error(
-    `missing ESLint config in webpack config: ${webpackConfigPath}`
-  );
+const svgRules = getRulesByTest(rules, "oneOf", ".svg");
+if (!svgRules.length) {
+  throw new Error(`missing SVG rules in webpack config: ${webpackConfigPath}`);
 }
-const eslintConfig = eslintLoaders[0].options.baseConfig;
-eslintConfig.settings = { react: { version: "latest" } };
-// override ESLint rules to allow using JSX with Hyperapp
-eslintConfig.rules = Object.assign(eslintConfig.rules || {}, {
-  "react/react-in-jsx-scope": "off"
-});
+// this rule brings in a copy of react
+svgRules[0].use = svgRules[0].use.filter(
+  ruleUse => !ruleUse.loader.includes("@svgr")
+);
 
 const babelLoaders = getLoadersFromRules(rules, "oneOf", "babel");
 if (!babelLoaders.length) {
@@ -46,8 +53,12 @@ if (!babelLoaders.length) {
   );
 }
 const babelOptions = babelLoaders[0].options;
+
+// disable babel caching for testing
+// babelOptions.cacheDirectory = false;
+
 // configure babel to allow using JSX with Hyperapp
-babelOptions.plugins = (babelOptions.plugins || []).concat([
+babelOptions.plugins = [
   [
     "@babel/transform-react-jsx",
     {
@@ -56,20 +67,18 @@ babelOptions.plugins = (babelOptions.plugins || []).concat([
     }
   ],
   require.resolve("./injectHtmlImportPlugin")
-]);
+];
 
 // override config in cache
 require.cache[require.resolve(webpackConfigPath)].exports = () => webpackConfig;
 
 const createJestConfig = require(createJestConfigPath);
 require.cache[require.resolve(createJestConfigPath)].exports = (...args) => {
   const jestConfig = createJestConfig(...args);
-  for (let key in jestConfig.transform) {
-    if (jestConfig.transform[key].includes("fileTransform")) {
-      jestConfig.transform[key] = require.resolve("./dummyTransform");
-    }
-  }
-  jestConfig.transformIgnorePatterns = ["node_modules/(?!hyperapp)/"];
+  jestConfig.transformIgnorePatterns = jestConfig.transformIgnorePatterns.map(
+    pattern =>
+      pattern.includes("node_modules") ? "/node_modules/(?!hyperapp)/" : pattern
+  );
   return jestConfig;
 };
 

bin/index.js

@@ -0,0 +1,2 @@
+package-lock = false
+save-prefix = =

example/.npmrc

@@ -1,13 +1,13 @@
 {
   "name": "hyperapp-scripts",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Hyperapp expansion pack for create-react-app",
   "bin": {
     "hyperapp-scripts": "./bin/index.js"
   },
   "main": "index.js",
   "scripts": {
-    "clean": "npx --ignore-existing --quiet rimraf node_modules example/{node_modules,build}",
+    "clean": "npx --quiet rimraf node_modules example/{node_modules,build}",
     "format": "npx prettier --write *.js bin/*.js example/src/**/*.{css,js}",
     "format:check": "npx prettier --list-different *.js bin/*.js example/src/**/*.{css,js}",
     "setup": "npm i && cd example && npm i",
@@ -18,11 +18,12 @@
     "release": "node release"
   },
   "dependencies": {
-    "react-scripts": "=3.0.0"
+    "react-scripts": "=5.0.1"
   },
   "devDependencies": {
-    "cross-env": "=7.0.2",
-    "hyperapp": "=2.0.8"
+    "@babel/plugin-proposal-private-property-in-object": "=7.21.11",
+    "cross-env": "=7.0.3",
+    "hyperapp": "=2.0.22"
   },
   "peerDependencies": {
     "hyperapp": "*"