fix(module): handle theme HMR on dev (#84)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

.nuxtrc

@@ -1 +0,0 @@
-modules[]=@nuxt/ui-dev

modules/dev/index.ts

@@ -1,22 +0,0 @@
-import { createResolver, defineNuxtModule, useNuxt } from '@nuxt/kit'
-import { watch } from 'chokidar'
-import { debounce } from 'perfect-debounce'
-
-/**
- * This is an internal module aiming to make the DX of developing Nuxt UI better.
- */
-export default defineNuxtModule({
-  meta: {
-    name: '@nuxt/ui-dev'
-  },
-  setup() {
-    const nuxt = useNuxt()
-    const resolver = createResolver(import.meta.url)
-    const watcher = watch(resolver.resolve('../../src/theme'))
-
-    const generateApp = debounce(() => nuxt.hooks.callHook('builder:generateApp'))
-
-    watcher.on('all', generateApp)
-    nuxt.hook('close', () => watcher.close())
-  }
-})

modules/dev/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "@nuxt/ui-dev",
-  "exports": {
-    ".": "./index.ts"
-  },
-  "dependencies": {
-    "@nuxt/kit": "latest",
-    "chokidar": "^3.6.0",
-    "perfect-debounce": "^1.0.0"
-  }
-}

package.json

@@ -31,10 +31,10 @@
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
-    "dev": "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",
-    "docs": "nuxi dev docs",
+    "dev": "DEV=true nuxi dev playground",
+    "dev:build": "DEV=true nuxi build playground",
+    "dev:prepare": "DEV=true nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs",
+    "docs": "DEV=true nuxi dev docs",
     "docs:build": "nuxi generate docs",
     "docs:prepare": "nuxt-component-meta docs",
     "lint": "eslint .",
@@ -65,7 +65,6 @@
     "@nuxt/eslint-config": "^0.3.13",
     "@nuxt/module-builder": "^0.7.0",
     "@nuxt/test-utils": "^3.13.1",
-    "@nuxt/ui-dev": "workspace:*",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.4.0",

pnpm-lock.yaml

@@ -70,9 +70,6 @@ importers:
       '@nuxt/test-utils':
         specifier: ^3.13.1
         version: 3.13.1(@vue/test-utils@2.4.6)(h3@1.11.1)(happy-dom@14.7.1)(nitropack@2.9.6(encoding@0.1.13))(playwright-core@1.43.1)(rollup@4.16.4)(vite@5.2.4(@types/node@20.12.7)(lightningcss@1.24.1)(terser@5.30.4))(vitest@1.6.0(@types/node@20.12.7)(happy-dom@14.7.1)(lightningcss@1.24.1)(terser@5.30.4))(vue-router@4.3.2(vue@3.4.24(typescript@5.4.5)))(vue@3.4.24(typescript@5.4.5))
-      '@nuxt/ui-dev':
-        specifier: workspace:*
-        version: link:modules/dev
       '@release-it/conventional-changelog':
         specifier: ^8.0.1
         version: 8.0.1(release-it@17.3.0(typescript@5.4.5))
@@ -197,18 +194,6 @@ importers:
         specifier: ^3.23.8
         version: 3.23.8
 
-  modules/dev:
-    dependencies:
-      '@nuxt/kit':
-        specifier: latest
-        version: 3.11.2(rollup@4.16.4)
-      chokidar:
-        specifier: ^3.6.0
-        version: 3.6.0
-      perfect-debounce:
-        specifier: ^1.0.0
-        version: 1.0.0
-
   playground:
     dependencies:
       '@nuxt/ui':

src/templates.ts

@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'node:url'
 import { kebabCase } from 'scule'
 import { addTemplate, addTypeTemplate } from '@nuxt/kit'
 import type { Nuxt } from '@nuxt/schema'
@@ -298,6 +299,16 @@ export function addTemplates(options: ModuleOptions, nuxt: Nuxt) {
           })
         }
 
+        // For local development, directly import from theme
+        if (process.env.DEV) {
+          return [
+            `import template from ${JSON.stringify(fileURLToPath(new URL(`./theme/${kebabCase(component)}`, import.meta.url)))}`,
+            `const result = typeof template === 'function' ? template(${JSON.stringify({ colors: options.colors })}) : template`,
+            `export default result`,
+            `/* export default ${json} */`
+          ].join('\n')
+        }
+
         return `export default ${json}`
       }
     })