feat(devtools): wip

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,34 @@
+<script setup lang="ts">
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import type { ClientFunctions, ServerFunctions } from '../../src/devtools/rpc'
+
+type Component = {
+ slug: string
+}
+
+const components = ref<Component[]>([{ slug: 'button' }])
+const component = ref<Component | null>({ slug: 'button' })
+
+onDevtoolsClientConnected(async (client) => {
+ const rpc = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>('nuxt/ui/devtools', { })
+
+ // call server RPC functions
+ components.value = await rpc.getComponents()
+})
+</script>
+
+<template>
+ <UApp class="h-screen w-full relative">
+ <div class="absolute top-0 inset-x-0 flex gap-2 h-[49px] justify-center items-center px-2 border-b border-gray-100" />
+ <UButton> Click me </UButton>
+ <div v-if="component" class="grow flex justify-center items-center top-[49px] absolute inset-x-0 bottom-96 bg-gray-100">
+ <!-- <iframe class="w-full" :src="`/_ui/components/${component.slug}`" /> -->
+ </div>
+ <div v-if="component" class="absolute bottom-0 inset-x-0 h-96 bg-white" />
+ </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",
@@ -74,6 +74,7 @@
  "knitwork": "^1.1.0",
  "nuxt": "^3.13.1",
  "release-it": "^17.6.0",
+ "sirv": "^2.0.4",
  "valibot": "^0.41.0",
  "vitest": "^2.0.5",
  "vitest-environment-nuxt": "^1.0.1",