@fluffjs/fluff 0.1.14 → 0.1.15

package/decorators/Pipe.d.ts

@@ -1,6 +1,10 @@
-type PipeConstructor = (new (...args: unknown[]) => unknown) & {
+interface PipeInstance {
+    transform: (value: unknown, ...args: unknown[]) => unknown;
+}
+type PipeConstructor = (new () => PipeInstance) & {
     __pipeName?: string;
 };
+export declare function getPipeTransform(name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
 export declare function Pipe(name: string): <T extends PipeConstructor>(target: T) => T;
 export interface PipeTransform<TArgs extends unknown[] = unknown[], TReturn = unknown> {
     transform: (value: unknown, ...args: TArgs) => TReturn;

package/decorators/Pipe.js

@@ -1,6 +1,15 @@
+const pipeRegistry = new Map();
+export function getPipeTransform(name) {
+    const PipeClass = pipeRegistry.get(name);
+    if (!PipeClass)
+        return undefined;
+    const instance = new PipeClass();
+    return (value, ...args) => instance.transform(value, ...args);
+}
 export function Pipe(name) {
     return function (target) {
         target.__pipeName = name;
+        pipeRegistry.set(name, target);
         return target;
     };
 }

package/index.d.ts

@@ -4,7 +4,7 @@ export { HostBinding } from './decorators/HostBinding.js';
 export { HostListener } from './decorators/HostListener.js';
 export { Input } from './decorators/Input.js';
 export { Output } from './decorators/Output.js';
-export { Pipe } from './decorators/Pipe.js';
+export { getPipeTransform, Pipe } from './decorators/Pipe.js';
 export type { PipeTransform } from './decorators/Pipe.js';
 export { Reactive } from './decorators/Reactive.js';
 export { ViewChild } from './decorators/ViewChild.js';

package/index.js

@@ -3,7 +3,7 @@ export { HostBinding } from './decorators/HostBinding.js';
 export { HostListener } from './decorators/HostListener.js';
 export { Input } from './decorators/Input.js';
 export { Output } from './decorators/Output.js';
-export { Pipe } from './decorators/Pipe.js';
+export { getPipeTransform, Pipe } from './decorators/Pipe.js';
 export { Reactive } from './decorators/Reactive.js';
 export { ViewChild } from './decorators/ViewChild.js';
 export { Watch } from './decorators/Watch.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/fluff",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/runtime/FluffElementImpl.js

@@ -1,3 +1,4 @@
+import { getPipeTransform } from '../decorators/Pipe.js';
 import { DomUtils } from '../utils/DomUtils.js';
 import { Property } from '../utils/Property.js';
 import { Publisher } from '../utils/Publisher.js';
@@ -87,7 +88,7 @@ export class FluffElement extends FluffBase {
         return pipe(value, ...args);
     }
     __getPipeFn(name) {
-        return this.__pipes[name];
+        return this.__pipes[name] ?? getPipeTransform(name);
     }
     __getShadowRoot() {
         return this._shadowRoot;

package/runtime/TextController.js

@@ -1,3 +1,4 @@
+import { getPipeTransform } from '../decorators/Pipe.js';
 import { Property } from '../utils/Property.js';
 import { MarkerController } from './MarkerController.js';
 export class TextController extends MarkerController {
@@ -44,9 +45,7 @@ export class TextController extends MarkerController {
     }
     applyPipe(name, value, args) {
         const pipes = this.host.__pipes;
-        if (!pipes)
-            return value;
-        const pipeFn = pipes[name];
+        const pipeFn = pipes?.[name] ?? getPipeTransform(name);
         if (!pipeFn) {
             console.warn(`Pipe "${name}" not found`);
             return value;

package/runtime/tests/TestForTextMarkerCollisionParentComponent.js

@@ -3,6 +3,7 @@ import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestForTextMarkerCollisionParentComponent extends FluffElement {
     __tags = new Property({ initialValue: ['docs', 'api'], propertyName: 'tags' });
+    // TEST STUB: In real apps, __pipes is generated by the CLI in CodeGenerator.ts
     __pipes = {
         lowercase: (v) => String(v)
             .toLowerCase(),
@@ -29,7 +30,8 @@ export class TestForTextMarkerCollisionParentComponent extends FluffElement {
                 `;
         this.__setMarkerConfigs(JSON.stringify([
             [0, { type: 'for', iterator: 'tag', iterableExprId: 0, deps: ['tags'], trackBy: 'tag', hasEmpty: false }],
-            [9,
+            [
+                9,
                 {
                     type: 'text',
                     exprId: 1,

package/runtime/tests/TestInterpolationNestedPropertyComponentBase.js

@@ -3,7 +3,10 @@ import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 import { TestInterpolationNestedPropertyContainerClass } from './TestInterpolationNestedPropertyContainerClass.js';
 export class TestInterpolationNestedPropertyComponentBase extends FluffElement {
-    __hostClass = new Property({ initialValue: new TestInterpolationNestedPropertyContainerClass(), propertyName: 'hostClass' });
+    __hostClass = new Property({
+        initialValue: new TestInterpolationNestedPropertyContainerClass(),
+        propertyName: 'hostClass'
+    });
     get hostClass() {
         const val = this.__hostClass.getValue();
         if (!val) {

package/runtime/tests/TestPropertyBindingPipeParentComponent.js

@@ -8,6 +8,7 @@ export class TestPropertyBindingPipeParentComponent extends FluffElement {
     set amount(val) {
         this.__amount.setValue(val);
     }
+    // TEST STUB: In real apps, __pipes is generated by the CLI in CodeGenerator.ts
     __pipes = {
         double: (v) => (typeof v === 'number' ? v * 2 : 0),
         addSuffix: (v, suffix) => `${String(v)}${String(suffix)}`

package/runtime/tests/TestPropertyUnwrapParentComponent.js

@@ -2,7 +2,10 @@ import { Property } from '../../utils/Property.js';
 import { FluffElement } from '../FluffElement.js';
 import { TestPropertyUnwrapContainerClass } from './TestPropertyUnwrapContainerClass.js';
 export class TestPropertyUnwrapParentComponent extends FluffElement {
-    __hostClass = new Property({ initialValue: new TestPropertyUnwrapContainerClass(), propertyName: 'hostClass' });
+    __hostClass = new Property({
+        initialValue: new TestPropertyUnwrapContainerClass(),
+        propertyName: 'hostClass'
+    });
     get hostClass() {
         const val = this.__hostClass.getValue();
         if (!val) {

package/runtime/tests/TestWatchNestedPropertyParentComponent.js

@@ -2,7 +2,10 @@ import { Property } from '../../utils/Property.js';
 import { FluffElement } from '../FluffElement.js';
 import { TestWatchNestedPropertyContainerClass } from './TestWatchNestedPropertyContainerClass.js';
 export class TestWatchNestedPropertyParentComponent extends FluffElement {
-    __hostClass = new Property({ initialValue: new TestWatchNestedPropertyContainerClass(), propertyName: 'hostClass' });
+    __hostClass = new Property({
+        initialValue: new TestWatchNestedPropertyContainerClass(),
+        propertyName: 'hostClass'
+    });
     get hostClass() {
         const val = this.__hostClass.getValue();
         if (!val) {

package/runtime/tests/createTestInterpolationNestedPropertyComponent.d.ts

@@ -1,2 +1,2 @@
 import { TestInterpolationNestedPropertyComponentBase } from './TestInterpolationNestedPropertyComponentBase.js';
-export declare function createTestInterpolationNestedPropertyComponent(): typeof TestInterpolationNestedPropertyComponentBase;
+export declare function createTestInterpolationNestedPropertyComponent(): new () => TestInterpolationNestedPropertyComponentBase;

package/runtime/tests/createTestInterpolationPipeComponent.d.ts

@@ -0,0 +1,8 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export interface TestInterpolationPipeComponentInstance extends FluffElement {
+    message: string;
+    __message: Property<string>;
+}
+export type TestInterpolationPipeComponentConstructor = new () => TestInterpolationPipeComponentInstance;
+export declare function createTestInterpolationPipeComponent(): TestInterpolationPipeComponentConstructor;

package/runtime/tests/createTestInterpolationPipeComponent.js

@@ -0,0 +1,35 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+import { MarkerManager } from '../MarkerManager.js';
+export function createTestInterpolationPipeComponent() {
+    class TestComponent extends FluffElement {
+        __message = new Property({ initialValue: 'hello world', propertyName: 'message' });
+        get message() {
+            return this.__message.getValue() ?? '';
+        }
+        set message(val) {
+            this.__message.setValue(val);
+        }
+        // TEST STUB: In real apps, __pipes is generated by the CLI in CodeGenerator.ts
+        __pipes = {
+            uppercase: (v) => String(v)
+                .toUpperCase(),
+            truncate: (v, length) => {
+                const str = String(v);
+                const len = typeof length === 'number' ? length : 10;
+                return str.length > len ? str.slice(0, len) + '...' : str;
+            }
+        };
+        __render() {
+            this.__getShadowRoot().innerHTML = '<span><!--fluff:text:0--><!--/fluff:text:0--></span>';
+            this.__setMarkerConfigs(JSON.stringify([
+                [0, { type: 'text', exprId: 0, deps: ['message'], pipes: [{ name: 'uppercase', argExprIds: [] }] }]
+            ]));
+        }
+        __setupBindings() {
+            this.__initializeMarkers(MarkerManager);
+            super.__setupBindings();
+        }
+    }
+    return TestComponent;
+}

package/runtime/tests/createTestInterpolationPipeWithArgsComponent.d.ts

@@ -0,0 +1,2 @@
+import type { TestInterpolationPipeComponentConstructor } from './createTestInterpolationPipeComponent.js';
+export declare function createTestInterpolationPipeWithArgsComponent(): TestInterpolationPipeComponentConstructor;

package/runtime/tests/createTestInterpolationPipeWithArgsComponent.js

@@ -0,0 +1,35 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+import { MarkerManager } from '../MarkerManager.js';
+export function createTestInterpolationPipeWithArgsComponent() {
+    class TestComponentWithArgs extends FluffElement {
+        __message = new Property({ initialValue: 'hello world', propertyName: 'message' });
+        get message() {
+            return this.__message.getValue() ?? '';
+        }
+        set message(val) {
+            this.__message.setValue(val);
+        }
+        // TEST STUB: In real apps, __pipes is generated by the CLI in CodeGenerator.ts
+        __pipes = {
+            uppercase: (v) => String(v)
+                .toUpperCase(),
+            truncate: (v, length) => {
+                const str = String(v);
+                const len = typeof length === 'number' ? length : 10;
+                return str.length > len ? str.slice(0, len) + '...' : str;
+            }
+        };
+        __render() {
+            this.__getShadowRoot().innerHTML = '<span><!--fluff:text:0--><!--/fluff:text:0--></span>';
+            this.__setMarkerConfigs(JSON.stringify([
+                [0, { type: 'text', exprId: 0, deps: ['message'], pipes: [{ name: 'truncate', argExprIds: [1] }] }]
+            ]));
+        }
+        __setupBindings() {
+            this.__initializeMarkers(MarkerManager);
+            super.__setupBindings();
+        }
+    }
+    return TestComponentWithArgs;
+}

package/runtime/tests/typeguards.d.ts

@@ -0,0 +1,20 @@
+import type { TestLateDefineForColumn } from './TestLateDefineForComponent.js';
+import type { TestTask } from './TestNullInputTextComponent.js';
+export declare function hasItem(t: unknown): t is {
+    item: unknown;
+};
+export declare function hasItemName(t: unknown): t is {
+    itemName: string;
+};
+export declare function hasTask(t: unknown): t is {
+    task: TestTask;
+};
+export declare function isLateDefineForColumn(l: unknown): l is {
+    column: TestLateDefineForColumn;
+};
+export declare function hasValue(t: unknown): t is {
+    value: string;
+};
+export declare function hasTaskId(e: unknown): e is {
+    taskId: number;
+};

package/runtime/tests/typeguards.js

@@ -0,0 +1,18 @@
+export function hasItem(t) {
+    return t !== null && typeof t === 'object' && 'item' in t;
+}
+export function hasItemName(t) {
+    return t !== null && typeof t === 'object' && 'itemName' in t && typeof t.itemName === 'string';
+}
+export function hasTask(t) {
+    return t !== null && typeof t === 'object' && 'task' in t;
+}
+export function isLateDefineForColumn(l) {
+    return l !== null && typeof l === 'object' && 'column' in l;
+}
+export function hasValue(t) {
+    return t !== null && typeof t === 'object' && 'value' in t && typeof t.value === 'string';
+}
+export function hasTaskId(e) {
+    return e !== null && typeof e === 'object' && 'taskId' in e && typeof e.taskId === 'number';
+}