feat: Svelte Context between reactified Svelte components

Author: bfanger

docs/caveats.md

@@ -68,15 +68,15 @@ React vDOM output:
 
 ```jsx
 <Bridge>
-  <SvelteToReactContext.Provider>
+  <SvelteFirstContext.Provider>
     <p>
       <Bridge>
-        <SvelteToReactContext.Provider>
+        <SvelteFirstContext.Provider>
           <Child /> <- When merging the render trees the <h1>Content</h1> is injected here
-        </SvelteToReactContext.Provider>
+        </SvelteFirstContext.Provider>
       </Bridge>
     </p>
-  </SvelteToReactContext.Provider>
+  </SvelteFirstContext.Provider>
 </Bridge>
 ```
 

docs/reactify.md

@@ -16,14 +16,16 @@ type Props = {
 const Dialog: React.FC<Props> = ({ onClose }) => (
   <div className="dialog">
     <h2>Thanks for subscribing!</h2>
-    <svelte.Button type="primary" onClick={() => onClose()}>
+    <svelte.Button type="primary" onclick={() => onClose()}>
       Close
     </svelte.Button>
   </div>
 );
 ```
 
-React only has props, we we assume that the props starting with "on" followed by a capital letter are event handlers.
+## When React starts the rendering, rendering the children is delayed
+
+This is because we want to extract the context from the Svelte component and provide that to the Svelte child components
 
 ## Svelte components missing CSS?
 

package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/bfanger/svelte-preprocess-react.git"
   },
-  "version": "2.0.6",
+  "version": "2.1.0",
   "license": "MIT",
   "type": "module",
   "scripts": {

playwright/tests/react-first.test.ts

@@ -9,6 +9,7 @@ test.describe("react-first", () => {
     await page.goto("/react-spa.html");
     await testDog(page);
     await testChildren(page);
+    await testContext(page);
   });
 
   test("Hydrate reactified Svelte component inside React server rendered page", async ({
@@ -17,6 +18,7 @@ test.describe("react-first", () => {
     await page.goto("/react-ssr?hydrate=1");
     await testDog(page);
     await testChildren(page);
+    await testContext(page);
   });
 });
 
@@ -46,3 +48,8 @@ async function testChildren(page: Page) {
     }),
   ).toHaveScreenshot();
 }
+async function testContext(page: Page) {
+  await expect(
+    page.locator("pre", { hasText: '"Svelte context value"' }),
+  ).toHaveScreenshot();
+}

playwright/tests/react-first.test.ts-snapshots/react-first-Hydrate-reactified-Svelte-component-inside-React-server-rendered-page-3-darwin.png

@@ -1,7 +1,10 @@
 <script lang="ts">
   import { getContext } from "svelte";
 
-  export let id: any;
+  type Props = {
+    id: any;
+  };
+  let { id }: Props = $props();
 
   const context = getContext(id);
   const text = JSON.stringify(context);

playwright/tests/react-first.test.ts-snapshots/react-first-render-reactified-Svelte-component-inside-a-React-SPA-3-darwin.png

@@ -35,7 +35,7 @@ export default function hooks<T>(
     });
 
     onDestroy(() => {
-      const index = parent.hooks.findIndex((h) => h === hook);
+      const index = parent.hooks.findIndex((h) => h.key === hook.key);
       if (index !== -1) {
         parent.hooks.splice(index, 1);
       }

src/demo/components/DebugContext.svelte

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect, createElement } from "react";
 import type { ReactDependencies, TreeNode } from "./types.js";
 import Child from "./Child.js";
-import SvelteToReactContext from "./SvelteToReactContext.js";
+import SvelteFirstContext from "./SvelteFirstContext.js";
 import portalTag from "svelte-preprocess-react/internal/portalTag.js";
 
 type BridgeProps = {
@@ -71,7 +71,7 @@ function renderBridge(
   }
 
   const vdom = createElement(
-    SvelteToReactContext.Provider,
+    SvelteFirstContext.Provider,
     { value: node },
     children === undefined
       ? createElement(node.reactComponent, props)

src/lib/hooks.svelte.ts

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { getAllContexts } from "svelte";
+
+  type Props = {
+    setContexts: (value: Map<any, any>) => void;
+  };
+  const { setContexts }: Props = $props();
+
+  setContexts(getAllContexts());
+</script>

src/lib/internal/Bridge.svelte.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+/**
+ * Context from a reactified parent component.
+ */
+const ReactFirstContext = React.createContext<
+  | {
+      /** Resolves, when the parent svelte component was mounted & contexts are extracted */
+      promise: Promise<void>;
+      contexts?: Map<any, any>;
+    }
+  | undefined
+>(undefined);
+ReactFirstContext.displayName = "ReactToReactContext";
+export default ReactFirstContext;

src/lib/internal/ExtractContexts.svelte

@@ -1,12 +1,12 @@
 import * as React from "react";
 import portalTag from "./portalTag";
-import SvelteToReactContext from "./SvelteToReactContext";
+import SvelteFirstContext from "./SvelteFirstContext";
 
 type Props = {
   slot: number;
 };
 const Slot: React.FC<Props> = ({ slot }) => {
-  const node = React.useContext(SvelteToReactContext);
+  const node = React.useContext(SvelteFirstContext);
   const ref = React.useRef<HTMLElement>(undefined);
   const el = node?.slotSources[slot];
   React.useEffect(() => {

src/lib/internal/ReactFirstContext.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { TreeNode } from "./types";
+
+/**
+ * Context from a sveltified parent component.
+ */
+const SvelteFirstContext = React.createContext(
+  undefined as TreeNode | undefined,
+);
+SvelteFirstContext.displayName = "SvelteFirstContext";
+export default SvelteFirstContext;

src/lib/internal/Slot.ts

@@ -4,6 +4,7 @@
    */
   import type React from "react";
   import type { Component } from "svelte";
+  import ExtractContexts from "svelte-preprocess-react/internal/ExtractContexts.svelte";
   import portalTag from "svelte-preprocess-react/internal/portalTag";
 
   type Props = {
@@ -12,9 +13,16 @@
     props: Record<string, any>;
     react$children?: React.ReactNode;
     setSlot?: (slot: HTMLElement | undefined) => void;
+    setContexts?: (value: Map<any, any>) => void;
   };
-  let { SvelteComponent, nodeKey, props, react$children, setSlot }: Props =
-    $props();
+  let {
+    SvelteComponent,
+    nodeKey,
+    props,
+    react$children,
+    setSlot,
+    setContexts,
+  }: Props = $props();
 
   (globalThis as any).$$reactifySetProps = (update: Record<string, any>) => {
     props = update;
@@ -41,7 +49,9 @@
           node={nodeKey}
           style="display:contents"
           use:slot
-        ></svelte-children>{/if}</SvelteComponent
+        ></svelte-children>{/if}{#if setContexts}<ExtractContexts
+          {setContexts}
+        />{/if}</SvelteComponent
     >
   {/if}</svelte:element
 >

src/lib/internal/SvelteFirstContext.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { createRawSnippet, mount, unmount, type Component } from "svelte";
 import { render } from "svelte/server";
-import SvelteToReactContext from "./internal/SvelteToReactContext.js";
+import SvelteFirstContext from "./internal/SvelteFirstContext.js";
+import ReactFirstContext from "./internal/ReactFirstContext.js";
 import SvelteWrapper from "./internal/SvelteWrapper.svelte";
 import type { ChildrenPropsAsReactNode } from "svelte-preprocess-react/internal/types.js";
 
@@ -52,21 +53,35 @@ function single<P extends Record<string, any>>(
       const sveltePropsRef = React.useRef<(props: P) => void>(undefined);
       const svelteChildrenRef = React.useRef<HTMLElement>(undefined);
       const reactChildrenRef = React.useRef<HTMLElement>(undefined);
-      const node = React.useContext(SvelteToReactContext);
-      const { key, context } = node ?? { key: "/island/" };
+      const node = React.useContext(SvelteFirstContext);
 
-      // Mount the Svelte component
-      React.useEffect(() => {
-        const target = wrapperRef.current;
-        if (!target) {
-          return undefined;
-        }
-        const component = mount(SvelteWrapper, {
+      const nestedContext = React.useContext(ReactFirstContext);
+      const nestedRef = React.useRef(
+        {} as {
+          promise: Promise<void>;
+          contexts?: Map<any, any>;
+          resolve: () => void;
+        },
+      );
+      if (typeof nestedRef.current.promise === "undefined") {
+        nestedRef.current.promise = new Promise((resolve) => {
+          nestedRef.current.resolve = resolve;
+        });
+      }
+      const nodeKey = node?.key ?? "/island/";
+
+      const mountComponent = React.useCallback((target: HTMLElement) => {
+        return mount(SvelteWrapper, {
           target,
           props: {
             SvelteComponent: SvelteComponent as any,
-            nodeKey: key,
-            react$children: children,
+            nodeKey: node?.key ?? "/island/",
+            react$children: node ? children : children ? [] : undefined,
+            setContexts: node
+              ? undefined
+              : (value: Map<any, any>) => {
+                  nestedRef.current.contexts = value;
+                },
             props,
             setSlot: (el: HTMLElement | undefined) => {
               if (el && reactChildrenRef.current) {
@@ -75,12 +90,33 @@ function single<P extends Record<string, any>>(
               svelteChildrenRef.current = el;
             },
           },
-          context,
+          context: node?.context ?? nestedContext?.contexts,
         });
-        sveltePropsRef.current = (globalThis as any).$$reactifySetProps;
+      }, []);
 
+      // Mount the Svelte component
+      React.useEffect(() => {
+        const target = wrapperRef.current;
+        if (!target) {
+          return undefined;
+        }
+        let component: ReturnType<typeof mount>;
+        if (nestedContext) {
+          void nestedContext.promise.then(() => {
+            component = mountComponent(target);
+            nestedRef.current.resolve();
+          });
+        } else {
+          component = mountComponent(target);
+          nestedRef.current.resolve();
+        }
+
+        sveltePropsRef.current = (globalThis as any).$$reactifySetProps;
         return () => {
-          void unmount(component);
+          void (async () => {
+            await nestedContext?.promise;
+            await unmount(component);
+          })();
         };
       }, [wrapperRef]);
 
@@ -113,7 +149,7 @@ function single<P extends Record<string, any>>(
           const len = $$payload.out.length;
           (SvelteWrapper as any)($$payload, {
             SvelteComponent,
-            nodeKey: key,
+            nodeKey,
             props,
             react$children: children,
           });
@@ -129,7 +165,7 @@ function single<P extends Record<string, any>>(
           }
           const result = render(SvelteComponent as any, {
             props,
-            context,
+            context: node?.context,
           });
           if (typeof result.head === "string") {
             html += result.head;
@@ -152,7 +188,7 @@ function single<P extends Record<string, any>>(
           React.createElement("reactify-svelte", {
             key: "reactify",
             ref: wrapperRef,
-            node: key,
+            node: nodeKey,
             style: { display: "contents" },
             suppressHydrationWarning: true,
             dangerouslySetInnerHTML: { __html: html },
@@ -163,7 +199,7 @@ function single<P extends Record<string, any>>(
                   "react-children",
                   {
                     key: "react-children",
-                    node: key,
+                    node: nodeKey,
                     style: { display: "none" },
                   },
                   children,
@@ -188,15 +224,24 @@ function single<P extends Record<string, any>>(
               {
                 key: "react-children",
                 ref: reactChildrenRef,
-                node: key,
+                node: node?.key,
                 style: { display: "none" },
               },
-              children,
+              node
+                ? children
+                : React.createElement(
+                    ReactFirstContext.Provider,
+                    { value: nestedRef.current },
+                    children,
+                  ),
             )
           : undefined,
       );
     },
   };
+  if (name) {
+    (named[name] as React.FC).displayName = name;
+  }
   cache.set(SvelteComponent, named[name]);
   return named[name];
 }