@s0rt/3dvf 0.1.5 → 0.3.0

package/dist/cli/index.js

@@ -3608,7 +3608,7 @@ var package_default;
 var init_package = __esm(() => {
   package_default = {
     name: "@s0rt/3dvf",
-    version: "0.1.5",
+    version: "0.3.0",
     description: "shadcn-style Three.js function library CLI",
     type: "module",
     bin: {
@@ -3629,15 +3629,17 @@ var init_package = __esm(() => {
       test: "bun test"
     },
     dependencies: {
-      "@types/three": "^0.183.1",
       commander: "^12.1.0",
       ora: "^8.1.1",
       picocolors: "^1.1.1",
       prompts: "^2.4.2"
     },
     devDependencies: {
+      "@types/bun": "^1.3.10",
       "@types/prompts": "^2.4.9",
-      typescript: "^5.7.0"
+      "@types/three": "^0.183.1",
+      typescript: "^5.7.0",
+      vite: "^7.3.1"
     }
   };
 });
@@ -10033,7 +10035,11 @@ function writeRegistryItem(item, outputDir, version, cwd = process.cwd()) {
   for (const file of item.files) {
     const dest = join2(itemDir, file.path);
     mkdirSync(dirname(dest), { recursive: true });
-    writeFileSync2(dest, file.content, "utf-8");
+    if (file.encoding === "base64") {
+      writeFileSync2(dest, Buffer.from(file.content, "base64"));
+    } else {
+      writeFileSync2(dest, file.content, "utf-8");
+    }
     written.push(dest);
   }
   const stampPath = join2(itemDir, VERSION_STAMP_FILE);
@@ -10041,7 +10047,7 @@ function writeRegistryItem(item, outputDir, version, cwd = process.cwd()) {
   return written;
 }
 
-// src/cli/utils/packageManager.ts
+// src/cli/utils/package-manager.ts
 import { existsSync as existsSync2 } from "fs";
 import { join as join3 } from "path";
 import { execSync } from "child_process";
@@ -10113,16 +10119,22 @@ Done!`) + ` Added ${items.length} function(s) to ${config.outputDir}`);
 }
 
 // src/cli/commands/create.ts
-var import_prompts = __toESM(require_prompts3(), 1);
-import { existsSync as existsSync4, readFileSync as readFileSync3, writeFileSync as writeFileSync3, mkdirSync as mkdirSync2 } from "fs";
-import { join as join5, dirname as dirname3 } from "path";
+var import_prompts2 = __toESM(require_prompts3(), 1);
+import { existsSync as existsSync5, readFileSync as readFileSync4, writeFileSync as writeFileSync4, mkdirSync as mkdirSync2, rmSync } from "fs";
+import { join as join6, dirname as dirname3 } from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import { execSync as execSync2 } from "child_process";
 init_config();
-var import_picocolors2 = __toESM(require_picocolors(), 1);
+var import_picocolors3 = __toESM(require_picocolors(), 1);
+
+// src/cli/utils/init-project.ts
+var import_prompts = __toESM(require_prompts3(), 1);
+import { existsSync as existsSync4, readFileSync as readFileSync3, writeFileSync as writeFileSync3 } from "fs";
+import { join as join5 } from "path";
 init_config();
+var import_picocolors2 = __toESM(require_picocolors(), 1);
 
-// src/cli/utils/ownPkg.ts
+// src/cli/utils/own-pkg.ts
 import { readFileSync as readFileSync2, existsSync as existsSync3 } from "fs";
 import { join as join4, dirname as dirname2 } from "path";
 import { fileURLToPath } from "url";
@@ -10137,17 +10149,73 @@ function findPkg(dir) {
 }
 var __dirname2 = dirname2(fileURLToPath(import.meta.url));
 var ownPkg = JSON.parse(readFileSync2(findPkg(__dirname2), "utf-8"));
-var ownPkg_default = ownPkg;
+var own_pkg_default = ownPkg;
+
+// src/cli/utils/init-project.ts
+var THREE_VERSION = (own_pkg_default.devDependencies?.["@types/three"]).replace(/^\^|~/, "");
+async function initProject(cwd) {
+  let config;
+  if (configExists(cwd)) {
+    config = readConfig(cwd);
+    console.log(import_picocolors2.default.dim("3dvf.json already exists, skipping config prompt"));
+  } else {
+    const answers = await import_prompts.default([
+      {
+        type: "text",
+        name: "outputDir",
+        message: "Where should functions be installed?",
+        initial: DEFAULT_CONFIG.outputDir
+      }
+    ], { onCancel: () => process.exit(1) });
+    config = {
+      outputDir: answers.outputDir,
+      registry: DEFAULT_CONFIG.registry,
+      typescript: true
+    };
+    writeConfig(config, cwd);
+    console.log(import_picocolors2.default.green("✓") + " Created 3dvf.json");
+    console.log(import_picocolors2.default.dim(`  outputDir: ${config.outputDir}`));
+  }
+  const spinner = ora(`Installing three@${THREE_VERSION}...`).start();
+  try {
+    installDeps([`three@${THREE_VERSION}`], [`@types/three@${THREE_VERSION}`], cwd);
+    spinner.succeed(`Installed three@${THREE_VERSION}`);
+  } catch (err) {
+    spinner.fail("Failed to install three");
+    console.error(import_picocolors2.default.red(err.message));
+    process.exit(1);
+  }
+  const tsconfigPath = join5(cwd, "tsconfig.json");
+  if (existsSync4(tsconfigPath)) {
+    const raw = readFileSync3(tsconfigPath, "utf-8");
+    const stripped = raw.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "");
+    const tsconfig = JSON.parse(stripped);
+    tsconfig.compilerOptions ??= {};
+    tsconfig.compilerOptions.paths = {
+      ...tsconfig.compilerOptions.paths,
+      "@3dvf/*": [`./${config.outputDir}/*`]
+    };
+    tsconfig.compilerOptions.typeRoots = [
+      "node_modules",
+      "node_modules/@types"
+    ];
+    const tsconfigJson = JSON.stringify(tsconfig, null, 2).replace(/"typeRoots"/, `// Needed to get types from @types/three subfolders https://stackoverflow.com/a/78599968 & https://github.com/microsoft/TypeScript/issues/54629#issuecomment-1589593147
+    "typeRoots"`);
+    writeFileSync3(tsconfigPath, tsconfigJson + `
+`, "utf-8");
+    console.log(import_picocolors2.default.green("✓") + " Updated tsconfig.json");
+  }
+  return config;
+}
 
 // src/cli/commands/create.ts
-var THREE_VERSION = (ownPkg_default.dependencies?.["@types/three"]).replace(/^\^|~/, "");
 var __dirname3 = dirname3(fileURLToPath2(import.meta.url));
-var TEMPLATES_DIR = join5(__dirname3, "./templates/create");
+var TEMPLATES_DIR = join6(__dirname3, "./templates/create");
 function readTemplate(file) {
-  return readFileSync3(join5(TEMPLATES_DIR, file), "utf-8");
+  return readFileSync4(join6(TEMPLATES_DIR, file), "utf-8");
 }
-async function createCommand2(projectName) {
-  const answers = await import_prompts.default([
+async function createCommand2(projectName, { cwd = process.cwd() } = {}) {
+  const answers = await import_prompts2.default([
     {
       type: projectName ? null : "text",
       name: "name",
@@ -10157,44 +10225,45 @@ async function createCommand2(projectName) {
     }
   ], { onCancel: () => process.exit(1) });
   const name = projectName ?? answers.name;
-  const targetDir = join5(process.cwd(), name);
-  if (existsSync4(targetDir)) {
-    console.error(import_picocolors2.default.red(`Directory "${name}" already exists.`));
+  const targetDir = join6(cwd, name);
+  if (existsSync5(targetDir)) {
+    console.error(import_picocolors3.default.red(`Directory "${name}" already exists.`));
     process.exit(1);
   }
+  function cleanup() {
+    if (existsSync5(targetDir)) {
+      rmSync(targetDir, { recursive: true, force: true });
+      console.error(import_picocolors3.default.dim(`Removed ${name}/`));
+    }
+  }
   const scaffoldSpinner = ora("Scaffolding Vite project...").start();
   try {
     execSync2(`npm create vite@latest ${name} -- --template vanilla-ts`, {
+      cwd,
       stdio: "pipe"
     });
     scaffoldSpinner.succeed("Scaffolded Vite project");
   } catch (err) {
     scaffoldSpinner.fail("Failed to scaffold Vite project");
-    console.error(import_picocolors2.default.red(err.message));
+    console.error(import_picocolors3.default.red(err.message));
+    cleanup();
     process.exit(1);
   }
-  const config = {
-    outputDir: DEFAULT_CONFIG.outputDir,
-    registry: DEFAULT_CONFIG.registry,
-    typescript: true
-  };
-  writeConfig(config, targetDir);
-  console.log(import_picocolors2.default.green("✓") + " Created 3dvf.json");
-  const depsSpinner = ora(`Installing three@${THREE_VERSION}...`).start();
+  let config;
   try {
-    installDeps([`three@${THREE_VERSION}`], [`@types/three@${THREE_VERSION}`], targetDir);
-    depsSpinner.succeed(`Installed three@${THREE_VERSION}`);
+    config = await initProject(targetDir);
   } catch (err) {
-    depsSpinner.fail("Failed to install three");
-    console.error(import_picocolors2.default.red(err.message));
+    console.error(import_picocolors3.default.red(err.message));
+    cleanup();
     process.exit(1);
   }
-  const registrySpinner = ora("Adding get-webgpu-viewer...").start();
+  const registrySpinner = ora("Adding create-viewer...").start();
   let tree;
   try {
-    tree = await resolveTree(["get-webgpu-viewer"], config.registry);
+    tree = await resolveTree(["create-viewer"], config.registry);
   } catch (err) {
     registrySpinner.fail(err.message);
+    cleanup();
     process.exit(1);
     return;
   }
@@ -10206,85 +10275,44 @@ async function createCommand2(projectName) {
   if (deps.length || devDeps.length) {
     installDeps(deps, devDeps, targetDir);
   }
-  registrySpinner.succeed("Added get-webgpu-viewer");
+  registrySpinner.succeed("Added create-viewer");
   const pm = detectPackageManager(targetDir);
   const run = pm === "npm" ? "npm run" : pm;
-  writeFileSync3(join5(targetDir, "index.html"), readTemplate("index.html").replace("__PROJECT_NAME__", name), "utf-8");
-  console.log(import_picocolors2.default.green("✓") + " Created index.html");
-  mkdirSync2(join5(targetDir, "src"), { recursive: true });
-  writeFileSync3(join5(targetDir, "src", "main.ts"), readTemplate("main.ts"), "utf-8");
-  console.log(import_picocolors2.default.green("✓") + " Created src/main.ts");
-  writeFileSync3(join5(targetDir, "README.md"), readTemplate("README.md").replace("__PROJECT_NAME__", name).replace("__DEV_CMD__", `${run} dev`), "utf-8");
-  console.log(import_picocolors2.default.green("✓") + " Created README.md");
+  writeFileSync4(join6(targetDir, "vite.config.ts"), readTemplate("vite.config.ts").replace("__OUTPUT_DIR__", config.outputDir), "utf-8");
+  installDeps([], ["@types/node"], targetDir);
+  console.log(import_picocolors3.default.green("✓") + " Created vite.config.ts");
+  writeFileSync4(join6(targetDir, "index.html"), readTemplate("index.html").replace("__PROJECT_NAME__", name), "utf-8");
+  console.log(import_picocolors3.default.green("✓") + " Created index.html");
+  mkdirSync2(join6(targetDir, "src"), { recursive: true });
+  writeFileSync4(join6(targetDir, "src", "main.ts"), readTemplate("main.ts"), "utf-8");
+  console.log(import_picocolors3.default.green("✓") + " Created src/main.ts");
+  writeFileSync4(join6(targetDir, "README.md"), readTemplate("README.md").replace("__PROJECT_NAME__", name).replace("__DEV_CMD__", `${run} dev`), "utf-8");
+  console.log(import_picocolors3.default.green("✓") + " Created README.md");
   console.log(`
-${import_picocolors2.default.green("✓")} Created ${import_picocolors2.default.bold(name)}
+${import_picocolors3.default.green("✓")} Created ${import_picocolors3.default.bold(name)}
 
-${import_picocolors2.default.bold("Next steps:")}
+${import_picocolors3.default.bold("Next steps:")}
 
-  ${import_picocolors2.default.cyan(`cd ${name}`)}
-  ${import_picocolors2.default.cyan(`${run} dev`)}
+  ${import_picocolors3.default.cyan(`cd ${name}`)}
+  ${import_picocolors3.default.cyan(`${run} dev`)}
 `);
 }
 
 // src/cli/commands/init.ts
-var import_prompts2 = __toESM(require_prompts3(), 1);
-import { existsSync as existsSync5 } from "fs";
-import { join as join6 } from "path";
-init_config();
-var import_picocolors3 = __toESM(require_picocolors(), 1);
-var THREE_VERSION2 = (ownPkg_default.dependencies?.["@types/three"]).replace(/^\^|~/, "");
+var import_picocolors4 = __toESM(require_picocolors(), 1);
+import { existsSync as existsSync6 } from "fs";
+import { join as join7 } from "path";
 async function initCommand() {
-  if (!existsSync5(join6(process.cwd(), "package.json"))) {
-    console.error(import_picocolors3.default.red("No package.json found. Run `init` from the root of your project."));
-    process.exit(1);
-  }
-  if (configExists()) {
-    console.log(import_picocolors3.default.yellow("3dvf.json already exists. Skipping init."));
-    return;
-  }
-  const answers = await import_prompts2.default([
-    {
-      type: "text",
-      name: "outputDir",
-      message: "Where should functions be installed?",
-      initial: DEFAULT_CONFIG.outputDir
-    },
-    {
-      type: "toggle",
-      name: "typescript",
-      message: "Use TypeScript?",
-      initial: true,
-      active: "yes",
-      inactive: "no"
-    }
-  ]);
-  if (answers.outputDir === undefined) {
-    console.log(import_picocolors3.default.red("Cancelled."));
-    process.exit(1);
-  }
-  const config = {
-    outputDir: answers.outputDir,
-    registry: DEFAULT_CONFIG.registry,
-    typescript: answers.typescript
-  };
-  writeConfig(config);
-  console.log(import_picocolors3.default.green("✓") + " Created 3dvf.json");
-  console.log(import_picocolors3.default.dim(`  outputDir: ${config.outputDir}`));
-  const spinner = ora(`Installing three@${THREE_VERSION2}...`).start();
-  try {
-    const devDeps = answers.typescript ? [`@types/three@${THREE_VERSION2}`] : [];
-    installDeps([`three@${THREE_VERSION2}`], devDeps);
-    spinner.succeed(`Installed three@${THREE_VERSION2}`);
-  } catch (err) {
-    spinner.fail("Failed to install three");
-    console.error(import_picocolors3.default.red(err.message));
+  if (!existsSync6(join7(process.cwd(), "package.json"))) {
+    console.error(import_picocolors4.default.red("No package.json found. Run `init` from the root of your project."));
     process.exit(1);
   }
+  await initProject(process.cwd());
 }
 
 // src/cli/commands/list.ts
 init_config();
-var import_picocolors4 = __toESM(require_picocolors(), 1);
+var import_picocolors5 = __toESM(require_picocolors(), 1);
 async function listCommand() {
   let config;
   try {
@@ -10297,11 +10325,11 @@ async function listCommand() {
   try {
     const index = await fetchRegistryIndex(config.registry);
     spinner.stop();
-    console.log(import_picocolors4.default.bold(`
+    console.log(import_picocolors5.default.bold(`
 Available functions (${index.items.length}):
 `));
     for (const item of index.items) {
-      console.log(`  ${import_picocolors4.default.cyan(item.name)}`);
+      console.log(`  ${import_picocolors5.default.cyan(item)}`);
     }
     console.log();
   } catch (err) {

package/dist/cli/templates/create/README.md

@@ -1,6 +1,6 @@
 # __PROJECT_NAME__
 
-A Three.js WebGPU project scaffolded with [3dvf](https://github.com/s0rt/3dvf).
+A Three.js project scaffolded with [3dvf](https://github.com/s0rt/3dvf).
 
 ## Getting started
 

package/dist/cli/templates/create/main.ts

@@ -1,29 +1,15 @@
 import {
-  Scene,
-  Color,
-  PerspectiveCamera,
   BoxGeometry,
   MeshPhongMaterial,
   Mesh,
   AmbientLight,
   DirectionalLight,
 } from "three";
-import { getWebGPUViewer } from "./lib/3dvf/get-webgpu-viewer";
+import { createViewer } from "@3dvf/create-viewer/create-viewer";
 
 const container = document.getElementById("app") as HTMLElement;
 
-const scene = new Scene();
-scene.background = new Color(0x1a1a2e);
-
-const camera = new PerspectiveCamera(
-  75,
-  container.clientWidth / container.clientHeight,
-  0.1,
-  1000
-);
-camera.position.z = 3;
-
-const { dispose, renderer } = getWebGPUViewer(container);
+const { scene, dispose, camera, launch } = createViewer(container);
 
 const geometry = new BoxGeometry(1.2, 1.2, 1.2);
 const material = new MeshPhongMaterial({ color: 0x4fc3f7 });
@@ -37,18 +23,9 @@ const directionalLight = new DirectionalLight(0xffffff, 1);
 directionalLight.position.set(5, 5, 5);
 scene.add(directionalLight);
 
-function animate() {
-  cube.rotation.x += 0.005;
-  cube.rotation.y += 0.01;
-  renderer.render(scene, camera);
-}
-
-renderer.setAnimationLoop(animate);
+camera.position.set(4, 4, 4);
 
-window.addEventListener("resize", () => {
-  camera.aspect = container.clientWidth / container.clientHeight;
-  camera.updateProjectionMatrix();
-});
+launch();
 
 // HMR cleanup
 if (import.meta.hot) {

package/dist/cli/templates/create/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, type Plugin } from "vite";
+
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+import { readFileSync } from "fs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+function glslPlugin(): Plugin {
+  return {
+    name: "glsl-raw",
+    load(id) {
+      if (id.endsWith(".glsl")) {
+        const source = readFileSync(id, "utf-8");
+        return `export default ${JSON.stringify(source)};`;
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [glslPlugin()],
+  resolve: {
+    alias: {
+      "@3dvf": join(__dirname, "./__OUTPUT_DIR__"),
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s0rt/3dvf",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "shadcn-style Three.js function library CLI",
   "type": "module",
   "bin": {
@@ -21,14 +21,16 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@types/three": "^0.183.1",
     "commander": "^12.1.0",
     "ora": "^8.1.1",
     "picocolors": "^1.1.1",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
+    "@types/bun": "^1.3.10",
     "@types/prompts": "^2.4.9",
-    "typescript": "^5.7.0"
+    "@types/three": "^0.183.1",
+    "typescript": "^5.7.0",
+    "vite": "^7.3.1"
   }
 }

package/readme.md

@@ -0,0 +1,55 @@
+## dev
+
+### link local cli
+
+`bun link`
+
+### run the cli
+
+`bun run dev`
+
+### run the registry
+
+`bun run dev:registry`
+
+Using `bunx 3dvf <command>` will now use the local cli.
+
+
+## troubleshotting
+
+### .glsl & vite
+
+Using the `create` command will already apply this fix.
+
+By default vite won't import .glsl files as we want it to, resulting in parsing errors.
+
+You can either prepend import path with `?raw`, or, to avoid touching the 3dvf files, use the following plugin :
+
+```vite.config.ts
+function glslPlugin(): Plugin {
+	return {
+		name: 'glsl-raw',
+		load(id) {
+			if (id.endsWith('.glsl')) {
+				const source = readFileSync(id, 'utf-8');
+				return `export default ${JSON.stringify(source)};`;
+			}
+		}
+	};
+}
+```
+
+And add it
+```vite.config.ts
+{
+  plugins: [glslPlugin]
+}
+```
+
+### .dds
+
+```vite.config.ts
+{
+	assetsInclude: ['**/*.dds']
+}
+```