feature: better frameworks like cli

contrib/create-waku/cli.js

@@ -1,46 +1,148 @@
 #!/usr/bin/env node
 
-const path = require("node:path");
-const fs = require("node:fs");
-const https = require("node:https");
+import fs from 'node:fs'
+import path from 'node:path'
+import prompts from 'prompts'
+import { red, green, bold } from 'kolorist'
 
-const dirName = "waku-example";
+import emptyDir from './emptyDir.js'
+import renderTemplate from './renderTemplate.js'
 
-if (fs.existsSync(dirName)) {
-  console.error(`Directory "${dirName}" already exists!`);
-  process.exit(1);
+function isValidPackageName(projectName) {
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+    projectName
+  )
 }
 
-const baseUrl =
-  "https://raw.githubusercontent.com/dai-shi/waku/v0.14.0/examples/01_counter/";
-
-const files = `
-package.json
-tsconfig.json
-src/main.tsx
-src/entries.ts
-src/index.html
-src/components/App.tsx
-src/components/Counter.tsx
-`
-  .split(/\s/)
-  .filter((file) => file);
-
-const getFiles = (index = 0) => {
-  const file = files[index];
-  if (!file) return;
-  const destFile = path.join(dirName, file.replace("/", path.sep));
-  fs.mkdirSync(path.dirname(destFile), { recursive: true });
-  https.get(baseUrl + file, (res) => {
-    res.pipe(fs.createWriteStream(destFile));
-    res.on("end", () => getFiles(index + 1));
-  });
-};
-
-getFiles();
-
-process.on("exit", (code) => {
-  if (!code) {
-    console.info(`Done! Change directory "${dirName}"`);
+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() {
+  const cwd = process.cwd();
+
+  let targetDir;
+  let defaultProjectName = 'waku-project'
+
+  const CHOICES = fs.readdirSync(path.resolve(cwd, '../../examples'))
+  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.shouldOverwrite === 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', value: CHOICES[0] },
+          { title: 'async-template', value: CHOICES[1] },
+          { title: 'promise-template', value: CHOICES[2] },
+        ],
+      }
+    ], {
+      onCancel: () => {
+        throw new Error(red('✖') + ' Operation cancelled')
+      }
+    })
+  } catch (cancelled) {
+    console.log(cancelled.message)
+    process.exit(1)
+  }
+
+  const { packageName, shouldOverwrite, chooseProject } = result
+
+  const root = path.join(cwd, targetDir)
+  // const root = path.resolve(cwd, '../playground', targetDir)
+
+  if (shouldOverwrite) {
+    emptyDir(root)
+  } else if (!fs.existsSync(root)) {
+    fs.mkdirSync(root)
+  }
+
+  const pkg = { name: packageName, version: '0.0.0' }
+
+  fs.writeFileSync(
+    path.resolve(root, 'package.json'),
+    JSON.stringify(pkg, null, 2),
+  )
+
+  console.log("Setting up project...")
+  const templateRoot = path.resolve(cwd, '../../examples')
+
+  const render = function render(templateName) {
+    const templateDir = path.resolve(templateRoot, templateName)
+    renderTemplate(templateDir, root)
+  }
+
+  render(chooseProject)
+
+  const packageManager = /pnpm/.test(process.env.npm_execpath)
+    ? 'pnpm'
+    : /yarn/.test(process.env.npm_execpath)
+      ? '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`)
+  if (root !== cwd) {
+    console.log(`${bold(green(`cd ${path.relative(cwd, root)}`))}`)
   }
-});
+  console.log(`${bold(green(commandsMap.install[packageManager]))}`)
+  console.log(`${bold(green(commandsMap.dev[packageManager]))}`)
+  console.log()
+}
+
+init().catch((e) => {
+  console.error(e)
+})

contrib/create-waku/deepMerge.js

