.gitignore

@@ -34,9 +34,3 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 .DS_Store
 
 .astro
-
-# Playwright
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/

package.json

@@ -9,31 +9,21 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "test": "vitest",
+    "test": "vitest"
-    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@astrojs/react": "4.3.0",
     "@astrojs/svelte": "7.1.0",
     "@astrojs/vue": "^5.1.0",
-    "@gn8/alien-signals-react": "^0.1.1",
-    "@gn8/alien-signals-solid": "^0.1.1",
-    "@gn8/alien-signals-svelte": "^0.1.1",
-    "@gn8/alien-signals-vue": "^0.1.1",
     "@types/react": "19.1.10",
     "@types/react-dom": "19.1.7",
-    "alien-deepsignals": "^0.1.0",
-    "alien-signals": "^2.0.7",
     "astro": "5.13.2",
-    "install": "^0.13.0",
-    "npm": "^11.5.2",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "svelte": "5.38.2",
     "vue": "3.5.19"
   },
   "devDependencies": {
-    "@playwright/test": "^1.55.0",
     "@types/node": "24.3.0",
     "@types/react": "19.1.10",
     "@types/react-dom": "19.1.7",

playwright.config.ts

@@ -1,79 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  testDir: "./src/frontends/tests",
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:4321",
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: "on-first-retry",
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
-
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
-
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    command: "npm run dev",
-    url: "http://localhost:4321",
-    reuseExistingServer: !process.env.CI,
-  },
-});

src/app/components/Highlight.astro

@@ -1,4 +1,11 @@
 ---
+interface Props {
+  react?: boolean;
+  svelte?: boolean;
+  vue?: boolean;
+  astro?: boolean;
+}
+
 const { react, svelte, vue, astro } = Astro.props;
 
 const frameworkName = Object.keys(Astro.props)[0];

src/app/components/SvelteRoot.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import HelloWorld from "src/frontends/svelte/HelloWorld.svelte";
+
+  //
 </script>
 
 <HelloWorld />

src/app/pages/index.astro

@@ -11,14 +11,14 @@ const title = "Multi-framework app";
 
 <Layout title={title}>
   <Highlight vue>
-    <VueRoot client:only />
+    <VueRoot client:load />
   </Highlight>
 
   <Highlight react>
-    <ReactRoot client:only="react" />
+    <ReactRoot client:visible />
   </Highlight>
 
   <Highlight svelte>
-    <SvelteRoot client:only />
+    <SvelteRoot client:load />
   </Highlight>
 </Layout>

src/frontends/react/HelloWorld.tsx

@@ -1,26 +1,9 @@
 import React from "react";
-import useShape from "../../ng-mock/js-land/frontendAdapters/react/useShape";
 
 export function HelloWorldReact() {
-  const state = useShape("Shape1", "");
-
-  window.reactState = state;
-  console.log("react render", state);
-
-  if (!state) return <>Loading state</>;
-
   return (
     <div>
       <p>Hello World from React!</p>
-      {state.name} lives at {state.address.street}
-      <p></p>
-      <button
-        onClick={() => {
-          state.name = `${state.name} ${state.name}`;
-        }}
-      >
-        Double name
-      </button>
     </div>
   );
 }

src/frontends/svelte/HelloWorld.svelte

@@ -1,19 +1,7 @@
 <script>
-  import useShape from "../../ng-mock/js-land/frontendAdapters/svelte/useShape";
+  // Simple Svelte component
-
-  const nestedObject = useShape("Shape1", null);
 </script>
 
 <div>
   <p>Hello World from Svelte!</p>
-
-  <pre>{JSON.stringify($nestedObject, null, 4)}</pre>
-  <button
-    on:click={() => {
-      window.svelteState = $nestedObject;
-      $nestedObject.name = $nestedObject.name.toUpperCase();
-    }}
-  >
-    upper-case name
-  </button>
 </div>

src/frontends/svelte/mount.ts

