bump

Author: mateothegreat

demo/src/app.svelte

@@ -1,40 +1,62 @@
 <script lang="ts">
-  import { ComponentCompiler, type CompiledComponent } from "@mateothegreat/dynamic-component-engine";
+  import { ComponentCompiler, sharedStore, type CompiledComponent } from "@mateothegreat/dynamic-component-engine";
   import { onMount } from "svelte";
 
   let renderRef: HTMLDivElement | undefined = $state(undefined);
 
   // This is to test that the component is updated when the count changes.
   let count = $state(0);
+
+  // Initialize shared store with initial count value.
+  sharedStore.set("count", count);
+
   setInterval(() => {
     count++;
+    sharedStore.set("count", count); // Update via the shared store
   }, 1000);
 
+  // Create a reactive reference that stays in sync with the store
+  $effect(() => {
+    sharedStore.set("count", count);
+  });
+
   let instances: CompiledComponent[] = $state([]);
 
   const doWork = async () => {
     const source = `
     <script>
       import { onDestroy } from "svelte";
+
+      let { data } = $props();
+      
+      // Access shared reactive state directly from the store.
+      let count = $state(sharedStore.get('count') || 0);
       
-      let { count = $bindable(0), data } = $props();
+      // Subscribe to store changes and update local state. 
+      const unsubscribe = sharedStore.subscribe('count', (newCount) => {
+        count = newCount;
+      });
       
       $effect(() => {
         console.log("count changed to:", count);
       });
 
+      const incrementCount = () => {
+        const currentCount = sharedStore.get('count') || 0;
+        sharedStore.set('count', currentCount + 1);
+      };
+
       onDestroy(() => {
         console.log("I've been destroyed");
+        unsubscribe();
       });
     <\/script>
 
     <div class="m-4 p-4 border-2 border-pink-500 rounded">
       <p>data: <span class="text-pink-500">{data}</span></p>
       <p>count: <span class="text-pink-500">{count}</span></p>
 
-      <button onclick={() => {
-          count++;
-      }} class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+      <button onclick={incrementCount} class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
         Increment
       <\/button>
     <\/div>`;
@@ -43,13 +65,13 @@
       source,
       renderRef!,
       {
-        count,
         data: "passed at compile time"
       },
       {
         css: true,
         sourcemap: true,
-        cache: false
+        cache: false,
+        sharedStore: sharedStore
       }
     );
 

demo/vercel.json

@@ -0,0 +1,6 @@
+{
+  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }],
+  "github": {
+    "enabled": true
+  }
+}

docs/reactivity.md

@@ -1,47 +1,134 @@
-Solutions for Rune-Based Reactive State Sharing
+# ([Solutions for Rune-Based Reactive State Sharing
 
-Solution 1: Reactive Context Injection
+The fundamental problem is that Svelte 5 runes create reactive references that lose their reactivity when serialized across compilation boundaries.
 
-Modify the factory function to accept reactive context objects that get injected into the
-component's compilation scope. Instead of passing static values, pass rune references directly
-through the compilation process.
+## The Core Issue
 
-Approach:
-- Extend ComponentCompiler.render() to accept a reactiveContext parameter containing rune
-objects
-- Modify transformCompiledCode() to inject these runes as imports/globals in the compiled
-component
-- The dynamic component accesses parent runes directly via injected context
+When we have `let count = $state(123)` in our parent component, we're creating a reactive reference.
 
