ui-default: init

将ui-default合并至主存储库便于维护

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

@@ -0,0 +1,82 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
+/* eslint-disable import/no-extraneous-dependencies */
+import _ from 'lodash';
+import moment from 'moment';
+import gulp from 'gulp';
+import log from 'fancy-log';
+import chalk from 'chalk';
+import svgmin from 'gulp-svgmin';
+import vinylBuffer from 'vinyl-buffer';
+import iconfont from 'gulp-iconfont';
+import plumber from 'gulp-plumber';
+import gulpif from 'gulp-if';
+import nunjucks from '../plugins/gulpNunjucks';
+import vjTouch from '../plugins/gulpTouch';
+
+let isInWatchMode = false;
+export const tasks = {};
+const iconTimestamp = moment.utc([2020, 0, 1, 0, 0, 0, 0]).unix();
+
+function handleWatchChange(name, r = 300) {
+  return _.debounce((ev) => {
+    log('File %s: %s', chalk.yellow(ev.type), ev.path);
+    tasks[name]();
+  }, r);
+}
+
+function offsetMtimeAtFirstBuild() {
+  // Offset the mtime at first build to
+  // workaround webpack/watchpack issue #25.
+  return gulpif(!isInWatchMode, vjTouch(~~((Date.now() - 30 * 1000) / 1000)));
+}
+
+export default function ({ errorHandler }) {
+  let iconfontTemplateArgs = null;
+
+  tasks['iconfont:template'] = () => gulp
+    .src('misc/icons/template/*.styl')
+    .pipe(nunjucks(iconfontTemplateArgs))
+    .pipe(gulp.dest('misc/.iconfont'))
+    .pipe(offsetMtimeAtFirstBuild());
+
+  tasks.iconfont = () => gulp
+    .src('misc/icons/*.svg')
+    .pipe(plumber({ errorHandler }))
+    .pipe(svgmin())
+    .pipe(gulp.dest('misc/icons'))
+    .pipe(offsetMtimeAtFirstBuild())
+    .pipe(iconfont({
+      fontHeight: 1000,
+      prependUnicode: false,
+      descent: 6.25 / 100 * 1000,
+      fontName: 'vj4icon',
+      formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
+      timestamp: iconTimestamp,
+    }))
+    .on('glyphs', (glyphs, options) => {
+      iconfontTemplateArgs = { glyphs, options };
+      tasks['iconfont:template']();
+    })
+    .pipe(gulp.dest('misc/.iconfont'))
+    .pipe(vinylBuffer())
+    .pipe(offsetMtimeAtFirstBuild());
+
+  tasks.watch = () => {
+    isInWatchMode = true;
+    gulp.watch('misc/icons/*.svg', handleWatchChange('iconfont'));
+  };
+
+  for (const key in tasks) {
+    // gulp4 uses function name directly as task name
+    Object.defineProperty(tasks[key], 'name', {
+      value: key,
+      configurable: true,
+    });
+    tasks[key] = gulp.series(tasks[key]);
+  }
+
+  tasks.default = gulp.series(gulp.parallel(tasks.iconfont));
+
+  return tasks;
+}

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

