solid-vue-cli 0.1.0

package/addons/auth.js

@@ -0,0 +1,87 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installAuth(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing basic session auth (h3 useSession + bcryptjs)...'))
+
+  try {
+    execSync('npm install bcryptjs', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install bcryptjs:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  const isTs = fs.existsSync(path.join(cwd, 'tsconfig.json'))
+  const ext = isTs ? 'ts' : 'js'
+
+  const authDir = path.join(cwd, 'src', 'server', 'api', 'auth')
+  if (!fs.existsSync(authDir)) fs.mkdirSync(authDir, { recursive: true })
+
+  fs.writeFileSync(path.join(authDir, `register.${ext}`), `import { useSession, readBody } from 'solid-vue/server'
+import bcrypt from 'bcryptjs'
+
+// TODO: Ganti ku query database Aa sabenerna
+async function createUser(email, passwordHash) {
+  throw new Error('createUser() acan diimplementasikeun — sambungkeun ka database Aa')
+}
+
+export default async function (event) {
+  const { email, password } = await readBody(event)
+  const passwordHash = await bcrypt.hash(password, 10)
+  const user = await createUser(email, passwordHash)
+
+  const session = await useSession(event, {
+    password: process.env.SESSION_SECRET, // minimal 32 karakter acak
+  })
+  await session.update({ userId: user.id })
+
+  return { status: 'ok' }
+}
+`)
+
+  fs.writeFileSync(path.join(authDir, `login.${ext}`), `import { useSession, readBody } from 'solid-vue/server'
+import bcrypt from 'bcryptjs'
+
+// TODO: Ganti ku query database Aa sabenerna
+async function findUserByEmail(email) {
+  throw new Error('findUserByEmail() acan diimplementasikeun — sambungkeun ka database Aa')
+}
+
+export default async function (event) {
+  const { email, password } = await readBody(event)
+  const user = await findUserByEmail(email)
+
+  if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
+    event.node.res.statusCode = 401
+    return { status: 'error', message: 'Email atawa password salah' }
+  }
+
+  const session = await useSession(event, {
+    password: process.env.SESSION_SECRET,
+  })
+  await session.update({ userId: user.id })
+
+  return { status: 'ok' }
+}
+`)
+
+  fs.writeFileSync(path.join(authDir, `logout.${ext}`), `import { useSession } from 'solid-vue/server'
+
+export default async function (event) {
+  const session = await useSession(event, {
+    password: process.env.SESSION_SECRET,
+  })
+  await session.clear()
+
+  return { status: 'ok' }
+}
+`)
+
+  console.log(chalk.green.bold('\n✅ Basic auth scaffolding installed!'))
+  console.log(chalk.yellow('⚠️  Butuh ditambihan manual sateuacan dipaké:'))
+  console.log(chalk.white('   1. Set SESSION_SECRET di .env (minimal 32 karakter acak)'))
+  console.log(chalk.white('   2. Implementasikeun createUser() & findUserByEmail() luyu database Aa'))
+}

package/addons/i18n.js

@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installI18n(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing vue-i18n...'))
+
+  try {
+    execSync('npm install vue-i18n', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install vue-i18n:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  const localesDir = path.join(cwd, 'src', 'locales')
+  if (!fs.existsSync(localesDir)) {
+    fs.mkdirSync(localesDir, { recursive: true })
+    fs.writeFileSync(path.join(localesDir, 'id.json'), JSON.stringify({ hello: 'Halo!' }, null, 2))
+    fs.writeFileSync(path.join(localesDir, 'en.json'), JSON.stringify({ hello: 'Hello!' }, null, 2))
+  }
+
+  console.log(chalk.green.bold('\n✅ vue-i18n installed successfully!'))
+  console.log(chalk.white('💡 Setup di main entry:'))
+  console.log(chalk.cyan('   import { createI18n } from "vue-i18n"'))
+  console.log(chalk.cyan('   import id from "./locales/id.json"'))
+  console.log(chalk.cyan('   import en from "./locales/en.json"'))
+  console.log(chalk.cyan('   const i18n = createI18n({ legacy: false, locale: "id", messages: { id, en } })'))
+  console.log(chalk.cyan('   app.use(i18n)'))
+}

package/addons/index.js

@@ -0,0 +1,25 @@
+import tailwind from './tailwind.js'
+import lucide from './lucide.js'
+import tabler from './tabler.js'
+import vueuse from './vueuse.js'
+import vitest from './vitest.js'
+import veeValidate from './vee-validate.js'
+import unhead from './unhead.js'
+import ofetch from './ofetch.js'
+import i18n from './i18n.js'
+import lint from './lint.js'
+import auth from './auth.js'
+
+export const addons = {
+  tailwind,
+  lucide,
+  tabler,
+  vueuse,
+  vitest,
+  'vee-validate': veeValidate,
+  unhead,
+  ofetch,
+  i18n,
+  lint,
+  auth,
+}

package/addons/lint.js

@@ -0,0 +1,38 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installLint(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing ESLint + Prettier...'))
+
+  try {
+    execSync('npm install -D eslint eslint-plugin-vue @vue/eslint-config-prettier prettier', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install lint packages:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  const eslintConfigPath = path.join(cwd, 'eslint.config.js')
+  if (!fs.existsSync(eslintConfigPath)) {
+    fs.writeFileSync(eslintConfigPath, `import pluginVue from 'eslint-plugin-vue'
+import prettierConfig from '@vue/eslint-config-prettier'
+
+export default [
+  ...pluginVue.configs['flat/recommended'],
+  prettierConfig,
+]
+`)
+  }
+
+  const prettierConfigPath = path.join(cwd, '.prettierrc.json')
+  if (!fs.existsSync(prettierConfigPath)) {
+    fs.writeFileSync(prettierConfigPath, JSON.stringify({ semi: false, singleQuote: true, printWidth: 100 }, null, 2))
+  }
+
+  console.log(chalk.green.bold('\n✅ ESLint + Prettier installed successfully!'))
+  console.log(chalk.white('💡 Run:'))
+  console.log(chalk.cyan('   npx eslint . --fix'))
+  console.log(chalk.cyan('   npx prettier --write .'))
+}

package/addons/lucide.js

@@ -0,0 +1,19 @@
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installLucide(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing Lucide Icons...'))
+
+  try {
+    execSync('npm install @lucide/vue', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install Lucide Icons:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  console.log(chalk.green.bold('\n✅ Lucide Icons installed successfully!'))
+  console.log(chalk.white('💡 Usage in a .vue file:'))
+  console.log(chalk.cyan('   import { Home, User, Settings } from "@lucide/vue"'))
+  console.log(chalk.cyan('   <Home class="text-blue-500 w-6 h-6" />'))
+}

package/addons/ofetch.js

@@ -0,0 +1,19 @@
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installOfetch(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing ofetch...'))
+
+  try {
+    execSync('npm install ofetch', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install ofetch:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  console.log(chalk.green.bold('\n✅ ofetch installed successfully!'))
+  console.log(chalk.white('💡 Usage:'))
+  console.log(chalk.cyan('   import { ofetch } from "ofetch"'))
+  console.log(chalk.cyan('   const data = await ofetch("/api/hello")'))
+}

package/addons/tabler.js

@@ -0,0 +1,19 @@
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installTabler(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing Tabler Icons...'))
+
+  try {
+    execSync('npm install @tabler/icons-vue', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install Tabler Icons:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  console.log(chalk.green.bold('\n✅ Tabler Icons installed successfully!'))
+  console.log(chalk.white('💡 Usage in a .vue file:'))
+  console.log(chalk.cyan('   import { IconHome, IconUser } from "@tabler/icons-vue"'))
+  console.log(chalk.cyan('   <IconHome stroke="2" />'))
+}

package/addons/tailwind.js

@@ -0,0 +1,41 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installTailwind(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing Tailwind CSS (v4) in the Solid-Vue project...'))
+
+  try {
+    execSync('npm install -D tailwindcss @tailwindcss/postcss postcss', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install Tailwind CSS packages:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  const postcssConfigPath = path.join(cwd, 'postcss.config.js')
+  fs.writeFileSync(postcssConfigPath, `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+`)
+
+  const cssDir = path.join(cwd, 'src', 'styles')
+  const cssFile = path.join(cssDir, 'global.css')
+  const tailwindImport = `@import "tailwindcss";\n\n`
+
+  if (!fs.existsSync(cssDir)) fs.mkdirSync(cssDir, { recursive: true })
+
+  if (fs.existsSync(cssFile)) {
+    const currentCss = fs.readFileSync(cssFile, 'utf-8')
+    if (!currentCss.includes('@import "tailwindcss"')) {
+      fs.writeFileSync(cssFile, tailwindImport + currentCss)
+    }
+  } else {
+    fs.writeFileSync(cssFile, tailwindImport)
+  }
+
+  console.log(chalk.green.bold('\n✅ Tailwind CSS v4 has been installed successfully! Let\'s get started! ☕'))
+}

package/addons/unhead.js

@@ -0,0 +1,22 @@
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installUnhead(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing @unhead/vue...'))
+
+  try {
+    execSync('npm install @unhead/vue', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install @unhead/vue:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  console.log(chalk.green.bold('\n✅ @unhead/vue installed successfully!'))
+  console.log(chalk.white('💡 Setup di main entry:'))
+  console.log(chalk.cyan('   import { createHead } from "@unhead/vue/client"'))
+  console.log(chalk.cyan('   app.use(createHead())'))
+  console.log(chalk.white('💡 Usage di .vue file:'))
+  console.log(chalk.cyan('   import { useHead } from "@unhead/vue"'))
+  console.log(chalk.cyan('   useHead({ title: "Judul Halaman" })'))
+}

package/addons/vee-validate.js

@@ -0,0 +1,20 @@
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installVeeValidate(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing VeeValidate + Zod...'))
+
+  try {
+    execSync('npm install vee-validate zod @vee-validate/zod', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install validation packages:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  console.log(chalk.green.bold('\n✅ VeeValidate + Zod installed successfully!'))
+  console.log(chalk.white('💡 Usage in a .vue file:'))
+  console.log(chalk.cyan('   import { useForm } from "vee-validate"'))
+  console.log(chalk.cyan('   import { toTypedSchema } from "@vee-validate/zod"'))
+  console.log(chalk.cyan('   import { z } from "zod"'))
+}

package/addons/vitest.js

@@ -0,0 +1,51 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installVitest(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing Vitest...'))
+
+  try {
+    execSync('npm install -D vitest @vue/test-utils jsdom', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install Vitest:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  const isTs = fs.existsSync(path.join(cwd, 'tsconfig.json'))
+  const ext = isTs ? 'ts' : 'js'
+
+  const vitestConfigPath = path.join(cwd, `vitest.config.${ext}`)
+  if (!fs.existsSync(vitestConfigPath)) {
+    fs.writeFileSync(vitestConfigPath, `import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+})
+`)
+  }
+
+  const testDir = path.join(cwd, 'src', '__tests__')
+  if (!fs.existsSync(testDir)) {
+    fs.mkdirSync(testDir, { recursive: true })
+    fs.writeFileSync(path.join(testDir, `example.test.${ext}`), `import { describe, it, expect } from 'vitest'
+
+describe('example', () => {
+  it('works', () => {
+    expect(1 + 1).toBe(2)
+  })
+})
+`)
+  }
+
+  console.log(chalk.green.bold('\n✅ Vitest installed successfully!'))
+  console.log(chalk.white('💡 Run:'))
+  console.log(chalk.cyan('   npx vitest'))
+}

package/addons/vueuse.js

@@ -0,0 +1,18 @@
+import { execSync } from 'node:child_process'
+import chalk from 'chalk'
+
+export default function installVueUse(cwd) {
+  console.log(chalk.blue.bold('\n🚀 Installing VueUse...'))
+
+  try {
+    execSync('npm install @vueuse/core', { stdio: 'inherit', cwd })
+  } catch (err) {
+    console.error(chalk.red.bold('\n❌ Failed to install VueUse:'))
+    console.error(chalk.red(err.message))
+    return
+  }
+
+  console.log(chalk.green.bold('\n✅ VueUse installed successfully!'))
+  console.log(chalk.white('💡 Usage in a .vue file:'))
+  console.log(chalk.cyan('   import { useLocalStorage, useDebounce } from "@vueuse/core"'))
+}

package/bin/cli.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+import chalk from 'chalk'
+import { addons } from '../addons/index.js'
+
+function addAddon(addonName) {
+  const handler = addons[addonName]
+
+  if (!handler) {
+    console.log(chalk.red(`\n❌ Add-on '${addonName}' is not supported yet by Solid-Vue.`))
+    console.log(chalk.gray(`   Available add-ons: ${Object.keys(addons).join(', ')}`))
+    process.exit(1)
+  }
+
+  handler(process.cwd())
+}
+
+const args = process.argv.slice(2)
+const command = args[0]
+
+if (command === 'add') {
+  const addonName = args[1]
+  if (!addonName) {
+    console.log(chalk.yellow('\n⚠️  Please specify the addon name. Example: npx solid-vue add tailwind'))
+    process.exit(1)
+  }
+  addAddon(addonName)
+} else {
+  console.log(chalk.red(`\n❌ Command '${command}' is not recognized. Supported commands are: 'add <addon-name>'.`))
+  process.exit(1)
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "solid-vue-cli",
+  "version": "0.1.0",
+  "type": "module",
+  "files": ["bin", "addons"],
+  "bin": {
+    "solid-vue": "./bin/cli.js"
+  },
+  "dependencies": {
+    "chalk": "^6.0.0"
+  }
+}