create-waku 0.6.0 → 0.6.2

package/template/02_async/dist/{src/components → 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/02_async/dist/entries.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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' }),
+    };
+}, 
+// getBuildConfig
+async () => {
+    return {
+        '/': {
+            entries: [['']],
+        },
+    };
+}, 
+// getSsrConfig
+async (pathStr) => {
+    switch (pathStr) {
+        case '/':
+            return {
+                input: '',
+                unstable_render: () => _jsx(Slot, { id: "App" }),
+            };
+        default:
+            return null;
+    }
+});

package/template/02_async/dist/main.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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" }) }) }));
+if (globalThis.__WAKU_SSR_ENABLED__) {
+    hydrateRoot(document.getElementById('root'), rootElement);
+}
+else {
+    createRoot(document.getElementById('root')).render(rootElement);
+}

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

@@ -1,37 +1,25 @@
 /// Async Server Component
 /// <reference types="react/experimental" />
-import { Suspense } from "react";
+import { Suspense } from 'react';
 
-import { Counter } from "./Counter.js";
+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>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
       <Suspense fallback="Pending...">
         <ServerMessage />
       </Suspense>
-      <Suspense fallback={<CounterSkeleton />}>
-        <Counter />
-      </Suspense>
+      <Counter />
     </div>
   );
 };
 
 const ServerMessage = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 1000));
+  await new Promise((resolve) => setTimeout(resolve, 2000));
   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

@@ -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/02_async/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/02_async/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 {
@@ -29,7 +30,7 @@
       <div class="spinner"></div>
     </div>
     <!--/placeholder1-->
-    <script src="/main.tsx" defer type="module"></script>
+    <script src="/main.tsx" async type="module"></script>
     <!--placeholder2-->
     <!--/placeholder2-->
   </body>

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

@@ -1,6 +1,6 @@
-import { StrictMode } from "react";
-import { hydrateRoot } 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,15 +10,8 @@ const rootElement = (
   </StrictMode>
 );
 
-hydrateRoot(document.getElementById("root")!, rootElement, {
-  onRecoverableError(err) {
-    if (
-      err instanceof Error &&
-      err.message.startsWith("Client-only component")
-    ) {
-      // ignore
-      return;
-    }
-    console.error(err);
-  },
-});
+if ((globalThis as any).__WAKU_SSR_ENABLED__) {
+  hydrateRoot(document.getElementById('root')!, rootElement);
+} else {
+  createRoot(document.getElementById('root')!).render(rootElement);
+}

package/template/02_async/tsconfig.json

@@ -9,14 +9,7 @@
     "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
     "jsx": "react-jsx",
-    "outDir": "./dist",
-    "tsBuildInfoFile": "./dist/.tsbuildinfo",
-    "composite": true
-  },
-  "include": ["./src"],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+    "rootDir": "./src",
+    "outDir": "./dist"
+  }
 }

package/template/03_promise/dist/components/App.js

@@ -1,9 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Counter } from "./Counter.js";
+import { Counter } from './Counter.js';
 const App = ({ name, children }) => {
     const delayedMessage = new Promise((resolve) => {
-        setTimeout(() => resolve("Hello from server!"), 2000);
+        setTimeout(() => resolve('Hello from server!'), 2000);
     });
-    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, { delayedMessage: delayedMessage }), children] }));
+    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, { delayedMessage: delayedMessage }), children] }));
 };
 export default App;

package/template/03_promise/dist/components/Counter.js

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Suspense, useState } from "react";
+import { Suspense, useState } from 'react';
 export const Counter = ({ delayedMessage, }) => {
     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." }), _jsx(Suspense, { fallback: "Pending...", children: _jsx(Message, { count: count, delayedMessage: delayedMessage }) })] }));
+    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." }), _jsx(Suspense, { fallback: "Pending...", children: _jsx(Message, { count: count, delayedMessage: delayedMessage }) })] }));
 };
 const Message = ({ count, delayedMessage, }) => (_jsxs("ul", { children: [_jsxs("li", { children: ["count: ", count] }), _jsxs("li", { children: ["delayedMessage: ", delayedMessage] })] }));

