Merge pull request #86 from storybook-vue/path-preview

fix: vit:vue plugin versions

package.json

@@ -27,20 +27,20 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.40.3",
     "@storybook-vue/nuxt": "workspace:*",
-    "@types/node": "^16.18.58",
+    "@types/node": "^16.18.60",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.51.0",
+    "eslint": "^8.53.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "lint-staged": "^13.3.0",
     "rimraf": "^5.0.5",
     "simple-git-hooks": "^2.9.0",
     "typescript": "^4.9.5",
     "ufo": "^1.3.1",
     "unbuild": "^1.2.1",
-    "vite": "^4.4.11",
+    "vite": "^4.5.0",
     "vite-hot-client": "^0.2.2",
-    "vue-tsc": "^1.8.19"
+    "vue-tsc": "^1.8.22"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

packages/storybook-nuxt-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-nuxt",
-  "version": "0.1.10",
+  "version": "0.2.0-alpha.2",
   "description": "Storybook init CLI for Nuxt ",
   "author": "Chakas@",
   "license": "ISC",

packages/storybook-nuxt-cli/src/build.ts

@@ -0,0 +1,53 @@
+import { spawn } from 'node:child_process'
+
+import path from 'node:path'
+import { existsSync } from 'node:fs'
+
+// Unicode icons for better display
+const CHECKMARK = '\u2714' // ✔
+const CROSSMARK = '\u274C' // ❌
+const STARTMARK = '\u25B6' // ▶
+
+const logger = console
+
+async function buildStorybook() {
+  logger.log(`${STARTMARK} Building Storybook ...`)
+  logger.log()
+  // Path to the project root
+  const projectRoot = process.cwd()
+
+  logger.info('🔌 projectRoot :', projectRoot)
+
+  const buildNuxtProcess = spawn('npx', ['storybook', 'build', '--output-dir', '.output/pub'], {
+    cwd: projectRoot,
+    stdio: 'inherit',
+  })
+  buildNuxtProcess.on('close', async (code) => {
+    if (code !== 0)
+      logger.error(`${CROSSMARK} nuxt build failed with code ${code}`)
+
+    else
+      logger.log(`${CHECKMARK} nuxt build successfully!`)
+  })
+
+  // Install required packages using pnpm
+}
+
+// Function to detect the package manager
+export function detectPackageManager() {
+  if (existsSync(path.join(process.cwd(), 'package-lock.json')))
+    return 'npm'
+
+  else if (existsSync(path.join(process.cwd(), 'yarn.lock')))
+    return 'yarn'
+
+  else if (existsSync(path.join(process.cwd(), 'pnpm-lock.yaml')))
+    return 'pnpm'
+
+  else if (existsSync(path.join(process.cwd(), 'bun.lock')))
+    return 'bun'
+
+  return undefined
+}
+
+export { buildStorybook }

packages/storybook-nuxt-cli/src/init.ts

@@ -13,8 +13,8 @@ const CHECKMARK = '\u2714' // ✔
 const CROSSMARK = '\u274C' // ❌
 const STARTMARK = '\u25B6' // ▶
 
-const sbVersion = '7.5.1'
-const nuxtSbVersion = '0.1.9'
+const sbVersion = '7.5.3'
+const nuxtSbVersion = '0.2.0'
 const nuxtSbModuleVersion = '7.0.0'
 
 const logger = console

packages/storybook-nuxt/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
 
