@scaffold-ui-kit/preview 0.0.0-stage → 2.3.0

package/dist/emit/source.js

@@ -0,0 +1,789 @@
+// Print a story as the source a consumer would write: the component with its
+// props and slot content, importing from the kit's package entry per target.
+// The registry emitters (react.ts, vue.ts, svelte.ts) print what the preview
+// mounts - one line per story, props spread from the controls; this prints the
+// same story as readable, standalone code for a docs page.
+import { reactFill, reactProps, styleProperties, } from '../lib/react-spelling.js';
+import { singleJsxRoot } from '../lib/jsx-roots.js';
+import { hasFragileWhitespace, svelteText, vueJunction, vueSourceText, } from './common.js';
+import { collectParts, collectSlotComponents } from '../lib/slot-fill.js';
+const INDENT = '  ';
+/** An opening tag longer than this puts each attribute on its own line. */
+const MAXIMUM_WIDTH = 80;
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+/** Escapes a JavaScript single-quoted string literal needs: a line break or
+ *  other control character inside one is a syntax error, and U+2028/U+2029
+ *  read as line breaks in some parsers. */
+const STRING_ESCAPES = {
+    '\\': '\\\\',
+    "'": "\\'",
+    '\n': '\\n',
+    '\r': '\\r',
+    '\t': '\\t',
+};
+function stringLiteral(value) {
+    const escaped = value.replace(/[\\'\u0000-\u001f\u2028\u2029]/g, (character) => STRING_ESCAPES[character] ??
+        `\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`);
+    return `'${escaped}'`;
+}
+/** A JavaScript expression for a JSON value, with single-quoted strings. */
+function expression(value) {
+    if (value === undefined)
+        return 'undefined';
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string')
+        return stringLiteral(value);
+    if (Array.isArray(value))
+        return `[${value.map(expression).join(', ')}]`;
+    if (typeof value === 'object') {
+        const entries = Object.entries(value).map(([key, entry]) => `${IDENTIFIER.test(key) ? key : expression(key)}: ${expression(entry)}`);
+        return entries.length ? `{ ${entries.join(', ')} }` : '{}';
+    }
+    return String(value);
+}
+/** The narrowest a value is wrapped to, however deep its tag sits. */
+const MINIMUM_VALUE_WIDTH = 40;
+/**
+ * A JavaScript expression for a JSON value, as {@link expression} writes it
+ * while it fits in `width`; a longer array or object is broken over lines,
+ * one element or entry to a line with a trailing comma, each element broken
+ * in turn while it is still too long. An array of numbers, booleans or
+ * `null` fills each line instead.
+ */
+function wrappedExpression(value, width) {
+    const single = expression(value);
+    if (single.length <= width || typeof value !== 'object' || value === null)
+        return single;
+    const [open, close] = Array.isArray(value) ? ['[', ']'] : ['{', '}'];
+    const inner = Math.max(width - INDENT.length, MINIMUM_VALUE_WIDTH);
+    if (Array.isArray(value) &&
+        value.length > 0 &&
+        value.every((element) => element === null ||
+            typeof element === 'number' ||
+            typeof element === 'boolean')) {
+        const lines = [];
+        for (const element of value.map((element) => `${expression(element)},`)) {
+            const last = lines.length - 1;
+            if (last >= 0 && lines[last].length + 1 + element.length <= inner)
+                lines[last] += ` ${element}`;
+            else
+                lines.push(element);
+        }
+        return [open, ...lines.map((line) => `${INDENT}${line}`), close].join('\n');
+    }
+    const items = Array.isArray(value)
+        ? value.map((element) => wrappedExpression(element, inner))
+        : Object.entries(value).map(([key, entry]) => {
+            const name = IDENTIFIER.test(key) ? key : expression(key);
+            return `${name}: ${wrappedExpression(entry, inner - name.length - 2)}`;
+        });
+    if (items.length === 0)
+        return single;
+    const body = items.map((item) => `${INDENT}${item.replace(/\n/g, `\n${INDENT}`)},`);
+    return [open, ...body, close].join('\n');
+}
+/**
+ * The width a prop's value has on its own line under an opening tag at
+ * `depth`: the line's width less the attribute's column and its name, and
+ * never narrower than {@link MINIMUM_VALUE_WIDTH}.
+ */
+function valueWidth(attributeHead, depth) {
+    return Math.max(MAXIMUM_WIDTH - INDENT.length * (depth + 1) - attributeHead.length - 1, MINIMUM_VALUE_WIDTH);
+}
+/** A plain-CSS `style` string as a React style object. */
+function styleObject(css) {
+    return expression(styleProperties(css));
+}
+function attributeList(dialect, props, html, depth, bound = new Map()) {
+    return Object.entries(props ?? {}).flatMap(([name, value]) => bound.get(name) ?? [dialect.attribute(name, value, html, depth)]);
+}
+/** An opening tag's lines: attributes on one line, or one per line past the
+ *  width or when an attribute spans lines itself (a React prop holding JSX),
+ *  each of its lines indented under the tag. */
+function openTag(pad, name, attributes, selfClosing) {
+    const close = selfClosing ? ' />' : '>';
+    const spansLines = attributes.some((attribute) => attribute.includes('\n'));
+    const single = `${pad}<${name}${attributes.length ? ` ${attributes.join(' ')}` : ''}${close}`;
+    if (!spansLines &&
+        (single.length <= MAXIMUM_WIDTH || attributes.length === 0))
+        return [single];
+    return [
+        `${pad}<${name}`,
+        ...attributes.flatMap((attribute) => attribute.split('\n').map((line) => `${pad}${INDENT}${line}`)),
+        `${pad}${selfClosing ? '/>' : '>'}`,
+    ];
+}
+/** Lines for a slot fill at `depth`. */
+function fillLines(dialect, fill, depth) {
+    const pad = INDENT.repeat(depth);
+    switch (fill.kind) {
+        case 'text':
+            return [`${pad}${dialect.text(fill.value)}`];
+        case 'raw':
+            return [`${pad}${dialect.raw(fill)}`];
+        case 'part':
+            return dialect.part(fill, depth);
+        case 'scoped':
+            // Scoped content belongs to a named slot; nested elsewhere it renders nothing.
+            return [];
+        case 'fragment':
+            return fragmentLines(dialect, fill, depth);
+        case 'html':
+            return elementLines(dialect, fill.tag, attributeList(dialect, fill.props, true, depth), fill.children, {}, depth);
+        case 'element':
+            return elementLines(dialect, fill.component, attributeList(dialect, fill.props, false, depth), fill.children, fill.slots ?? {}, depth);
+    }
+}
+/** A fragment's children, those of a fragment inside it in its place, and
+ *  empty text and scoped content, which renders nothing there, left out. */
+function flattenedChildren(fill) {
+    if (fill.kind === 'fragment')
+        return fill.children.flatMap(flattenedChildren);
+    if (fill.kind === 'scoped')
+        return [];
+    return fill.kind === 'text' && fill.value === '' ? [] : [fill];
+}
+/** Whether a sibling starts (`'start'`) or ends (`'end'`) with whitespace:
+ *  text and raw content by their own, anything else never. */
+function edgeSpace(dialect, fill, edge) {
+    const content = fill.kind === 'text'
+        ? fill.value
+        : fill.kind === 'raw'
+            ? dialect.raw(fill)
+            : undefined;
+    if (content === undefined)
+        return false;
+    return edge === 'start' ? /^\s/.test(content) : /\s$/.test(content);
+}
+/**
+ * Lines for a fragment's children at `depth`, one sibling after another,
+ * printed so the whitespace between text and the siblings beside it reads as
+ * the story gives it. Where the story has whitespace there, the text's edge
+ * loses it for the line break, which Vue and Svelte read as a space, and
+ * React keeps it as `{' '}`, as JSX drops whitespace at a line's edges.
+ * Where it has none, the two share a line in Vue and Svelte (and two texts
+ * in React), so no break adds a space. Whitespace alone between two
+ * siblings is `{' '}` in React, and one space between them on one line in
+ * Vue and Svelte.
+ */
+function fragmentLines(dialect, fill, depth) {
+    const pad = INDENT.repeat(depth);
+    const children = flattenedChildren(fill);
+    const lines = [];
+    let glueNext = false;
+    children.forEach((child, index) => {
+        const previous = children[index - 1];
+        const next = children[index + 1];
+        let glue = glueNext;
+        glueNext = false;
+        // Siblings that touch share a line where a break would read as a space:
+        // text or raw content beside anything in Vue and Svelte, two elements
+        // or components in Svelte alone, and two texts in React.
+        const flowing = (sibling) => sibling.kind === 'text' || sibling.kind === 'raw';
+        if (previous !== undefined &&
+            !glue &&
+            !edgeSpace(dialect, previous, 'end') &&
+            !edgeSpace(dialect, child, 'start') &&
+            (dialect.lineBreakIsSpace
+                ? flowing(previous) || flowing(child) || dialect.elementBreakIsSpace
+                : previous.kind === 'text' && child.kind === 'text'))
+            glue = true;
+        let childLines;
+        if (child.kind === 'text') {
+            const before = previous !== undefined && /^\s/.test(child.value);
+            const after = next !== undefined && /\s$/.test(child.value);
+            const trimmed = child.value.slice(before ? child.value.length - child.value.trimStart().length : 0, after ? child.value.trimEnd().length : child.value.length);
+            if (trimmed === '' && (before || after)) {
+                // Whitespace alone between siblings; at an edge, Vue and Svelte
+                // drop it as they do whitespace at an element's edge.
+                if (!dialect.lineBreakIsSpace)
+                    childLines = [`${pad}{' '}`];
+                else if (previous !== undefined && next !== undefined) {
+                    childLines = [' '];
+                    glue = true;
+                    glueNext = true;
+                }
+                else
+                    childLines = [];
+            }
+            else if (dialect.lineBreakIsSpace) {
+                childLines = [`${pad}${dialect.text(trimmed)}`];
+            }
+            else {
+                const space = "{' '}";
+                childLines = [
+                    `${pad}${before ? space : ''}${dialect.text(trimmed)}${after ? space : ''}`,
+                ];
+            }
+        }
+        else
+            childLines = fillLines(dialect, child, depth);
+        if (childLines.length === 0)
+            return;
+        if (glue && lines.length > 0) {
+            const first = childLines[0] === ' ' ? ' ' : childLines[0].trimStart();
+            const last = dialect.junction(lines.pop(), first);
+            lines.push(`${last}${first}`, ...childLines.slice(1));
+        }
+        else
+            lines.push(...childLines);
+    });
+    return lines;
+}
+/** Lines for an element with default and named content. */
+function elementLines(dialect, name, attributes, children, named, depth) {
+    const pad = INDENT.repeat(depth);
+    const allAttributes = [...attributes];
+    const namedLines = [];
+    // Scoped content for the default slot is printed as a scoped slot is: the
+    // function child, `#default`, the `children` snippet.
+    const scopedChildren = children?.kind === 'scoped' ? children : undefined;
+    const slotEntries = [
+        ...(scopedChildren
+            ? [['default', scopedChildren]]
+            : []),
+        ...Object.entries(named),
+    ];
+    for (const [slot, fill] of slotEntries) {
+        const rendered = dialect.namedSlot(slot, fill, depth + 1);
+        allAttributes.push(...(rendered.attributes ?? []));
+        namedLines.push(...(rendered.lines ?? []));
+    }
+    const childLines = children && !scopedChildren ? fillLines(dialect, children, depth + 1) : [];
+    const content = [...childLines, ...namedLines];
+    if (content.length === 0)
+        return openTag(pad, name, allAttributes, true);
+    const open = openTag(pad, name, allAttributes, false);
+    // A lone text child stays on a one-line element's line.
+    if (content.length === 1 &&
+        namedLines.length === 0 &&
+        children?.kind === 'text' &&
+        open.length === 1) {
+        const line = `${open[0]}${content[0].trim()}</${name}>`;
+        if (line.length <= MAXIMUM_WIDTH)
+            return [line];
+    }
+    return [...open, ...content, `${pad}</${name}>`];
+}
+const react = {
+    lineBreakIsSpace: false,
+    elementBreakIsSpace: false,
+    attribute(name, value, html, depth) {
+        const key = html && name === 'class' ? 'className' : name;
+        if (html && name === 'style' && typeof value === 'string')
+            return `style={${styleObject(value)}}`;
+        if (value === true)
+            return key;
+        // A quoted JSX attribute reads `&` as a character reference.
+        if (typeof value === 'string' && !/["\n&]/.test(value))
+            return `${key}="${value}"`;
+        return `${key}={${wrappedExpression(value, valueWidth(`${key}={`, depth))}}`;
+    },
+    // JSX reads braces and angle brackets as code, and `&` as a reference,
+    // and drops whitespace at the edge of a line of text.
+    text: (value) => /[{}<>&]/.test(value) || hasFragileWhitespace(value)
+        ? `{${expression(value)}}`
+        : value,
+    junction: (line) => line,
+    namedSlot(slot, fill, depth) {
+        if (fill.kind === 'scoped') {
+            if (!fill.react)
+                return {};
+            const head = fill.reactScope === 'positional'
+                ? `(${fill.parameters.join(', ')})`
+                : `({ ${fill.parameters.join(', ')} })`;
+            // Sibling roots or text are no arrow body until a fragment holds them.
+            const content = singleJsxRoot(fill.react);
+            const body = content.includes('\n') ? `(${content})` : content;
+            // A render function named `children` reads as the element's child.
+            if (fill.slot.react === 'children')
+                return { lines: [`${INDENT.repeat(depth)}{${head} => ${body}}`] };
+            return { attributes: [`${fill.slot.react}={${head} => ${body}}`] };
+        }
+        if (fill.kind === 'text')
+            return { attributes: [react.attribute(slot, fill.value, false, depth)] };
+        // A raw body in a React prop: sibling roots, or text, are one expression
+        // in a fragment.
+        if (fill.kind === 'raw') {
+            if (fill.react.trim() === '')
+                return {};
+            const content = singleJsxRoot(fill.react);
+            const body = content.includes('\n') ? `(${content})` : content;
+            return { attributes: [`${slot}={${body}}`] };
+        }
+        // Content in a React prop: text alone is a string, one line stays on the
+        // prop's line, and more becomes an indented block, its lines relative to
+        // the prop so the tag can indent them; several siblings, or text beside
+        // anything, are held in a fragment.
+        const flattened = flattenedChildren(fill);
+        if (flattened.length === 0)
+            return {};
+        if (flattened.length === 1 && flattened[0].kind === 'text')
+            return {
+                attributes: [react.attribute(slot, flattened[0].value, false, depth)],
+            };
+        const lines = fillLines(react, fill, 0);
+        const siblings = flattened.length > 1;
+        if (lines.length === 1)
+            return {
+                attributes: [
+                    siblings
+                        ? `${slot}={<>${lines[0].trim()}</>}`
+                        : `${slot}={${lines[0].trim()}}`,
+                ],
+            };
+        const block = siblings
+            ? ['<>', ...lines.map((line) => `${INDENT}${line}`), '</>']
+            : lines;
+        return {
+            attributes: [
+                [`${slot}={`, ...block.map((line) => `${INDENT}${line}`), '}'].join('\n'),
+            ],
+        };
+    },
+    raw: (fill) => fill.react,
+    part: (fill, depth) => componentCall(react, fill, depth),
+};
+const vue = {
+    lineBreakIsSpace: true,
+    elementBreakIsSpace: false,
+    attribute(name, value, _html, depth) {
+        if (value === true)
+            return name;
+        if (typeof value === 'string' && !/["\n]/.test(value))
+            return `${name}="${value}"`;
+        return `:${name}="${wrappedExpression(value, valueWidth(`:${name}="`, depth)).replace(/"/g, '&quot;')}"`;
+    },
+    text: vueSourceText,
+    // A `{` before content starting with one would open an interpolation.
+    junction: vueJunction,
+    namedSlot(slot, fill, depth) {
+        const pad = INDENT.repeat(depth);
+        if (fill.kind === 'scoped') {
+            return fill.vue
+                ? {
+                    lines: [
+                        `${pad}<template #${fill.slot.vue}="{ ${fill.parameters.join(', ')} }">`,
+                        `${pad}${INDENT}${fill.vue}`,
+                        `${pad}</template>`,
+                    ],
+                }
+                : {};
+        }
+        return {
+            lines: [
+                `${pad}<template #${slot}>`,
+                ...fillLines(vue, fill, depth + 1),
+                `${pad}</template>`,
+            ],
+        };
+    },
+    raw: (fill) => fill.vue,
+    part: (fill, depth) => componentCall(vue, fill, depth),
+};
+const svelte = {
+    lineBreakIsSpace: true,
+    elementBreakIsSpace: true,
+    attribute(name, value, _html, depth) {
+        if (value === true)
+            return name;
+        if (typeof value === 'string' && !/["\n{}]/.test(value))
+            return `${name}="${value}"`;
+        return `${name}={${wrappedExpression(value, valueWidth(`${name}={`, depth))}}`;
+    },
+    text: svelteText,
+    junction: (line) => line,
+    namedSlot(slot, fill, depth) {
+        const pad = INDENT.repeat(depth);
+        if (fill.kind === 'scoped') {
+            return fill.svelte
+                ? {
+                    lines: [
+                        `${pad}{#snippet ${fill.slot.svelte}({ ${fill.parameters.join(', ')} })}`,
+                        `${pad}${INDENT}${fill.svelte}`,
+                        `${pad}{/snippet}`,
+                    ],
+                }
+                : {};
+        }
+        return {
+            lines: [
+                `${pad}{#snippet ${slot}()}`,
+                ...fillLines(svelte, fill, depth + 1),
+                `${pad}{/snippet}`,
+            ],
+        };
+    },
+    raw: (fill) => fill.svelte,
+    part: (fill, depth) => [
+        `${INDENT.repeat(depth)}{@render ${fill.name}(${expression(fill.props ?? {})})}`,
+    ],
+};
+/** A part called as a component, in React and Vue. */
+function componentCall(dialect, fill, depth) {
+    return elementLines(dialect, fill.name, attributeList(dialect, fill.props, false, depth), undefined, {}, depth);
+}
+/** The parts the story's content calls, each declared once. */
+function partsOf(story) {
+    return [
+        ...collectParts([
+            story.around?.before,
+            story.children,
+            ...Object.values(story.named),
+            story.around?.after,
+        ]).values(),
+    ];
+}
+/** Whether the story has content beside its component. */
+function hasAround(story) {
+    return (story.around?.before !== undefined || story.around?.after !== undefined);
+}
+/** The component's lines between the lines of the content beside it, at
+ *  `depth`. */
+function besideLines(dialect, story, component, depth) {
+    const { before, after } = story.around ?? {};
+    return [
+        ...(before ? fillLines(dialect, before, depth) : []),
+        ...component,
+        ...(after ? fillLines(dialect, after, depth) : []),
+    ];
+}
+/** A part's destructured props with their type: each parameter's own, or `any`. */
+function typedParameters(part) {
+    const types = part.parameters.map((name) => `${name}: ${part.parameterTypes?.[name] ?? 'any'}`);
+    return `{ ${part.parameters.join(', ')} }: { ${types.join('; ')} }`;
+}
+/** A body's lines at `depth`, each of its own lines indented. */
+function bodyLines(body, depth) {
+    return body.split('\n').map((line) => `${INDENT.repeat(depth)}${line}`);
+}
+/** `import { A, B as C, type D } from 'module';` lines, one per module, in
+ *  first-seen order: of every component the story names, or only of `only`,
+ *  and of the exported types `types` names, each beside the components of its
+ *  module or in an `import type` of its own. */
+function importLines(story, only, types = []) {
+    const byModule = new Map();
+    const entry = (module) => {
+        const found = byModule.get(module) ?? { names: [], types: [] };
+        byModule.set(module, found);
+        return found;
+    };
+    for (const [local, { module, exported }] of story.imports) {
+        if (only && !only.has(local))
+            continue;
+        entry(module).names.push(exported === local ? local : `${exported} as ${local}`);
+    }
+    for (const type of types) {
+        const module = story.exportedTypes?.get(type);
+        if (module !== undefined)
+            entry(module).types.push(type);
+    }
+    return [...byModule].map(([module, { names, types: typeNames }]) => names.length === 0
+        ? `import type { ${typeNames.join(', ')} } from '${module}';`
+        : `import { ${[...names, ...typeNames.map((type) => `type ${type}`)].join(', ')} } from '${module}';`);
+}
+/** The words a type made of the language's own types alone is written in. */
+const BUILT_IN_TYPE_WORDS = /\b(?:string|number|boolean|bigint|null|undefined|true|false|unknown|any|readonly|Array|ReadonlyArray)\b/g;
+/**
+ * The names a type uses beyond the language's own types and literals, when
+ * each of them is one of `exported` (none for a type of the language's own
+ * alone), so a consumer's file can write it as it stands, importing those;
+ * `undefined` when it uses any other name or a shape written out in place.
+ */
+function writableTypeNames(type, exported = new Map()) {
+    const names = [];
+    const rest = type
+        .replace(/'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"/g, '')
+        .replace(BUILT_IN_TYPE_WORDS, '')
+        .replace(/[A-Za-z_$][\w$]*/g, (name) => {
+        if (!exported.has(name))
+            return name;
+        if (!names.includes(name))
+            names.push(name);
+        return '';
+    })
+        .replace(/-?\d+(?:\.\d+)?/g, '');
+    return /^[\s|&()[\]<>,]*$/.test(rest) ? names : undefined;
+}
+/** The type a JSON value is inferred as where state starts from it, when it
+ *  is a primitive's: `boolean`, `number` or `string`. */
+function inferredType(value) {
+    return ['boolean', 'number', 'string'].includes(typeof value)
+        ? typeof value
+        : undefined;
+}
+/**
+ * The type argument the state holding a bound prop takes: none where the
+ * value reads as the declared type, or as a primitive with no declared type;
+ * the declared type where it names the language's own types alone; none for
+ * or types the kit's package entry exports, importing those (`typeImports`);
+ * none for a generic component, whose type parameters the value infers;
+ * else the component's own prop type, as `propsType` names it
+ * (`ComponentProps<typeof X>['open']`), so an array or `null` never starts
+ * the state narrower than the prop.
+ */
+function stateType(binding, value, propsType, exportedTypes) {
+    const declared = binding.declaredType?.trim();
+    const inferred = inferredType(value);
+    if (declared ? declared === inferred : inferred !== undefined)
+        return {};
+    const named = declared
+        ? writableTypeNames(declared, exportedTypes)
+        : undefined;
+    if (declared && named)
+        return {
+            type: declared,
+            ...(named.length > 0 ? { typeImports: named } : {}),
+        };
+    if (binding.generic)
+        return {};
+    return { type: propsType(binding.prop), propsLookup: true };
+}
+/**
+ * The story as its source prints it for a target: a prop given `null` left
+ * out, as a scenario's `null` unsets it, unless the target binds it as a
+ * two-way prop, whose state then starts from `null`; and the default prop of
+ * each two-way prop the story gives left out, as the component's value
+ * starts from the given prop instead.
+ */
+function printedStory(story, target) {
+    const bound = new Set(boundOf(story, target).map((binding) => binding.prop));
+    const props = {};
+    for (const [name, value] of Object.entries(story.props))
+        if (value !== null || bound.has(name))
+            props[name] = value;
+    for (const binding of story.bindings ?? [])
+        if (binding.defaultProp !== undefined && binding.prop in props)
+            delete props[binding.defaultProp];
+    // A name the story imports as a component is a value, never a type.
+    const exportedTypes = story.exportedTypes
+        ? new Map([...story.exportedTypes].filter(([name]) => !story.imports.has(name)))
+        : undefined;
+    return { ...story, props, ...(exportedTypes ? { exportedTypes } : {}) };
+}
+/** The story's bindings this target binds: those for props the story gives,
+ *  named as a variable can be, and in React those with a change prop. */
+function boundOf(story, target) {
+    return (story.bindings ?? []).filter((binding) => binding.prop in story.props &&
+        IDENTIFIER.test(binding.prop) &&
+        (target !== 'react' ||
+            (binding.changeProp !== undefined &&
+                IDENTIFIER.test(binding.changeProp))));
+}
+/** A setter's name for a state variable: `open` → `setOpen`. */
+function setterName(name) {
+    return `set${name[0].toUpperCase()}${name.slice(1)}`;
+}
+/** The story as a React component module, the attributes it gives a
+ *  component spelled as React takes them (see `reactAttributeNames`). */
+export function reactSource(given) {
+    const printed = printedStory(given, 'react');
+    const names = printed.reactAttributeNames ?? {};
+    const declares = (component, name) => printed.imports.get(component)?.declaredAttributes?.includes(name) === true;
+    const story = {
+        ...printed,
+        props: reactProps(printed.props, (name) => declares(printed.component, name), names),
+        children: reactFill(printed.children, declares, names),
+        named: Object.fromEntries(Object.entries(printed.named).map(([slot, fill]) => [
+            slot,
+            reactFill(fill, declares, names),
+        ])),
+        ...(printed.around
+            ? {
+                around: {
+                    ...(printed.around.before
+                        ? { before: reactFill(printed.around.before, declares, names) }
+                        : {}),
+                    ...(printed.around.after
+                        ? { after: reactFill(printed.around.after, declares, names) }
+                        : {}),
+                },
+            }
+            : {}),
+    };
+    // A bound prop's state, and its value and setter passed to the component.
+    const bindings = boundOf(story, 'react');
+    let propsLookup = false;
+    const typeImports = new Set();
+    const states = bindings.map((binding) => {
+        const value = story.props[binding.prop];
+        const { type, propsLookup: looked, typeImports: named, } = stateType(binding, value, (prop) => `ComponentProps<typeof ${story.component}>['${prop}']`, story.exportedTypes);
+        propsLookup ||= looked === true;
+        for (const name of named ?? [])
+            typeImports.add(name);
+        return `${INDENT}const [${binding.prop}, ${setterName(binding.prop)}] = useState${type ? `<${type}>` : ''}(${expression(value)});`;
+    });
+    const bound = new Map(bindings.map((binding) => [
+        binding.prop,
+        [
+            `${binding.prop}={${binding.prop}}`,
+            `${binding.changeProp}={${setterName(binding.prop)}}`,
+        ],
+    ]));
+    // Content beside the component is returned in a fragment with it.
+    const beside = hasAround(story);
+    const depth = beside ? 3 : 2;
+    const component = elementLines(react, story.component, attributeList(react, story.props, false, depth, bound), story.children, story.named, depth);
+    const pad = INDENT.repeat(2);
+    const body = beside
+        ? [`${pad}<>`, ...besideLines(react, story, component, depth), `${pad}</>`]
+        : component;
+    const returned = body.length === 1
+        ? [`${INDENT}return ${body[0].trim()};`]
+        : [`${INDENT}return (`, ...body, `${INDENT});`];
+    // A part is a function component above the example.
+    const parts = partsOf(story).flatMap((part) => [
+        `function ${part.name}(${typedParameters(part)}) {`,
+        `${INDENT}return (`,
+        ...bodyLines(singleJsxRoot(part.react), 2),
+        `${INDENT});`,
+        '}',
+        '',
+    ]);
+    return [
+        ...(states.length
+            ? [
+                `import { useState${propsLookup ? ', type ComponentProps' : ''} } from 'react';`,
+            ]
+            : []),
+        ...importLines(story, undefined, [...typeImports]),
+        '',
+        ...parts,
+        `export function ${story.component}Example() {`,
+        ...(states.length ? [...states, ''] : []),
+        ...returned,
+        '}',
+        '',
+    ].join('\n');
+}
+/** The story as a Vue single-file component. */
+export function vueSource(given) {
+    const story = printedStory(given, 'vue');
+    // A bound prop's ref, bound with `v-model`.
+    const bindings = boundOf(story, 'vue');
+    const typeImports = new Set();
+    const states = bindings.map((binding) => {
+        const value = story.props[binding.prop];
+        const { type, typeImports: named } = stateType(binding, value, (prop) => `InstanceType<typeof ${story.component}>['$props']['${prop}']`, story.exportedTypes);
+        for (const name of named ?? [])
+            typeImports.add(name);
+        return `const ${binding.prop} = ref${type ? `<${type}>` : ''}(${expression(value)});`;
+    });
+    const bound = new Map(bindings.map((binding) => [
+        binding.prop,
+        [
+            binding.vueModel
+                ? `v-model="${binding.prop}"`
+                : `v-model:${binding.prop}="${binding.prop}"`,
+        ],
+    ]));
+    const body = besideLines(vue, story, elementLines(vue, story.component, attributeList(vue, story.props, false, 1, bound), story.children, story.named, 1), 1);
+    // A part is a single-file component of its own, printed after the story's
+    // under a comment naming its file; each imports what it uses.
+    const parts = partsOf(story);
+    const used = new Set([story.component]);
+    collectSlotComponents(story.children, used, false);
+    for (const fill of [
+        ...Object.values(story.named),
+        story.around?.before,
+        story.around?.after,
+    ])
+        collectSlotComponents(fill, used, false);
+    return [
+        '<script setup lang="ts">',
+        ...(states.length ? ["import { ref } from 'vue';"] : []),
+        ...importLines(story, used, [...typeImports]),
+        ...parts.map((part) => `import ${part.name} from './${part.name}.vue';`),
+        ...(states.length ? ['', ...states] : []),
+        '</script>',
+        '',
+        '<template>',
+        ...body,
+        '</template>',
+        '',
+        ...parts.flatMap((part) => [
+            `<!-- ${part.name}.vue -->`,
+            '<script setup lang="ts">',
+            ...importLines(story, new Set(part.imports)),
+            ...(part.imports?.length ? [''] : []),
+            part.parameterTypes
+                ? `defineProps<{ ${part.parameters.map((name) => `${name}: ${part.parameterTypes?.[name] ?? 'any'}`).join('; ')} }>();`
+                : `defineProps([${part.parameters.map((name) => stringLiteral(name)).join(', ')}]);`,
+            '</script>',
+            '',
+            '<template>',
+            ...bodyLines(part.vue, 1),
+            '</template>',
+            '',
+        ]),
+    ].join('\n');
+}
+/** The story as a Svelte component. */
+export function svelteSource(given) {
+    const story = printedStory(given, 'svelte');
+    // A bound prop's state, bound with `bind:`: `$state` in runes mode, a plain
+    // `let` in legacy mode.
+    const bindings = boundOf(story, 'svelte');
+    const runes = story.svelteMode === 'runes';
+    let propsLookup = false;
+    const typeImports = new Set();
+    const states = bindings.map((binding) => {
+        const value = story.props[binding.prop];
+        const { type, propsLookup: looked, typeImports: named, } = stateType(binding, value, (prop) => `ComponentProps<typeof ${story.component}>['${prop}']`, story.exportedTypes);
+        propsLookup ||= looked === true;
+        for (const name of named ?? [])
+            typeImports.add(name);
+        return runes
+            ? `${INDENT}let ${binding.prop} = $state${type ? `<${type}>` : ''}(${expression(value)});`
+            : `${INDENT}let ${binding.prop}${type ? `: ${type}` : ''} = ${expression(value)};`;
+    });
+    const bound = new Map(bindings.map((binding) => [binding.prop, [`bind:${binding.prop}`]]));
+    const body = besideLines(svelte, story, elementLines(svelte, story.component, attributeList(svelte, story.props, false, 0, bound), story.children, story.named, 0), 0);
+    // A part is a snippet at the top of the markup.
+    const parts = partsOf(story).flatMap((part) => [
+        `{#snippet ${part.name}(${typedParameters(part)})}`,
+        ...bodyLines(part.svelte, 1),
+        '{/snippet}',
+        '',
+    ]);
+    return [
+        '<script lang="ts">',
+        ...(propsLookup
+            ? [`${INDENT}import type { ComponentProps } from 'svelte';`]
+            : []),
+        ...importLines(story, undefined, [...typeImports]).map((line) => `${INDENT}${line}`),
+        ...(states.length ? ['', ...states] : []),
+        '</script>',
+        '',
+        ...parts,
+        ...body,
+        '',
+    ].join('\n');
+}
+/**
+ * A story's props in the order the component declares them, so the source
+ * prints them alike however they were gathered (the template's defaults, the
+ * story file's, a scenario's); a prop the component does not declare follows,
+ * in the order given.
+ *
+ * @param props - The props to print.
+ * @param declared - The component's prop names, in declaration order.
+ * @returns The same props, reordered.
+ */
+export function inDeclarationOrder(props, declared) {
+    const ordered = {};
+    for (const name of declared)
+        if (name in props)
+            ordered[name] = props[name];
+    for (const [name, value] of Object.entries(props))
+        if (!(name in ordered))
+            ordered[name] = value;
+    return ordered;
+}
+/** The printer per target. */
+export const SOURCE_PRINTERS = {
+    react: reactSource,
+    vue: vueSource,
+    svelte: svelteSource,
+};