{frameworkName}
+Rendered in React
+ + + +| Key | +Value | +Edit | +
|---|---|---|
| {key} | ++ {value instanceof Set + ? Array.from(value).join(", ") + : Array.isArray(value) + ? `[${value.join(", ")}]` + : JSON.stringify(value)} + | +
+ {typeof value === "string" ? (
+ {
+ setNestedValue(state, key, e.target.value);
+ }}
+ />
+ ) : typeof value === "number" ? (
+ {
+ setNestedValue(state, key, Number(e.target.value));
+ }}
+ />
+ ) : typeof value === "boolean" ? (
+ {
+ setNestedValue(state, key, e.target.checked);
+ }}
+ />
+ ) : Array.isArray(value) ? (
+
+
+
+
+ ) : value instanceof Set ? (
+
+
+
+
+ ) : (
+ "N/A"
+ )}
+ |
+
Rendered in Svelte
+| Key | +Value | +Edit | +
|---|---|---|
| {key} | ++ {#if value instanceof Set} + {Array.from(value).join(", ")} + {:else if Array.isArray(value)} + [{value.join(", ")}] + {:else} + {JSON.stringify(value)} + {/if} + | +
+ {#if typeof value === "string"}
+
+ setNestedValue($shapeObject, key, e.target.value)}
+ />
+ {:else if typeof value === "number"}
+
+ setNestedValue($shapeObject, key, Number(e.target.value))}
+ />
+ {:else if typeof value === "boolean"}
+
+ setNestedValue($shapeObject, key, e.target.checked)}
+ />
+ {:else if Array.isArray(value)}
+
+
+
+
+ {:else if value instanceof Set}
+
+
+
+
+ {:else}
+ N/A
+ {/if}
+ |
+
Loading state
+{/if} diff --git a/sdk/ng-sdk-js/examples/multi-framework-signals/src/frontends/tests/reactiveCrossFramework.spec.ts b/sdk/ng-sdk-js/examples/multi-framework-signals/src/frontends/tests/reactiveCrossFramework.spec.ts new file mode 100644 index 0000000..3f4f836 --- /dev/null +++ b/sdk/ng-sdk-js/examples/multi-framework-signals/src/frontends/tests/reactiveCrossFramework.spec.ts @@ -0,0 +1,177 @@ +import { test, expect } from "@playwright/test"; + +const mockTestObject = { + type: "TestObject", + stringValue: "string", + numValue: 42, + boolValue: true, + nullValue: null, + arrayValue: [1, 2, 3], + objectValue: { + nestedString: "nested", + nestedNum: 7, + nestedArray: [10, 12], + }, + setValue: new Set(["v1", "v2", "v3"]), +}; + +test("components load", async ({ page }) => { + await page.goto("/"); + await page.waitForSelector(".vue astro-island"); + + await expect(page.locator(".vue .title")).toHaveText("vue"); + await expect(page.locator(".react .title")).toHaveText("react"); + await expect(page.locator(".svelte .title")).toHaveText("svelte"); +}); + +// TODO: Test without signal pooling. +test.describe("cross framework propagation", () => { + const frameworks = ["vue", "react", "svelte"] as const; + + const isPlainObject = (v: unknown): v is RecordRendered in Vue
+ + + + + + + +| Key | +Value | +Edit | +
|---|---|---|
| {{ path }} | + + ++ + {{ Array.from(value).join(', ') }} + + + [{{ value.join(', ') }}] + + + {{ JSON.stringify(value) }} + + | + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ N/A
+
+
+ |
+
Loading state
+ +