refactor: rework bundle core logic (#2219)

* refactor: rework bundle core logic

* chore: ci

* chore: revert

* chore: lint

* chore: format code

.github/workflows/auto-publisher.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
           registry-url: https://registry.npmjs.org/
       - run: npm install
       - run: npm run setup

.github/workflows/bench.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - master
   pull_request:
-    brenches:
+    branches:
       - '^bench'
 
 jobs:

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x]
+        node-version: [12.x]
     steps:
     - uses: actions/checkout@v2
     - name: Set branch name

.gitignore

@@ -12,3 +12,4 @@ coverage/
 node_modules/
 examples/test
 .eslintcache
+*.lock

lerna.json

@@ -1,20 +1,15 @@
 {
-  "version": "1.0.0",
-  "packages": [
-    "packages/*"
-  ],
+  "version": "1.7.0",
+  "npmClient": "ayarn",
+  "useWorkspaces": true,
   "command": {
     "bootstrap": {
-      "npmClientArgs": [
-        "--no-package-lock"
-      ]
-    },
-    "publish": {
-      "skipGit": true,
-      "allowBranch": "master",
-      "ignoreChanges": [
-        "*.md"
-      ]
+      "npmClientArgs": ["--no-lockfile"]
     }
-  }
+  },
+  "packages": [
+    "packages/*",
+    "scripts/bench"
+  ]
 }
+

package.json

@@ -1,9 +1,5 @@
 {
   "private": true,
-  "devEngines": {
-    "node": "8.x || 9.x || 10.x || 11.x",
-    "npm": "6.x"
-  },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.2.0",
@@ -15,13 +11,12 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.3.4",
-    "@rollup/plugin-virtual": "^2.0.3",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
-    "axios": "^0.21.0",
+    "axios": "^0.21.1",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.0.4",
@@ -41,7 +36,6 @@
     "ghooks": "^2.0.4",
     "glob": "^7.1.3",
     "gzip-size": "^5.0.0",
-    "image-source-loader": "^0.6.5",
     "istanbul-api": "^2.0.6",
     "istanbul-lib-coverage": "^2.0.1",
     "jest": "^26.6.3",
@@ -51,21 +45,16 @@
     "lerna": "^3.16.4",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
-    "rax-webpack-plugin": "^0.6.5",
-    "rimraf": "^2.6.2",
     "rollup": "^2.33.3",
     "rollup-plugin-terser": "^7.0.2",
     "semver": "^7.1.0",
     "semver-regex": "^2.0.0",
-    "stylesheet-loader": "^0.6.5",
-    "terser-webpack-plugin": "^5.0.3",
-    "typescript": "^3.7.5",
+    "typescript": "^4.0.0",
     "uppercamelcase": "^3.0.0",
     "webpack": "^4.27.1"
   },
   "scripts": {
-    "bootstrap": "npm run clean && lerna bootstrap --no-ci && npm run build",
-    "setup": "rm -rf node_modules && npm install --registry=https://registry.npm.taobao.org/ && npm run bootstrap",
+    "setup": "rm -rf node_modules && yarn install && npm run clean && npm run build",
     "build:compile": "npm run clean:compile && npm run build:compile:packages",
     "build:compile:packages": "node ./scripts/compile-packages.js",
     "build:dist": "npm run clean:dist && node ./scripts/dist-core.js",
@@ -77,9 +66,8 @@
     "lint:fix": "eslint --cache --ext .js,.jsx --fix ./",
     "coverage": "npm run test -- --coverage",
     "coverage:upload": "npm run clean:coverage && npm run coverage && node ./scripts/mapCoverage.js && codecov",
-    "publish": "node ./scripts/publish.js",
     "clean:dist": "rm -rf ./packages/*/dist",
-    "clean:compile": "rm -rf ./packages/*/lib",
+    "clean:compile": "rm -rf ./packages/*/lib && rm -rf ./packages/*/es",
     "clean:coverage": "rm -rf ./coverage",
     "clean:modules": "rm -rf ./packages/*/node_modules",
     "clean": "jest --clearCache && lerna clean --yes && npm run clean:modules && npm run clean:compile && npm run clean:dist && npm run clean:coverage",
@@ -89,10 +77,15 @@
   },
   "config": {
     "ghooks": {
-      "commit-msg": "./scripts/validate-commit-msg.js"
+      "commit-msg": "./scripts/validate-commit-msg.js",
+      "pre-commit": "npm run lint"
     },
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  }
+  },
+  "workspaces": [
+    "packages/*",
+    "scripts/*"
+  ]
 }

