ui: webpack: add webpackbar

packages/ui-default/build/config/webpack.js

@@ -8,6 +8,7 @@ import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import SpeedMeasurePlugin from 'speed-measure-webpack-plugin';
+import WebpackBar from 'webpackbar';
 import mapWebpackUrlPrefix from '../utils/mapWebpackUrlPrefix';
 import StaticManifestPlugin from '../plugins/manifest.webpack';
 import root from '../utils/root';
@@ -124,7 +125,7 @@ export default function (env = {}) {
       },
     },
     plugins: [
-      new webpack.ProgressPlugin(),
+      new WebpackBar(),
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',

packages/ui-default/build/main.js

@@ -18,7 +18,7 @@ function runWebpack({
       compress: true,
       hot: true,
       disableHostCheck: true,
-      stats: 'errors-warnings',
+      stats: 'none',
       index: '',
       proxy: {
         context: () => true,
@@ -60,10 +60,7 @@ async function runGulp() {
     gulp.on('stop', ({ uid, name }) => {
       log(chalk.green('Finished: %s'), chalk.reset(name));
       taskList[uid] = false;
-
+      if (Object.values(taskList).filter((b) => b).length === 0) resolve();
-      if (Object.values(taskList).filter((b) => b).length === 0) {
-        resolve();
-      }
     });
     gulpTasks.default();
   });

packages/ui-default/build/plugins/provide.snowpack.js

@@ -1,23 +0,0 @@
-module.exports = function () {
-  return {
-    name: 'provide-plugin',
-    async transform({ id, fileExt, contents }) {
-      if (fileExt !== '.js' && fileExt !== '.jsx') return contents;
-      if (id.includes('/node_modules/jquery.transit/')) {
-        return `import jQuery from 'jquery'\n${contents.replace('this, function', '{jQuery}, function')}`;
-      }
-      if (id.includes('/node_modules/sticky-kit/')) {
-        return `import jQuery from 'jquery'\n${contents.replace('$ = this.jQuery || window.jQuery;', '$ = jQuery;')}`;
-      }
-      if (id.includes('/node_modules/')) {
-        if (!/\/(jquery-scroll-lock|jquery\.easing|jquery\.transit)\//.test(id)) return { contents };
-      }
-      if (contents.includes('$(')) contents = `import $ from 'jquery';\n${contents}`;
-      if (contents.includes('jQuery')) contents = `import jQuery from 'jquery';\n${contents}`;
-      if (!contents.includes('import React')) {
-        if (contents.includes('React.') || fileExt === '.jsx') contents = `import React from 'react';\n${contents}`;
-      }
-      return contents.replace(/process\.env/g, 'import.meta.env');
-    },
-  };
-};

packages/ui-default/build/plugins/require-context.snowpack.js

@@ -1,216 +0,0 @@
-const acorn = require('acorn');
-const stage3 = require('acorn-stage3');
-const walk = require('acorn-walk');
-const astring = require('astring');
-const path = require('path');
-const fsp = require('fs').promises;
-
-const dirWatchers = {};
-
-const parser = acorn.Parser.extend(stage3);
-async function requireContext(filePath) {
-  const source = await fsp.readFile(filePath, 'utf8');
-  if (!/\brequire\s*\.\s*context\s*\(/.test(source)) {
-    delete dirWatchers[filePath];
-    return null;
-  }
-  const ast = parser.parse(source,
-    { sourceType: 'module', ecmaVersion: 'latest', locations: true });
-  const base = path.dirname(path.resolve(filePath));
-  const nodes = [];
-  walk.simple(ast, {
-    CallExpression(node) {
-      const { callee } = node;
-      const args = node.arguments;
-      if (callee.type !== 'MemberExpression') return;
-      if (callee.object.name !== 'require') return;
-      if (callee.property.name !== 'context') return;
-      if (args.length === 0) return;
-      if (!args.every((arg) => arg.type === 'Literal')) return;
-      if (args.length > 2 && !args[2].regex) return;
-      nodes.push(node);
-    },
-  });
-  if (nodes.length === 0) {
-    delete dirWatchers[filePath];
-    return null;
-  }
-  const imports = [];
-  const dirs = [];
-  await Promise.all(nodes.map(async (node) => {
-    const args = node.arguments;
-    const directory = path.resolve(base, args[0].value);
-    const recurse = args[1] && args[1].value;
-    const regExp = args[2] && new RegExp(args[2].regex.pattern, args[2].regex.flags);
-    dirs.push(directory);
-    async function getFiles(dir, recurse, pattern) {
-      try {
-        const dirents = await fsp.readdir(dir, { withFileTypes: true });
-        const files = await Promise.all(dirents.map((dirent) => {
-          const res = path.resolve(dir, dirent.name);
-          if (dirent.isDirectory()) {
-            return (recurse !== false) && getFiles(res);
-          }
-          return (!pattern || pattern.test(res)) ? res : null;
-        }));
-        return Array.prototype.concat(...files);
-      } catch (error) {
-        if (error.code === 'ENOENT') return [];
-        throw error;
-      }
-    }
-    const files = (await getFiles(directory, recurse, regExp))
-      .filter((file) => file).map((file) => {
-        file = path.relative(base, file);
-        if (!file.startsWith('/') && !file.startsWith('.')) file = `./${file}`;
-        return file;
-      });
-    const modules = files.map((file) => Math.random().toString(36).slice(2).replace(/\d/g, '') + file.split('/').pop().split('.')[0]
-      .replace(/^\w/, (c) => c.toUpperCase())
-      .replace(/[-_]\w/g, (c) => c[1].toUpperCase()).replace(/\W/g, '$'));
-    files.forEach((file, i) => {
-      imports.push({
-        type: 'ImportDeclaration',
-        specifiers: [
-          {
-            type: 'ImportDefaultSpecifier',
-            local: { type: 'Identifier', name: modules[i] },
-          },
-        ],
-        source: { type: 'Literal', value: file, raw: JSON.stringify(file) },
-      });
-    });
-    const keys = files.map((file) => `./${path.relative(directory, path.resolve(base, file))}`);
-    const contextKeys = {
-      type: 'ArrayExpression',
-      elements: keys.map((file) => (
-        { type: 'Literal', value: file, raw: JSON.stringify(file) }
-      )),
-    };
-    const contextMap = {
-      type: 'ObjectExpression',
-      properties: keys.map((key, i) => ({
-        type: 'Property',
-        method: false,
-        shorthand: false,
-        computed: false,
-        key: { type: 'Literal', value: key, raw: JSON.stringify(key) },
-        value: {
-          type: 'ObjectExpression',
-          properties: [{
-            type: 'Property',
-            method: false,
-            shorthand: false,
-            computed: false,
-            key: { type: 'Identifier', name: 'default' },
-            value: { type: 'Identifier', name: modules[i] },
-            kind: 'init',
-          }],
-        },
-        kind: 'init',
-      })),
-    };
-    const contextFn = {
-      type: 'VariableDeclaration',
-      declarations: [
-        {
-          type: 'VariableDeclarator',
-          id: { type: 'Identifier', name: 'context' },
-          init: {
-            type: 'ArrowFunctionExpression',
-            id: null,
-            expression: true,
-            generator: false,
-            async: false,
-            params: [{ type: 'Identifier', name: 'id' }],
-            body: {
-              type: 'MemberExpression',
-              object: contextMap,
-              property: { type: 'Identifier', name: 'id' },
-              computed: true,
-              optional: false,
-            },
-          },
-        },
-      ],
-      kind: 'let',
-    };
-    const keyFn = {
-      type: 'ExpressionStatement',
-      expression: {
-        type: 'AssignmentExpression',
-        operator: '=',
-        left: {
-          type: 'MemberExpression',
-          object: { type: 'Identifier', name: 'context' },
-          property: { type: 'Identifier', name: 'keys' },
-          computed: false,
-          optional: false,
-        },
-        right: {
-          type: 'ArrowFunctionExpression',
-          id: null,
-          expression: true,
-          generator: false,
-          async: false,
-          params: [],
-          body: contextKeys,
-        },
-      },
-    };
-    const contextExpr = {
-      type: 'CallExpression',
-      callee: {
-        type: 'ArrowFunctionExpression',
-        id: null,
-        expression: false,
-        generator: false,
-        async: false,
-        params: [],
-        body: {
-          type: 'BlockStatement',
-          body: [
-            contextFn,
-            keyFn,
-            {
-              type: 'ReturnStatement',
-              argument: {
-                type: 'Identifier',
-                name: 'context',
-              },
-            },
-          ],
-        },
-      },
-      arguments: [],
-      optional: false,
-    };
-    delete node.callee;
-    delete node.arguments;
-    delete node.optional;
-    Object.assign(node, contextExpr);
-  }));
-  ast.body.unshift(...imports);
-  dirWatchers[filePath] = dirs;
-  return astring.generate(ast);
-}
-
-module.exports = function (snowpackConfig, pluginOptions) {
-  return {
-    name: 'require-context-plugin',
-    resolve: {
-      input: Array.from(pluginOptions.input || ['.js']),
-      output: ['.js'],
-    },
-    onChange({ filePath }) {
-      for (const [source, dirs] of Object.entries(dirWatchers)) {
-        if (dirs.some((dir) => filePath.startsWith(dir))) {
-          this.markChanged(source);
-        }
-      }
-    },
-    load({ filePath }) {
-      return requireContext(filePath);
-    },
-  };
-};

packages/ui-default/package.json

@@ -21,7 +21,7 @@
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-react": "^7.13.13",
     "@babel/register": "^7.13.14",
-    "@babel/runtime-corejs2": "^7.14.0",
+    "@babel/runtime-corejs3": "^7.14.0",
     "@hydrooj/utils": "^1.0.15",
     "ansi_up": "^5.0.1",
     "autoprefixer": "^9.8.6",
@@ -96,7 +96,8 @@
     "wastyle": "^0.0.5",
     "webpack": "^4.44.2",
     "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^3.11.2",
+    "webpackbar": "^5.0.0-3"
   },
   "dependencies": {
     "98.css": "^0.1.16",