feat(devtools): init devtools app

devtools/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

devtools/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

devtools/app/app.config.ts

@@ -0,0 +1,13 @@
+export default defineAppConfig({
+  toaster: {
+    position: 'bottom-right' as const,
+    expand: true,
+    duration: 5000
+  },
+  ui: {
+    colors: {
+      primary: 'sky',
+      gray: 'cool'
+    }
+  }
+})

devtools/app/app.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import type { ClientFunctions, ServerFunctions, Component } from '../../src/devtools/rpc'
+
+const components = useState<Array<Component & { value: string }>>('ui-devtools-components')
+const component = useState<Component>('ui-devtools-component')
+
+onDevtoolsClientConnected(async (client) => {
+  const rpc = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>('nuxt/ui/devtools', { })
+
+  // call server RPC functions
+  components.value = (await rpc.getComponents()).map(component => ({ ...component, value: component.slug }))
+
+  if (!component.value || !components.value.find(c => c.slug === component.value.slug)) {
+    component.value = components.value.find(comp => comp.slug === 'button')
+  }
+})
+</script>
+
+<template>
+  <UApp class="h-screen w-full relative">
+    <div
+      class="top-0 h-[49px] border-b border-gray-200 bg-white flex justify-center items-center px-2"
+    >
+      <UInputMenu
+        v-model="component"
+        variant="none"
+        :items="components"
+        class="grow"
+        placeholder="Search component..."
+        size="xl"
+      />
+    </div>
+    <div v-if="component" class="absolute top-[49px] bottom-0 inset-x-0 grid grid-cols-2 border-l border-gray-100">
+      <div class="bg-white">
+        <!-- TODO: Add component configuration and documentation -->
+      </div>
+      <div>
+        <iframe class="h-full w-full" :src="`/_ui/components/${component.slug}`" />
+      </div>
+    </div>
+  </UApp>
+</template>
+
+<style>
+@import 'tailwindcss';
+@import '@nuxt/ui';
+</style>

devtools/nuxt.config.ts

@@ -0,0 +1,23 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  ssr: false,
+  devtools: { enabled: false },
+  nitro: {
+    hooks: {
+      'prerender:routes': function (routes) {
+        routes.clear()
+      }
+    }
+  },
+
+  modules: ['../src/module'],
+
+  app: {
+    baseURL: '/_ui/devtools'
+  },
+
+  future: {
+    compatibilityVersion: 4
+  },
+  compatibilityDate: '2024-04-03'
+})

devtools/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@nuxt/ui-devtools",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "nuxt": "^3.13.1",
+    "@nuxt/ui": "latest"
+  }
+}

devtools/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -33,7 +33,7 @@
     "prepack": "pnpm build",
     "dev": "DEV=true nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && nuxi prepare devtools",
     "docs": "DEV=true nuxi dev docs",
     "docs:build": "nuxi build docs",
     "docs:prepare": "nuxt-component-meta docs",
@@ -73,7 +73,9 @@
     "joi": "^17.13.3",
     "knitwork": "^1.1.0",
     "nuxt": "^3.13.1",
+    "nuxt-component-meta": "^0.8.2",
     "release-it": "^17.6.0",
+    "sirv": "^2.0.4",
     "valibot": "^0.41.0",
     "vitest": "^2.0.5",
     "vitest-environment-nuxt": "^1.0.1",