packages/rax/index.js

@@ -1,5 +1,5 @@
 if (process.env.NODE_ENV === 'production') {
   module.exports = require('./dist/rax.min.js');
 } else {
-  module.exports = require('./lib/index.js');
+  module.exports = require('./dist/rax.js');
 }

packages/rax/src/compat/index.js

@@ -1,9 +1,11 @@
-import * as Rax from '../../index';
+import * as RaxCore from '../../index';
 import Children from 'rax-children';
 import isValidElement from 'rax-is-valid-element';
 import createFactory from 'rax-create-factory';
 import cloneElement from 'rax-clone-element';
 
+const Rax = RaxCore;
+
 Rax.Children = Children;
 Rax.isValidElement = isValidElement;
 Rax.createFactory = createFactory;

packages/rax/src/version.js

@@ -1 +1 @@
-export default '1.1.0';
+export default process.env.RAX_VERSION;

scripts/bench/frameworks/rax-local/src/main.jsx

@@ -111,4 +111,4 @@ const Main = () => {
   </div>);
 };
 
-render(<Main />, document.getElementById('main'), { driver: DriverDOM });
+render(<Main />, document.getElementById('main'), { driver: DriverDOM });

scripts/compile.js

@@ -25,6 +25,9 @@ const SRC_DIR = 'src';
 const JS_FILES_PATTERN = '**/*.js';
 const IGNORE_PATTERN = '**/{__tests__,__mocks__}/**';
 
+// Don't need compile packages
+const IGNORE_COMPILE_PACKAGES = ['rax'];
+
 const args = parseArgs(process.argv);
 const customPackages = args.packages;
 
