vectorvesper 0.3.4 → 1.1.0

package/README.md

@@ -17,13 +17,14 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/vectorvesper"><img src="https://img.shields.io/npm/v/vectorvesper?color=7EACB5&label=npm" alt="npm version" /></a>
-  <a href="https://www.npmjs.com/package/vectorvesper"><img src="https://img.shields.io/npm/dm/vectorvesper?color=7EACB5&label=downloads" alt="downloads" /></a>
   <a href="https://github.com/vectorvesper/vv-components/blob/main/LICENSE"><img src="https://img.shields.io/github/license/vectorvesper/vv-components?color=7EACB5&label=license" alt="license" /></a>
   <a href="https://vectorvesper.dev"><img src="https://img.shields.io/badge/docs-vectorvesper.dev-7EACB5" alt="docs" /></a>
 </p>
 
 ---
 
+> Vector Vesper is a CLI you run with `npx`, not a package you install. Start with `npx vectorvesper init` below.
+
 **Vector Vesper** is a motion toolkit for React consisting of 3D animations, shaders, and advanced motion components. 
 
 The CLI writes the component code directly into your repository. You have full control over the math, the shaders, and the styles.

package/dist/index.js

@@ -879,6 +879,64 @@ Using ${component.title || component.name}:`)));
   }
 }
 
+// src/utils/transpile.ts
+function isTsSource(target) {
+  return /\.(tsx|ts|mts|cts)$/i.test(target);
+}
+function toJsTarget(target) {
+  return target.replace(/\.tsx$/i, ".jsx").replace(/\.mts$/i, ".mjs").replace(/\.cts$/i, ".cjs").replace(/\.ts$/i, ".js");
+}
+async function stripTypes(content, filename) {
+  const babelMod = await import("@babel/core");
+  const transformAsync = babelMod.transformAsync ?? babelMod.default?.transformAsync;
+  if (typeof transformAsync !== "function") {
+    throw new Error("@babel/core is not available");
+  }
+  const presetMod = await import("@babel/preset-typescript");
+  const presetTypescript = presetMod.default ?? presetMod;
+  const result = await transformAsync(content, {
+    filename,
+    // .tsx → parse JSX; .ts → treat `<T>` as a generic
+    configFile: false,
+    babelrc: false,
+    comments: true,
+    // Only strip types. No JSX/react preset, so JSX is left untouched.
+    presets: [presetTypescript]
+  });
+  if (!result || typeof result.code !== "string") {
+    throw new Error("type-stripping produced no output");
+  }
+  return result.code;
+}
+async function fileToJs(target, content) {
+  if (!isTsSource(target)) return { target, content };
+  try {
+    const code = await stripTypes(content, target);
+    return { target: toJsTarget(target), content: code };
+  } catch (err) {
+    return { target, content, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+async function maybeTranspile(components, tsx) {
+  if (tsx) return { components, warnings: [] };
+  const warnings = [];
+  const transpiled = await Promise.all(
+    components.map(async (component) => {
+      const files = await Promise.all(
+        component.files.map(async (file) => {
+          const res = await fileToJs(file.target, file.content ?? "");
+          if (res.error) {
+            warnings.push(`${file.target} kept as TypeScript (${res.error})`);
+          }
+          return { ...file, target: res.target, content: res.content };
+        })
+      );
+      return { ...component, files };
+    })
+  );
+  return { components: transpiled, warnings };
+}
+
 // src/commands/add.ts
 async function handleDependencies(components, projectRoot, projectInfo, options) {
   const missing = getMissingDependencies(components, projectRoot);
@@ -993,6 +1051,13 @@ async function addCommand(slug, options = {}) {
     process.exit(1);
     return;
   }
+  let transpileWarnings = [];
+  if (config.tsx === false) {
+    spinner.text = "Converting to JavaScript...";
+    const t = await maybeTranspile(resolvedComponents, false);
+    resolvedComponents = t.components;
+    transpileWarnings = t.warnings;
+  }
   spinner.text = "Checking file conflicts...";
   let planned;
   try {
@@ -1091,6 +1156,11 @@ async function addCommand(slug, options = {}) {
     framework: projectInfo.framework,
     hasTailwind: projectInfo.hasTailwind
   });
+  if (transpileWarnings.length > 0) {
+    console.log(pc6.yellow(`
+  \u26A0\uFE0F  Some files were kept as TypeScript:`));
+    for (const w of transpileWarnings) console.log(`    ${pc6.dim(w)}`);
+  }
   console.log("");
   console.log(pc6.bold(pc6.green(`\u2714 Added ${pc6.cyan(targetComponent.slug)} to ${installPath}`)));
   console.log("");
@@ -1160,16 +1230,22 @@ async function updateCommand(slug, options = {}) {
   const upToDate = [];
   const failed = [];
   const updatedComponents = [];
+  const transpileWarnings = [];
   for (const target of targets) {
     spinner.text = `Updating ${pc7.cyan(target)}...`;
     try {
-      const components = await resolveComponentTree(target);
+      let components = await resolveComponentTree(target);
       const remote = components[components.length - 1];
       const localVersion = manifest.components[target]?.version;
       if (localVersion === remote.version && !options.force) {
         upToDate.push(target);
         continue;
       }
+      if (config.tsx === false) {
+        const t = await maybeTranspile(components, false);
+        components = t.components;
+        transpileWarnings.push(...t.warnings);
+      }
       const planned = planFiles(components, installDir, projectRoot);
       writeFiles(planned.map((f) => ({ absolutePath: f.absolutePath, content: f.content })));
       recordInstall(components, installDir, projectRoot);
@@ -1197,6 +1273,11 @@ async function updateCommand(slug, options = {}) {
   Failed (${failed.length}):`)));
     for (const f of failed) console.log(`    ${pc7.red("\u2716")} ${f.slug}: ${pc7.dim(f.reason)}`);
   }
