poveste 0.1.0

package/src/node/vite.ts

@@ -0,0 +1,379 @@
+import type {
+  InlineConfig,
+  UserConfig as ViteConfig,
+  Plugin as VitePlugin,
+} from 'vite'
+import type { Context } from './context.js'
+import { createRequire } from 'node:module'
+import { lookup as lookupMime } from 'mrmime'
+import { dirname, join, relative } from 'pathe'
+import {
+  loadConfigFromFile as loadViteConfigFromFile,
+  mergeConfig as mergeViteConfig,
+} from 'vite'
+import { APP_PATH, TEMP_PATH } from './alias.js'
+import { createMarkdownPlugins } from './markdown.js'
+import { notifyStoryChange } from './stories.js'
+import { createVirtualFilesPlugin } from './virtual/vite-plugin.js'
+
+const require = createRequire(import.meta.url)
+
+export async function mergeHistoireViteConfig(viteConfig: InlineConfig, ctx: Context) {
+  if (ctx.config.vite) {
+    const command = ctx.mode === 'dev' ? 'serve' : 'build'
+    const overrides = typeof ctx.config.vite === 'function'
+      ? await ctx.config.vite(viteConfig as ViteConfig, {
+        mode: ctx.mode,
+        command,
+      })
+      : ctx.config.vite
+    if (overrides) {
+      viteConfig = mergeViteConfig(viteConfig, overrides)
+    }
+  }
+
+  let flatPlugins = []
+  if (viteConfig.plugins) {
+    for (const pluginOption of viteConfig.plugins) {
+      const resolvedPluginOption = await pluginOption
+      if (Array.isArray(resolvedPluginOption)) {
+        flatPlugins.push(...await Promise.all(resolvedPluginOption))
+      }
+      else {
+        flatPlugins.push(resolvedPluginOption)
+      }
+    }
+    flatPlugins = flatPlugins.filter(Boolean)
+  }
+
+  if (ctx.config.viteIgnorePlugins) {
+    flatPlugins = flatPlugins.filter(plugin => !ctx.config.viteIgnorePlugins.includes(plugin.name))
+  }
+
+  viteConfig.plugins = flatPlugins
+
+  return viteConfig
+}
+
+export interface ViteConfigWithPlugins {
+  viteConfig: InlineConfig
+  viteConfigFile: string | null
+}
+
+export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context): Promise<ViteConfigWithPlugins> {
+  const userViteConfigFile = await loadViteConfigFromFile({ command: ctx.mode === 'dev' ? 'serve' : 'build', mode: ctx.mode })
+  const userViteConfig = mergeViteConfig(userViteConfigFile?.config ?? {}, { server: { port: 6006 } })
+
+  const inlineConfig = await mergeHistoireViteConfig(userViteConfig, ctx)
+  const plugins: VitePlugin[] = []
+  const supportPluginAllowPaths = ctx.supportPlugins.flatMap((plugin) => {
+    const paths = [ctx.root, import.meta.url]
+    const result = new Set<string>()
+
+    for (const suffix of ['', '/client', '/collect']) {
+      try {
+        const resolved = require.resolve(`${plugin.moduleName}${suffix}`, {
+          paths,
+        })
+        result.add(dirname(resolved))
+      }
+      catch {
+        // Noop
+      }
+    }
+
+    return Array.from(result)
+  })
+
+  function optimizeDeps(deps: string[]): string[] {
+    const result = []
+    for (const dep of deps) {
+      result.push(dep)
+      try {
+        result.push(dirname(require.resolve(`${dep}/package.json`)))
+      }
+      catch (e) {
+        // Noop
+      }
+    }
+    return result
+  }
+
+  plugins.push({
+    name: 'histoire-vite-plugin',
+
+    config(_, { command }) {
+      return {
+        resolve: {
+          dedupe: [
+            'vue',
+          ],
+          alias: {
+            'histoire-style': join(APP_PATH, process.env.HISTOIRE_DEV ? 'app/style/main.pcss' : 'style.css'),
+          },
+          ...(isServer
+            ? {
+              // Force resolving deps like Node.JS resolution algorithm (in case some modules are not loaded with ssr: true e.g. .vue files)
+                conditions: ['node'],
+              }
+            : {}),
+        },
+        optimizeDeps: {
+          entries: [
+            `${APP_PATH}/bundle-main.js`,
+            `${APP_PATH}/bundle-sandbox.js`,
+          ],
+          include: optimizeDeps([
+            'flexsearch',
+            'shiki',
+            // Shiki dependencies
+            'vscode-oniguruma',
+            'vscode-textmate',
+          ]),
+          exclude: [
+            'poveste',
+            '@poveste/vendors',
+          ],
+        },
+        server: {
+          fs: {
+            allow: [
+              APP_PATH,
+              TEMP_PATH,
+              ctx.resolvedViteConfig.root,
+              process.cwd(),
+              ...supportPluginAllowPaths,
+              ...process.env.HISTOIRE_DEV
+                ? [
+                    '../../packages/histoire-vendors',
+                  ]
+                : [],
+            ],
+          },
+          watch: {
+            ignored: [`!**/node_modules/.histoire/**`, '**/vite.config.*'],
+          },
+          hmr: command === 'build' ? false : !isServer,
+        },
+        define: {
+          // We need to force this to be able to use `devtoolsRawSetupState`
+          '__VUE_PROD_DEVTOOLS__': 'true',
+          // Disable warnings
+          'process.env.NODE_ENV': JSON.stringify(isServer ? 'production' : process.env.NODE_ENV ?? 'development'),
+          ...!isServer
+            ? {
+              // Collect flag
+                'process.env.HST_COLLECT': 'false',
+              }
+            : {},
+          '__HST_COLLECT__': isServer,
+        },
+        cacheDir: isServer ? 'node_modules/.hst-vite-server' : 'node_modules/.hst-vite',
+      }
+    },
+
+    options() {
+      (this.meta as any).histoire = {
+        isCollecting: isServer,
+      }
+    },
+
+    handleHotUpdate(updateContext) {
+      const story = ctx.storyFiles.find(file => file.path === updateContext.file)
+      if (story) {
+        notifyStoryChange(story)
+      }
+    },
+
+    configureServer(server) {
+      let firstMount = true
+      server.ws.on('histoire:mount', () => {
+        if (!firstMount) {
+          notifyStoryChange()
+        }
+        firstMount = false
+      })
+
+      server.middlewares.use(async (req, res, next) => {
+        if (req.url!.startsWith(`${server.config.base}__sandbox`)) {
+          res.statusCode = 200
+          let html = `
+<!DOCTYPE html>
+<html>
+<head>
+  <title></title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="description" content="">
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+  // Hide spammy vite messages
+  const origConsoleLog = console.log
+  console.log = (...args) => {
+    if (typeof args[0] !== 'string' || !args[0].startsWith('[vite] connect')) {
+      origConsoleLog(...args)
+    }
+  }
+  </script>
+  <script type="module" src="/@fs/${APP_PATH}/bundle-sandbox${process.env.HISTOIRE_DEV ? '-dev' : ''}.js"></script>
+</body>
+</html>`
+          // Apply Vite HTML transforms. This injects the Vite HMR client, and
+          // also applies HTML transforms from Vite plugins
+          html = await server.transformIndexHtml(req.url, html)
+          res.setHeader('content-type', 'text/html; charset=UTF-8')
+          res.end(html)
+          return
+        }
+        next()
+      })
+
+      // serve our index.html after vite history fallback
+      return () => {
+        server.middlewares.use(async (req, res, next) => {
+          if (req.url!.endsWith('.html')) {
+            res.statusCode = 200
+
+            let html = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+    <link rel="icon" href=""/>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="description" content="">
+    ${ctx.config.theme?.favicon ? `<link rel="icon" type="${lookupMime(ctx.config.theme.favicon)}" href="${server.config.base}${ctx.config.theme.favicon}"/>` : ''}
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/@fs/${APP_PATH}/bundle-main${process.env.HISTOIRE_DEV ? '-dev' : ''}.js"></script>
+  </body>
+</html>`
+            // Apply Vite HTML transforms. This injects the Vite HMR client, and
+            // also applies HTML transforms from Vite plugins
+            html = await server.transformIndexHtml(req.url, html)
+            res.setHeader('content-type', 'text/html; charset=UTF-8')
+            res.end(html)
+            return
+          }
+          next()
+        })
+      }
+    },
+  })
+
+  plugins.push(createVirtualFilesPlugin(ctx, isServer))
+
+  // Replace dev flag
+  const flags = {
+    '_ctx.__HISTOIRE_DEV__': JSON.stringify(ctx.mode === 'dev'),
+    '__HISTOIRE_DEV__': JSON.stringify(ctx.mode === 'dev'),
+  }
+  plugins.push({
+    name: 'histoire:flags',
+    enforce: 'pre',
+    transform(code, id) {
+      if (id.match(/\.(vue|js)($|\?)/)) {
+        const original = code
+        for (const flag in flags) {
+          code = code.replace(new RegExp(flag, 'g'), flags[flag])
+        }
+        if (original !== code) return code
+      }
+    },
+  })
+
+  if (ctx.mode === 'dev') {
+    // Dev commands
+    plugins.push({
+      name: 'histoire:dev-commands',
+      configureServer(server) {
+        server.ws.on('histoire:dev-command', ({ id, params }) => {
+          const command = ctx.registeredCommands.find(c => c.id === id)
+          if (command?.serverAction) {
+            command.serverAction(params)
+          }
+        })
+      },
+    })
+  }
+
+  // Markdown
+  plugins.push(...await createMarkdownPlugins(ctx))
+
+  if (ctx.mode === 'build') {
+    // Add file name in build mode to have components names instead of <Anonymous>
+    const include = [/\.vue$/]
+    const exclude = [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
+    plugins.push({
+      name: 'histoire-file-name-plugin',
+      enforce: 'post',
+
+      transform(code, id) {
+        if (exclude.some(r => r.test(id))) return
+        if (include.some(r => r.test(id))) {
+          const file = relative(ctx.resolvedViteConfig.root, id)
+          const index = code.indexOf('export default')
+          const result = `${code.substring(0, index)}_sfc_main.__file = '${file}'\n${code.substring(index)}`
+          return result
+        }
+      },
+    })
+  }
+
+  if (process.env.HISTOIRE_DEV && !isServer) {
+    plugins.push({
+      name: 'histoire-dev-plugin',
+      config() {
+        // Examples context
+        return {
+          resolve: {
+            alias: [
+              ...[
+                ['floating-vue/dist/style.css', 'node_modules/floating-vue/dist/style.css'],
+                ['floating-vue', 'floating-vue'],
+                ['@iconify/vue', 'iconify'],
+                ['pinia', 'pinia'],
+                ['scroll-into-view-if-needed', 'scroll'],
+                ['vue-router', 'vue-router'],
+                ['@vueuse/core', 'vue-use'],
+                ['vue', 'vue'],
+              ].reduce((acc, [name, entry]) => {
+                acc.push({
+                  find: new RegExp(`^${name.replace(/\//g, '\\/')}$`),
+                  replacement: `@poveste/vendors/${entry}`,
+                })
+                acc.push({
+                  find: new RegExp(`^${name.replace(/\//g, '\\/')}\\/`),
+                  replacement: `@poveste/vendors/${entry}/`,
+                })
+                return acc
+              }, [] as any[]),
+
+              { find: /@histoire\/controls$/, replacement: '@poveste/controls/src/index.ts' },
+            ],
+          },
+        }
+      },
+    })
+  }
+
+  for (const plugin of ctx.config.plugins) {
+    if (plugin.vitePlugins) {
+      await plugin.vitePlugins(plugins)
+    }
+  }
+
+  const viteConfig = mergeViteConfig(inlineConfig, {
+    configFile: false,
+    plugins,
+  }) as InlineConfig
+
+  return {
+    viteConfig,
+    viteConfigFile: userViteConfigFile?.path ?? null,
+  }
+}

package/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    // Volar
+    "jsx": "preserve",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "baseUrl": ".",
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "alwaysStrict": true,
+    // Strict
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    // Output
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "removeComments": false,
+    "sourceMap": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "preserveWatchOutput": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "generated/**/*",
+    "dist/**/*",
+    "src/**/*.spec.ts"
+  ]
+}

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    // The markdown-collection tests boot a real Vite + jiti pipeline (~2.5s each
+    // locally, more on slow CI runners), which intermittently blew the 5s default.
+    testTimeout: 30000,
+    hookTimeout: 30000,
+  },
+})