poveste 0.1.2 → 0.2.0

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

@@ -165,7 +165,7 @@ export default {
         getName: key => '@mq.' + key,
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-drop-shadow',
+        class: '__pvt-drop-shadow',
       }))),
     },
     {
@@ -178,7 +178,7 @@ export default {
         getName: shade => '{colors.' + key + '.' + shade + '}',
         search: search.value,
       }, ({ color}) => h('div', {
-        class: '__hst-shade',
+        class: '__pvt-shade',
         style: {
           backgroundColor: color,
         },
@@ -200,13 +200,13 @@ export default {
         tokens: flattenTokens(config.space),
         getName: key => '{space.' + key + '}',
       }, ({ token }) => h('div', {
-        class: '__hst-spaces',
+        class: '__pvt-spaces',
         style: {
           padding: token.value,
         },
       }, [
         h('div', {
-          class: '__hst-spaces-box',
+          class: '__pvt-spaces-box',
         }),
       ]))),
     },
@@ -219,10 +219,10 @@ export default {
         tokens: flattenTokens(config.size),
         getName: key => '{size.' + key + '}',
       }, ({ token }) => h('div', {
-        class: '__hst-width',
+        class: '__pvt-width',
       }, [
         h('div', {
-          class: '__hst-width-box',
+          class: '__pvt-width-box',
           style: {
             width: token.value,
           },
@@ -238,7 +238,7 @@ export default {
         tokens: flattenTokens(config.fontSizes),
         getName: key => '{fontSizes.' + key + '}',
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           fontSize: token.value,
         },
@@ -261,7 +261,7 @@ export default {
         tokens: flattenTokens(config.fontWeights),
         getName: key => '{fontWeights.' + key + '}',
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           fontWeight: token.value,
           fontSize: \`\${fontSize.value}px\`,
@@ -291,7 +291,7 @@ export default {
         tokens: flattenTokens(config.fonts),
         getName: key => '{fonts.' + key + '}',
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           fontFamily: token.value,
           fontSize: \`\${fontSize.value}px\`,
@@ -321,7 +321,7 @@ export default {
         tokens: flattenTokens(config.letterSpacings),
         getName: key => '{letterSpacings.' + key + '}',
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           letterSpacing: token.value,
           fontSize: \`\${fontSize.value}px\`,
@@ -375,7 +375,7 @@ export default {
         getName: key => '{shadows.' + key + '}',
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-drop-shadow',
+        class: '__pvt-drop-shadow',
         style: 'box-shadow:' + token.value,
       }))),
     },
@@ -389,7 +389,7 @@ export default {
         getName: key => '{opacity.' + key + '}',
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-drop-shadow',
+        class: '__pvt-drop-shadow',
         style: 'opacity:' + token.value,
       }))),
     },
@@ -403,7 +403,7 @@ export default {
         getName: key => '{radii.' + key + '}',
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-border-radius',
+        class: '__pvt-border-radius',
         style: {
           borderRadius: token.value,
         },
@@ -419,7 +419,7 @@ export default {
         getName: key => '{borderWidths.' + key + '}',
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-border-width',
+        class: '__pvt-border-width',
         style: {
           borderWidth: token.value,
         },
@@ -436,86 +436,86 @@ export default {
 }`
 }
 
-const css = `.__hst-shade {
+const css = `.__pvt-shade {
   height: 80px;
   border-radius: 4px;
 }
 
-.__hst-text {
+.__pvt-text {
   font-size: 4rem;
   display: flex;
   align-items: flex-end;
 }
 
-.__hst-border {
+.__pvt-border {
   border-style: solid;
   border-width: 2px;
 }
 
-.__hst-spaces {
+.__pvt-spaces {
   background-color: rgb(113 113 122 / 0.1);
   width: min-content;
 }
 
-.__hst-margin {
+.__pvt-margin {
   border: dashed 1px rgb(113 113 122 / 0.5);
   width: min-content;
 }
 
-.__hst-spaces-box,
-.__hst-margin-box {
+.__pvt-spaces-box,
+.__pvt-margin-box {
   width: 5rem;
   height: 5rem;
   background-color: rgb(113 113 122 / 0.5);
 }
 
-.__hst-spaces,
-.__hst-spaces-box,
-.__hst-margin,
-.__hst-margin-box,
-.__hst-drop-shadow {
+.__pvt-spaces,
+.__pvt-spaces-box,
+.__pvt-margin,
+.__pvt-margin-box,
+.__pvt-drop-shadow {
   border-radius: 4px;
 }
 
-.__hst-truncate {
+.__pvt-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.__hst-drop-shadow {
+.__pvt-drop-shadow {
   width: 8rem;
   height: 8rem;
   background: white;
   margin-bottom: 0.5rem;
 }
 
-.__hst-drop-shadow {
+.__pvt-drop-shadow {
   background: #4e4e57;
 }
 
-.__hst-border-radius {
+.__pvt-border-radius {
   width: 8rem;
   height: 8rem;
   background-color: rgb(113 113 122 / 0.5);
 }
 
-.__hst-border-width {
+.__pvt-border-width {
   width: 8rem;
   height: 8rem;
   border-color: rgb(113 113 122 / 0.5);
   background-color: rgb(113 113 122 / 0.1);
 }
 
-.__hst-width {
+.__pvt-width {
   background-color: rgb(113 113 122 / 0.1);
 }
 
-.__hst-width-box,
-.__hst-height {
+.__pvt-width-box,
+.__pvt-height {
   background-color: rgb(113 113 122 / 0.5);
 }
 
-.__hst-width-box {
+.__pvt-width-box {
   height: 5rem;
 }`

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

@@ -137,7 +137,7 @@ export default {
         getName: shade => (config.prefix ?? '') + (shade === 'DEFAULT' ? \`bg-\${key}\` : \`bg-\${key}-\${shade}\`),
         search: search.value,
       }, ({ color}) => h('div', {
-        class: '__hst-shade',
+        class: '__pvt-shade',
         style: {
           backgroundColor: color.replace('<alpha-value>', 1),
         },
@@ -160,7 +160,7 @@ export default {
         getName: shade => (config.prefix ?? '') + (shade === 'DEFAULT' ? \`text-\${key}\` : \`text-\${key}-\${shade}\`),
         search: search.value,
       }, ({ color}) => h('div', {
-        class: '__hst-shade __hst-text',
+        class: '__pvt-shade __pvt-text',
         style: {
           color: color.replace('<alpha-value>', 1),
         },
@@ -183,7 +183,7 @@ export default {
         getName: shade => (config.prefix ?? '') + (shade === 'DEFAULT' ? \`border-\${key}\` : \`border-\${key}-\${shade}\`),
         search: search.value,
       }, ({ color}) => h('div', {
-        class: '__hst-shade __hst-border',
+        class: '__pvt-shade __pvt-border',
         style: {
           borderColor: color.replace('<alpha-value>', 1),
         },
@@ -204,13 +204,13 @@ export default {
         tokens: config.theme.padding,
         getName: key => \`\${config.prefix ?? ''}p-\${key}\`,
       }, ({ token }) => h('div', {
-        class: '__hst-padding',
+        class: '__pvt-padding',
         style: {
           padding: token.value,
         },
       }, [
         h('div', {
-          class: '__hst-padding-box',
+          class: '__pvt-padding-box',
         }),
       ]))),
     },
@@ -222,10 +222,10 @@ export default {
         tokens: config.theme.margin,
         getName: key => \`\${config.prefix ?? ''}m-\${key}\`,
       }, ({ token }) => h('div', {
-        class: '__hst-margin',
+        class: '__pvt-margin',
       }, [
         h('div', {
-          class: '__hst-margin-box',
+          class: '__pvt-margin-box',
           style: {
             margin: token.value,
           },
@@ -240,7 +240,7 @@ export default {
         tokens: config.theme.fontSize,
         getName: key => \`\${config.prefix ?? ''}text-\${key}\`,
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           fontSize: Array.isArray(token.value) ? token.value[0] : token.value,
           ...(Array.isArray(token.value) && typeof token.value[1] === "object" ? token.value[1] : { lineHeight: token.value[1] })
@@ -263,7 +263,7 @@ export default {
         tokens: config.theme.fontWeight,
         getName: key => \`\${config.prefix ?? ''}font-\${key}\`,
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           fontWeight: token.value,
           fontSize: \`\${fontSize.value}px\`,
@@ -292,7 +292,7 @@ export default {
         tokens: config.theme.fontFamily,
         getName: key => \`\${config.prefix ?? ''}font-\${key}\`,
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           fontFamily: token.value,
           fontSize: \`\${fontSize.value}px\`,
@@ -321,7 +321,7 @@ export default {
         tokens: config.theme.letterSpacing,
         getName: key => \`\${config.prefix ?? ''}tracking-\${key}\`,
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           letterSpacing: token.value,
           fontSize: \`\${fontSize.value}px\`,
@@ -373,7 +373,7 @@ export default {
         getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'drop-shadow' : \`drop-shadow-\${key}\`),
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-drop-shadow',
+        class: '__pvt-drop-shadow',
         style: {
           filter: \`\${(Array.isArray(token.value) ? token.value : [token.value]).map(v => \`drop-shadow(\${v})\`).join(' ')}\`,
         },
@@ -388,7 +388,7 @@ export default {
         getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'rounded' : \`rounded-\${key}\`),
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-border-radius',
+        class: '__pvt-border-radius',
         style: {
           borderRadius: token.value,
         },
@@ -403,7 +403,7 @@ export default {
         getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'border' : \`border-\${key}\`),
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-border-width',
+        class: '__pvt-border-width',
         style: {
           borderWidth: token.value,
         },
@@ -417,10 +417,10 @@ export default {
         tokens: config.theme.width,
         getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'w' : \`w-\${key}\`),
       }, ({ token }) => h('div', {
-        class: '__hst-width',
+        class: '__pvt-width',
       }, [
         h('div', {
-          class: '__hst-width-box',
+          class: '__pvt-width-box',
           style: {
             width: token.value,
           },
@@ -435,7 +435,7 @@ export default {
         tokens: config.theme.height,
         getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'h' : \`h-\${key}\`),
       }, ({ token }) => h('div', {
-        class: '__hst-height',
+        class: '__pvt-height',
         style: {
           height: token.value,
         },
@@ -451,86 +451,86 @@ export default {
 }`
 }
 
-const css = `.__hst-shade {
+const css = `.__pvt-shade {
   height: 80px;
   border-radius: 4px;
 }
 
-.__hst-text {
+.__pvt-text {
   font-size: 4rem;
   display: flex;
   align-items: flex-end;
 }
 
-.__hst-border {
+.__pvt-border {
   border-style: solid;
   border-width: 2px;
 }
 
-.__hst-padding {
+.__pvt-padding {
   background-color: rgb(113 113 122 / 0.1);
   width: min-content;
 }
 
-.__hst-margin {
+.__pvt-margin {
   border: dashed 1px rgb(113 113 122 / 0.5);
   width: min-content;
 }
 
-.__hst-padding-box,
-.__hst-margin-box {
+.__pvt-padding-box,
+.__pvt-margin-box {
   width: 5rem;
   height: 5rem;
   background-color: rgb(113 113 122 / 0.5);
 }
 
-.__hst-padding,
-.__hst-padding-box,
-.__hst-margin,
-.__hst-margin-box,
-.__hst-drop-shadow {
+.__pvt-padding,
+.__pvt-padding-box,
+.__pvt-margin,
+.__pvt-margin-box,
+.__pvt-drop-shadow {
   border-radius: 4px;
 }
 
-.__hst-truncate {
+.__pvt-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.__hst-drop-shadow {
+.__pvt-drop-shadow {
   width: 8rem;
   height: 8rem;
   background: white;
   margin-bottom: 0.5rem;
 }
 
-.__hst-drop-shadow {
+.__pvt-drop-shadow {
   background: #4e4e57;
 }
 
-.__hst-border-radius {
+.__pvt-border-radius {
   width: 8rem;
   height: 8rem;
   background-color: rgb(113 113 122 / 0.5);
 }
 
-.__hst-border-width {
+.__pvt-border-width {
   width: 8rem;
   height: 8rem;
   border-color: rgb(113 113 122 / 0.5);
   background-color: rgb(113 113 122 / 0.1);
 }
 
-.__hst-width {
+.__pvt-width {
   background-color: rgb(113 113 122 / 0.1);
 }
 
-.__hst-width-box,
-.__hst-height {
+.__pvt-width-box,
+.__pvt-height {
   background-color: rgb(113 113 122 / 0.5);
 }
 
-.__hst-width-box {
+.__pvt-width-box {
   height: 5rem;
 }`

package/src/node/builtin-plugins/vanilla-support/RenderStory.ts

@@ -1,6 +1,7 @@
 import type { Story, Variant } from '@poveste/shared'
 import type { PropType as _PropType } from '@poveste/vendors/vue'
-import type { App, MountApi, VanillaApi } from './types'
+import type { VanillaStorySetupHandler as _VanillaStorySetupHandler, App, MountApi, VanillaApi } from './types'
+import { getSetupHook as _getSetupHook } from '@poveste/shared'
 import {
   defineComponent as _defineComponent,
   h as _h,
@@ -68,16 +69,18 @@ export default _defineComponent({
         el: document.createElement('div'),
       }
 
-      if (typeof generatedSetup?.setupVanilla === 'function') {
-        await generatedSetup.setupVanilla({
+      const generatedSetupVanilla = _getSetupHook<_VanillaStorySetupHandler>(generatedSetup, 'setupVanilla')
+      if (generatedSetupVanilla) {
+        await generatedSetupVanilla({
           app,
           story: props.story,
           variant: props.variant,
         })
       }
 
-      if (typeof setup?.setupVanilla === 'function') {
-        await setup.setupVanilla({
+      const setupVanilla = _getSetupHook<_VanillaStorySetupHandler>(setup, 'setupVanilla')
+      if (setupVanilla) {
+        await setupVanilla({
           app,
           story: props.story,
           variant: props.variant,

package/src/node/builtin-plugins/vanilla-support/types.ts

@@ -19,8 +19,10 @@ export interface VanillaApi {
   onMountControls?: (api: MountApi) => Awaitable<void>
 }
 
+export type VanillaStorySetupHandler = (payload: { app: App, story: Story, variant: Variant }) => unknown
+
 interface CommonProps {
-  setupApp?: (payload: { app: App, story: Story, variant: Variant }) => unknown
+  setupApp?: VanillaStorySetupHandler
 }
 
 export type StoryOptions = Omit<StoryProps, 'setupApp'> & CommonProps & ((VanillaApi & {

package/src/node/commands/preview.ts

@@ -1,9 +1,10 @@
-import pc from 'picocolors'
 import { createContext } from '../context.js'
 import { startPreview } from '../preview.js'
 
 export interface PreviewOptions {
   port?: number
+  host?: string | boolean
+  open?: boolean
 }
 
 export async function previewCommand(options: PreviewOptions) {
@@ -17,6 +18,10 @@ export async function previewCommand(options: PreviewOptions) {
     }
   }
 
-  const { baseUrl } = await startPreview(options.port, ctx)
-  console.log(`Preview server listening on ${pc.cyan(baseUrl)}`)
+  const { printUrls } = await startPreview({
+    port: options.port,
+    host: options.host,
+    open: options.open,
+  }, ctx)
+  printUrls()
 }

package/src/node/config.ts

@@ -38,6 +38,7 @@ export function getDefaultConfig(): PovesteConfig {
       '**/dist/**',
     ],
     supportMatch: [],
+    isolateStyles: true,
     tree: {
       file: 'title',
       order: 'asc',

package/src/node/context.ts

@@ -9,7 +9,7 @@ import type {
 import type { ResolvedConfig } from 'vite'
 import { resolveConfig as resolveViteConfig } from 'vite'
 import { processConfig, resolveConfig } from './config.js'
-import { mergeHistoireViteConfig } from './vite.js'
+import { mergePovesteViteConfig } from './vite.js'
 
 export interface Context {
   root: string
@@ -45,7 +45,7 @@ export async function createContext(options: CreateContextOptions): Promise<Cont
     registeredCommands: [],
   }
 
-  ctx.resolvedViteConfig = await mergeHistoireViteConfig(viteConfig as unknown, ctx)
+  ctx.resolvedViteConfig = await mergePovesteViteConfig(viteConfig as unknown, ctx)
 
   await processConfig(ctx)
 

package/src/node/dom/env.ts

@@ -4,6 +4,31 @@ import {
 } from 'jsdom'
 import { populateGlobal } from './util.js'
 
+// jsdom error types — not exported by jsdom.
+const JSDOM_ERROR_CSS_PARSING = 'css-parsing'
+const JSDOM_ERROR_UNHANDLED_EXCEPTION = 'unhandled-exception'
+
+// Directives JSDOM's CSS parser doesn't know — Tailwind v4's `@theme` is the
+// common one — make it emit a jsdomError per stylesheet, so collecting stories
+// from a Tailwind app prints "Could not parse CSS stylesheet" over and over.
+// The parser recovers on its own and keeps the valid rules, so the message is
+// pure noise: drop css-parsing errors, mirror jsdom's default forwardTo for
+// the rest.
+function createVirtualConsole(): VirtualConsole | undefined {
+  if (!console || !globalThis.console) return undefined
+  const virtualConsole = new VirtualConsole().forwardTo(globalThis.console, { jsdomErrors: 'none' })
+  virtualConsole.on('jsdomError', (err: Error & { type?: string, cause?: { stack?: string } }) => {
+    if (err.type === JSDOM_ERROR_CSS_PARSING) return
+    if (err.type === JSDOM_ERROR_UNHANDLED_EXCEPTION) {
+      globalThis.console.error(err.cause?.stack ?? err.message)
+    }
+    else {
+      globalThis.console.error(err.message)
+    }
+  })
+  return virtualConsole
+}
+
 export function createDomEnv() {
   const dom = new JSDOM(
     '<!DOCTYPE html>',
@@ -11,7 +36,7 @@ export function createDomEnv() {
       pretendToBeVisual: true,
       runScripts: 'dangerously',
       url: 'http://localhost:3000',
-      virtualConsole: console && globalThis.console ? new VirtualConsole().forwardTo(globalThis.console) : undefined,
+      virtualConsole: createVirtualConsole(),
       includeNodeLocations: false,
       contentType: 'text/html',
     },

package/src/node/markdown.ts

@@ -35,7 +35,7 @@ export async function createMarkdownRenderer(ctx: Context) {
   })
 
   const md = new MarkdownIt({
-    highlight: (code, lang) => `<div class="htw-relative htw-not-prose __poveste-code __histoire-code"><div class="htw-absolute htw-top-0 htw-right-0 htw-text-xs htw-text-white/40">${lang}</div>${highlighter.codeToHtml(code, { theme: 'github-dark', lang })}</div>`,
+    highlight: (code, lang) => `<div class="ptw-relative ptw-not-prose __poveste-code __histoire-code"><div class="ptw-absolute ptw-top-0 ptw-right-0 ptw-text-xs ptw-text-white/40">${lang}</div>${highlighter.codeToHtml(code, { theme: 'github-dark', lang })}</div>`,
     linkify: true,
     html: true,
     breaks: false,