create-waku 0.6.0 → 0.6.2

package/template/08_cookies/node_modules/.bin/vite

@@ -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/vite@4.5.0_@types+node@20.9.0/node_modules/vite/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

package/template/08_cookies/package.json

@@ -4,21 +4,24 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "node dev.js",
-    "build": "waku build",
-    "start": "node start.js"
+    "dev": "node dev.js --with-ssr",
+    "build": "waku build --with-ssr",
+    "start": "node start.js --with-ssr"
   },
   "dependencies": {
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
-    "react": "18.3.0-canary-a41957507-20231017",
-    "react-dom": "18.3.0-canary-a41957507-20231017",
-    "react-server-dom-webpack": "18.3.0-canary-a41957507-20231017",
-    "waku": "0.16.0"
+    "react": "18.3.0-canary-0e352ea01-20231109",
+    "react-dom": "18.3.0-canary-0e352ea01-20231109",
+    "react-server-dom-webpack": "18.3.0-canary-0e352ea01-20231109",
+    "waku": "0.17.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "typescript": "^5.2.2"
+    "@swc/core": "1.3.96",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "4.1.1",
+    "typescript": "^5.2.2",
+    "vite": "4.5.0"
   }
 }

package/template/08_cookies/src/components/App.tsx

@@ -1,10 +1,10 @@
-import { getContext } from "waku/server";
-import { Counter } from "./Counter.js";
+import { getContext } from 'waku/server';
+import { Counter } from './Counter.js';
 
 const App = ({ name }: { name: string }) => {
   const ctx = getContext<{ count: number }>();
   return (
-    <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
+    <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
       <h1>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
       <p>Cookie count: {ctx.count}</p>

package/template/08_cookies/src/components/Counter.tsx

@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 
 export const Counter = () => {
   const [count, setCount] = useState(0);
   return (
-    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+    <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>

package/template/08_cookies/src/entries.tsx

@@ -1,8 +1,8 @@
-import { lazy } from "react";
+import { lazy } from 'react';
+import { defineEntries, getContext } from 'waku/server';
+import { Slot } from 'waku/client';
 
-import { defineEntries, getContext } from "waku/server";
-
-const App = lazy(() => import("./components/App.js"));
+const App = lazy(() => import('./components/App.js'));
 
 export default defineEntries(
   // renderEntries
@@ -10,29 +10,28 @@ export default defineEntries(
     const ctx = getContext<{ count: number }>();
     ++ctx.count;
     return {
-      App: <App name={input || "Waku"} />,
+      App: <App name={input || 'Waku'} />,
     };
   },
   // getBuildConfig
   async () => {
     return {
-      "/": {
-        entries: [[""]],
+      '/': {
+        entries: [['']],
         context: { count: 0 },
       },
     };
   },
   // getSsrConfig
-  // Passing cookies through SSR server isn't supported (yet).
-  // () => ({
-  //   getInput: async (pathStr) => {
-  //     switch (pathStr) {
-  //       case "/":
-  //         return "";
-  //       default:
-  //         return null;
-  //     }
-  //   },
-  //   filter: (elements) => elements.App,
-  // }),
+  async (pathStr) => {
+    switch (pathStr) {
+      case '/':
+        return {
+          input: '',
+          unstable_render: () => <Slot id="App" />,
+        };
+      default:
+        return null;
+    }
+  },
 );

package/template/08_cookies/src/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Waku example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       @keyframes spinner {
         to {

package/template/08_cookies/src/main.tsx

@@ -1,6 +1,6 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { Root, Slot } from "waku/client";
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Root, Slot } from 'waku/client';
 
 const rootElement = (
   <StrictMode>
@@ -10,4 +10,8 @@ const rootElement = (
   </StrictMode>
 );
 
-createRoot(document.getElementById("root")!).render(rootElement);
+if ((globalThis as any).__WAKU_SSR_ENABLED__) {
+  hydrateRoot(document.getElementById('root')!, rootElement);
+} else {
+  createRoot(document.getElementById('root')!).render(rootElement);
+}

package/template/08_cookies/start.js

@@ -1,36 +1,34 @@
-import url from "node:url";
-import path from "node:path";
-import express from "express";
-import cookieParser from "cookie-parser";
-import {
-  rsc,
-  // ssr,
-} from "waku";
+import url from 'node:url';
+import path from 'node:path';
+import express from 'express';
+import cookieParser from 'cookie-parser';
+import { rsc } from 'waku';
+
+const withSsr = process.argv[2] === '--with-ssr';
 
 const root = path.join(
   path.dirname(url.fileURLToPath(import.meta.url)),
-  "dist",
+  'dist',
 );
 
 const app = express();
 app.use(cookieParser());
 app.use(
   rsc({
-    command: "start",
+    command: 'start',
     unstable_prehook: (req) => {
       return { count: Number(req.cookies.count) || 0 };
     },
     unstable_posthook: (req, res, ctx) => {
-      res.cookie("count", String(ctx.count));
+      res.cookie('count', String(ctx.count));
     },
+    ssr: withSsr,
   }),
 );
-// Passing cookies through SSR server isn't supported (yet).
-// app.use(ssr({ command: "start" }));
-app.use(express.static(path.join(root, "public")));
-express.static.mime.default_type = "";
+app.use(express.static(path.join(root, 'public')));
+express.static.mime.default_type = '';
 
 const port = process.env.PORT || 8080;
 app.listen(port, () => {
-  console.info("Listening on", port);
+  console.info('Listening on', port);
 });

package/template/08_cookies/tsconfig.json

@@ -9,7 +9,7 @@
     "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
     "jsx": "react-jsx",
-    "outDir": "./dist",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "outDir": "./dist"
   }
 }

package/template/09_cssmodules/dist/components/App.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // @ts-expect-error no types
-import styles from "./App.module.css";
-import { Counter } from "./Counter.js";
+import styles from './App.module.css';
+import { Counter } from './Counter.js';
 const App = ({ name }) => {
-    return (_jsxs("div", { style: { border: "3px red dashed", margin: "1em", padding: "1em" }, children: [_jsxs("h1", { className: styles.title, children: ["Hello ", name, "!!"] }), _jsx("h3", { children: "This is a server component." }), _jsx(Counter, {})] }));
+    return (_jsxs("div", { style: { border: '3px red dashed', margin: '1em', padding: '1em' }, children: [_jsxs("h1", { className: styles.title, children: ["Hello ", name, "!!"] }), _jsx("h3", { children: "This is a server component." }), _jsx(Counter, {})] }));
 };
 export default App;

package/template/09_cssmodules/dist/components/Counter.js

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

package/template/09_cssmodules/dist/entries.js

@@ -1,31 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { lazy } from "react";
-import { defineEntries } from "waku/server";
-const App = lazy(() => import("./components/App.js"));
+import { lazy } from 'react';
+import { defineEntries } from 'waku/server';
+import { Slot } from 'waku/client';
+const App = lazy(() => import('./components/App.js'));
 export default defineEntries(
 // renderEntries
 async (input) => {
     return {
-        App: _jsx(App, { name: input || "Waku" }),
+        App: _jsx(App, { name: input || 'Waku' }),
     };
 }, 
 // getBuildConfig
 async () => {
     return {
-        "/": {
-            entries: [[""]],
+        '/': {
+            entries: [['']],
         },
     };
 }, 
 // getSsrConfig
-() => ({
-    getInput: async (pathStr) => {
-        switch (pathStr) {
-            case "/":
-                return "";
-            default:
-                return null;
-        }
-    },
-    filter: (elements) => elements.App,
-}));
+async (pathStr) => {
+    switch (pathStr) {
+        case '/':
+            return {
+                input: '',
+                unstable_render: () => _jsx(Slot, { id: "App" }),
+            };
+        default:
+            return null;
+    }
+});

package/template/09_cssmodules/dist/main.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { Root, Slot } from "waku/client";
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Root, Slot } from 'waku/client';
 const rootElement = (_jsx(StrictMode, { children: _jsx(Root, { children: _jsx(Slot, { id: "App" }) }) }));
-createRoot(document.getElementById("root")).render(rootElement);
+if (globalThis.__WAKU_SSR_ENABLED__) {
+    hydrateRoot(document.getElementById('root'), rootElement);
+}
+else {
+    createRoot(document.getElementById('root')).render(rootElement);
+}

package/template/09_cssmodules/node_modules/.bin/vite

@@ -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/vite@4.5.0_@types+node@20.9.0/node_modules/vite/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/bin/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules:/home/runner/work/waku/waku/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

package/template/09_cssmodules/package.json

@@ -5,19 +5,22 @@
   "private": true,
   "scripts": {
     "dev": "waku dev --with-ssr",
-    "build": "waku build",
+    "build": "waku build --with-ssr",
     "start": "waku start --with-ssr"
   },
   "dependencies": {
     "express": "^4.18.2",
-    "react": "18.3.0-canary-a41957507-20231017",
-    "react-dom": "18.3.0-canary-a41957507-20231017",
-    "react-server-dom-webpack": "18.3.0-canary-a41957507-20231017",
-    "waku": "0.16.0"
+    "react": "18.3.0-canary-0e352ea01-20231109",
+    "react-dom": "18.3.0-canary-0e352ea01-20231109",
+    "react-server-dom-webpack": "18.3.0-canary-0e352ea01-20231109",
+    "waku": "0.17.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "typescript": "^5.2.2"
+    "@swc/core": "1.3.96",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "4.1.1",
+    "typescript": "^5.2.2",
+    "vite": "4.5.0"
   }
 }

package/template/09_cssmodules/src/components/App.tsx

@@ -1,10 +1,10 @@
 // @ts-expect-error no types
-import styles from "./App.module.css";
-import { Counter } from "./Counter.js";
+import styles from './App.module.css';
+import { Counter } from './Counter.js';
 
 const App = ({ name }: { name: string }) => {
   return (
-    <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
+    <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
       <h1 className={styles.title}>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
       <Counter />

package/template/09_cssmodules/src/components/Counter.tsx

@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 
 export const Counter = () => {
   const [count, setCount] = useState(0);
   return (
-    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+    <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>

package/template/09_cssmodules/src/entries.tsx

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

package/template/09_cssmodules/src/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Waku example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       @keyframes spinner {
         to {

package/template/09_cssmodules/src/main.tsx

@@ -1,6 +1,6 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { Root, Slot } from "waku/client";
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Root, Slot } from 'waku/client';
 
 const rootElement = (
   <StrictMode>
@@ -10,4 +10,8 @@ const rootElement = (
   </StrictMode>
 );
 
-createRoot(document.getElementById("root")!).render(rootElement);
+if ((globalThis as any).__WAKU_SSR_ENABLED__) {
+  hydrateRoot(document.getElementById('root')!, rootElement);
+} else {
+  createRoot(document.getElementById('root')!).render(rootElement);
+}

package/template/09_cssmodules/tsconfig.json

@@ -9,7 +9,7 @@
     "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
     "jsx": "react-jsx",
-    "outDir": "./dist",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "outDir": "./dist"
   }
 }