fix(viewer): trust listener url for baseURL, closes #782

.github/workflows/sink.yml

@@ -24,9 +24,7 @@ jobs:
           cache: "pnpm"
       - run: pnpm install
       - run: |
-          pnpm install --ignore-workspace
-          timeout 5m pnpm generate || true
-        working-directory: test/fixtures/nuxt.com
+          cd test/fixtures/nuxt.com && pnpm install --ignore-workspace
+      - run: pnpm test sink
         env:
           NUXT_UI_PRO_LICENSE: ${{secrets.NUXT_UI_PRO_LICENSE}}
-      - run: pnpm test sink

src/logger.ts

@@ -1,3 +1,4 @@
 export { LogLevels } from 'consola'
 import { useLogger } from '@nuxt/kit'
-export default useLogger('nuxt:tailwindcss')
+
+export default useLogger('nuxt:tailwindcss')

src/module.ts

@@ -87,7 +87,6 @@ export default defineNuxtModule<ModuleOptions>({
     await nuxt.callHook('tailwindcss:resolvedConfig', resolvedConfig)
 
     // Expose resolved tailwind config as an alias
-    // https://tailwindcss.com/docs/configuration/#referencing-in-javascript
     if (moduleOptions.exposeConfig) {
       const exposeConfig = resolveExposeConfig({ level: moduleOptions.exposeLevel, ...(typeof moduleOptions.exposeConfig === 'object' ? moduleOptions.exposeConfig : {})})
       createTemplates(resolvedConfig, exposeConfig, nuxt)
@@ -187,7 +186,7 @@ export default defineNuxtModule<ModuleOptions>({
     } else {
       // production only
       if (moduleOptions.viewer) {
-        const configTemplate = addTemplate({ filename: 'tw-viewer.config.cjs', getContents: () => `module.exports = ${JSON.stringify(tailwindConfig)}`, write: true })
+        const configTemplate = addTemplate({ filename: 'tailwind.config/viewer-config.cjs', getContents: () => `module.exports = ${JSON.stringify(tailwindConfig)}`, write: true })
         exportViewer(configTemplate.dst, resolveViewerConfig(moduleOptions.viewer))
       }
     }

src/resolvers.ts

@@ -46,16 +46,16 @@ export const resolveContentPaths = (srcDir: string, nuxt = useNuxt()) => {
       return []
     })(),
 
-    r(`${nuxt.options.dir.layouts}/**/*${sfcExtensions}`),
+    nuxt.options.dir.layouts && r(`${nuxt.options.dir.layouts}/**/*${sfcExtensions}`),
     ...([true, undefined].includes(nuxt.options.pages) ? [r(`${nuxt.options.dir.pages}/**/*${sfcExtensions}`)] : []),
 
-    r(`${nuxt.options.dir.plugins}/**/*${defaultExtensions}`),
+    nuxt.options.dir.plugins && r(`${nuxt.options.dir.plugins}/**/*${defaultExtensions}`),
     ...importDirs.map(d => `${d}/**/*${defaultExtensions}`),
 
     r(`{A,a}pp${sfcExtensions}`),
     r(`{E,e}rror${sfcExtensions}`),
     r(`app.config${defaultExtensions}`),
-  ]
+  ].filter(Boolean)
 }
 
 /**

src/templates.ts

@@ -63,7 +63,7 @@ export default function createTemplates (resolvedConfig: Partial<TWConfig> | Res
 
   dtsContent.push(`declare module "${config.alias}" {${configOptions.map(v => ` export const ${v}: typeof import("${join(config.alias, v)}")["default"];`).join('')} const defaultExport: { ${configOptions.map(v => `"${v}": typeof ${v}`)} }; export default defaultExport; }`)
   const typesTemplate = addTemplate({
-    filename: 'tailwind.config.d.ts',
+    filename: 'types/tailwind.config.d.ts',
     getContents: () => dtsContent.join('\n'),
     write: true
   })

src/viewer.ts

@@ -1,5 +1,5 @@
 import { underline, yellow } from 'colorette'
-import { eventHandler, sendRedirect } from 'h3'
+import { eventHandler, sendRedirect, H3Event } from 'h3'
 import { addDevServerHandler, isNuxt2, isNuxt3, useNuxt } from '@nuxt/kit'
 import { withTrailingSlash, withoutTrailingSlash, joinURL, cleanDoubleSlashes } from 'ufo'
 import logger from './logger'
@@ -11,6 +11,7 @@ export const setupViewer = async (twConfig: Partial<TWConfig>, config: ViewerCon
   // @ts-ignore
   const createServer = await import('tailwind-config-viewer/server/index.js').then(r => r.default || r) as any
   const routerPrefix = isNuxt3() ? route : undefined
+
   const _viewerDevMiddleware = createServer({ tailwindConfigProvider: () => twConfig, routerPrefix }).asMiddleware()
   const viewerDevMiddleware = eventHandler((event) => {
     const withoutSlash = withoutTrailingSlash(route)
@@ -19,11 +20,13 @@ export const setupViewer = async (twConfig: Partial<TWConfig>, config: ViewerCon
     }
     _viewerDevMiddleware(event.node?.req || event.req, event.node?.res || event.res)
   })
+
   if (isNuxt3()) { addDevServerHandler({ route, handler: viewerDevMiddleware }) }
   // @ts-ignore
   if (isNuxt2()) { nuxt.options.serverMiddleware.push({ route, handler: (req, res) => viewerDevMiddleware(new H3Event(req, res)) }) }
+
   nuxt.hook('listen', (_, listener) => {
-    const viewerUrl = `${cleanDoubleSlashes(joinURL(withoutTrailingSlash(listener.url), route))}`
+    const viewerUrl = `${cleanDoubleSlashes(joinURL(withoutTrailingSlash(listener.url), config.endpoint))}`
     logger.info(`Tailwind Viewer: ${underline(yellow(withTrailingSlash(viewerUrl)))}`)
   })
 }

test/sink.test.ts

@@ -1,14 +1,25 @@
-import { describe, test, expect } from 'vitest'
+import { describe, test, expect, beforeAll } from 'vitest'
 import { existsSync, readFileSync } from 'node:fs'
+import { exec } from 'node:child_process'
 import { ofetch } from 'ofetch'
 import { r } from './utils'
 
 const fixturePath = r('', 'nuxt.com')
 
-describe.skipIf(!existsSync(fixturePath))('nuxt.com', async () => {
+describe('nuxt.com', async () => {
   // await setupNuxtTailwind({}, {}, {}, fixturePath)
   // was going to use test-utils but gave up trying to set it up properly
 
+  beforeAll(() => {
+    const generateCommand = exec(`cd ${fixturePath} && pnpm generate`);
+    while (true) {
+      if (existsSync(`${fixturePath}.output/public/index.html`)) {
+        setTimeout(() => generateCommand.kill(), 5000);
+        break;
+      }
+    }
+  })
+
   test('check homepage css', async () => {
     const getStyles = (html: string) => {
       const searchText = '<style>/*! tailwindcss'