package/template/03_promise/dist/entries.js

@@ -1,32 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { lazy } from "react";
-import { defineEntries } from "waku/server";
-import { Children } from "waku/client";
-const App = lazy(() => import("./components/App.js"));
+import { lazy } from 'react';
+import { defineEntries } from 'waku/server';
+import { Children, Slot } from 'waku/client';
+const App = lazy(() => import('./components/App.js'));
 export default defineEntries(
 // renderEntries
 async (input) => {
     return {
-        App: (_jsx(App, { name: input || "Waku", children: _jsx(Children, {}) })),
+        App: (_jsx(App, { name: input || 'Waku', children: _jsx(Children, {}) })),
     };
 }, 
 // 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", children: _jsx("h3", { children: "A client element" }) })),
+            };
+        default:
+            return null;
+    }
+});

package/template/03_promise/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", children: _jsx("h3", { children: "A client element" }) }) }) }));
-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/03_promise/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/03_promise/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/03_promise/src/components/App.tsx

@@ -1,12 +1,13 @@
-import type { ReactNode } from "react";
-import { Counter } from "./Counter.js";
+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);
+    setTimeout(() => resolve('Hello from server!'), 2000);
   });
   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 delayedMessage={delayedMessage} />

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

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { Suspense, useState } from "react";
+import { Suspense, useState } from 'react';
 
 export const Counter = ({
   delayedMessage,
@@ -9,7 +9,7 @@ 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/03_promise/src/entries.tsx

@@ -1,16 +1,15 @@
-import { lazy } from "react";
+import { lazy } from 'react';
+import { defineEntries } from 'waku/server';
+import { Children, Slot } from 'waku/client';
 
-import { defineEntries } from "waku/server";
-import { Children } from "waku/client";
-
-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 name={input || 'Waku'}>
           <Children />
         </App>
       ),
@@ -19,21 +18,25 @@ export default defineEntries(
   // 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">
+              <h3>A client element</h3>
+            </Slot>
+          ),
+        };
+      default:
+        return null;
+    }
+  },
 );

package/template/03_promise/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/03_promise/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>
@@ -12,4 +12,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/03_promise/tsconfig.json

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

package/template/04_callserver/dist/components/App.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Counter } from "./Counter.js";
-import { greet } from "./funcs.js";
+import { Counter } from './Counter.js';
+import { greet } 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." }), _jsx(Counter, { greet: greet })] }));
+    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, { greet: greet })] }));
 };
 export default App;

package/template/04_callserver/dist/components/Counter.js

@@ -1,14 +1,15 @@
-"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';
+import { TextBox } from './TextBox.js';
 export const Counter = ({ greet, }) => {
     const [count, setCount] = useState(0);
-    const [text, setText] = useState("");
+    const [text, setText] = useState('');
     const [isPending, startTransition] = useTransition();
     const handleClick = () => {
         startTransition(() => {
-            setText(greet("c=" + count));
+            setText(greet('c=' + count));
         });
     };
-    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: [_jsxs("button", { onClick: handleClick, children: ["greet(\"c=\" + count) = ", text] }), " ", 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: [_jsxs("button", { onClick: handleClick, children: ["greet(\"c=\" + count) = ", text] }), ' ', isPending ? 'Pending...' : ''] }), _jsx("h3", { children: "This is a client component." }), _jsx(TextBox, {})] }));
 };

package/template/04_callserver/dist/components/TextBox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export const TextBox = () => {
+    const [text, setText] = useState('hello');
+    return (_jsxs("div", { children: [_jsx("input", { value: text, onChange: (e) => setText(e.target.value) }), _jsx("span", { children: text.toUpperCase() })] }));
+};

package/template/04_callserver/dist/components/funcs.js

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