+  if (transpileWarnings.length > 0) {
+    console.log(pc7.yellow(`
+  \u26A0\uFE0F  Some files were kept as TypeScript:`));
+    for (const w of transpileWarnings) console.log(`    ${pc7.dim(w)}`);
+  }
   console.log("");
   if (updatedComponents.length > 0) {
     await handleDependencies(updatedComponents, projectRoot, projectInfo, options);
@@ -1305,7 +1386,7 @@ Remove ${slug}
 import fs9 from "fs";
 import path9 from "path";
 import pc9 from "picocolors";
-var CLI_VERSION = true ? "0.3.4" : "0.0.0-dev";
+var CLI_VERSION = true ? "1.1.0" : "0.0.0-dev";
 async function infoCommand() {
   console.log(pc9.bold(pc9.cyan("\nVector Vesper Diagnostics\n")));
   const projectInfo = detectProject();
@@ -1603,7 +1684,7 @@ async function whoamiCommand() {
 }
 
 // src/index.ts
-var version = true ? "0.3.4" : "0.0.0-dev";
+var version = true ? "1.1.0" : "0.0.0-dev";
 var program = new Command();
 program.name("vv").description("Vector Vesper CLI \u2014 add visual components to your React project").version(version).option("--verbose", "Show detailed debug output").hook("preAction", (thisCommand) => {
   const opts = thisCommand.opts();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vectorvesper",
-  "version": "0.3.4",
+  "version": "1.1.0",
   "description": "Add WebGL, React Three Fiber & advanced motion components to your project via CLI.",
   "type": "module",
   "license": "MIT",
@@ -46,6 +46,8 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-typescript": "^7.24.0",
     "@clack/prompts": "^0.7.0",
     "commander": "^12.0.0",
     "ora": "^8.0.1",
@@ -53,6 +55,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^25.9.2",
     "tsup": "^8.0.2",
     "typescript": "^6.0.3",