-Solution 2: Rune Reference Passing
+However, when we try to pass this to a dynamically compiled component, several things break the reactivity chain:
+
+### 1. **Value** vs **Reference** Passing
+
+Parent component:
+
+```ts
+let count = $state(123);
+```
+
+What you're actually passing to the dynamic component:
+
+```ts
+const props = { count }; // This passes the VALUE (123), not the reactive reference
+```
+
+The `$state(123)` creates a reactive proxy/reference, but when you put count in the props object, you're passing the current value (`123`), not the reactive reference itself.
+
+### 2. Compilation Boundary Isolation
+
+Parent component (compiled at build time):
+
+```ts
+let count = $state(123);
+```
+
+Dynamic component (compiled at runtime):
+
+```ts
+let { count } = $props(); // This creates a NEW local variable, disconnected from parent
+```
+
+Each Svelte compilation creates its own reactive scope. The dynamically compiled component has no knowledge of the parent's reactive system - **it's essentially a _separate_ "universe" of reactivity**.
+
+### 3. Svelte's Internal Reactivity System
+
+Svelte 5 runes work through:
+
++ Reactive proxies that track dependencies.
++ Effect scheduling that runs when dependencies change.
++ Component boundaries that isolate reactive scopes
+
+When you pass count as a prop, the dynamic component receives a **snapshot** _value_, **not** a reactive subscription.
+
+### 4. The Mount/Unmount API Limitation
+
+```ts
+const component = mount(DynamicComponent, { target, props: { count: 123 } });
+```
+
+Svelte's `mount()` API expects static props at mount time. It doesn't have a built-in mechanism to pass ongoing reactive references that update the component after mounting.
+
+### Why The Original Approach Didn't Work
+
+Parent component:
+
+```ts
+let count = $state(123);
+```
+
+Dynamic component template:
+
+```ts
+let { count = $bindable(0) } = $props();
+```
+
+This creates two separate reactive variables with the same name but no connection between them.
+
+The `$bindable()` in the dynamic component creates its own reactive reference, completely isolated from the parent's `$state()`.
+
+### The Real Solution Would Require
+
+1) Passing reactive references (not values) across compilation boundaries.
+2) Shared reactive context that both components can access.
+3) Live prop updates after component mounting.
+4) Cross-compilation reactive dependency tracking.
+
+This is why the `SharedRuneStore` solution works (see [/src/shared-rune-store.ts](../src/shared-rune-store.ts)) - it creates a shared reactive context that both the parent and dynamic components can subscribe to, bypassing the compilation boundary limitations.
+
+## Potential Solutions
+
+### Solution 1: Reactive Context Injection
+
+Modify the factory function to accept reactive context objects that get injected into the component's compilation scope.
+
+Instead of passing static values, pass rune references directly through the compilation process.
+
+**Approach**:
+
++ Extend `ComponentCompiler.render()` to accept a reactiveContext parameter containing rune objects.
++ Modify transformCompiledCode() to inject these runes as imports/globals in the compiled component.
++ The dynamic component accesses parent runes directly via injected context.
+
+### Solution 2: Rune Reference Passing
 
 Create a mechanism to pass actual rune references (not their values) through the mount system by
-  serializing rune getters/setters and reconstructing them in the dynamic component.
 
-Approach:
-- Extend the factory function to accept rune descriptors ({ get: () => value, set: (v) => {...} 
-})
-- Transform the compiled code to wire these descriptors to local rune state
-- Dynamic components get direct access to parent runes through the descriptor interface
+serializing rune getters/setters and reconstructing them in the dynamic component.
+
+**Approach**:
+
++ Extend the factory function to accept rune descriptors `({ get: () => value, set: (v) => {...} })`.
++ Transform the compiled code to wire these descriptors to local rune state.
++ Dynamic components get direct access to parent runes through the descriptor interface.
+
+### Solution 3: Shared Rune Store
+
+Implement a global rune store that both parent and dynamic components can subscribe to, using Svelte 5's $state() with a singleton pattern.
 
-Solution 3: Shared Rune Store
+**Approach**:
 
-Implement a global rune store that both parent and dynamic components can subscribe to, using
-Svelte 5's $state() with a singleton pattern.
++ Create a `SharedRuneStore` class with `$state()` values.
++ Parent components register their runes in the store.
++ Dynamic components access the same rune references from the store.
++ No wrapper/proxy - direct rune access through shared state container.
 
-Approach:
-- Create a SharedRuneStore class with $state() values
-- Parent components register their runes in the store
-- Dynamic components access the same rune references from the store
-- No wrapper/proxy - direct rune access through shared state container
+### Solution 4: Compilation-Time Rune Binding
 
