create-dev-to 1.4.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +80 -71
  2. package/dist/visualComponents.js +16 -15
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -7,76 +7,97 @@ import { randomUUID } from "node:crypto";
7
7
  import readline from "node:readline";
8
8
  import os from "node:os";
9
9
  import * as clack from "@clack/prompts";
10
- import { red, cyan, yellow, green, dim } from "kolorist";
10
+ import { red, cyan, yellow, dim } from "kolorist";
11
+ const primaryGreen = (str) => `\x1B[38;2;63;185;80m${str}\x1B[0m`;
12
+ const white = (str) => `\x1B[38;2;230;237;243m${str}\x1B[0m`;
11
13
  import { InstallLogger } from "./installLogger.js";
12
14
  import { displayInstallSummary } from "./visualComponents.js";
13
15
  const PACKAGE_MANAGERS = ["pnpm", "npm", "yarn", "bun"];
14
16
  const __BUILD_INFO__ = {
15
- commit: "9870ae8",
17
+ commit: "82ec204",
16
18
  branch: "main",
17
- buildTime: "2026-01-10 16:50",
18
- version: "1.4.0"
19
+ buildTime: "2026-01-14 02:32",
20
+ version: "1.5.1"
19
21
  };
20
22
  const FRAMEWORKS = [
21
23
  {
22
24
  name: "react",
23
25
  display: "React",
24
26
  color: cyan,
25
- supported: true
27
+ variants: [
28
+ {
29
+ name: "react-ts",
30
+ display: "TypeScript",
31
+ color: cyan
32
+ },
33
+ {
34
+ name: "react-compiler-ts",
35
+ display: "TypeScript + React Compiler",
36
+ color: cyan
37
+ },
38
+ {
39
+ name: "react-swc-ts",
40
+ display: "TypeScript + SWC",
41
+ color: cyan
42
+ },
43
+ {
44
+ name: "react",
45
+ display: "JavaScript",
46
+ color: yellow
47
+ },
48
+ {
49
+ name: "react-compiler",
50
+ display: "JavaScript + React Compiler",
51
+ color: yellow
52
+ },
53
+ {
54
+ name: "react-swc",
55
+ display: "JavaScript + SWC",
56
+ color: yellow
57
+ }
58
+ ]
26
59
  },
27
60
  {
28
61
  name: "vue",
29
62
  display: "Vue",
30
- color: green,
31
- supported: false
63
+ color: primaryGreen,
64
+ variants: []
32
65
  },
33
66
  {
34
67
  name: "svelte",
35
68
  display: "Svelte",
36
69
  color: red,
37
- supported: false
70
+ variants: []
38
71
  },
39
72
  {
40
73
  name: "solid",
41
74
  display: "Solid",
42
75
  color: cyan,
43
- supported: false
76
+ variants: []
44
77
  },
45
78
  {
46
79
  name: "preact",
47
80
  display: "Preact",
48
81
  color: cyan,
49
- supported: false
82
+ variants: []
50
83
  },
51
84
  {
52
85
  name: "lit",
53
86
  display: "Lit",
54
87
  color: yellow,
55
- supported: false
88
+ variants: []
56
89
  },
57
90
  {
58
91
  name: "qwik",
59
92
  display: "Qwik",
60
93
  color: cyan,
61
- supported: false
94
+ variants: []
62
95
  },
63
96
  {
64
97
  name: "vanilla",
65
98
  display: "Vanilla",
66
99
  color: yellow,
67
- supported: false
68
- }
69
- ];
70
- const REACT_TEMPLATES = [
71
- {
72
- name: "react-ts",
73
- display: "TypeScript",
74
- color: cyan
75
- },
76
- {
77
- name: "react",
78
- display: "JavaScript",
79
- color: yellow
100
+ variants: []
80
101
  }
81
102
  ];
