chisel-scripts 1.0.0 → 2.0.0-alpha.0

package/lib/commands/build/formatStats.js

@@ -1,79 +0,0 @@
-// https://github.com/vuejs/vue-cli/blob/dcfb0bdbc948d73371f70d650f0f808f81c51cc1/packages/%40vue/cli-service/lib/commands/build/formatStats.js#L1
-
-module.exports = function formatStats(stats, dir, assetsDir, api) {
-  const fs = require('fs');
-  const path = require('path');
-  const zlib = require('zlib');
-  const ui = require('cliui')({ width: 80 });
-  const { chalk } = require('chisel-shared-utils');
-
-  const json = stats.toJson({
-    hash: false,
-    modules: false,
-    chunks: false,
-  });
-
-  let assets = json.assets
-    ? json.assets
-    : json.children.reduce((acc, child) => acc.concat(child.assets), []);
-
-  const seenNames = new Map();
-  const isJS = (val) => /\.js$/.test(val);
-  const isCSS = (val) => /\.css$/.test(val);
-  const isMinJS = (val) => /\.min\.js$/.test(val);
-  assets = assets
-    .map((a) => {
-      [a.name] = a.name.split('?');
-      return a;
-    })
-    .filter((a) => {
-      if (seenNames.has(a.name)) {
-        return false;
-      }
-      seenNames.set(a.name, true);
-      return (isJS(a.name) || isCSS(a.name)) && !a.name.startsWith(assetsDir);
-    })
-    .sort((a, b) => {
-      if (isJS(a.name) && isCSS(b.name)) return -1;
-      if (isCSS(a.name) && isJS(b.name)) return 1;
-      if (isMinJS(a.name) && !isMinJS(b.name)) return -1;
-      if (!isMinJS(a.name) && isMinJS(b.name)) return 1;
-      return b.size - a.size;
-    });
-
-  function formatSize(size) {
-    return `${(size / 1024).toFixed(2)} KiB`;
-  }
-
-  function getGzippedSize(asset) {
-    const filepath = api.resolve(path.join(dir, asset.name));
-    const buffer = fs.readFileSync(filepath);
-    return formatSize(zlib.gzipSync(buffer).length);
-  }
-
-  function makeRow(a, b, c) {
-    return `  ${a}\t    ${b}\t ${c}`;
-  }
-
-  ui.div(
-    `${makeRow(
-      chalk.cyan.bold(`File`),
-      chalk.cyan.bold(`Size`),
-      chalk.cyan.bold(`Gzipped`),
-    )}\n\n${assets
-      .map((asset) =>
-        makeRow(
-          /js$/.test(asset.name)
-            ? chalk.green(asset.name)
-            : chalk.blue(asset.name),
-          formatSize(asset.size),
-          getGzippedSize(asset),
-        ),
-      )
-      .join(`\n`)}`,
-  );
-
-  return `${ui.toString()}\n\n  ${chalk.gray(
-    `Images and other types of assets omitted.`,
-  )}\n`;
-};

package/lib/commands/build/index.js

