feat: upgrade to rollup 3 and vite 4

examples/svelte3/package.json

@@ -13,15 +13,15 @@
  },
  "type": "module",
  "dependencies": {
- "svelte": "^3.49.0"
+ "svelte": "^3.54.0"
  },
  "devDependencies": {
  "@histoire/plugin-svelte": "workspace:*",
- "@sveltejs/vite-plugin-svelte": "^1.0.1",
+ "@sveltejs/vite-plugin-svelte": "^2.0.0",
  "cypress": "^10.8.0",
  "histoire": "workspace:*",
  "start-server-and-test": "^1.14.0",
  "svelte-preprocess": "^4.10.7",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  }
 }

examples/sveltekit/package.json

@@ -24,11 +24,11 @@
  "@sveltejs/kit": "next",
  "@types/cookie": "^0.5.1",
  "histoire": "workspace:*",
- "svelte": "^3.49.0",
+ "svelte": "^3.54.0",
  "svelte-check": "^2.7.1",
  "svelte-preprocess": "^4.10.7",
  "tslib": "^2.3.1",
  "typescript": "^4.7.4",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  }
 }

examples/vue2/package.json

@@ -12,9 +12,9 @@
  },
  "devDependencies": {
  "@histoire/plugin-vue2": "workspace:*",
- "@vitejs/plugin-vue2": "^1.1.2",
+ "@vitejs/plugin-vue2": "^2.1.0",
  "histoire": "workspace:*",
- "vite": "^3.0.5",
+ "vite": "^4.0.0",
  "vue-template-compiler": "^2.7.8"
  }
 }

examples/vue3-percy/package.json

@@ -13,8 +13,8 @@
  "devDependencies": {
  "@histoire/plugin-percy": "workspace:*",
  "@histoire/plugin-vue": "workspace:*",
- "@vitejs/plugin-vue": "^3.0.1",
+ "@vitejs/plugin-vue": "^4.0.0",
  "histoire": "workspace:*",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  }
 }

examples/vue3-screenshot/package.json

@@ -13,8 +13,8 @@
  "devDependencies": {
  "@histoire/plugin-screenshot": "workspace:*",
  "@histoire/plugin-vue": "workspace:*",
- "@vitejs/plugin-vue": "^3.0.1",
+ "@vitejs/plugin-vue": "^4.0.0",
  "histoire": "workspace:*",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  }
 }

examples/vue3-themed/package.json

@@ -11,9 +11,9 @@
  "vue": "^3.2.31"
  },
  "devDependencies": {
- "@vitejs/plugin-vue": "^3.0.1",
+ "@vitejs/plugin-vue": "^4.0.0",
  "@histoire/plugin-vue": "workspace:*",
  "histoire": "workspace:*",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  }
 }

examples/vue3/package.json

@@ -21,11 +21,11 @@
  "@histoire/app": "workspace:*",
  "@histoire/plugin-vue": "workspace:*",
  "@histoire/vendors": "workspace:*",
- "@vitejs/plugin-vue": "^3.0.1",
+ "@vitejs/plugin-vue": "^4.0.0",
  "cypress": "^9.5.3",
  "histoire": "workspace:*",
  "sass": "^1.50.0",
  "start-server-and-test": "^1.14.0",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  }
 }

package.json

@@ -62,7 +62,7 @@
  "eslint": "*",
  "eslint-plugin-promise": "*",
  "eslint-plugin-vue": "*",
- "vite": "^2.9.0 || ^3.0.0",
+ "vite": "^2.9.0 || ^3.0.0 || ^4.0.0",
  "vue": "*"
  }
  }

packages/histoire-app/package.json

@@ -40,7 +40,7 @@
  "@tailwindcss/typography": "^0.5.2",
  "@types/fs-extra": "^9.0.13",
  "@types/node": "^17.0.32",
- "@vitejs/plugin-vue": "^3.1.2",
+ "@vitejs/plugin-vue": "^4.0.0",
  "autoprefixer": "^10.4.4",
  "chokidar": "^3.5.3",
  "concurrently": "^7.1.0",
