fix: update config and dev code to load xarc options

electrode-io · Oct 14, 2020 · 5a26418 · 5a26418
1 parent 2c28cea
commit 5a26418
Show file tree

Hide file tree

Showing 30 changed files with 255 additions and 175 deletions.
diff --git a/.gitignore b/.gitignore
@@ -517,3 +517,5 @@ yarn.lock
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.fyn
+
diff --git a/packages/xarc-app-dev/package.json b/packages/xarc-app-dev/package.json
@@ -49,6 +49,7 @@
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@jchip/redbird": "^1.1.2",
     "@loadable/babel-plugin": "^5.10.0",

diff --git a/packages/xarc-app-dev/src/config/babel/common.ts b/packages/xarc-app-dev/src/config/babel/common.ts
@@ -1,9 +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");
 
 //
 // Resolve full path of a plugin that's the dependency of host npm package
@@ -22,29 +19,4 @@ export function getPluginFrom(host, pluginName) {
   throw err;
 }
 
-export function loadXarcOptions(dir: string) {
-  dir = dir || process.cwd();
-  const filename = Path.join(dir, ".etmp/xarc-options.json");
-  try {
-    const data = Fs.readFileSync(filename, "utf-8");
-    return JSON.parse(data);
-  } catch (err) {
-    // 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: {}
-    };
-  }
-}
+export { loadXarcOptions } from "../../lib/utils";
diff --git a/packages/xarc-app-dev/src/config/jest/jest.config.ts b/packages/xarc-app-dev/src/config/jest/jest.config.ts
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-export {};
 
 const Path = require("path");
 const _ = require("lodash");