@@ -1,125 +0,0 @@
-// TODO: no minify?
-// TODO: report
-
-module.exports = (api, options) => {
-  api.registerCommand(
-    'build',
-    (command) =>
-      command
-        .description('build for production')
-        .option(
-          '--no-clean',
-          'do not remove the dist directory before building the project',
-        )
-        .option('--watch', 'watch for changes')
-        .option('--report', 'generate report to help analyze bundles content'),
-    async (cmd) => {
-      const path = require('path');
-      const webpack = require('webpack');
-      const { chalk } = require('chisel-shared-utils');
-      const fs = require('fs-extra');
-      const formatStats = require('./formatStats');
-
-      process.env.NODE_ENV = 'production';
-
-      if (cmd.clean) {
-        await fs.remove(api.resolve(options.output.base));
-      }
-
-      const REPORT_ANALYZER_FILE_NAME = 'report-analyzer.html';
-      api.chainWebpack((webpackConfig) => {
-        if (cmd.report) {
-          webpackConfig
-            .plugin('webpack-bundle-analyzer')
-            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [
-              {
-                analyzerMode: 'static',
-                reportFilename: REPORT_ANALYZER_FILE_NAME,
-                openAnalyzer: false,
-              },
-            ]);
-        }
-      });
-
-      const config = await api.service.resolveWebpackConfig();
-
-      await new Promise((resolve, reject) => {
-        const targetDir = api.resolve(options.output.base);
-        config.watch = Boolean(cmd.watch);
-
-        webpack(config, (err, stats) => {
-          if (err) {
-            reject(err);
-            return;
-          }
-
-          const info = stats.toJson();
-
-          if (stats.hasErrors()) {
-            console.log(stats.toString({ colors: chalk.supportsColor }));
-            reject(new Error('Build failed with errors.'));
-            return;
-          }
-
-          if (stats.hasWarnings()) {
-            console.warn(info.warnings);
-          }
-
-          const targetDirShort = path.relative(api.service.context, targetDir);
-          const assetsDir = `${options.output.assets}/`;
-          console.log();
-          console.log(formatStats(stats, targetDirShort, assetsDir, api));
-
-          resolve();
-        });
-      });
-
-      if (cmd.report) {
-        const slash = (str) => str.replace(/\\/g, '/');
-        const { explore } = require('source-map-explorer');
-        const open = require('open');
-
-        const outAnalyzer = api.resolve(
-          options.output.base,
-          REPORT_ANALYZER_FILE_NAME,
-        );
-        const outSmScripts = api.resolve(
-          options.output.base,
-          'report-source-map-scripts.html',
-        );
-        const outSmStyles = api.resolve(
-          options.output.base,
-          'report-source-map-styles.html',
-        );
-
-        await Promise.all([
-          explore(
-            slash(
-              api.resolve(options.output.base, options.output.scripts, '*.js'),
-            ),
-            { output: { format: 'html', filename: outSmScripts } },
-          ),
-          explore(
-            slash(
-              api.resolve(options.output.base, options.output.styles, '*.css'),
-            ),
-            { output: { format: 'html', filename: outSmStyles } },
-          ),
-        ]).then(() => {});
-
-        console.log();
-        console.log(chalk.greenBright.bold(`Reports generated:`));
-        console.log(`${chalk.bold(`Webpack Bundle Analyzer:`)} ${outAnalyzer}`);
-        console.log(
-          `${chalk.bold(`Source map for script(s):`)} ${outSmScripts}`,
-        );
-        console.log(`${chalk.bold(`Source map for style(s):`)} ${outSmStyles}`);
-        console.log();
-
-        open(outAnalyzer);
-        open(outSmScripts);
-        open(outSmStyles);
-      }
-    },
-  );
-};

package/lib/commands/inspect.js

@@ -1,14 +0,0 @@
-module.exports = (api) => {
-  api.registerCommand(
-    'inspect',
-    (command) => command.description('inspect internal webpack config'),
-    async () => {
-      const { toString } = require('webpack-chain');
-      const { highlight } = require('cli-highlight');
-
-      const config = await api.service.resolveWebpackConfig();
-
-      console.log(highlight(toString(config), { language: 'js' }));
-    },
-  );
-};

package/lib/config/base.js

