From 35485069fcb166470e3afd36ab4d5f93a8066117 Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Tue, 27 Feb 2024 14:31:38 +0400 Subject: [PATCH] revert to plugins --- packages/storybook-nuxt/package.json | 2 +- packages/storybook-nuxt/src/preset.ts | 19 +------ packages/storybook-nuxt/src/preview.ts | 29 ++++++++-- .../src/runtime/composables/storybook.ts | 53 ------------------- .../src/runtime/plugins/storybook.ts | 50 ++++++++++++++++- 5 files changed, 75 insertions(+), 78 deletions(-) delete mode 100644 packages/storybook-nuxt/src/runtime/composables/storybook.ts diff --git a/packages/storybook-nuxt/package.json b/packages/storybook-nuxt/package.json index 8ff4369..7d3f7a8 100644 --- 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.12", + "version": "0.2.3-alpha.13", "packageManager": "pnpm@8.6.12", "description": "Storybook for Nuxt and Vite: Develop Vue3 components in isolation with Hot Reloading.", "license": "MIT", diff --git a/packages/storybook-nuxt/src/preset.ts b/packages/storybook-nuxt/src/preset.ts index 41644f0..4d3e5e4 100644 --- a/packages/storybook-nuxt/src/preset.ts +++ b/packages/storybook-nuxt/src/preset.ts @@ -17,9 +17,8 @@ const distDir = resolve(fileURLToPath( const runtimeDir = resolve(distDir, 'runtime') const pluginsDir = resolve(runtimeDir, 'plugins') const componentsDir = resolve(runtimeDir, 'components') -const composablesDir = resolve(runtimeDir, 'composables') -const dirs = [distDir, packageDir, pluginsDir, componentsDir, composablesDir] +const dirs = [distDir, packageDir, pluginsDir, componentsDir] let nuxt: Nuxt @@ -36,18 +35,6 @@ function extendComponents(nuxt: Nuxt) { }) } -/** - * extend composables to override router ( fix undefined router useNuxtApp ) - * - * @param nuxt - * */ - -async function extendComposables(nuxt: Nuxt) { - const { addImportsDir } = await import(require.resolve('@nuxt/kit')) - nuxt.options.build.transpile.push(composablesDir) - addImportsDir(composablesDir) -} - async function defineNuxtConfig(baseConfig: Record) { const { loadNuxt, buildNuxt, addPlugin, extendPages } = await import(require.resolve('@nuxt/kit')) nuxt = await loadNuxt({ @@ -68,11 +55,9 @@ async function defineNuxtConfig(baseConfig: Record) { let extendedConfig: ViteConfig = {} - nuxt.options.build.transpile.push(resolve(composablesDir, 'storybook')) nuxt.options.build.transpile.push(resolve(packageDir, 'preview')) nuxt.hook('modules:done', () => { - extendComposables(nuxt) // Override nuxt-link component to use storybook router extendComponents(nuxt) // Add iframe page @@ -123,8 +108,6 @@ async function defineNuxtConfig(baseConfig: Record) { try { await buildNuxt(nuxt) - // nuxt.options.dev = true - return { viteConfig: extendedConfig, nuxt, diff --git a/packages/storybook-nuxt/src/preview.ts b/packages/storybook-nuxt/src/preview.ts index 6eb2c33..27be96f 100644 --- a/packages/storybook-nuxt/src/preview.ts +++ b/packages/storybook-nuxt/src/preview.ts @@ -1,6 +1,25 @@ -async function initNuxt() { - const { useStorybook } = await import('./runtime/composables/storybook') - useStorybook() +const vueAppRootContainer = document.createElement('div') +vueAppRootContainer.id = '__nuxt' +vueAppRootContainer.setAttribute('hidden', 'true') +document.body.appendChild(vueAppRootContainer) + +// entry() +const logger = console +async function nuxtAppEntry() { + const nuxtApp = () => import('#app/entry').then(m => m.default).catch(() => {}) + // i + const vueAppPromise = nuxtApp().catch((_error) => { + // consola.error('Error while mounting app:', error) + }) + return vueAppPromise } -initNuxt() -export default initNuxt + +nuxtAppEntry().then((app: any) => { + logger.log('nuxtAppEntry done', app) + app().then(() => { + logger.log('nuxtAppEntry app done') + }).catch(() => { logger.log('nuxtAppEntry app error') }) +// app() +}) + +export default nuxtAppEntry diff --git a/packages/storybook-nuxt/src/runtime/composables/storybook.ts b/packages/storybook-nuxt/src/runtime/composables/storybook.ts deleted file mode 100644 index 52bcc60..0000000 --- a/packages/storybook-nuxt/src/runtime/composables/storybook.ts +++ /dev/null @@ -1,53 +0,0 @@ -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) -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' - -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 - } - - 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 -} - -export function useStorybook() { - globalWindow.PLUGINS_SETUP_FUNCTIONS ||= new Set() - globalWindow.PLUGINS_SETUP_FUNCTIONS.add(applyNuxtPlugins) - return { applyNuxtPlugins, globalWindow, plugins } -} diff --git a/packages/storybook-nuxt/src/runtime/plugins/storybook.ts b/packages/storybook-nuxt/src/runtime/plugins/storybook.ts index 6d2d762..db3f8a1 100644 --- a/packages/storybook-nuxt/src/runtime/plugins/storybook.ts +++ b/packages/storybook-nuxt/src/runtime/plugins/storybook.ts @@ -1,7 +1,20 @@ -import { defineNuxtPlugin } from 'nuxt/app' +import { applyPlugins, createNuxtApp, defineNuxtPlugin } from 'nuxt/app' 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' + import logger from 'consola' +import { nextTick } from 'vue' + +// @ts-expect-error virtual file +import plugins from '#build/plugins' + +const globalWindow = window as any export default defineNuxtPlugin({ name: 'storybook-nuxt-plugin', @@ -12,6 +25,41 @@ export default defineNuxtPlugin({ const nuxtMainApp = getContext('nuxt-app') if (nuxtMainApp) logger.info('🔌 [storybook-nuxt-plugin] setup already done ', nuxtMainApp) + if (nuxtApp.globalName !== 'nuxt') + return + const applyNuxtPlugins = async (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 + } + + 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) { + logger.error('Vue Error in plugins ', e) + } + + return nuxt + } + + globalWindow.PLUGINS_SETUP_FUNCTIONS ||= new Set() + globalWindow.PLUGINS_SETUP_FUNCTIONS.add(applyNuxtPlugins) }, hooks: {