@fluffjs/cli 0.4.0 → 0.4.2

package/CodeGenerator.d.ts

@@ -59,16 +59,16 @@ export declare class CodeGenerator {
     private readonly collectedTemplates;
     constructor(componentSelectors?: Set<string>, componentSelector?: string);
     static resetGlobalState(): void;
-    private static internString;
+    static internString(str: string): number;
     static getStringTable(): string[];
     generateRenderMethod(template: ParsedTemplate, styles?: string): string;
     generateHtml(template: ParsedTemplate): string;
     generateRenderMethodFromHtml(html: string, styles?: string, markerConfigExpr?: t.Expression): string;
     getMarkerConfigExpression(): t.Expression;
     private buildMarkerConfigExpression;
-    private buildMarkerConfigObject;
-    private buildDepsExpression;
-    private buildPropertyChainExpression;
+    private buildMarkerConfigArray;
+    private buildCompactDepsExpression;
+    private buildCompactPropertyChainExpression;
     generateBindingsSetup(): string;
     getBindingsMap(): Record<string, CompactBinding[]>;
     generateExpressionAssignments(): string;

package/CodeGenerator.js

@@ -102,73 +102,81 @@ export class CodeGenerator {
         const entries = Array.from(this.markerConfigs.entries())
             .map(([id, config]) => t.arrayExpression([
             t.numericLiteral(id),
-            this.buildMarkerConfigObject(config)
+            this.buildMarkerConfigArray(config)
         ]));
         return t.arrayExpression(entries);
     }
-    buildMarkerConfigObject(config) {
-        const properties = [
-            t.objectProperty(t.stringLiteral('type'), t.stringLiteral(config.type))
-        ];
+    buildMarkerConfigArray(config) {
+        const MARKER_TYPE_MAP = {
+            'if': 0, 'for': 1, 'text': 2, 'switch': 3, 'break': 4
+        };
+        const typeNum = MARKER_TYPE_MAP[config.type];
         if (config.type === 'text') {
-            properties.push(t.objectProperty(t.stringLiteral('exprId'), t.numericLiteral(config.exprId)));
-            if (config.deps) {
-                properties.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(config.deps)));
-            }
-            if (config.pipes && config.pipes.length > 0) {
-                properties.push(t.objectProperty(t.stringLiteral('pipes'), t.arrayExpression(config.pipes.map(pipe => t.objectExpression([
-                    t.objectProperty(t.stringLiteral('name'), t.stringLiteral(pipe.name)),
-                    t.objectProperty(t.stringLiteral('argExprIds'), t.arrayExpression(pipe.argExprIds.map(arg => t.numericLiteral(arg))))
-                ])))));
-            }
+            const elements = [
+                t.numericLiteral(typeNum),
+                t.numericLiteral(config.exprId),
+                config.deps ? this.buildCompactDepsExpression(config.deps) : t.nullLiteral(),
+                config.pipes && config.pipes.length > 0
+                    ? t.arrayExpression(config.pipes.map(pipe => t.arrayExpression([
+                        t.numericLiteral(CodeGenerator.internString(pipe.name)),
+                        t.arrayExpression(pipe.argExprIds.map(arg => t.numericLiteral(arg)))
+                    ])))
+                    : t.nullLiteral()
+            ];
+            return t.arrayExpression(elements);
         }
         else if (config.type === 'if') {
-            properties.push(t.objectProperty(t.stringLiteral('branches'), t.arrayExpression(config.branches.map(branch => {
-                const branchProps = [];
-                if (branch.exprId !== undefined) {
-                    branchProps.push(t.objectProperty(t.stringLiteral('exprId'), t.numericLiteral(branch.exprId)));
-                }
-                if (branch.deps) {
-                    branchProps.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(branch.deps)));
+            const branches = t.arrayExpression(config.branches.map(branch => {
+                if (branch.exprId === undefined && !branch.deps) {
+                    return t.arrayExpression([]);
                 }
-                return t.objectExpression(branchProps);
-            }))));
+                return t.arrayExpression([
+                    branch.exprId !== undefined ? t.numericLiteral(branch.exprId) : t.nullLiteral(),
+                    branch.deps ? this.buildCompactDepsExpression(branch.deps) : t.nullLiteral()
+                ]);
+            }));
+            return t.arrayExpression([t.numericLiteral(typeNum), branches]);
         }
         else if (config.type === 'for') {
-            properties.push(t.objectProperty(t.stringLiteral('iterator'), t.stringLiteral(config.iterator)), t.objectProperty(t.stringLiteral('iterableExprId'), t.numericLiteral(config.iterableExprId)), t.objectProperty(t.stringLiteral('hasEmpty'), t.booleanLiteral(config.hasEmpty)));
-            if (config.deps) {
-                properties.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(config.deps)));
-            }
-            if (config.trackBy !== undefined) {
-                properties.push(t.objectProperty(t.stringLiteral('trackBy'), t.stringLiteral(config.trackBy)));
-            }
+            return t.arrayExpression([
+                t.numericLiteral(typeNum),
+                t.numericLiteral(CodeGenerator.internString(config.iterator)),
+                t.numericLiteral(config.iterableExprId),
+                t.booleanLiteral(config.hasEmpty),
+                config.deps ? this.buildCompactDepsExpression(config.deps) : t.nullLiteral(),
+                config.trackBy !== undefined
+                    ? t.numericLiteral(CodeGenerator.internString(config.trackBy))
+                    : t.nullLiteral()
+            ]);
         }
         else if (config.type === 'switch') {
-            properties.push(t.objectProperty(t.stringLiteral('expressionExprId'), t.numericLiteral(config.expressionExprId)));
-            if (config.deps) {
-                properties.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(config.deps)));
-            }
-            properties.push(t.objectProperty(t.stringLiteral('cases'), t.arrayExpression(config.cases.map(caseConfig => {
-                const caseProps = [
-                    t.objectProperty(t.stringLiteral('isDefault'), t.booleanLiteral(caseConfig.isDefault)),
-                    t.objectProperty(t.stringLiteral('fallthrough'), t.booleanLiteral(caseConfig.fallthrough))
-                ];
-                if (caseConfig.valueExprId !== undefined) {
-                    caseProps.push(t.objectProperty(t.stringLiteral('valueExprId'), t.numericLiteral(caseConfig.valueExprId)));
-                }
-                return t.objectExpression(caseProps);
-            }))));
-        }
-        return t.objectExpression(properties);
-    }
-    buildDepsExpression(deps) {
-        return t.arrayExpression(deps.map(dep => this.buildPropertyChainExpression(dep)));
-    }
-    buildPropertyChainExpression(dep) {
+            const cases = t.arrayExpression(config.cases.map(caseConfig => t.arrayExpression([
+                t.booleanLiteral(caseConfig.isDefault),
+                t.booleanLiteral(caseConfig.fallthrough),
+                caseConfig.valueExprId !== undefined
+                    ? t.numericLiteral(caseConfig.valueExprId)
+                    : t.nullLiteral()
+            ])));
+            return t.arrayExpression([
+                t.numericLiteral(typeNum),
+                t.numericLiteral(config.expressionExprId),
+                config.deps ? this.buildCompactDepsExpression(config.deps) : t.nullLiteral(),
+                cases
+            ]);
+        }
+        else if (config.type === 'break') {
+            return t.arrayExpression([t.numericLiteral(typeNum)]);
+        }
+        return t.arrayExpression([t.numericLiteral(typeNum)]);
+    }
+    buildCompactDepsExpression(deps) {
+        return t.arrayExpression(deps.map(dep => this.buildCompactPropertyChainExpression(dep)));
+    }
+    buildCompactPropertyChainExpression(dep) {
         if (Array.isArray(dep)) {
-            return t.arrayExpression(dep.map(part => t.stringLiteral(part)));
+            return t.arrayExpression(dep.map(part => t.numericLiteral(CodeGenerator.internString(part))));
         }
-        return t.stringLiteral(dep);
+        return t.numericLiteral(CodeGenerator.internString(dep));
     }
     generateBindingsSetup() {
         const statements = [

package/ComponentCompiler.js

@@ -1,9 +1,11 @@
 import * as babel from '@babel/core';
 import { parse } from '@babel/parser';
 import * as t from '@babel/types';
+import cssnano from 'cssnano';
 import * as esbuild from 'esbuild';
 import * as fs from 'fs';
 import { minify as minifyHtml } from 'html-minifier-terser';
+import postcss from 'postcss';
 import * as parse5 from 'parse5';
 import * as path from 'path';
 import { SourceMapConsumer, SourceMapGenerator } from 'source-map';
@@ -116,6 +118,8 @@ export class ComponentCompiler {
             styles = inlineStyles;
         }
         if (minify && styles) {
+            const nanoResult = await postcss([cssnano({ preset: 'default' })]).process(styles, { from: undefined });
+            styles = nanoResult.css;
             const cssResult = await esbuild.transform(styles, {
                 loader: 'css', minify: true
             });

package/babel-plugin-reactive.js

@@ -1,5 +1,6 @@
 import { types as t } from '@babel/core';
 import { buildHostBindingUpdateStatement, findDecoratorIndex, getDecoratorName } from './BabelHelpers.js';
+import { CodeGenerator } from './CodeGenerator.js';
 export const reactivePropertiesMap = new Map();
 export default function reactivePlugin() {
     // noinspection JSUnusedGlobalSymbols
@@ -349,7 +350,8 @@ export default function reactivePlugin() {
                     const propertyArgs = useOptionsObject
                         ? [t.objectExpression(propertyOptions)]
                         : [initialValue];
-                    const createPropCall = t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__createProp')), [t.stringLiteral(propName), ...propertyArgs]);
+                    const propNameIdx = CodeGenerator.internString(propName);
+                    const createPropCall = t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__createProp')), [t.numericLiteral(propNameIdx), ...propertyArgs]);
                     const privateField = t.classProperty(t.identifier(privateName), createPropCall);
                     propsToRemove.push(memberPath);
                     privateFields.push(privateField);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/cli",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",
@@ -33,9 +33,9 @@
     "he": "^1.2.0",
     "html-minifier-terser": "^7.2.0",
     "http-proxy": "^1.18.1",
-    "picomatch": "^4.0.2",
     "parse5": "^8.0.0",
     "parse5-sax-parser": "^8.0.0",
+    "picomatch": "^4.0.2",
     "source-map": "^0.7.6",
     "tslib": "^2.3.0"
   },
@@ -43,7 +43,9 @@
     "@types/he": "^1.2.3",
     "@types/http-proxy": "^1.17.16",
     "@types/jsesc": "^3.0.3",
-    "jsesc": "^3.1.0"
+    "cssnano": "^7.1.2",
+    "jsesc": "^3.1.0",
+    "postcss": "^8.5.6"
   },
   "publishConfig": {
     "access": "public"

package/testing/MarkerConfigAstReader.d.ts

@@ -9,6 +9,9 @@ type MarkerConfigEntriesLiteral = [number, MarkerConfigLiteral][];
 export declare class MarkerConfigAstReader {
     static readMarkerConfigEntries(code: string): MarkerConfigEntriesLiteral;
     static collectDeps(entries: MarkerConfigEntriesLiteral): string[];
+    private static collectDepsFromCompactConfig;
+    private static collectNumberDeps;
+    static collectCompactDeps(entries: MarkerConfigEntriesLiteral): number[][];
     private static collectDepsFromRecord;
     private static collectDepsFromIf;
     private static collectStringsFromDep;

package/testing/MarkerConfigAstReader.js

@@ -31,6 +31,9 @@ export class MarkerConfigAstReader {
     static collectDeps(entries) {
         const deps = [];
         for (const [, config] of entries) {
+            if (Array.isArray(config)) {
+                continue;
+            }
             if (!MarkerConfigAstReader.isRecord(config)) {
                 continue;
             }
@@ -56,6 +59,72 @@ export class MarkerConfigAstReader {
         }
         return deps;
     }
+    static collectDepsFromCompactConfig(config, deps) {
+        const [typeNum] = config;
+        if (typeof typeNum !== 'number')
+            return;
+        switch (typeNum) {
+            case 0: // if
+                {
+                    const [, branches] = config;
+                    if (Array.isArray(branches)) {
+                        for (const branch of branches) {
+                            if (Array.isArray(branch) && branch.length >= 2) {
+                                const [, branchDeps] = branch;
+                                if (Array.isArray(branchDeps)) {
+                                    MarkerConfigAstReader.collectNumberDeps(branchDeps, deps);
+                                }
+                            }
+                        }
+                    }
+                    break;
+                }
+            case 1: // for
+                {
+                    const [, , , , forDeps] = config;
+                    if (Array.isArray(forDeps)) {
+                        MarkerConfigAstReader.collectNumberDeps(forDeps, deps);
+                    }
+                    break;
+                }
+            case 2: // text
+                {
+                    const [, , textDeps] = config;
+                    if (Array.isArray(textDeps)) {
+                        MarkerConfigAstReader.collectNumberDeps(textDeps, deps);
+                    }
+                    break;
+                }
+            case 3: // switch
+                {
+                    const [, , switchDeps] = config;
+                    if (Array.isArray(switchDeps)) {
+                        MarkerConfigAstReader.collectNumberDeps(switchDeps, deps);
+                    }
+                    break;
+                }
+        }
+    }
+    static collectNumberDeps(compactDeps, deps) {
+        for (const dep of compactDeps) {
+            if (typeof dep === 'number') {
+                deps.push([dep]);
+            }
+            else if (Array.isArray(dep)) {
+                const numDeps = dep.filter((d) => typeof d === 'number');
+                deps.push(numDeps);
+            }
+        }
+    }
+    static collectCompactDeps(entries) {
+        const deps = [];
+        for (const [, config] of entries) {
+            if (Array.isArray(config)) {
+                MarkerConfigAstReader.collectDepsFromCompactConfig(config, deps);
+            }
+        }
+        return deps;
+    }
     static collectDepsFromRecord(configRecord, deps) {
         const configDeps = configRecord.deps;
         if (Array.isArray(configDeps)) {
@@ -153,7 +222,7 @@ export class MarkerConfigAstReader {
                 return false;
             }
             const [id, config] = entry;
-            return typeof id === 'number' && MarkerConfigAstReader.isRecord(config);
+            return typeof id === 'number' && (MarkerConfigAstReader.isRecord(config) || Array.isArray(config));
         });
     }
     static isRecord(value) {