@@ -1,201 +0,0 @@
-module.exports = (api, options) => {
-  api.chainWebpack(async (webpackConfig) => {
-    const globby = require('globby');
-    const path = require('path');
-
-    const isProd = process.env.NODE_ENV === 'production';
-    const {
-      productionSourceMap = true,
-      productionMinimize = true,
-      react,
-    } = options;
-
-    if (isProd) {
-      webpackConfig
-        .mode('production')
-        .devtool(productionSourceMap ? 'source-map' : false);
-
-      if (!productionMinimize) {
-        webpackConfig.optimization.minimize(false);
-      }
-    } else {
-      // 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);
-
-    webpackConfig.context(api.service.context);
-
-    (
-      await globby([
-        path.join(baseDir, options.source.scripts, '*.js').replace(/\\/g, '/'),
-        path.join(baseDir, options.source.styles, '*.scss').replace(/\\/g, '/'),
-      ])
-    )
-      .map((p) => path.relative(api.service.context, p))
-      .sort()
-      .forEach((p) => {
-        const ext = path.extname(p);
-        const base = path.basename(p, ext);
-        const isScript = ext !== '.scss';
-        const outDir = options.output[!isScript ? 'styles' : 'scripts'];
-        const name = `${outDir}/${base}`;
-        const entry = webpackConfig.entry(name).add(`./${p}`);
-
-        if (isScript) {
-          if (react) {
-            entry.prepend('react-hot-loader/patch');
-          }
-        }
-      });
-
-    const outScriptsDir = options.output.scripts;
-    webpackConfig.output
-      .path(api.resolve(options.output.base))
-      .filename(`[name]${isProd ? '.[contenthash:8]' : ''}.js`)
-      .chunkFilename(`${outScriptsDir}/[id].js`);
-
-    // prettier-ignore
-    webpackConfig.resolve
-      .modules
-        .add('node_modules')
-        .add(api.resolve('node_modules'))
-        .end()
-      .alias
-        .set('@@', api.resolve(options.source.base))
-        .set('~~', api.resolve(options.source.base))
-        .set('@', api.resolve(options.source.base, options.source.scripts))
-        .set('~', api.resolve(options.source.base, options.source.scripts))
-        .set('assets', api.resolve(options.source.base, options.source.assets))
-        .set('~assets', api.resolve(options.source.base, options.source.assets));
-
-    if (react) {
-      if (!isProd) {
-        webpackConfig.resolve.alias.set('react-dom', '@hot-loader/react-dom');
-      }
-    }
-
-    const fileLoaderOptions = {
-      name(p) {
-        const relative = path.relative(
-          path.join(baseDir, options.source.assets),
-          path.dirname(p),
-        );
-
-        if (!relative) {
-          return `${options.output.assets}/[name].[hash:8].[ext]`;
-        }
-
-        return `${options.output.assets}/[folder]/[name].[hash:8].[ext]`;
-      },
-    };
-
-    const urlLoaderOptions = {
-      generator(content, mimetype, encoding, resourcePath) {
-        if (resourcePath.endsWith('.svg')) {
-          return require('mini-svg-data-uri')(content.toString());
-        }
-
-        return `data:${mimetype}${
-          encoding ? `;${encoding}` : ''
-        },${content.toString(encoding || undefined)}`;
-      },
-    };
-
-    // prettier-ignore
-    webpackConfig.module
-      .rule('assets')
-        .include
-          .add(api.resolve(path.join(baseDir, options.source.assets)))
-          .end()
-        .oneOf('inline')
-          .resourceQuery(/inline/)
-          .use('url')
-            .loader('url-loader')
-            .options(urlLoaderOptions)
-            .end()
-          .end()
-        .oneOf('external')
-          .use('file-loader')
-            .loader(require.resolve('file-loader'))
-            .options(fileLoaderOptions)
-
-    // prettier-ignore
-    webpackConfig.resolveLoader
-      .modules
-        .add('node_modules')
-        .add(api.resolve('node_modules'))
-
-    webpackConfig
-      .plugin('case-sensitive-paths')
-      .use(require('case-sensitive-paths-webpack-plugin'));
-
-    webpackConfig
-      .plugin('chisel-dynamic-public-path')
-      .use(require('../webpack-plugins/DynamicPublicPath'));
-
-    webpackConfig.plugin('webpackbar').use(require('webpackbar'));
-
-    if (isProd) {
-      // keep chunk ids stable so async chunks have consistent hash (#1916)
-      webpackConfig
-        .plugin('named-chunks')
-        .use(require('webpack/lib/NamedChunksPlugin'), [
-          (chunk) => {
-            if (chunk.name) {
-              return chunk.name;
-            }
-
-            const hash = require('hash-sum');
-            const joinedHash = hash(
-              Array.from(chunk.modulesIterable, (m) => m.id).join('_'),
-            );
-            return `chunk-${joinedHash}`;
-          },
-        ]);
-
-      // keep module.id stable when vendor modules does not change
-      webpackConfig
-        .plugin('hash-module-ids')
-        .use(require('webpack/lib/HashedModuleIdsPlugin'), [
-          { hashDigest: 'hex' },
-        ]);
-
-      if (productionMinimize) {
-        webpackConfig
-          .plugin('unminified-webpack-plugin')
-          .use(require('unminified-webpack-plugin'), [{ postfix: 'full' }]);
-      }
-    }
-  });
-};

package/lib/config/css.js

@@ -1,91 +0,0 @@
-module.exports = (api, options) => {
-  api.chainWebpack((webpackConfig) => {
-    const path = require('path');
-
-    const isProd = process.env.NODE_ENV === 'production';
-    const sourceMap = true;
-
-    const sassLoaderOptions = {
-      sourceMap,
-      sassOptions: {
-        indentedSyntax: false,
-        includePaths: [api.resolve('node_modules')], // TODO: don't use?
-        outputStyle: 'expanded',
-      },
-    };
-
-    const postCssLoaderOptions = {
-      sourceMap,
-    };
-
-    const cssLoaderOptions = {
-      sourceMap,
-      import: false,
-    };
-
-    const extractCssLoaderOptions = {
-      hmr: !isProd,
-      publicPath: path.relative(
-        api.resolve(path.join(options.source.base, options.source.styles)),
-        api.resolve(options.source.base),
-      ),
-    };
-
-    const assetsDir = api.resolve(
-      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)
-        .exclude
-          .add(assetsDir)
-          .end()
-        .use('extract-css-loader')
-          .loader(require('mini-css-extract-plugin').loader)
-          .options(extractCssLoaderOptions)
-          .end()
-        .use('css-loader')
-          .loader(require.resolve('css-loader'))
-          .options(cssLoaderOptions)
-          .end()
-        .use('postcss-loader')
-          .loader(require.resolve('postcss-loader'))
-          .options(postCssLoaderOptions)
-          .end()
-    };
-
-    createCssLoader('css', /\.css$/);
-
-    // prettier-ignore
-    createCssLoader('scss', /\.scss$/)
-      .use('sass-loader')
-        .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')
-      .use(require('mini-css-extract-plugin'), [
-        { filename: `[name]${isProd ? '.[contenthash:8]' : ''}.css` },
-      ]);
-
-    webpackConfig.optimization
-      .minimizer('css')
-      .use(require.resolve('../webpack-plugins/OptimizeCssnanoPlugin'), [
-        { sourceMap: true },
-      ]);
-
-    if (isProd) {
-      webpackConfig
-        .plugin('style-only-entries')
-        .use(require('webpack-fix-style-only-entries'), [{ silent: true }]);
-    }
-  });
-};

