refactor(devtools): use unbuild

.github/workflows/ci-v3.yml

@@ -43,6 +43,9 @@ jobs:
       - name: Prepare
         run: pnpm run dev:prepare
 
+      - name: Devtools prepare
+        run: pnpm run devtools:prepare
+
       - name: Lint
         run: pnpm run lint
 
@@ -60,9 +63,6 @@ jobs:
       - name: Test
         run: pnpm run test
 
-      - name: Devtools prepare
-        run: pnpm run devtools:prepare
-
       - name: Build
         run: pnpm run build
 

.gitignore

@@ -1,4 +1,5 @@
-src/devtools/.component-meta/
+.component-meta/
+component-meta.*
 
 # Nuxt dev/build outputs
 .output

build.config.ts

@@ -1,6 +1,10 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
+  entries: [
+    // Include devtools runtime files
+    { input: './src/devtools/runtime', builder: 'mkdist', outDir: 'dist/devtools/runtime' }
+  ],
   replace: {
     'process.env.DEV': 'false'
   },

devtools/app/components/CollapseContainer.vue

@@ -18,7 +18,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="border rounded border-[var(--ui-border)]">
     <div
       ref="wrapper"
       :class="['overflow-hidden', collapsed && overflow ? 'max-h-48' : 'max-h-none']"

devtools/app/components/ComponentPreview.vue