+## v0.2.0
+
+[compare changes](https://github.com/storybook-vue/storybook-nuxt/compare/v0.2.0-alpha.4...v0.2.0)
+
 ## v0.1.9
 
 [compare changes](https://github.com/storybook-vue/storybook-nuxt/compare/v0.1.9-alpha.0...v0.1.9)

packages/storybook-nuxt/build.config.ts

@@ -4,8 +4,8 @@ export default defineBuildConfig({
   declaration: true,
   entries: [
     { input: 'src/index' },
+    { input: 'src/preview' },
     { input: 'src/preset', outDir: 'dist/', format: 'cjs', ext: 'js' },
-    { input: 'src/preview', outDir: 'dist/', format: 'esm', ext: 'js' },
     {
       input: 'src/runtime/', outDir: 'dist/runtime', format: 'esm', ext: 'js',
     },
@@ -18,7 +18,6 @@ export default defineBuildConfig({
   },
   dependencies: [
     'vue-router',
-    'vue',
     '@storybook/vue3',
     '@storybook/builder-vite',
     '@storybook/vue3-vite',
@@ -27,13 +26,15 @@ export default defineBuildConfig({
     'nuxt',
     'nuxt/schema',
     'nuxt/app',
+    'vue',
     '@storybook/types',
     '@storybook/vue3',
     '@vue/shared',
     '@unhead/vue',
     '@nuxt/devtools-kit',
     '#app/composables/state',
-
+    '#app/entry',
+    '#build/plugins',
   ],
   failOnWarn: false,
 })

packages/storybook-nuxt/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@storybook-vue/nuxt",
-  "version": "0.1.9",
+  "type": "module",
+  "version": "0.2.0",
   "packageManager": "[email protected]",
   "description": "Storybook for Nuxt and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "license": "MIT",
@@ -32,7 +33,6 @@
     "./preview": {
       "types": "./dist/preview.d.ts",
       "import": "./dist/preview.mjs",
-      "require": "./dist/preview.cjs",
       "default": "./preview.js"
     },
     "./package.json": "./package.json"
@@ -50,7 +50,7 @@
     "*.d.ts"
   ],
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "scripts": {
     "build": "unbuild",
@@ -61,31 +61,38 @@
     "release": "pnpm changelogen --release --push && pnpm publish"
   },
   "peerDependencies": {
-    "nuxt": "^3.6 || ^3.7",
-    "vite": "^4.0.0",
-    "vue": "^3.3.4"
+    "nuxt": "^3.6 || ^3.7 || ^3.8",
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "vue": "^3.0.0"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^0.7.2",
-    "@nuxt/kit": "3.6.5",
-    "@nuxt/schema": "3.6.5",
-    "@nuxt/vite-builder": "3.6.5",
-    "@storybook/builder-vite": "7.5.1",
-    "@storybook/vue3": "^7.5.1",
-    "@storybook/vue3-vite": "^7.5.1",
+    "@nuxt/devtools-kit": "^1.0.2",
+    "@nuxt/kit": "3.8.1",
+    "@nuxt/schema": "3.8.1",
+    "@nuxt/types": "2.17.2",
+    "@nuxt/vite-builder": "3.8.1",
+    "@storybook/builder-vite": "7.5.3",
+    "@storybook/vue3": "^7.5.3",
+    "@storybook/vue3-vite": "^7.5.3",
     "autoprefixer": "^10.4.15",
+    "nuxt": "3.8.1",
     "postcss": "^8.4.27",
     "postcss-import": "^15.1.0",
     "postcss-url": "^10.1.3",
-    "typescript": "^5.2.2",
-    "vue-router": "^4.2.5"
+    "typescript": "^5.2.2"
   },
   "devDependencies": {
-    "@storybook/types": "7.5.1",
+    "@storybook/types": "7.5.3",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "changelogen": "^0.5.5",
-    "unbuild": "^2.0.0"
+    "unbuild": "^2.0.0",
+    "vite": "4.5.0"
+  },
+  "resolutions": {
+    "@storybook/vue3": "^7.5.3",
+    "@storybook/vue3-vite": "^7.5.3",
+    "vite": "4.5.0"
   },
   "publishConfig": {
     "access": "public"

packages/storybook-nuxt/playground/package.json

@@ -18,22 +18,25 @@
     "@nuxtjs/color-mode": "^3.3.0",
     "@pinia/nuxt": "^0.4.11",
     "@storybook-vue/nuxt": "workspace:*",
-    "@storybook/addon-essentials": "7.5.0-alpha.0",
-    "@storybook/addon-interactions": "7.5.0-alpha.0",
-    "@storybook/addon-links": "7.5.0-alpha.0",
-    "@storybook/blocks": "7.5.0-alpha.0",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/blocks": "7.5.3",
     "@storybook/testing-library": "^0.2.0",
     "@types/node": "^18.17.5",
-    "nuxt": "3.6.5",
+    "nuxt": "3.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "7.5.0-alpha.0",
+    "storybook": "7.5.3",
     "typescript": "^5.1.0",
-    "vue-router": "4.2.5"
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5"
   },
   "pnpm": {
     "overrides": {
-      "nuxt": "3.6.5"
+      "nuxt": "3.8.1",
+      "vite": "4.5.0",
+      "vue": "3.3.8"
     }
   }
 }

packages/storybook-nuxt/preview.js

@@ -1 +1 @@
-export * from './dist/preview.mjs'
+export * from './dist/preview'

packages/storybook-nuxt/src/preset.ts

@@ -4,19 +4,22 @@ import { createRequire } from 'node:module'
 import type { PresetProperty } from '@storybook/types'
 import { type UserConfig as ViteConfig, mergeConfig, searchForWorkspaceRoot } from 'vite'
 import type { Nuxt } from '@nuxt/schema'
+import vuePlugin from '@vitejs/plugin-vue'
 
+import replace from '@rollup/plugin-replace'
 import type { StorybookConfig } from './types'
+import { pluginsDir } from './dirs'
 
 const packageDir = resolve(fileURLToPath(
   import.meta.url), '../..')
 const distDir = resolve(fileURLToPath(
   import.meta.url), '../..', 'dist')
 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, componentsDir, composablesDir, runtimeDir]
 
 let nuxt: Nuxt
 
@@ -62,15 +65,17 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
     throw new Error(`Storybook-Nuxt does not support '${nuxt.options.builder}' for now.`)
 
   let extendedConfig: ViteConfig = {}
+  nuxt.options.build.transpile.push(join(packageDir, 'preview'))
 
   nuxt.hook('modules:done', () => {
     extendComposables(nuxt)
+    // Override nuxt-link component to use storybook router
+    extendComponents(nuxt)
+    // nuxt.options.build.transpile.push('@storybook-vue/nuxt')
     addPlugin({
       src: join(pluginsDir, 'storybook'),
       mode: 'client',
     })
-    // Override nuxt-link component to use storybook router
-    extendComponents(nuxt)
     // Add iframe page
     extendPages((pages: any) => {
       pages.push({
@@ -85,8 +90,13 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
         config: ViteConfig | PromiseLike<ViteConfig> | Record<string, any>,
         { isClient }: any,
       ) => {
-        if (isClient)
+        if (isClient) {
+          const plugins = baseConfig.plugins.filter((plugin: any) => plugin.name !== 'vite:vue')
+          baseConfig.plugins = [...plugins,
+            vuePlugin(),
+          ]
           extendedConfig = mergeConfig(config, baseConfig)
+        }
       },
     )
   })
@@ -96,7 +106,7 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
   try {
     await buildNuxt(nuxt)
 
-    // nuxt.options.dev = true
+    nuxt.options.dev = true
 
     return {
       viteConfig: extendedConfig,
@@ -139,10 +149,19 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (
   const nuxtConfig = await defineNuxtConfig(await getStorybookViteConfig(config, options))
 
   return mergeConfig(nuxtConfig.viteConfig, {
-    build: { rollupOptions: { external: process.env.NODE_ENV === 'production' ? [] : ['vue', 'vue-demi'] } },
+    // build: { rollupOptions: { external: ['vue', 'vue-demi'] } },
     define: {
-      __NUXT__: JSON.stringify({ config: nuxtConfig.nuxt.options.runtimeConfig }),
+      '__NUXT__': JSON.stringify({ config: nuxtConfig.nuxt.options.runtimeConfig }),
+      'import.meta.client': 'true',
     },
+
+    plugins: [replace({
+      values: {
+        'import.meta.server': 'false',
+        'import.meta.client': 'true',
+      },
+      preventAssignment: true,
+    })],
     server: {
       fs: { allow: [searchForWorkspaceRoot(process.cwd()), ...dirs] },
     },

packages/storybook-nuxt/src/preview.ts

@@ -3,15 +3,23 @@ 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(() => {})
+  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
 }
 
-nuxtAppEntry().then((app) => {
-  // consola.info('nuxtAppEntry done', app)
+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

packages/storybook-nuxt/tsconfig.json

@@ -10,10 +10,10 @@
     "strict": true,
     "paths": {
       "#app": [
-        "/Users/chakir/devs/storybook-nuxt-preset/storybook-nuxt/packages/storybook-nuxt/node_modules/nuxt/dist/app"
+        "./node_modules/nuxt/dist/app"
       ],
       "#app/entry": [
-        "/Users/chakir/devs/storybook-nuxt-preset/storybook-nuxt/packages/storybook-nuxt/node_modules/nuxt/dist/app/entry"
+        "./node_modules/nuxt/dist/app/entry"
       ]
     }
   },