From f8f98d14ab4775b6857ebf2e0c6b4510b13a22e1 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sat, 19 Oct 2024 10:12:31 +0200
Subject: [PATCH] refactor(devtools): use unbuild

---
 .github/workflows/ci-v3.yml                                 | 6 +++---
 .gitignore                                                  | 3 ++-
 build.config.ts                                             | 4 ++++
 devtools/app/components/CollapseContainer.vue               | 2 +-
 devtools/app/components/ComponentPreview.vue                | 5 +++--
 devtools/app/components/inputs/ArrayInput.vue               | 5 ++---
 devtools/nuxt.config.ts                                     | 2 +-
 package.json                                                | 2 +-
 playground/nuxt.config.ts                                   | 2 +-
 src/devtools/examples/ContainerExample.vue                  | 5 -----
 src/devtools/examples/ContextMenuExample.vue                | 5 -----
 src/devtools/examples/TooltipExample.vue                    | 5 -----
 src/devtools/{devtoolsMetaPlugin.ts => meta.ts}             | 2 +-
 src/devtools/{ => runtime}/DevtoolsRenderer.vue             | 2 +-
 src/devtools/{ => runtime}/examples/AvatarGroupExample.vue  | 0
 src/devtools/{ => runtime}/examples/ButtonGroupExample.vue  | 0
 src/devtools/{ => runtime}/examples/CardExample.vue         | 6 +++---
 src/devtools/{ => runtime}/examples/CarouselExample.vue     | 0
 src/devtools/{ => runtime}/examples/ChipExample.vue         | 0
 src/devtools/{ => runtime}/examples/CollapsibleExample.vue  | 2 +-
 .../{ => runtime}/examples/CommandPaletteExample.vue        | 0
 src/devtools/runtime/examples/ContainerExample.vue          | 5 +++++
 src/devtools/runtime/examples/ContextMenuExample.vue        | 5 +++++
 src/devtools/{ => runtime}/examples/DrawerExample.vue       | 0
 src/devtools/{ => runtime}/examples/DropdownMenuExample.vue | 0
 src/devtools/{ => runtime}/examples/FormExample.vue         | 0
 src/devtools/{ => runtime}/examples/FormFieldExample.vue    | 0
 src/devtools/{ => runtime}/examples/LinkExample.vue         | 0
 src/devtools/{ => runtime}/examples/ModalExample.vue        | 2 +-
 src/devtools/{ => runtime}/examples/PopoverExample.vue      | 2 +-
 src/devtools/{ => runtime}/examples/SkeletonExample.vue     | 0
 src/devtools/{ => runtime}/examples/SlideoverExample.vue    | 0
 src/devtools/{ => runtime}/examples/ToasterExample.vue      | 0
 src/devtools/runtime/examples/TooltipExample.vue            | 5 +++++
 src/module.ts                                               | 4 ++--
 35 files changed, 43 insertions(+), 38 deletions(-)
 delete mode 100644 src/devtools/examples/ContainerExample.vue
 delete mode 100644 src/devtools/examples/ContextMenuExample.vue
 delete mode 100644 src/devtools/examples/TooltipExample.vue
 rename src/devtools/{devtoolsMetaPlugin.ts => meta.ts} (97%)
 rename src/devtools/{ => runtime}/DevtoolsRenderer.vue (97%)
 rename src/devtools/{ => runtime}/examples/AvatarGroupExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/ButtonGroupExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/CardExample.vue (52%)
 rename src/devtools/{ => runtime}/examples/CarouselExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/ChipExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/CollapsibleExample.vue (73%)
 rename src/devtools/{ => runtime}/examples/CommandPaletteExample.vue (100%)
 create mode 100644 src/devtools/runtime/examples/ContainerExample.vue
 create mode 100644 src/devtools/runtime/examples/ContextMenuExample.vue
 rename src/devtools/{ => runtime}/examples/DrawerExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/DropdownMenuExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/FormExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/FormFieldExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/LinkExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/ModalExample.vue (74%)
 rename src/devtools/{ => runtime}/examples/PopoverExample.vue (67%)
 rename src/devtools/{ => runtime}/examples/SkeletonExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/SlideoverExample.vue (100%)
 rename src/devtools/{ => runtime}/examples/ToasterExample.vue (100%)
 create mode 100644 src/devtools/runtime/examples/TooltipExample.vue

diff --git a/.github/workflows/ci-v3.yml b/.github/workflows/ci-v3.yml
index 0421b6948c..3b520fa954 100644
--- a/.github/workflows/ci-v3.yml
+++ b/.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
 
