test #build resolution issue

storybook-vue · Feb 20, 2024 · 0948d8e · 0948d8e
1 parent 32057a8
commit 0948d8e
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 71 deletions.
diff --git a/packages/storybook-nuxt/build.config.ts b/packages/storybook-nuxt/build.config.ts
@@ -19,6 +19,7 @@ export default defineBuildConfig({
   dependencies: [
     'vue-router',
     'vue',
+    'nuxt',
   ],
   externals: [
     'nuxt',
@@ -29,10 +30,6 @@ export default defineBuildConfig({
     '@vue/shared',
     '@unhead/vue',
     '@nuxt/devtools-kit',
-    '#app/composables/state',
-    '#build/css',
-    '#build/fetch',
-    '#build/paths',
   ],
   failOnWarn: false,
 })
diff --git a/packages/storybook-nuxt/package.json b/packages/storybook-nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook-vue/nuxt",
-  "version": "0.2.3-alpha.6",
+  "version": "0.2.3-alpha.7",
   "packageManager": "[email protected]",
   "description": "Storybook for Nuxt and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "license": "MIT",

diff --git a/packages/storybook-nuxt/playground/components/MyWelcome.vue b/packages/storybook-nuxt/playground/components/MyWelcome.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
-    <MyNuxtImage />
-
     <NuxtWelcome msg="Hello from Nuxt" />
+    <NuxtPage />
   </div>
 </template>
diff --git a/packages/storybook-nuxt/src/preset.ts b/packages/storybook-nuxt/src/preset.ts
@@ -161,10 +161,8 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (
   }
   const nuxtConfig = await defineNuxtConfig(await getStorybookViteConfig(config, options))
 
-  // console.log(nuxtConfig.viteConfig.build?.rollupOptions)
-
   return mergeConfig(nuxtConfig.viteConfig, {
-    build: { rollupOptions: { external: ['vue', 'vue-demi', '#build/css', '#build/paths', '#build/fetch', '#build/plugins'] } },
+    // build: { rollupOptions: { external: ['vue', 'vue-demi'] } },
     define: {
       __NUXT__: JSON.stringify({ config: nuxtConfig.nuxt.options.runtimeConfig }),
     },
@@ -190,7 +188,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (
   })
 }
 export function getNuxtProxyConfig(nuxt: Nuxt) {
-  const port = nuxt.options.runtimeConfig.public.port ?? 3000
+  const port = nuxt.options.runtimeConfig.app.port ?? 3000
   const route = '^/(_nuxt|_ipx|_icon|__nuxt_devtools__)'
   const proxy = {
     [route]:

diff --git a/packages/storybook-nuxt/src/preview.ts b/packages/storybook-nuxt/src/preview.ts
@@ -1,58 +1,6 @@
-// import { useStorybook } from './runtime/composables/storybook'
-
-import { applyPlugins, createNuxtApp } from 'nuxt/app'
-import { nextTick } from 'vue'
-import { getContext } from 'unctx'
-
-// These files must be imported first as they have side effects:
-// 1. (we set __webpack_public_path via this import, if using webpack builder)
-import '#build/paths.mjs'
-
-// 2. we set globalThis.$fetch via this import
-import '#build/fetch.mjs'
-
-// @ts-expect-error virtual file
-import plugins from '#build/plugins'
-
-import '#build/css'
-
-const globalWindow = window as any
-
-// entry()
-const logger = console
-
-async function applyNuxtPlugins(vueApp: any, storyContext: any) {
-  const nuxt = createNuxtApp({ vueApp, globalName: `nuxt-${storyContext.id}` })
-  getContext('nuxt-app').set(nuxt, true)
-  logger.log('🔌 🔌 🔌  [storybook-nuxt-plugin] setup ', { nuxtApp: nuxt })
-  async function handleVueError(err: any) {
-    await nuxt.callHook('app:error', err)
-    nuxt.payload.error = (nuxt.payload.error || err) as any
-  }
-
-  vueApp.config.errorHandler = handleVueError
-
-  try {
-    await applyPlugins(nuxt, plugins)
-  }
-  catch (err) {
-    handleVueError(err)
-  }
-  try {
-    await nuxt.hooks.callHook('app:created', vueApp)
-    await nuxt.hooks.callHook('app:beforeMount', vueApp)
-    setTimeout(async () => {
-      await nuxt.hooks.callHook('app:mounted', vueApp)
-      await nextTick()
-    }, 10)
-  }
-  catch (e) {
-    // consola.error('Vue Error in plugins ', e)
-  }
-
-  return nuxt
+async function initNuxt() {
+  const { useStorybook } = await import('./runtime/composables/storybook')
+  useStorybook()
 }
-globalWindow.PLUGINS_SETUP_FUNCTIONS ||= new Set()
-globalWindow.PLUGINS_SETUP_FUNCTIONS.add(applyNuxtPlugins)
-
-export default applyNuxtPlugins
+initNuxt()
+export default initNuxt
diff --git a/packages/storybook-nuxt/src/runtime/composables/storybook.ts b/packages/storybook-nuxt/src/runtime/composables/storybook.ts
@@ -1,6 +1,7 @@
 import consola from 'consola'
 import { applyPlugins, createNuxtApp } from 'nuxt/app'
 import { nextTick } from 'vue'
+import { getContext } from 'unctx'
 
 // These files must be imported first as they have side effects:
 // 1. (we set __webpack_public_path via this import, if using webpack builder)
@@ -12,13 +13,11 @@ import '#build/fetch.mjs'
 // @ts-expect-error virtual file
 import plugins from '#build/plugins'
 
-import '#build/css'
-
 const globalWindow = window as any
 
 async function applyNuxtPlugins(vueApp: any, storyContext: any) {
   const nuxt = createNuxtApp({ vueApp, globalName: `nuxt-${storyContext.id}` })
-
+  getContext('nuxt-app').set(nuxt, true)
   async function handleVueError(err: any) {
     await nuxt.callHook('app:error', err)
     nuxt.payload.error = (nuxt.payload.error || err) as any