npm - zibri - Versions diffs - 2.2.0 → 2.3.0 - Mend

zibri 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2438) hide show

package/src/preact/preact.utilities.ts ADDED Viewed

@@ -0,0 +1,1278 @@
+import { JSX, VNode } from 'preact';
+import renderToString from 'preact-render-to-string';
+import { NestedComponentEntry, PreactCollector } from './collector';
+import { pkgToFilename } from './generate-client-scripts.function';
+import { preactHooks } from './hooks/hooks';
+import { PreactComponent } from './preact-component.model';
+import { PreactEmailComponent } from './preact-email-component.model';
+import { findStringEnd, stringAwareReplace } from './string-aware-replace.function';
+import { HtmlResponse } from '../parsing/html/html-response.model';
+import { FsUtilities, FsPath } from '../utilities/fs.utilities';
+import { ObjectUtilities } from '../utilities/object.utilities';
+/**
+ * Definition for a parameter of a preact tsx file.
+ */
+type ParamDefinition = {
+    /**
+     * The local name of the parameter.
+     */
+    localName: string,
+    /**
+     * The default value of the parameter, if any.
+     */
+    defaultSrc: string | undefined
+};
+/**
+ * The two parts that make up a component's script section before they are assembled into the final tree.
+ */
+type ComponentSectionPart = {
+    /**
+     * The const declarations that bind prop values to prefixed local names, emitted before the labeled block.
+     */
+    bindingLines: string,
+    /**
+     * The component body with JSX returns replaced by break statements and variable names prefixed, emitted inside the labeled block.
+     */
+    cleanBody: string
+};
+/**
+ * Utilities for handling preact templates.
+ */
+export abstract class PreactUtilities {
+    private static clientManifest: Record<string, string[]> | undefined;
+    /**
+     * Renders the given component as an email, so no script injection is happening.
+     * @example
+     * ```ts
+     * PreactUtilities.renderEmail(TestEmail, { recipient: 'James Smith' });
+     * ```
+     * @param args - Component and props.
+     * @param args.component - The function component to render.
+     * @param args.props - The properties to pass into the component.
+     * @returns The fully rendered html.
+     */
+    static renderEmail<T = {}>(
+        ...args: keyof T extends never
+            ? [component: PreactEmailComponent<T>]
+            : [component: PreactEmailComponent<T>, props: T]
+    ): string {
+        const [component, props] = args;
+        const node: JSX.Element = component(props ?? ({} as T));
+        return [
+            '<!DOCTYPE html>',
+            this.unescapeConditionalComments(renderToString(node))
+        ].join('\n');
+    }
+    /**
+     * Renders the given component as a page with the component "body" (everything before the top-level return)
+     * inlined into the same <script> tag that also contains the handler bootstrap.
+     * @example
+     * ```ts
+     * PreactUtilities.renderPage(TestPage, { initialCount: 1 });
+     * ```
+     * @param args - Component and props.
+     * @param args.component - The function component to render.
+     * @param args.props - The properties to pass into the component.
+     * @returns The fully rendered html string, with the body and any handlers attached in a script tag.
+     */
+    static async renderPage<T = {}>(
+        ...args: keyof T extends never
+            ? [component: PreactComponent<T>]
+            : [component: PreactComponent<T>, props: T]
+    ): Promise<string> {
+        const [component, props] = args;
+        // ---------- extract component source and prepare inlined script ----------
+        const componentSrc: string = component.toString();
+        const paramsText: string = this.extractParamsText(componentSrc);
+        const bodyText: string = this.extractBodyText(componentSrc);
+        const rootPackages: string[] = await this.getPackagesForComponent(component.name);
+        const rawBeforeReturn: string = this.rewriteClientImportRefs(
+            this.rewriteFrameworkHooks(this.getBodyTextBeforeReturn(bodyText, 'root_')),
+            rootPackages
+        );
+        const propsSection: string = this.getInlinedPropsSection(paramsText, props ?? {});
+        const collector: PreactCollector = new PreactCollector();
+        const rootVNode: VNode = component(props ?? ({} as T));
+        if (rootVNode instanceof Promise) {
+            throw new Error(
+                `[ssr] The root component '${component.name}' is async. `
+                + 'Async components are not supported — remove the async keyword and any top-level await. '
+                + 'If you need async data, fetch it before calling render() and pass the result as props.'
+            );
+        }
+        collector.walk(rootVNode, undefined);
+        let html: string = renderToString(rootVNode);
+        const allPackages: Set<string> = new Set<string>();
+        for (const pkg of await this.getPackagesForComponent(component.name)) {
+            allPackages.add(pkg);
+        }
+        // Also collect from nested components
+        for (const entry of collector.getNestedComponentEntries()) {
+            for (const pkg of await this.getPackagesForComponent(entry.fn.name)) {
+                allPackages.add(pkg);
+            }
+        }
+        for (const pkg of allPackages) {
+            const tag: string = `<script src="${this.getClientScriptUrl(pkg)}"></script>`;
+            html = html.includes('</head>')
+                ? html.replace('</head>', `${tag}\n</head>`)
+                : tag + '\n' + html;
+        }
+        // ---------- build nested component script sections ----------
+        // Build ancestor map upfront so applyRenames can scope renames to the correct subtree.
+        const ancestorMap: Map<string, string | undefined> = new Map(
+            collector.getNestedComponentEntries().map(e => [e.prefix, e.parentPrefix])
+        );
+        const prefixToRenameMap: Map<string, Map<string, string>> = new Map();
+        const sectionPartsByPrefix: Map<string, ComponentSectionPart> = new Map();
+        for (const entry of collector.getNestedComponentEntries()) {
+            const {
+                fn,
+                prefix,
+                parentPrefix,
+                propBindings,
+                propValues,
+                destructureRenameMap,
+                propsParamName,
+                inlineBindings
+            } = entry;
+            const fnSrc: string = fn.toString();
+            const fnPackages: string[] = await this.getPackagesForComponent(fn.name);
+            const body: string = this.rewriteClientImportRefs(
+                this.getBodyTextBeforeReturn(this.extractBodyText(fnSrc), prefix),
+                fnPackages
+            );
+            // Build rename map: declared names + all prop local names -> prefixed versions.
+            const renameMap: Map<string, string> = this.buildRenameMap(
+                body,
+                prefix,
+                propBindings,
+                propsParamName,
+                fn,
+                inlineBindings
+            );
+            prefixToRenameMap.set(prefix, renameMap);
+            // Apply this component's rename map only to handlers within its own subtree.
+            collector.applyRenames(renameMap, prefix, ancestorMap);
+            // Emit prop binding + default value declarations for this instance.
+            const bindingLines: string = this.buildPropBindingLines(
+                prefix,
+                propBindings,
+                propValues,
+                destructureRenameMap,
+                propsParamName,
+                (v: string) => this.resolveInAncestors(v, prefixToRenameMap, ancestorMap, parentPrefix),
+                fn,
+                inlineBindings,
+                renameMap
+            );
+            // Apply this component's rename map to its own body text.
+            const renamedBody: string = this.applyRenameMap(body, renameMap);
+            const cleanBody: string = this.rewriteFrameworkHooks(this.removeJsxReturnStatements(renamedBody, prefix));
+            sectionPartsByPrefix.set(prefix, { bindingLines, cleanBody });
+        }
+        // Nest everything — root body, nested sections, reattachment — inside root_: { }
+        // so nested component bindings can close over root-declared variables.
+        const rootLevelEntries: NestedComponentEntry[] = collector.getNestedComponentEntries()
+            .filter(e => e.parentPrefix === undefined);
+        const rootInner: string = [
+            rawBeforeReturn,
+            ...rootLevelEntries.map(e => this.buildSectionTree(
+                e.prefix,
+                sectionPartsByPrefix,
+                collector.getNestedComponentEntries(),
+                prefix => collector.getHandlerReattachmentSectionForPrefix(prefix)
+            )),
+            collector.getHandlerReattachmentSectionForPrefix(undefined)
+        ].filter(s => s.trim()).join('\n');
+        const rootBlock: string = this.wrapInLabeledBlock(rootInner, 'root_');
+        if (rootBlock.trim() || propsSection.trim()) {
+            const hooksSection: string = preactHooks
+                .map(fn => fn.toString())
+                .filter(s => s.trim())
+                .join('\n')
+                .split('\n')
+                .map(e => `    ${e}`)
+                .join('\n');
+            const scriptContent: string = [
+                `${hooksSection}\n`,
+                propsSection,
+                rootBlock
+            ]
+                .filter(Boolean)
+                .join('\n')
+                .replaceAll('</script>', '\\u003c/script>');
+            if (html.includes('</body>')) {
+                html = html.replace(
+                    '</body>',
+                    `<script>\n${scriptContent}\n</script>\n</body>`
+                );
+            }
+            else {
+                html += `\n<script>\n${scriptContent}\n</script>`;
+            }
+        }
+        return '<!DOCTYPE html>\n' + html;
+    }
+    /**
+     * Render a component and inline the component "body" (everything before the top-level return)
+     * into the same <script> tag that also contains the handler bootstrap. Then wrap it into a html response..
+     * @example
+     * ```ts
+     * PreactUtilities.renderResponse(TestPage, { initialCount: 1 });
+     * ```
+     * @param args - Component and props.
+     * @param args.component - The function component to render.
+     * @param args.props - The properties to pass into the component.
+     * @returns The fully rendered html as a ready to return html response.
+     */
+    static async renderResponse<P = {}>(
+        ...args: keyof P extends never
+            ? [component: PreactComponent<P>]
+            : [component: PreactComponent<P>, props: P]
+    ): Promise<HtmlResponse> {
+        const [component, props] = args;
+        // eslint-disable-next-line typescript/no-explicit-any
+        const htmlString: string = await this.renderPage<any>(component, props);
+        return HtmlResponse.fromString(htmlString);
+    }
+    private static unescapeConditionalComments(html: string): string {
+        let result: string = html;
+        // Standard MSO blocks — both opening and closing are escaped
+        // &lt;!--[if ...]>...&lt;![endif]-->
+        result = result.replaceAll(
+            /&lt;!--\[if ([^\]]*)]>([\S\s]*?)&lt;!\[endif]-->/g,
+            (_match, condition, inner: string) => {
+                const unescaped: string = inner
+                    .replaceAll('&lt;', '<')
+                    .replaceAll('&gt;', '>')
+                    .replaceAll('&quot;', '"')
+                    .replaceAll('&amp;', '&');
+                return `<!--[if ${condition}]>${unescaped}<![endif]-->`;
+            }
+        );
+        // "Show in non-MSO" open: &lt;!--[if !mso]>&lt;!-->
+        result = result.replaceAll(
+            /&lt;!--\[if ([^\]]*)]>&lt;!-->/g,
+            '<!--[if $1]><!-->'
+        );
+        // "Show in non-MSO" close: <!--<![endif]--> (already unescaped by preact, no change needed)
+        return result;
+    }
+    private static resolveInAncestors(
+        value: string,
+        prefixToRenameMap: Map<string, Map<string, string>>,
+        ancestorMap: Map<string, string | undefined>,
+        startPrefix: string | undefined
+    ): string {
+        let result: string = value;
+        let current: string | undefined = startPrefix;
+        while (current !== undefined) {
+            const map: Map<string, string> | undefined = prefixToRenameMap.get(current);
+            if (map) {
+                result = this.applyRenameMap(result, map);
+            }
+            current = ancestorMap.get(current);
+        }
+        return result;
+    }
+    private static buildSectionTree(
+        prefix: string,
+        parts: Map<string, ComponentSectionPart>,
+        allEntries: NestedComponentEntry[],
+        getReattachment: (prefix: string) => string
+    ): string {
+        const { bindingLines, cleanBody } = parts.get(prefix) ?? { bindingLines: '', cleanBody: '' };
+        const children: NestedComponentEntry[] = allEntries.filter(e => e.parentPrefix === prefix);
+        const childSections: string = children
+            .map(c => this.buildSectionTree(c.prefix, parts, allEntries, getReattachment))
+            .join('\n');
+        const reattachment: string = getReattachment(prefix);
+        const blockContents: string = [cleanBody, childSections, reattachment]
+            .filter(s => s.trim()).join('\n');
+        const wrappedBody: string = this.wrapInLabeledBlock(blockContents, prefix);
+        return [bindingLines, wrappedBody].filter(s => s.trim()).join('\n');
+    }
+    private static async getClientManifest(): Promise<Record<string, string[]>> {
+        if (this.clientManifest) {
+            return this.clientManifest;
+        }
+        try {
+            const manifestPath: FsPath = FsUtilities.getPath(process.cwd(), 'assets', 'public', 'vendor', 'manifest.json');
+            // eslint-disable-next-line typescript/no-unsafe-assignment
+            this.clientManifest = JSON.parse(await FsUtilities.readFile(manifestPath));
+        }
+        catch {
+            this.clientManifest = {};
+        }
+        return this.clientManifest ?? {};
+    }
+    private static async getPackagesForComponent(componentName: string): Promise<string[]> {
+        return (await this.getClientManifest())[componentName] ?? [];
+    }
+    private static rewriteClientImportRefs(body: string, packages: string[]): string {
+        let result: string = body;
+        for (const pkg of packages) {
+            const baseVar: string = pkg.replaceAll(/[^\da-z]/gi, '_') + '_client_';
+            // Find all variables tsc generated for this package: chart_js_client_1, chart_js_client_2, etc.
+            const varPattern: RegExp = new RegExp(
+                `(?<![\\w$])${baseVar}(\\d+)(?=[.\\s,;)\\]])`,
+                'g'
+            );
+            const moduleVars: Set<string> = new Set<string>();
+            let varMatch: RegExpExecArray | null;
+            while ((varMatch = varPattern.exec(result)) !== null) {
+                moduleVars.add(`${baseVar}${varMatch[1]}`);
+            }
+            for (const moduleVar of moduleVars) {
+                result = stringAwareReplace(
+                    result,
+                    new RegExp(`(?<![\\w$])${moduleVar}\\.([\\w$]+)(?![\\w$])`, 'g'),
+                    (_match: string, name: string) => name
+                );
+            }
+        }
+        return result;
+    }
+    private static getClientScriptUrl(pkg: string): string {
+        return `/assets/vendor/${pkgToFilename(pkg)}`;
+    }
+    private static rewriteFrameworkHooks(body: string): string {
+        let result: string = body;
+        for (const hook of preactHooks) {
+            result = stringAwareReplace(result, new RegExp(`(?:\\(0,\\s*)?\\w*zibri\\w*_\\d+\\.${hook.name}\\)?(?=\\()`, 'g'), hook.name);
+        }
+        return result;
+    }
+    private static getBodyTextBeforeReturn(bodyText: string, label: string): string {
+        if (!bodyText.length) {
+            return '';
+        }
+        const candidate: string = this.findBeforeTopLevelReturn(bodyText);
+        return this.removeJsxReturnStatements(candidate, label);
+    }
+    // eslint-disable-next-line sonar/cognitive-complexity
+    private static removeJsxReturnStatements(body: string, label: string): string {
+        let result: string = '';
+        let i: number = 0;
+        let inSingle: boolean = false, inDouble: boolean = false, inTemplate: boolean = false;
+        let inLine: boolean = false, inBlock: boolean = false;
+        while (i < body.length) {
+            const ch: string = body[i];
+            const prev: string = body[i - 1];
+            if (inLine) {
+                if (ch === '\n') {
+                    inLine = false;
+                }
+                result += ch;
+                i++;
+                continue;
+            }
+            if (inBlock) {
+                if (prev === '*' && ch === '/') {
+                    inBlock = false;
+                }
+                result += ch;
+                i++;
+                continue;
+            }
+            if (!inSingle && !inDouble && !inTemplate) {
+                if (ch === '/' && body[i + 1] === '/') {
+                    inLine = true;
+                    result += ch;
+                    i++;
+                    continue;
+                }
+                if (ch === '/' && body[i + 1] === '*') {
+                    inBlock = true;
+                    result += ch;
+                    i++;
+                    continue;
+                }
+            }
+            if (!inLine && !inBlock) {
+                if (!inDouble && !inTemplate && ch === '\'' && prev !== '\\') {
+                    inSingle = !inSingle;
+                    result += ch;
+                    i++;
+                    continue;
+                }
+                if (!inSingle && !inTemplate && ch === '"' && prev !== '\\') {
+                    inDouble = !inDouble;
+                    result += ch;
+                    i++;
+                    continue;
+                }
+                if (!inSingle && !inDouble && ch === '`' && prev !== '\\') {
+                    inTemplate = !inTemplate;
+                    result += ch;
+                    i++;
+                    continue;
+                }
+            }
+            if (inSingle || inDouble || inTemplate) {
+                result += ch;
+                i++;
+                continue;
+            }
+            // At a return keyword — check if it returns JSX
+            if (/^return\b/.test(body.slice(i))) {
+                const stmtEnd: number = this.findReturnStatementEnd(body, i);
+                const stmt: string = body.slice(i, stmtEnd);
+                if (this.isJsxReturn(stmt)) {
+                    result += `break ${label};`;
+                    i = stmtEnd;
+                    continue;
+                }
+            }
+            result += ch;
+            i++;
+        }
+        return result;
+    }
+    // eslint-disable-next-line sonar/cognitive-complexity
+    private static findReturnStatementEnd(body: string, start: number): number {
+        let i: number = start + 'return'.length;
+        let depth: number = 0;
+        let inSingle: boolean = false, inDouble: boolean = false, inTemplate: boolean = false;
+        while (i < body.length) {
+            const ch: string = body[i];
+            const prev: string = body[i - 1];
+            if (!inDouble && !inTemplate && ch === '\'' && prev !== '\\') {
+                inSingle = !inSingle;
+                i++;
+                continue;
+            }
+            if (!inSingle && !inTemplate && ch === '"' && prev !== '\\') {
+                inDouble = !inDouble;
+                i++;
+                continue;
+            }
+            if (!inSingle && !inDouble && ch === '`' && prev !== '\\') {
+                inTemplate = !inTemplate;
+                i++;
+                continue;
+            }
+            if (inSingle || inDouble || inTemplate) {
+                i++;
+                continue;
+            }
+            if (ch === '(' || ch === '{' || ch === '[') {
+                depth++;
+            }
+            else if (ch === ')' || ch === '}' || ch === ']') {
+                if (depth === 0) {
+                    return i;
+                } // hit enclosing block's closing brace
+                depth--;
+            }
+            else if (ch === ';' && depth === 0) {
+                return i + 1;
+            }
+            i++;
+        }
+        return i;
+    }
+    private static isJsxReturn(stmt: string): boolean {
+    // Matches compiled TSX output from tsc + preact/jsx-runtime
+        return stmt.includes('jsx_runtime')
+            || stmt.includes('_jsx(')
+            // eslint-disable-next-line cspell/spellchecker
+            || stmt.includes('_jsxs(')
+            || stmt.includes('jsxDEV(');
+    }
+    // eslint-disable-next-line sonar/cognitive-complexity
+    private static findBeforeTopLevelReturn(bodyText: string): string {
+        // extract up to top-level return
+        let i: number = 0;
+        let depth: number = 0;
+        let inSingle: boolean = false;
+        let inDouble: boolean = false;
+        let inTemplate: boolean = false;
+        let inLine: boolean = false;
+        let inBlock: boolean = false;
+        while (i < bodyText.length) {
+            const ch: string = bodyText[i];
+            const prev: string = bodyText[i - 1];
+            if (inLine) {
+                if (ch === '\n') {
+                    inLine = false;
+                }
+                i++;
+                continue;
+            }
+            if (inBlock) {
+                if (prev === '*' && ch === '/') {
+                    inBlock = false;
+                }
+                i++;
+                continue;
+            }
+            if (!inSingle && !inDouble && !inTemplate) {
+                if (ch === '/' && bodyText[i + 1] === '/') {
+                    inLine = true;
+                    i++;
+                    continue;
+                }
+                if (ch === '/' && bodyText[i + 1] === '*') {
+                    inBlock = true;
+                    i++;
+                    continue;
+                }
+            }
+            if (!inLine && !inBlock) {
+                if (!inDouble && !inTemplate && ch === '\'' && prev !== '\\') {
+                    inSingle = !inSingle;
+                    i++;
+                    continue;
+                }
+                if (!inSingle && !inTemplate && ch === '"' && prev !== '\\') {
+                    inDouble = !inDouble;
+                    i++;
+                    continue;
+                }
+                if (!inSingle && !inDouble && ch === '`' && prev !== '\\') {
+                    inTemplate = !inTemplate;
+                    i++;
+                    continue;
+                }
+            }
+            if (inSingle || inDouble || inTemplate || inLine || inBlock) {
+                i++;
+                continue;
+            }
+            if (ch === '{') {
+                depth++;
+            }
+            else if (ch === '}') {
+                depth = Math.max(0, depth - 1);
+            }
+            else if (depth === 0 && /^return\b/.test(bodyText.slice(i))) {
+                return bodyText.slice(0, i);
+            }
+            i++;
+        }
+        return bodyText;
+    }
+    private static extractParamsText(src: string): string {
+        const firstParen: number = src.indexOf('(');
+        if (firstParen === -1) {
+            return '';
+        }
+        // find matching ) for params (simple paren matcher)
+        let depth: number = 0;
+        let paramsEnd: number = -1;
+        for (let i: number = firstParen; i < src.length; i++) {
+            const ch: string = src[i];
+            if (ch === '(') {
+                depth++;
+                continue;
+            }
+            if (ch === ')') {
+                depth--;
+                if (depth === 0) {
+                    paramsEnd = i;
+                    break;
+                }
+            }
+        }
+        if (paramsEnd === -1) {
+            return '';
+        }
+        return src.slice(firstParen + 1, paramsEnd).trim();
+    }
+    // eslint-disable-next-line sonar/cognitive-complexity
+    private static extractBodyText(src: string): string {
+        const firstParen: number = src.indexOf('(');
+        if (firstParen === -1) {
+            return '';
+        }
+        // find matching ) for params (simple paren matcher)
+        let depth: number = 0;
+        let paramsEnd: number = -1;
+        for (let i: number = firstParen; i < src.length; i++) {
+            const ch: string = src[i];
+            if (ch === '(') {
+                depth++;
+                continue;
+            }
+            if (ch === ')') {
+                depth--;
+                if (depth === 0) {
+                    paramsEnd = i;
+                    break;
+                }
+            }
+        }
+        if (paramsEnd === -1) {
+            return '';
+        }
+        // find body braces
+        const braceStart: number = src.indexOf('{', paramsEnd);
+        if (braceStart === -1) {
+            return '';
+        }
+        // match closing brace (handle simple string/comment cases enough for typical components)
+        depth = 0;
+        let inSingle: boolean = false;
+        let inDouble: boolean = false;
+        let inTemplate: boolean = false;
+        let inLine: boolean = false;
+        let inBlock: boolean = false;
+        for (let pos: number = braceStart; pos < src.length; pos++) {
+            const ch: string = src[pos];
+            const prev: string = src[pos - 1];
+            if (inLine) {
+                if (ch === '\n') {
+                    inLine = false;
+                }
+                continue;
+            }
+            if (inBlock) {
+                if (prev === '*' && ch === '/') {
+                    inBlock = false;
+                }
+                continue;
+            }
+            if (!inSingle && !inDouble && !inTemplate) {
+                if (ch === '/' && src[pos + 1] === '/') {
+                    inLine = true;
+                    pos++;
+                    continue;
+                }
+                if (ch === '/' && src[pos + 1] === '*') {
+                    inBlock = true;
+                    pos++;
+                    continue;
+                }
+            }
+            if (!inLine && !inBlock) {
+                if (!inDouble && !inTemplate && ch === '\'' && prev !== '\\') {
+                    inSingle = !inSingle;
+                }
+                else if (!inSingle && !inTemplate && ch === '"' && prev !== '\\') {
+                    inDouble = !inDouble;
+                }
+                else if (!inSingle && !inDouble && ch === '`' && prev !== '\\') {
+                    inTemplate = !inTemplate;
+                }
+            }
+            if (inSingle || inDouble || inTemplate || inLine || inBlock) {
+                continue;
+            }
+            if (ch === '{') {
+                depth++;
+            }
+            else if (ch === '}') {
+                depth--;
+                if (depth === 0) {
+                    return src.slice(braceStart + 1, pos);
+                }
+            }
+        }
+        return '';
+    }
+    private static getInlinedPropsSection(paramsText: string, propsObj: Record<string, unknown>): string {
+        // Separate functions from serializable values
+        const fnProps: Record<string, string> = {};
+        const serializableProps: Record<string, unknown> = {};
+        for (const [key, val] of Object.entries(propsObj)) {
+            if (typeof val === 'function') {
+                fnProps[key] = val.toString();
+            }
+            else {
+                serializableProps[key] = val;
+            }
+        }
+        const safe: string = JSON.stringify(serializableProps, undefined, 4)
+            .split('\n')
+            .map((l, i) => i === 0 ? l : '    ' + l)
+            .join('\n')
+            .replaceAll('<', '\\u003c');
+        const lines: string[] = [`    const __PROPS = ${safe};`];
+        // Emit function props as standalone consts — they can't be JSON-serialized
+        for (const [key, src] of Object.entries(fnProps)) {
+            lines.push(`    const ${key} = ${src};`);
+        }
+        const trimmed: string = paramsText.trim();
+        if (!paramsText.length) {
+            return lines.join('\n');
+        }
+        if (trimmed.startsWith('{')) {
+            const inside: string = trimmed.replaceAll(/^{\s*|\s*}$/g, '');
+            const keys: string[] = this.splitTopLevelTokens(inside)
+                .map(s => {
+                    const parts: string[] = s.trim().split(':');
+                    const propName: string = parts[0].trim();
+                    const maybeLocal: string = (parts[1] ?? '').trim();
+                    if (maybeLocal && /^[$_a-z]\w*$/i.test(maybeLocal)) {
+                        return `${propName}: ${maybeLocal}`;
+                    }
+                    return propName;
+                })
+                .filter(Boolean)
+                // Only destructure from __PROPS — function props are already declared as consts
+                .filter(k => {
+                    const propName: string = k.split(':')[0].trim();
+                    return !(propName in fnProps);
+                })
+                .filter(k => /^[$_a-z]\w*(?:\s*:\s*[$_a-z]\w*)?$/i.test(k.trim()));
+            if (keys.length) {
+                lines.push(`    const { ${keys.join(', ')} } = __PROPS;`);
+            }
+            return lines.join('\n');
+        }
+        const firstName: string = trimmed.split(',')[0].split('=')[0].trim();
+        if (firstName.length && /^[$_a-z]\w*$/i.test(firstName)) {
+            lines.push(`    const ${firstName} = __PROPS.${firstName} !== undefined ? __PROPS.${firstName} : __PROPS;`);
+        }
+        return lines.join('\n');
+    }
+    // eslint-disable-next-line sonar/cognitive-complexity
+    private static buildRenameMap(
+        strippedBody: string,
+        prefix: string,
+        propBindings: Record<string, string>,
+        propsParamName: string | undefined,
+        componentFn: Function,
+        inlineBindings: Record<string, string>
+    ): Map<string, string> {
+        const renameMap: Map<string, string> = new Map();
+        // Declared names in the body
+        const declPatterns: RegExp[] = [
+            /\b(?:let|const|var)\s+([$A-Z_a-z]\w*)/g,
+            /\bfunction\s*\*?\s*([$A-Z_a-z]\w*)\s*\(/g,
+            /\bclass\s+([$A-Z_a-z]\w*)/g
+        ];
+        const blankedBody: string = this.blankStringsAndComments(strippedBody);
+        for (const pattern of declPatterns) {
+            let match: RegExpExecArray | null;
+            while ((match = pattern.exec(blankedBody)) !== null) {
+                renameMap.set(match[1], `${prefix}${match[1]}`);
+            }
+        }
+        for (const { inner } of this.findDestructurePatterns(blankedBody)) {
+            for (const name of this.extractDestructuredNames(inner)) {
+                renameMap.set(name, `${prefix}${name}`);
+            }
+        }
+        // Handler prop local names (from propBindings)
+        for (const key of ObjectUtilities.keys(propBindings)) {
+            if (key.startsWith('__propsObj_')) {
+                const paramName: string = key.replace('__propsObj_', '');
+                renameMap.set(paramName, `${prefix}${paramName}`);
+            }
+            else {
+                renameMap.set(key, `${prefix}${key}`);
+            }
+        }
+        for (const localName of ObjectUtilities.keys(inlineBindings)) {
+            renameMap.set(localName, `${prefix}${localName}`);
+        }
+        if (propsParamName) {
+            renameMap.set(propsParamName, `${prefix}${propsParamName}`);
+        }
+        else {
+            // ALL destructured param names — including those using defaults not passed by parent
+            const allParams: ParamDefinition[] = this.extractAllParamEntries(componentFn.toString());
+            for (const { localName } of allParams) {
+                if (localName && localName !== 'children') {
+                    renameMap.set(localName, `${prefix}${localName}`);
+                }
+            }
+        }
+        return renameMap;
+    }
+    private static blankStringsAndComments(text: string): string {
+        let result: string = '';
+        let i: number = 0;
+        while (i < text.length) {
+            if (text[i] === '"' || text[i] === '\'' || text[i] === '`') {
+                const end: number = findStringEnd(text, i, text[i]);
+                result += ' '.repeat(end - i);
+                i = end;
+            }
+            else if (text[i] === '/' && text[i + 1] === '/') {
+                const end: number = text.indexOf('\n', i);
+                const commentEnd: number = end === -1 ? text.length : end;
+                result += ' '.repeat(commentEnd - i);
+                i = commentEnd;
+            }
+            else if (text[i] === '/' && text[i + 1] === '*') {
+                const end: number = text.indexOf('*/', i + 2);
+                const commentEnd: number = end === -1 ? text.length : end + 2;
+                result += ' '.repeat(commentEnd - i);
+                i = commentEnd;
+            }
+            else {
+                result += text[i];
+                i++;
+            }
+        }
+        return result;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    private static findDestructurePatterns(body: string): { inner: string, isArray: boolean }[] {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+        const results: { inner: string, isArray: boolean }[] = [];
+        const pattern: RegExp = /\b(?:let|const|var)\s*([[{])/g;
+        let match: RegExpExecArray | null;
+        while ((match = pattern.exec(body)) !== null) {
+            const isArray: boolean = match[1] === '[';
+            const open: string = match[1];
+            const close: string = isArray ? ']' : '}';
+            let depth: number = 1;
+            let i: number = match.index + match[0].length;
+            while (i < body.length && depth > 0) {
+                if (body[i] === open) {
+                    depth++;
+                }
+                else if (body[i] === close) {
+                    depth--;
+                }
+                i++;
+            }
+            const inner: string = body.slice(match.index + match[0].length, i - 1);
+            results.push({ inner, isArray });
+        }
+        return results;
+    }
+    // eslint-disable-next-line sonar/cognitive-complexity
+    private static extractDestructuredNames(destructureText: string): string[] {
+        const names: string[] = [];
+        const tokens: string[] = this.splitTopLevelTokens(destructureText);
+        for (const token of tokens) {
+            if (!token) {
+                continue;
+            }
+            // Strip default value at depth 0
+            let eqIdx: number = -1;
+            let ed: number = 0;
+            let inS: boolean = false;
+            let sChar: string = '';
+            for (let i: number = 0; i < token.length; i++) {
+                const ch: string = token[i];
+                const prev: string = token[i - 1];
+                if (inS) {
+                    if (ch === sChar && prev !== '\\') {
+                        inS = false;
+                    }
+                    continue;
+                }
+                if (ch === '"' || ch === '\'' || ch === '`') {
+                    inS = true;
+                    sChar = ch;
+                    continue;
+                }
+                if (ch === '(' || ch === '{' || ch === '[') {
+                    ed++;
+                }
+                else if (ch === ')' || ch === '}' || ch === ']') {
+                    ed--;
+                }
+                else if (ch === '=' && ed === 0 && token[i + 1] !== '>') {
+                    eqIdx = i;
+                    break;
+                }
+            }
+            const withoutDefault: string = (eqIdx !== -1 ? token.slice(0, eqIdx) : token).trim();
+            // Nested object destructure: { a, b: localB }
+            if (withoutDefault.startsWith('{')) {
+                const inner: string = withoutDefault.slice(1, withoutDefault.lastIndexOf('}')).trim();
+                names.push(...this.extractDestructuredNames(inner));
+                continue;
+            }
+            // Nested array destructure: [a, b]
+            if (withoutDefault.startsWith('[')) {
+                const inner: string = withoutDefault.slice(1, withoutDefault.lastIndexOf(']')).trim();
+                names.push(...this.extractDestructuredNames(inner));
+                continue;
+            }
+            // Rename: propName: localName — take the local name (right side)
+            const colonIdx: number = withoutDefault.indexOf(':');
+            if (colonIdx !== -1) {
+                const afterColon: string = withoutDefault.slice(colonIdx + 1).trim();
+                // Only treat as rename if right side is a plain identifier, not a type
+                if (/^[$_a-z]\w*$/i.test(afterColon)) {
+                    names.push(afterColon);
+                }
+                // Otherwise it's a TypeScript type annotation — left side is the local name
+                else {
+                    const beforeColon: string = withoutDefault.slice(0, colonIdx).trim();
+                    if (/^[$_a-z]\w*$/i.test(beforeColon)) {
+                        names.push(beforeColon);
+                    }
+                }
+                continue;
+            }
+            // Plain identifier: possibly with rest spread ...name
+            const plain: string = withoutDefault.replace(/^\.{3}/, '').trim();
+            if (/^[$_a-z]\w*$/i.test(plain)) {
+                names.push(plain);
+            }
+        }
+        return names;
+    }
+    private static wrapInLabeledBlock(body: string, prefix: string): string {
+        const indented: string = body
+            .split('\n')
+            .filter(s => s.trim())
+            .map(l => `    ${l}`)
+            .join('\n');
+        return indented.trim()
+            ? `    ${prefix}: {\n${indented}\n    }\n`
+            : '';
+    }
+    // eslint-disable-next-line sonar/cognitive-complexity
+    private static buildPropBindingLines(
+        prefix: string,
+        propBindings: Record<string, string>,
+        propValues: Record<string, unknown>,
+        destructureRenameMap: Map<string, string>,
+        propsParamName: string | undefined,
+        resolveValue: (v: string) => string,
+        componentFn: Function,
+        inlineBindings: Record<string, string>,
+        ownRenameMap: Map<string, string>
+    ): string {
+        const lines: string[] = [];
+        if (propsParamName) {
+        // Non-destructured param: reconstruct the full props object
+            const entries: string[] = [];
+            for (const [key, value] of ObjectUtilities.entries(propBindings)) {
+                if (key.startsWith('__propsObj_')) {
+                    // eslint-disable-next-line typescript/no-unsafe-assignment
+                    const parsed: Record<string, string> = JSON.parse(value);
+                    for (const [propName, resolvedName] of ObjectUtilities.entries(parsed)) {
+                        entries.push(`${propName}: ${resolveValue(resolvedName)}`);
+                    }
+                }
+                else {
+                    entries.push(`${key}: ${resolveValue(value)}`);
+                }
+            }
+            // Inline bindings go into the props object too
+            for (const [localName, src] of ObjectUtilities.entries(inlineBindings)) {
+                const resolvedSrc: string = resolveValue(src);
+                // Reverse-lookup to get the prop name for this local name
+                const propName: string = destructureRenameMap.get(localName) ?? localName;
+                entries.push(`${propName}: ${resolvedSrc}`);
+            }
+            for (const [propName, val] of ObjectUtilities.entries(propValues)) {
+                entries.push(`${propName}: ${JSON.stringify(val)}`);
+            }
+            if (entries.length) {
+                lines.push(`    const ${prefix}${propsParamName} = { ${entries.join(', ')} };`);
+            }
+        }
+        else {
+        // Destructured param: emit one const per prop local name
+            // Handler bindings — simple delegations resolved to a name
+            for (const [key, value] of ObjectUtilities.entries(propBindings)) {
+                if (key.startsWith('__propsObj_')) {
+                    continue;
+                }
+                lines.push(`    const ${prefix}${key} = ${resolveValue(value)};`);
+            }
+            // Inline bindings — complex expressions emitted as named consts with
+            // parentRenameMap applied so references to parent-scope names are resolved
+            for (const [localName, src] of ObjectUtilities.entries(inlineBindings)) {
+                const resolvedSrc: string = resolveValue(src);
+                lines.push(`    const ${prefix}${localName} = ${resolvedSrc};`);
+            }
+            // All declared params — emit passed value, or default, or skip
+            const allParams: ParamDefinition[] = this.extractAllParamEntries(componentFn.toString());
+            for (const { localName, defaultSrc } of allParams) {
+                if (!localName || localName === 'children') {
+                    continue;
+                }
+                // Skip if already emitted as a handler or inline binding
+                if (localName in propBindings || localName in inlineBindings) {
+                    continue;
+                }
+                const propName: string = destructureRenameMap.get(localName) ?? localName;
+                if (propName in propValues) {
+                    lines.push(`    const ${prefix}${localName} = ${JSON.stringify(propValues[propName])};`);
+                    continue;
+                }
+                if (defaultSrc !== undefined) {
+                    // Apply own rename map so `id = label` becomes `checkbox0_id = checkbox0_label`
+                    const renamedDefault: string = this.applyRenameMap(defaultSrc, ownRenameMap);
+                    lines.push(`    const ${prefix}${localName} = ${renamedDefault};`);
+                    continue;
+                }
+                lines.push(`    const ${prefix}${localName} = undefined;`);
+            }
+        }
+        return lines.join('\n');
+    }
+    // eslint-disable-next-line sonar/cognitive-complexity
+    private static extractAllParamEntries(fnSrc: string): ParamDefinition[] {
+        const results: ParamDefinition[] = [];
+        const firstParen: number = fnSrc.indexOf('(');
+        if (firstParen === -1) {
+            return results;
+        }
+        let depth: number = 0, paramsEnd: number = -1;
+        for (let i: number = firstParen; i < fnSrc.length; i++) {
+            if (fnSrc[i] === '(') {
+                depth++;
+            }
+            else if (fnSrc[i] === ')') {
+                depth--;
+                if (depth === 0) {
+                    paramsEnd = i;
+                    break;
+                }
+            }
+        }
+        if (paramsEnd === -1) {
+            return results;
+        }
+        const paramsText: string = fnSrc.slice(firstParen + 1, paramsEnd).trim();
+        if (!paramsText.startsWith('{')) {
+            return results;
+        }
+        const braceOpen: number = paramsText.indexOf('{');
+        const braceClose: number = paramsText.lastIndexOf('}');
+        if (braceOpen === -1 || braceClose === -1) {
+            return results;
+        }
+        const destructureText: string = paramsText.slice(braceOpen + 1, braceClose);
+        // Use the same top-level comma splitter from extractDestructuredNames
+        const tokens: string[] = this.splitTopLevelTokens(destructureText);
+        for (const token of tokens) {
+            if (!token) {
+                continue;
+            }
+            // Extract default value at depth 0 — same logic as before
+            let eqIdx: number = -1;
+            let ed: number = 0;
+            let inS: boolean = false;
+            let sChar: string = '';
+            for (let i: number = 0; i < token.length; i++) {
+                const ch: string = token[i];
+                const prev: string = token[i - 1];
+                if (inS) {
+                    if (ch === sChar && prev !== '\\') {
+                        inS = false;
+                    }
+                    continue;
+                }
+                if (ch === '"' || ch === '\'' || ch === '`') {
+                    inS = true;
+                    sChar = ch;
+                    continue;
+                }
+                if (ch === '(' || ch === '{' || ch === '[') {
+                    ed++;
+                }
+                else if (ch === ')' || ch === '}' || ch === ']') {
+                    ed--;
+                }
+                else if (ch === '=' && ed === 0 && token[i + 1] !== '>') {
+                    eqIdx = i;
+                    break;
+                }
+            }
+            const withoutDefault: string = (eqIdx !== -1 ? token.slice(0, eqIdx) : token).trim();
+            const defaultSrc: string | undefined = eqIdx !== -1
+                ? token.slice(eqIdx + 1).trim()
+                : undefined;
+            // Delegate name extraction to extractDestructuredNames
+            const names: string[] = this.extractDestructuredNames(withoutDefault);
+            // For top-level params we only want the single local name
+            const localName: string = names[0] ?? '';
+            if (localName) {
+                results.push({ localName, defaultSrc });
+            }
+        }
+        return results;
+    }
+    private static splitTopLevelTokens(text: string): string[] {
+        const tokens: string[] = [];
+        let tokenStart: number = 0;
+        let depth: number = 0;
+        let inStr: boolean = false;
+        let strChar: string = '';
+        for (let i: number = 0; i < text.length; i++) {
+            const ch: string = text[i];
+            const prev: string = text[i - 1];
+            if (inStr) {
+                if (ch === strChar && prev !== '\\') {
+                    inStr = false;
+                }
+                continue;
+            }
+            if (ch === '"' || ch === '\'' || ch === '`') {
+                inStr = true;
+                strChar = ch;
+                continue;
+            }
+            if (ch === '(' || ch === '{' || ch === '[') {
+                depth++;
+            }
+            else if (ch === ')' || ch === '}' || ch === ']') {
+                depth--;
+            }
+            else if (ch === ',' && depth === 0) {
+                tokens.push(text.slice(tokenStart, i).trim());
+                tokenStart = i + 1;
+            }
+        }
+        tokens.push(text.slice(tokenStart).trim());
+        return tokens;
+    }
+    private static applyRenameMap(text: string, renameMap: Map<string, string>): string {
+        const sorted: [string, string][] = [...renameMap.entries()]
+            .sort((a, b) => b[0].length - a[0].length);
+        let result: string = text;
+        for (const [from, to] of sorted) {
+            // Expand to explicit form { from: to } so the key is preserved.
+            result = stringAwareReplace(
+                result,
+                new RegExp(`(?<=[{,]\\s*)${from}(?=\\s*[,}])`, 'g'),
+                () => `${from}: ${to}`
+            );
+            // rename remaining references (variable uses, not property keys)
+            result = stringAwareReplace(
+                result,
+                new RegExp(`(?<![\\w$.])${from}(?![\\w$:])`, 'g'),
+                to
+            );
+        }
+        return result;
+    }
+}