82
103
  const TEMPLATE_SOURCES = [
@@ -324,6 +345,7 @@ Please check your network connection or try again later.`
324
345
  }
325
346
  }
326
347
  }
348
+ throw new Error("Unexpected end of cloneViteTemplate function");
327
349
  }
328
350
  function getDegitCommandForPM(pm) {
329
351
  switch (pm) {
@@ -709,12 +731,12 @@ function printBanner() {
709
731
  const minutes = String(utcDateTime.getMinutes()).padStart(2, "0");
710
732
  const localTime = `${year}-${month}-${day} ${hours}:${minutes}`;
711
733
  const logo = `
712
- ${cyan(" \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557 \u2588\u2588\u2557")}${yellow(" \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557")} ${green(`v${version}`)}
713
- ${cyan(" \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551 \u2588\u2588\u2551")}${yellow(" \u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557")} ${dim(`${commit === "unknown" ? "" : `${commit} on ${branch}`}`)}
714
- ${cyan(" \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2551 \u2588\u2588\u2551")}${yellow(" \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551")} ${dim(`${localTime}`)}
715
- ${cyan(" \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D \u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D")}${yellow(" \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551")}
716
- ${cyan(" \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u255A\u2588\u2588\u2588\u2588\u2554\u255D")}${yellow(" \u2588\u2588\u2551 \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D")}
717
- ${cyan(" \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u255D")}${yellow(" \u255A\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D")}
734
+ ${primaryGreen(" \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557 \u2588\u2588\u2557")} ${white("\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557")} ${primaryGreen(`\u0189ev`)}${white(`-to v${version}`)}
735
+ ${primaryGreen(" \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551 \u2588\u2588\u2551")} ${white("\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557")} ${dim(`${commit === "unknown" ? "" : `${commit} on ${branch}`}`)}
736
+ ${primaryGreen(" \u256C\u0189\u256C \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2551 \u2588\u2588\u2551")} ${white("\u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551")} ${dim(`${localTime}`)}
737
+ ${primaryGreen(" \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D \u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D")} ${white("\u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551")}
738
+ ${primaryGreen(" \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u255A\u2588\u2588\u2588\u2588\u2554\u255D")} ${white("\u2588\u2588\u2551 \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D")}
739
+ ${primaryGreen(" \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u255D")} ${white("\u255A\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D")}
718
740
  `;
719
741
  console.log(logo);
720
742
  }
@@ -792,24 +814,23 @@ async function init() {
792
814
  }
793
815
  packageManager = pmChoice;
794
816
  }
795
- const framework = await clack.select({
817
+ const selectedFramework = await clack.select({
796
818
  message: "Select a framework:",
797
819
  options: FRAMEWORKS.map((fw) => ({
798
- value: fw.name,
799
- label: fw.supported ? fw.color(fw.display) : `${fw.color(fw.display)} ${dim("(Coming soon)")}`,
800
- hint: fw.supported ? void 0 : "Not yet supported"
820
+ value: fw,
821
+ label: fw.variants.length > 0 ? fw.color(fw.display) : `${fw.color(fw.display)} ${dim("(Coming soon)")}`,
822
+ hint: fw.variants.length > 0 ? void 0 : "Not yet supported"
801
823
  })),
802
- initialValue: "react"
824
+ initialValue: FRAMEWORKS[0]
803
825
  });
804
- if (clack.isCancel(framework)) {
826
+ if (clack.isCancel(selectedFramework)) {
805
827
  clack.cancel("Operation cancelled.");
806
828
  process.exit(0);
807
829
  }
808
- const selectedFramework = FRAMEWORKS.find((fw) => fw.name === framework);
809
- if (!selectedFramework?.supported) {
810
- clack.outro(yellow(`\u26A0\uFE0F ${selectedFramework?.display} support is coming soon!`));
830
+ if (selectedFramework.variants.length === 0) {
831
+ clack.outro(yellow(`\u26A0\uFE0F ${selectedFramework.display} support is coming soon!`));
811
832
  clack.note(
812
- `We're working hard to add support for ${selectedFramework?.display}.
833
+ `We're working hard to add support for ${selectedFramework.display}.
813
834
 
814
835
  For now, please use React or stay tuned for updates!`,
815
836
  "Roadmap"
@@ -818,54 +839,40 @@ For now, please use React or stay tuned for updates!`,
818
839
  }
819
840
  const variant = await clack.select({
820
841
  message: "Select a variant:",
821
- options: REACT_TEMPLATES.map((template2) => ({
822
- value: template2.name,
823
- label: template2.color(template2.display)
842
+ options: selectedFramework.variants.map((v) => ({
843
+ value: v.name,
844
+ label: v.color(v.display)
824
845
  }))
825
846
  });
826
847
  if (clack.isCancel(variant)) {
827
848
  clack.cancel("Operation cancelled.");
828
849
  process.exit(0);
829
850
  }
830
- const template = variant;
831
- const shouldUseSWC = await clack.confirm({
832
- message: "Use SWC for faster transpilation? (Optional)",
833
- initialValue: false
834
- });
835
- if (clack.isCancel(shouldUseSWC)) {
836
- clack.cancel("Operation cancelled.");
837
- process.exit(0);
838
- }
839
- const shouldUseReactCompiler = await clack.confirm({
840
- message: "Use React Compiler? (Experimental)",
841
- initialValue: false
842
- });
843
- if (clack.isCancel(shouldUseReactCompiler)) {
844
- clack.cancel("Operation cancelled.");
845
- process.exit(0);
846
- }
847
- const shouldUseRolldown = await clack.confirm({
848
- message: "Use Rolldown for bundling? (Experimental)",
849
- initialValue: false
850
- });
851
- if (clack.isCancel(shouldUseRolldown)) {
852
- clack.cancel("Operation cancelled.");
853
- process.exit(0);
854
- }
851
+ let template = variant;
855
852
  const root = path.join(cwd, targetDir);
856
853
  const spinner = clack.spinner();
857
854
  spinner.start("Scaffolding project");
855
+ let isReactSwc = false;
856
+ if (template.includes("-swc")) {
857
+ isReactSwc = true;
858
+ template = template.replace("-swc", "");
859
+ }
860
+ let isReactCompiler = false;
861
+ if (template.includes("-compiler")) {
862
+ isReactCompiler = true;
863
+ template = template.replace("-compiler", "");
864
+ }
858
865
  const cloneResult = await cloneViteTemplate(template, root, packageManager, spinner);
859
866
  const pkgPath = path.join(root, "package.json");
860
867
  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
861
868
  pkg.name = toValidPackageName(getProjectName());
862
869
  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
863
870
  const isTs = template.includes("ts");
864
- if (shouldUseSWC) {
871
+ if (isReactSwc) {
865
872
  spinner.message("Setting up SWC...");
866
873
  setupReactSWC(root, isTs);
867
874
  }
868
- if (shouldUseReactCompiler) {
875
+ if (isReactCompiler) {
869
876
  spinner.message("Setting up React Compiler...");
870
877
  setupReactCompiler(root, isTs);
871
878
  }
@@ -897,6 +904,8 @@ For now, please use React or stay tuned for updates!`,
897
904
  initialValue: true
898
905
  });
