cli: add --pro and --primitive options

cli/commands/init.mjs

@@ -16,6 +16,14 @@ export default defineCommand({
       type: 'positional',
       required: true,
       description: 'Name of the component.'
+    },
+    primitive: {
+      type: 'boolean',
+      description: 'Create a primitive component.'
+    },
+    pro: {
+      type: 'boolean',
+      description: 'Create a pro component.'
     }
   },
   async setup({ args }) {
@@ -28,7 +36,11 @@ export default defineCommand({
     const path = resolve('.')
 
     for (const template of Object.keys(templates)) {
-      const { filename, contents } = templates[template]({ name })
+      const { filename, contents } = templates[template](args)
+      if (!contents) {
+        continue
+      }
+
       const filePath = resolve(path, filename)
 
       if (existsSync(filePath)) {
@@ -42,14 +54,11 @@ export default defineCommand({
     }
 
     const themePath = resolve(path, 'src/theme/index.ts')
-    const themeContent = `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`
+    await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
-    await appendFile(themePath, themeContent)
+    await sortFile(themePath)
 
     const typesPath = resolve(path, 'src/runtime/types/index.d.ts')
-    const typesContent = `export * from '../components/${splitByCase(name).map(p => upperFirst(p)).join('')}.vue'`
+    await appendFile(typesPath, `export * from '../components/${splitByCase(name).map(p => upperFirst(p)).join('')}.vue'`)
-    await appendFile(typesPath, typesContent)
-
-    await sortFile(themePath)
     await sortFile(typesPath)
   }
 })

cli/templates.mjs

@@ -1,12 +1,14 @@
 import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
 
-const playground = ({ name }) => {
+const playground = ({ name, pro }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const kebabName = kebabCase(name)
 
   return {
     filename: `playground/pages/${kebabName}.vue`,
-    contents: `
+    contents: pro
+      ? undefined
+      : `
 <template>
   <div>
     <U${upperName} />
@@ -16,24 +18,65 @@ const playground = ({ name }) => {
   }
 }
 
-const component = ({ name }) => {
+const component = ({ name, primitive, pro }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const camelName = camelCase(name)
   const kebabName = kebabCase(name)
+  const key = pro ? 'uiPro' : 'ui'
+  const path = pro ? 'ui-pro' : 'ui'
 
   return {
     filename: `src/runtime/components/${upperName}.vue`,
-    contents: `
+    contents: primitive
+      ? `
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { PrimitiveProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/${path}/${kebabName}'
+
+const appConfig = _appConfig as AppConfig & { ${key}: { ${camelName}: Partial<typeof theme> } }
+
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${camelName} || {}) })
+
+export interface ${upperName}Props extends Omit<PrimitiveProps, 'asChild'> {
+  class?: any
+  ui?: Partial<typeof ${camelName}.slots>
+}
+
+export interface ${upperName}Slots {
+  default: any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<${upperName}Props>(), { as: 'div' })
+defineSlots<${upperName}Slots>()
+
+const ui = computed(() => tv({ extend: ${camelName}, slots: props.ui })())
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: props.class })">
+    <slot />
+  </Primitive>
+</template>
+`
+      : `
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/${kebabName}'
+import theme from '#build/${path}/${kebabName}'
 
-const appConfig = _appConfig as AppConfig & { ui: { ${camelName}: Partial<typeof theme> } }
+const appConfig = _appConfig as AppConfig & { ${key}: { ${camelName}: Partial<typeof theme> } }
 
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${camelName} || {}) })
 
 type ${upperName}Variants = VariantProps<typeof ${camelName}>
 
@@ -64,7 +107,7 @@ const ui = computed(() => tv({ extend: ${camelName}, slots: props.ui })())
 <template>
   <${upperName}Root v-bind="rootProps" :class="ui.root({ class: props.class })" />
 </template>
-    `
+`
   }
 }
 
@@ -74,17 +117,11 @@ const theme = ({ name }) => {
   return {
     filename: `src/theme/${kebabName}.ts`,
     contents: `
-export default (config: { colors: string[] }) => ({
+export default {
   slots: {
     root: ''
-  },
-  variants: {
-
-  },
-  defaultVariants: {
-
   }
-})
+}
     `
   }
 }
@@ -96,15 +133,18 @@ const test = ({ name }) => {
     filename: `test/components/${upperName}.spec.ts`,
     contents: `
 import { describe, it, expect } from 'vitest'
-import ${upperName}, { type ${upperName}Props } from '../../src/runtime/components/${upperName}.vue'
+import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../src/runtime/components/${upperName}.vue'
 import ComponentRender from '../component-render'
 
 describe('${upperName}', () => {
   it.each([
     // Props
+    ['with as', { props: { as: 'div' } }],
     ['with class', { props: { class: '' } }],
-    ['with ui', { props: { ui: {} } }]
+    ['with ui', { props: { ui: {} } }],
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: any }) => {
+    // Slots
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
     const html = await ComponentRender(nameOrHtml, options, ${upperName})
     expect(html).toMatchSnapshot()
   })

cli/utils.mjs

@@ -8,10 +8,10 @@ export async function sortFile(path) {
   await fsp.writeFile(path, lines.join('\n') + '\n')
 }
 
-export async function appendFile(path, content) {
+export async function appendFile(path, contents) {
   const file = await fsp.readFile(path, 'utf-8')
 
-  if (!file.includes(content)) {
+  if (!file.includes(contents)) {
-    await fsp.writeFile(path, file.trim() + '\n' + content + '\n')
+    await fsp.writeFile(path, file.trim() + '\n' + contents + '\n')
   }
 }