@@ -11,9 +10,11 @@ const optRequire = getOptArchetypeRequire(["@xarc/opt-jest", "electrode-archetyp
 const jestPkg = optRequire("jest/package.json");
 const jestMajVersion = parseInt(jestPkg.version.split(".")[0], 10);
 
-const archetype = require("@xarc/app/config/archetype")();
+import { loadXarcOptions } from "../../lib/utils";
 
-const { enableTypeScript } = archetype.babel;
+const xarcOptions = loadXarcOptions();
+
+const { enableTypeScript } = xarcOptions.babel;
 
 // https://jestjs.io/docs/en/configuration.html#testregex-string
 const scrTypes = enableTypeScript ? "jt" : "j";
@@ -55,5 +56,5 @@ module.exports = _.merge(
   {},
   _.pickBy(jestDefaultConfig, x => x !== undefined),
   jestVersionSpecificConfig[jestMajVersion],
-  archetype.jest
+  xarcOptions.jest
 );
diff --git a/packages/xarc-app-dev/src/config/karma/browser-settings.ts b/packages/xarc-app-dev/src/config/karma/browser-settings.ts
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires, no-process-exit */
-export {};
+
+import { loadXarcOptions } from "../../lib/utils";
 
 module.exports = function(settings) {
-  const archetype = require("@xarc/app/config/archetype")();
+  const xarcOptions = loadXarcOptions();
   const logger = require("@xarc/app/lib/logger");
-  const browser = archetype.karma.browser.toLowerCase();
+  const browser = xarcOptions.karma.browser.toLowerCase();
   if (browser === "chrome") {
     settings.browsers = ["ChromeHeadless"];
 

diff --git a/packages/xarc-app-dev/src/lib/babel-run.ts b/packages/xarc-app-dev/src/lib/babel-run.ts
@@ -15,6 +15,8 @@ export {};
  */
 const Path = require("path");
 
+import { loadXarcOptions } from "../lib/utils";
+
 const serverDir = process.argv[2] || "src/server";
 
 let start;
@@ -23,7 +25,7 @@ try {
   // Try to load user's dev.js under src/server
   start = require(Path.resolve(serverDir, "dev.js"));
 } catch (e) {
-  const archetype = require("../config/archetype")();
+  const xarcOptions = loadXarcOptions();
   const cwdNM = Path.resolve("node_modules");
   const cwd = process.cwd();
 
@@ -37,7 +39,7 @@ try {
       }
     ],
     extensions: [".js", ".jsx"]
-      .concat(archetype.babel.enableTypeScript && [".ts", ".tsx"])
+      .concat(xarcOptions.babel.enableTypeScript && [".ts", ".tsx"])
       .filter(x => x),
     cache: true
   });

diff --git a/packages/xarc-app-dev/src/lib/dev-admin/dev-server.ts b/packages/xarc-app-dev/src/lib/dev-admin/dev-server.ts
@@ -4,14 +4,17 @@ import { setupHttpDevServer } from "./dev-http";
 import { createServer } from "http";
 
 const ck = require("chalker");
-const archetype = require("../../config/archetype")();
 const optionalRequire = require("optional-require")(require);
 const fastifyServer = optionalRequire("@xarc/fastify-server");
 const electrodeServer = optionalRequire("electrode-server");
 const Hapi = optionalRequire("@hapi/hapi");
 const Koa = optionalRequire("koa");
 const express = optionalRequire("express");
 
+import { loadXarcOptions } from "../../lib/utils";
+
+const xarcOptions = loadXarcOptions();
+
 //
 // indicate that app is running in webpack dev mode
 // also set by @xarc/app/arch-clap.js
@@ -22,16 +25,16 @@ if (process.env.WEBPACK_DEV === undefined) {
 
 if (createServer) {
   const devHttpServer = setupHttpDevServer({
-    host: archetype.webpack.devHostname,
-    port: archetype.webpack.devPort
+    host: xarcOptions.webpack.devHostname,
+    port: xarcOptions.webpack.devPort
   });
   devHttpServer.addListener("error", err => {
     console.error(ck`<red>HTTP webpack dev server having an error</>${err}`);
   });
 
   devHttpServer.addListener("listening", () =>
     console.log(
-      ck`<green>Node.js webpack dev server listening on port ${archetype.webpack.devPort}</>`
+      ck`<green>Node.js webpack dev server listening on port ${xarcOptions.webpack.devPort}</>`
     )
   );
   devHttpServer.start();
@@ -42,8 +45,8 @@ if (createServer) {
       pinoOptions: false
     },
     connection: {
-      host: archetype.webpack.devHostname,
-      port: archetype.webpack.devPort
+      host: xarcOptions.webpack.devHostname,
+      port: xarcOptions.webpack.devPort
     },
     plugins: {
       webpackDevFastify: {
@@ -58,7 +61,7 @@ if (createServer) {
       logLevel: "warn"
     },
     connections: {
-      default: { host: archetype.webpack.devHostname, port: archetype.webpack.devPort }
+      default: { host: xarcOptions.webpack.devHostname, port: xarcOptions.webpack.devPort }
     },
     plugins: {
       webpackDevHapi: {
@@ -69,15 +72,15 @@ if (createServer) {
   });
 } else if (Hapi) {
   const app = Hapi.server({
-    port: archetype.webpack.devPort,
-    host: archetype.webpack.devHostname
+    port: xarcOptions.webpack.devPort,
+    host: xarcOptions.webpack.devHostname
   });
   app
     .register(require("./dev-hapi"))
     .then(() => app.start())
     .then(() => {
       console.log(
-        ck`<green>Hapi webpack dev server listening on port ${archetype.webpack.devPort}</>`
+        ck`<green>Hapi webpack dev server listening on port ${xarcOptions.webpack.devPort}</>`
       );
     })
     .catch(err => {
@@ -87,25 +90,25 @@ if (createServer) {
   const app = new Koa();
   const setup = require("./dev-koa");
   setup(app);
-  app.listen(archetype.webpack.devPort, err => {
+  app.listen(xarcOptions.webpack.devPort, err => {
     if (err) {
       console.error(ck`<red>koa webpack dev server failed</>${err}`);
     } else {
       console.log(
-        ck`<green>koa webpack dev server listening on port ${archetype.webpack.devPort}</>`
+        ck`<green>koa webpack dev server listening on port ${xarcOptions.webpack.devPort}</>`
       );
     }
   });
 } else if (express) {
   const app = express();
   const setup = require("./dev-express");
   setup(app);
-  app.listen(archetype.webpack.devPort, err => {
+  app.listen(xarcOptions.webpack.devPort, err => {
     if (err) {
       console.error(ck`<red>express webpack dev server failed</>${err}`);
     } else {
       console.log(
-        ck`<green>express webpack dev server listening on port ${archetype.webpack.devPort}</>`
+        ck`<green>express webpack dev server listening on port ${xarcOptions.webpack.devPort}</>`
       );
     }
   });

diff --git a/packages/xarc-app-dev/src/lib/utils.ts b/packages/xarc-app-dev/src/lib/utils.ts
@@ -4,7 +4,7 @@ import * as readPkgUp from "read-pkg-up";
 import * as pkgUp from "pkg-up";
 const mkdirp = require("mkdirp");
 const logger = require("./logger");
-
+const ck = require("chalker");
 const Path = require("path");
 const Fs = require("fs");
 
@@ -67,3 +67,34 @@ export function createGitIgnoreDir(dir, comment) {
     Fs.writeFileSync(gitIgnore, `# ${comment}\n*\n`);
   }
 }
+
+let cachedXarcOptions;
+
+export function loadXarcOptions(dir: string = process.cwd()) {
+  if (cachedXarcOptions) {
+    return cachedXarcOptions;
+  }
+  const filename = Path.join(dir, ".etmp/xarc-options.json");
+  try {
+    const data = Fs.readFileSync(filename, "utf-8");
+    return (cachedXarcOptions = JSON.parse(data));
+  } catch (err) {
+    // 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 (cachedXarcOptions = {
+      webpack: {},
+      babel: {},
+      options: {}
+    });
+  }
+}
diff --git a/packages/xarc-webpack/src/partials/babel.ts b/packages/xarc-webpack/src/partials/babel.ts
@@ -1,21 +1,24 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
 import * as Path from "path";
-const archetype = require("@xarc/app-dev/config/archetype")();
-const AppMode = archetype.AppMode;
 const identity = require("lodash/identity");
 const assign = require("lodash/assign");
 const babelLoader = require.resolve("babel-loader");
 
+import { loadXarcOptions } from "../util/load-xarc-options";
+
 module.exports = function(options) {
+  const xarcOptions = loadXarcOptions();
+  const AppMode = xarcOptions.AppMode;
+
   const clientVendor = Path.join(AppMode.src.client, "vendor/");
   const babelExclude = x => {
     if (x.indexOf("node_modules") >= 0) return true;
     if (x.indexOf(clientVendor) >= 0) return true;
     return false;
   };
 
-  const test = archetype.babel.enableTypeScript ? /\.[tj]sx?$/ : /\.jsx?$/;
+  const test = xarcOptions.babel.enableTypeScript ? /\.[tj]sx?$/ : /\.jsx?$/;
 
   const babelLoaderConfig = {
     _name: "babel",
@@ -38,7 +41,7 @@ module.exports = function(options) {
         assign(
           {},
           babelLoaderConfig,
-          archetype.babel.hasMultiTargets ? archetype.babel.extendLoader : {}
+          xarcOptions.babel.hasMultiTargets ? xarcOptions.babel.extendLoader : {}
         )
       ]
     }

diff --git a/packages/xarc-webpack/src/partials/dev.ts b/packages/xarc-webpack/src/partials/dev.ts
@@ -2,27 +2,29 @@
 
 import * as Url from "url";
 // const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const archetype = require("@xarc/app-dev/config/archetype")();
 const webpackDevReporter = require("../util/webpack-dev-reporter");
+import { loadXarcOptions } from "../util/load-xarc-options";
 
 const HTTP_PORT = 80;
 
-const devProtocol = archetype.webpack.https ? "https://" : "http://";
-
 module.exports = function() {
+  const xarcOptions = loadXarcOptions();
+
+  const devProtocol = xarcOptions.webpack.https ? "https://" : "http://";
+
   const devServerConfig: any = {
-    hot: archetype.webpack.enableHotModuleReload,
+    hot: xarcOptions.webpack.enableHotModuleReload,
     overlay: {
       errors: true,
-      warnings: archetype.webpack.enableWarningsOverlay
+      warnings: xarcOptions.webpack.enableWarningsOverlay
     },
     reporter: webpackDevReporter,
-    https: Boolean(archetype.webpack.https)
+    https: Boolean(xarcOptions.webpack.https)
   };
 
   if (process.env.WEBPACK_DEV_HOST || process.env.WEBPACK_HOST) {
-    devServerConfig.public = `${archetype.webpack.devHostname}:${archetype.webpack.devPort}`;
-    const orginUrl = `${devProtocol}${archetype.webpack.devHostname}:${archetype.webpack.devPort}`;
+    devServerConfig.public = `${xarcOptions.webpack.devHostname}:${xarcOptions.webpack.devPort}`;
+    const orginUrl = `${devProtocol}${xarcOptions.webpack.devHostname}:${xarcOptions.webpack.devPort}`;
     devServerConfig.headers = {
       "Access-Control-Allow-Origin": orginUrl
     };
@@ -41,7 +43,7 @@ module.exports = function() {
   //
   const makePublicPath = () => {
     // is any of the webpack.cdn* options defined
-    const { cdnProtocol, cdnHostname, cdnPort } = archetype.webpack;
+    const { cdnProtocol, cdnHostname, cdnPort } = xarcOptions.webpack;
     if (cdnProtocol !== null || cdnHostname !== null || cdnPort !== 0) {
       return Url.format({
         protocol: cdnProtocol || "http",
@@ -54,7 +56,7 @@ module.exports = function() {
       // under the same host and port, so use a relative path
       return "/js/";
     } else {
-      const { https, devHostname, devPort } = archetype.webpack;
+      const { https, devHostname, devPort } = xarcOptions.webpack;
       // original dev assets URLs
       return Url.format({
         protocol: https ? "https" : "http",

diff --git a/packages/xarc-webpack/src/partials/dll-entry.ts b/packages/xarc-webpack/src/partials/dll-entry.ts
@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
 import * as Path from "path";
-
-const archetypeConfig = require("@xarc/app-dev/config/archetype");
+import { loadXarcOptions } from "../util/load-xarc-options";
 
 module.exports = () => {
-  const AppMode = archetypeConfig().AppMode;
+  const xarcOptions = loadXarcOptions();
+  const AppMode = xarcOptions.AppMode;
+
   const clientDllConfig = require(Path.resolve(AppMode.src.client, "dll.config.js"));
 
   return {