create-waku 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-waku",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "author": "Daishi Kato",
   "contributors": [
     "Vasu Singh"
@@ -28,6 +28,7 @@
   },
   "scripts": {
     "start": "node dist/cli.js",
+    "compile": "rm -rf template dist && pnpm run template && pnpm run build",
     "template": "cp -r ../../examples template/",
     "build": "esbuild src/* --bundle --platform=node --outdir=dist"
   }

package/src/cli.ts

@@ -35,7 +35,8 @@ async function init() {
   let targetDir = "";
   const defaultProjectName = "waku-project";
 
-  const CHOICES = fs.readdirSync("template");
+  const templateRoot = path.join(__dirname, "../template");
+  const CHOICES = fs.readdirSync(templateRoot);
   let result: {
     packageName: string;
     shouldOverwrite: string;
@@ -116,8 +117,7 @@ async function init() {
 
   console.log("Setting up project...");
 
-  const templateRoot = path.join(__dirname, "../template");
-  const templateDir = path.resolve(templateRoot, chooseProject);
+  const templateDir = path.join(templateRoot, chooseProject);
 
   // Read existing package.json from the root directory
   const packageJsonPath = path.join(root, "package.json");

package/template/01_counter/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsc" "$@"
+fi

package/template/01_counter/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsserver" "$@"
+fi

package/template/01_counter/node_modules/.bin/waku

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/packages/waku/dist/node_modules:/home/runner/work/waku/waku/packages/waku/node_modules:/home/runner/work/waku/waku/packages/node_modules:/home/runner/work/waku/waku/node_modules:/home/runner/work/waku/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/packages/waku/dist/node_modules:/home/runner/work/waku/waku/packages/waku/node_modules:/home/runner/work/waku/waku/packages/node_modules:/home/runner/work/waku/waku/node_modules:/home/runner/work/waku/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../packages/waku/dist/cli.js" "$@"
+else
+  exec node  "$basedir/../../../../packages/waku/dist/cli.js" "$@"
+fi

package/template/01_counter/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "waku-example",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev --with-ssr",
+    "build": "waku build",
+    "start": "waku start --with-ssr"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "react": "18.3.0-canary-7118f5dd7-20230705",
+    "react-dom": "18.3.0-canary-7118f5dd7-20230705",
+    "react-server-dom-webpack": "18.3.0-canary-7118f5dd7-20230705",
+    "waku": "0.15.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "typescript": "^5.2.2"
+  }
+}

package/template/01_counter/src/components/App.tsx

@@ -0,0 +1,13 @@
+import { Counter } from "./Counter.js";
+
+const App = ({ name }: { name: string }) => {
+  return (
+    <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
+      <h1>Hello {name}!!</h1>
+      <h3>This is a server component.</h3>
+      <Counter />
+    </div>
+  );
+};
+
+export default App;

package/template/01_counter/src/components/Counter.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useState } from "react";
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+      <h3>This is a client component.</h3>
+    </div>
+  );
+};

package/template/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,
+  }),
+);

package/template/01_counter/src/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Waku example</title>
+    <style>
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .spinner {
+        width: 36px;
+        height: 36px;
+        margin: auto;
+        border: 2px solid #ddd;
+        border-top-color: #222;
+        border-radius: 50%;
+        animation: spinner 1s linear infinite;
+      }
+      #root > .spinner {
+        margin-top: calc(50% - 18px);
+      }
+    </style>
+  </head>
+  <body>
+    <!--placeholder1-->
+    <div id="root">
+      <div class="spinner"></div>
+    </div>
+    <!--/placeholder1-->
+    <script src="/main.tsx" async type="module"></script>
+    <!--placeholder2-->
+    <!--/placeholder2-->
+  </body>
+</html>

package/template/01_counter/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Root, Slot } from "waku/client";
+
+const rootElement = (
+  <StrictMode>
+    <Root>
+      <Slot id="App" />
+    </Root>
+  </StrictMode>
+);
+
+createRoot(document.getElementById("root")!).render(rootElement);

package/template/01_counter/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}

package/template/02_async/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsc" "$@"
+fi

package/template/02_async/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsserver" "$@"
+fi

package/template/02_async/node_modules/.bin/waku

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/packages/waku/dist/node_modules:/home/runner/work/waku/waku/packages/waku/node_modules:/home/runner/work/waku/waku/packages/node_modules:/home/runner/work/waku/waku/node_modules:/home/runner/work/waku/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/packages/waku/dist/node_modules:/home/runner/work/waku/waku/packages/waku/node_modules:/home/runner/work/waku/waku/packages/node_modules:/home/runner/work/waku/waku/node_modules:/home/runner/work/waku/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../packages/waku/dist/cli.js" "$@"
+else
+  exec node  "$basedir/../../../../packages/waku/dist/cli.js" "$@"
+fi

package/template/02_async/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "waku-example",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev --with-ssr",
+    "build": "waku build",
+    "start": "waku start --with-ssr"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "react": "18.3.0-canary-7118f5dd7-20230705",
+    "react-dom": "18.3.0-canary-7118f5dd7-20230705",
+    "react-server-dom-webpack": "18.3.0-canary-7118f5dd7-20230705",
+    "waku": "0.15.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "typescript": "^5.2.2"
+  }
+}

package/template/02_async/src/components/App.tsx

