breaking: multiple elements in a single response (#124)

* wip: examples 01 dev

* hack with _ssr, not ideal though

* examples 02

* simplify waku/client usage

* example 03

* example 04

* improve example 04

* examples 05

* example 06

* fix example 06

* support children

* wip: waku/router, which is tough one

* rename from Server to Slot

* wip: fix router

* refactor consistent names

* wip: fix router

* add react hooks eslint plugin

* improve prefetched

* fix example 08

* fix example 09

* fix test

* wip: ssr config

* fix ex 06

* fix waku/router

* wip: website

* fix interleaveHtmlSnippets

* remove unstable_rootDir

* fix router build

* fix explicit index path (suboptimal?)

* this should be a proper fix

* website: use path prop #84

* fix action and improve example/06

* re-design router input string and allow client cache control

* update website

* make initialInput prop optional

* use "" for initial input for simplicity

* fix and a workaround for empty input string, seems suboptimal..

.eslintrc.json

@@ -5,6 +5,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
     "plugin:import/recommended",
     "plugin:import/typescript",
     "prettier"

examples/01_counter/src/components/App.tsx

@@ -1,6 +1,6 @@
 import { Counter } from "./Counter.js";
 
-const App = ({ name = "Anonymous" }) => {
+const App = ({ name }: { name: string }) => {
   return (
     <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
       <h1>Hello {name}!!</h1>

examples/01_counter/src/entries.tsx

@@ -0,0 +1,34 @@
+import { lazy } from "react";
+
+import { defineEntries } from "waku/server";
+
+const App = lazy(() => import("./components/App.js"));
+
+export default defineEntries(
+  // renderEntries
+  async (input) => {
+    return {
+      App: <App name={input || "Waku"} />,
+    };
+  },
+  // getBuildConfig
+  async () => {
+    return {
+      "/": {
+        entries: [[""]],
+      },
+    };
+  },
+  // getSsrConfig
+  async () => ({
+    getInput: (pathStr) => {
+      switch (pathStr) {
+        case "/":
+          return "";
+        default:
+          return null;
+      }
+    },
+    filter: (elements) => elements.App,
+  }),
+);

examples/01_counter/src/main.tsx

@@ -1,11 +1,12 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { serve } from "waku/client";
+import { Root, Slot } from "waku/client";
 
-const App = serve<{ name: string }>("App");
 const rootElement = (
   <StrictMode>
-    <App name="Waku" />
+    <Root>
+      <Slot id="App" />
+    </Root>
   </StrictMode>
 );
 

examples/02_async/src/components/App.tsx

@@ -2,7 +2,7 @@ import { Suspense } from "react";
 
 import { Counter } from "./Counter.js";
 
-const App = ({ name = "Anonymous" }) => {
+const App = ({ name }: { name: string }) => {
   return (
     <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
       <h1>Hello {name}!!</h1>

examples/02_async/src/entries.tsx

@@ -0,0 +1,34 @@
+import { lazy } from "react";
+
+import { defineEntries } from "waku/server";
+
+const App = lazy(() => import("./components/App.js"));
+
+export default defineEntries(
+  // renderEntries
+  async (input) => {
+    return {
+      App: <App name={input || "Waku"} />,
+    };
+  },
+  // getBuildConfig
+  async () => {
+    return {
+      "/": {
+        entries: [[""]],
+      },
+    };
+  },
+  // getSsrConfig
+  async () => ({
+    getInput: (pathStr) => {
+      switch (pathStr) {
+        case "/":
+          return "";
+        default:
+          return null;
+      }
+    },
+    filter: (elements) => elements.App,
+  }),
+);

examples/02_async/src/main.tsx

@@ -1,11 +1,12 @@
 import { StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
-import { serve } from "waku/client";
+import { Root, Slot } from "waku/client";
 
-const App = serve<{ name: string }>("App");
 const rootElement = (
   <StrictMode>
-    <App name="Waku" />
+    <Root>
+      <Slot id="App" />
+    </Root>
   </StrictMode>
 );
 

examples/03_promise/src/components/App.tsx

@@ -1,6 +1,7 @@
+import type { ReactNode } from "react";
 import { Counter } from "./Counter.js";
 
-const App = ({ name = "Anonymous" }) => {
+const App = ({ name, children }: { name: string; children: ReactNode }) => {
   const delayedMessage = new Promise<string>((resolve) => {
     setTimeout(() => resolve("Hello from server!"), 2000);
   });
@@ -9,6 +10,7 @@ const App = ({ name = "Anonymous" }) => {
       <h1>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
       <Counter delayedMessage={delayedMessage} />
+      {children}
     </div>
   );
 };

examples/03_promise/src/entries.tsx

@@ -0,0 +1,39 @@
+import { lazy } from "react";
+
+import { defineEntries } from "waku/server";
+import { Children } from "waku/client";
+
+const App = lazy(() => import("./components/App.js"));
+
+export default defineEntries(
+  // renderEntries
+  async (input) => {
+    return {
+      App: (
+        <App name={input || "Waku"}>
+          <Children />
+        </App>
+      ),
+    };
+  },
+  // getBuildConfig
+  async () => {
+    return {
+      "/": {
+        entries: [[""]],
+      },
+    };
+  },
+  // getSsrConfig
+  async () => ({
+    getInput: (pathStr) => {
+      switch (pathStr) {
+        case "/":
+          return "";
+        default:
+          return null;
+      }
+    },
+    filter: (elements) => elements.App,
+  }),
+);

examples/03_promise/src/main.tsx

@@ -1,11 +1,14 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { serve } from "waku/client";
+import { Root, Slot } from "waku/client";
 
-const App = serve<{ name: string }>("App");
 const rootElement = (
   <StrictMode>
-    <App name="Waku" />
+    <Root>
+      <Slot id="App">
+        <h3>A client element</h3>
+      </Slot>
+    </Root>
   </StrictMode>
 );
 

examples/04_callserver/src/components/App.tsx

@@ -5,7 +5,7 @@ type ServerFunction<T> = T extends (...args: infer A) => infer R
   ? (...args: A) => Promise<R>
   : never;
 
-const App = ({ name = "Anonymous" }) => {
+const App = ({ name }: { name: string }) => {
   return (
     <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
       <h1>Hello {name}!!</h1>

examples/04_callserver/src/components/Counter.tsx

@@ -5,7 +5,7 @@ import { useState, useTransition } from "react";
 export const Counter = ({
   greet,
 }: {
-  greet: (name: string) => string | Promise<string>;
+  greet: (name: string) => Promise<string>;
 }) => {
   const [count, setCount] = useState(0);
   const [text, setText] = useState<string | Promise<string>>("");

examples/04_callserver/src/entries.tsx

@@ -0,0 +1,34 @@
+import { lazy } from "react";
+
+import { defineEntries } from "waku/server";
+
+const App = lazy(() => import("./components/App.js"));
+
+export default defineEntries(
+  // renderEntries
+  async (input) => {
+    return {
+      App: <App name={input || "Waku"} />,
+    };
+  },
+  // getBuildConfig
+  async () => {
+    return {
+      "/": {
+        entries: [[""]],
+      },
+    };
+  },
+  // getSsrConfig
+  async () => ({
+    getInput: (pathStr) => {
+      switch (pathStr) {
+        case "/":
+          return "";
+        default:
+          return null;
+      }
+    },
+    filter: (elements) => elements.App,
+  }),
+);

examples/04_callserver/src/main.tsx

@@ -1,11 +1,12 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { serve } from "waku/client";
+import { Root, Slot } from "waku/client";
 
-const App = serve<{ name: string }>("App");
 const rootElement = (
   <StrictMode>
-    <App name="Waku" />
+    <Root>
+      <Slot id="App" />
+    </Root>
   </StrictMode>
 );