@@ -51,7 +51,7 @@
  "postcss-import": "^14.1.0",
  "tailwindcss": "^3.0.23",
  "typescript": "^4.7.4",
- "vite": "^3.1.4",
+ "vite": "^4.0.0",
  "vue": "^3.2.31"
  }
 }

packages/histoire-controls-stories/package.json

@@ -24,8 +24,8 @@
  },
  "devDependencies": {
  "@histoire/plugin-vue": "workspace:*",
- "@vitejs/plugin-vue": "^3.1.2",
+ "@vitejs/plugin-vue": "^4.0.0",
  "histoire": "workspace:*",
- "vite": "^3.1.4"
+ "vite": "^4.0.0"
  }
 }

packages/histoire-controls/package.json

@@ -53,7 +53,7 @@
  "@peeky/server": "^0.14.0",
  "@peeky/test": "^0.14.1",
  "@types/node": "^17.0.32",
- "@vitejs/plugin-vue": "^2.3.1",
+ "@vitejs/plugin-vue": "^4.0.0",
  "@vue/test-utils": "^2.0.0-rc.19",
  "@vueuse/core": "^8.2.5",
  "autoprefixer": "^10.4.4",
@@ -63,7 +63,7 @@
  "postcss-import": "^14.1.0",
  "tailwindcss": "^3.0.23",
  "typescript": "^4.7.4",
- "vite": "^3.1.4",
+ "vite": "^4.0.0",
  "vue": "^3.2.31",
  "vue-tsc": "^0.35.2"
  }

packages/histoire-plugin-nuxt/package.json

@@ -34,7 +34,7 @@
  "@nuxt/schema": "^3.0.0-rc.11",
  "histoire": "workspace:*",
  "typescript": "^4.7.4",