package/lib/config/js.js

@@ -1,52 +0,0 @@
-// TODO: allow easy inclusion of selected node modules
-// cache loader?
-
-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(excludeFunction)
-        .add(api.resolve(options.source.base, options.source.assets))
-        .end()
-      .use('babel-loader')
-        .loader(require.resolve('babel-loader'))
-
-    webpackConfig.optimization
-      .minimizer('js')
-      .use(require.resolve('terser-webpack-plugin'));
-  });
-};

package/lib/generate-and-serialize-config.js

@@ -1,9 +0,0 @@
-console.log = console.error.bind(console);
-
-const { toString } = require('webpack-chain');
-const config = require('../webpack.config');
-
-config.then((cfg) => {
-  cfg.plugins = []; // problems with serialization
-  process.stdout.write(toString(cfg, { verbose: true }));
-});

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

@@ -1,41 +0,0 @@
-// 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/lib/webpack-plugins/DynamicPublicPath.js

@@ -1,24 +0,0 @@
-class DynamicPublicPath {
-  constructor(options = {}) {
-    this.options = options;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  apply(compiler) {
-    compiler.hooks.compilation.tap('DynamicPublicPath', (compilation) => {
-      compilation.mainTemplate.hooks.requireExtensions.tap(
-        'DynamicPublicPath',
-        (source) => {
-          // Inspired by https://github.com/webpack/webpack/blob/9fe42e7c4027d0a74addaa3352973f6bb6d20689/lib/MainTemplate.js#L237
-          source +=
-            '\n\n// Chisel: Allow public path to be modified during runtime\n' +
-            '__webpack_require__.p = (typeof document !== "undefined" && document.documentElement.dataset.webpackPublicPath) || __webpack_require__.p;';
-
-          return source;
-        },
-      );
-    });
-  }
-}
-
-module.exports = DynamicPublicPath;