diff --git a/.gitignore b/.gitignore
index 6ac2f98117..3883bb7514 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
-src/devtools/.component-meta/
+.component-meta/
+component-meta.*
 
 # Nuxt dev/build outputs
 .output
diff --git a/build.config.ts b/build.config.ts
index 981b59c3a3..080b844cea 100644
--- a/build.config.ts
+++ b/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'
   },
diff --git a/devtools/app/components/CollapseContainer.vue b/devtools/app/components/CollapseContainer.vue
index 0532ad758a..6b11033051 100644
--- a/devtools/app/components/CollapseContainer.vue
+++ b/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']"
diff --git a/devtools/app/components/ComponentPreview.vue b/devtools/app/components/ComponentPreview.vue
index 620b7114ea..618c9ab73c 100644
--- a/devtools/app/components/ComponentPreview.vue
+++ b/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)}"`
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
index 86d63cd07f..c79915735b 100644
--- a/devtools/app/components/inputs/ArrayInput.vue
+++ b/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"
diff --git a/devtools/nuxt.config.ts b/devtools/nuxt.config.ts
index f7e0c44bdc..9da3667741 100644
--- a/devtools/nuxt.config.ts
+++ b/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'
       }
diff --git a/package.json b/package.json
index 8ee8e167cc..634d778340 100644
--- a/package.json
+++ b/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 .",
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 91276a9a38..84e95f63ec 100644
--- a/playground/nuxt.config.ts
+++ b/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
diff --git a/src/devtools/examples/ContainerExample.vue b/src/devtools/examples/ContainerExample.vue
deleted file mode 100644
index 061adec5d6..0000000000
--- a/src/devtools/examples/ContainerExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UContainer>
-    <Placeholder class="h-60 aspect-video w-72" />
-  </UContainer>
-</template>
diff --git a/src/devtools/examples/ContextMenuExample.vue b/src/devtools/examples/ContextMenuExample.vue
deleted file mode 100644
index a65a4cfd29..0000000000
--- a/src/devtools/examples/ContextMenuExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UContextMenu>
-    <Placeholder class="h-60 aspect-video w-72" />
-  </UContextMenu>
-</template>
diff --git a/src/devtools/examples/TooltipExample.vue b/src/devtools/examples/TooltipExample.vue
deleted file mode 100644
index 44b1047580..0000000000
--- a/src/devtools/examples/TooltipExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UTooltip>
-    <Placeholder class="size-20" />
-  </UTooltip>
-</template>
diff --git a/src/devtools/devtoolsMetaPlugin.ts b/src/devtools/meta.ts
similarity index 97%
rename from src/devtools/devtoolsMetaPlugin.ts
rename to src/devtools/meta.ts
index ea660065c8..9190c71487 100644
--- a/src/devtools/devtoolsMetaPlugin.ts
+++ b/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
diff --git a/src/devtools/DevtoolsRenderer.vue b/src/devtools/runtime/DevtoolsRenderer.vue
similarity index 97%
rename from src/devtools/DevtoolsRenderer.vue
rename to src/devtools/runtime/DevtoolsRenderer.vue
index ca546440c6..070c1153d0 100644
--- a/src/devtools/DevtoolsRenderer.vue
+++ b/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 }>({})
 