@@ -0,0 +1,35 @@
+import { Suspense } from "react";
+
+import { Counter } from "./Counter.js";
+
+const App = ({ name }: { name: string }) => {
+  return (
+    <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
+      <h1>Hello {name}!!</h1>
+      <h3>This is a server component.</h3>
+      <Suspense fallback="Pending...">
+        <ServerMessage />
+      </Suspense>
+      <Suspense fallback={<CounterSkeleton />}>
+        <Counter />
+      </Suspense>
+    </div>
+  );
+};
+
+const ServerMessage = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return <p>Hello from server!</p>;
+};
+
+const CounterSkeleton = () => {
+  return (
+    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+      <p>Count: {0}</p>
+      <button disabled>Increment</button>
+      <h3>This is a skeleton component.</h3>
+    </div>
+  );
+};
+
+export default App;

package/template/02_async/src/components/Counter.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useState } from "react";
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+      <h3>This is a client component.</h3>
+    </div>
+  );
+};

package/template/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,
+  }),
+);

package/template/02_async/src/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Waku example</title>
+    <style>
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .spinner {
+        width: 36px;
+        height: 36px;
+        margin: auto;
+        border: 2px solid #ddd;
+        border-top-color: #222;
+        border-radius: 50%;
+        animation: spinner 1s linear infinite;
+      }
+      #root > .spinner {
+        margin-top: calc(50% - 18px);
+      }
+    </style>
+  </head>
+  <body>
+    <!--placeholder1-->
+    <div id="root">
+      <div class="spinner"></div>
+    </div>
+    <!--/placeholder1-->
+    <script src="/main.tsx" defer type="module"></script>
+    <!--placeholder2-->
+    <!--/placeholder2-->
+  </body>
+</html>

package/template/02_async/src/main.tsx

@@ -0,0 +1,24 @@
+import { StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { Root, Slot } from "waku/client";
+
+const rootElement = (
+  <StrictMode>
+    <Root>
+      <Slot id="App" />
+    </Root>
+  </StrictMode>
+);
+
+hydrateRoot(document.getElementById("root")!, rootElement, {
+  onRecoverableError(err) {
+    if (
+      err instanceof Error &&
+      err.message.startsWith("Client-only component")
+    ) {
+      // ignore
+      return;
+    }
+    console.error(err);
+  },
+});

package/template/02_async/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}

package/template/02_async/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "waku/config";
+
+const getFallback = (id: string) => {
+  if (id.endsWith("#Counter")) {
+    return "waku/server#ClientOnly";
+  }
+  return "waku/server#ClientFallback";
+};
+
+export default defineConfig({
+  framework: {
+    ssr: {
+      getFallback,
+    },
+  },
+});

package/template/03_promise/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsc" "$@"
+fi

package/template/03_promise/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/typescript@5.2.2/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.2.2/node_modules/typescript/bin/tsserver" "$@"
+fi

package/template/03_promise/node_modules/.bin/waku

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/waku/waku/packages/waku/dist/node_modules:/home/runner/work/waku/waku/packages/waku/node_modules:/home/runner/work/waku/waku/packages/node_modules:/home/runner/work/waku/waku/node_modules:/home/runner/work/waku/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/packages/waku/dist/node_modules:/home/runner/work/waku/waku/packages/waku/node_modules:/home/runner/work/waku/waku/packages/node_modules:/home/runner/work/waku/waku/node_modules:/home/runner/work/waku/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../packages/waku/dist/cli.js" "$@"
+else
+  exec node  "$basedir/../../../../packages/waku/dist/cli.js" "$@"
+fi

package/template/03_promise/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "waku-example",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev --with-ssr",
+    "build": "waku build",
+    "start": "waku start --with-ssr"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "react": "18.3.0-canary-7118f5dd7-20230705",
+    "react-dom": "18.3.0-canary-7118f5dd7-20230705",
+    "react-server-dom-webpack": "18.3.0-canary-7118f5dd7-20230705",
+    "waku": "0.15.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "typescript": "^5.2.2"
+  }
+}

package/template/03_promise/src/components/App.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { Counter } from "./Counter.js";
+
+const App = ({ name, children }: { name: string; children: ReactNode }) => {
+  const delayedMessage = new Promise<string>((resolve) => {
+    setTimeout(() => resolve("Hello from server!"), 2000);
+  });
+  return (
+    <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
+      <h1>Hello {name}!!</h1>
+      <h3>This is a server component.</h3>
+      <Counter delayedMessage={delayedMessage} />
+      {children}
+    </div>
+  );
+};
+
+export default App;

package/template/03_promise/src/components/Counter.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Suspense, useState } from "react";
+
+export const Counter = ({
+  delayedMessage,
+}: {
+  delayedMessage: Promise<string>;
+}) => {
+  const [count, setCount] = useState(0);
+  return (
+    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+      <h3>This is a client component.</h3>
+      <Suspense fallback="Pending...">
+        <Message count={count} delayedMessage={delayedMessage} />
+      </Suspense>
+    </div>
+  );
+};
+
+const Message = ({
+  count,
+  delayedMessage,
+}: {
+  count: number;
+  delayedMessage: Promise<string>;
+}) => (
+  <ul>
+    <li>count: {count}</li>
+    <li>delayedMessage: {delayedMessage as any}</li>
+  </ul>
+);