@@ -0,0 +1,19 @@
+const isObject = val => val && typeof val === 'object'
+const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))
+
+export default function deepMerge(target, obj) {
+  for (const key of Object.keys(obj)) {
+    const oldVal = target[key]
+    const newVal = obj[key]
+
+    if (Array.isArray(oldVal) && Array.isArray(newVal)) {
+      target[key] = mergeArrayWithDedupe(oldVal, newVal)
+    } else if (isObject(oldVal) && isObject(newVal)) {
+      target[key] = deepMerge(oldVal, newVal)
+    } else {
+      target[key] = newVal
+    }
+  }
+
+  return target
+}

contrib/create-waku/emptyDir.js

@@ -0,0 +1,19 @@
+import fs from 'fs';
+import path from 'path';
+
+export default function emptyDir(dir) {
+  // if the file empty
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+  for (const file of fs.readdirSync(dir)) {
+    const abs = path.resolve(dir, file);
+    if (fs.lstatSync(abs).isDirectory()) {
+      emptyDir(abs);
+      // after emptying the dir remove the dir itself
+      fs.rmdirSync(abs);
+    } else {
+      fs.unlinkSync(abs);
+    }
+  }
+}

contrib/create-waku/package.json

@@ -1,5 +1,13 @@
 {
   "name": "create-waku",
   "version": "0.4.10",
-  "bin": "./cli.js"
+  "bin": "./cli.js",
+  "type": "module",
+  "scripts": {
+    "test": "node ./tests/generateTemplates.test.js"
+  },
+  "dependencies": {
+    "kolorist": "^1.8.0",
+    "prompts": "^2.4.2"
+  }
 }

contrib/create-waku/renderTemplate.js

@@ -0,0 +1,36 @@
+import fs from 'fs';
+import path from 'path';
+import deepMerge from './deepMerge.js'
+
+function renderTemplate(src, dest) {
+  const stats = fs.statSync(src);
+
+  if (stats.isDirectory()) {
+    fs.mkdirSync(dest, { recursive: true });
+    for (const file of fs.readdirSync(src)) {
+      renderTemplate(path.resolve(src, file), path.resolve(dest, file));
+    }
+    return;
+  }
+
+  const filename = path.basename(src);
+
+  if (filename === 'package.json' && fs.existsSync(dest)) {
+    // merge instead of overwriting
+    const pkg = deepMerge(
+      JSON.parse(fs.readFileSync(dest)),
+      JSON.parse(fs.readFileSync(src))
+    );
+    fs.writeFileSync(dest, JSON.stringify(pkg, null, 2) + '\n');
+    return;
+  }
+
+  if (filename.startsWith('_')) {
+    // rename `_file` to `.file`
+    dest = path.resolve(path.dirname(dest), filename.replace(/^_/, '.'));
+  }
+
+  fs.copyFileSync(src, dest);
+}
+
+export default renderTemplate;

contrib/create-waku/tests/generateTemplates.test.js

@@ -0,0 +1,33 @@
+import fs from 'fs'
+import path from 'path'
+import assert from 'assert'
+import { green, bold } from 'kolorist'
+
+import renderTemplate from '../renderTemplate.js'
+import emptyDir from '../emptyDir.js'
+
+function generateTemplate(targetDir, templateDir) {
+  renderTemplate(templateDir, targetDir)
+}
+
+// Test case
+function testTemplateGeneration() {
+  const cwd = process.cwd()
+
+  const templateDir = path.resolve(cwd, '../../examples', '01_counter')
+  const targetDir = path.resolve(cwd, './playground', 'basic')
+
+  // Generate the template
+  generateTemplate(targetDir, templateDir);
+
+  // Check if the file was generated
+  const fileExists = fs.existsSync(targetDir);
+  assert.strictEqual(fileExists, true, console.log(bold(green(`Template generated successfully.`))))
+
+  // Clean up the generated file after the test
+  emptyDir(targetDir)
+  fs.rmdirSync(targetDir);
+}
+
+// Run the test
+testTemplateGeneration()