@@ -0,0 +1,177 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { dirname } from 'path';
+import webpack from 'webpack';
+import ExtractCssPlugin from 'mini-css-extract-plugin';
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
+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 mapWebpackUrlPrefix from '../utils/mapWebpackUrlPrefix';
+import StaticManifestPlugin from '../plugins/manifest.webpack';
+import root from '../utils/root';
+
+const beautifyOutputUrl = mapWebpackUrlPrefix([
+  { prefix: 'node_modules/katex/dist/', replace: './katex/' },
+  { prefix: 'misc/.iconfont', replace: './ui/iconfont' },
+]);
+const smp = new SpeedMeasurePlugin();
+
+export default function (env = {}) {
+  function babelLoader() {
+    return {
+      loader: 'babel-loader',
+      options: {
+        ...require(root('babel.config.js')), // eslint-disable-line
+        cacheDirectory: true,
+      },
+    };
+  }
+
+  function cssLoader() {
+    return {
+      loader: 'css-loader',
+      options: { importLoaders: 1 },
+    };
+  }
+
+  function postcssLoader() {
+    return {
+      loader: 'postcss-loader',
+      options: { sourceMap: env.production, config: { path: root('postcss.config.js') } },
+    };
+  }
+
+  function fileLoader() {
+    return {
+      loader: 'file-loader',
+      options: { name: '[path][name].[ext]?[sha1:hash:hex:10]' },
+    };
+  }
+
+  function extractCssLoader() {
+    return {
+      loader: ExtractCssPlugin.loader,
+      // FIXME auto?
+      options: {
+        publicPath: '',
+      },
+    };
+  }
+
+  const config = {
+    bail: true,
+    mode: env.production ? 'production' : 'development',
+    profile: true,
+    context: root(),
+    entry: {
+      hydro: './entry.js',
+      'theme.default': './theme/default.js',
+    },
+    output: {
+      path: root('public'),
+      publicPath: '/', // overwrite in entry.js
+      hashFunction: 'sha1',
+      hashDigest: 'hex',
+      hashDigestLength: 10,
+      filename: '[name].js?[chunkhash]',
+      chunkFilename: '[name].chunk.js?[chunkhash]',
+    },
+    resolve: {
+      modules: [root('node_modules'), root('../../node_modules')],
+      extensions: ['.js', '.jsx'],
+      alias: { vj: root() },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(svg|ttf|eot|woff|woff2|png|jpg|jpeg|gif)$/,
+          use: [fileLoader()],
+        },
+        {
+          test: /\.jsx?$/,
+          exclude: /node_modules[/\\]/,
+          use: [babelLoader()],
+        },
+        {
+          test: /\.styl$/,
+          use: [extractCssLoader(), cssLoader(), postcssLoader(), 'stylus-loader'],
+        },
+        {
+          test: /\.css$/,
+          use: [extractCssLoader(), cssLoader(), postcssLoader()],
+        },
+      ],
+    },
+    optimization: {
+      splitChunks: {
+        minChunks: 2,
+      },
+    },
+    plugins: [
+      new webpack.ProgressPlugin(),
+      new webpack.ProvidePlugin({
+        $: 'jquery',
+        jQuery: 'jquery',
+        'window.jQuery': 'jquery',
+        katex: 'katex/dist/katex.js',
+        React: 'react',
+      }),
+      new ExtractCssPlugin({
+        filename: '[name].css?[contenthash:10]',
+      }),
+      new webpack.LoaderOptionsPlugin({
+        test: /\.styl$/,
+        stylus: {
+          default: {
+            preferPathResolver: 'webpack',
+            use: [require('rupture')()], // eslint-disable-line global-require
+            import: ['~vj/common/common.inc.styl'],
+          },
+        },
+      }),
+      new FriendlyErrorsPlugin(),
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: root('static') },
+          { from: root(dirname(require.resolve('emojify.js/package.json')) + '/dist/images/basic'), to: 'img/emoji/' },
+        ],
+      }),
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: env.production ? '"production"' : '"debug"',
+        },
+      }),
+      ...env.production
+        ? [
+          new OptimizeCssAssetsPlugin(),
+          new webpack.optimize.ModuleConcatenationPlugin(),
+          new webpack.LoaderOptionsPlugin({ minimize: true }),
+          new webpack.HashedModuleIdsPlugin(),
+        ]
+        : [new webpack.NamedModulesPlugin()],
+      new webpack.LoaderOptionsPlugin({
+        options: {
+          context: root(),
+          customInterpolateName: (url) => beautifyOutputUrl(url),
+        },
+      }),
+      new MonacoWebpackPlugin({
+        // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+        languages: ['cpp', 'csharp', 'java', 'javascript', 'python', 'rust', 'ruby', 'php', 'pascal', 'go'],
+      }),
+      new StaticManifestPlugin({
+        fileName: 'static-manifest.json',
+        ignore: [
+          'img/emoji/',
+          'katex/',
+        ],
+      }),
+      ...env.measure ? [new BundleAnalyzerPlugin({ analyzerPort: 'auto' })] : [],
+    ],
+  };
+
+  return env.measure ? smp.wrap(config) : config;
+}

packages/ui-default/build/index.js

@@ -0,0 +1,6 @@
+require('@babel/register')({
+    "plugins": ["@babel/plugin-transform-runtime"],
+    "presets": [["@babel/preset-env", { "loose": true }]]
+});
+const main = require('./main.js');
+if (!module.parent) main();

packages/ui-default/build/main.js

@@ -0,0 +1,62 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { argv } from 'yargs';
+import webpack from 'webpack';
+import gulp from 'gulp';
+import log from 'fancy-log';
+import chalk from 'chalk';
+import root from './utils/root';
+import gulpConfig from './config/gulp';
+import webpackConfig from './config/webpack';
+
+function runWebpack({ watch, production, measure }) {
+  const compiler = webpack(webpackConfig({ watch, production, measure }));
+  return new Promise((resolve, reject) => {
+    function compilerCallback(err, stats) {
+      if (err) {
+        console.error(err.stack || err);
+        if (err.details) console.error(err.details);
+        reject(err);
+      }
+      if (argv.detail) console.log(stats.toString());
+      if (!watch && (!stats || stats.hasErrors())) process.exitCode = 1;
+      resolve();
+    }
+    if (watch) compiler.watch({}, compilerCallback);
+    else compiler.run(compilerCallback);
+  });
+}
+
+async function runGulp() {
+  function handleError(err) {
+    log(chalk.red('Error: %s'), chalk.reset(err.toString() + err.stack));
+    if (err) process.exit(1);
+  }
+  const gulpTasks = gulpConfig({ production: true, errorHandler: handleError });
+  return new Promise((resolve) => {
+    const taskList = {};
+
+    gulp.on('start', ({ uid, name }) => {
+      log(chalk.blue('Starting task: %s'), chalk.reset(name));
+      taskList[uid] = true;
+    });
+    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();
+      }
+    });
+    gulpTasks.default();
+  });
+}
+
+async function main() {
+  const dir = process.cwd();
+  process.chdir(root());
+  await runGulp({});
+  await runWebpack(argv);
+  process.chdir(dir);
+}
+
+module.exports = main;

