@fluffjs/fluff 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/fluff",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "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/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;
+}