vue-feat-cli 26.9.0

package/dist/templates/component/Component.vue.hbs

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+interface Props {
+  // TODO: define component props
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="{{name}}">
+    <!-- {{Name}} -->
+  </div>
+</template>
+
+<style scoped>
+.{{name}} {
+}
+</style>

package/dist/templates/composable/composable.ts.hbs

@@ -0,0 +1,22 @@
+import { ref, computed } from 'vue'
+
+export function use{{Name}}() {
+  const state = ref<unknown>(null)
+
+  const isReady = computed(() => state.value !== null)
+
+  function set{{Name}}(value: unknown) {
+    state.value = value
+  }
+
+  function reset() {
+    state.value = null
+  }
+
+  return {
+    state,
+    isReady,
+    set{{Name}},
+    reset,
+  }
+}

package/dist/templates/feature/View.vue.hbs

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { use{{Name}}Page } from '../composables/use{{Name}}Page'
+
+const { items, loading, error, load } = use{{Name}}Page()
+
+onMounted(load)
+</script>
+
+<template>
+  <section class="{{name}}-view">
+    <h1>{{Name}}</h1>
+
+    <p v-if="loading">Loading...</p>
+    <p v-else-if="error">\{{ error }}</p>
+
+    <ul v-else>
+      <li v-for="item in items" :key="item.id">
+        \{{ item.id }}
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+.{{name}}-view {
+  padding: 1rem;
+}
+</style>

package/dist/templates/feature/composable.ts.hbs

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import { {{nameCamel}}Service } from '../services/{{name}}.service'
+import type { {{Name}} } from '../types/{{name}}.types'
+
+export function use{{Name}}() {
+  const items = ref<{{Name}}[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchAll() {
+    loading.value = true
+    error.value = null
+    try {
+      items.value = await {{nameCamel}}Service.getAll()
+    } catch (e) {
+      error.value = (e as Error).message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    items,
+    loading,
+    error,
+    fetchAll,
+  }
+}

package/dist/templates/feature/index.ts.hbs

@@ -0,0 +1,8 @@
+export * from './services/{{name}}.service'
+export * from './composables/use{{Name}}Service'
+export * from './composables/use{{Name}}Page'
+export * from './stores/{{name}}.store'
+export * from './types/{{name}}.types'
+{{#if usesVueRouter}}
+export * from './routes'
+{{/if}}

package/dist/templates/feature/page-composable-crud.ts.hbs

@@ -0,0 +1,45 @@
+import { ref } from 'vue'
+import { use{{Name}}Service } from './use{{Name}}Service'
+
+export function use{{Name}}Page() {
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const { items, selected, fetchAll, fetchById, create, update, remove } = use{{Name}}Service()
+
+  async function load() {
+    loading.value = true
+    error.value = null
+    try {
+      await fetchAll()
+    } catch (e) {
+      error.value = (e as Error).message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadById(id: string) {
+    loading.value = true
+    error.value = null
+    try {
+      await fetchById(id)
+    } catch (e) {
+      error.value = (e as Error).message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    items,
+    selected,
+    loading,
+    error,
+    load,
+    loadById,
+    create,
+    update,
+    remove,
+  }
+}

package/dist/templates/feature/page-composable.ts.hbs

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import { use{{Name}}Service } from './use{{Name}}Service'
+
+export function use{{Name}}Page() {
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const { items, fetchAll } = use{{Name}}Service()
+
+  async function load() {
+    loading.value = true
+    error.value = null
+    try {
+      await fetchAll()
+    } catch (e) {
+      error.value = (e as Error).message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    items,
+    loading,
+    error,
+    load,
+  }
+}

package/dist/templates/feature/routes.ts.hbs

@@ -0,0 +1,9 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export const {{nameCamel}}Routes: RouteRecordRaw[] = [
+  {
+    path: '/{{name}}',
+    name: '{{name}}',
+    component: () => import('./views/{{Name}}View.vue'),
+  },
+]

package/dist/templates/feature/service-composable-crud.ts.hbs

@@ -0,0 +1,44 @@
+import { ref } from 'vue'
+import { {{nameCamel}}Service } from '../services/{{name}}.service'
+import type { {{Name}}, Create{{Name}}Dto, Update{{Name}}Dto } from '../types/{{name}}.types'
+
+export function use{{Name}}Service() {
+  const items = ref<{{Name}}[]>([])
+  const selected = ref<{{Name}} | null>(null)
+
+  async function fetchAll() {
+    items.value = await {{nameCamel}}Service.getAll()
+  }
+
+  async function fetchById(id: string) {
+    selected.value = await {{nameCamel}}Service.getById(id)
+  }
+
+  async function create(payload: Create{{Name}}Dto) {
+    const created = await {{nameCamel}}Service.create(payload)
+    items.value.push(created)
+    return created
+  }
+
+  async function update(id: string, payload: Update{{Name}}Dto) {
+    const updated = await {{nameCamel}}Service.update(id, payload)
+    const index = items.value.findIndex((i) => i.id === id)
+    if (index !== -1) items.value[index] = updated
+    return updated
+  }
+
+  async function remove(id: string) {
+    await {{nameCamel}}Service.remove(id)
+    items.value = items.value.filter((i) => i.id !== id)
+  }
+
+  return {
+    items,
+    selected,
+    fetchAll,
+    fetchById,
+    create,
+    update,
+    remove,
+  }
+}

package/dist/templates/feature/service-composable.ts.hbs

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { {{nameCamel}}Service } from '../services/{{name}}.service'
+import type { {{Name}} } from '../types/{{name}}.types'
+
+export function use{{Name}}Service() {
+  const items = ref<{{Name}}[]>([])
+
+  async function fetchAll() {
+    items.value = await {{nameCamel}}Service.getAll()
+  }
+
+  return {
+    items,
+    fetchAll,
+  }
+}

package/dist/templates/feature/service-crud.ts.hbs

@@ -0,0 +1,26 @@
+import { httpClient } from '{{alias}}/shared/http/client'
+import type { {{Name}}, Create{{Name}}Dto, Update{{Name}}Dto } from '../types/{{name}}.types'
+
+const RESOURCE = '/{{name}}'
+
+export const {{nameCamel}}Service = {
+  async getAll(): Promise<{{Name}}[]> {
+    return httpClient.get<{{Name}}[]>(RESOURCE)
+  },
+
+  async getById(id: string): Promise<{{Name}}> {
+    return httpClient.get<{{Name}}>(`${RESOURCE}/${id}`)
+  },
+
+  async create(payload: Create{{Name}}Dto): Promise<{{Name}}> {
+    return httpClient.post<{{Name}}>(RESOURCE, payload)
+  },
+
+  async update(id: string, payload: Update{{Name}}Dto): Promise<{{Name}}> {
+    return httpClient.put<{{Name}}>(`${RESOURCE}/${id}`, payload)
+  },
+
+  async remove(id: string): Promise<void> {
+    return httpClient.delete<void>(`${RESOURCE}/${id}`)
+  },
+}

package/dist/templates/feature/service.ts.hbs

@@ -0,0 +1,15 @@
+import { httpClient } from '{{alias}}/shared/http/client'
+import type { {{Name}} } from '../types/{{name}}.types'
+
+const RESOURCE = '/{{name}}'
+
+export const {{nameCamel}}Service = {
+  async getAll(): Promise<{{Name}}[]> {
+    return httpClient.get<{{Name}}[]>(RESOURCE)
+  },
+
+  // Example with query params:
+  // async search(query: string): Promise<{{Name}}[]> {
+  //   return httpClient.get<{{Name}}[]>(RESOURCE, { params: { q: query } })
+  // },
+}

package/dist/templates/feature/store-composable.ts.hbs

@@ -0,0 +1,28 @@
+import { reactive, readonly } from 'vue'
+import type { {{Name}} } from '../types/{{name}}.types'
+
+interface {{Name}}State {
+  items: {{Name}}[]
+  selected: {{Name}} | null
+}
+
+const state = reactive<{{Name}}State>({
+  items: [],
+  selected: null,
+})
+
+export function use{{Name}}Store() {
+  function setItems(items: {{Name}}[]) {
+    state.items = items
+  }
+
+  function select(item: {{Name}}) {
+    state.selected = item
+  }
+
+  return {
+    state: readonly(state),
+    setItems,
+    select,
+  }
+}

package/dist/templates/feature/store.ts.hbs

@@ -0,0 +1,26 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { {{Name}} } from '../types/{{name}}.types'
+
+export const use{{Name}}Store = defineStore('{{nameCamel}}', () => {
+  const items = ref<{{Name}}[]>([])
+  const selected = ref<{{Name}} | null>(null)
+
+  const count = computed(() => items.value.length)
+
+  function setItems(newItems: {{Name}}[]) {
+    items.value = newItems
+  }
+
+  function select(item: {{Name}}) {
+    selected.value = item
+  }
+
+  return {
+    items,
+    selected,
+    count,
+    setItems,
+    select,
+  }
+})

package/dist/templates/feature/types-crud.ts.hbs

@@ -0,0 +1,7 @@
+export interface {{Name}} {
+  id: string
+  // TODO: add domain fields
+}
+
+export type Create{{Name}}Dto = Omit<{{Name}}, 'id'>
+export type Update{{Name}}Dto = Partial<Create{{Name}}Dto>

package/dist/templates/feature/types.ts.hbs

@@ -0,0 +1,4 @@
+export interface {{Name}} {
+  id: string
+  // TODO: add domain fields
+}

package/dist/templates/shared/http-client-axios.ts.hbs

@@ -0,0 +1,25 @@
+import axios from 'axios'
+
+const instance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL ?? '',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+export const httpClient = {
+  get: async <T>(url: string, config?: Parameters<typeof instance.get>[1]) =>
+    (await instance.get<T>(url, config)).data,
+
+  post: async <T>(url: string, body?: unknown, config?: Parameters<typeof instance.post>[2]) =>
+    (await instance.post<T>(url, body, config)).data,
+
+  put: async <T>(url: string, body?: unknown, config?: Parameters<typeof instance.put>[2]) =>
+    (await instance.put<T>(url, body, config)).data,
+
+  patch: async <T>(url: string, body?: unknown, config?: Parameters<typeof instance.patch>[2]) =>
+    (await instance.patch<T>(url, body, config)).data,
+
+  delete: async <T>(url: string, config?: Parameters<typeof instance.delete>[1]) =>
+    (await instance.delete<T>(url, config)).data,
+}

package/dist/templates/shared/http-client-fetch.ts.hbs

@@ -0,0 +1,58 @@
+const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? ''
+
+interface RequestOptions extends RequestInit {
+  params?: Record<string, string | number | boolean>
+}
+
+function buildUrl(path: string, params?: RequestOptions['params']) {
+  const full = path.startsWith('http') ? path : `${BASE_URL}${path}`
+  if (!params) return full
+
+  // Avoid `new URL()` here: it throws on a relative `full` (e.g. "/job") when
+  // BASE_URL is unset, which is the default right after scaffolding.
+  const query = new URLSearchParams(
+    Object.entries(params).map(([key, value]) => [key, String(value)]),
+  ).toString()
+
+  if (!query) return full
+  return `${full}${full.includes('?') ? '&' : '?'}${query}`
+}
+
+async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const { params, ...init } = options
+
+  const response = await fetch(buildUrl(path, params), {
+    headers: {
+      'Content-Type': 'application/json',
+      ...init.headers,
+    },
+    ...init,
+  })
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+  }
+
+  if (response.status === 204) {
+    return undefined as T
+  }
+
+  return response.json() as Promise<T>
+}
+
+export const httpClient = {
+  get: <T>(path: string, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'GET' }),
+
+  post: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'POST', body: JSON.stringify(body) }),
+
+  put: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'PUT', body: JSON.stringify(body) }),
+
+  patch: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'PATCH', body: JSON.stringify(body) }),
+
+  delete: <T>(path: string, options?: RequestOptions) =>
+    request<T>(path, { ...options, method: 'DELETE' }),
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "vue-feat-cli",
+  "version": "26.9.0",
+  "description": "",
+  "main": "./dist/cli.js",
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "dev": "tsx src/cli.ts",
+    "build": "tsup src/cli.ts --format esm --dts",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "bin": {
+    "vf": "bin/vf.js"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.5.1",
+    "cac": "^7.0.0",
+    "fs-extra": "^11.3.5",
+    "handlebars": "^4.7.9",
+    "prettier": "^3.8.4"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.9.3",
+    "@vitest/coverage-v8": "^5.0.0",
+    "tsup": "^8.5.1",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.3",
+    "vitest": "^5.0.0"
+  }
+}