@xarc/app-dev 11.0.10 → 12.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xarc/app-dev",
-	"version": "11.0.10",
+	"version": "12.1.0",
 	"description": "Electrode X application development support",
 	"main": "lib/index.js",
 	"homepage": "http://www.electrode.io",
@@ -28,13 +28,13 @@
 		"Joel Chen <xchen@walmartlabs.com>"
 	],
 	"peerDependencies": {
-		"@xarc/app": "^11.0.10"
+		"@xarc/app": "^12.1.0"
 	},
 	"dependencies": {
 		"@babel/cli": "^7.17.10",
 		"@babel/core": "^7.17.12",
-		"@babel/plugin-transform-class-properties": "^7.24.1",
 		"@babel/plugin-proposal-decorators": "^7.17.12",
+		"@babel/plugin-transform-class-properties": "^7.24.1",
 		"@babel/plugin-transform-object-rest-spread": "^7.24.7",
 		"@babel/plugin-transform-react-constant-elements": "^7.17.12",
 		"@babel/plugin-transform-react-inline-elements": "^7.16.7",
@@ -47,11 +47,10 @@
 		"@xarc/dev-base": "^0.1.3",
 		"@xarc/run": "^1.0.5",
 		"@xarc/subapp": "^0.4.2",
-		"@xarc/webpack": "^11.2.7",
+		"@xarc/webpack": "^12.0.0",
 		"ansi-to-html": "^0.7.2",
 		"babel-plugin-lodash": "^3.3.4",
 		"babel-plugin-minify-dead-code-elimination": "^0.5.2",
-		"babel-plugin-react-css-modules": "^5.2.6",
 		"babel-plugin-transform-node-env-inline": "^0.4.3",
 		"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
 		"boxen": "^5.0.0",
@@ -93,6 +92,8 @@
 		"xsh": "^0.4.5"
 	},
 	"devDependencies": {
+		"@babel/core": "^7.11.0",
+		"@babel/eslint-parser": "^7.25.1",
 		"@istanbuljs/nyc-config-typescript": "^1.0.2",
 		"@types/chai": "^4.3.1",
 		"@types/mocha": "^10.0.1",
@@ -102,11 +103,9 @@
 		"@types/webpack": "5.28.0",
 		"@typescript-eslint/eslint-plugin": "^5.0.0",
 		"@typescript-eslint/parser": "^5.0.0",
-		"@xarc/app": "^11.0.10",
+		"@xarc/app": "^12.1.0",
 		"@xarc/module-dev": "^4.1.0",
 		"@xarc/run": "^1.1.1",
-		"@babel/eslint-parser": "^7.25.1",
-		"@babel/core": "^7.11.0",
 		"chai": "^4.3.6",
 		"electrode-server": "^3.3.0",
 		"electrode-server1": "npm:electrode-server@^1.0.0",

package/src/config/babel/babelrc-client.ts

@@ -79,7 +79,6 @@ const basePlugins = [
 
 const { BABEL_ENV, NODE_ENV, ENABLE_KARMA_COV } = process.env;
 
-const enableCssModule = Boolean(_.get(xOptions, "webpack.cssModuleSupport"));
 const enableKarmaCov = ENABLE_KARMA_COV === "true";
 const isProduction = (BABEL_ENV || NODE_ENV) === "production";
 // const isTest = (BABEL_ENV || NODE_ENV) === "test";
@@ -96,30 +95,7 @@ const plugins = basePlugins.concat(
       },
     ],
   ],