- "vite": "^3.1.4"
+ "vite": "^4.0.0"
  },
  "peerDependencies": {
  "@histoire/plugin-vue": "^0.11.9",

packages/histoire-plugin-svelte/package.json

@@ -52,7 +52,7 @@
  "histoire": "workspace:*",
  "svelte": "^3.49.0",
  "svelte-preprocess": "^4.10.7",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  },
  "peerDependencies": {
  "histoire": "^0.11.9",

packages/histoire-plugin-vue/package.json

@@ -52,9 +52,10 @@
  "@types/node": "^17.0.32",
  "change-case": "^4.1.2",
  "concurrently": "^7.1.0",
+ "globby": "^13.1.1",
  "typescript": "^4.7.4",
  "histoire": "workspace:*",
- "vite": "^3.1.4",
+ "vite": "^4.0.0",
  "vue": "^3.2.31"
  },
  "peerDependencies": {

packages/histoire-plugin-vue/vite.config.ts

@@ -1,6 +1,35 @@
 import { defineConfig } from 'vite'
+import fs from 'node:fs'
+import { globbySync } from 'globby'
 
 export default defineConfig({
+ plugins: [
+ {
+ name: 'histoire:preserve:import.dynamic',
+ enforce: 'pre',
+ transform (code) {
+ if (code.includes('import(')) {
+ return {
+ code: code.replace(/import\(/g, 'import__dyn('),
+ }
+ }
+ },
+ closeBundle () {
+ try {
+ const files = globbySync('./dist/**/*.js')
+ for (const file of files) {
+ const content = fs.readFileSync(file, 'utf-8')
+ if (content.includes('import__dyn')) {
+ fs.writeFileSync(file, content.replace(/import__dyn\(/g, 'import(/* @vite-ignore */'), 'utf-8')
+ }
+ }
+ } catch (e) {
+ console.error(e)
+ }
+ },
+ },
+ ],
+
  build: {
  emptyOutDir: false,
  outDir: 'dist/bundled',

packages/histoire-plugin-vue2/package.json

@@ -46,9 +46,10 @@
  "@types/node": "^17.0.32",
  "change-case": "^4.1.2",
  "concurrently": "^7.1.0",
+ "globby": "^13.1.1",
  "histoire": "workspace:*",
  "typescript": "^4.7.4",
- "vite": "^3.1.4",
+ "vite": "^4.0.0",
  "vue": "^2.7.8"
  },
  "peerDependencies": {

packages/histoire-plugin-vue2/vite.config.ts

@@ -1,6 +1,35 @@
 import { defineConfig } from 'vite'
+import fs from 'node:fs'
+import { globbySync } from 'globby'
 
 export default defineConfig({
+ plugins: [
+ {
+ name: 'histoire:preserve:import.dynamic',
+ enforce: 'pre',
+ transform (code) {
+ if (code.includes('import(')) {
+ return {
+ code: code.replace(/import\(/g, 'import__dyn('),
+ }
+ }
+ },
+ closeBundle () {
+ try {
+ const files = globbySync('./dist/**/*.js')
+ for (const file of files) {
+ const content = fs.readFileSync(file, 'utf-8')
+ if (content.includes('import__dyn')) {
+ fs.writeFileSync(file, content.replace(/import__dyn\(/g, 'import(/* @vite-ignore */'), 'utf-8')
+ }
+ }
+ } catch (e) {
+ console.error(e)
+ }
+ },
+ },
+ ],
+
  build: {
  emptyOutDir: false,
  outDir: 'dist/bundled',

packages/histoire-shared/package.json

@@ -36,10 +36,10 @@
  "picocolors": "^1.0.0"
  },
  "peerDependencies": {
- "vite": "^2.9.0 || ^3.0.0"
+ "vite": "^2.9.0 || ^3.0.0 || ^4.0.0"
  },
  "devDependencies": {
  "typescript": "^4.7.4",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  }
 }

packages/histoire-vendors/package.json

@@ -32,17 +32,17 @@
  },
  "devDependencies": {
  "@iconify/vue": "^3.2.1",
- "@rollup/plugin-commonjs": "^22.0.1",
- "@rollup/plugin-node-resolve": "^13.3.0",
+ "@rollup/plugin-commonjs": "^23.0.3",
+ "@rollup/plugin-node-resolve": "^15.0.1",
  "@types/node": "^18.0.3",
  "@vueuse/core": "^8.2.5",
  "execa": "^6.1.0",
  "floating-vue": "^2.0.0-beta.19",
  "fs-extra": "^10.0.1",
  "globby": "^13.1.1",
  "pinia": "^2.0.13",
- "rollup": "^2.75.7",
- "rollup-plugin-typescript2": "^0.32.1",
+ "rollup": "^3.5.1",
+ "rollup-plugin-typescript2": "^0.34.1",
  "scroll-into-view-if-needed": "^2.2.29",
  "typescript": "^4.7.4",
  "vue-router": "^4.0.14",

packages/histoire/package.json

@@ -69,10 +69,10 @@
  "shiki": "0.11.1",
  "sirv": "^2.0.2",
  "tinypool": "^0.1.2",
- "vite-node": "0.23.4"
+ "vite-node": "0.26.0"
  },
  "peerDependencies": {
- "vite": "^2.9.0 || ^3.0.0"
+ "vite": "^2.9.0 || ^3.0.0 || ^4.0.0"
  },
  "devDependencies": {
  "@peeky/server": "^0.14.0",
@@ -81,8 +81,8 @@
  "@types/markdown-it": "^12.2.3",
  "@types/micromatch": "^4.0.2",
  "@types/node": "^17.0.32",
- "rollup": "^2.59.0",
+ "rollup": "^3.5.1",
  "typescript": "^4.7.4",
- "vite": "^3.0.5"
+ "vite": "^4.0.0"
  }
 }

packages/histoire/src/node/build.ts

@@ -14,11 +14,11 @@ import type {
  BuildEndCallback,
  PreviewStoryCallback,
 } from '@histoire/shared'
+import type { RollupOutput } from 'rollup'
 import { APP_PATH } from './alias.js'
 import { Context } from './context.js'
 import { getViteConfigWithPlugins } from './vite.js'
 import { findAllStories } from './stories.js'
-import type { RollupOutput } from 'rollup'
 import { useCollectStories } from './collect/index.js'
 import { BuildPluginApi } from './plugin.js'
 import { useModuleLoader } from './load.js'