release: [email protected] (#42)

* chore: version

* chore: remove index.js (#40)

* fix: deep copy babelConfig from webpack config

* chore: rename typos (#45)

* fix: set proxy headers when proxy server error (#47)

* fix: set proxy headers when proxy server error

* feat: only set enable: false will disable proxy

* chore: eslint

* feat: support calculate color variables for multi-theme (#44)

* chore: add package resolve-sass-import

* feat: support calculate color variables for @alifd/next

* chore: version

* chore: remove console log

* chore: comment for regex

* chore: rename typo and add readme example

* fix: check match result

* feat: support DllPlugin in ice-scripts (#48)

* feat: support DllPlugin

* chore: fix review comments

* chore: refactor code

* chore: fix review comments

* fix: webpack config for dll plugin (#52)

* fix: webpack config for dll plugin

* fix: html template for dll

* chore: typo and remove useless comment

* fix: renanme dll output filename

* feat: refactor webpack-dev-mock (#50)

* feat: support index.ts

* feat: dev mock is before devServer

* chore: update verison

* fix: hot reload mock

* chore: adjust verison

* style: code formatter

* chore: add changelog.md

* chore: adjust log verison

* chore: changlog

* style: code formatter (#54)

.eslintignore

@@ -14,6 +14,5 @@ packages/clean-css-parallel
 packages/css-prefix-plugin
 packages/extract-css-assets-webpack-plugin
 packages/uglify-parallel
-packages/webpack-dev-mock
 packages/webpack-plugin-import
 packages/ice-skin-loader

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.1.10
+
+- [fix] refactor mock dev server alibaba/ice#2455 alibaba/ice#2471 alibaba/ice#2462
+- [fix] modular-import did not work with ice-plugin-component alibaba/ice#2724
+- [feat] add dll plugin for ice-scripts
+- [fix] write header for proxy request when error ocur
+- [feat] support calculate color variables for multi-theme alibaba/ice#2715
+
 ## 2.1.9
 
 - [fix] lock less verison to 3.9.0 less/less.js#3414

packages/ice-plugin-component/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.5
+
+ - [fix] fix: modular-import did not work with ice-plugin-component alibaba/ice#2724
+
 ## 0.1.4
 
  - [fix] format resolve path in Windows

packages/ice-plugin-component/lib/index.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const fse = require('fs-extra');
+const clonedeep = require('lodash.clonedeep');
 const { getPkgJSONSync } = require('./utils/pkgJson');
 const getDemoDir = require('./utils/getDemoDir');
 const getDemos = require('./utils/getDemos');
@@ -18,12 +19,14 @@ module.exports = ({ context, chainWebpack, onHook, log }, opts = {}) => {
   const { command, rootDir, reRun } = context;
   const { type = 'fusion' } = opts;
   const pkg = getPkgJSONSync(rootDir);
-  // store babel config
-  let babelConfig;
+  // store webpack chain config
+  let webpackChain;
   // check adaptor folder
   const hasAdaptor = fse.existsSync(path.join(rootDir, 'adaptor')) && type === 'fusion';
 
   chainWebpack((config) => {
+    // expose config
+    webpackChain = config;
     // add @babel/plugin-transform-runtime
     // @babel/preset-env modules: commonjs
     configBabel(config, {
@@ -49,7 +52,7 @@ module.exports = ({ context, chainWebpack, onHook, log }, opts = {}) => {
       ],
     });
     // get babel config for component compile
-    babelConfig = config.module.rule('jsx').use('babel-loader').get('options');
+    const babelConfig = clonedeep(config.module.rule('jsx').use('babel-loader').get('options'));
     // babel option do not known cacheDirectory
     delete babelConfig.cacheDirectory;
 
@@ -76,6 +79,9 @@ module.exports = ({ context, chainWebpack, onHook, log }, opts = {}) => {
     // build src and umd adpator after demo build
     onHook('afterBuild', () => {
       process.env.BUILD_AGAIN = true;
+      // get babel config after all plugin had been excuted
+      const babelConfig = clonedeep(webpackChain.module.rule('jsx').use('babel-loader').get('options'));
+      delete babelConfig.cacheDirectory;
       // component buildSrc
       buildSrc({ babelConfig, rootDir, log });
       modifyPkgHomePage(pkg, rootDir);

packages/ice-plugin-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ice-plugin-component",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "ice plugin for develop component",
   "main": "lib/index.js",
   "scripts": {
@@ -21,6 +21,7 @@
     "ice-npm-utils": "^1.0.3",
     "js-yaml": "^3.13.1",
     "loader-utils": "^1.2.3",
+    "lodash.clonedeep": "^4.5.0",
     "marked": "^0.6.2",
     "npmlog": "^4.1.2",
     "prismjs": "^1.16.0",

packages/ice-plugin-dll/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0
+
+- [feat] 完成初始版本基础功能

packages/ice-plugin-dll/README.md

@@ -0,0 +1,24 @@
+## ice-plugin-dll
+
+ice plugin that uses Webpack DllPlugin
+
+## Install
+
+```bash
+$ npm install ice-plugin-dll --save-dev
+```
+
+## Usage
+
+```js
+// ice.config.js
+module.exports = {
+  ...
+  plugins: [
+    'ice-plugin-dll',
+  ],
+  alias: {
+  ...
+};
+
+```

packages/ice-plugin-dll/index.js

@@ -0,0 +1,73 @@
+const webpack = require('webpack');
+const path = require('path');
+const buildDll = require('./lib/buildDll');
+
+module.exports = async ({ chainWebpack, context, log }) => {
+  const { rootDir, command, pkg } = context;
+  // only active in dev mode
+  if (command === 'dev') {
+    const htmlTemplate = path.join(rootDir, 'public', 'index.html');
+    await buildDll({
+      webpackConfig: context.getWebpackConfig(),
+      rootDir,
+      pkg,
+      htmlTemplate,
+      log,
+    });
+
+    const join = path.join.bind(path, rootDir);
+    log.info('Dll build complete');
+
+    chainWebpack((config) => {
+      config
+        .devServer
+          .contentBase([
+            rootDir,
+            join('node_modules', 'plugin-dll', 'public'),
+          ])
+          .end()
+        .plugin('DllReferencePlugin')
+          .use(webpack.DllReferencePlugin, [{
+            context: join('node_modules', 'plugin-dll'),
+            manifest: join('node_modules', 'plugin-dll', 'vendor-manifest.json'),
+          }])
+          .end()
+        .plugin('CopyWebpackPlugin')
+          .tap(([args]) => [[{
+            ...(args[0] || {}),
+            from: join('node_modules', 'plugin-dll', 'public'),
+          }]]);
+
+      // Handle multi entry config
+      const entry = config.toConfig().entry;
+      const entryNames = Object.keys(entry);
+      const isMultiEntry = entryNames.length > 1;
+
+      if (isMultiEntry) {
+        // remove default HtmlWebpackPlugin
+        config.plugins.delete('HtmlWebpackPlugin');
+
+        // generate multiple html file
+        // webpack-chain entry must be [name]: [...values]
+        entryNames.forEach((entryName) => {
+          if (isMultiEntry) {
+            const pluginKey = `HtmlWebpackPlugin_${entryName}`;
+            config
+              .plugin(pluginKey)
+                .tap(([options]) => [{
+                  ...options,
+                  template: join('node_modules', 'plugin-dll', 'public', 'index.html'),
+                }]);
+          }
+        });
+      } else { // Use template index.html
+        config
+          .plugin('HtmlWebpackPlugin')
+            .tap(([options]) => [{
+              ...options,
+              template: join('node_modules', 'plugin-dll', 'public', 'index.html'),
+            }]);
+      }
+    });
+  }
+};

packages/ice-plugin-dll/lib/buildDll.js

@@ -0,0 +1,102 @@
+const webpack = require('webpack');
+const path = require('path');
+const fs = require('fs');
+const cheerio = require('cheerio');
+const getDllConfig = require('./config/webpack.dll');
+
+async function checkRebuildDll(outputDir, dependencies, log) {
+  // Generate dependencies.json or compare dependencies
+  const dependenciesJSON = path.join(outputDir, 'dependencies.json');
+  if (!fs.existsSync(dependenciesJSON)){
+    fs.writeFileSync(dependenciesJSON, JSON.stringify({
+      ...dependencies,
+    }));
+    return true;
+  } else {
+    try {
+      const currPkgString = fs.readFileSync(path.resolve(outputDir, 'dependencies.json'), 'utf-8');
+      if (currPkgString === JSON.stringify(dependencies)) {
+        return false;
+      }
+      return true;
+    } catch (err) {
+      log.error('Error reading dependencies.json');
+      throw err;
+    }
+  }
+}
+
+async function generateDllVendorFile(outputDir, dependencies) {
+  // Generate vendor.js
+  let data = '';
+
+  const vendor = path.join(outputDir, 'vendor.js');
+  Object.keys(dependencies).forEach(dependency => {
+    data = data.concat(`require('${dependency}');\n`);
+  });
+  fs.writeFileSync(vendor, data);
+}
+
+async function includeDllInHTML(outputDir, defaultAppHtml, log, rebuild) {
+  try {
+    const htmlTemplate = path.join(outputDir, 'public', 'index.html');
+    const cssFile = path.join(outputDir, 'public', 'css', 'vendor.css');
+
+    // Read html content from default app index.html
+    const htmlContent = fs.readFileSync(defaultAppHtml, 'utf-8');
+    const $ = cheerio.load(htmlContent);
+
+    // add vendor.css
+    if (fs.existsSync(cssFile) && !rebuild) {
+      $('head').append('<link href="css/vendor.css" rel="stylesheet">');
+    }
+
+    // Check if vendor.js is included inside the HTML file
+    const hasVendor = (Array.from($('script')) || []).some(script => script.attribs.src === 'vendor.dll.js');
+    if (!hasVendor) {
+      $('body').append('<script data-id="dll" src="vendor.dll.js"></script>');
+    }
+
+    fs.writeFileSync(htmlTemplate, $.root().html());
+  } catch (err) {
+    log.error('Error opening or writing to file');
+  }
+}
+
+async function buildDll({
+  webpackConfig,
+  rootDir,
+  pkg,
+  htmlTemplate,
+  log,
+}) {
+  // Create directories to store Dll related files
+  const outputDir = path.join(rootDir, 'node_modules', 'plugin-dll');
+  if (!fs.existsSync(outputDir)){
+    fs.mkdirSync(outputDir);
+  }
+  if (!fs.existsSync(path.join(outputDir, "public"))){
+    fs.mkdirSync(path.join(outputDir, "public"));
+  }
+
+  // Check for rebuild Dll status
+  const rebuildDll = await checkRebuildDll(outputDir, pkg.dependencies, log);
+  // Include vendor.js in HTML file
+  await includeDllInHTML(outputDir, htmlTemplate, log, rebuildDll);
+  if (rebuildDll) {
+    await generateDllVendorFile(outputDir, pkg.dependencies);
+    const dllConfig = getDllConfig(webpackConfig, rootDir);
+    return new Promise((resolve, reject) => {
+      log.info("Building Dll");
+      webpack(dllConfig, error => {
+        if (error) {
+          return reject(error);
+        }
+        resolve();
+      });
+    });
+  }
+  log.info("No new changes from dependencies.json")
+}
+
+module.exports = buildDll;

packages/ice-plugin-dll/lib/config/webpack.dll.js

@@ -0,0 +1,35 @@
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = (defaultConfig, rootDir) => {
+  const join = path.join.bind(path, rootDir);
+
+  // merge default config to compile
+  return {
+    ...defaultConfig,
+    entry: {
+      vendor: [
+        join('node_modules', 'plugin-dll', 'vendor.js'),
+      ],
+    },
+    output: {
+      path: join('node_modules', 'plugin-dll', 'public'),
+      filename: '[name].dll.js',
+      library: '[name]',
+    },
+    plugins: [
+      ...defaultConfig.plugins,
+      new webpack.DllPlugin({
+        path: join('node_modules', 'plugin-dll', '[name]-manifest.json'),
+        name: '[name]',
+        context: join('node_modules', 'plugin-dll'),
+      }),
+    ],
+    resolve: {
+      modules: [
+        join('node_modules', 'plugin-dll'),
+        'node_modules',
+      ],
+    },
+  }
+};

packages/ice-plugin-dll/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "ice-plugin-dll",
+  "version": "0.1.0",
+  "description": "ice plugin that uses Webpack DllPlugin",
+  "main": "index.js",
+  "author": "tanhengyeow",
+  "license": "ISC",
+  "dependencies": {
+    "cheerio": "^1.0.0-rc.3"
+  },
+  "peerDependencies": {
+    "webpack": "^4.39.2"
+  }
+}

packages/ice-plugin-fusion/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.10
+
+- [feat] 多主题支持 @alifd/next 组件色值计算 sass 变量替换
+
 ## 0.1.9
 
 - [fix] 多主题切换函数 `__changeTheme__` 前置注入