working shared alien-signals state

package.json

@@ -15,9 +15,17 @@
     "@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",

src/app/components/Highlight.astro

@@ -1,11 +1,4 @@
 ---
-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,7 +1,5 @@
 <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:load />
+    <VueRoot client:only />
   </Highlight>
 
   <Highlight react>
-    <ReactRoot client:visible />
+    <ReactRoot client:only="react" />
   </Highlight>
 
   <Highlight svelte>
-    <SvelteRoot client:load />
+    <SvelteRoot client:only />
   </Highlight>
 </Layout>

src/frontends/react/HelloWorld.tsx

@@ -1,9 +1,23 @@
 import React from "react";
+import { useSignal } from "@gn8/alien-signals-react";
+
+import {
+  deepSignalExample,
+  computedSignalFromExample,
+} from "src/ng-mock/js-land/signalLibs/alienSignals";
 
 export function HelloWorldReact() {
+  const [state] = useSignal(deepSignalExample);
+  const [computed] = useSignal(computedSignalFromExample);
+
   return (
     <div>
       <p>Hello World from React!</p>
+      <p>Here is a reactive object with {computed.get()} props.</p>
+      <pre>{JSON.stringify(state, null, 4)}</pre>
+      <button onClick={() => state.array.push(state.array.at(-1) + 1)}>
+        Click to add val
+      </button>
     </div>
   );
 }

src/frontends/svelte/HelloWorld.svelte

@@ -1,7 +1,24 @@
 <script>
-  // Simple Svelte component
+  import { useSignal } from "@gn8/alien-signals-svelte";
+  import {
+    deepSignalExample,
+    computedSignalFromExample,
+  } from "src/ng-mock/js-land/signalLibs/alienSignals";
+
+  const nestedObject = useSignal(deepSignalExample);
+  const computed = useSignal(computedSignalFromExample);
 </script>
 
 <div>
   <p>Hello World from Svelte!</p>
+
+  <p>Here is a reactive object with {$computed.get()} props.</p>
+  <pre>{JSON.stringify($nestedObject, null, 4)}</pre>
+  <button
+    on:click={() => {
+      $nestedObject.array.splice(0, 1);
+    }}
+  >
+    Click to remove first array element
+  </button>
 </div>

src/frontends/svelte/mount.ts

@@ -1,22 +0,0 @@
-// 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/vue/HelloWorld.vue

@@ -1,9 +1,22 @@
+<script setup lang="ts">
+  import {useSignal} from '@gn8/alien-signals-vue';
+  import {
+    deepSignalExample,
+    computedSignalFromExample,
+  } from "src/ng-mock/js-land/signalLibs/alienSignals";
+
+  const state = useSignal(deepSignalExample);
+  const computed = useSignal(computedSignalFromExample);
+</script>
+
+
 <template>
   <div>
     <p>Hello World from Vue!</p>
+    <p>Here is a reactive object with {{computed.get()}} props.</p>
+    <pre>{{JSON.stringify(state, null, 4)}}</pre>
+    <button @click="state.array.push(state.array.at(-1) + 1)">
+      Click to add val
+    </button>
   </div>
 </template>
-
-<script setup lang="ts">
-// Simple Vue component with composition API
-</script>

src/frontends/vue/mount.ts

@@ -1,8 +0,0 @@
-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/signalLibs/alienSignals.ts

@@ -0,0 +1,45 @@
+import { deepSignal, watch, computed } from "alien-deepsignals";
+import { signal } from "alien-signals";
+
+const deepSignalExample = deepSignal({
+  count: 0,
+  name: "John",
+  nested: {
+    deep: "value",
+  },
+  array: [1, 2, 3],
+  set: new Set(["el1"]),
+});
+
+const computedSignalFromExample = computed(() => {
+  return Object.keys(deepSignalExample).length;
+});
+
+/** Create a vanilla alien-signals Signal so that it can be normally used by universe-alien-signals. */
+const wrapDeepIntoAlienSignal = <T extends object>(
+  nestedSignal: ReturnType<typeof deepSignal<T>>
+) => {
+  const alienSignal = signal(nestedSignal);
+
+  // Watch deep signal and notify vanilla alien-signal on changes.
+  watch(
+    nestedSignal,
+    (value) => {
+      // We need to destructure because the object otherwise remained the same.
+      alienSignal({ ...nestedSignal });
+    },
+    { deep: true }
+  );
+
+  return alienSignal;
+};
+
+const wrappedDeepSignalState = wrapDeepIntoAlienSignal(deepSignalExample);
+const wrappedComputedPropertiesOfObj = wrapDeepIntoAlienSignal(
+  computedSignalFromExample
+);
+
+export {
+  wrappedDeepSignalState as deepSignalExample,
+  wrappedComputedPropertiesOfObj as computedSignalFromExample,
+};