@@ -0,0 +1,22 @@
+// Simple Svelte-like component using vanilla JS
+export function mountSvelteComponent(element: HTMLElement) {
+  // Create the DOM structure that would be created by the Svelte component
+  element.innerHTML = `
+    <div style="
+      padding: 20px; 
+      border: 2px solid #000000ff; 
+      border-radius: 8px;
+      margin: 10px;
+      background-color: #fff5f5;
+    ">
+      <h2>Svelte Component</h2>
+      <p>Hello World from Svelte!</p>
+    </div>
+  `;
+
+  return {
+    $destroy: () => {
+      element.innerHTML = "";
+    },
+  };
+}

src/frontends/tests/reactiveCrossFramework.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-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");
-});

src/frontends/vue/HelloWorld.vue

@@ -1,29 +1,9 @@
-<script setup lang="ts">
-  import type { WritableComputedRef } from 'vue';
-import useShape from '../../ng-mock/js-land/frontendAdapters/vue/useShape';
-
-  const shapeObj = useShape("Shape1", "null");
-  
-  window.vueState= shapeObj;
-
-  const setName = () => {
-    shapeObj.value.name = "Bobby"
-  }
-</script>
-
-
 <template>
   <div>
     <p>Hello World from Vue!</p>
-    <div v-if="shapeObj != null">
-      <p>Type is <em>{{shapeObj.type}}</em> with street <em>{{shapeObj.address.street}}</em></p>
-
-      <button @click="setName">
-        Click to switch name
-      </button>
-    </div>
-    <div v-else>
-      Loading state
-    </div>
   </div>
 </template>
+
+<script setup lang="ts">
+// Simple Vue component with composition API
+</script>

src/frontends/vue/mount.ts

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import HelloworldVue from "./HelloWorld.vue";
+
+export function mountVueComponent(element: HTMLElement) {
+  const app = createApp(HelloworldVue);
+  app.mount(element);
+  return app;
+}

src/ng-mock/js-land/connector/applyDiff.ts

@@ -1,9 +1,6 @@
 import type { Diff } from "../types";
 
 /** Mock function to apply diffs. Just uses a copy of the diff as the new object. */
