poveste 0.12.3 → 0.13.1

package/dist/node/build.js

@@ -15,6 +15,7 @@ import { findAllStories } from './stories.js';
 import { chromeCssScopePlugin, entryCssMergerPlugin, userCssScopePlugin, } from './style-isolation/index.js';
 import { applyHeadTransform } from './util/head.js';
 import { wrapLogError } from './util/log.js';
+import { viteMode } from './util/vite-mode.js';
 import { getViteConfigWithPlugins } from './vite.js';
 const PRELOAD_MODULES = [
     'vendor',
@@ -51,6 +52,10 @@ export async function build(ctx) {
     }
     const { viteConfig } = await getViteConfigWithPlugins(true, ctx);
     const server = await createViteServer(mergeViteConfig(viteConfig, {
+        // Same mode as the build below: `createServer` defaults to `development`,
+        // which would put one `.env` file in poveste.json and the other in the
+        // bundle built from it.
+        mode: viteMode(ctx.mode),
         optimizeDeps: { include: [], noDiscovery: true },
     }));
     await server.pluginContainer.buildStart({});
@@ -105,7 +110,9 @@ export async function build(ctx) {
         const emptyStoryCount = ctx.storyFiles.length - storyCount;
         const { viteConfig: buildViteConfigRaw } = await getViteConfigWithPlugins(false, ctx);
         const buildViteConfig = mergeViteConfig(buildViteConfigRaw, {
-            mode: 'development',
+            // Vite picks the `.env` file from `mode`, not from NODE_ENV — this said
+            // `'development'` from histoire until #349.
+            mode: viteMode(ctx.mode),
             build: {
                 lib: false,
                 rollupOptions: {
@@ -207,6 +214,10 @@ export async function build(ctx) {
                     emptyOutDir: true,
                     // Re-merged per-entry by entry-css-merger.
                     cssCodeSplit: true,
+                    // Not an oversight: the source pane prints story code by reading
+                    // functions back at runtime, and `Function.prototype.toString()`
+                    // returns whatever the minifier left — `codegen-vue3.spec.ts` fails
+                    // on three cases with this on (#329).
                     minify: false,
                     // Don't build in SSR mode
                     ssr: false,

package/dist/node/collect/index.js

@@ -1,6 +1,7 @@
 import { cpus } from 'node:os';
 import { MessageChannel } from 'node:worker_threads';
 import Tinypool from '@akryum/tinypool';
+import { escapeRegExp } from '@poveste/shared';
 import { createBirpc } from 'birpc';
 import path, { relative } from 'pathe';
 import pc from 'picocolors';
@@ -29,7 +30,7 @@ export function useCollectStories(options, ctx) {
                 // @TODO temporary fix for https://github.com/histoire-dev/histoire/issues/409
                 /vite\w*\/dist\/client\/(client|env).mjs/,
                 ...ctx.config.viteNodeInlineDeps ?? [],
-                new RegExp(path.resolve(TEMP_PATH, 'plugins')),
+                new RegExp(escapeRegExp(path.resolve(TEMP_PATH, 'plugins'))),
             ],
             fallbackCJS: true,
         },

package/dist/node/context.js

@@ -1,10 +1,15 @@
 import { resolveConfig as resolveViteConfig } from 'vite';
 import { processConfig, resolveConfig } from './config.js';
+import { viteCommand, viteMode } from './util/vite-mode.js';
 import { mergePovesteViteConfig } from './vite.js';
 export async function createContext(options) {
     const config = await resolveConfig(process.cwd(), options.mode, options.configFile);
-    const command = options.mode === 'dev' ? 'serve' : 'build';
-    const viteConfig = await resolveViteConfig({}, command);
+    const command = viteCommand(options.mode);
+    // The mode as well as the command: `resolveConfig` defaults to
+    // `'development'` whatever the command, and `base` from this resolution is
+    // what the hand-written index.html uses while the bundle uses the build's.
+    // A user config setting `base` by mode would otherwise disagree with itself.
+    const viteConfig = await resolveViteConfig({}, command, viteMode(options.mode));
     const supportPlugins = config.plugins.map(p => p.supportPlugin).filter(Boolean);
     const ctx = {
         root: viteConfig.root,

package/dist/node/util/vite-mode.d.ts

@@ -0,0 +1,13 @@
+import type { ConfigMode } from '@poveste/shared';
+/**
+ * poveste's `ConfigMode` in the vocabulary Vite's own API speaks.
+ *
+ * The two are different axes with overlapping words, and handing one straight
+ * to the other means a user config written the standard way — `mode ===
+ * 'production' ? … : …` — takes neither branch (#349).
+ *
+ * The public `vite(config, env)` hook takes it too: `env` is typed as Vite's own
+ * `ConfigEnv` in `@poveste/shared`, and its `command` was already translated.
+ */
+export declare function viteMode(mode: ConfigMode): 'development' | 'production';
+export declare function viteCommand(mode: ConfigMode): 'serve' | 'build';

package/dist/node/util/vite-mode.js

@@ -0,0 +1,16 @@
+/**
+ * poveste's `ConfigMode` in the vocabulary Vite's own API speaks.
+ *
+ * The two are different axes with overlapping words, and handing one straight
+ * to the other means a user config written the standard way — `mode ===
+ * 'production' ? … : …` — takes neither branch (#349).
+ *
+ * The public `vite(config, env)` hook takes it too: `env` is typed as Vite's own
+ * `ConfigEnv` in `@poveste/shared`, and its `command` was already translated.
+ */
+export function viteMode(mode) {
+    return mode === 'dev' ? 'development' : 'production';
+}
+export function viteCommand(mode) {
+    return mode === 'dev' ? 'serve' : 'build';
+}

package/dist/node/virtual/codegen.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Emitting values into generated modules.
+ *
+ * Every generator in this directory builds JavaScript source by interpolation,
+ * and most of the values come from somewhere the author of that source did not
+ * control — a plugin's id, a user's config key, the project's own path. Getting
+ * it wrong produces a syntax error inside a module nobody wrote and nobody can
+ * open, which is the symptom rather than a crash at the input (#609).
+ *
+ * There are two positions and they need different things.
+ */
+/** A value in a string or key position. Valid JSON is valid JavaScript here. */
+export declare function jsString(value: string): string;
+/**
+ * A value in an *identifier* position — a binding name, an import name.
+ *
+ * Quoting cannot help here, so the only honest options are to reject the value
+ * or to rename it. These names are read back by consumers (`logos.square`,
+ * `generatedSetup.setupVue3`), so renaming would move the problem to whoever
+ * looks them up. It rejects, naming the value and where it came from.
+ */
+export declare function jsIdentifier(value: string, what: string): string;

package/dist/node/virtual/codegen.js

@@ -0,0 +1,30 @@
+/**
+ * Emitting values into generated modules.
+ *
+ * Every generator in this directory builds JavaScript source by interpolation,
+ * and most of the values come from somewhere the author of that source did not
+ * control — a plugin's id, a user's config key, the project's own path. Getting
+ * it wrong produces a syntax error inside a module nobody wrote and nobody can
+ * open, which is the symptom rather than a crash at the input (#609).
+ *
+ * There are two positions and they need different things.
+ */
+/** A value in a string or key position. Valid JSON is valid JavaScript here. */
+export function jsString(value) {
+    return JSON.stringify(value);
+}
+/**
+ * A value in an *identifier* position — a binding name, an import name.
+ *
+ * Quoting cannot help here, so the only honest options are to reject the value
+ * or to rename it. These names are read back by consumers (`logos.square`,
+ * `generatedSetup.setupVue3`), so renaming would move the problem to whoever
+ * looks them up. It rejects, naming the value and where it came from.
+ */
+export function jsIdentifier(value, what) {
+    if (!/^[A-Z_$][\w$]*$/i.test(value)) {
+        throw new Error(`${what} must be usable as a JavaScript identifier, and ${JSON.stringify(value)} is not. `
+            + 'It is emitted into a generated module as a binding name, where quoting cannot rescue it.');
+    }
+    return value;
+}

package/dist/node/virtual/resolved-commands.js

@@ -1,3 +1,4 @@
+import { jsIdentifier, jsString } from './codegen.js';
 const serializedFields = ['id', 'label', 'prompts', 'icon', 'searchText'];
 export function resolvedCommands(ctx) {
     const imports = [];
@@ -21,10 +22,10 @@ function getCommandFields(command, imports) {
     if (command.clientSetupFile) {
         const importedVar = `__setup${imports.length}__`;
         if (typeof command.clientSetupFile === 'string') {
-            imports.push(`import ${importedVar} from '${command.clientSetupFile}'`);
+            imports.push(`import ${importedVar} from ${jsString(command.clientSetupFile)}`);
         }
         else {
-            imports.push(`import { ${command.clientSetupFile.importName} as ${importedVar} } from '${command.clientSetupFile.file}'`);
+            imports.push(`import { ${jsIdentifier(command.clientSetupFile.importName, `clientSetupFile.importName '${command.clientSetupFile.importName}'`)} as ${importedVar} } from ${jsString(command.clientSetupFile.file)}`);
         }
         fields.push(`...${importedVar}`);
     }

package/dist/node/virtual/resolved-config.js

@@ -1,10 +1,11 @@
+import { jsIdentifier, jsString } from './codegen.js';
 export function resolvedConfig(ctx) {
     let js = `export const config = ${JSON.stringify(ctx.config)}\n`;
     if (ctx.config.theme?.logo) {
         for (const key in ctx.config.theme.logo) {
-            js += `import Logo_${key} from '${ctx.config.theme.logo[key]}'\n`;
+            js += `import Logo_${jsIdentifier(key, `theme.logo key '${key}'`)} from ${jsString(ctx.config.theme.logo[key])}\n`;
         }
     }
-    js += `export const logos = {${Object.keys(ctx.config.theme?.logo ?? {}).map(key => `${key}: Logo_${key}`).join(', ')}}\n`;
+    js += `export const logos = {${Object.keys(ctx.config.theme?.logo ?? {}).map(key => `${jsString(key)}: Logo_${key}`).join(', ')}}\n`;
     return js;
 }

package/dist/node/virtual/resolved-stories.js

@@ -1,4 +1,5 @@
 import { makeTree } from '../tree.js';
+import { jsString } from './codegen.js';
 export function resolvedStories(ctx) {
     const resolvedStories = ctx.storyFiles.filter(s => !!s.story);
     const files = resolvedStories.map((file, index) => {
@@ -23,7 +24,7 @@ ${resolvedStories.map((file, index) => {
         }
         return supportPlugin.importStoryComponent(file, index);
     }).filter(Boolean).join('\n')}
-export let files = [${files.map(file => `{${JSON.stringify(file).slice(1, -1)}, component: Comp${file.index}, source: () => import('virtual:story-source:${file.story.id}')}`).join(',\n')}]
+export let files = [${files.map(file => `{${JSON.stringify(file).slice(1, -1)}, component: Comp${file.index}, source: () => import(${jsString(`virtual:story-source:${file.story.id}`)})}`).join(',\n')}]
 export let tree = ${JSON.stringify(makeTree(ctx.config, resolvedStories))}
 const handlers = []
 export function onUpdate (cb) {

package/dist/node/virtual/resolved-support-plugins-client.js

@@ -1,8 +1,9 @@
 import { createRequire } from 'node:module';
+import { jsString } from './codegen.js';
 import { PLUGINS_HAVE_DEV } from './util.js';
 const require = createRequire(import.meta.url);
 export function resolvedSupportPluginsClient(ctx) {
-    const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import(${JSON.stringify(require.resolve(`${p.moduleName}/client${process.env.POVESTE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, {
+    const plugins = ctx.supportPlugins.map(p => `${jsString(p.id)}: () => import(${JSON.stringify(require.resolve(`${p.moduleName}/client${process.env.POVESTE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, {
         paths: [ctx.root, import.meta.url],
     }))})`);
     return `export const clientSupportPlugins = {

package/dist/node/virtual/resolved-support-plugins-collect.js

@@ -1,8 +1,9 @@
 import { createRequire } from 'node:module';
+import { jsString } from './codegen.js';
 import { PLUGINS_HAVE_DEV } from './util.js';
 const require = createRequire(import.meta.url);
 export function resolvedSupportPluginsCollect(ctx) {
-    const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import(${JSON.stringify(require.resolve(`${p.moduleName}/collect${process.env.POVESTE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, {
+    const plugins = ctx.supportPlugins.map(p => `${jsString(p.id)}: () => import(${JSON.stringify(require.resolve(`${p.moduleName}/collect${process.env.POVESTE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, {
         paths: [ctx.root, import.meta.url],
     }))})`);
     return `export const collectSupportPlugins = {

package/dist/node/virtual/util.js

@@ -1,3 +1,4 @@
+import { jsIdentifier } from './codegen.js';
 export const ID_SEPARATOR = '__-__';
 /**
  * Names of every setup hook contributed by the enabled support plugins, e.g.
@@ -28,7 +29,7 @@ export function getSetupFnGroups(ctx) {
  * in every consumer build.
  */
 export function declareEmptySetupFns(ctx) {
-    return getSetupFnNames(ctx).map(fnName => `export const ${fnName} = undefined`).join('\n');
+    return getSetupFnNames(ctx).map(fnName => `export const ${jsIdentifier(fnName, `support plugin setupFn '${fnName}'`)} = undefined`).join('\n');
 }
 export const PLUGINS_HAVE_DEV = [
     '@poveste/plugin-vue',

package/dist/node/vite.js

@@ -1,5 +1,6 @@
 import { existsSync } from 'node:fs';
 import { createRequire } from 'node:module';
+import { escapeRegExp } from '@poveste/shared';
 import { lookup as lookupMime } from 'mrmime';
 import { dirname, join, relative } from 'pathe';
 import { loadConfigFromFile as loadViteConfigFromFile, mergeConfig as mergeViteConfig, searchForWorkspaceRoot, } from 'vite';
@@ -9,14 +10,15 @@ import { optimizeEntries } from './optimize-entries.js';
 import { notifyStoryChange } from './stories.js';
 import { chromeCssScopePlugin, globalStylesPlugin, userCssScopePlugin, } from './style-isolation/index.js';
 import { applyHeadTransform } from './util/head.js';
+import { viteCommand, viteMode } from './util/vite-mode.js';
 import { createVirtualFilesPlugin } from './virtual/vite-plugin.js';
 const require = createRequire(import.meta.url);
 export async function mergePovesteViteConfig(viteConfig, ctx) {
     if (ctx.config.vite) {
-        const command = ctx.mode === 'dev' ? 'serve' : 'build';
+        const command = viteCommand(ctx.mode);
         const overrides = typeof ctx.config.vite === 'function'
             ? await ctx.config.vite(viteConfig, {
-                mode: ctx.mode,
+                mode: viteMode(ctx.mode),
                 command,
             })
             : ctx.config.vite;
@@ -44,7 +46,7 @@ export async function mergePovesteViteConfig(viteConfig, ctx) {
     return viteConfig;
 }
 export async function getViteConfigWithPlugins(isServer, ctx) {
-    const userViteConfigFile = await loadViteConfigFromFile({ command: ctx.mode === 'dev' ? 'serve' : 'build', mode: ctx.mode });
+    const userViteConfigFile = await loadViteConfigFromFile({ command: viteCommand(ctx.mode), mode: viteMode(ctx.mode) });
     const userViteConfig = mergeViteConfig(userViteConfigFile?.config ?? {}, { server: { port: 6006 } });
     const inlineConfig = await mergePovesteViteConfig(userViteConfig, ctx);
     const plugins = [];
@@ -298,7 +300,7 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
             if (/\.(?:vue|js)(?:$|\?)/.test(id)) {
                 const original = code;
                 for (const flag in flags) {
-                    code = code.replace(new RegExp(flag, 'g'), flags[flag]);
+                    code = code.replace(new RegExp(escapeRegExp(flag), 'g'), flags[flag]);
                 }
                 if (original !== code)
                     return code;
@@ -359,11 +361,11 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
                                 ['vue', 'vue'],
                             ].reduce((acc, [name, entry]) => {
                                 acc.push({
-                                    find: new RegExp(`^${name.replace(/\//g, '\\/')}$`),
+                                    find: new RegExp(`^${escapeRegExp(name)}$`),
                                     replacement: `@poveste/vendors/${entry}`,
                                 });
                                 acc.push({
-                                    find: new RegExp(`^${name.replace(/\//g, '\\/')}\\/`),
+                                    find: new RegExp(`^${escapeRegExp(name)}/`),
                                     replacement: `@poveste/vendors/${entry}/`,
                                 });
                                 return acc;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poveste",
   "type": "module",
-  "version": "0.12.3",
+  "version": "0.13.1",
   "description": "Interactive component playgrounds for Vue, Nuxt, Svelte, SvelteKit and Quasar — a drop-in fork of histoire, with Quasar support histoire does not ship.",
   "author": {
     "name": "Sorin Gitlan",
@@ -73,10 +73,10 @@
   },
   "dependencies": {
     "@akryum/tinypool": "^0.3.1",
-    "@poveste/app": "^0.12.3",
-    "@poveste/controls": "^0.12.3",
-    "@poveste/shared": "^0.12.3",
-    "@poveste/vendors": "^0.12.3",
+    "@poveste/app": "^0.13.1",
+    "@poveste/controls": "^0.13.1",
+    "@poveste/shared": "^0.13.1",
+    "@poveste/vendors": "^0.13.1",
     "@types/markdown-it": "^14.1.2",
     "birpc": "^0.2.19",
     "change-case": "^5.4.4",