From 8b854a536c8593deab70e206db2b4f57618e8879 Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Fri, 13 Nov 2020 16:09:07 -0800 Subject: [PATCH] [fix] allow transpiling code under node_modules (#1754) --- packages/xarc-app-dev/src/config/archetype.ts | 43 +--------------- .../src/config/opt2/babel-options.ts | 16 ++++++ packages/xarc-app-dev/src/lib/utils.ts | 50 ++++++++++++++++++- packages/xarc-webpack/src/partials/babel.ts | 25 ++++++++-- .../src/partials/extract-style.ts | 18 +++---- .../src/util/load-xarc-options.ts | 24 ++++++--- 6 files changed, 113 insertions(+), 63 deletions(-) diff --git a/packages/xarc-app-dev/src/config/archetype.ts b/packages/xarc-app-dev/src/config/archetype.ts index 3d6d779c5e..f953433090 100644 --- a/packages/xarc-app-dev/src/config/archetype.ts +++ b/packages/xarc-app-dev/src/config/archetype.ts @@ -2,51 +2,12 @@ import { XarcOptions } from "./opt2/xarc-options"; import { getDevArchetypeLegacy } from "./options"; -import { createGitIgnoreDir } from "../lib/utils"; -const Fs = require("fs"); const _ = require("lodash"); const getEnvProxy = require("./env-proxy"); -const Path = require("path"); +import { saveXarcOptions } from "../lib/utils"; let cachedArchetype = null; -function createElectrodeTmpDir(eTmpDir = ".etmp") { - createGitIgnoreDir(Path.resolve(eTmpDir), "Electrode tmp dir"); -} - -function jsonStringifyReplacer(key, value) { - if (value instanceof RegExp) { - return value.toString(); - } - return value; -} - -function saveArchetypeConfig(config) { - const filename = `${config.eTmpDir}/xarc-options.json`; - const copy = { ...config, pkg: undefined, devPkg: undefined }; - let existStr; - - try { - existStr = Fs.readFileSync(filename, "utf-8"); - } catch (err) { - // - } - - const str = JSON.stringify(copy, jsonStringifyReplacer, 2); - if (str !== existStr) { - try { - createElectrodeTmpDir(config.eTmpDir); - - Fs.writeFileSync(filename, str); - } catch (err) { - console.error( - `Unable to save development options to ${filename} - this will cause other failures.\n`, - err - ); - } - } -} - /** * Get development options * @@ -82,7 +43,7 @@ module.exports = function getDevOptions(user: XarcOptions = {}) { addOnFeatures: undefined }); - saveArchetypeConfig(legacy); + saveXarcOptions(legacy); cachedArchetype = legacy; diff --git a/packages/xarc-app-dev/src/config/opt2/babel-options.ts b/packages/xarc-app-dev/src/config/opt2/babel-options.ts index 10a31c7473..676c1c5053 100644 --- a/packages/xarc-app-dev/src/config/opt2/babel-options.ts +++ b/packages/xarc-app-dev/src/config/opt2/babel-options.ts @@ -61,6 +61,22 @@ export type BabelOptions = { */ transformClassProps?: boolean | { loose: boolean }; + /** + * List of RegExp to match files that should be included for transpiling. + * + * By default, files under node_modules are not transpiled. + * + * You can set this to control that. ie: to compile everything under node_modules, use `[/node_modules/]` + */ + includeRegExp?: RegExp[]; + + /** + * List of RegExp to match files that should not be transpiled by babel. + * + * This is checked after includeRegExp + */ + excludeRegExp?: RegExp[]; + // DEPRECATE: looseClassProps?: boolean; // DEPRECATE: diff --git a/packages/xarc-app-dev/src/lib/utils.ts b/packages/xarc-app-dev/src/lib/utils.ts index bb7b33ab44..a337a1e20c 100644 --- a/packages/xarc-app-dev/src/lib/utils.ts +++ b/packages/xarc-app-dev/src/lib/utils.ts @@ -69,6 +69,24 @@ export function createGitIgnoreDir(dir, comment) { } } +const regExpSig = "@xarc/__RegExp__@"; + +export const jsonStringifier = (key, value) => { + if (value instanceof RegExp) { + return `${regExpSig}${value.toString()}`; + } else { + return value; + } +}; + +export const jsonParser = (key, value) => { + if (typeof value === "string" && value.startsWith(regExpSig)) { + return new RegExp(value.substr(regExpSig.length)); + } else { + return value; + } +}; + let cachedXarcOptions; export function loadXarcOptions(dir: string = process.cwd()) { @@ -78,7 +96,7 @@ export function loadXarcOptions(dir: string = process.cwd()) { const filename = Path.join(dir, ".etmp/xarc-options.json"); try { const data = Fs.readFileSync(filename, "utf-8"); - return (cachedXarcOptions = JSON.parse(data)); + return (cachedXarcOptions = JSON.parse(data, jsonParser)); } catch (err) { // eslint-disable-next-line console.error(ck` @@ -100,6 +118,36 @@ xarc's development code. } } +function createElectrodeTmpDir(eTmpDir = ".etmp") { + createGitIgnoreDir(Path.resolve(eTmpDir), "Electrode tmp dir"); +} + +export function saveXarcOptions(config) { + const filename = `${config.eTmpDir}/xarc-options.json`; + const copy = { ...config, pkg: undefined, devPkg: undefined }; + let existStr; + + try { + existStr = Fs.readFileSync(filename, "utf-8"); + } catch (err) { + // + } + + const str = JSON.stringify(copy, jsonStringifier, 2); + if (str !== existStr) { + try { + createElectrodeTmpDir(config.eTmpDir); + + Fs.writeFileSync(filename, str); + } catch (err) { + console.error( + `Unable to save development options to ${filename} - this will cause other failures.\n`, + err + ); + } + } +} + export function detectCSSModule(xOptions) { const cssModuleSupport = _.get(xOptions, "webpack.cssModuleSupport", undefined); if (cssModuleSupport === undefined) { diff --git a/packages/xarc-webpack/src/partials/babel.ts b/packages/xarc-webpack/src/partials/babel.ts index 8e6350a25d..4e2b520c5e 100644 --- a/packages/xarc-webpack/src/partials/babel.ts +++ b/packages/xarc-webpack/src/partials/babel.ts @@ -12,9 +12,28 @@ module.exports = function(options) { 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; + const { includeRegExp, excludeRegExp } = xarcOptions.babel; + + const babelExclude = (x: string) => { + if (includeRegExp && includeRegExp.find((r: RegExp) => x.match(r))) { + return false; + } + + if (excludeRegExp && excludeRegExp.find((r: RegExp) => x.match(r))) { + return true; + } + + if (x.indexOf("node_modules") >= 0) { + if (x.indexOf("~es2x~") >= 0 || x.indexOf("~es6~") >= 0) { + return false; + } + return true; + } + + if (x.indexOf(clientVendor) >= 0) { + return true; + } + return false; }; diff --git a/packages/xarc-webpack/src/partials/extract-style.ts b/packages/xarc-webpack/src/partials/extract-style.ts index dc189e6f06..72116bc86c 100644 --- a/packages/xarc-webpack/src/partials/extract-style.ts +++ b/packages/xarc-webpack/src/partials/extract-style.ts @@ -142,19 +142,13 @@ module.exports = function() { { _name: `extract-css`, test: /\.css$/, - use: [ - miniCssExtractLoader(false), - ...getCssQueryUse(false) - ], - ...(enableCssModule && { exclude: cssModuleRegExp }), + use: [miniCssExtractLoader(false), ...getCssQueryUse(false)], + ...(enableCssModule && { exclude: cssModuleRegExp }) }, enableCssModule && { _name: `extract-css-modules`, test: /\.css$/, - use: [ - miniCssExtractLoader(true), - ...getCssQueryUse(true) - ], + use: [miniCssExtractLoader(true), ...getCssQueryUse(true)], include: cssModuleRegExp } ); @@ -172,7 +166,7 @@ module.exports = function() { miniCssExtractLoader(false), ...getCssQueryUse(false).concat({ loader: sassLoader } as any) ], - ...(enableCssModule && { exclude: cssModuleRegExp }), + ...(enableCssModule && { exclude: cssModuleRegExp }) }, enableCssModule && { _name: `extract-css-modules-scss`, @@ -198,7 +192,7 @@ module.exports = function() { _name: `extract-css-stylus`, test: /\.styl$/, use: [miniCssExtractLoader(false), ...getCssQueryUse(false).concat(stylusQuery)], - ...(enableCssModule && { exclude: cssModuleRegExp }), + ...(enableCssModule && { exclude: cssModuleRegExp }) }, enableCssModule && { _name: `extract-css-modules-stylus`, @@ -221,7 +215,7 @@ module.exports = function() { miniCssExtractLoader(false), ...getCssQueryUse(false).concat({ loader: lessLoader } as any) ], - ...(enableCssModule && { exclude: cssModuleRegExp }), + ...(enableCssModule && { exclude: cssModuleRegExp }) }, enableCssModule && { _name: `extract-css-modules-less`, diff --git a/packages/xarc-webpack/src/util/load-xarc-options.ts b/packages/xarc-webpack/src/util/load-xarc-options.ts index ee0249de03..4c19cb203c 100644 --- a/packages/xarc-webpack/src/util/load-xarc-options.ts +++ b/packages/xarc-webpack/src/util/load-xarc-options.ts @@ -1,20 +1,32 @@ /* eslint-disable @typescript-eslint/no-var-requires */ +// copied from @xarc/app-dev/lib/utils for now because of circular dep +// TODO: make a @xarc/common package for base utils etc + const ck = require("chalker"); const Path = require("path"); const Fs = require("fs"); -let loaded; +const regExpSig = "@xarc/__RegExp__@"; + +export const jsonParser = (key, value) => { + if (typeof value === "string" && value.startsWith(regExpSig)) { + return new RegExp(value.substr(regExpSig.length)); + } else { + return value; + } +}; + +let cachedXarcOptions; export function loadXarcOptions(dir: string = process.cwd()) { - if (loaded) { - return loaded; + if (cachedXarcOptions) { + return cachedXarcOptions; } - dir = dir || process.cwd(); const filename = Path.join(dir, ".etmp/xarc-options.json"); try { const data = Fs.readFileSync(filename, "utf-8"); - return (loaded = JSON.parse(data)); + return (cachedXarcOptions = JSON.parse(data, jsonParser)); } catch (err) { // eslint-disable-next-line console.error(ck` @@ -28,7 +40,7 @@ Please run "clap setup-dev" once to initialize the file .etmp/xarc-options.json before doing your thing that loads xarc's development code. `); - return (loaded = { + return (cachedXarcOptions = { webpack: {}, babel: {}, options: {}