899
906
  if (clack.isCancel(shouldInstall)) {
907
+ clack.cancel("Operation cancelled.");
908
+ process.exit(0);
900
909
  }
901
910
  if (shouldInstall) {
902
911
  try {
package/dist/visualComponents.js CHANGED
@@ -1,4 +1,5 @@
1
- import { green, yellow, red, dim, bold } from "kolorist";
1
+ import { yellow, red, dim, bold } from "kolorist";
2
+ const primaryGreen = (str) => `\x1B[38;2;63;185;80m${str}\x1B[0m`;
2
3
  const ANSI = {
3
4
  cursorUp: (n) => `\x1B[${n}A`,
4
5
  cursorDown: (n) => `\x1B[${n}B`,
@@ -66,23 +67,23 @@ function getPhaseIcon(phase) {
66
67
  function getPhaseColors(phase) {
67
68
  const colorSets = {
68
69
  resolving: [
69
- { r: 59, g: 130, b: 246 },
70
- { r: 37, g: 99, b: 235 }
70
+ { r: 63, g: 185, b: 80 },
71
+ { r: 86, g: 211, b: 100 }
71
72
  ],
72
73
  downloading: [
73
- { r: 34, g: 197, b: 94 },
74
- { r: 22, g: 163, b: 74 }
74
+ { r: 63, g: 185, b: 80 },
75
+ { r: 86, g: 211, b: 100 }
75
76
  ],
76
77
  installing: [
77
- { r: 168, g: 85, b: 247 },
78
- { r: 147, g: 51, b: 234 }
78
+ { r: 63, g: 185, b: 80 },
79
+ { r: 86, g: 211, b: 100 }
79
80
  ],
80
81
  building: [
81
- { r: 251, g: 146, b: 60 },
82
- { r: 249, g: 115, b: 22 }
82
+ { r: 63, g: 185, b: 80 },
83
+ { r: 86, g: 211, b: 100 }
83
84
  ]
84
85
  };
85
- return colorSets[phase] || [{ r: 156, g: 163, b: 175 }];
86
+ return colorSets[phase] || [{ r: 63, g: 185, b: 80 }];
86
87
  }
87
88
  function formatSpeed(bytesPerSecond) {
88
89
  if (bytesPerSecond < 1024) return `${bytesPerSecond.toFixed(0)} B/s`;
@@ -132,8 +133,8 @@ class InstallRenderer {
132
133
  if (this.supportsColor) {
133
134
  const title = createGradient(
134
135
  "\u25C6 Installing Dependencies",
135
- { r: 99, g: 102, b: 241 },
136
- { r: 236, g: 72, b: 153 }
136
+ { r: 63, g: 185, b: 80 },
137
+ { r: 86, g: 211, b: 100 }
137
138
  );
138
139
  lines.push(bold(title));
139
140
  } else {
@@ -172,7 +173,7 @@ class InstallRenderer {
172
173
  buildStatsLine(stats) {
173
174
  const parts = [];
174
175
  if (stats.packagesAdded) {
175
- parts.push(`Packages: ${green(`+${stats.packagesAdded}`)}`);
176
+ parts.push(`Packages: ${primaryGreen(`+${stats.packagesAdded}`)}`);
176
177
  }
177
178
  if (stats.packagesUpdated) {
178
179
  parts.push(`Updated: ${yellow(stats.packagesUpdated.toString())}`);
@@ -219,11 +220,11 @@ class InstallRenderer {
219
220
  function displayInstallSummary(stats) {
220
221
  const lines = [];
221
222
  lines.push("");
222
- lines.push(green("\u2728 Installation Complete!"));
223
+ lines.push(primaryGreen("\u2728 Installation Complete!"));
223
224
  lines.push("");
224
225
  const pkgStats = [];
225
226
  if (stats.packagesAdded > 0)
226
- pkgStats.push(`${green(`+${stats.packagesAdded}`)} added`);
227
+ pkgStats.push(`${primaryGreen(`+${stats.packagesAdded}`)} added`);
227
228
  if (stats.packagesUpdated > 0)
228
229
  pkgStats.push(`${yellow(`~${stats.packagesUpdated}`)} updated`);
229
230
  if (stats.packagesRemoved > 0)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-dev-to",
3
- "version": "1.4.0",
3
+ "version": "1.5.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "engines": {