diff --git a/src/devtools/examples/AvatarGroupExample.vue b/src/devtools/runtime/examples/AvatarGroupExample.vue
similarity index 100%
rename from src/devtools/examples/AvatarGroupExample.vue
rename to src/devtools/runtime/examples/AvatarGroupExample.vue
diff --git a/src/devtools/examples/ButtonGroupExample.vue b/src/devtools/runtime/examples/ButtonGroupExample.vue
similarity index 100%
rename from src/devtools/examples/ButtonGroupExample.vue
rename to src/devtools/runtime/examples/ButtonGroupExample.vue
diff --git a/src/devtools/examples/CardExample.vue b/src/devtools/runtime/examples/CardExample.vue
similarity index 52%
rename from src/devtools/examples/CardExample.vue
rename to src/devtools/runtime/examples/CardExample.vue
index 7eefa18d34..24fc5401fb 100644
--- a/src/devtools/examples/CardExample.vue
+++ b/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>
diff --git a/src/devtools/examples/CarouselExample.vue b/src/devtools/runtime/examples/CarouselExample.vue
similarity index 100%
rename from src/devtools/examples/CarouselExample.vue
rename to src/devtools/runtime/examples/CarouselExample.vue
diff --git a/src/devtools/examples/ChipExample.vue b/src/devtools/runtime/examples/ChipExample.vue
similarity index 100%
rename from src/devtools/examples/ChipExample.vue
rename to src/devtools/runtime/examples/ChipExample.vue
diff --git a/src/devtools/examples/CollapsibleExample.vue b/src/devtools/runtime/examples/CollapsibleExample.vue
similarity index 73%
rename from src/devtools/examples/CollapsibleExample.vue
rename to src/devtools/runtime/examples/CollapsibleExample.vue
index 8396b8500c..8ec689edbf 100644
--- a/src/devtools/examples/CollapsibleExample.vue
+++ b/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>
diff --git a/src/devtools/examples/CommandPaletteExample.vue b/src/devtools/runtime/examples/CommandPaletteExample.vue
similarity index 100%
rename from src/devtools/examples/CommandPaletteExample.vue
rename to src/devtools/runtime/examples/CommandPaletteExample.vue
diff --git a/src/devtools/runtime/examples/ContainerExample.vue b/src/devtools/runtime/examples/ContainerExample.vue
new file mode 100644
index 0000000000..8a1b29327d
--- /dev/null
+++ b/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>
diff --git a/src/devtools/runtime/examples/ContextMenuExample.vue b/src/devtools/runtime/examples/ContextMenuExample.vue
new file mode 100644
index 0000000000..fd17434b14
--- /dev/null
+++ b/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>
diff --git a/src/devtools/examples/DrawerExample.vue b/src/devtools/runtime/examples/DrawerExample.vue
similarity index 100%
rename from src/devtools/examples/DrawerExample.vue
rename to src/devtools/runtime/examples/DrawerExample.vue
diff --git a/src/devtools/examples/DropdownMenuExample.vue b/src/devtools/runtime/examples/DropdownMenuExample.vue
similarity index 100%
rename from src/devtools/examples/DropdownMenuExample.vue
rename to src/devtools/runtime/examples/DropdownMenuExample.vue
diff --git a/src/devtools/examples/FormExample.vue b/src/devtools/runtime/examples/FormExample.vue
similarity index 100%
rename from src/devtools/examples/FormExample.vue
rename to src/devtools/runtime/examples/FormExample.vue
diff --git a/src/devtools/examples/FormFieldExample.vue b/src/devtools/runtime/examples/FormFieldExample.vue
similarity index 100%
rename from src/devtools/examples/FormFieldExample.vue
rename to src/devtools/runtime/examples/FormFieldExample.vue
diff --git a/src/devtools/examples/LinkExample.vue b/src/devtools/runtime/examples/LinkExample.vue
similarity index 100%
rename from src/devtools/examples/LinkExample.vue
rename to src/devtools/runtime/examples/LinkExample.vue
diff --git a/src/devtools/examples/ModalExample.vue b/src/devtools/runtime/examples/ModalExample.vue
similarity index 74%
rename from src/devtools/examples/ModalExample.vue
rename to src/devtools/runtime/examples/ModalExample.vue
index 79e36a021e..d4c6ef2c12 100644
--- a/src/devtools/examples/ModalExample.vue
+++ b/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>
diff --git a/src/devtools/examples/PopoverExample.vue b/src/devtools/runtime/examples/PopoverExample.vue
similarity index 67%
rename from src/devtools/examples/PopoverExample.vue
rename to src/devtools/runtime/examples/PopoverExample.vue
index fd5f61956c..aac4e50286 100644
--- a/src/devtools/examples/PopoverExample.vue
+++ b/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>
diff --git a/src/devtools/examples/SkeletonExample.vue b/src/devtools/runtime/examples/SkeletonExample.vue
similarity index 100%
rename from src/devtools/examples/SkeletonExample.vue
rename to src/devtools/runtime/examples/SkeletonExample.vue
diff --git a/src/devtools/examples/SlideoverExample.vue b/src/devtools/runtime/examples/SlideoverExample.vue
similarity index 100%
rename from src/devtools/examples/SlideoverExample.vue
rename to src/devtools/runtime/examples/SlideoverExample.vue
diff --git a/src/devtools/examples/ToasterExample.vue b/src/devtools/runtime/examples/ToasterExample.vue
similarity index 100%
rename from src/devtools/examples/ToasterExample.vue
rename to src/devtools/runtime/examples/ToasterExample.vue
diff --git a/src/devtools/runtime/examples/TooltipExample.vue b/src/devtools/runtime/examples/TooltipExample.vue
new file mode 100644
index 0000000000..f014c1544d
--- /dev/null
+++ b/src/devtools/runtime/examples/TooltipExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UTooltip>
+    <div class="bg-[var(--ui-bg-accented)]/40 size-20" />
+  </UTooltip>
+</template>
diff --git a/src/module.ts b/src/module.ts
index ab0fe41a2e..6dae6f577a 100644
--- a/src/module.ts
+++ b/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