-Solution 4: Compilation-Time Rune Binding
+Modify the source transformation to replace rune references in the dynamic component with bindings to externally provided rune objects.
 
-Modify the source transformation to replace rune references in the dynamic component with
-bindings to externally provided rune objects.
+**Approach**:
 
-Approach:
-- Parse the dynamic component source for rune usage patterns
-- Replace let { count = $bindable(0) } = $props() with direct external rune bindings
-- Inject the actual parent runes as module-level imports during compilation
-- Component uses parent runes as if they were its own
++ Parse the dynamic component source for rune usage patterns.
++ Replace `let { count = $bindable(0) } = $props()` with direct external rune bindings.
++ Inject the actual parent runes as module-level imports during compilation.
++ Component uses parent runes as if they were its own.

src/compiler/runtime.ts

@@ -1,4 +1,8 @@
 import { compile, type CompileOptions, type CompileResult } from "svelte/compiler";
+import { SharedRuneStore } from "../shared-rune-store.js";
+
+// Re-export for convenience
+export { SharedRuneStore, sharedStore } from "../shared-rune-store.js";
 
 export interface CompiledComponent {
   component: any;
@@ -21,6 +25,7 @@ export interface CompilerOptions {
   onDestroy?: () => void;
   onError?: (error: Error) => void;
   useSandbox?: boolean; // Optional: render inside iframe for isolation
+  sharedStore?: SharedRuneStore; // Optional: shared rune store for reactive state
 }
 
 /**
@@ -85,17 +90,22 @@ export class ComponentCompiler {
    *
    * @param code - Compiled JS code.
    * @param componentName - Name of the component.
+   * @param sharedStore - Optional shared rune store for reactive state.
    *
    * @returns Transformed JS code as string.
    */
-  private static transformCompiledCode(code: string, componentName: string): string {
+  private static transformCompiledCode(code: string, componentName: string, sharedStore?: SharedRuneStore): string {
     const lines = code.split("\n");
 
     /**
      * Inject mount and unmount imports so that the wrapper can do it's job.
      */
     lines.unshift(`import { mount, unmount } from "svelte";`);
 
+    /**
+     * If a shared store is provided, inject it as a parameter in the factory function.
+     */
+
     /**
      * Replace default export with named component so that when the component is rendered,
      * the component is not exported as default but as a named component.
@@ -114,7 +124,20 @@ export class ComponentCompiler {
      * 2. Mount the component into the target element.
      * 3. Return the component and the destroy function.
      */
-    lines.push(`
+    const factoryCode = sharedStore 
+      ? `
+      const factory = (target, props, sharedStore) => {
+        // Make sharedStore globally available within this module
+        globalThis.sharedStore = sharedStore;
+        const component = mount(${componentName}, { target, props });
+        return {
+          component,
+          destroy: () => unmount(component)
+        };
+      };
+      export { factory as default };
+      `
+      : `
       const factory = (target, props) => {
         const component = mount(${componentName}, { target, props });
         return {
@@ -123,7 +146,9 @@ export class ComponentCompiler {
         };
       };
       export { factory as default };
-    `);
+      `;
+    
+    lines.push(factoryCode);
 
     return lines.join("\n");
   }
@@ -163,12 +188,12 @@ export class ComponentCompiler {
        * ```
        */
       const componentName = options.name?.replace(/\.(svelte|js)$/, "") || "DynamicComponent";
-      const transformedCode = this.transformCompiledCode(compiled.js.code, componentName);
+      const transformedCode = this.transformCompiledCode(compiled.js.code, componentName, options.sharedStore);
 
       fn = await this.loadModule(transformedCode);
       this.componentCache.set(cacheKey, fn);
 
-      const instance = fn(target, props);
+      const instance = options.sharedStore ? fn(target, props, options.sharedStore) : fn(target, props);
 
       const component = {
         component: instance.component,

src/index.ts

@@ -2,3 +2,4 @@
 export * from "./compiler";
 export * from "./dynamic-components";
 export * from "./loader";
+export * from "./shared-rune-store";