minify 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/package.json

@@ -73,7 +73,7 @@
     "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",

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

@@ -38,11 +38,10 @@ function hippyVueCSSLoader(this: any, source: any) {
   const hash = crypto.createHash(hashType);
   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 => n.type === 'rule').map(n => ([
+    contentHash,
+    n.selectors,
+    n.declarations.filter(dec => dec.type !== 'comment').map((dec) => {
       let { value } = dec;
       const isVariableColor = dec.property?.startsWith('-') && typeof value === 'string'
         && (
@@ -55,18 +54,14 @@ function hippyVueCSSLoader(this: any, source: any) {
       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 +72,7 @@ function hippyVueCSSLoader(this: any, source: any) {
         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/__test__/runtime/style/index.test.ts

@@ -24,7 +24,7 @@
  */
 import { HIPPY_GLOBAL_DISPOSE_STYLE_NAME, HIPPY_GLOBAL_STYLE_NAME } from '../../../src/config';
 import { HippyElement } from '../../../src/runtime/element/hippy-element';
-import { fromAstNodes, SelectorsMap } from '../../../src/runtime/style';
+import { fromAstNodes, SelectorsMap, type ASTRule } from '../../../src/runtime/style';
 import { SimpleSelectorSequence } from '../../../src/runtime/style/css-selectors';
 import { getCssMap } from '../../../src/runtime/style/css-map';
 import { registerElement } from '../../../src/runtime/component';
@@ -243,6 +243,16 @@ const testAst = [
   },
 ];
 
+type ASTItem = typeof testAst[1];
+
+function minifyAst(rules: ASTItem[]): ASTRule[] {
+  return rules.map(r => ([
+    r.hash,
+    r.selectors,
+    r.declarations.filter(d => d.type !== 'comment').map(d => ([d.property, d.value])),
+  ] as ASTRule)).filter(r => r[2].length > 0);
+}
+
 /**
  * @author birdguo
  * @priority P0
@@ -252,7 +262,7 @@ describe('runtime/style/index.ts', () => {
   let cssMap;
 
   beforeAll(() => {
-    global[HIPPY_GLOBAL_STYLE_NAME] = testAst;
+    global[HIPPY_GLOBAL_STYLE_NAME] = minifyAst(testAst);
     cssMap = getCssMap();
     registerElement('div', { component: { name: 'View' } });
     const root = new HippyElement('div');
@@ -326,7 +336,7 @@ describe('runtime/style/index.ts', () => {
       },
     ];
 
-    const appendRules = fromAstNodes(appendAst);
+    const appendRules = fromAstNodes(minifyAst(appendAst));
     cssMap.append(appendRules);
 
     const divElement = new HippyElement('div');
@@ -365,7 +375,7 @@ describe('runtime/style/index.ts', () => {
       },
     ];
 
-    const appendRules = fromAstNodes(appendAst);
+    const appendRules = fromAstNodes(minifyAst(appendAst));
     cssMap.append(appendRules);
 
     const divElement = new HippyElement('div');
@@ -411,7 +421,7 @@ describe('runtime/style/index.ts', () => {
       ],
     }];
 
-    const cssRules = fromAstNodes(ast);
+    const cssRules = fromAstNodes(minifyAst(ast));
     const cssMap = new SelectorsMap(cssRules);
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id1');
@@ -442,7 +452,7 @@ describe('runtime/style/index.ts', () => {
       ],
     }];
 
-    const cssRules = fromAstNodes(ast);
+    const cssRules = fromAstNodes(minifyAst(ast));
     const cssMap = new SelectorsMap(cssRules);
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
@@ -470,7 +480,7 @@ describe('runtime/style/index.ts', () => {
       ],
     }];
 
-    const cssRules = fromAstNodes(ast);
+    const cssRules = fromAstNodes(minifyAst(ast));
     const cssMap = new SelectorsMap(cssRules);
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
@@ -498,7 +508,7 @@ describe('runtime/style/index.ts', () => {
       ],
     }];
 
-    const cssRules = fromAstNodes(ast);
+    const cssRules = fromAstNodes(minifyAst(ast));
     const cssMap = new SelectorsMap(cssRules);
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
@@ -526,7 +536,7 @@ describe('runtime/style/index.ts', () => {
       ],
     }];
 
-    const cssRules = fromAstNodes(ast);
+    const cssRules = fromAstNodes(minifyAst(ast));
     const cssMap = new SelectorsMap(cssRules);
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
@@ -554,7 +564,7 @@ describe('runtime/style/index.ts', () => {
       ],
     }];
 
-    const cssRules = fromAstNodes(ast);
+    const cssRules = fromAstNodes(minifyAst(ast));
     const cssMap = new SelectorsMap(cssRules);
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');

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

@@ -805,4 +805,5 @@ export {
   Selector,
   RuleSet,
   SelectorCore,
+  type RuleSetSelector,
 };

driver/js/packages/hippy-vue-next/src/runtime/style/index.ts

@@ -33,17 +33,17 @@ import {
   AttributeSelector,
   SimpleSelectorSequence,
   Selector,
+  RuleSetSelector,
 } from './css-selectors';
-import type { CssAttribute } from './css-selectors-match';
 import { parseSelector } from './parser';
+import { CssDeclarationType } from '@hippy-vue-next-style-parser/index';
 
-function isDeclaration(node) {
-  return node.type === 'declaration';
-}
+type Declaration = [property: string, value: string | number];
+export type ASTRule = [hash: string, selectors: string[], declarations: Declaration[]];
 
 function createDeclaration(beforeLoadStyle) {
-  return (decl) => {
-    const newDecl = beforeLoadStyle(decl);
+  return (decl: Declaration): CssDeclarationType => {
+    const newDecl = beforeLoadStyle({ type: 'declaration', property: decl[0], value: decl[1] });
     if (!IS_PROD) {
       if (!newDecl) {
         throw new Error('beforeLoadStyle hook must returns the processed style object');
@@ -70,7 +70,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.'));
   }
 }
 
@@ -120,16 +120,15 @@ function createSelector(sel) {
   }
 }
 
-export function fromAstNodes(astRules: CssAttribute[] = []): RuleSet[] {
+export function fromAstNodes(astRules: ASTRule[] = []): RuleSet[] {
   const beforeLoadStyle = getBeforeLoadStyle();
 
-  return astRules.map((rule) => {
-    const declarations = rule.declarations
-      .filter(isDeclaration)
-      .map(createDeclaration(beforeLoadStyle));
-    const selectors = rule.selectors.map(createSelector);
-
-    return new RuleSet(selectors, declarations, rule.hash);
+  return astRules.map(([hash, selectors, declarations]) => {
+    return new RuleSet(
+      selectors.map(createSelector) as RuleSetSelector[],
+      declarations.map(createDeclaration(beforeLoadStyle)),
+      hash,
+    );
   });
 }
 

driver/js/packages/hippy-vue/src/renderer/native/style/__tests__/helper.js

@@ -0,0 +1,7 @@
+export function minifyAst(rules) {
+  return rules.map(r => ([
+    r.hash,
+    r.selectors,
+    r.declarations.filter(d => d.type !== 'comment').map(d => ([d.property, d.value])),
+  ])).filter(r => r[2].length > 0);
+}