@fluffjs/fluff 0.1.13 → 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.13",
+  "version": "0.1.15",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/runtime/FluffBase.d.ts

@@ -12,6 +12,10 @@ export interface BindingInfo {
     t?: string;
     d?: PropertyChain[];
     s?: string;
+    p?: {
+        n: string;
+        a: number[];
+    }[];
 }
 export declare abstract class FluffBase extends HTMLElement {
     static __e: ExpressionFn[];
@@ -27,6 +31,12 @@ export declare abstract class FluffBase extends HTMLElement {
     protected __applyBindingWithScope(el: HTMLElement, binding: BindingInfo, scope: Scope, subscriptions?: Subscription[]): void;
     protected __getCompiledExprFn(exprId: number): ExpressionFn;
     protected __getCompiledHandlerFn(handlerId: number): HandlerFn;
+    protected __applyPipes(value: unknown, pipes: {
+        n: string;
+        a: number[];
+    }[], locals: Record<string, unknown>): unknown;
+    private __applyPipe;
+    protected __getPipeFn(_name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
     protected __subscribeToExpressionInScope(deps: PropertyChain[] | undefined, scope: Scope, callback: () => void, subscriptions?: Subscription[]): void;
     private __subscribeToPropertyChain;
     private __subscribeToNestedChain;

package/runtime/FluffBase.js

@@ -74,6 +74,25 @@ export class FluffBase extends HTMLElement {
         }
         return fn;
     }
+    __applyPipes(value, pipes, locals) {
+        let result = value;
+        for (const pipe of pipes) {
+            result = this.__applyPipe(pipe.n, result, pipe.a, locals);
+        }
+        return result;
+    }
+    __applyPipe(name, value, argExprIds, locals) {
+        const pipeFn = this.__getPipeFn(name);
+        if (!pipeFn) {
+            console.warn(`Pipe "${name}" not found`);
+            return value;
+        }
+        const args = argExprIds.map(id => this.__getCompiledExprFn(id)(this, locals));
+        return pipeFn(value, ...args);
+    }
+    __getPipeFn(_name) {
+        return undefined;
+    }
     __subscribeToExpressionInScope(deps, scope, callback, subscriptions) {
         if (!deps)
             return;
@@ -222,7 +241,10 @@ export class FluffBase extends HTMLElement {
                     throw new Error(`Binding for ${binding.n} is missing exprId`);
                 }
                 const fn = this.__getCompiledExprFn(binding.e);
-                const value = fn(this, scope.locals);
+                let value = fn(this, scope.locals);
+                if (binding.p && binding.p.length > 0) {
+                    value = this.__applyPipes(value, binding.p, scope.locals);
+                }
                 this.__setChildProperty(el, binding.n, value);
             }
             catch (e) {

package/runtime/FluffElementImpl.d.ts

@@ -21,6 +21,7 @@ export declare abstract class FluffElement extends FluffBase {
     protected __setupBindings(): void;
     protected __addSubscription(sub: Subscription): void;
     protected __pipe(name: string, value: unknown, ...args: unknown[]): unknown;
+    protected __getPipeFn(name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
     protected __getShadowRoot(): ShadowRoot;
     protected __setMarkerConfigs(configJson: string): void;
     protected __initializeMarkers(MarkerManagerClass: new (host: FluffElement, shadowRoot: ShadowRoot) => MarkerManagerInterface): void;

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';
@@ -86,6 +87,9 @@ export class FluffElement extends FluffBase {
         }
         return pipe(value, ...args);
     }
+    __getPipeFn(name) {
+        return this.__pipes[name] ?? getPipeTransform(name);
+    }
     __getShadowRoot() {
         return this._shadowRoot;
     }

package/runtime/MarkerController.d.ts

@@ -31,6 +31,8 @@ export declare abstract class MarkerController {
     protected getScope(): Scope;
     protected collectLocalsFromScope(scope: Scope): Record<string, unknown>;
     protected subscribeTo(deps: PropertyChain[], callback: () => void): void;
+    private subscribeToPropertyChain;
+    private subscribeToNestedChain;
     protected getReactivePropFromScope(propName: string, scope: Scope): Property<unknown> | undefined;
     protected createChildScope(locals: Record<string, unknown>): Scope;
     protected clearContentBetweenMarkersWithCleanup(bindingsSubscriptions: Subscription[]): void;

package/runtime/MarkerController.js

@@ -82,14 +82,95 @@ export class MarkerController {
     subscribeTo(deps, callback) {
         const scope = this.getScope();
         for (const dep of deps) {
-            const propName = Array.isArray(dep) ? dep[0] : dep;
-            if (propName.startsWith('['))
-                continue;
-            const reactiveProp = this.getReactivePropFromScope(propName, scope);
-            if (reactiveProp) {
-                const sub = reactiveProp.onChange.subscribe(callback);
-                this.subscriptions.push(sub);
+            if (Array.isArray(dep)) {
+                this.subscribeToPropertyChain(dep, scope, callback);
             }
+            else {
+                if (dep.startsWith('['))
+                    continue;
+                const reactiveProp = this.getReactivePropFromScope(dep, scope);
+                if (reactiveProp) {
+                    const sub = reactiveProp.onChange.subscribe(callback);
+                    this.subscriptions.push(sub);
+                }
+            }
+        }
+    }
+    subscribeToPropertyChain(chain, scope, callback) {
+        if (chain.length === 0)
+            return;
+        const [first, ...rest] = chain;
+        if (first.startsWith('['))
+            return;
+        const reactiveProp = this.getReactivePropFromScope(first, scope);
+        if (reactiveProp) {
+            if (rest.length === 0) {
+                this.subscriptions.push(reactiveProp.onChange.subscribe(callback));
+            }
+            else {
+                let nestedSubs = [];
+                const resubscribeNested = () => {
+                    for (const sub of nestedSubs) {
+                        sub.unsubscribe();
+                    }
+                    nestedSubs = [];
+                    const currentValue = reactiveProp.getValue();
+                    if (currentValue !== null && currentValue !== undefined) {
+                        this.subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                            nestedSubs.push(sub);
+                            this.subscriptions.push(sub);
+                        });
+                    }
+                    callback();
+                };
+                this.subscriptions.push(reactiveProp.onChange.subscribe(resubscribeNested));
+                const currentValue = reactiveProp.getValue();
+                if (currentValue !== null && currentValue !== undefined) {
+                    this.subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                        nestedSubs.push(sub);
+                        this.subscriptions.push(sub);
+                    });
+                }
+            }
+        }
+    }
+    subscribeToNestedChain(obj, chain, callback, addSub) {
+        if (chain.length === 0 || obj === null || obj === undefined)
+            return;
+        const [first, ...rest] = chain;
+        const prop = Reflect.get(obj, first);
+        if (prop instanceof Property) {
+            if (rest.length === 0) {
+                addSub(prop.onChange.subscribe(callback));
+            }
+            else {
+                let nestedSubs = [];
+                const resubscribeNested = () => {
+                    for (const sub of nestedSubs) {
+                        sub.unsubscribe();
+                    }
+                    nestedSubs = [];
+                    const currentValue = prop.getValue();
+                    if (currentValue !== null && currentValue !== undefined) {
+                        this.subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                            nestedSubs.push(sub);
+                            addSub(sub);
+                        });
+                    }
+                    callback();
+                };
+                addSub(prop.onChange.subscribe(resubscribeNested));
+                const currentValue = prop.getValue();
+                if (currentValue !== null && currentValue !== undefined) {
+                    this.subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                        nestedSubs.push(sub);
+                        addSub(sub);
+                    });
+                }
+            }
+        }
+        else if (rest.length > 0 && prop !== null && prop !== undefined) {
+            this.subscribeToNestedChain(prop, rest, callback, addSub);
         }
     }
     getReactivePropFromScope(propName, scope) {

package/runtime/TextController.js

@@ -1,3 +1,5 @@
+import { getPipeTransform } from '../decorators/Pipe.js';
+import { Property } from '../utils/Property.js';
 import { MarkerController } from './MarkerController.js';
 export class TextController extends MarkerController {
     config;
@@ -13,6 +15,9 @@ export class TextController extends MarkerController {
         const pipes = this.config.pipes ?? [];
         const update = () => {
             let result = this.evaluateExpr(this.config.exprId);
+            if (result instanceof Property) {
+                result = result.getValue();
+            }
             for (const pipe of pipes) {
                 result = this.applyPipe(pipe.name, result, pipe.argExprIds);
             }
@@ -40,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.d.ts

@@ -0,0 +1,10 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+import { TestInterpolationNestedPropertyContainerClass } from './TestInterpolationNestedPropertyContainerClass.js';
+export declare abstract class TestInterpolationNestedPropertyComponentBase extends FluffElement {
+    __hostClass: Property<TestInterpolationNestedPropertyContainerClass>;
+    get hostClass(): TestInterpolationNestedPropertyContainerClass;
+    set hostClass(val: TestInterpolationNestedPropertyContainerClass);
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestInterpolationNestedPropertyComponentBase.js

@@ -0,0 +1,30 @@
+import { Property } from '../../utils/Property.js';
+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'
+    });
+    get hostClass() {
+        const val = this.__hostClass.getValue();
+        if (!val) {
+            throw new Error('hostClass is null');
+        }
+        return val;
+    }
+    set hostClass(val) {
+        this.__hostClass.setValue(val);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = '<!--fluff:text:0--><!--/fluff:text:0-->';
+        this.__setMarkerConfigs(JSON.stringify([
+            [0, { type: 'text', exprId: 0, deps: [['hostClass', 'childProp']], pipes: [] }]
+        ]));
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestInterpolationNestedPropertyContainerClass.d.ts

@@ -0,0 +1,4 @@
+import { Property } from '../../utils/Property.js';
+export declare class TestInterpolationNestedPropertyContainerClass {
+    childProp: Property<number>;
+}

package/runtime/tests/TestInterpolationNestedPropertyContainerClass.js

@@ -0,0 +1,4 @@
+import { Property } from '../../utils/Property.js';
+export class TestInterpolationNestedPropertyContainerClass {
+    childProp = new Property({ initialValue: 42, propertyName: 'childProp' });
+}

package/runtime/tests/TestPropertyBindingPipeChildComponent.d.ts

@@ -0,0 +1,10 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export declare let testPropertyBindingPipeReceivedValue: unknown;
+export declare function resetTestPropertyBindingPipeReceivedValue(): void;
+export declare class TestPropertyBindingPipeChildComponent extends FluffElement {
+    __value: Property<unknown>;
+    get value(): unknown;
+    set value(val: unknown);
+    protected __render(): void;
+}

package/runtime/tests/TestPropertyBindingPipeChildComponent.js

@@ -0,0 +1,19 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export let testPropertyBindingPipeReceivedValue = undefined;
+export function resetTestPropertyBindingPipeReceivedValue() {
+    testPropertyBindingPipeReceivedValue = undefined;
+}
+export class TestPropertyBindingPipeChildComponent extends FluffElement {
+    __value = new Property({ initialValue: undefined, propertyName: 'value' });
+    get value() {
+        return this.__value.getValue();
+    }
+    set value(val) {
+        this.__value.setValue(val);
+        testPropertyBindingPipeReceivedValue = val;
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = '<span>child</span>';
+    }
+}

package/runtime/tests/TestPropertyBindingPipeParentComponent.d.ts

@@ -0,0 +1,9 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export declare class TestPropertyBindingPipeParentComponent extends FluffElement {
+    __amount: Property<number>;
+    get amount(): number;
+    set amount(val: number);
+    __pipes: Record<string, (v: unknown, ...args: unknown[]) => unknown>;
+    protected __render(): void;
+}

package/runtime/tests/TestPropertyBindingPipeParentComponent.js

@@ -0,0 +1,19 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export class TestPropertyBindingPipeParentComponent extends FluffElement {
+    __amount = new Property({ initialValue: 100, propertyName: 'amount' });
+    get amount() {
+        return this.__amount.getValue() ?? 0;
+    }
+    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)}`
+    };
+    __render() {
+        this.__getShadowRoot().innerHTML = '<test-child data-lid="l0"></test-child>';
+    }
+}

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/createPropertyBindingPipeChildComponent.d.ts

@@ -0,0 +1,2 @@
+import { TestPropertyBindingPipeChildComponent } from './TestPropertyBindingPipeChildComponent.js';
+export declare function createChildComponent(): typeof TestPropertyBindingPipeChildComponent;

package/runtime/tests/createPropertyBindingPipeChildComponent.js

@@ -0,0 +1,5 @@
+import { TestPropertyBindingPipeChildComponent } from './TestPropertyBindingPipeChildComponent.js';
+export function createChildComponent() {
+    return class extends TestPropertyBindingPipeChildComponent {
+    };
+}

package/runtime/tests/createPropertyBindingPipeParentComponent.d.ts

@@ -0,0 +1,2 @@
+import { TestPropertyBindingPipeParentComponent } from './TestPropertyBindingPipeParentComponent.js';
+export declare function createParentComponent(): typeof TestPropertyBindingPipeParentComponent;

package/runtime/tests/createPropertyBindingPipeParentComponent.js

@@ -0,0 +1,5 @@
+import { TestPropertyBindingPipeParentComponent } from './TestPropertyBindingPipeParentComponent.js';
+export function createParentComponent() {
+    return class extends TestPropertyBindingPipeParentComponent {
+    };
+}

package/runtime/tests/createTestInterpolationNestedPropertyComponent.d.ts

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

package/runtime/tests/createTestInterpolationNestedPropertyComponent.js

@@ -0,0 +1,5 @@
+import { TestInterpolationNestedPropertyComponentBase } from './TestInterpolationNestedPropertyComponentBase.js';
+export function createTestInterpolationNestedPropertyComponent() {
+    return class extends 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';
+}