@@ -16,11 +16,12 @@ const code = computed(() => {
   if (!props.component) return
 
   const propsTemplate = Object.entries(props.props ?? {})?.map(([key, value]: [string, any]) => {
+    const defaultValue: any = props.component?.meta?.props.find(prop => prop.name === key)?.default
+    if (defaultValue === value) return
     if (value === true) return kebabCase(key)
-    if (value === false) return
+    if (value === false && defaultValue === true) return `:${kebabCase(key)}="false"`
     if (!value) return
     if (props.component?.defaultVariants?.[key] === value) return
-    if (props.component?.meta?.props.find(prop => prop.name === key && prop.default === value)) return
     if (typeof value === 'number') return `:${kebabCase(key)}="${value}"`
     if (Array.isArray(value)) return value.length ? `:${kebabCase(key)}="${genArrayFromRaw(value, undefined, { preserveTypes: true })}"` : undefined
     if (typeof value === 'object') return `:${kebabCase(key)}="${genObjectFromValues(value)}"`

devtools/app/components/inputs/ArrayInput.vue

@@ -40,15 +40,14 @@ function addArrayItem() {
 
 <template>
   <div>
-    <div v-for="value, index in modelValue" :key="index" class="relative border border-[var(--ui-border)] rounded-md mt-4">
+    <div v-for="value, index in modelValue" :key="index" class="relative">
       <ComponentPropInput
         :model-value="value"
         :meta="{ schema: itemSchema }"
-        class="border-b last:border-b-0 border-[var(--ui-border)]"
       />
 
       <UPopover>
-        <UButton variant="ghost" color="neutral" icon="i-heroicons-ellipsis-vertical" class="absolute top-1 right-1" />
+        <UButton variant="ghost" color="neutral" icon="i-heroicons-ellipsis-vertical" class="absolute top-4 right-1" />
         <template #content>
           <UButton
             variant="ghost"

devtools/nuxt.config.ts

@@ -40,7 +40,7 @@ export default defineNuxtConfig({
   mdc: {
     highlight: {
       theme: {
-        light: 'material-theme-lighter',
+        light: 'material-theme',
         default: 'material-theme',
         dark: 'material-theme-palenight'
       }

package.json

@@ -40,7 +40,7 @@
     "docs:prepare": "nuxt-component-meta docs",
     "docs:typecheck": "nuxi typecheck docs",
     "devtools": "NUXT_UI_DEVTOOLS_LOCAL=true nuxi dev playground",
-    "devtools:build": "nuxi generate devtools && cp -r src/devtools dist/devtools",
+    "devtools:build": "nuxi generate devtools",
     "devtools:prepare": "nuxt-component-meta playground --outputDir ../src/devtools/.component-meta/",
     "devtools:typecheck": "nuxi typecheck devtools",
     "lint": "eslint .",

playground/nuxt.config.ts

@@ -5,7 +5,7 @@ const { resolve } = createResolver(import.meta.url)
 export default defineNuxtConfig({
   devtools: { enabled: true },
 
-  modules: ['../src/module'],
+  modules: ['../dist/module'],
 
   future: {
     compatibilityVersion: 4

src/devtools/devtoolsMetaPlugin.ts → src/devtools/meta.ts

@@ -57,7 +57,7 @@ export function devtoolsMetaPlugin({ resolve }: { resolve: Resolver['resolve'] }
       server.middlewares.use('/__nuxt_ui__/devtools/api/component-meta', async (_req, res) => {
         res.setHeader('Content-Type', 'application/json')
         try {
-          const componentMeta = await import(resolve('./devtools/.component-meta/component-meta.mjs'))
+          const componentMeta = await import('./.component-meta/component-meta')
           const meta = defu(
             Object.entries(componentMeta.default).reduce((acc, [key, value]: [string, any]) => {
               if (!key.startsWith('U')) return acc

src/devtools/DevtoolsRenderer.vue → src/devtools/runtime/DevtoolsRenderer.vue

@@ -6,7 +6,7 @@ import { useColorMode, useRoute } from '#imports'
 const route = useRoute()
 const component = route.query?.example
   ? defineAsyncComponent(() => import(`./examples/${route.query.example}.vue`))
-  : route.params?.slug && defineAsyncComponent(() => import(`../runtime/components/${pascalCase(route.params.slug as string)}.vue`))
+  : route.params?.slug && defineAsyncComponent(() => import(`../../runtime/components/${pascalCase(route.params.slug as string)}.vue`))
 
 const state = reactive<{ slots?: any, props?: any }>({})
 

src/devtools/examples/CardExample.vue → src/devtools/runtime/examples/CardExample.vue

@@ -2,11 +2,11 @@
   <div class="flex flex-col gap-4">
     <UCard class="w-96">
       <template #header>
-        <Placeholder class="h-8" />
+        <div class="bg-[var(--ui-bg-accented)]/40 h-8" />
       </template>
-      <Placeholder class="h-32" />
+      <div class="bg-[var(--ui-bg-accented)]/40 h-32" />
       <template #footer>
-        <Placeholder class="h-8" />
+        <div class="bg-[var(--ui-bg-accented)]/40 h-8" />
       </template>
     </UCard>
   </div>

src/devtools/examples/CollapsibleExample.vue → src/devtools/runtime/examples/CollapsibleExample.vue

@@ -2,7 +2,7 @@
   <UCollapsible class="w-48">
     <UButton label="Open Collapse" block />
     <template #content>
-      <Placeholder class="h-60" />
+      <div class="bg-[var(--ui-bg-accented)]/40 h-60" />
     </template>
   </UCollapsible>
 </template>

src/devtools/runtime/examples/ContainerExample.vue

@@ -0,0 +1,5 @@
+<template>
+  <UContainer>
+    <div class="bg-[var(--ui-bg-accented)]/40 h-60 aspect-video w-72" />
+  </UContainer>
+</template>

src/devtools/runtime/examples/ContextMenuExample.vue

@@ -0,0 +1,5 @@
+<template>
+  <UContextMenu>
+    <div class="bg-[var(--ui-bg-accented)]/40 h-60 w-72" />
+  </UContextMenu>
+</template>

src/devtools/examples/ModalExample.vue → src/devtools/runtime/examples/ModalExample.vue

@@ -2,7 +2,7 @@
   <UModal>
     <UButton label="Open Modal" />
     <template #content>
-      <Placeholder class="h-72 w-full" />
+      <div class="h-72" />
     </template>
   </UModal>
 </template>

src/devtools/examples/PopoverExample.vue → src/devtools/runtime/examples/PopoverExample.vue

@@ -2,7 +2,7 @@
   <UPopover>
     <UButton label="Open Collapse" />
     <template #content>
-      <Placeholder class="h-24 w-60" />
+      <div class="bg-[var(--ui-bg-accented)]/40 h-24 w-60" />
     </template>
   </UPopover>
 </template>

src/devtools/runtime/examples/TooltipExample.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip>
+    <div class="bg-[var(--ui-bg-accented)]/40 size-20" />
+  </UTooltip>
+</template>

src/module.ts

@@ -7,7 +7,7 @@ import sirv from 'sirv'
 import { setupDevtoolsClient } from './devtools/rpc'
 import { getPort } from 'get-port-please'
 import { pick } from './runtime/utils'
-import { devtoolsMetaPlugin } from './devtools/devtoolsMetaPlugin'
+import { devtoolsMetaPlugin } from './devtools/meta'
 
 export type * from './runtime/types'
 
@@ -187,7 +187,7 @@ export default defineNuxtModule<ModuleOptions>({
         pages.unshift({
           name: 'ui-devtools',
           path: '/__nuxt_ui__/components/:slug',
-          file: resolve('./devtools/DevtoolsRenderer.vue')
+          file: resolve('./devtools/runtime/DevtoolsRenderer.vue')
           // https://github.com/nuxt/nuxt/pull/29366
           // meta: {
           //   isolate: true