poveste 0.5.3 → 0.6.0

package/src/node/build.ts

@@ -39,6 +39,24 @@ const PRELOAD_MODULES = [
   'vendor',
 ]
 
+// Kept out of the shared `vendor` chunk because only the app UI imports them,
+// while `vendor` is imported by the sandbox too.
+//
+// Shiki is the source panel's syntax highlighter: 386 grammars and 60 themes,
+// and it was the bulk of an 11.5 MB `vendor`. The sandbox entry pulls seven Vue
+// exports from that chunk and nothing else, but a grid renders one sandbox
+// iframe per cell and each iframe is its own realm — so every cell parsed and
+// executed all 11.5 MB again, with the HTTP cache saving only the download.
+// That was 34% of a scroll profile spent in top-level vendor evaluation (#103).
+//
+// They go to a chunk of their own rather than being left to Rollup: leaving
+// placement automatic emitted one chunk per grammar — 402 assets — and tripled
+// the blocking time it was meant to cut.
+const APP_ONLY_VENDORS = [
+  /[\\/]node_modules[\\/]shiki[\\/]/,
+  /[\\/]node_modules[\\/]@shikijs[\\/]/,
+]
+
 const PREFETCHED_MODULES = [
   'StoryView',
   'reactivity',
@@ -155,7 +173,23 @@ export async function build(ctx: Context) {
       // Force chunk strategy
       config.build.rollupOptions.output = {
         manualChunks(id) {
+          // Vite's runtime helpers (`\0vite/preload-helper.js` and friends) are
+          // virtual modules, so the node_modules routing below never sees them
+          // and their placement is left to the bundler — which parked
+          // `__vitePreload` inside the 10 MB `highlighter` chunk. Every chunk
+          // importing the helper then statically imported the whole highlighter,
+          // and the sandbox was back to evaluating it once per grid cell (#197),
+          // undoing exactly what `APP_ONLY_VENDORS` is for. Pin them somewhere
+          // harmless instead of leaving the choice to chunking heuristics.
+          if (id.replace(/^\0/, '').startsWith('vite/')) {
+            return 'app-runtime'
+          }
+
           if (!id.includes('@poveste/app') && id.includes('node_modules')) {
+            if (APP_ONLY_VENDORS.some(test => test.test(id))) {
+              return 'highlighter'
+            }
+
             for (const test of ctx.config.build?.excludeFromVendorsChunk ?? []) {
               if ((
                 typeof test === 'string' && id.includes(test)

package/src/node/builtin-plugins/pinceau-tokens.ts

@@ -73,8 +73,8 @@ export function pinceauTokens(_options: PinceauTokensOptions = {}): Plugin {
 function storyTemplate(pinceauConfig: any) {
   pinceauConfig = pinceauConfig?.theme || pinceauConfig?.default?.theme || {}
 
-  return `import 'poveste-style'
-import './style.css'
+  // No `import 'poveste-style'` — see the tailwind plugin's template (#219).
+  return `import './style.css'
 import { createApp, h, markRaw, ref } from ${getInjectedImport('@poveste/vendors/vue')}
 import {
   HstColorShades,

package/src/node/commands/port.ts

@@ -27,3 +27,15 @@ export function resolvePort(value: unknown, command: string): number | undefined
 
   return port
 }
+
+/**
+ * The HMR socket port for a book served on `devPort`. Derived from the dev port
+ * so each concurrent dev server's socket is as distinct as its book port (#175),
+ * offset clear of the usual dev-port range and wrapped so it stays a valid port
+ * for an unusually high `--port`. `@nuxt/vite-builder` otherwise pins every
+ * server to the framework default (24678), a constant that collides (#221).
+ */
+export function hmrPortFor(devPort: number | undefined): number {
+  const base = devPort ?? 6006
+  return base < 45536 ? base + 20000 : base - 20000
+}

package/src/node/config.ts

@@ -15,7 +15,6 @@ import {
   mergeConfig as mergeViteConfig,
   resolveConfig as resolveViteConfig,
 } from 'vite'
-import { tailwindTokens } from './builtin-plugins/tailwind-tokens.js'
 import { vanillaSupport } from './builtin-plugins/vanilla-support/plugin.js'
 import { defaultColors } from './colors.js'
 import { findUp } from './util/find-up.js'
@@ -26,7 +25,6 @@ export function getDefaultConfig(): PovesteConfig {
   return {
     plugins: [
       vanillaSupport(),
-      tailwindTokens(),
     ],
     outDir: '.poveste/dist',
     storyMatch: [
@@ -250,6 +248,16 @@ export const mergeConfig = createDefu((obj: any, key, value) => {
     return true
   }
 
+  // An ignore list adds to the defaults rather than replacing them. Under the
+  // replace rule below, `storyIgnored: ['**/fixtures/**']` silently dropped
+  // `**/node_modules/**`, and the watchers then crawled the pnpm store until
+  // the build died with EMFILE (#244). `storyMatch` stays on the replace rule:
+  // narrowing it is a legitimate use.
+  if (obj[key] && key === 'storyIgnored') {
+    obj[key] = [...new Set([...obj[key], ...value])]
+    return true
+  }
+
   // By default, arrays should be replaced
   if (obj[key] && Array.isArray(obj[key])) {
     obj[key] = value

package/src/node/index.ts

@@ -1,4 +1,7 @@
 export { defaultColors } from './colors.js'
 export * from './config.js'
 export * from './plugin.js'
+// A plugin that generates story source needs to reference poveste's own
+// vendored copies of Vue and the controls from inside that generated code.
+export { getInjectedImport } from './util/vendors.js'
 export * from '@poveste/shared'

package/src/node/markdown.ts

@@ -10,12 +10,12 @@ import MarkdownIt from 'markdown-it'
 import anchor from 'markdown-it-anchor'
 import attrs from 'markdown-it-attrs'
 import { full as emoji } from 'markdown-it-emoji'
-import micromatch from 'micromatch'
 import path from 'pathe'
 import pc from 'picocolors'
 import { bundledLanguages, createHighlighter } from 'shiki'
 import { addStory, notifyStoryChange, removeStory } from './stories.js'
 import { slugify } from './util/slugify.js'
+import { createWatchIgnore } from './util/watch-ignore.js'
 
 const onMarkdownListChangeHandlers: (() => unknown)[] = []
 
@@ -161,16 +161,7 @@ export async function createMarkdownFilesWatcher(ctx: Context) {
 
   const watcher = chokidar.watch('.', {
     cwd: ctx.root,
-    ignored: (path, stats) => {
-      if (ctx.config.storyIgnored.some(pattern => micromatch.isMatch(path, pattern))) {
-        return true
-      }
-      if (micromatch.isMatch(path, '**/*.story.md')) {
-        return false
-      }
-
-      return stats?.isFile()
-    },
+    ignored: createWatchIgnore(ctx.config.storyIgnored, ['**/*.story.md']),
   })
 
   /**

package/src/node/server.ts

@@ -4,6 +4,7 @@ import { performance } from 'node:perf_hooks'
 import pc from 'picocolors'
 import { createServer as createViteServer, mergeConfig as mergeViteConfig } from 'vite'
 import { useCollectStories } from './collect/index.js'
+import { hmrPortFor } from './commands/port.js'
 import { useModuleLoader } from './load.js'
 import { createMarkdownFilesWatcher, onMarkdownListChange } from './markdown.js'
 import { DevEventPluginApi, DevPluginApi } from './plugin.js'
@@ -22,7 +23,22 @@ export async function createServer(ctx: Context, options: CreateServerOptions =
   const getViteServer = async (collecting: boolean) => {
     const { viteConfig, viteConfigFile } = await getViteConfigWithPlugins(collecting, ctx)
 
-    if (!collecting) {
+    if (collecting) {
+      // The collection server drives vite-node and has no browser, so it needs
+      // no HMR socket. Left enabled, `@nuxt/vite-builder` gives it one on the
+      // framework default port (24678) — see the book server below.
+      viteConfig.server.hmr = false
+    }
+    else {
+      // `@nuxt/vite-builder` pins the HMR socket to the constant 24678 on every
+      // server it configures, so two poveste dev servers on different `--port`s
+      // collide on it and the second silently loses HMR (#221). It only does
+      // this when `server.hmr` carries no port of its own (it fills the gap with
+      // `defu`), so pin the socket to a port derived from this book's `--port`,
+      // before the config is resolved: each dev server then owns a distinct one
+      // (#175).
+      viteConfig.server.hmr = { port: hmrPortFor(options.port ?? viteConfig.server.port) }
+
       if (options.open) {
         viteConfig.server.open = true
       }

package/src/node/stories.ts

@@ -5,6 +5,7 @@ import chokidar from 'chokidar'
 import { globby } from 'globby'
 import micromatch from 'micromatch'
 import { basename, resolve } from 'pathe'
+import { createWatchIgnore } from './util/watch-ignore.js'
 
 type StoryChangeHandler = (file?: ServerStoryFile) => unknown
 const storyChangeHandlers: StoryChangeHandler[] = []
@@ -60,17 +61,7 @@ export async function watchStories(newContext: Context) {
 
   const watcher = chokidar.watch(baseWatchPaths, {
     cwd: context.root,
-    ignored: (path, stats) => {
-      if (resolvedStoryIgnored.some(pattern => micromatch.isMatch(path, pattern))) {
-        return true
-      }
-      if (resolveStoryMatch.some(pattern => micromatch.isMatch(path, pattern))) {
-        return false
-      }
-
-      // Allow directories to be traversed, only ignore files that don't match
-      return stats?.isFile() ?? false
-    },
+    ignored: createWatchIgnore(resolvedStoryIgnored, resolveStoryMatch),
   })
 
   watcher

package/src/node/util/watch-ignore.ts

@@ -0,0 +1,13 @@
+import type { Stats } from 'node:fs'
+import micromatch from 'micromatch'
+
+// chokidar 4 passes absolute paths, so `**` must cross dot segments (`.claude/`, `node_modules/.pnpm`).
+const options = { dot: true }
+
+export function createWatchIgnore(ignored: string[], included: string[]) {
+  return (path: string, stats?: Stats): boolean => {
+    if (micromatch.isMatch(path, ignored, options)) return true
+    if (micromatch.isMatch(path, included, options)) return false
+    return stats?.isFile() ?? false
+  }
+}

package/src/node/virtual/resolved-generated-global-setup.ts

@@ -1,22 +1,30 @@
 import type { Context } from '../context.js'
 import { GENERATED_SETUP_CODE } from './index.js'
-import { declareEmptySetupFns, getSetupFnNames, ID_SEPARATOR } from './util.js'
+import { declareEmptySetupFns, getSetupFnGroups, ID_SEPARATOR } from './util.js'
 
 export function resolvedGeneratedGlobalSetup(ctx: Context) {
   if (ctx.config.setupCode) {
+    const groups = getSetupFnGroups(ctx)
+    const canonicals = new Set(groups.map(g => g.canonical))
     return [
       // Import
       `${ctx.config.setupCode.map((c, index) => `import * as setup_${index} from '${GENERATED_SETUP_CODE}${ID_SEPARATOR}${index}'`).join('\n')}`,
       // List
       `const setupList = [${ctx.config.setupCode.map((c, index) => `setup_${index}`).join(', ')}]`,
-      // Setups
-      ...getSetupFnNames(ctx).map(fnName => `export async function ${fnName} (payload) {
+      // Setups: one real function per plugin, under its canonical name only.
+      ...groups.map(g => `export async function ${g.canonical} (payload) {
         for (const setup of setupList) {
-          if (setup?.${fnName}) {
-            await setup.${fnName}(payload)
+          if (setup?.${g.canonical}) {
+            await setup.${g.canonical}(payload)
           }
         }
       }`),
+      // Aliases are declared `undefined`, not emitted as functions: only the
+      // canonical hook is callable, so `getSetupHook` sees one hook in our own
+      // generated module rather than warning that it exports two aliases (#231).
+      ...[...new Set(groups.flatMap(g => g.aliases))]
+        .filter(name => !canonicals.has(name))
+        .map(name => `export const ${name} = undefined`),
     ].join('\n')
   }
   else {

package/src/node/virtual/util.ts

@@ -10,6 +10,20 @@ export function getSetupFnNames(ctx: Context) {
   return [...new Set(ctx.supportPlugins.flatMap(p => p.setupFn))]
 }
 
+/**
+ * Setup hooks grouped by the plugin that contributes them, canonical name first.
+ * A plugin's `setupFn` lists one hook under several names — `['setupVue3',
+ * 'setupVue']` is a single hook whose established name is `setupVue3` and whose
+ * alias is `setupVue`. The first is canonical; the rest are aliases kept so
+ * older setup files still resolve.
+ */
+export function getSetupFnGroups(ctx: Context) {
+  return ctx.supportPlugins.map((p) => {
+    const names = typeof p.setupFn === 'string' ? [p.setupFn] : p.setupFn
+    return { canonical: names[0], aliases: names.slice(1) }
+  })
+}
+
 /**
  * Declares the setup hooks as named exports set to `undefined`.
  *

package/src/node/vite.ts

@@ -11,6 +11,7 @@ import { dirname, join, relative } from 'pathe'
 import {
   loadConfigFromFile as loadViteConfigFromFile,
   mergeConfig as mergeViteConfig,
+  searchForWorkspaceRoot,
 } from 'vite'
 import { APP_PATH, TEMP_PATH } from './alias.js'
 import { createMarkdownPlugins } from './markdown.js'
@@ -172,6 +173,10 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
               TEMP_PATH,
               ctx.resolvedViteConfig.root,
               process.cwd(),
+              // Vite's own default, which setting `allow` at all replaces. In a
+              // workspace the app's deps resolve above the project — the
+              // bundled font under the root `node_modules` was refused (#252).
+              searchForWorkspaceRoot(process.cwd()),
               ...supportPluginAllowPaths,
               ...process.env.POVESTE_DEV
                 ? [
@@ -188,7 +193,13 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
         define: {
           // We need to force this to be able to use `devtoolsRawSetupState`
           '__VUE_PROD_DEVTOOLS__': 'true',
-          // Disable warnings
+          // Vue's esm-bundler build expects every feature flag to be injected;
+          // in a production build an undefined one logs a warning per realm.
+          '__VUE_OPTIONS_API__': 'true',
+          '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': 'false',
+          // `bin.ts` sets this per command: development for `dev`, production
+          // for `build` and `preview`. Every built book used to ship the
+          // development build of Vue, Pinia, vue-router and VueUse.
           'process.env.NODE_ENV': JSON.stringify(isServer ? 'production' : process.env.NODE_ENV ?? 'development'),
           ...!isServer
             ? {

package/dist/node/builtin-plugins/tailwind-tokens.d.ts

@@ -1,11 +0,0 @@
-import type { Plugin } from '@poveste/shared';
-export interface TailwindTokensOptions {
-    /**
-     * Path to the CSS entrypoint that imports Tailwind and declares `@theme`.
-     * Tailwind v4 is CSS-first, so the design tokens are read from CSS rather
-     * than from a JS config. Auto-detected when omitted.
-     */
-    cssFile?: string;
-}
-export declare function tailwindTokens(options?: TailwindTokensOptions): Plugin;
-//# sourceMappingURL=tailwind-tokens.d.ts.map

package/dist/node/builtin-plugins/tailwind-tokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind-tokens.d.ts","sourceRoot":"","sources":["../../../src/node/builtin-plugins/tailwind-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,iBAAiB,CAAA;AAI5D,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAqBD,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CAkE1E"}