create-waku 0.6.1 → 0.6.2

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,131 @@
+#!/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';
+function isValidPackageName(projectName) {
+    return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName);
+}
+function toValidPackageName(projectName) {
+    return projectName
+        .trim()
+        .toLowerCase()
+        .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));
+    const CHOICES = fs.readdirSync(templateRoot);
+    let result;
+    try {
+        result = await prompts([
+            {
+                name: 'projectName',
+                type: 'text',
+                message: 'Project Name',
+                initial: defaultProjectName,
+                onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName),
+            },
+            {
+                name: 'shouldOverwrite',
+                type: () => (canSafelyOverwrite(targetDir) ? null : 'confirm'),
+                message: `${targetDir} is not empty. Remove existing files and continue?`,
+            },
+            {
+                name: 'overwriteChecker',
+                type: (values) => {
+                    if (values === false) {
+                        throw new Error(red('✖') + ' Operation cancelled');
+                    }
+                    return null;
+                },
+            },
+            {
+                name: 'packageName',
+                type: () => (isValidPackageName(targetDir) ? null : 'text'),
+                message: 'Package name',
+                initial: () => toValidPackageName(targetDir),
+                validate: (dir) => isValidPackageName(dir) || 'Invalid package.json name',
+            },
+            {
+                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] },
+                ],
+            },
+        ], {
+            onCancel: () => {
+                throw new Error(red('✖') + ' Operation cancelled');
+            },
+        });
+    }
+    catch (cancelled) {
+        if (cancelled instanceof Error) {
+            console.log(cancelled.message);
+        }
+        process.exit(1);
+    }
+    const { packageName, shouldOverwrite, chooseProject } = result;
+    const root = path.resolve(targetDir);
+    if (shouldOverwrite) {
+        fse.emptyDirSync(root);
+    }
+    else if (!fs.existsSync(root)) {
+        fs.mkdirSync(root, { recursive: true });
+    }
+    const pkg = {
+        name: packageName ?? toValidPackageName(targetDir),
+        version: '0.0.0',
+    };
+    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');
+    // Read new package.json from the template directory
+    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 packageManager = /pnpm/.test(manager)
+        ? 'pnpm'
+        : /yarn/.test(manager)
+            ? 'yarn'
+            : 'npm';
+    const commandsMap = {
+        install: {
+            pnpm: 'pnpm install',
+            yarn: 'yarn',
+            npm: 'npm install',
+        },
+        dev: {
+            pnpm: 'pnpm dev',
+            yarn: 'yarn dev',
+            npm: 'npm run dev',
+        },
+    };
+    console.log(`\nDone. Now run:\n`);
+    console.log(`${bold(green(`cd ${targetDir}`))}`);
+    console.log(`${bold(green(commandsMap.install[packageManager]))}`);
+    console.log(`${bold(green(commandsMap.dev[packageManager]))}`);
+    console.log();
+}
+init().catch((e) => {
+    console.error(e);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-waku",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "author": "Daishi Kato",
   "type": "module",
   "contributors": [
@@ -27,7 +27,7 @@
   },
   "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,29 +1,29 @@
 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"));
+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
 async (pathStr) => {
     switch (pathStr) {
-        case "/":
+        case '/':
             return {
-                input: "",
+                input: '',
                 unstable_render: () => _jsx(Slot, { id: "App" }),
             };
         default:

package/template/01_counter/dist/main.js

@@ -1,11 +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";
+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);
+    hydrateRoot(document.getElementById('root'), rootElement);
 }
 else {
-    createRoot(document.getElementById("root")).render(rootElement);
+    createRoot(document.getElementById('root')).render(rootElement);
 }

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,30 +1,30 @@
-import { lazy } from "react";
-import { defineEntries } from "waku/server";
-import { Slot } from "waku/client";
+import { lazy } from 'react';
+import { defineEntries } from 'waku/server';
+import { Slot } 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: <App name={input || 'Waku'} />,
     };
   },
   // getBuildConfig
   async () => {
     return {
-      "/": {
-        entries: [[""]],
+      '/': {
+        entries: [['']],
       },
     };
   },
   // getSsrConfig
   async (pathStr) => {
     switch (pathStr) {
-      case "/":
+      case '/':
         return {
-          input: "",
+          input: '',
           unstable_render: () => <Slot id="App" />,
         };
       default:

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

@@ -1,6 +1,6 @@
-import { StrictMode } from "react";
-import { createRoot, 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>
@@ -11,7 +11,7 @@ const rootElement = (
 );
 
 if ((globalThis as any).__WAKU_SSR_ENABLED__) {
-  hydrateRoot(document.getElementById("root")!, rootElement);
+  hydrateRoot(document.getElementById('root')!, rootElement);
 } else {
-  createRoot(document.getElementById("root")!).render(rootElement);
+  createRoot(document.getElementById('root')!).render(rootElement);
 }

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

@@ -1,10 +1,10 @@
 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";
+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, {})] }));
+    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));

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

@@ -1,29 +1,29 @@
 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"));
+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
 async (pathStr) => {
     switch (pathStr) {
-        case "/":
+        case '/':
             return {
-                input: "",
+                input: '',
                 unstable_render: () => _jsx(Slot, { id: "App" }),
             };
         default:

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

@@ -1,11 +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";
+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);
+    hydrateRoot(document.getElementById('root'), rootElement);
 }
 else {
-    createRoot(document.getElementById("root")).render(rootElement);
+    createRoot(document.getElementById('root')).render(rootElement);
 }

package/template/02_async/src/components/App.tsx

@@ -1,12 +1,12 @@
 /// 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...">

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>