-export function applyDiff(currentState: any, diff: Diff) {
+export function applyDiff(currentState: object, diff: Diff): object {
-  const clone = JSON.parse(JSON.stringify(diff));
+  return JSON.parse(JSON.stringify(diff));
-  Object.keys(clone).forEach((k) => {
-    currentState[k] = clone[k];
-  });
 }

src/ng-mock/js-land/connector/createSignalObjectForShape.ts

@@ -1,84 +0,0 @@
-import updateShape from "src/ng-mock/wasm-land/updateShape";
-import type { Connection, Diff, Scope, Shape } from "../types";
-import requestShape from "src/ng-mock/wasm-land/requestShape";
-import { applyDiff } from "./applyDiff";
-import { batch, deepSignal, watch } from "alien-deepsignals";
-import { signal as createSignal, computed } from "alien-signals";
-
-type ReactiveShapeObject = object;
-
-type ShapeObjectSignal = ReturnType<
-  typeof createSignal<{
-    content: ReactiveShapeObject | null;
-  }>
->;
-
-const openConnections: Partial<Record<Shape, ShapeObjectSignal>> = {};
-
-/**
- * Create a signal for a shape object.
- * The function returns a signal of a shape object in the form:
- * `{content: <shapeObject>}`
- **/
-export function createSignalObjectForShape(
-  shape: Shape,
-  scope?: Scope,
-  poolSignal = true
-) {
-  if (poolSignal && openConnections[shape]) return openConnections[shape];
-
-  // DeepSignal has a different API to alien-signals.
-  // Therefore, we need to create a "root signal" wrapper that is
-  // triggered on deepSignal changes.
-  const rootSignal = createSignal<{
-    content: ReactiveShapeObject | null;
-  }>({ content: null });
-
-  // State
-  let stopWatcher: any = null;
-  let suspendDeepWatcher = false;
-
-  const onUpdateFromDb = (diff: Diff, connectionId: Connection["id"]) => {
-    const rootSignalValue = rootSignal();
-    console.log("Update received", connectionId, diff);
-    // Set new value from applying the diffs to the old value.
-
-    suspendDeepWatcher = true;
-    // We need to replace the root signal for now, so this is redundant.
-    batch(() => {
-      if (!rootSignalValue) return; // This shouldn't happen but we make the compiler happy.
-      const { content: proxiedShapeObj } = rootSignalValue;
-      applyDiff(proxiedShapeObj, diff);
-
-      // We put the proxied object into a new object for the root signal to trigger.
-      rootSignal({ content: proxiedShapeObj });
-    });
-    suspendDeepWatcher = false;
-  };
-
-  // Do the actual db request.
-  requestShape(shape, scope, onUpdateFromDb).then(
-    ({ connectionId, shapeObject }) => {
-      // Create a deepSignal to put into the vanilla alien-signal.
-      const proxiedShapeObj = deepSignal(shapeObject);
-
-      // Notify DB on changes.
-      stopWatcher = watch(
-        proxiedShapeObj,
-        (newVal, oldVal, onCleanup) => {
-          // Don't update when applying changes from db diffs from the db.
-          if (!suspendDeepWatcher) updateShape(connectionId, newVal);
-        },
-        { deep: true }
-      );
-
-      // Update the root signal.
-      rootSignal({ content: proxiedShapeObj });
-    }
-  );
-
-  if (poolSignal) openConnections[shape] = rootSignal;
-
-  // TODO: Dispose deepSignal root signal disposal.
-  return rootSignal;
-}

src/ng-mock/js-land/connector/ngSignals.ts

@@ -0,0 +1,31 @@
+import handleShapeUpdate from "src/ng-mock/wasm-land/handleShapeUpdate";
+import type { Connection, Diff, Scope, Shape } from "../types";
+import handleShapeRequest from "src/ng-mock/wasm-land/handleShapeRequest";
+import { applyDiff } from "./applyDiff";
+
+export async function createSignalObjectForShape(shape: Shape, scope?: Scope) {
+  const ret: {
+    state?: any;
+    connectionId?: Connection["id"];
+    update: (diff: Diff) => Promise<void>;
+  } = {
+    async update(diff) {
+      if (!ret.connectionId)
+        throw new Error("Connection not established yet for shape" + shape);
+      await handleShapeUpdate(ret.connectionId, diff);
+    },
+  };
+
+  const onDbUpdate = (diff: Diff) => {
+    ret.state = applyDiff(ret.state || {}, diff);
+  };
+
+  await handleShapeRequest(shape, onDbUpdate).then(
+    ({ connectionId, shapeObject }) => {
+      ret.state = shapeObject;
+      ret.connectionId = connectionId;
+    }
+  );
+
+  return ret;
+}

src/ng-mock/js-land/frontendAdapters/react/useShape.ts

@@ -1,22 +0,0 @@
-import { useSignal } from "@gn8/alien-signals-react";
-import { useMemo, useRef } from "react";
-import { createSignalObjectForShape } from "src/ng-mock/js-land/connector/createSignalObjectForShape";
-import type { Scope, Shape } from "src/ng-mock/js-land/types";
-
-// TODO: The universe-signal library causes two renders on change instead of one.
-// Find a fix
-
-const useShape = (shape: Shape, scope: Scope) => {
-  const signalOfShape = useMemo(() => {
-    console.log("react memo called...");
-    return createSignalObjectForShape(shape, scope);
-  }, [shape, scope]);
-
-  const [{ content: shapeObject }, setShapeObject] = useSignal(signalOfShape);
-
-  // We don't need the setter.
-  // The object is recursively proxied and changes are recorded there.
-  return shapeObject;
-};
-
-export default useShape;

src/ng-mock/js-land/frontendAdapters/svelte/useShape.ts

@@ -1,16 +0,0 @@
-import { derived } from "svelte/store";
-import { useSignal } from "@gn8/alien-signals-svelte";
-import { createSignalObjectForShape } from "src/ng-mock/js-land/connector/createSignalObjectForShape";
-import type { Scope, Shape } from "src/ng-mock/js-land/types";
-
-const useShape = (shape: Shape, scope: Scope) => {
-  const signalOfShape = createSignalObjectForShape(shape, scope);
-
-  const writeableStoreForShape = useSignal(signalOfShape);
-
-  // Get the content "deepSignal"
-  const content = derived(writeableStoreForShape, (value) => value.content);
-  return content;
-};
-
-export default useShape;

src/ng-mock/js-land/frontendAdapters/vue/useShape.ts

@@ -1,14 +0,0 @@
-import { useSignal } from "@gn8/alien-signals-vue";
-import { createSignalObjectForShape } from "src/ng-mock/js-land/connector/createSignalObjectForShape";
-import type { Scope, Shape } from "src/ng-mock/js-land/types";
-import { computed } from "vue";
-const useShape = (shape: Shape, scope: Scope) => {
-  const signalOfShape = createSignalObjectForShape(shape, scope);
-
-  const refOfShape = useSignal(signalOfShape);
-
-  // TODO: Maybe `refOfShape.value.content` works too?
-  return computed(() => refOfShape.value.content);
-};
-
-export default useShape;

src/ng-mock/tests/updatesWithWasm.test.ts

@@ -1,30 +1,23 @@
 import { expect, test } from "vitest";
-import { createSignalObjectForShape } from "../js-land/connector/createSignalObjectForShape";
+import { createSignalObjectForShape } from "../js-land/connector/ngSignals";
 
-const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-// TODO: Redo
 test("shape object notification comes back to others", async () => {
-  const object1 = createSignalObjectForShape("Shape1");
+  const object1 = await createSignalObjectForShape("Shape1");
-  const object2 = createSignalObjectForShape("Shape1");
+  const object2 = await createSignalObjectForShape("Shape1");
-
-  const object3 = createSignalObjectForShape("Shape2");
-  const object4 = createSignalObjectForShape("Shape2");
 
-  wait(50);
+  const object3 = await createSignalObjectForShape("Shape2");
+  const object4 = await createSignalObjectForShape("Shape2");
 
   // Update object 1 and expect object 2 to update as well.
-  object1()!.name = "Updated name from object1";
+  await object1.update({ name: "Updated name from object1" });
 
-  wait(30);
+  expect(object2.state?.name).toBe("Updated name from object1");
-  expect(object2()!.name).toBe("Updated name from object1");
 
   // Expect object of different shape not to have changed.
-  expect(object3().name).toBe("Niko's cat");
+  expect(object3.state?.name).toBe("Niko's cat");
 
   // Update object 4 and expect object 3 with same shape to have updated.
-  object4()!.name = "Updated name from object4";
+  await object4.update({ name: "Updated name from object4" });
 
-  wait(30);
+  expect(object3.state?.name).toBe("Updated name from object4");
-  expect(object3()!.name).toBe("Updated name from object4");
 });

src/ng-mock/wasm-land/handleShapeRequest.ts

@@ -1,5 +1,6 @@
+import { randomUUID } from "crypto";
 import * as shapeManager from "./shapeManager";
-import type { WasmConnection, Diff, Scope } from "./types";
+import type { WasmConnection, Diff } from "./types";
 import type { Shape } from "../js-land/types";
 
 const mockShapeObject1 = {
@@ -19,23 +20,19 @@ const mockShapeObject2 = {
   numberOfHomes: 3,
   address: {
     street: "Niko's street",
-    houseNumber: "15",
+    compartment: 2,
-    floor: 0,
   },
 };
 
-let connectionIdCounter = 1;
+export default async function handleShapeRequest(
-
-export default async function requestShape(
   shape: Shape,
-  scope: Scope | undefined,
   callback: (diff: Diff, connectionId: WasmConnection["id"]) => void
 ): Promise<{
   connectionId: string;
   shapeObject: object;
 }> {
   const connection: WasmConnection = {
-    id: String(connectionIdCounter++),
+    id: randomUUID(),
     shape,
     // Create a deep copy to prevent accidental by-reference changes.
     state: JSON.parse(

src/ng-mock/wasm-land/handleShapeUpdate.ts

@@ -1,15 +1,13 @@
 import * as shapeManager from "./shapeManager";
 import type { WasmConnection, Diff } from "./types";
 
-export default async function updateShape(
+export default async function handleShapeUpdate(
   connectionId: WasmConnection["id"],
   diff: Diff
 ) {
   const connection = shapeManager.connections.get(connectionId);
   if (!connection) throw new Error("No Connection found.");
 
-  console.log("BACKEND: Received update request from ", connectionId);
-
   const newState = shapeManager.applyDiff(connection.state, diff);
   connection.state = newState;