create-dev-to 1.3.3 → 1.5.0

package/dist/index.js

@@ -5,77 +5,97 @@ import { spawn, execSync } from "node:child_process";
 import process from "node:process";
 import { randomUUID } from "node:crypto";
 import readline from "node:readline";
+import os from "node:os";
 import * as clack from "@clack/prompts";
 import { red, cyan, yellow, green, dim } from "kolorist";
 import { InstallLogger } from "./installLogger.js";
 import { displayInstallSummary } from "./visualComponents.js";
 const PACKAGE_MANAGERS = ["pnpm", "npm", "yarn", "bun"];
 const __BUILD_INFO__ = {
-  commit: "36c1f26",
+  commit: "395653e",
   branch: "main",
-  buildTime: "2026-01-10 15:26",
-  version: "1.3.3"
+  buildTime: "2026-01-11 02:43",
+  version: "1.5.0"
 };
 const FRAMEWORKS = [
   {
     name: "react",
     display: "React",
     color: cyan,
-    supported: true
+    variants: [
+      {
+        name: "react-ts",
+        display: "TypeScript",
+        color: cyan
+      },
+      {
+        name: "react-compiler-ts",
+        display: "TypeScript + React Compiler",
+        color: cyan
+      },
+      {
+        name: "react-swc-ts",
+        display: "TypeScript + SWC",
+        color: cyan
+      },
+      {
+        name: "react",
+        display: "JavaScript",
+        color: yellow
+      },
+      {
+        name: "react-compiler",
+        display: "JavaScript + React Compiler",
+        color: yellow
+      },
+      {
+        name: "react-swc",
+        display: "JavaScript + SWC",
+        color: yellow
+      }
+    ]
   },
   {
     name: "vue",
     display: "Vue",
     color: green,
-    supported: false
+    variants: []
   },
   {
     name: "svelte",
     display: "Svelte",
     color: red,
-    supported: false
+    variants: []
   },
   {
     name: "solid",
     display: "Solid",
     color: cyan,
-    supported: false
+    variants: []
   },
   {
     name: "preact",
     display: "Preact",
     color: cyan,
-    supported: false
+    variants: []
   },
   {
     name: "lit",
     display: "Lit",
     color: yellow,
-    supported: false
+    variants: []
   },
   {
     name: "qwik",
     display: "Qwik",
     color: cyan,
-    supported: false
+    variants: []
   },
   {
     name: "vanilla",
     display: "Vanilla",
     color: yellow,
-    supported: false
-  }
-];
-const REACT_TEMPLATES = [
-  {
-    name: "react-ts",
-    display: "TypeScript",
-    color: cyan
-  },
-  {
-    name: "react",
-    display: "JavaScript",
-    color: yellow
+    variants: []
   }
 ];
 const TEMPLATE_SOURCES = [
@@ -235,6 +255,19 @@ function findViteConfigFile(projectDir) {
   return null;
 }
 async function cloneViteTemplate(template, targetDir, packageManager, spinner) {
+  const cacheMetadata = getTemplateCacheMetadata(template);
+  if (cacheMetadata) {
+    const shortHash = cacheMetadata.commitHash.slice(0, 8);
+    spinner.message(`Checking cache ${dim(`(${shortHash})`)}`);
+    const cachedRestored = await restoreFromCache(template, targetDir);
+    if (cachedRestored) {
+      spinner.stop(`Template restored from cache ${dim(`(${shortHash})`)}`);
+      return { fromCache: true, commitHash: cacheMetadata.commitHash };
+    }
+    spinner.message(`Downloading template ${dim("(cache outdated)")}`);
+  } else {
+    spinner.message("Downloading template");
+  }
   const errors = [];
   for (let i = 0; i < TEMPLATE_SOURCES.length; i++) {
     const source = TEMPLATE_SOURCES[i];
@@ -243,6 +276,12 @@ async function cloneViteTemplate(template, targetDir, packageManager, spinner) {
       if (i > 0) {
         spinner.message(`Trying ${source.name}...`);
       }
+      spinner.message(`Checking template version from ${source.name}...`);
+      const commitHash = getTemplateCommitHash(source, template);
+      if (commitHash) {
+        const shortHash = commitHash.slice(0, 8);
+        spinner.message(`Latest template version: ${shortHash}`);
+      }
       const { command, args } = source.getCloneCommand(template, targetDir, packageManager);
       if (source.isGitBased) {
         const tempCloneDir = path.join(process.cwd(), `.tmp-clone-${randomUUID()}`);
@@ -274,7 +313,13 @@ async function cloneViteTemplate(template, targetDir, packageManager, spinner) {
       } else {
         await run(command, args, process.cwd());
       }
-      return;
+      if (commitHash) {
+        const shortHash = commitHash.slice(0, 8);
+        spinner.message(`Caching template ${dim(`(${shortHash})`)} for future use...`);
+        await saveToCache(template, targetDir, commitHash);
+        spinner.message(`Template cached ${dim(`(${shortHash})`)}`);
+      }
+      return { fromCache: false, commitHash };
     } catch (error) {
       if (tempTargetDir && fs.existsSync(tempTargetDir)) {
         fs.rmSync(tempTargetDir, { recursive: true, force: true });
@@ -298,6 +343,7 @@ Please check your network connection or try again later.`
       }
     }
   }
+  throw new Error("Unexpected end of cloneViteTemplate function");
 }
 function getDegitCommandForPM(pm) {
   switch (pm) {
@@ -323,6 +369,95 @@ function getDegitCommandForPM(pm) {
       };
   }
 }
+function getTemplateCacheDir() {
+  const cacheDir = path.join(process.env.HOME || process.env.USERPROFILE || os.homedir(), ".create-dev-to-cache");
+  return cacheDir;
+}
+function getTemplateCommitHash(source, template) {
+  try {
+    if (source.name === "GitHub") {
+      const templatePath = `packages/create-vite/template-${template}`;
+      const hash = execSync(
+        `git ls-remote https://github.com/vitejs/vite.git HEAD | cut -f1`,
+        { stdio: "pipe" }
+      ).toString().trim();
+      try {
+        const apiUrl = `https://api.github.com/repos/vitejs/vite/commits?path=${templatePath}&per_page=1`;
+        const apiHash = execSync(
+          `curl -s "${apiUrl}" | grep -m 1 '"sha"' | cut -d'"' -f4`,
+          { stdio: "pipe" }
+        ).toString().trim();
+        return apiHash || hash;
+      } catch {
+        return hash;
+      }
+    } else if (source.name === "Gitee Mirror (\u56FD\u5185\u955C\u50CF)") {
+      const hash = execSync("git ls-remote https://gitee.com/mirrors/ViteJS.git HEAD", { stdio: "pipe" }).toString().split("	")[0].trim();
+      return hash;
+    } else {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+}
+function getTemplateCachePath(template, commitHash) {
+  const cacheDir = getTemplateCacheDir();
+  const templateCacheFile = `${template}-${commitHash.slice(0, 8)}.zip`;
+  return path.join(cacheDir, templateCacheFile);
+}
+function getTemplateCacheMetadata(template) {
+  const cacheDir = getTemplateCacheDir();
+  const metadataFile = path.join(cacheDir, `${template}.json`);
+  try {
+    if (fs.existsSync(metadataFile)) {
+      const metadata = JSON.parse(fs.readFileSync(metadataFile, "utf-8"));
+      return metadata;
+    }
+  } catch {
+  }
+  return null;
+}
+function saveTemplateCacheMetadata(template, commitHash) {
+  const cacheDir = getTemplateCacheDir();
+  if (!fs.existsSync(cacheDir)) {
+    fs.mkdirSync(cacheDir, { recursive: true });
+  }
+  const metadataFile = path.join(cacheDir, `${template}.json`);
+  fs.writeFileSync(metadataFile, JSON.stringify({ commitHash }, null, 2));
+}
+async function restoreFromCache(template, targetDir) {
+  try {
+    const metadata = getTemplateCacheMetadata(template);
+    if (!metadata) return false;
+    const cachePath = getTemplateCachePath(template, metadata.commitHash);
+    const cacheSourceDir = path.join(path.dirname(cachePath), `${template}-${metadata.commitHash.slice(0, 8)}`);
+    if (fs.existsSync(cacheSourceDir)) {
+      if (fs.existsSync(targetDir)) {
+        fs.rmSync(targetDir, { recursive: true, force: true });
+      }
+      copyDir(cacheSourceDir, targetDir);
+      return true;
+    }
+  } catch {
+  }
+  return false;
+}
+async function saveToCache(template, sourceDir, commitHash) {
+  try {
+    const cacheDir = getTemplateCacheDir();
+    if (!fs.existsSync(cacheDir)) {
+      fs.mkdirSync(cacheDir, { recursive: true });
+    }
+    const cachePath = getTemplateCachePath(template, commitHash);
+    const cacheSourceDir = path.join(path.dirname(cachePath), `${template}-${commitHash.slice(0, 8)}`);
+    if (!fs.existsSync(cacheSourceDir)) {
+      copyDir(sourceDir, cacheSourceDir);
+    }
+    saveTemplateCacheMetadata(template, commitHash);
+  } catch {
+  }
+}
 function injectPluginIntoViteConfig(content, pluginPackage, pluginName) {
   const hasImport = new RegExp(`['"]${pluginPackage.replace(/\//g, "\\/")}['"]`).test(content);
   const hasCall = content.includes(`${pluginName}(`);
@@ -399,8 +534,16 @@ ${newPlugin}
   }
   return out;
 }
-function updatePluginComponentName(content, pluginName, componentName) {
+function updatePluginComponentName(content, pluginName, componentName, projectName) {
+  const defaultComponentName = projectName.split(/[-_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
   const pluginCall = `${pluginName}()`;
+  if (componentName === defaultComponentName) {
+    const newPluginCall2 = `${pluginName}('${componentName}')`;
+    if (content.includes(pluginCall)) {
+      return content.replace(pluginCall, newPluginCall2);
+    }
+    return content;
+  }
   const newPluginCall = `${pluginName}({
       ${componentName}: 'src/${componentName}/index.tsx',
     })`;
@@ -635,8 +778,8 @@ async function init() {
         });
       },
       componentName: ({ results }) => {
-        const projectName = results.projectName || "dev-to-app";
-        const defaultComponentName = projectName.split(/[-_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
+        const projectName2 = results.projectName || "dev-to-app";
+        const defaultComponentName = projectName2.split(/[-_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
         return clack.text({
           message: `First component name ${dim("\n\u2502    Leave blank to default to project name.You can modify it in vite config later.\n")}`,
           placeholder: defaultComponentName,
@@ -651,7 +794,7 @@ async function init() {
       }
     }
   );
-  const { shouldOverwrite, componentName } = project;
+  const { shouldOverwrite, componentName, projectName } = project;
   if (shouldOverwrite) {
     emptyDir(path.join(cwd, targetDir));
   }
@@ -669,24 +812,23 @@ async function init() {
     }
     packageManager = pmChoice;
   }
-  const framework = await clack.select({
+  const selectedFramework = await clack.select({
     message: "Select a framework:",
     options: FRAMEWORKS.map((fw) => ({
-      value: fw.name,
-      label: fw.supported ? fw.color(fw.display) : `${fw.color(fw.display)} ${dim("(Coming soon)")}`,
-      hint: fw.supported ? void 0 : "Not yet supported"
+      value: fw,
+      label: fw.variants.length > 0 ? fw.color(fw.display) : `${fw.color(fw.display)} ${dim("(Coming soon)")}`,
+      hint: fw.variants.length > 0 ? void 0 : "Not yet supported"
     })),
-    initialValue: "react"
+    initialValue: FRAMEWORKS[0]
   });
-  if (clack.isCancel(framework)) {
+  if (clack.isCancel(selectedFramework)) {
     clack.cancel("Operation cancelled.");
     process.exit(0);
   }
-  const selectedFramework = FRAMEWORKS.find((fw) => fw.name === framework);
-  if (!selectedFramework?.supported) {
-    clack.outro(yellow(`\u26A0\uFE0F  ${selectedFramework?.display} support is coming soon!`));
+  if (selectedFramework.variants.length === 0) {
+    clack.outro(yellow(`\u26A0\uFE0F  ${selectedFramework.display} support is coming soon!`));
     clack.note(
-      `We're working hard to add support for ${selectedFramework?.display}.
+      `We're working hard to add support for ${selectedFramework.display}.
 
 For now, please use React or stay tuned for updates!`,
       "Roadmap"
@@ -695,54 +837,40 @@ For now, please use React or stay tuned for updates!`,
   }
   const variant = await clack.select({
     message: "Select a variant:",
-    options: REACT_TEMPLATES.map((template2) => ({
-      value: template2.name,
-      label: template2.color(template2.display)
+    options: selectedFramework.variants.map((v) => ({
+      value: v.name,
+      label: v.color(v.display)
     }))
   });
   if (clack.isCancel(variant)) {
     clack.cancel("Operation cancelled.");
     process.exit(0);
   }
-  const template = variant;
-  const shouldUseSWC = await clack.confirm({
-    message: "Use SWC for faster transpilation? (Optional)",
-    initialValue: false
-  });
-  if (clack.isCancel(shouldUseSWC)) {
-    clack.cancel("Operation cancelled.");
-    process.exit(0);
-  }
-  const shouldUseReactCompiler = await clack.confirm({
-    message: "Use React Compiler? (Experimental)",
-    initialValue: false
-  });
-  if (clack.isCancel(shouldUseReactCompiler)) {
-    clack.cancel("Operation cancelled.");
-    process.exit(0);
-  }
-  const shouldUseRolldown = await clack.confirm({
-    message: "Use Rolldown for bundling? (Experimental)",
-    initialValue: false
-  });
-  if (clack.isCancel(shouldUseRolldown)) {
-    clack.cancel("Operation cancelled.");
-    process.exit(0);
-  }
+  let template = variant;
   const root = path.join(cwd, targetDir);
   const spinner = clack.spinner();
   spinner.start("Scaffolding project");
-  await cloneViteTemplate(template, root, packageManager, spinner);
+  let isReactSwc = false;
+  if (template.includes("-swc")) {
+    isReactSwc = true;
+    template = template.replace("-swc", "");
+  }
+  let isReactCompiler = false;
+  if (template.includes("-compiler")) {
+    isReactCompiler = true;
+    template = template.replace("-compiler", "");
+  }
+  const cloneResult = await cloneViteTemplate(template, root, packageManager, spinner);
   const pkgPath = path.join(root, "package.json");
   const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
   pkg.name = toValidPackageName(getProjectName());
   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
   const isTs = template.includes("ts");
-  if (shouldUseSWC) {
+  if (isReactSwc) {
     spinner.message("Setting up SWC...");
     setupReactSWC(root, isTs);
   }
-  if (shouldUseReactCompiler) {
+  if (isReactCompiler) {
     spinner.message("Setting up React Compiler...");
     setupReactCompiler(root, isTs);
   }
@@ -754,17 +882,28 @@ For now, please use React or stay tuned for updates!`,
   if (viteConfigPath) {
     let patched = fs.readFileSync(viteConfigPath, "utf-8");
     patched = injectPluginIntoViteConfig(patched, pluginPackage, pluginName);
-    patched = updatePluginComponentName(patched, pluginName, componentName);
+    patched = updatePluginComponentName(patched, pluginName, componentName, projectName);
     fs.writeFileSync(viteConfigPath, patched);
   }
   spinner.message(`Creating component ${componentName}...`);
   createComponentFile(root, componentName, isTs);
-  spinner.stop("Project created");
+  let completionMessage = "Project created";
+  if (cloneResult.commitHash) {
+    const shortHash = cloneResult.commitHash.slice(0, 8);
+    if (cloneResult.fromCache) {
+      completionMessage += ` ${dim(`with cached template (${shortHash})`)}`;
+    } else {
+      completionMessage += ` ${dim(`(${shortHash})`)}`;
+    }
+  }
+  spinner.stop(completionMessage);
   const shouldInstall = await clack.confirm({
     message: "Install dependencies and start dev server?",
     initialValue: true
   });
   if (clack.isCancel(shouldInstall)) {
+    clack.cancel("Operation cancelled.");
+    process.exit(0);
   }
   if (shouldInstall) {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-dev-to",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "private": false,
   "type": "module",
   "engines": {