-  // css module support
-  enableCssModule && [
-    [
-      "babel-plugin-react-css-modules",
-      {
-        context: "./src",
-        generateScopedName: `${
-          isProduction ? "" : "[name]__[local]___"
-        }[hash:base64:5]`,
-        filetypes: {
-          ".scss": {
-            syntax: "postcss-scss",
-            plugins: ["postcss-nested"],
-          },
-          ".styl": {
-            syntax: "sugarss",
-          },
-          ".less": {
-            syntax: "postcss-less",
-          },
-        },
-      },
-    ],
-  ],
+
   enableKarmaCov && [
     getPluginFrom(
       ["@xarc/opt-karma", "electrode-archetype-opt-karma"],

package/src/config/babel/babelrc.ts

@@ -8,7 +8,7 @@
 import ck from "chalker";
 import { makeOptionalRequire } from "optional-require";
 import _ from "lodash";
-import { getPluginFrom, loadXarcOptions, detectCSSModule } from "./common";
+import { getPluginFrom, loadXarcOptions } from "./common";
 
 const optionalRequire = makeOptionalRequire(require);
 
@@ -36,59 +36,11 @@ const addFlowPlugin = Boolean(enableFlow && optFlow);
 const { BABEL_ENV, NODE_ENV, XARC_BABEL_TARGET, ENABLE_KARMA_COV } =
   process.env;
 
-const enableCssModule = detectCSSModule(xOptions);
 const enableKarmaCov = ENABLE_KARMA_COV === "true";
 const isProduction = (BABEL_ENV || NODE_ENV) === "production";
 // const isTest = (BABEL_ENV || NODE_ENV) === "test";
 const isNodeTarget = XARC_BABEL_TARGET === "node";
 
-/**
- * https://www.npmjs.com/package/babel-plugin-react-css-modules
- *
- * This plugin enhances the CSS module support from css-loader.  It adds a new
- * prop styleName in addition to the className prop.  This also automatically
- * make it work for SSR.
- *
- * Currently, looks like the author has been inactive on maintaining this plugin
- * and there's some compatibility issue with css-loader 4.x.
- * https://github.com/gajus/babel-plugin-react-css-modules/issues/291
- *
- * Resolution: TBD
- *
- * @returns null or settings for babel-plugin-react-css-modules
- */
-const getReactCssModulePlugin = (): any => {
-  if (!enableCssModule) {
-    return null;
-  }
-
-  const enableShortenCSSNames = xOptions.webpack.enableShortenCSSNames;
-  const enableShortHash = isProduction && enableShortenCSSNames;
-  return [
-    [
-      "babel-plugin-react-css-modules",
-      {
-        context: "./src",
-        generateScopedName: `${
-          enableShortHash ? "" : "[name]__[local]___"
-        }[hash:base64:5]`,
-        filetypes: {
-          ".scss": {
-            syntax: "postcss-scss",
-            plugins: ["postcss-nested"],
-          },
-          ".styl": {
-            syntax: "sugarss",
-          },
-          ".less": {
-            syntax: "postcss-less",
-          },
-        },
-      },
-    ],
-  ];
-};
-
 const basePlugins = [
   // plugin to transpile async/await to Promise
   // not for node.js because it has native async/await
@@ -157,9 +109,6 @@ const plugins = basePlugins.concat(
         },
       ],
     ],
-  // css module support
-  // Note: this is needed for server side (node.js) also.
-  getReactCssModulePlugin(),
   !isNodeTarget &&
     enableKarmaCov && [
       getPluginFrom(

package/src/config/mocha/.mocharc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  require: ["@xarc/app-dev/config/mocha/setup.js", "@babel/register"],
+  reporter: "spec",
+  spec: "@(__test__|__tests__|test|tests)/**/*.@(js|jsx|ts|tsx)",
+  recursive: true,
+  ui: "bdd",
+};

package/src/config/mocha/setup.ts

@@ -1,14 +1,22 @@
 import { makeOptionalRequire } from "optional-require";
 const optionalRequire = makeOptionalRequire(require);
-
 const Enzyme = optionalRequire("enzyme");
 const Adapter = optionalRequire("enzyme-adapter-react-16");
 
+const jsDomGlobal = optionalRequire("jsdom-global");
+const tsNode = optionalRequire("ts-node");
+
 if (Enzyme && Adapter) {
   Enzyme.configure({ adapter: new Adapter() });
 }
+if (jsDomGlobal) {
+  require("jsdom-global/register");
+}
 
-const chai = optionalRequire("chai");
+if (tsNode) {
+  require("ts-node/register");
+}
+const chai = optionalRequire("chai").default;
 
 /**
  * @param addons