@fluffjs/fluff 0.1.15 → 0.1.17

package/package.json

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

package/runtime/FluffBase.js

@@ -76,6 +76,9 @@ export class FluffBase extends HTMLElement {
     }
     __applyPipes(value, pipes, locals) {
         let result = value;
+        if (result instanceof Property) {
+            result = result.getValue();
+        }
         for (const pipe of pipes) {
             result = this.__applyPipe(pipe.n, result, pipe.a, locals);
         }

package/runtime/ForController.js

@@ -36,6 +36,7 @@ export class ForController extends MarkerController {
                 };
                 this.cloneAndInsertTemplate(this.itemTemplate, itemContext, renderContext, this.bindingsSubscriptions);
             }
+            this.refreshParentBindings();
         };
         this.subscribeTo(deps, update);
         update();

package/runtime/IfController.js

@@ -38,6 +38,7 @@ export class IfController extends MarkerController {
                 if (matchedIndex >= 0 && matchedIndex < this.templates.length) {
                     this.cloneAndInsertTemplate(this.templates[matchedIndex], this.loopContext, undefined, this.bindingsSubscriptions);
                 }
+                this.refreshParentBindings();
             }
         };
         this.subscribeTo(allDeps, update);

package/runtime/MarkerController.d.ts

@@ -37,6 +37,7 @@ export declare abstract class MarkerController {
     protected createChildScope(locals: Record<string, unknown>): Scope;
     protected clearContentBetweenMarkersWithCleanup(bindingsSubscriptions: Subscription[]): void;
     protected insertBeforeEndMarker(node: Node): void;
+    protected refreshParentBindings(): void;
     protected processBindingsOnElement(el: HTMLElement, scope: Scope): void;
     protected processBindingsOnElementWithSubscriptions(el: HTMLElement, scope: Scope, subscriptions: Subscription[]): void;
     private __getFluffElementHost;

package/runtime/MarkerController.js

@@ -227,6 +227,18 @@ export class MarkerController {
             return;
         parent.insertBefore(node, this.endMarker);
     }
+    refreshParentBindings() {
+        const parent = this.startMarker.parentNode;
+        if (!(parent instanceof HTMLElement))
+            return;
+        if (!parent.hasAttribute('data-lid'))
+            return;
+        const fluffHost = this.__getFluffElementHost();
+        if (!fluffHost)
+            return;
+        const scope = this.getScope();
+        fluffHost.__processBindingsOnElementPublic(parent, scope);
+    }
     processBindingsOnElement(el, scope) {
         const fluffHost = this.__getFluffElementHost();
         if (!fluffHost)

package/runtime/SwitchController.js

@@ -35,6 +35,7 @@ export class SwitchController extends MarkerController {
                     shouldFallthrough = caseInfo.fallthrough;
                 }
             }
+            this.refreshParentBindings();
         };
         this.subscribeTo(deps, update);
         update();

package/runtime/tests/createPipeUnwrapChildComponent.d.ts

@@ -0,0 +1,6 @@
+import { FluffElement } from '../FluffElementImpl.js';
+export interface PipeUnwrapChildComponentInstance extends FluffElement {
+    value: unknown;
+}
+export type PipeUnwrapChildComponentConstructor = new () => PipeUnwrapChildComponentInstance;
+export declare function createPipeUnwrapChildComponent(): PipeUnwrapChildComponentConstructor;

package/runtime/tests/createPipeUnwrapChildComponent.js

@@ -0,0 +1,10 @@
+import { FluffElement } from '../FluffElementImpl.js';
+export function createPipeUnwrapChildComponent() {
+    class ChildComponent extends FluffElement {
+        value = null;
+        __render() {
+            this.__getShadowRoot().innerHTML = '<span>child</span>';
+        }
+    }
+    return ChildComponent;
+}

package/runtime/tests/createPipeUnwrapParentComponent.d.ts

@@ -0,0 +1,12 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export interface PipeUnwrapTestState {
+    receivedValue: unknown;
+    receivedValueType: string;
+}
+export interface PipeUnwrapParentComponentInstance extends FluffElement {
+    testProp: number;
+    __testProp: Property<number>;
+}
+export type PipeUnwrapParentComponentConstructor = new () => PipeUnwrapParentComponentInstance;
+export declare function createPipeUnwrapParentComponent(state: PipeUnwrapTestState, childTag: string): PipeUnwrapParentComponentConstructor;

package/runtime/tests/createPipeUnwrapParentComponent.js

@@ -0,0 +1,24 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export function createPipeUnwrapParentComponent(state, childTag) {
+    class ParentComponent extends FluffElement {
+        __testProp = new Property({ initialValue: 99, propertyName: 'testProp' });
+        get testProp() {
+            return this.__testProp.getValue() ?? 0;
+        }
+        set testProp(val) {
+            this.__testProp.setValue(val);
+        }
+        __pipes = {
+            capture: (value) => {
+                state.receivedValue = value;
+                state.receivedValueType = value instanceof Property ? 'Property' : typeof value;
+                return value;
+            }
+        };
+        __render() {
+            this.__getShadowRoot().innerHTML = `<${childTag} data-lid="l0"></${childTag}>`;
+        }
+    }
+    return ParentComponent;
+}

package/runtime/tests/createPipeUnwrapTestComponent.d.ts

@@ -0,0 +1,12 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export interface PipeUnwrapTestState {
+    receivedValue: unknown;
+    receivedValueType: string;
+}
+export interface PipeUnwrapTestComponentInstance extends FluffElement {
+    testProp: number;
+    __testProp: Property<number>;
+}
+export type PipeUnwrapTestComponentConstructor = new () => PipeUnwrapTestComponentInstance;
+export declare function createPipeUnwrapTestComponent(state: PipeUnwrapTestState): PipeUnwrapTestComponentConstructor;

package/runtime/tests/createPipeUnwrapTestComponent.js

@@ -0,0 +1,32 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+import { MarkerManager } from '../MarkerManager.js';
+export function createPipeUnwrapTestComponent(state) {
+    class TestComponent extends FluffElement {
+        __testProp = new Property({ initialValue: 42, propertyName: 'testProp' });
+        get testProp() {
+            return this.__testProp.getValue() ?? 0;
+        }
+        set testProp(val) {
+            this.__testProp.setValue(val);
+        }
+        __pipes = {
+            capture: (value) => {
+                state.receivedValue = value;
+                state.receivedValueType = value instanceof Property ? 'Property' : typeof value;
+                return value;
+            }
+        };
+        __render() {
+            this.__getShadowRoot().innerHTML = '<span><!--fluff:text:0--><!--/fluff:text:0--></span>';
+            this.__setMarkerConfigs(JSON.stringify([
+                [0, { type: 'text', exprId: 0, deps: ['testProp'], pipes: [{ name: 'capture', argExprIds: [] }] }]
+            ]));
+        }
+        __setupBindings() {
+            this.__initializeMarkers(MarkerManager);
+            super.__setupBindings();
+        }
+    }
+    return TestComponent;
+}