poveste 0.1.2 → 0.2.0

package/src/node/style-isolation/vite-plugin.ts

@@ -0,0 +1,75 @@
+import type { Plugin as VitePlugin } from 'vite'
+import { GLOBAL_LAYER_QUERY, STORY_SCOPE_ROOT } from './selectors.js'
+import { wrapUserCss } from './transforms.js'
+
+export const USER_CSS_MARK_START = '/*__PVT_USER_CSS_START__*/'
+export const USER_CSS_MARK_END = '/*__PVT_USER_CSS_END__*/'
+
+export interface UserCssScopePluginOptions {
+  enabled: boolean
+  /**
+   * 'mark' — insert sentinel comments; entry-css-merger wraps per-entry at
+   * build time. 'wrap' — wrap directly in @scope at transform time (dev,
+   * no merger).
+   */
+  mode?: 'mark' | 'wrap'
+}
+
+export function userCssScopePlugin(opts: UserCssScopePluginOptions): VitePlugin {
+  const mode = opts.mode ?? 'mark'
+  return {
+    name: 'poveste:style-isolation:user-css',
+    transform(code, id) {
+      if (!opts.enabled) return null
+      const q = id.indexOf('?')
+      const path = q === -1 ? id : id.slice(0, q)
+      const query = q === -1 ? '' : id.slice(q + 1)
+      // Cheap substring rejection of all poveste-internal CSS first.
+      if (isChromePath(path)) return null
+      if (!isCssPath(path, query)) return null
+      if (hasGlobalQuery(query)) return null
+      if (mode === 'wrap') {
+        return { code: wrapUserCss(code, { scopeRoot: STORY_SCOPE_ROOT }), map: null }
+      }
+      return {
+        code: `${USER_CSS_MARK_START}\n${code}\n${USER_CSS_MARK_END}\n`,
+        map: null,
+      }
+    },
+  }
+}
+
+const CSS_EXT_RE = /\.(?:css|pcss|postcss|scss|sass|less|styl|stylus)$/
+// Vue / Svelte / Vite virtual style modules carry the source extension as a
+// `lang.<ext>` query, e.g. `Foo.vue?vue&type=style&index=0&lang.css`.
+const CSS_LANG_QUERY_RE = /(?:^|&)lang\.(?:css|pcss|postcss|scss|sass|less|styl|stylus)(?:&|$)/
+
+function isCssPath(path: string, query: string): boolean {
+  return CSS_EXT_RE.test(path) || CSS_LANG_QUERY_RE.test(query)
+}
+
+function hasGlobalQuery(query: string): boolean {
+  if (!query) return false
+  const parts = query.split('&')
+  // `?global` is the per-import escape hatch; the `globalStyles` config marks
+  // its files with `?poveste-global-layer` and they get a cascade layer of
+  // their own in global-styles.ts.
+  return parts.includes('global')
+    || parts.some(p => p.startsWith('global='))
+    || parts.includes(GLOBAL_LAYER_QUERY)
+}
+
+export function isChromeCss(id: string): boolean {
+  const q = id.indexOf('?')
+  return isChromePath(q === -1 ? id : id.slice(0, q))
+}
+
+function isChromePath(path: string): boolean {
+  return path.includes('@poveste/app/')
+    || path.includes('poveste-app/')
+    || path.includes('@poveste/controls/')
+    || path.includes('poveste-controls/')
+    || path.includes('@poveste/vendors/')
+    || path.includes('poveste-vendors/')
+    || path.includes('virtual:$poveste-')
+}

package/src/node/util/head.ts

@@ -0,0 +1,12 @@
+import type { UseHeadInput } from 'unhead/types'
+import { createHead, transformHtmlTemplate } from 'unhead/server'
+
+export async function applyHeadTransform(html: string, head: UseHeadInput | undefined): Promise<string> {
+  if (!head) {
+    return html
+  }
+  // disableDefaults: don't inject unhead's `lang="en"` / viewport tags — Poveste's
+  // own HTML template already provides viewport, and we shouldn't override it.
+  const instance = createHead({ init: [head], disableDefaults: true })
+  return await transformHtmlTemplate(instance, html)
+}

package/src/node/virtual/markdown.ts

