kapi-ui 0.2.0 → 0.2.2

package/dist/nuxt-module.js

@@ -0,0 +1,24 @@
+import { defineNuxtModule, addVitePlugin } from '@nuxt/kit';
+import kapiVitePlugin from './vite-plugin.js';
+export default defineNuxtModule({
+    meta: {
+        name: 'kapi-ui',
+        configKey: 'kapi',
+    },
+    setup(_options, nuxt) {
+        var _a;
+        if (!nuxt.options.dev)
+            return;
+        // Nuxt renders HTML through Nitro, not Vite's transformIndexHtml, so the
+        // overlay script has to be injected via unhead instead of the vite plugin.
+        addVitePlugin(kapiVitePlugin());
+        // Nuxt mounts Vite's dev middleware under app.buildAssetsDir (e.g. /_nuxt/),
+        // not at the site root, so the script has to be requested from under that
+        // prefix or Nitro's page renderer intercepts it before Vite ever sees it.
+        (_a = nuxt.options.app.head).script || (_a.script = []);
+        nuxt.options.app.head.script.push({
+            src: `${nuxt.options.app.buildAssetsDir}@kapi-ui/overlay`,
+            type: 'module',
+        });
+    },
+});

package/dist/server.js

@@ -91,7 +91,11 @@ function processComments(prompt, socket) {
         send(socket, { type: "comments:done" });
     });
 }
+let serverStarted = false;
 export function startServer(portNumber) {
+    if (serverStarted)
+        return;
+    serverStarted = true;
     const server = http.createServer((req, res) => {
         res.writeHead(200, { "Content-Type": "text/plain" });
         res.end("I love capybaras");

package/dist/setup.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import prompts from 'prompts';
-import { installKapi, injectVitePlugin, injectNuxtVitePlugin, KAPI_PACKAGE_NAME } from './utils.js';
+import { installKapi, injectVitePlugin, injectNuxtModule, KAPI_PACKAGE_NAME } from './utils.js';
 async function setup() {
     console.log(`
 ██   ██  █████  ██████  ██ 
@@ -46,7 +46,7 @@ Add this manually to your vite.config:
     if (response.setupChoice === 'nuxt') {
         try {
             installKapi(process.cwd());
-            await injectNuxtVitePlugin(process.cwd());
+            await injectNuxtModule(process.cwd());
             console.log('done!');
         }
         catch (err) {
@@ -54,12 +54,8 @@ Add this manually to your vite.config:
             console.log(`
 Add this manually to your nuxt.config:
 
-  import kapi from '${KAPI_PACKAGE_NAME}/vite-plugin'
-
   export default defineNuxtConfig({
-    vite: {
-      plugins: [kapi()],
-    },
+    modules: ['${KAPI_PACKAGE_NAME}/nuxt'],
   })
 `);
             process.exit(1);

package/dist/utils.js

@@ -1,5 +1,5 @@
-import { loadFile, writeFile, builders } from 'magicast';
-import { addVitePlugin, getDefaultExportOptions } from 'magicast/helpers';
+import { loadFile, writeFile } from 'magicast';
+import { addVitePlugin, addNuxtModule } from 'magicast/helpers';
 import { existsSync, readFileSync } from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
@@ -34,34 +34,25 @@ export async function injectVitePlugin(cwd) {
     await writeFile(mod, configPath);
     console.log(`✔ Added kapi plugin to ${configFile}`);
 }
-export async function injectNuxtVitePlugin(cwd) {
-    var _a;
+export async function injectNuxtModule(cwd) {
     const candidates = ['nuxt.config.ts', 'nuxt.config.js', 'nuxt.config.mjs'];
     const configFile = candidates.find((f) => existsSync(path.join(cwd, f)));
     if (!configFile) {
         throw new Error('No nuxt.config found.');
     }
     const configPath = path.join(cwd, configFile);
-    const importSpecifier = `${KAPI_PACKAGE_NAME}/vite-plugin`;
+    const moduleSpecifier = `${KAPI_PACKAGE_NAME}/nuxt`;
     const existingSource = readFileSync(configPath, 'utf-8');
-    if (existingSource.includes(importSpecifier)) {
-        console.log(`✔ kapi plugin already configured in ${configFile}`);
+    if (existingSource.includes(moduleSpecifier)) {
+        console.log(`✔ kapi module already configured in ${configFile}`);
         return;
     }
     const mod = await loadFile(configPath);
-    const constructor = 'kapi';
-    // Nuxt reads Vite plugins from `vite.plugins` in nuxt.config, not from a
-    // top-level `plugins` array, so magicast's addVitePlugin helper (which
-    // targets the latter) can't be reused here directly.
-    const config = getDefaultExportOptions(mod);
-    config.vite || (config.vite = {});
-    (_a = config.vite).plugins || (_a.plugins = []);
-    config.vite.plugins.push(builders.functionCall(constructor));
-    mod.imports.$prepend({
-        from: importSpecifier,
-        imported: 'default',
-        local: constructor,
-    });
+    // Nuxt renders HTML through Nitro, not Vite's transformIndexHtml, so the
+    // overlay can't be injected as a plain Vite plugin the way it is for Vite
+    // apps. Registering it as a Nuxt module (kapi-ui/nuxt) lets it inject the
+    // overlay script via unhead and add the Vite plugin through @nuxt/kit.
+    addNuxtModule(mod, moduleSpecifier);
     await writeFile(mod, configPath);
-    console.log(`✔ Added kapi plugin to ${configFile}`);
+    console.log(`✔ Added kapi module to ${configFile}`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kapi-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Visually prompt your UI",
   "scripts": {
     "build": "tsc",
@@ -13,7 +13,8 @@
     "kapi-ui": "dist/setup.js"
   },
   "exports": {
-    "./vite-plugin": "./dist/vite-plugin.js"
+    "./vite-plugin": "./dist/vite-plugin.js",
+    "./nuxt": "./dist/nuxt-module.js"
   },
   "repository": {
     "type": "git",
@@ -32,6 +33,7 @@
   },
   "homepage": "https://github.com/jcebermudo/kapi#readme",
   "devDependencies": {
+    "@nuxt/schema": "^3.14.0",
     "@types/node": "^26.1.0",
     "@types/prompts": "^2.4.9",
     "@types/ws": "^8.18.1",
@@ -39,6 +41,7 @@
     "vite": "^8.1.3"
   },
   "dependencies": {
+    "@nuxt/kit": "^3.14.0",
     "magicast": "^0.5.3",
     "prompts": "^2.4.2",
     "ws": "^8.21.0"