poveste 0.1.3 → 0.2.1

package/dist/node/bin.js

@@ -13,7 +13,7 @@ program.command('dev')
     .option('-p, --port <port>', 'Listening port of the server')
     .option('-c, --config <file>', `[string] use specified config file`)
     .option('--open', 'Open in your default browser')
-    .option('--host <host>', '[string] specify hostname')
+    .option('--host [host]', '[string] specify hostname (omit value or pass `0.0.0.0` to expose to all network interfaces)')
     .action(async (options) => {
     const { devCommand } = await import('./commands/dev.js');
     return devCommand(options);
@@ -28,6 +28,8 @@ program.command('build')
 program.command('preview')
     .describe('preview the built directory')
     .option('-p, --port <port>', 'Listening port of the server')
+    .option('--open', 'Open in your default browser')
+    .option('--host [host]', '[string] specify hostname (omit value or pass `0.0.0.0` to expose to all network interfaces)')
     .action(async (options) => {
     const { previewCommand } = await import('./commands/preview.js');
     return previewCommand(options);

package/dist/node/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/node/build.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AA+B3C,wBAAsB,KAAK,CAAC,GAAG,EAAE,OAAO,iBA8MvC"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/node/build.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAqC3C,wBAAsB,KAAK,CAAC,GAAG,EAAE,OAAO,iBA6NvC"}

package/dist/node/build.js

@@ -12,6 +12,8 @@ import { createMarkdownFilesWatcher } from './markdown.js';
 import { BuildPluginApi } from './plugin.js';
 import { startPreview } from './preview.js';
 import { findAllStories } from './stories.js';
+import { chromeCssScopePlugin, entryCssMergerPlugin, userCssScopePlugin, } from './style-isolation/index.js';
+import { applyHeadTransform } from './util/head.js';
 import { getViteConfigWithPlugins } from './vite.js';
 const PRELOAD_MODULES = [
     'vendor',
@@ -135,7 +137,8 @@ export async function build(ctx) {
             Object.assign(config.build, {
                 outDir: ctx.config.outDir,
                 emptyOutDir: true,
-                cssCodeSplit: false,
+                // Re-merged per-entry by entry-css-merger.
+                cssCodeSplit: true,
                 minify: false,
                 // Don't build in SSR mode
                 ssr: false,
@@ -143,13 +146,22 @@ export async function build(ctx) {
             config.define.__HST_COLLECT__ = false;
         },
     });
+    const isolate = ctx.config.isolateStyles !== false;
+    buildViteConfig.plugins.push(userCssScopePlugin({ enabled: isolate }));
+    buildViteConfig.plugins.push(chromeCssScopePlugin({ enabled: isolate }));
+    buildViteConfig.plugins.push(entryCssMergerPlugin({ isolateStyles: isolate }));
     for (const cb of changeViteConfigCallbacks) {
         console.log('vite config hook', cb);
         await cb(buildViteConfig);
     }
     const results = await viteBuild(buildViteConfig);
     const result = Array.isArray(results) ? results[0] : results;
-    const styleOutput = result.output.find(o => o.name === 'style.css' && o.type === 'asset');
+    function findEntryCss(entryName) {
+        return result.output.find(o => o.type === 'asset' && o.fileName === `${entryName}.css`);
+    }
+    const mainStyleOutput = findEntryCss('bundle-main')
+        ?? result.output.find(o => o.name === 'style.css' && o.type === 'asset');
+    const sandboxStyleOutput = findEntryCss('bundle-sandbox') ?? mainStyleOutput;
     // Preload
     const preloadOutputs = result.output.filter(o => PRELOAD_MODULES.includes(o.name) && o.type === 'chunk');
     const preloadHtml = generateScriptLinks(preloadOutputs.map(o => o.fileName), 'preload', ctx);
@@ -158,13 +170,15 @@ export async function build(ctx) {
     const prefetchHtml = generateScriptLinks(prefetchOutputs.map(o => o.fileName), 'prefetch', ctx);
     // Index
     const indexOutput = result.output.find(o => o.name === 'bundle-main' && o.type === 'chunk');
-    const indexHtml = generateEntryHtml(indexOutput.fileName, styleOutput.fileName, {
+    let indexHtml = generateEntryHtml(indexOutput.fileName, mainStyleOutput.fileName, {
         HEAD: `${preloadHtml}${prefetchHtml}`,
     }, ctx);
+    indexHtml = await applyHeadTransform(indexHtml, ctx.config.head);
     await writeFile('index.html', indexHtml, ctx);
     // Sandbox
     const sandboxOutput = result.output.find(o => o.name === 'bundle-sandbox' && o.type === 'chunk');
-    const sandboxHtml = generateEntryHtml(sandboxOutput.fileName, styleOutput.fileName, {}, ctx);
+    let sandboxHtml = generateEntryHtml(sandboxOutput.fileName, sandboxStyleOutput.fileName, {}, ctx);
+    sandboxHtml = await applyHeadTransform(sandboxHtml, ctx.config.head);
     await writeFile('__sandbox.html', sandboxHtml, ctx);
     await writeFile('poveste.json', JSON.stringify(getSerializedStoryData(ctx), null, 2), ctx);
     const duration = performance.now() - startTime;
@@ -174,7 +188,7 @@ export async function build(ctx) {
     console.log(pc.green(`✅ Built ${storyCount} stor${storyCount === 1 ? 'y' : 'ies'} (${variantCount} variant${variantCount === 1 ? '' : 's'}) in ${Math.round(duration / 1000 * 100) / 100}s`));
     // Render
     if (previewStoryCallbacks.length) {
-        const { baseUrl, close } = await startPreview(null, ctx);
+        const { baseUrl, close } = await startPreview({}, ctx);
         for (const storyFile of ctx.storyFiles) {
             const story = storyFile.story;
             for (const variant of story.variants) {
@@ -207,6 +221,7 @@ function generateBaseHtml(head, body, ctx) {
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta name="description" content="">
+  <style>html,body{margin:0;padding:0}</style>
   ${head}
 </head>
 <body>
@@ -226,3 +241,6 @@ async function writeFile(fileName, content, ctx) {
 function generateScriptLinks(prefetchScripts, rel, ctx) {
     return prefetchScripts.map(s => `<link rel="${rel}" href="${ctx.resolvedViteConfig.base}${s}" as="script" crossOrigin="anonymous">`).join('');
 }
+function generateStyleLinks(styleFiles, rel, ctx) {
+    return styleFiles.map(s => `<link rel="${rel}" href="${ctx.resolvedViteConfig.base}${s}" as="style">`).join('');
+}

package/dist/node/builtin-plugins/pinceau-tokens.js

@@ -150,7 +150,7 @@ export default {
         getName: key => '@mq.' + key,
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-drop-shadow',
+        class: '__pvt-drop-shadow',
       }))),
     },
     {
@@ -163,7 +163,7 @@ export default {
         getName: shade => '{colors.' + key + '.' + shade + '}',
         search: search.value,
       }, ({ color}) => h('div', {
-        class: '__hst-shade',
+        class: '__pvt-shade',
         style: {
           backgroundColor: color,
         },
@@ -185,13 +185,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',
         }),
       ]))),
     },
@@ -204,10 +204,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,
           },
@@ -223,7 +223,7 @@ export default {
         tokens: flattenTokens(config.fontSizes),
         getName: key => '{fontSizes.' + key + '}',
       }, ({ token }) => h('div', {
-        class: '__hst-truncate',
+        class: '__pvt-truncate',
         style: {
           fontSize: token.value,
         },
@@ -246,7 +246,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\`,
@@ -276,7 +276,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\`,
@@ -306,7 +306,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\`,
@@ -360,7 +360,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,
       }))),
     },
@@ -374,7 +374,7 @@ export default {
         getName: key => '{opacity.' + key + '}',
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-drop-shadow',
+        class: '__pvt-drop-shadow',
         style: 'opacity:' + token.value,
       }))),
     },
@@ -388,7 +388,7 @@ export default {
         getName: key => '{radii.' + key + '}',
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-border-radius',
+        class: '__pvt-border-radius',
         style: {
           borderRadius: token.value,
         },
@@ -404,7 +404,7 @@ export default {
         getName: key => '{borderWidths.' + key + '}',
         colSize: 180,
       }, ({ token }) => h('div', {
-        class: '__hst-border-width',
+        class: '__pvt-border-width',
         style: {
           borderWidth: token.value,
         },
@@ -420,86 +420,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/dist/node/builtin-plugins/tailwind-tokens.js

@@ -125,7 +125,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),
         },
@@ -148,7 +148,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),
         },
@@ -171,7 +171,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),
         },
@@ -192,13 +192,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',
         }),
       ]))),
     },
@@ -210,10 +210,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,
           },
@@ -228,7 +228,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] })
@@ -251,7 +251,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\`,
@@ -280,7 +280,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\`,
@@ -309,7 +309,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\`,
@@ -361,7 +361,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(' ')}\`,
         },
@@ -376,7 +376,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,
         },
@@ -391,7 +391,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,
         },
@@ -405,10 +405,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,
           },
@@ -423,7 +423,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,
         },
@@ -438,86 +438,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/dist/node/builtin-plugins/vanilla-support/RenderStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderStory.d.ts","sourceRoot":"","sources":["../../../../src/node/builtin-plugins/vanilla-support/RenderStory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,KAAK,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAA;;;cAoB3C,SAAS,CAAC,OAAO,CAAC;;;;cAKlB,SAAS,CAAC,KAAK,CAAC;;;;;;;;;;;;;cALhB,SAAS,CAAC,OAAO,CAAC;;;;cAKlB,SAAS,CAAC,KAAK,CAAC;;;;;;;;;;;;AAVtC,wBAmJE"}
+{"version":3,"file":"RenderStory.d.ts","sourceRoot":"","sources":["../../../../src/node/builtin-plugins/vanilla-support/RenderStory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,KAAK,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAA;;;cAqB3C,SAAS,CAAC,OAAO,CAAC;;;;cAKlB,SAAS,CAAC,KAAK,CAAC;;;;;;;;;;;;;cALhB,SAAS,CAAC,OAAO,CAAC;;;;cAKlB,SAAS,CAAC,KAAK,CAAC;;;;;;;;;;;;AAVtC,wBAqJE"}

package/dist/node/builtin-plugins/vanilla-support/RenderStory.js

@@ -1,3 +1,4 @@
+import { getSetupHook as _getSetupHook } from '@poveste/shared';
 import { defineComponent as _defineComponent, h as _h, onBeforeUnmount as _onBeforeUnmount, onMounted as _onMounted, ref as _ref, watch as _watch, } from '@poveste/vendors/vue';
 // @ts-expect-error virtual module id
 import * as generatedSetup from 'virtual:$poveste-generated-global-setup';
@@ -47,15 +48,17 @@ export default _defineComponent({
             app = {
                 el: document.createElement('div'),
             };
-            if (typeof generatedSetup?.setupVanilla === 'function') {
-                await generatedSetup.setupVanilla({
+            const generatedSetupVanilla = _getSetupHook(generatedSetup, 'setupVanilla');
+            if (generatedSetupVanilla) {
+                await generatedSetupVanilla({
                     app,
                     story: props.story,
                     variant: props.variant,
                 });
             }
-            if (typeof setup?.setupVanilla === 'function') {
-                await setup.setupVanilla({
+            const setupVanilla = _getSetupHook(setup, 'setupVanilla');
+            if (setupVanilla) {
+                await setupVanilla({
                     app,
                     story: props.story,
                     variant: props.variant,

package/dist/node/builtin-plugins/vanilla-support/types.d.ts

@@ -15,12 +15,13 @@ export interface VanillaApi {
     onMount?: (api: MountApi) => Awaitable<void>;
     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 & {
     variants?: never;

package/dist/node/builtin-plugins/vanilla-support/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/node/builtin-plugins/vanilla-support/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE1F,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,WAAW,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,WAAW,CAAA;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,OAAO,KAAK,SAAS,CAAC,IAAI,CAAC,CAAA;IAChD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,OAAO,KAAK,SAAS,CAAC,IAAI,CAAC,CAAA;CAClD;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC,IAAI,CAAC,CAAA;IAC5C,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC,IAAI,CAAC,CAAA;CACrD;AAED,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAA;CAC9E;AAED,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC,UAAU,GAAG;IACrF,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,CAAC,GAAG;IACH,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;CACxB,CAAC,CAAA;AAEF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,UAAU;CAE9F;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,gBAE9C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/node/builtin-plugins/vanilla-support/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE1F,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,WAAW,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,WAAW,CAAA;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,OAAO,KAAK,SAAS,CAAC,IAAI,CAAC,CAAA;IAChD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,OAAO,KAAK,SAAS,CAAC,IAAI,CAAC,CAAA;CAClD;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC,IAAI,CAAC,CAAA;IAC5C,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC,IAAI,CAAC,CAAA;CACrD;AAED,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,EAAE;IAAE,GAAG,EAAE,GAAG,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,KAAK,OAAO,CAAA;AAEzG,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,wBAAwB,CAAA;CACpC;AAED,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC,UAAU,GAAG;IACrF,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,CAAC,GAAG;IACH,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;CACxB,CAAC,CAAA;AAEF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,UAAU;CAE9F;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,gBAE9C"}

package/dist/node/commands/preview.d.ts

@@ -1,5 +1,7 @@
 export interface PreviewOptions {
     port?: number;
+    host?: string | boolean;
+    open?: boolean;
 }
 export declare function previewCommand(options: PreviewOptions): Promise<void>;
 //# sourceMappingURL=preview.d.ts.map

package/dist/node/commands/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../../src/node/commands/preview.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,cAAc,iBAa3D"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../../src/node/commands/preview.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,cAAc,iBAiB3D"}

package/dist/node/commands/preview.js

@@ -1,4 +1,3 @@
-import pc from 'picocolors';
 import { createContext } from '../context.js';
 import { startPreview } from '../preview.js';
 export async function previewCommand(options) {
@@ -10,6 +9,10 @@ export async function previewCommand(options) {
             await plugin.onPreview();
         }
     }
-    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();
 }