packages/ui-default/build/plugins/gulpNunjucks.js

@@ -0,0 +1,27 @@
+import through from 'through2';
+import nunjucks from 'nunjucks';
+
+export default function compile(data, options = {}) {
+  return through.obj(function (file, encoding, callback) {
+    if (file.isNull()) {
+      callback(null, file);
+      return;
+    }
+    const context = { ...data, ...file.data };
+    const filePath = file.path;
+    const env = options.env || new nunjucks.Environment(new nunjucks.FileSystemLoader(file.base), options);
+    if (options.filters && !options.env) {
+      for (const key of Object.keys(options.filters)) {
+        env.addFilter(key, options.filters[key]);
+      }
+    }
+    try {
+      file.contents = Buffer.from(env.renderString(file.contents.toString(), context));
+      file.extname = '.styl';
+      this.push(file);
+    } catch (error) {
+      this.emit('error', new Error(`gulp-nunjucks ${error} ${filePath}`));
+    }
+    callback();
+  });
+}

packages/ui-default/build/plugins/gulpTouch.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import PluginError from 'plugin-error';
+import through from 'through2';
+import fs from 'fs-extra';
+
+export default function touch(mtime) {
+  async function touchFile(file) {
+    const fd = await fs.open(file.path, 'a');
+    try {
+      await fs.futimes(fd, mtime, mtime);
+    } finally {
+      await fs.close(fd);
+    }
+  }
+
+  function processStream(file, encoding, callback) {
+    if (file.isNull()) {
+      callback();
+      return;
+    }
+    if (file.isStream()) {
+      this.emit('error', new PluginError('gulpTouch', 'Stream not supported'));
+      callback();
+      return;
+    }
+    touchFile(file)
+      .catch((err) => this.emit('error', err))
+      .then(() => {
+        this.push(file);
+        callback();
+      });
+  }
+
+  return through.obj(processStream);
+}

packages/ui-default/build/plugins/manifest.webpack.js

@@ -0,0 +1,49 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const _ = require('lodash');
+const crypto = require('crypto');
+
+export default class StaticManifestPlugin {
+  constructor({ fileName, ignore }) {
+    this.fileName = fileName;
+    this.ignore = ignore;
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tap('sync', (compilation) => {
+      const stats = compilation.getStats().toJson();
+      const manifest = _(stats.assets)
+        .map((asset) => {
+          const { name } = asset;
+          // Skip files listed in ignore
+          if (_.some(this.ignore, (ignorePattern) => name.indexOf(ignorePattern) > -1)) {
+            return null;
+          }
+          // Skip calculating hash for names like ?xxxx
+          if (name.indexOf('?') > -1) {
+            return [
+              name.replace(/\?[\s\S]*/, ''), // origin name
+              name, // name with hash
+            ];
+          }
+          // We need to calculate hash for the remaining files.
+          const source = compilation.assets[asset.name].source();
+          const shasum = crypto.createHash('sha1');
+          shasum.update(source);
+          const hash = shasum.digest('hex').substr(0, 10);
+          return [
+            name, // origin name
+            `${name}?${hash}`, // name with hash
+          ];
+        })
+        .filter()
+        .orderBy(['0'])
+        .fromPairs()
+        .value();
+      const json = JSON.stringify(manifest, null, 2);
+      compilation.assets[this.fileName] = {
+        source: () => json,
+        size: () => json.length,
+      };
+    });
+  }
+}

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,216 @@
+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/build/utils/mapWebpackUrlPrefix.js

@@ -0,0 +1,18 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import _ from 'lodash';
+
+export default function mapWebpackUrlPrefix(mapList) {
+  const rules = mapList.map((mappingRule) => {
+    const regex = mappingRule.prefix.split('/').map((s) => _.escapeRegExp(s)).join('[\\/\\\\]');
+    return {
+      from: new RegExp(`^${regex}`, mappingRule.flag),
+      to: mappingRule.replace,
+    };
+  });
+  return function mapUrl(url) {
+    rules.forEach((rule) => {
+      url = url.replace(rule.from, rule.to);
+    });
+    return url;
+  };
+}

packages/ui-default/build/utils/root.js

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import path from 'path';
+
+export default function root(fn = '.') {
+  return path.resolve(__dirname, '../../', fn);
+}

packages/ui-default/build/ver.js

@@ -0,0 +1,8 @@
+const { writeFileSync } = require('fs');
+const { argv } = require('yargs');
+const pkg = require('../package.json');
+
+if (argv.dev) pkg.version = `${pkg.version}-dev`;
+else pkg.version = pkg.version.replace('-dev', '');
+
+writeFileSync(`${process.cwd()}/package.json`, JSON.stringify(pkg, null, 2));