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>