create-waku 0.6.0 → 0.6.2

package/template/04_callserver/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/04_callserver/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/04_callserver/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/04_callserver/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/04_callserver/src/components/App.tsx

@@ -1,5 +1,5 @@
-import { Counter } from "./Counter.js";
-import { greet } from "./funcs.js";
+import { Counter } from './Counter.js';
+import { greet } from './funcs.js';
 
 type ServerFunction<T> = T extends (...args: infer A) => infer R
   ? (...args: A) => Promise<R>
@@ -7,7 +7,7 @@ type ServerFunction<T> = T extends (...args: infer A) => infer R
 
 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>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
       <Counter greet={greet as unknown as ServerFunction<typeof greet>} />

package/template/04_callserver/src/components/Counter.tsx

@@ -1,6 +1,8 @@
-"use client";
+'use client';
 
-import { useState, useTransition } from "react";
+import { useState, useTransition } from 'react';
+
+import { TextBox } from './TextBox.js';
 
 export const Counter = ({
   greet,
@@ -8,24 +10,25 @@ export const Counter = ({
   greet: (name: string) => Promise<string>;
 }) => {
   const [count, setCount] = useState(0);
-  const [text, setText] = useState<string | Promise<string>>("");
+  const [text, setText] = useState<string | Promise<string>>('');
   const [isPending, startTransition] = useTransition();
   const handleClick = () => {
     startTransition(() => {
-      setText(greet("c=" + count));
+      setText(greet('c=' + count));
     });
   };
   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>
       <p>
         <button onClick={handleClick}>
           greet(&quot;c=&quot; + count) = {text as string}
-        </button>{" "}
-        {isPending ? "Pending..." : ""}
+        </button>{' '}
+        {isPending ? 'Pending...' : ''}
       </p>
       <h3>This is a client component.</h3>
+      <TextBox />
     </div>
   );
 };

package/template/04_callserver/src/components/TextBox.tsx

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export const TextBox = () => {
+  const [text, setText] = useState('hello');
+  return (
+    <div>
+      <input value={text} onChange={(e) => setText(e.target.value)} />
+      <span>{text.toUpperCase()}</span>
+    </div>
+  );
+};

package/template/04_callserver/src/components/funcs.ts

@@ -1,3 +1,3 @@
-"use server";
+'use server';
 
 export const greet = (name: string) => `Hello ${name} from server!`;

package/template/04_callserver/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/04_callserver/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/04_callserver/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/04_callserver/tsconfig.json

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

package/template/05_mutation/dist/components/App.js

@@ -1,7 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Counter } from "./Counter.js";
-import { getCounter, increment } from "./funcs.js";
+import { Balancer } from 'react-wrap-balancer';
+import { Counter } from './Counter.js';
+import { getCounter, increment } from './funcs.js';
 const App = ({ name }) => {
-    return (_jsxs("div", { style: { border: "3px red dashed", margin: "1em", padding: "1em" }, children: [_jsxs("h1", { children: ["Hello ", name, "!!"] }), _jsx("h3", { children: "This is a server component." }), _jsxs("p", { children: ["Server counter: ", getCounter()] }), _jsx(Counter, { increment: increment })] }));
+    return (_jsxs("div", { style: { border: '3px red dashed', margin: '1em', padding: '1em' }, children: [_jsxs("h1", { children: ["Hello ", name, "!!"] }), _jsx("h3", { children: "This is a server component." }), _jsxs("p", { children: ["Server counter: ", getCounter()] }), _jsx(Counter, { increment: increment }), _jsx(Balancer, { children: "My Awesome Title" })] }));
 };
 export default App;

package/template/05_mutation/dist/components/Counter.js

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState, useTransition } from "react";
+import { useState, useTransition } from 'react';
 export const Counter = ({ increment }) => {
     const [count, setCount] = useState(0);
     const [isPending, startTransition] = useTransition();
@@ -9,5 +9,5 @@ export const Counter = ({ increment }) => {
             increment();
         });
     };
-    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" }), _jsxs("p", { children: [_jsx("button", { onClick: handleClick, children: "Increment server counter" }), " ", isPending ? "Pending..." : ""] }), _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" }), _jsxs("p", { children: [_jsx("button", { onClick: handleClick, children: "Increment server counter" }), ' ', isPending ? 'Pending...' : ''] }), _jsx("h3", { children: "This is a client component." })] }));
 };

package/template/05_mutation/dist/components/funcs.js

@@ -1,9 +1,9 @@
-"use server";
-import { rerender } from "waku/server";
+'use server';
+import { rerender } from 'waku/server';
 // module state on server
 let counter = 0;
 export const getCounter = () => counter;
 export const increment = () => {
     counter += 1;
-    rerender("Waku");
+    rerender('Waku');
 };

package/template/05_mutation/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/05_mutation/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/05_mutation/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/05_mutation/package.json

@@ -5,19 +5,23 @@
   "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",
+    "react-wrap-balancer": "^1.1.0",
+    "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/05_mutation/src/components/App.tsx

@@ -1,5 +1,7 @@
-import { Counter } from "./Counter.js";
-import { getCounter, increment } from "./funcs.js";
+import { Balancer } from 'react-wrap-balancer';
+
+import { Counter } from './Counter.js';
+import { getCounter, increment } from './funcs.js';
 
 type ServerFunction<T> = T extends (...args: infer A) => infer R
   ? (...args: A) => Promise<R>
@@ -7,13 +9,14 @@ type ServerFunction<T> = T extends (...args: infer A) => infer R
 
 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>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
       <p>Server counter: {getCounter()}</p>
       <Counter
         increment={increment as unknown as ServerFunction<typeof increment>}
       />
+      <Balancer>My Awesome Title</Balancer>
     </div>
   );
 };

package/template/05_mutation/src/components/Counter.tsx

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { useState, useTransition } from "react";
+import { useState, useTransition } from 'react';
 
 export const Counter = ({ increment }: { increment: () => void }) => {
   const [count, setCount] = useState(0);
@@ -11,12 +11,12 @@ export const Counter = ({ increment }: { increment: () => void }) => {
     });
   };
   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>
       <p>
-        <button onClick={handleClick}>Increment server counter</button>{" "}
-        {isPending ? "Pending..." : ""}
+        <button onClick={handleClick}>Increment server counter</button>{' '}
+        {isPending ? 'Pending...' : ''}
       </p>
       <h3>This is a client component.</h3>
     </div>

package/template/05_mutation/src/components/funcs.ts

@@ -1,6 +1,6 @@
-"use server";
+'use server';
 
-import { rerender } from "waku/server";
+import { rerender } from 'waku/server';
 
 // module state on server
 let counter = 0;
@@ -9,5 +9,5 @@ export const getCounter = () => counter;
 
 export const increment = () => {
   counter += 1;
-  rerender("Waku");
+  rerender('Waku');
 };

package/template/05_mutation/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/05_mutation/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/05_mutation/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/05_mutation/tsconfig.json

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

package/template/06_nesting/dist/components/App.js

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