poveste 0.13.0 → 0.13.1

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/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';
@@ -299,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;
@@ -360,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.13.0",
+  "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.13.0",
-    "@poveste/controls": "^0.13.0",
-    "@poveste/shared": "^0.13.0",
-    "@poveste/vendors": "^0.13.0",
+    "@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",