create-waku 0.6.5 → 0.6.6-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Daishi Kato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/dist/cli.js

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
-import fs from 'node:fs';
+import { existsSync, readdirSync } from 'node:fs';
+import fsPromises from 'node:fs/promises';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 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);
 }
@@ -18,13 +19,13 @@ function toValidPackageName(projectName) {
 }
 // if the dir is empty or not exist
 function canSafelyOverwrite(dir) {
-    return !fs.existsSync(dir) || fs.readdirSync(dir).length === 0;
+    return !existsSync(dir) || readdirSync(dir).length === 0;
 }
 async function init() {
     let targetDir = '';
     const defaultProjectName = 'waku-project';
     const templateRoot = fileURLToPath(new URL('../template', import.meta.url));
-    const CHOICES = fs.readdirSync(templateRoot);
+    const CHOICES = await fsPromises.readdir(templateRoot);
     let result;
     try {
         result = await prompts([
@@ -83,8 +84,8 @@ async function init() {
     if (shouldOverwrite) {
         fse.emptyDirSync(root);
     }
-    else if (!fs.existsSync(root)) {
-        fs.mkdirSync(root, { recursive: true });
+    else if (!existsSync(root)) {
+        await fsPromises.mkdir(root, { recursive: true });
     }
     const pkg = {
         name: packageName ?? toValidPackageName(targetDir),
@@ -96,9 +97,9 @@ async function init() {
     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 newPackageJson = JSON.parse(await fsPromises.readFile(newPackageJsonPath, 'utf-8'));
     fse.copySync(templateDir, root);
-    fs.writeFileSync(packageJsonPath, JSON.stringify({
+    await fsPromises.writeFile(packageJsonPath, JSON.stringify({
         ...newPackageJson,
         ...pkg,
     }, null, 2));

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "create-waku",
-  "version": "0.6.5",
+  "version": "0.6.6-alpha.0",
+  "publishConfig": {
+    "tag": "next"
+  },
   "author": "Daishi Kato",
   "type": "module",
   "contributors": [
@@ -18,19 +21,19 @@
     "dist",
     "template"
   ],
-  "scripts": {
-    "start": "node dist/cli.js",
-    "compile": "rm -rf template dist *.tsbuildinfo && pnpm run template && pnpm run build",
-    "template": "cp -r ../../examples template/ && rm -rf template/*/dist && rm -rf template/*/node_modules",
-    "build": "tsc -b"
-  },
   "dependencies": {
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^11.2.0",
     "kolorist": "^1.8.0",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "@types/prompts": "^2.4.8"
+    "@types/prompts": "^2.4.9"
+  },
+  "scripts": {
+    "start": "node dist/cli.js",
+    "compile": "rm -rf template dist *.tsbuildinfo && pnpm run template && pnpm run build",
+    "template": "cp -r ../../examples template/ && rm -rf template/*/dist && rm -rf template/*/node_modules",
+    "build": "tsc -b"
   }
-}
+}

package/src/cli.ts

@@ -1,11 +1,12 @@
 #!/usr/bin/env node
 
-import fs from 'node:fs';
+import { existsSync, readdirSync } from 'node:fs';
+import fsPromises from 'node:fs/promises';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 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(
@@ -24,7 +25,7 @@ function toValidPackageName(projectName: string) {
 
 // if the dir is empty or not exist
 function canSafelyOverwrite(dir: string) {
-  return !fs.existsSync(dir) || fs.readdirSync(dir).length === 0;
+  return !existsSync(dir) || readdirSync(dir).length === 0;
 }
 
 async function init() {
@@ -32,7 +33,7 @@ async function init() {
   const defaultProjectName = 'waku-project';
 
   const templateRoot = fileURLToPath(new URL('../template', import.meta.url));
-  const CHOICES = fs.readdirSync(templateRoot);
+  const CHOICES = await fsPromises.readdir(templateRoot);
   let result: {
     packageName: string;
     shouldOverwrite: string;
@@ -102,8 +103,8 @@ async function init() {
 
   if (shouldOverwrite) {
     fse.emptyDirSync(root);
-  } else if (!fs.existsSync(root)) {
-    fs.mkdirSync(root, { recursive: true });
+  } else if (!existsSync(root)) {
+    await fsPromises.mkdir(root, { recursive: true });
   }
 
   const pkg = {
@@ -121,12 +122,12 @@ async function init() {
   // Read new package.json from the template directory
   const newPackageJsonPath = path.join(templateDir, 'package.json');
   const newPackageJson = JSON.parse(
-    fs.readFileSync(newPackageJsonPath, 'utf-8'),
+    await fsPromises.readFile(newPackageJsonPath, 'utf-8'),
   );
 
   fse.copySync(templateDir, root);
 
-  fs.writeFileSync(
+  await fsPromises.writeFile(
     packageJsonPath,
     JSON.stringify(
       {
@@ -142,8 +143,8 @@ async function init() {
   const packageManager = /pnpm/.test(manager)
     ? 'pnpm'
     : /yarn/.test(manager)
-    ? 'yarn'
-    : 'npm';
+      ? 'yarn'
+      : 'npm';
 
   const commandsMap = {
     install: {

package/template/01_counter/{src/index.html → index.html}

@@ -30,7 +30,7 @@
       <div class="spinner"></div>
     </div>
     <!--/placeholder1-->
-    <script src="/main.tsx" async type="module"></script>
+    <script src="/src/main.tsx" async type="module"></script>
     <!--placeholder2-->
     <!--/placeholder2-->
   </body>

package/template/01_counter/package.json

@@ -4,23 +4,24 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev",
+    "dev": "waku dev --with-ssr",
     "build": "waku build --with-ssr",
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "express": "^4.18.2",
-    "react": "18.3.0-canary-6c7b41da3-20231123",
-    "react-dom": "18.3.0-canary-6c7b41da3-20231123",
-    "react-server-dom-webpack": "18.3.0-canary-6c7b41da3-20231123",
+    "@hono/node-server": "^1.3.1",
+    "hono": "^3.11.4",
+    "react": "18.3.0-canary-5bcade5fc-20231208",
+    "react-dom": "18.3.0-canary-5bcade5fc-20231208",
+    "react-server-dom-webpack": "18.3.0-canary-5bcade5fc-20231208",
     "waku": "0.17.1"
   },
   "devDependencies": {
-    "@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"
+    "@swc/core": "1.3.100",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "5.0.7"
   }
 }

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

@@ -1,6 +1,5 @@
 import { lazy } from 'react';
 import { defineEntries } from 'waku/server';
-import { Slot } from 'waku/client';
 
 const App = lazy(() => import('./components/App.js'));
 
@@ -25,7 +24,8 @@ export default defineEntries(
       case '/':
         return {
           input: '',
-          unstable_render: () => <Slot id="App" />,
+          unstable_render: ({ createElement, Slot }) =>
+            createElement(Slot, { id: 'App' }),
         };
       default:
         return null;

package/template/02_async/{src/index.html → index.html}

@@ -30,7 +30,7 @@
       <div class="spinner"></div>
     </div>
     <!--/placeholder1-->
-    <script src="/main.tsx" async type="module"></script>
+    <script src="/src/main.tsx" async type="module"></script>
     <!--placeholder2-->
     <!--/placeholder2-->
   </body>

package/template/02_async/package.json

@@ -4,23 +4,24 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev",
+    "dev": "waku dev --with-ssr",
     "build": "waku build --with-ssr",
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "express": "^4.18.2",
-    "react": "18.3.0-canary-6c7b41da3-20231123",
-    "react-dom": "18.3.0-canary-6c7b41da3-20231123",
-    "react-server-dom-webpack": "18.3.0-canary-6c7b41da3-20231123",
+    "@hono/node-server": "^1.3.1",
+    "hono": "^3.11.4",
+    "react": "18.3.0-canary-5bcade5fc-20231208",
+    "react-dom": "18.3.0-canary-5bcade5fc-20231208",
+    "react-server-dom-webpack": "18.3.0-canary-5bcade5fc-20231208",
     "waku": "0.17.1"
   },
   "devDependencies": {
-    "@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"
+    "@swc/core": "1.3.100",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "5.0.7"
   }
 }

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

@@ -1,6 +1,5 @@
 import { lazy } from 'react';
 import { defineEntries } from 'waku/server';
-import { Slot } from 'waku/client';
 
 const App = lazy(() => import('./components/App.js'));
 
@@ -25,7 +24,8 @@ export default defineEntries(
       case '/':
         return {
           input: '',
-          unstable_render: () => <Slot id="App" />,
+          unstable_render: ({ createElement, Slot }) =>
+            createElement(Slot, { id: 'App' }),
         };
       default:
         return null;

package/template/03_promise/{src/index.html → index.html}

@@ -30,7 +30,7 @@
       <div class="spinner"></div>
     </div>
     <!--/placeholder1-->
-    <script src="/main.tsx" async type="module"></script>
+    <script src="/src/main.tsx" async type="module"></script>
     <!--placeholder2-->
     <!--/placeholder2-->
   </body>

package/template/03_promise/package.json

@@ -4,23 +4,24 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev",
+    "dev": "waku dev --with-ssr",
     "build": "waku build --with-ssr",
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "express": "^4.18.2",
-    "react": "18.3.0-canary-6c7b41da3-20231123",
-    "react-dom": "18.3.0-canary-6c7b41da3-20231123",
-    "react-server-dom-webpack": "18.3.0-canary-6c7b41da3-20231123",
+    "@hono/node-server": "^1.3.1",
+    "hono": "^3.11.4",
+    "react": "18.3.0-canary-5bcade5fc-20231208",
+    "react-dom": "18.3.0-canary-5bcade5fc-20231208",
+    "react-server-dom-webpack": "18.3.0-canary-5bcade5fc-20231208",
     "waku": "0.17.1"
   },
   "devDependencies": {
-    "@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"
+    "@swc/core": "1.3.100",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "5.0.7"
   }
 }

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

@@ -1,6 +1,7 @@
+/// <reference types="react/canary" />
 'use client';
 
-import { Suspense, useState } from 'react';
+import { Suspense, useState, use } from 'react';
 
 export const Counter = ({
   delayedMessage,
@@ -26,9 +27,12 @@ const Message = ({
 }: {
   count: number;
   delayedMessage: Promise<string>;
-}) => (
-  <ul>
-    <li>count: {count}</li>
-    <li>delayedMessage: {delayedMessage as any}</li>
-  </ul>
-);
+}) => {
+  return (
+    <ul>
+      <li>count: {count}</li>
+      {/* We want show the usage without `use` but it causes a hydration error. https://github.com/dai-shi/waku/issues/202 */}
+      <li>delayedMessage: {use(delayedMessage)}</li>
+    </ul>
+  );
+};

package/template/03_promise/src/entries.tsx

@@ -1,6 +1,6 @@
 import { lazy } from 'react';
 import { defineEntries } from 'waku/server';
-import { Children, Slot } from 'waku/client';
+import { Children } from 'waku/client';
 
 const App = lazy(() => import('./components/App.js'));
 
@@ -29,11 +29,12 @@ export default defineEntries(
       case '/':
         return {
           input: '',
-          unstable_render: () => (
-            <Slot id="App">
-              <h3>A client element</h3>
-            </Slot>
-          ),
+          unstable_render: ({ createElement, Slot }) =>
+            createElement(
+              Slot,
+              { id: 'App' },
+              createElement('h3', null, 'A client element'),
+            ),
         };
       default:
         return null;

package/template/04_callserver/{src/index.html → index.html}

@@ -30,7 +30,7 @@
       <div class="spinner"></div>
     </div>
     <!--/placeholder1-->
-    <script src="/main.tsx" async type="module"></script>
+    <script src="/src/main.tsx" async type="module"></script>
     <!--placeholder2-->
     <!--/placeholder2-->
   </body>

package/template/04_callserver/package.json

@@ -9,19 +9,19 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "@hono/node-server": "^1.2.2",
-    "hono": "^3.10.0",
-    "react": "18.3.0-canary-6c7b41da3-20231123",
-    "react-dom": "18.3.0-canary-6c7b41da3-20231123",
-    "react-server-dom-webpack": "18.3.0-canary-6c7b41da3-20231123",
+    "@hono/node-server": "^1.3.1",
+    "hono": "^3.11.4",
+    "react": "18.3.0-canary-5bcade5fc-20231208",
+    "react-dom": "18.3.0-canary-5bcade5fc-20231208",
+    "react-server-dom-webpack": "18.3.0-canary-5bcade5fc-20231208",
     "waku": "0.17.1"
   },
   "devDependencies": {
-    "@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"
+    "@swc/core": "1.3.100",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "5.0.7"
   }
 }

package/template/04_callserver/src/entries.tsx

@@ -1,6 +1,5 @@
 import { lazy } from 'react';
 import { defineEntries } from 'waku/server';
-import { Slot } from 'waku/client';
 
 const App = lazy(() => import('./components/App.js'));
 
@@ -25,7 +24,8 @@ export default defineEntries(
       case '/':
         return {
           input: '',
-          unstable_render: () => <Slot id="App" />,
+          unstable_render: ({ createElement, Slot }) =>
+            createElement(Slot, { id: 'App' }),
         };
       default:
         return null;

package/template/05_mutation/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Waku example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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="/src/main.tsx" async type="module"></script>
+    <!--placeholder2-->
+    <!--/placeholder2-->
+  </body>
+</html>

package/template/05_mutation/package.json

@@ -9,20 +9,20 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "@hono/node-server": "^1.2.2",
-    "hono": "^3.10.0",
-    "react": "18.3.0-canary-6c7b41da3-20231123",
-    "react-dom": "18.3.0-canary-6c7b41da3-20231123",
-    "react-server-dom-webpack": "18.3.0-canary-6c7b41da3-20231123",
+    "@hono/node-server": "^1.3.1",
+    "hono": "^3.11.4",
+    "react": "18.3.0-canary-5bcade5fc-20231208",
+    "react-dom": "18.3.0-canary-5bcade5fc-20231208",
+    "react-server-dom-webpack": "18.3.0-canary-5bcade5fc-20231208",
     "react-wrap-balancer": "^1.1.0",
     "waku": "0.17.1"
   },
   "devDependencies": {
-    "@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"
+    "@swc/core": "1.3.100",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "5.0.7"
   }
 }

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

@@ -1,13 +1,13 @@
 'use server';
 
-import { rerender } from 'waku/server';
+import type { RenderContext } from 'waku/server';
 
 // module state on server
 let counter = 0;
 
 export const getCounter = () => counter;
 
-export const increment = () => {
+export function increment(this: RenderContext) {
   counter += 1;
-  rerender('Waku');
-};
+  this.rerender('Waku');
+}

package/template/05_mutation/src/entries.tsx

@@ -1,6 +1,5 @@
 import { lazy } from 'react';
 import { defineEntries } from 'waku/server';
-import { Slot } from 'waku/client';
 
 const App = lazy(() => import('./components/App.js'));
 
@@ -25,7 +24,8 @@ export default defineEntries(
       case '/':
         return {
           input: '',
-          unstable_render: () => <Slot id="App" />,
+          unstable_render: ({ createElement, Slot }) =>
+            createElement(Slot, { id: 'App' }),
         };
       default:
         return null;

package/template/06_nesting/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Waku example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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="/src/main.tsx" async type="module"></script>
+    <!--placeholder2-->
+    <!--/placeholder2-->
+  </body>
+</html>

package/template/06_nesting/package.json

@@ -9,19 +9,19 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "@hono/node-server": "^1.2.2",
-    "hono": "^3.10.0",
-    "react": "18.3.0-canary-6c7b41da3-20231123",
-    "react-dom": "18.3.0-canary-6c7b41da3-20231123",
-    "react-server-dom-webpack": "18.3.0-canary-6c7b41da3-20231123",
+    "@hono/node-server": "^1.3.1",
+    "hono": "^3.11.4",
+    "react": "18.3.0-canary-5bcade5fc-20231208",
+    "react-dom": "18.3.0-canary-5bcade5fc-20231208",
+    "react-server-dom-webpack": "18.3.0-canary-5bcade5fc-20231208",
     "waku": "0.17.1"
   },
   "devDependencies": {
-    "@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"
+    "@swc/core": "1.3.100",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "5.0.7"
   }
 }