experimental add-on-developer

Author: jherr

.gitignore

@@ -5,6 +5,8 @@ my-app
 .DS_Store
 **/node_modules
 **/dist
+.vinxi
+**/bin-dist
 
 .vscode
 

cli/add-on-developer/.cursorrules

@@ -0,0 +1,7 @@
+# shadcn instructions
+
+Use the latest version of Shadcn to install new components, like this command to add a button component:
+
+```bash
+pnpx shadcn@latest add button
+```

cli/add-on-developer/TESTING.md

@@ -0,0 +1,9 @@
+Run `pnpm build` at the root.
+
+Run `pnpm build:bin` to build the `bin-dist` directory.
+
+In the `examples/mui-add-on` directory run:
+
+```bash
+node ../../cli/add-on-developer/bin-dist/bin/add-on-developer.js
+```

cli/add-on-developer/app.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from '@tanstack/react-start/config'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  tsr: {
+    appDirectory: 'src',
+  },
+  vite: {
+    forceOptimizeDeps: true,
+    plugins: [
+      // this is the plugin that enables path aliases
+      viteTsConfigPaths({
+        projects: ['./tsconfig.json'],
+      }),
+      tailwindcss(),
+    ],
+    optimizeDeps: {
+      exclude: [],
+    },
+  },
+})

cli/add-on-developer/bin/add-on-developer.ts

@@ -0,0 +1,20 @@
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const projectPath = process.cwd()
+
+process.env.PROJECT_PATH = projectPath
+
+const configPath = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  '../../app.config.js',
+)
+
+const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+
+process.chdir(developerPath)
+
+import(configPath).then(async (config) => {
+  const out = await config.default
+  await out.dev()
+})

cli/add-on-developer/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

cli/add-on-developer/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tanstack/add-on-developer",
+  "private": true,
+  "type": "module",
+  "bin": {
+    "add-on-developer": "./dist/add-on-developer.js"
+  },
+  "main": "./bin-dist/bin/add-on-developer.js",
+  "scripts": {
+    "build:bin": "tsc -p tsconfig.bin.json",
+    "dev": "vinxi dev"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/cta-engine": "workspace:*",
+    "@tanstack/react-query": "^5.66.5",
+    "@tanstack/react-query-devtools": "^5.66.5",
+    "@tanstack/react-router": "^1.114.3",
+    "@tanstack/react-router-devtools": "^1.114.3",
+    "@tanstack/react-router-with-query": "^1.114.3",
+    "@tanstack/react-start": "^1.114.3",
+    "@tanstack/router-plugin": "^1.114.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "execa": "^9.5.2",
+    "lucide-react": "^0.476.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.6",
+    "tailwindcss-animate": "^1.0.7",
+    "vinxi": "^0.5.3",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.13.14",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.1.0",
+    "vitest": "^3.0.5",
+    "web-vitals": "^4.2.4"
+  }
+}