chisel-scripts 1.0.0-alpha.4 → 1.0.0-alpha.8

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 <!-- INSERT-NEW-ENTRIES-HERE -->
 
+## 1.0.0-alpha.8 (2021-12-16)
+
+## 1.0.0-alpha.7 (2020-09-21)
+
+- Add WP dev server test with puppeteer ([dbc0f1d](https://github.com/xfiveco/generator-chisel/commit/dbc0f1d))
+
+## 1.0.0-alpha.6 (2020-08-06)
+
+- Update CSS bundling: use custom loader instead of importer, make fibers optional ([829dc26](https://github.com/xfiveco/generator-chisel/commit/829dc26))
+
+## 1.0.0-alpha.5 (2020-08-04)
+
+- Add frontend generator and commands tests ([c32fa26](https://github.com/xfiveco/generator-chisel/commit/c32fa26))
+- Fix source maps for styles during development ([8ba6e78](https://github.com/xfiveco/generator-chisel/commit/8ba6e78))
+- Improve base config, final config generation ([61ce1d5](https://github.com/xfiveco/generator-chisel/commit/61ce1d5))
+- Update babel loader config: support transpileDependencies, exclude assets ([c5e21bd](https://github.com/xfiveco/generator-chisel/commit/c5e21bd))
+
 ## 1.0.0-alpha.4 (2020-07-21)
 
 - Add Changelogs ([25d6245](https://github.com/xfiveco/generator-chisel/commit/25d6245))

package/bin/chisel-scripts.js

@@ -2,9 +2,26 @@
 
 const Service = require('../lib/Service');
 
-const service = new Service();
+// console.log('CREATE SERVICE');
 
-service.run(process.argv[2], process.argv.slice(3)).catch((err) => {
-  console.error(err);
-  process.exit(1);
-});
+if (!Object.fromEntries) {
+  Object.fromEntries = function fromEntries(iterable) {
+    return [...iterable].reduce((obj, [key, val]) => {
+      obj[key] = val;
+      return obj;
+    }, {});
+  };
+}
+
+if (typeof jest !== 'undefined') {
+  module.exports = (argv) => {
+    const service = new Service();
+    return service.run(argv[0], argv.slice(1));
+  };
+} else {
+  const service = new Service();
+  service.run(process.argv[2], process.argv.slice(3)).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}

package/lib/Service.js

@@ -182,7 +182,17 @@ module.exports = class Service {
 
     const commanderArgs = [...(name ? [name] : []), ...args];
 
-    return this.program.parseAsync(commanderArgs, { from: 'user' });
+    await this.program.parseAsync(commanderArgs, { from: 'user' });
+    if (this.program._actionResults) {
+      const results = await Promise.all(this.program._actionResults);
+      if (results.length === 1) {
+        return results[0];
+      }
+
+      return results;
+    }
+
+    return undefined;
   }
 
   async resolveChainableWebpackConfig() {
@@ -202,7 +212,14 @@ module.exports = class Service {
     let config = chainableConfig.toConfig();
     const original = config;
 
-    config.node = false;
+    if (typeof config.node === 'undefined') {
+      config.node = false;
+    }
+
+    if (!Array.isArray(config.externals)) {
+      config.externals =
+        typeof config.externals === 'undefined' ? [] : [config.externals];
+    }
 
     // apply raw config fns
     this.webpackRawConfigFns.forEach((fn) => {

package/lib/chisel.config.base.js

@@ -16,10 +16,14 @@ module.exports = {
     assets: 'assets',
   },
 
+  wp: {
+    directoryName: 'wp',
+  },
+
   staticFrontend: {
     serveDist: false,
     skipHtmlExtension: false,
-    buildFormat: 'prettify', // pretty, minify, as-is/undefined
+    buildFormat: 'prettify', // prettify, minify, as-is/undefined
     htmlHint: true,
   },
 

package/lib/config/base.js

@@ -19,7 +19,37 @@ module.exports = (api, options) => {
         webpackConfig.optimization.minimize(false);
       }
     } else {
-      webpackConfig.mode('development').devtool('cheap-module-eval-source-map');
+      // webpackConfig.mode('development').devtool('cheap-module-eval-source-map');
+      webpackConfig.mode('development').devtool(false);
+
+      // Use separate source maps for styles due to
+      // https://github.com/webpack-contrib/mini-css-extract-plugin/issues/529
+
+      const devToolShared = {
+        module: true,
+        columns: false,
+        noSources: false,
+      };
+
+      // * is mini-css-extract-plugin
+
+      webpackConfig
+        .plugin('devtool-default')
+        .use(require('webpack/lib/EvalSourceMapDevToolPlugin'), [
+          {
+            ...devToolShared,
+            test: /(?!(?:^\*|\.s?css)$)/,
+          },
+        ]);
+
+      webpackConfig
+        .plugin('devtool-styles')
+        .use(require('webpack/lib/SourceMapDevToolPlugin'), [
+          {
+            ...devToolShared,
+            test: /(?=(?:^\*|\.s?css)$)/,
+          },
+        ]);
     }
 
     const baseDir = api.resolve(options.source.base);

package/lib/config/css.js

@@ -1,6 +1,5 @@
 module.exports = (api, options) => {
   api.chainWebpack((webpackConfig) => {
-    const globby = require('globby');
     const path = require('path');
 
     const isProd = process.env.NODE_ENV === 'production';
@@ -11,21 +10,7 @@ module.exports = (api, options) => {
       sassOptions: {
         indentedSyntax: false,
         includePaths: [api.resolve('node_modules')], // TODO: don't use?
-        outputStyle: 'expanded', //  TODO: test postcss and add minifier
-        importer(url, prev, done) {
-          (async () => {
-            if (globby.hasMagic(url)) {
-              const files = (
-                await globby(url, { cwd: path.dirname(prev) })
-              ).sort();
-              done({
-                contents: files.map((file) => `@import '${file}';`).join('\n'),
-              });
-            } else {
-              done(null);
-            }
-          })();
-        },
+        outputStyle: 'expanded',
       },
     };
 
@@ -50,6 +35,9 @@ module.exports = (api, options) => {
       path.join(options.source.base, options.source.assets),
     );
 
+    // Note: thread loader cannot be used right now
+    // https://github.com/webpack-contrib/thread-loader/issues/79
+
     const createCssLoader = (rule, test) => {
       // prettier-ignore
       return webpackConfig.module.rule(rule).test(test)
@@ -78,6 +66,9 @@ module.exports = (api, options) => {
         .loader(require.resolve('sass-loader'))
         .options(sassLoaderOptions)
         .end()
+      .use('sass-glob-loader')
+        .loader(require.resolve('../webpack-loaders/sass-glob-loader.js'))
+        .end();
 
     webpackConfig
       .plugin('extract-css')

package/lib/config/js.js

@@ -1,10 +1,47 @@
 // TODO: allow easy inclusion of selected node modules
 // cache loader?
 
-module.exports = (api) => {
+const path = require('path');
+
+const isWindows = process.platform === 'win32';
+// https://github.com/vuejs/vue-cli/blob/544e0547054947c471fe9d71a2b967e57f5f3111/packages/%40vue/cli-plugin-babel/index.js
+function genTranspileDepRegex(transpileDependencies) {
+  const deps = transpileDependencies.map((dep) => {
+    if (typeof dep === 'string') {
+      const depPath = path.join('node_modules', dep, '/');
+      return isWindows
+        ? depPath.replace(/\\/g, '\\\\') // double escape for windows style path
+        : depPath;
+    }
+    if (dep instanceof RegExp) {
+      return dep.source;
+    }
+    return undefined;
+  });
+  return deps.length ? new RegExp(deps.join('|')) : null;
+}
+
+module.exports = (api, options) => {
   api.chainWebpack((webpackConfig) => {
+    const transpileDepRegex = genTranspileDepRegex(
+      options.transpileDependencies || [],
+    );
+
+    const excludeFunction = (filepath) => {
+      if (transpileDepRegex && transpileDepRegex.test(filepath)) {
+        return false;
+      }
+      // Don't transpile node_modules
+      return /node_modules/.test(filepath);
+    };
+
     // prettier-ignore
-    webpackConfig.module.rule('js').test(/\.m?jsx?$/).exclude.add(/node_modules/).end()
+    webpackConfig.module.rule('js')
+      .test(/\.m?jsx?$/)
+      .exclude
+        .add(excludeFunction)
+        .add(api.resolve(options.source.base, options.source.assets))
+        .end()
       .use('babel-loader')
         .loader(require.resolve('babel-loader'))
 

package/lib/webpack-loaders/sass-glob-loader.js

@@ -0,0 +1,41 @@
+// Based on https://github.com/mikevercoelen/gulp-sass-glob/blob/255ee047789e69c82d5e3fc87452360ef8c56f41/src/index.js
+
+// we initially used custom dart-sass importer instead of this but there
+// is noticeable performance difference
+
+const path = require('path');
+const globby = require('globby');
+
+const IMPORT_RE = /^([ \t]*(?:\/\*.*)?)@import\s+["']([^"']+(?:\.scss|\.sass)?)["'];?([ \t]*(?:\/[/*].*)?)$/gm;
+
+module.exports = async function sassGlobLoader(content) {
+  // console.log(`Sass glob loader for ${this.resourcePath}`);
+
+  const file = this.resourcePath;
+  const base = path.dirname(file);
+
+  const newContent = content.replace(
+    IMPORT_RE,
+    (importRule, startComment, globPattern, endComment) => {
+      if (globby.hasMagic(globPattern)) {
+        const files = globby.sync(globPattern, { cwd: base }).sort();
+
+        const filesString = files.map((f) => `@import '${f}';`).join('\n');
+
+        // Inlining sources here makes sass build even faster
+        // but breaks source maps
+        // const filesString = files
+        //   .map((f) => fs.readFileSync(path.join(base, f), 'utf8'))
+        //   .join('\n');
+
+        return startComment + filesString + endComment;
+      }
+
+      return importRule;
+    },
+  );
+
+  // console.log(newContent);
+
+  return newContent;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chisel-scripts",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.8",
   "description": "TODO",
   "bin": {
     "chisel-scripts": "bin/chisel-scripts.js"
@@ -36,7 +36,6 @@
     "commander": "^5.1.0",
     "css-loader": "^3.5.3",
     "cssnano": "^4.1.10",
-    "fibers": "^5.0.0",
     "file-loader": "^6.0.0",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
@@ -61,5 +60,8 @@
     "webpack-merge": "^4.2.2",
     "webpackbar": "^4.0.0"
   },
-  "gitHead": "bfa44f894a295b562f472e4c6899eb2ba59d2f02"
+  "optionalDependencies": {
+    "fibers": "^5.0.0"
+  },
+  "gitHead": "a4f0deade67a28ccf68ce08ab89b32c15b3d9864"
 }