@fluffjs/cli 0.1.11 → 0.1.13

package/DomPreProcessor.d.ts

@@ -6,6 +6,7 @@ export declare class DomPreProcessor {
     process(html: string): Promise<string>;
     private handleStartTag;
     private transformAttribute;
+    private buildBindingObject;
     private convertInterpolationToExpression;
     private handleEndTag;
     private handleText;

package/DomPreProcessor.js

@@ -103,54 +103,30 @@ export class DomPreProcessor {
     transformAttribute(name, value, subscribeMap) {
         if (name.startsWith('[(') && name.endsWith(')]')) {
             const propName = name.slice(2, -2);
-            const bindingObj = {
-                name: propName, binding: 'two-way', expression: value
-            };
-            const subscribeTo = subscribeMap.get(propName);
-            if (subscribeTo)
-                bindingObj.subscribe = subscribeTo;
-            const json = JSON.stringify(bindingObj);
+            const bindingObj = this.buildBindingObject(propName, 'two-way', value, subscribeMap.get(propName));
             return {
-                name: `x-fluff-attrib-${propName.toLowerCase()}`, value: json
+                name: `x-fluff-attrib-${propName.toLowerCase()}`, value: JSON.stringify(bindingObj)
             };
         }
         if (name.startsWith('[') && name.endsWith(']')) {
             const propName = name.slice(1, -1);
             if (propName.startsWith('class.')) {
                 const className = propName.slice(6);
-                const bindingObj = {
-                    name: className, binding: 'class', expression: value
-                };
-                const subscribeTo = subscribeMap.get(propName);
-                if (subscribeTo)
-                    bindingObj.subscribe = subscribeTo;
-                const json = JSON.stringify(bindingObj);
+                const bindingObj = this.buildBindingObject(className, 'class', value, subscribeMap.get(propName));
                 return {
-                    name: `x-fluff-attrib-class-${className.toLowerCase()}`, value: json
+                    name: `x-fluff-attrib-class-${className.toLowerCase()}`, value: JSON.stringify(bindingObj)
                 };
             }
             if (propName.startsWith('style.')) {
                 const styleName = propName.slice(6);
-                const bindingObj = {
-                    name: styleName, binding: 'style', expression: value
-                };
-                const subscribeTo = subscribeMap.get(propName);
-                if (subscribeTo)
-                    bindingObj.subscribe = subscribeTo;
-                const json = JSON.stringify(bindingObj);
+                const bindingObj = this.buildBindingObject(styleName, 'style', value, subscribeMap.get(propName));
                 return {
-                    name: `x-fluff-attrib-style-${styleName.toLowerCase()}`, value: json
+                    name: `x-fluff-attrib-style-${styleName.toLowerCase()}`, value: JSON.stringify(bindingObj)
                 };
             }
-            const bindingObj = {
-                name: propName, binding: 'property', expression: value
-            };
-            const subscribeTo = subscribeMap.get(propName);
-            if (subscribeTo)
-                bindingObj.subscribe = subscribeTo;
-            const json = JSON.stringify(bindingObj);
+            const bindingObj = this.buildBindingObject(propName, 'property', value, subscribeMap.get(propName));
             return {
-                name: `x-fluff-attrib-${propName.toLowerCase()}`, value: json
+                name: `x-fluff-attrib-${propName.toLowerCase()}`, value: JSON.stringify(bindingObj)
             };
         }
         if (name.startsWith('(') && name.endsWith(')')) {
@@ -182,6 +158,21 @@ export class DomPreProcessor {
         }
         return null;
     }
+    buildBindingObject(name, binding, value, subscribeTo) {
+        const parsed = ExpressionTransformer.parsePrimaryExpression(value);
+        const bindingObj = {
+            name,
+            binding,
+            expression: parsed.expression
+        };
+        if (parsed.pipes.length > 0) {
+            bindingObj.pipes = parsed.pipes;
+        }
+        if (subscribeTo) {
+            bindingObj.subscribe = subscribeTo;
+        }
+        return bindingObj;
+    }
     convertInterpolationToExpression(value) {
         const parts = [];
         let pos = 0;

package/ExpressionTransformer.js

@@ -190,7 +190,7 @@ export class ExpressionTransformer {
         const { loc } = e;
         return loc !== null && typeof loc === 'object' && 'index' in loc && typeof loc.index === 'number';
     }
-    static tokenizeExpression(code, startPos = 0) {
+    static tokenizeExpression(code, delimiters, startPos = 0) {
         const substring = code.slice(startPos);
         let tokens = [];
         try {
@@ -237,7 +237,7 @@ export class ExpressionTransformer {
                 tokenCount = i;
                 break;
             }
-            if (depth === 0 && (token.type.label === '|' || token.type.label === ';' || token.type.label === ':')) {
+            if (depth === 0 && delimiters.includes(token.type.label)) {
                 stopIndex = token.start;
                 stopReason = 'delimiter';
                 tokenCount = i;
@@ -305,7 +305,7 @@ export class ExpressionTransformer {
     static parsePrimaryExpression(text, startPos) {
         const offset = startPos ?? 0;
         const pipes = [];
-        const tokenResult = ExpressionTransformer.tokenizeExpression(text, offset);
+        const tokenResult = ExpressionTransformer.tokenizeExpression(text, ['|', ';'], offset);
         if (tokenResult.tokenCount === 0) {
             return {
                 expression: text.slice(offset)
@@ -344,7 +344,7 @@ export class ExpressionTransformer {
                 }
                 const prefix = `_arg${args.length + 1}=`;
                 const argText = prefix + text.slice(pos);
-                const argTokenResult = ExpressionTransformer.tokenizeExpression(argText, 0);
+                const argTokenResult = ExpressionTransformer.tokenizeExpression(argText, ['|', ':', ';'], 0);
                 const argEndPos = argTokenResult.index - prefix.length;
                 if (argTokenResult.tokenCount > 0) {
                     const argCandidate = text.slice(pos, pos + argEndPos)

package/TemplateParser.d.ts

@@ -37,6 +37,7 @@ export declare class TemplateParser {
     private parseBindingAttribute;
     private getAttr;
     private transformWithLocals;
+    private transformPipes;
     private pushScope;
     private popScope;
     private getCurrentLocalVariables;

package/TemplateParser.js

@@ -294,21 +294,7 @@ export class TemplateParser {
             try {
                 const parsed = JSON.parse(pipesAttr);
                 if (Array.isArray(parsed)) {
-                    result.pipes = parsed.map(pipe => {
-                        if (!Typeguards.isRecord(pipe)) {
-                            return null;
-                        }
-                        if (typeof pipe.name !== 'string' || !Array.isArray(pipe.args)) {
-                            return null;
-                        }
-                        const args = pipe.args.filter((arg) => typeof arg === 'string')
-                            .map(arg => this.transformWithLocals(arg));
-                        return {
-                            name: pipe.name,
-                            args
-                        };
-                    })
-                        .filter((pipe) => pipe !== null);
+                    result.pipes = this.transformPipes(parsed);
                 }
             }
             catch {
@@ -377,6 +363,9 @@ export class TemplateParser {
             if (typeof parsed.subscribe === 'string') {
                 result.subscribe = parsed.subscribe;
             }
+            if (Array.isArray(parsed.pipes)) {
+                result.pipes = this.transformPipes(parsed.pipes);
+            }
             return result;
         }
         catch {
@@ -397,6 +386,23 @@ export class TemplateParser {
             templateRefs: options?.templateRefs
         });
     }
+    transformPipes(pipes) {
+        return pipes.map(pipe => {
+            if (!Typeguards.isRecord(pipe)) {
+                return null;
+            }
+            if (typeof pipe.name !== 'string' || !Array.isArray(pipe.args)) {
+                return null;
+            }
+            const args = pipe.args.filter((arg) => typeof arg === 'string')
+                .map(arg => this.transformWithLocals(arg));
+            return {
+                name: pipe.name,
+                args
+            };
+        })
+            .filter((pipe) => pipe !== null);
+    }
     pushScope(variables) {
         const parent = this.scopeStack[this.scopeStack.length - 1];
         this.scopeStack.push({

package/interfaces/BindingInfo.d.ts

@@ -8,5 +8,9 @@ export interface BindingInfo {
     targetProp?: string;
     deps?: PropertyChain[];
     subscribe?: string;
+    pipes?: {
+        name: string;
+        args: string[];
+    }[];
 }
 //# sourceMappingURL=BindingInfo.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/cli",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",