feat(vue-next): minify webpack bundle size

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.android-vendor.js

@@ -18,7 +18,6 @@ module.exports = {
     library: 'hippyReactBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.android.js

@@ -22,7 +22,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyReactDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.ios-vendor.js

@@ -18,7 +18,6 @@ module.exports = {
     library: 'hippyReactBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.ios.js

@@ -22,7 +22,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyReactDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.dev.js

@@ -29,7 +29,6 @@ module.exports = {
     globalObject: '(0, eval)("this")',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new HtmlWebpackPlugin({
       inject: true,
       scriptLoading: 'blocking',

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.js

@@ -17,7 +17,6 @@ module.exports = {
     path: path.resolve(`./dist/${platform}/`),
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web.dev.js

@@ -25,7 +25,6 @@ module.exports = {
     path: path.resolve(`./dist/${platform}/`),
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web.js

@@ -18,7 +18,6 @@ module.exports = {
     path: path.resolve(`./dist/${platform}/`),
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.android-vendor.js

@@ -31,7 +31,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.android.js

@@ -43,7 +43,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyVueDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.ios-vendor.js

@@ -31,7 +31,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js

@@ -43,7 +43,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyVueDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.android-vendor.js

@@ -19,7 +19,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.android.js

@@ -31,7 +31,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyVueNextDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios-vendor.js

@@ -19,7 +19,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios.js

@@ -31,7 +31,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyVueNextDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.vendor.js

@@ -19,7 +19,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.base.js

@@ -41,7 +41,6 @@ exports.getWebpackSsrBaseConfig = function (platform, env) {
       // publicPath: 'https://xxx/hippy/hippyVueNextDemo/',
     },
     plugins: [
-      new webpack.NamedModulesPlugin(),
       new webpack.DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify(env),

driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js

@@ -63,7 +63,6 @@ module.exports = {
     globalObject: '(0, eval)("this")',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('development'),

driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.vendor.js

@@ -19,7 +19,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

driver/js/package.json

@@ -61,6 +61,7 @@
     "module-alias": "^2.2.2",
     "nyc": "^15.1.0",
     "path-to-regexp": "^1.7.0",
+    "postcss-class-prefix": "~0.3.0",
     "react": "^17.0.2",
     "rimraf": "^2.6.3",
     "rollup": "^2.79.1",
@@ -73,12 +74,11 @@
     "trim-newlines": "^3.0.1",
     "ts-jest": "^27.1.2",
     "tslib": "^2.3.1",
-    "ttypescript": "^1.5.13",
+    "ttypescript": "~1.5.15",
     "typescript": "^4.8.3",
     "typescript-transform-paths": "^3.3.1",
     "vue": "^2.6.14",
-    "watch": "^0.13.0",
-    "postcss-class-prefix": "~0.3.0"
+    "watch": "^0.13.0"
   },
   "_moduleAliases": {
     "vue": "node_modules/vue/src/core/index",

driver/js/packages/hippy-vue-css-loader/src/css-loader.ts

@@ -30,19 +30,16 @@
  * Convert the CSS text to AST that able to parse by selector parser.
  */
 function hippyVueCSSLoader(this: any, source: any) {
   const options = getOptions(this);
   const parsed = parseCSS(source, { source: sourceId });
-
-  const majorNodeVersion = parseInt(process.versions.node.split('.')[0], 10);
-  const hashType = majorNodeVersion >= 17 ? 'md5' : 'md4';
-  const hash = crypto.createHash(hashType);
+  const hash = crypto.createHash('shake256', { outputLength: 3 });
   const contentHash = hash.update(source).digest('hex');
   sourceId += 1;
-  const rulesAst = parsed.stylesheet.rules.filter((n: any) => n.type === 'rule').map((n: any) => ({
-    hash: contentHash,
-    selectors: n.selectors,
-
-    declarations: n.declarations.map((dec: any) => {
+  const rulesAst = parsed.stylesheet.rules.filter((n: any) => n.type === 'rule').map((n: any) => ([
+    contentHash,
+    n.selectors,
+    // filter comment declaration and empty declaration
+    n.declarations.filter(dec => dec.type !== 'comment').map((dec: any) => {
       let { value } = dec;
       const isVariableColor = dec.property?.startsWith('-') && typeof value === 'string'
         && (
@@ -55,18 +52,14 @@
       if (dec.property && (dec.property.toLowerCase().indexOf('color') > -1 || isVariableColor)) {
         value = translateColor(value);
       }
-      return {
-        type: dec.type,
-        property: dec.property,
-        value,
-      };
+      return [dec.property, value];
     }),
-  }));
-  const code = `(function() {
-    if (!global['${GLOBAL_STYLE_NAME}']) {
-      global['${GLOBAL_STYLE_NAME}'] = [];
+  ])).filter(rule => rule[2].length > 0);
+  const code = `(function(n) {
+    if (!global[n]) {
+      global[n] = [];
     }
-    global['${GLOBAL_STYLE_NAME}'] = global['${GLOBAL_STYLE_NAME}'].concat(${JSON.stringify(rulesAst)});
+    global[n] = global[n].concat(${JSON.stringify(rulesAst)});
 
     if(module.hot) {
       module.hot.dispose(() => {
@@ -77,7 +70,7 @@
         global['${GLOBAL_DISPOSE_STYLE_NAME}'] = global['${GLOBAL_DISPOSE_STYLE_NAME}'].concat('${contentHash}');
       })
     }
-  })()`;
+  })('${GLOBAL_STYLE_NAME}')`;
   return `module.exports=${code}`;
 }
 

driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/color-parser.test.ts

@@ -42,6 +42,7 @@ describe('style-parser/color-parser.ts', () => {
     expect(translateColor('transparent')).toEqual(0);
     expect(translateColor('blueviolet')).toEqual(4287245282);
     expect(translateColor(4287245282)).toEqual(3808397867);
+    // FIXME custom variable
     expect(translateColor('var(-Bg)')).toEqual('var(-Bg)');
   });
 

driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts

@@ -34,6 +34,9 @@ import { SelectorsMap } from './css-selectors-match';
 import { parseSelector } from './parser';
 import { HIPPY_GLOBAL_STYLE_NAME, HIPPY_GLOBAL_DISPOSE_STYLE_NAME } from './';
 
+type Declaration = [property: string, value: string | number];
+export type ASTRule = [hash: string, selectors: string[], declarations: Declaration[]];
+
 // style load hook
 const beforeLoadStyleHook: Function = (declaration: Function): Function => declaration;
 
@@ -70,7 +73,7 @@ function createSimpleSelectorFromAst(ast) {
         ? new AttributeSelector(ast.property, ast.test, ast.value)
         : new AttributeSelector(ast.property);
     default:
-      return null;
+      return new InvalidSelector(new Error('Unknown selector.'));;
   }
 }
 
@@ -125,10 +128,23 @@ function createSelector(sel) {
  * @param beforeLoadStyle
  */
 export function fromAstNodes(
-  astRules: CssAttribute[] = [],
+  astRules: Array<CssAttribute | ASTRule> = [],
   beforeLoadStyle?: Function,
 ): RuleSet[] {
-  return astRules.map((rule) => {
+  const rules = astRules.map(rule => {
+    if (!Array.isArray(rule)) return rule;
+    const [hash, selectors, declarations] = rule as ASTRule;
+    return {
+      hash,
+      selectors,
+      declarations: declarations.map(([property, value]) => ({
+        type: 'declaration',
+        property,
+        value,
+      })),
+    };
+  });
+  return rules.map((rule) => {
     const declarations = rule.declarations
       .filter(isDeclaration)
       // use default hook when there is no hook passed in

driver/js/packages/hippy-vue-next-style-parser/src/style-parser/css-parser.ts

@@ -135,7 +135,7 @@ const LINEAR_GRADIENT_DIRECTION_MAP = {
 };
 
 // degree unit
-const DEGREE_UNIT = {
+export const DEGREE_UNIT = {
   TURN: 'turn',
   RAD: 'rad',
   DEG: 'deg',