create-waku 0.6.0 → 0.6.2

package/dist/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
-import fs from "node:fs";
-import path from "node:path";
-import { default as prompts } from "prompts";
-import { red, green, bold } from "kolorist";
-import fse from "fs-extra/esm";
-import { fileURLToPath } from "node:url";
+import fs from 'node:fs';
+import path from 'node:path';
+import { default as prompts } from 'prompts';
+import { red, green, bold } from 'kolorist';
+import fse from 'fs-extra/esm';
+import { fileURLToPath } from 'node:url';
 function isValidPackageName(projectName) {
     return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName);
 }
@@ -12,63 +12,63 @@ function toValidPackageName(projectName) {
     return projectName
         .trim()
         .toLowerCase()
-        .replace(/\s+/g, "-")
-        .replace(/^[._]/, "")
-        .replace(/[^a-z0-9-~]+/g, "-");
+        .replace(/\s+/g, '-')
+        .replace(/^[._]/, '')
+        .replace(/[^a-z0-9-~]+/g, '-');
 }
 // if the dir is empty or not exist
 function canSafelyOverwrite(dir) {
     return !fs.existsSync(dir) || fs.readdirSync(dir).length === 0;
 }
 async function init() {
-    let targetDir = "";
-    const defaultProjectName = "waku-project";
-    const templateRoot = fileURLToPath(new URL("../template", import.meta.url));
+    let targetDir = '';
+    const defaultProjectName = 'waku-project';
+    const templateRoot = fileURLToPath(new URL('../template', import.meta.url));
     const CHOICES = fs.readdirSync(templateRoot);
     let result;
     try {
         result = await prompts([
             {
-                name: "projectName",
-                type: "text",
-                message: "Project Name",
+                name: 'projectName',
+                type: 'text',
+                message: 'Project Name',
                 initial: defaultProjectName,
                 onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName),
             },
             {
-                name: "shouldOverwrite",
-                type: () => (canSafelyOverwrite(targetDir) ? null : "confirm"),
+                name: 'shouldOverwrite',
+                type: () => (canSafelyOverwrite(targetDir) ? null : 'confirm'),
                 message: `${targetDir} is not empty. Remove existing files and continue?`,
             },
             {
-                name: "overwriteChecker",
+                name: 'overwriteChecker',
                 type: (values) => {
                     if (values === false) {
-                        throw new Error(red("✖") + " Operation cancelled");
+                        throw new Error(red('✖') + ' Operation cancelled');
                     }
                     return null;
                 },
             },
             {
-                name: "packageName",
-                type: () => (isValidPackageName(targetDir) ? null : "text"),
-                message: "Package name",
+                name: 'packageName',
+                type: () => (isValidPackageName(targetDir) ? null : 'text'),
+                message: 'Package name',
                 initial: () => toValidPackageName(targetDir),
-                validate: (dir) => isValidPackageName(dir) || "Invalid package.json name",
+                validate: (dir) => isValidPackageName(dir) || 'Invalid package.json name',
             },
             {
-                name: "chooseProject",
-                type: "select",
-                message: "Choose a starter template",
+                name: 'chooseProject',
+                type: 'select',
+                message: 'Choose a starter template',
                 choices: [
-                    { title: "basic-template", value: CHOICES[0] },
-                    { title: "async-template", value: CHOICES[1] },
-                    { title: "promise-template", value: CHOICES[2] },
+                    { title: 'basic-template', value: CHOICES[0] },
+                    { title: 'async-template', value: CHOICES[1] },
+                    { title: 'promise-template', value: CHOICES[2] },
                 ],
             },
         ], {
             onCancel: () => {
-                throw new Error(red("✖") + " Operation cancelled");
+                throw new Error(red('✖') + ' Operation cancelled');
             },
         });
     }
@@ -88,36 +88,36 @@ async function init() {
     }
     const pkg = {
         name: packageName ?? toValidPackageName(targetDir),
-        version: "0.0.0",
+        version: '0.0.0',
     };
-    console.log("Setting up project...");
+    console.log('Setting up project...');
     const templateDir = path.join(templateRoot, chooseProject);
     // Read existing package.json from the root directory
