fix: babel rc handle missing xarc-options.json file

electrode-io · Oct 9, 2020 · fc9c1fb · fc9c1fb
1 parent 9d19005
commit fc9c1fb
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 17 deletions.
diff --git a/packages/xarc-app-dev/src/config/babel/babelrc-client.ts b/packages/xarc-app-dev/src/config/babel/babelrc-client.ts
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires, no-console, @typescript-eslint/ban-ts-ignore */
 
-const ck = require("chalker");
 const optionalRequire = require("optional-require")(require);
 const optFlow = optionalRequire("electrode-archetype-opt-flow");
 import { getPluginFrom, loadXarcOptions } from "./common";
 const xOptions = loadXarcOptions(process.env.XARC_APP_DIR);
+const _ = require("lodash");
 
 const {
   enableTypeScript,
@@ -14,8 +14,11 @@ const {
   legacyDecorators,
   transformClassProps,
   looseClassProps,
-  enableDynamicImport
-} = xOptions.babel;
+  enableDynamicImport,
+  hasMultiTargets,
+  target: babelTarget,
+  envTargets = {}
+} = _.get(xOptions, "babel", {});
 
 const addFlowPlugin = Boolean(enableFlow && optFlow);
 
@@ -66,7 +69,7 @@ const basePlugins = [
 
 const { BABEL_ENV, NODE_ENV, ENABLE_KARMA_COV } = process.env;
 
-const enableCssModule = Boolean(xOptions.webpack.cssModuleSupport);
+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";
@@ -112,11 +115,9 @@ const plugins = basePlugins.concat(
   ]
 );
 
-const targets = xOptions.babel.envTargets[xOptions.babel.target];
+const targets = envTargets[babelTarget];
 const coreJsVersion = require("core-js/package.json").version.split(".")[0];
-const useBuiltIns = xOptions.babel.hasMultiTargets
-  ? { useBuiltIns: "entry", corejs: coreJsVersion }
-  : {};
+const useBuiltIns = hasMultiTargets ? { useBuiltIns: "entry", corejs: coreJsVersion } : {};
 
 const presets = [
   //

diff --git a/packages/xarc-app-dev/src/config/babel/babelrc-server.ts b/packages/xarc-app-dev/src/config/babel/babelrc-server.ts
@@ -3,15 +3,16 @@ const optionalRequire = require("optional-require")(require);
 const optFlow = optionalRequire("electrode-archetype-opt-flow");
 import { loadXarcOptions } from "./common";
 const xOptions = loadXarcOptions(process.env.XARC_APP_DIR);
+const _ = require("lodash");
 
 const {
   enableTypeScript,
   flowRequireDirective,
   enableFlow,
   transformClassProps,
   looseClassProps,
-  envTargets
-} = xOptions.babel;
+  envTargets = {}
+} = _.get(xOptions, "babel", {});
 
 const addFlowPlugin = Boolean(enableFlow && optFlow);
 

diff --git a/packages/xarc-app-dev/src/config/babel/babelrc.ts b/packages/xarc-app-dev/src/config/babel/babelrc.ts
@@ -10,6 +10,7 @@ const ck = require("chalker");
 const optionalRequire = require("optional-require")(require);
 const optFlow = optionalRequire("electrode-archetype-opt-flow");
 import { getPluginFrom, loadXarcOptions } from "./common";
+const _ = require("lodash");
 
 const xOptions = loadXarcOptions(process.env.XARC_APP_DIR);
 
@@ -23,14 +24,17 @@ const {
   legacyDecorators,
   transformClassProps,
   looseClassProps,
-  enableDynamicImport
-} = xOptions.babel;
+  enableDynamicImport,
+  hasMultiTargets,
+  target: babelTarget,
+  envTargets = {}
+} = _.get(xOptions, "babel", {});
 
 const addFlowPlugin = Boolean(enableFlow && optFlow);
 
 const { BABEL_ENV, NODE_ENV, XARC_BABEL_TARGET, ENABLE_KARMA_COV } = process.env;
 
-const enableCssModule = Boolean(xOptions.webpack.cssModuleSupport);
+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";
@@ -155,15 +159,15 @@ const plugins = basePlugins.concat(
     ]
 );
 
-const target = isNodeTarget ? "node" : xOptions.babel.target;
+const target = isNodeTarget ? "node" : babelTarget;
 
-const targets = xOptions.babel.envTargets[target];
+const targets = envTargets[target];
 if (!isJest) {
   console.log(ck`<orange>Babel preset-env compile targets: </><cyan>${JSON.stringify(targets)}</>`);
 }
 
 const useBuiltIns =
-  !isNodeTarget && xOptions.babel.hasMultiTargets
+  !isNodeTarget && hasMultiTargets
     ? { useBuiltIns: "entry", corejs: require("core-js/package.json").version.split(".")[0] }
     : {};
 

diff --git a/packages/xarc-app-dev/src/config/babel/common.ts b/packages/xarc-app-dev/src/config/babel/common.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
+const ck = require("chalker");
 import * as requireAt from "require-at";
 const Path = require("path");
 const Fs = require("fs");
@@ -28,6 +29,22 @@ export function loadXarcOptions(dir: string) {
     const data = Fs.readFileSync(filename, "utf-8");
     return JSON.parse(data);
   } catch (err) {
-    return {};
+    // eslint-disable-next-line
+    console.error(ck`
+<red>ERROR</>: Electrode xarc fail to load <cyan>.etmp/xarc-options.json</> in
+dev mode.  This means you are trying to use something not through
+xarc's development tasks.
+
+full path: ${filename}
+
+Please run "clap setup-dev" once to initialize the file
+<cyan>.etmp/xarc-options.json</> before doing your thing that loads
+xarc's development code.
+`);
+    return {
+      webpack: {},
+      babel: {},
+      options: {}
+    };
   }
 }
diff --git a/packages/xarc-app-dev/src/lib/load-xrun-tasks.ts b/packages/xarc-app-dev/src/lib/load-xrun-tasks.ts
@@ -769,6 +769,14 @@ module.exports = function loadArchetype(xclap, xarcOptions: XarcOptions = {}) {
         }
       },
 
+      "setup-dev": {
+        desc: `Setup development related options for your application. \
+You only need to run this if you are doing something not through the xarc tasks.`,
+        task() {
+          console.log(`xarc dev options configured.`);
+        }
+      },
+
       dev: {
         desc: `Start your app with watch in development mode with dev-admin.
         options: node.js --inspect can be used to debug the dev-admin`,