@@ -14,7 +14,7 @@ export const relativePath = ${JSON.stringify(relativePath)}
 if (import.meta.hot) {
   import.meta.hot.accept(newModule => {
     if (newModule) {
-      window.__hst_md_hmr(newModule)
+      window.__pvt_md_hmr(newModule)
     }
   })
 }`

package/src/node/virtual/noop.ts

@@ -1 +1,9 @@
-export const noop = () => `export default () => {}`
+import type { Context } from '../context.js'
+import { declareEmptySetupFns } from './util.js'
+
+export function noop(ctx: Context) {
+  return [
+    `export default () => {}`,
+    declareEmptySetupFns(ctx),
+  ].join('\n')
+}

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

@@ -1,6 +1,6 @@
 import type { Context } from '../context.js'
 import { GENERATED_SETUP_CODE } from './index.js'
-import { ID_SEPARATOR } from './util.js'
+import { declareEmptySetupFns, getSetupFnNames, ID_SEPARATOR } from './util.js'
 
 export function resolvedGeneratedGlobalSetup(ctx: Context) {
   if (ctx.config.setupCode) {
@@ -10,7 +10,7 @@ export function resolvedGeneratedGlobalSetup(ctx: Context) {
       // List
       `const setupList = [${ctx.config.setupCode.map((c, index) => `setup_${index}`).join(', ')}]`,
       // Setups
-      ...ctx.supportPlugins.map(p => p.setupFn).flat().map(fnName => `export async function ${fnName} (payload) {
+      ...getSetupFnNames(ctx).map(fnName => `export async function ${fnName} (payload) {
         for (const setup of setupList) {
           if (setup?.${fnName}) {
             await setup.${fnName}(payload)
@@ -20,6 +20,6 @@ export function resolvedGeneratedGlobalSetup(ctx: Context) {
     ].join('\n')
   }
   else {
-    return ''
+    return declareEmptySetupFns(ctx)
   }
 }

package/src/node/virtual/resolved-markdown-files.ts

@@ -6,8 +6,8 @@ export function resolvedMarkdownFiles(ctx: Context) {
   return `import { reactive } from ${process.env.POVESTE_DEV ? `'vue'` : getInjectedImport('@poveste/vendors/vue')}
 export const markdownFiles = reactive({${filesJs}})
 if (import.meta.hot) {
-  if (!window.__hst_md_hmr) {
-    window.__hst_md_hmr = (newModule) => {
+  if (!window.__pvt_md_hmr) {
+    window.__pvt_md_hmr = (newModule) => {
       markdownFiles[newModule.relativePath] = () => newModule
     }
   }

package/src/node/virtual/util.ts

@@ -1,5 +1,27 @@
+import type { Context } from '../context.js'
+
 export const ID_SEPARATOR = '__-__'
 
+/**
+ * Names of every setup hook contributed by the enabled support plugins, e.g.
+ * `setupVanilla`, `setupVue3`, `setupSvelte4`.
+ */
+export function getSetupFnNames(ctx: Context) {
+  return [...new Set(ctx.supportPlugins.flatMap(p => p.setupFn))]
+}
+
+/**
+ * Declares the setup hooks as named exports set to `undefined`.
+ *
+ * Consumers read them off a namespace import (`generatedSetup.setupVue3`) behind
+ * a `typeof === 'function'` guard. Without the declaration Rollup can't resolve
+ * the member access statically and warns `"setupVue3" is not exported by ...`
+ * in every consumer build.
+ */
+export function declareEmptySetupFns(ctx: Context) {
+  return getSetupFnNames(ctx).map(fnName => `export const ${fnName} = undefined`).join('\n')
+}
+
 export const PLUGINS_HAVE_DEV = [
   '@poveste/plugin-vue',
 ]

package/src/node/virtual/vite-plugin.ts

@@ -87,7 +87,7 @@ export function createVirtualFilesPlugin(ctx: Context, isServer: boolean) {
       }
 
       if (id === VirtualFiles.NOOP_ID) {
-        return VirtualFiles.noop()
+        return VirtualFiles.noop(ctx)
       }
 
       if (id === VirtualFiles.RESOLVED_CONFIG_ID) {

package/src/node/vite.ts

@@ -4,6 +4,7 @@ import type {
   Plugin as VitePlugin,
 } from 'vite'
 import type { Context } from './context.js'
+import { existsSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { lookup as lookupMime } from 'mrmime'
 import { dirname, join, relative } from 'pathe'
@@ -14,11 +15,17 @@ import {
 import { APP_PATH, TEMP_PATH } from './alias.js'
 import { createMarkdownPlugins } from './markdown.js'
 import { notifyStoryChange } from './stories.js'
+import {
+  chromeCssScopePlugin,
+  globalStylesPlugin,
+  userCssScopePlugin,
+} from './style-isolation/index.js'
+import { applyHeadTransform } from './util/head.js'
 import { createVirtualFilesPlugin } from './virtual/vite-plugin.js'
 
 const require = createRequire(import.meta.url)
 
-export async function mergeHistoireViteConfig(viteConfig: InlineConfig, ctx: Context) {
+export async function mergePovesteViteConfig(viteConfig: InlineConfig, ctx: Context) {
   if (ctx.config.vite) {
     const command = ctx.mode === 'dev' ? 'serve' : 'build'
     const overrides = typeof ctx.config.vite === 'function'
@@ -64,7 +71,7 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
   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 inlineConfig = await mergePovesteViteConfig(userViteConfig, ctx)
   const plugins: VitePlugin[] = []
   const supportPluginAllowPaths = ctx.supportPlugins.flatMap((plugin) => {
     const paths = [ctx.root, import.meta.url]
@@ -85,14 +92,41 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
     return Array.from(result)
   })
 
+  // Mirror how Vite resolves `optimizeDeps.include`: walk `node_modules` up from
+  // the project root. Deliberately not `require.resolve(dep, { paths: [root] })`
+  // — Node always folds NODE_PATH into resolution even when `paths` is given, and
+  // pnpm's bin shims point NODE_PATH at the hidden `.pnpm/node_modules` store, so
+  // every package would look reachable from every root. Vite ignores NODE_PATH.
+  function isResolvableFromRoot(dep: string): boolean {
+    let dir = ctx.root
+    while (true) {
+      if (existsSync(join(dir, 'node_modules', dep, 'package.json'))) {
+        return true
+      }
+      const parent = dirname(dir)
+      if (parent === dir) {
+        return false
+      }
+      dir = parent
+    }
+  }
+
   function optimizeDeps(deps: string[]): string[] {
     const result = []
     for (const dep of deps) {
-      result.push(dep)
+      // The bare specifier is what hoisted installs (npm, yarn, pnpm with
+      // `shamefully-hoist`) need — see histoire@a1014ab. Under strict pnpm it is
+      // unreachable from the root and Vite only logs "Failed to resolve
+      // dependency", so emit it just when the root can actually resolve it.
+      if (isResolvableFromRoot(dep)) {
+        result.push(dep)
+      }
       try {
+        // Absolute path, valid regardless of layout — this is what makes the
+        // dep optimizable under strict pnpm.
         result.push(dirname(require.resolve(`${dep}/package.json`)))
       }
-      catch (e) {
+      catch {
         // Noop
       }
     }
@@ -124,11 +158,7 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
             `${APP_PATH}/bundle-sandbox.js`,
           ],
           include: optimizeDeps([
-            'flexsearch',
             'shiki',
-            // Shiki dependencies
-            'vscode-oniguruma',
-            'vscode-textmate',
           ]),
           exclude: [
             'poveste',
@@ -168,7 +198,7 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
             : {},
           '__HST_COLLECT__': isServer,
         },
-        cacheDir: isServer ? 'node_modules/.hst-vite-server' : 'node_modules/.hst-vite',
+        cacheDir: isServer ? 'node_modules/.pvt-vite-server' : 'node_modules/.pvt-vite',
       }
     },
 
@@ -220,6 +250,7 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
   <script type="module" src="/@fs/${APP_PATH}/bundle-sandbox${process.env.POVESTE_DEV ? '-dev' : ''}.js"></script>
 </body>
 </html>`
+          html = await applyHeadTransform(html, ctx.config.head)
           // 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)
@@ -246,12 +277,14 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
     <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}"/>` : ''}
+    <style>html,body{margin:0;padding:0}</style>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/@fs/${APP_PATH}/bundle-main${process.env.POVESTE_DEV ? '-dev' : ''}.js"></script>
   </body>
 </html>`
+            html = await applyHeadTransform(html, ctx.config.head)
             // 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)
@@ -266,6 +299,21 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
   })
 
   plugins.push(createVirtualFilesPlugin(ctx, isServer))
+  plugins.push(globalStylesPlugin({
+    files: ctx.config.globalStyles ?? [],
+    rootDir: ctx.root,
+  }))
+
+  // Dev-mode isolation. User CSS is wrapped in `@scope (.__poveste-render-story)`
+  // so it cannot leak into chrome (popovers, tooltips, dropdowns). The build
+  // path emits stronger per-bundle isolation that ALSO keeps the user's
+  // teleporting-component styling working inside the sandbox iframe — in dev
+  // that case is a known trade-off, see docs/guide/css.md.
+  const isolate = ctx.config.isolateStyles !== false
+  if (ctx.mode === 'dev' && !isServer) {
+    plugins.push(userCssScopePlugin({ enabled: isolate, mode: 'wrap' }))
+    plugins.push(chromeCssScopePlugin({ enabled: isolate }))
+  }
 
   // Replace dev flag
   const flags = {