-    const packageJsonPath = path.join(root, "package.json");
+    const packageJsonPath = path.join(root, 'package.json');
     // Read new package.json from the template directory
-    const newPackageJsonPath = path.join(templateDir, "package.json");
-    const newPackageJson = JSON.parse(fs.readFileSync(newPackageJsonPath, "utf-8"));
+    const newPackageJsonPath = path.join(templateDir, 'package.json');
+    const newPackageJson = JSON.parse(fs.readFileSync(newPackageJsonPath, 'utf-8'));
     fse.copySync(templateDir, root);
     fs.writeFileSync(packageJsonPath, JSON.stringify({
         ...newPackageJson,
         ...pkg,
     }, null, 2));
-    const manager = process.env.npm_config_user_agent ?? "";
+    const manager = process.env.npm_config_user_agent ?? '';
     const packageManager = /pnpm/.test(manager)
-        ? "pnpm"
+        ? 'pnpm'
         : /yarn/.test(manager)
-            ? "yarn"
-            : "npm";
+            ? 'yarn'
+            : 'npm';
     const commandsMap = {
         install: {
-            pnpm: "pnpm install",
-            yarn: "yarn",
-            npm: "npm install",
+            pnpm: 'pnpm install',
+            yarn: 'yarn',
+            npm: 'npm install',
         },
         dev: {
-            pnpm: "pnpm dev",
-            yarn: "yarn dev",
-            npm: "npm run dev",
+            pnpm: 'pnpm dev',
+            yarn: 'yarn dev',
+            npm: 'npm run dev',
         },
     };
     console.log(`\nDone. Now run:\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-waku",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "author": "Daishi Kato",
   "type": "module",
   "contributors": [
@@ -22,12 +22,12 @@
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@types/fs-extra": "^11.0.2",
-    "@types/prompts": "^2.4.5"
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.8"
   },
   "scripts": {
     "start": "node dist/cli.js",
-    "compile": "rm -rf template dist && pnpm run template && pnpm run build",
+    "compile": "rm -rf template dist *.tsbuildinfo && pnpm run template && pnpm run build",
     "template": "cp -r ../../examples template/",
     "build": "tsc -b"
   }

package/src/cli.ts

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 
-import fs from "node:fs";
-import path from "node:path";
-import { default as prompts } from "prompts";
-import { red, green, bold } from "kolorist";
-import fse from "fs-extra/esm";
-import { fileURLToPath } from "node:url";
+import fs from 'node:fs';
+import path from 'node:path';
+import { default as prompts } from 'prompts';
+import { red, green, bold } from 'kolorist';
+import fse from 'fs-extra/esm';
+import { fileURLToPath } from 'node:url';
 
 function isValidPackageName(projectName: string) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
@@ -17,9 +17,9 @@ function toValidPackageName(projectName: string) {
   return projectName
     .trim()
     .toLowerCase()
-    .replace(/\s+/g, "-")
-    .replace(/^[._]/, "")
-    .replace(/[^a-z0-9-~]+/g, "-");
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z0-9-~]+/g, '-');
 }
 
 // if the dir is empty or not exist
@@ -28,10 +28,10 @@ function canSafelyOverwrite(dir: string) {
 }
 
 async function init() {
-  let targetDir = "";
-  const defaultProjectName = "waku-project";
+  let targetDir = '';
+  const defaultProjectName = 'waku-project';
 
-  const templateRoot = fileURLToPath(new URL("../template", import.meta.url));
+  const templateRoot = fileURLToPath(new URL('../template', import.meta.url));
   const CHOICES = fs.readdirSync(templateRoot);
   let result: {
     packageName: string;
@@ -43,49 +43,49 @@ async function init() {
     result = await prompts(
       [
         {
-          name: "projectName",
-          type: "text",
-          message: "Project Name",
+          name: 'projectName',
+          type: 'text',
+          message: 'Project Name',
           initial: defaultProjectName,
           onState: (state: any) =>
             (targetDir = String(state.value).trim() || defaultProjectName),
         },
         {
-          name: "shouldOverwrite",
-          type: () => (canSafelyOverwrite(targetDir) ? null : "confirm"),
+          name: 'shouldOverwrite',
+          type: () => (canSafelyOverwrite(targetDir) ? null : 'confirm'),
           message: `${targetDir} is not empty. Remove existing files and continue?`,
         },
         {
-          name: "overwriteChecker",
+          name: 'overwriteChecker',
           type: (values: any) => {
             if (values === false) {
-              throw new Error(red("✖") + " Operation cancelled");
+              throw new Error(red('✖') + ' Operation cancelled');
             }
             return null;
           },
         },
         {
-          name: "packageName",
-          type: () => (isValidPackageName(targetDir) ? null : "text"),
-          message: "Package name",
+          name: 'packageName',
+          type: () => (isValidPackageName(targetDir) ? null : 'text'),
+          message: 'Package name',
           initial: () => toValidPackageName(targetDir),
           validate: (dir: string) =>
-            isValidPackageName(dir) || "Invalid package.json name",
+            isValidPackageName(dir) || 'Invalid package.json name',
         },
         {
-          name: "chooseProject",
-          type: "select",
-          message: "Choose a starter template",
+          name: 'chooseProject',
+          type: 'select',
+          message: 'Choose a starter template',
           choices: [
-            { title: "basic-template", value: CHOICES[0] },
-            { title: "async-template", value: CHOICES[1] },
-            { title: "promise-template", value: CHOICES[2] },
+            { title: 'basic-template', value: CHOICES[0] },
+            { title: 'async-template', value: CHOICES[1] },
+            { title: 'promise-template', value: CHOICES[2] },
           ],
         },
       ],
       {
         onCancel: () => {
-          throw new Error(red("✖") + " Operation cancelled");
+          throw new Error(red('✖') + ' Operation cancelled');
         },
       },
     );
@@ -108,20 +108,20 @@ async function init() {
 
   const pkg = {
     name: packageName ?? toValidPackageName(targetDir),
-    version: "0.0.0",
+    version: '0.0.0',
   };
 
-  console.log("Setting up project...");
+  console.log('Setting up project...');
 
   const templateDir = path.join(templateRoot, chooseProject);
 
   // Read existing package.json from the root directory
-  const packageJsonPath = path.join(root, "package.json");
+  const packageJsonPath = path.join(root, 'package.json');
 
   // Read new package.json from the template directory
-  const newPackageJsonPath = path.join(templateDir, "package.json");
+  const newPackageJsonPath = path.join(templateDir, 'package.json');
   const newPackageJson = JSON.parse(
-    fs.readFileSync(newPackageJsonPath, "utf-8"),
+    fs.readFileSync(newPackageJsonPath, 'utf-8'),
   );
 
   fse.copySync(templateDir, root);
@@ -138,23 +138,23 @@ async function init() {
     ),
   );
 
-  const manager = process.env.npm_config_user_agent ?? "";
+  const manager = process.env.npm_config_user_agent ?? '';
   const packageManager = /pnpm/.test(manager)
-    ? "pnpm"
+    ? 'pnpm'
     : /yarn/.test(manager)
-    ? "yarn"
-    : "npm";
+    ? 'yarn'
+    : 'npm';
 
   const commandsMap = {
     install: {
-      pnpm: "pnpm install",
-      yarn: "yarn",
-      npm: "npm install",
+      pnpm: 'pnpm install',
+      yarn: 'yarn',
+      npm: 'npm install',
     },
     dev: {
-      pnpm: "pnpm dev",
-      yarn: "yarn dev",
-      npm: "npm run dev",
+      pnpm: 'pnpm dev',
+      yarn: 'yarn dev',
+      npm: 'npm run dev',
     },
   };
 

package/template/01_counter/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, {})] }));
+    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, {})] }));
 };
 export default App;

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

@@ -1,8 +1,8 @@
-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>
       <Counter />

package/template/01_counter/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/01_counter/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/01_counter/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/01_counter/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/01_counter/tsconfig.json

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

package/template/02_async/dist/components/App.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/// Async Server Component
+/// <reference types="react/experimental" />
+import { Suspense } from 'react';
+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(Suspense, { fallback: "Pending...", children: _jsx(ServerMessage, {}) }), _jsx(Counter, {})] }));
+};
+const ServerMessage = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    return _jsx("p", { children: "Hello from server!" });
+};
+export default App;