feat: Using React hooks in Svelte components

Author: Bob Fanger

docs/architecture.md

@@ -1,6 +1,10 @@
 # Architecture
 
-This document describes design desicions and implementation details of the preprocessor.
+This document describes designdecisions and implementation details of the preprocessor.
+
+**Principles:**
+
+- Compatibility first, Ease-of-use second and Performance last.
 
 ## Context
 

src/lib/Hook.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import used from "./used";
+
+  export let use: () => any;
+  export let out: any = undefined;
+
+  let ready = false;
+
+  function setValue(value: any) {
+    out = value;
+    ready = true;
+  }
+
+  function Hook<T>(props: { use: () => T; setValue(val: T): void }) {
+    const value = props.use();
+    props.setValue(value);
+    return null;
+  }
+  used(Hook);
+</script>
+
+<react:Hook {use} {setValue} />
+{#if ready}
+  <slot {out} />
+{/if}

src/lib/index.ts

@@ -1,3 +1,4 @@
 export { default as useStore } from "./useStore.js";
 export { default as reactify } from "./reactify.js";
 export { default as sveltify } from "./sveltify.js";
+export { default as Hook } from "./Hook.svelte";

src/lib/used.ts

@@ -0,0 +1,13 @@
+/* eslint-disable  @typescript-eslint/no-unused-vars */
+
+/**
+ * Svelte/TypeScript is not (yet) able to detect usage of the <react:ComponentX> syntax.
+ * This causes `X is declared but its value is never read. (ts:6133)` errors.
+ *
+ * This function can be used to suppress these errors.
+ *
+ * Usage:
+ *
+ *   used(ComponentX, ComponentY);
+ */
+export default function used(...args: any[]) {}

src/routes/+page.svelte

@@ -8,4 +8,6 @@
 
   <li><a href="/context-svelte">getContext()</a></li>
   <li><a href="/context-react">useContext()</a></li>
+
+  <li><a href="/hooks">Using hooks</a></li>
 </ul>

src/routes/hooks/+page.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Hook } from "$lib";
+  import { useState } from "react";
+
+  function useSomeState() {
+    return useState("Initial value");
+  }
+
+  function useMultipleHooks() {
+    const [x] = useState(1);
+    const [y] = useState(2);
+    return { x, y };
+  }
+</script>
+
+<Hook use={useSomeState} let:out={[value, setValue]}>
+  <div>{value}</div>
+  <button
+    on:click={() => {
+      setValue("Changed");
+    }}>Change</button
+  >
+</Hook>
+<hr />
+<Hook use={useMultipleHooks} let:out={position}>
+  x: {position.x}
+  y: {position.y}
+</Hook>