@@ -56,6 +59,7 @@ function buildPackage(packagesDir, p, isBuildEs) {
 
 function getPackages(packagesDir, customPackages) {
   return fs.readdirSync(packagesDir)
+    .filter(file => !IGNORE_COMPILE_PACKAGES.includes(file)) // Exclude compile rax
     .map(file => path.resolve(packagesDir, file))
     .filter(f => {
       if (customPackages) {

scripts/dist-core.js

@@ -1,27 +1,17 @@
+const { join } = require('path');
+const { readFileSync, existsSync } = require('fs');
 const { green } = require('chalk');
-const { basename } = require('path');
 const rollup = require('rollup');
-const virtual = require('@rollup/plugin-virtual');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const commonjs = require('@rollup/plugin-commonjs');
 const { babel } = require('@rollup/plugin-babel');
 const { terser } = require('rollup-plugin-terser');
 const replace = require('@rollup/plugin-replace');
 const gzipSize = require('gzip-size');
 
-const IIFE = 'iife';
 const UMD = 'umd';
 const ESM = 'esm';
-
-function transformBundleFormat({ input, name, format, entry, shouldExportDefault }) {
-  return format === IIFE ? virtual({
-    entry: `
-    import ${shouldExportDefault ? name : `* as ${name}`} from './${basename(entry)}';
-    if (typeof module !== 'undefined') module.exports = ${name};
-    else self.${name} = ${name};
-    `
-  }) : null;
-}
+const CJS = 'cjs';
 
 function getExtension(format) {
   let ext = '.js';
@@ -34,7 +24,28 @@ function getExtension(format) {
   return ext;
 }
 
-async function build({ package: packageName, entry = 'src/index.js', name, shouldMinify = false, format = UMD, shouldExportDefault = false }) {
+/**
+ * Rollup build options
+ * @param buildOptions - rollup build options.
+ * @param {string} buildOptions.packageName - package name
+ * @param {string} buildOptions.name - package export name, such as umd format: window.Rax
+ * @param {string} buildOptions.entry package entry path
+ * @param {string} buildOptions.outputPath package output path
+ * @param {boolean} buildOptions.shouldMinify compress code or not
+ * @param {string} buildOptions.format bundle format (cjs|esm|iife|umd)
+ * @param {Array} buildOptions.external external dependencies list
+ * @param {Object} buildOptions.replaceValues rollup replace plugin values
+ */
+async function build({
+  packageName,
+  name,
+  entry = 'src/index.js',
+  outputPath,
+  shouldMinify = false,
+  format = UMD,
+  external,
+  replaceValues,
+}) {
   const input = `./packages/${packageName}/${entry}`;
   const output = {
     name,
@@ -43,6 +54,7 @@ async function build({ package: packageName, entry = 'src/index.js', name, shoul
     compact: false, // This will minify the wrapper code generated by rollup.
     freeze: false,
     strict: false,
+    esModule: format === ESM,
   };
 
   const terserOptions = {
@@ -66,12 +78,12 @@ async function build({ package: packageName, entry = 'src/index.js', name, shoul
   // For development
   const bundle = await rollup.rollup({
     input,
+    external,
     plugins: [
-      transformBundleFormat({ input, name, format, entry, shouldExportDefault }),
       nodeResolve(),
       commonjs({
         // style-unit for build while packages linked
-        // use /pakacges/ would get error and it seemed to be a rollup-plugin-commonjs bug
+        // use /packages/ would get error and it seemed to be a rollup-plugin-commonjs bug
         include: /node_modules|style-unit/
       }),
       babel({
@@ -89,6 +101,7 @@ async function build({ package: packageName, entry = 'src/index.js', name, shoul
       }),
       replace({
         values: {
+          ...replaceValues,
           'process.env.NODE_ENV': JSON.stringify(shouldMinify ? 'production' : 'development'),
         },
         preventAssignment: true,
@@ -97,8 +110,10 @@ async function build({ package: packageName, entry = 'src/index.js', name, shoul
     ]
   });
 
+  const ext = getExtension(format);
+
   if (shouldMinify) {
-    const file = `./packages/${packageName}/dist/${packageName}.min.js`;
+    const file = outputPath || `./packages/${packageName}/dist/${packageName}.min${ext}`;
     await bundle.write({
       ...output,
       format,
@@ -111,23 +126,62 @@ async function build({ package: packageName, entry = 'src/index.js', name, shoul
 
     console.log(file, `${green((size / 1024).toPrecision(8) + 'KiB')} (Gzipped)`);
   } else {
-    const ext = getExtension(format);
     await bundle.write({
       ...output,
       format,
-      file: `./packages/${packageName}/dist/${packageName}${ext}`,
+      file: outputPath || `./packages/${packageName}/dist/${packageName}${ext}`,
     });
   }
 }
 
-function buildCorePackages(packageName, name) {
-  build({ package: packageName, name: name });
-  build({ package: packageName, name: name, format: IIFE });
-  build({ package: packageName, name: name, format: IIFE, shouldMinify: true });
-  build({ package: packageName, name: name, format: ESM });
+function buildCorePackages(options) {
+  build(options);
+  build({ ...options, shouldMinify: true });
+  build({ ...options, format: CJS });
+  build({ ...options, format: CJS, shouldMinify: true });
+  build({ ...options, format: ESM });
+  build({ ...options, format: ESM, shouldMinify: true });
 }
 
-buildCorePackages('rax', 'Rax');
-buildCorePackages('driver-dom', 'DriverDOM');
-buildCorePackages('driver-kraken', 'DriverKraken');
-buildCorePackages('driver-weex', 'DriverWeex');
+// Get rax version
+function getRaxVersion() {
+  const packageJSONPath = join(process.cwd(), 'packages/rax/package.json');
+  if (!existsSync(packageJSONPath)) {
+    throw new Error('rax package.json is not exists!');
+  }
+  const packageData = JSON.parse(readFileSync(packageJSONPath, { encoding: 'utf-8' }));
+  return JSON.stringify(packageData.version);
+}
+
+const raxVersion = getRaxVersion();
+
+buildCorePackages({
+  packageName: 'rax',
+  name: 'Rax',
+  replaceValues: {
+    'process.env.RAX_VERSION': raxVersion
+  }
+});
+buildCorePackages({
+  packageName: 'driver-dom',
+  name: 'DriverDom'
+});
+buildCorePackages({
+  packageName: 'driver-kraken',
+  name: 'DriverKraken'
+});
+buildCorePackages({
+  packageName: 'driver-weex',
+  name: 'DriverKraken'
+});
+
+// Build rax compat react version to rax/lib/compat/index.js
+build({
+  packageName: 'rax',
+  name: 'Rax',
+  entry: 'src/compat/index.js',
+  outputPath: './packages/rax/lib/compat/index.js',
+  format: CJS,
+  external: ['rax-children', 'rax-is-valid-element', 'rax-create-factory', 'rax-clone-element'],
+  replaceValues: { 'process.env.RAX_VERSION': raxVersion },
+});