zibri 2.3.0 → 2.4.1

package/src/parsing/html/csp-options.model.ts

@@ -0,0 +1,109 @@
+import { ZIBRI_DI_TOKENS } from '../../di/default/zibri-di-tokens.default';
+import { inject } from '../../di/inject.function';
+import { DeepPartial } from '../../types/deep-partial.type';
+import { ObjectUtilities } from '../../utilities/object.utilities';
+import { toKebabCase } from '../../utilities/to-kebab-case.function';
+
+/**
+ * The possible CSP sources/values for the CSP headers.
+ */
+export type CspSource = '\'self\''
+    | '\'none\''
+    | '\'unsafe-inline\''
+    | '\'unsafe-eval\''
+    | `\'nonce-${string}\'`
+    | `https://${string}`
+    | `http://${string}`;
+
+/**
+ * Definition of CSP options.
+ */
+export type CspOptions = {
+    /**
+     * Fallback for all fetch destinations that are not explicitly covered by a more specific directive.
+     */
+    defaultSrc: CspSource[],
+    /**
+     * Restricts the base URL used to resolve relative URLs on the page.
+     */
+    baseUri: CspSource[],
+    /**
+     * Restricts the sources from which plugins such as <object>, <embed>, and <applet> may load.
+     */
+    objectSrc: CspSource[],
+    /**
+     * Restricts the URLs that can be used as form submission targets.
+     */
+    formAction: CspSource[],
+    /**
+     * Restricts which origins may embed this document in frames, iframes, or objects.
+     */
+    frameAncestors: CspSource[],
+    /**
+     * Restricts valid sources for JavaScript.
+     */
+    scriptSrc: CspSource[],
+    /**
+     * Restricts inline script event handlers and similar script attributes.
+     */
+    scriptSrcAttr: CspSource[],
+    /**
+     * Restricts valid sources for stylesheets and inline style usage.
+     */
+    styleSrc: CspSource[],
+    /**
+     * Restricts the origins from which images, icons, and similar media-like assets may be loaded.
+     */
+    imgSrc: CspSource[],
+    /**
+     * Restricts the origins from which fonts may be loaded.
+     */
+    fontSrc: CspSource[],
+    /**
+     * Restricts the endpoints that the document may connect to via fetch, XHR, WebSocket, EventSource, and similar APIs.
+     */
+    connectSrc: CspSource[],
+    /**
+     * Restricts the origins from which audio and video media may be loaded.
+     */
+    mediaSrc: CspSource[]
+};
+
+/**
+ * Builds csp options from the given input and default options.
+ * @param options - The input options.
+ * @param defaultValue - The default values to fall back to.
+ * @returns Valid CSP options.
+ */
+export function buildCspOptions(
+    options: DeepPartial<CspOptions> | boolean | undefined,
+    defaultValue: boolean | CspOptions
+): CspOptions | boolean {
+    if (typeof options === 'boolean') {
+        return options;
+    }
+    if (options == undefined) {
+        return defaultValue;
+    }
+    return {
+        ...inject(ZIBRI_DI_TOKENS.DEFAULT_CSP_OPTIONS),
+        ...options
+    };
+}
+
+/**
+ * Builds the Content-Security-Policy headers from the given options.
+ * @param options - The CSP options to build the headers from.
+ * @returns The CSP header as a string.
+ */
+export function buildCspHeaders(options: CspOptions): string {
+    return ObjectUtilities.entries(options)
+        .map(([key, value]) => {
+            if (!value?.length) {
+                return undefined;
+            }
+            return `${toKebabCase(key)} ${value.join(' ')}`;
+        })
+        .filter(Boolean)
+        .join('; ');
+}

package/src/parsing/html/html-response.model.ts

@@ -1,27 +1,47 @@
 import { Readable } from 'stream';
 
+import { buildCspOptions, CspOptions } from './csp-options.model';
+import { ZIBRI_DI_TOKENS } from '../../di/default/zibri-di-tokens.default';
+import { inject } from '../../di/inject.function';
+import { DeepPartial } from '../../types/deep-partial.type';
+
+/**
+ * Additional options for a html response.
+ */
+export type HtmlResponseOptions = {
+    /**
+     * The configuration for CSP headers.
+     * Can either be false to not set any, true to set the default CSP headers or a custom configuration.
+     */
+    csp?: boolean | DeepPartial<CspOptions>
+};
+
 /**
  * A html response.
  */
 export class HtmlResponse {
 
-    private constructor(readonly data: Readable | string) {}
+    private constructor(readonly data: Readable | string, readonly csp: boolean | CspOptions) {}
 
     /**
      * Creates the response from the given html string.
      * @param html - The html value as a string.
+     * @param options - Additional options like eg. CSP headers.
      * @returns A new HtmlResponse.
      */
-    static fromString(html: string): HtmlResponse {
-        return new this(html);
+    static fromString(html: string, options?: HtmlResponseOptions): HtmlResponse {
+        const csp: boolean | CspOptions = buildCspOptions(options?.csp, inject(ZIBRI_DI_TOKENS.DEFAULT_CSP_OPTIONS));
+        return new this(html, csp);
     }
 
     /**
      * Creates the response from the given html stream.
      * @param stream - The html value as a stream.
+     * @param options - Additional options like eg. CSP headers.
      * @returns A new HtmlResponse.
      */
-    static fromStream(stream: Readable): HtmlResponse {
-        return new this(stream);
+    static fromStream(stream: Readable, options?: HtmlResponseOptions): HtmlResponse {
+        const csp: boolean | CspOptions = buildCspOptions(options?.csp, inject(ZIBRI_DI_TOKENS.DEFAULT_CSP_OPTIONS));
+        return new this(stream, csp);
     }
 }

package/src/parsing/json/json.body-parser.ts

@@ -5,7 +5,7 @@ import { KnownHeader } from '../../http/known-header.enum';
 import { MimeType } from '../../http/mime-type.enum';
 import { HttpClientResponse } from '../../http-client/http-client-response.model';
 import { BodyMetadata } from '../../routing/decorators/body.decorator';
-import { BigNumberUtilities } from '../../utilities/big-number.utilities';
+import { BigNumber, NumberUtilities } from '../../utilities/number.utilities';
 import { WebsocketRequest } from '../../websocket/models/websocket-request.model';
 import { BodyParserInterface } from '../body-parser.interface';
 import { BodyParser } from '../decorators/body-parser.decorator';
@@ -63,17 +63,17 @@ export class JsonBodyParser implements BodyParserInterface {
             return req.body;
         }
         const contentLength: string | undefined = req.headers[KnownHeader.CONTENT_LENGTH];
-        if (contentLength && BigNumberUtilities.new(Number(contentLength)).isGreaterThan(metadata.maxSize)) {
+        if (contentLength && NumberUtilities.new(Number(contentLength)).isGreaterThan(metadata.maxSize)) {
             throw new ContentTooLargeError();
         }
 
         const chunks: Buffer[] = [];
-        let received: BigNumber = BigNumberUtilities.new(0);
+        let received: BigNumber = NumberUtilities.new(0);
 
         await new Promise<void>((resolve, reject) => {
             // eslint-disable-next-line typescript/typedef
             const onData = (chunk: Buffer): void => {
-                received = BigNumberUtilities.add(received, chunk.length);
+                received = NumberUtilities.add(received, chunk.length);
                 if (received.isGreaterThan(metadata.maxSize)) {
                     // eslint-disable-next-line typescript/no-use-before-define
                     cleanup();

package/src/parsing/parser.ts

@@ -100,7 +100,8 @@ export class Parser implements ParserInterface, OnAppInit {
     // eslint-disable-next-line jsdoc/require-jsdoc
     parseQueryParam(req: HttpRequest | WebsocketRequest, metadata: QueryParamMetadata): unknown {
         const rawValue: string | undefined = req.query?.[metadata.name];
-        return this.queryParamParseFunctions[metadata.type](rawValue, metadata);
+        const res: unknown = this.queryParamParseFunctions[metadata.type](rawValue, metadata);
+        return res;
     }
 
     // eslint-disable-next-line jsdoc/require-jsdoc

package/src/plugin/invoicing/services/invoice-calc-service.interface.ts

@@ -1,5 +1,5 @@
 
-import { BigNumber } from '../../../utilities/big-number.utilities';
+import { BigNumber } from '../../../utilities/number.utilities';
 import { InvoiceItem } from '../models/invoice-item.model';
 import { Invoice as BaseInvoice } from '../models/invoice.model';
 import { Vat } from '../models/vat.model';

package/src/plugin/invoicing/services/invoice-calc.service.ts

@@ -1,7 +1,7 @@
 
 import { InvoiceCalcServiceInterface } from './invoice-calc-service.interface';
 import { Injectable } from '../../../di/decorators/injectable.decorator';
-import { BigNumberUtilities } from '../../../utilities/big-number.utilities';
+import { BigNumber, NumberUtilities } from '../../../utilities/number.utilities';
 import { InvoiceItem } from '../models/invoice-item.model';
 import { Invoice as BaseInvoice, Invoice } from '../models/invoice.model';
 import { Vat } from '../models/vat.model';
@@ -13,43 +13,43 @@ import { Vat } from '../models/vat.model';
 export class InvoiceCalcService implements InvoiceCalcServiceInterface<Invoice> {
     // eslint-disable-next-line jsdoc/require-jsdoc
     getItemTotalPriceBeforeTax(item: InvoiceItem): BigNumber {
-        return BigNumberUtilities.multiply(item.amount, item.price);
+        return NumberUtilities.multiply(item.amount, item.price);
     }
 
     // eslint-disable-next-line jsdoc/require-jsdoc
     getItemTotalPriceAfterTax(item: InvoiceItem): BigNumber {
         const itemTotalBeforeTax: BigNumber = this.getItemTotalPriceBeforeTax(item);
-        const taxMultiplier: BigNumber = BigNumberUtilities.add(1, BigNumberUtilities.divide(item.vat.rate, 100));
-        return BigNumberUtilities.multiply(itemTotalBeforeTax, taxMultiplier);
+        const taxMultiplier: BigNumber = NumberUtilities.add(1, NumberUtilities.divide(item.vat.rate, 100));
+        return NumberUtilities.multiply(itemTotalBeforeTax, taxMultiplier);
     }
 
     // eslint-disable-next-line jsdoc/require-jsdoc
     getItemTotalTax(item: InvoiceItem): BigNumber {
         const itemTotalBeforeTax: BigNumber = this.getItemTotalPriceBeforeTax(item);
-        return BigNumberUtilities.multiply(itemTotalBeforeTax, BigNumberUtilities.divide(item.vat.rate, 100));
+        return NumberUtilities.multiply(itemTotalBeforeTax, NumberUtilities.divide(item.vat.rate, 100));
     }
 
     // eslint-disable-next-line jsdoc/require-jsdoc
     getTotalBeforeTax<Invoice extends BaseInvoice>(invoice: Invoice): BigNumber {
-        let res: BigNumber = BigNumberUtilities.new(0);
+        let res: BigNumber = NumberUtilities.new(0);
         for (const item of invoice.items) {
-            res = BigNumberUtilities.add(res, this.getItemTotalPriceBeforeTax(item));
+            res = NumberUtilities.add(res, this.getItemTotalPriceBeforeTax(item));
         }
-        return res.lt(0) ? BigNumberUtilities.new(0) : res;
+        return res.lt(0) ? NumberUtilities.new(0) : res;
     }
 
     // eslint-disable-next-line jsdoc/require-jsdoc
     getTotalAfterTax<Invoice extends BaseInvoice>(invoice: Invoice): BigNumber {
         const totalBeforeTax: BigNumber = this.getTotalBeforeTax(invoice);
         const totalTax: BigNumber = this.getTotalTax(invoice);
-        return BigNumberUtilities.add(totalBeforeTax, totalTax);
+        return NumberUtilities.add(totalBeforeTax, totalTax);
     }
 
     // eslint-disable-next-line jsdoc/require-jsdoc
     getTotalTax<Invoice extends BaseInvoice>(invoice: Invoice): BigNumber {
-        let res: BigNumber = BigNumberUtilities.new(0);
+        let res: BigNumber = NumberUtilities.new(0);
         for (const item of invoice.items) {
-            res = BigNumberUtilities.add(res, this.getItemTotalTax(item));
+            res = NumberUtilities.add(res, this.getItemTotalTax(item));
         }
         return res;
     }
@@ -57,9 +57,9 @@ export class InvoiceCalcService implements InvoiceCalcServiceInterface<Invoice>
     // eslint-disable-next-line jsdoc/require-jsdoc
     getTotalTaxForTaxGroup<Invoice extends BaseInvoice>(invoice: Invoice, group: Vat, groupOnlyByRate: boolean): BigNumber {
         const itemsInTaxGroup: InvoiceItem[] = this.getItemsForTaxGroup(invoice, group, groupOnlyByRate);
-        let res: BigNumber = BigNumberUtilities.new(0);
+        let res: BigNumber = NumberUtilities.new(0);
         for (const item of itemsInTaxGroup) {
-            res = BigNumberUtilities.add(res, this.getItemTotalTax(item));
+            res = NumberUtilities.add(res, this.getItemTotalTax(item));
         }
         return res;
     }
@@ -67,11 +67,11 @@ export class InvoiceCalcService implements InvoiceCalcServiceInterface<Invoice>
     // eslint-disable-next-line jsdoc/require-jsdoc
     getTotalBeforeTaxForTaxGroup<Invoice extends BaseInvoice>(invoice: Invoice, group: Vat, groupOnlyByRate: boolean): BigNumber {
         const itemsInTaxGroup: InvoiceItem[] = this.getItemsForTaxGroup(invoice, group, groupOnlyByRate);
-        let res: BigNumber = BigNumberUtilities.new(0);
+        let res: BigNumber = NumberUtilities.new(0);
         for (const item of itemsInTaxGroup) {
-            res = BigNumberUtilities.add(res, this.getItemTotalPriceBeforeTax(item));
+            res = NumberUtilities.add(res, this.getItemTotalPriceBeforeTax(item));
         }
-        return res.lt(0) ? BigNumberUtilities.new(0) : res;
+        return res.lt(0) ? NumberUtilities.new(0) : res;
     }
 
     private getItemsForTaxGroup<Invoice extends BaseInvoice>(invoice: Invoice, group: Vat, groupOnlyByRate: boolean): InvoiceItem[] {

package/src/plugin/invoicing/services/invoice-pdf.service.ts

@@ -8,6 +8,7 @@ import { PdfContentDefinition, PdfColumnDefinition, PdfDocument, PdfDocumentDefi
 import { type FormatDateFn } from '../../../localization/formatting/format-date-fn.model';
 import { type FormatPercentFn } from '../../../localization/formatting/format-percent-fn.model';
 import { type FormatPriceFn } from '../../../localization/formatting/format-price-fn.model';
+import { BigNumber } from '../../../utilities/number.utilities';
 import { ZIBRI_INVOICING_PLUGIN_DI_TOKENS } from '../invoicing.tokens';
 import { Invoice } from '../models/invoice.model';
 import { type InvoicingOptions } from '../models/invoicing-options.model';

package/src/plugin/mailing-list/mailing-list.controller.ts

@@ -67,7 +67,11 @@ export class MailingListController implements OnAppInit {
         const subscriber: MailingListSubscriber = await this.mailingListService.confirmSubscribeToList(token);
         const managePreferencesLink: string = this.mailingListService.getManagePreferencesLink(subscriber.id);
 
-        return PreactUtilities.renderResponse(this.SubscribeSuccessPage, { subscriber, mailingList, managePreferencesLink });
+        const html: string = await PreactUtilities.renderPage(
+            this.SubscribeSuccessPage,
+            { subscriber, mailingList, managePreferencesLink }
+        );
+        return HtmlResponse.fromString(html);
     }
 
     @Response.html()
@@ -84,7 +88,11 @@ export class MailingListController implements OnAppInit {
         await this.mailingListService.unsubscribeFromList(id, subscriberId);
         const managePreferencesLink: string = this.mailingListService.getManagePreferencesLink(subscriberId);
 
-        return PreactUtilities.renderResponse(this.UnsubscribeConfirmationPage, { subscriber, mailingList, managePreferencesLink });
+        const html: string = await PreactUtilities.renderPage(
+            this.UnsubscribeConfirmationPage,
+            { subscriber, mailingList, managePreferencesLink }
+        );
+        return HtmlResponse.fromString(html);
     }
 
     @Response.html()
@@ -97,7 +105,8 @@ export class MailingListController implements OnAppInit {
         const mailingLists: MailingList[] = await this.mailingListRepository.findAll();
         const managePreferencesApiUrl: string = this.mailingListService.getManagePreferencesLink(subscriberId);
 
-        return PreactUtilities.renderResponse(this.PreferencesPage, { subscriber, mailingLists, managePreferencesApiUrl });
+        const html: string = await PreactUtilities.renderPage(this.PreferencesPage, { subscriber, mailingLists, managePreferencesApiUrl });
+        return HtmlResponse.fromString(html);
     }
 
     @Response.empty()

package/src/plugin/payment/providers/pay-pal/pay-pal.payment-provider.test.ts

@@ -13,6 +13,7 @@ import { inject } from '../../../../di/inject.function';
 import { defineProvider } from '../../../../di/models/di-provider.model';
 import { isHttpClientError } from '../../../../http-client/http-client.error';
 import { CurrencyCode } from '../../../../localization/models/currency-code.model';
+import { JsonUtilities } from '../../../../utilities/json.utilities';
 import { UUIDUtilities } from '../../../../utilities/uuid.utilities';
 import { KnownPaymentMethod, PaymentMethod } from '../../models/payment-method.model';
 import { PaymentPluginOptionsInput } from '../../models/payment-plugin-options-input.model';
@@ -49,7 +50,7 @@ async function simulateBuyerApproval(merchantToken: string, orderId: string, ret
                 Authorization: `Bearer ${merchantToken}`,
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify({
+            body: JsonUtilities.stringify({
                 payment_source: {
                     // eslint-disable-next-line cspell/spellchecker
                     paypal: {

package/src/plugin/payment/providers/pay-pal/pay-pal.payment-provider.ts

@@ -217,7 +217,7 @@ export class PayPalPaymentProvider implements PaymentProviderInterface<
         M extends SupportedMethods[number],
         Data extends ProviderPaymentDataMap[M] | ProviderReservationPaymentDataMap[M]
     >(): Repository<Payment<M, Data>> {
-        return inject(repositoryTokenFor(Payment)) as Repository<Payment<M, Data>>;
+        return inject(repositoryTokenFor(Payment)) as unknown as Repository<Payment<M, Data>>;
     }
 
     // eslint-disable-next-line jsdoc/require-jsdoc

package/src/preact/collector.ts

@@ -1,11 +1,25 @@
 import { ComponentChild, ComponentChildren, Fragment, VNode } from 'preact';
 
 import { stringAwareReplace } from './string-aware-replace.function';
-import { OmitStrict } from '../types/omit-strict.type';
+import { JsonUtilities } from '../utilities/json.utilities';
 import { ObjectUtilities } from '../utilities/object.utilities';
 
 const HANDLERS_DIRECTIVE: string = 'data-ssr-handlers';
 
+/**
+ * Context of a current loop iteration.
+ */
+type LoopContext = {
+    /**
+     * The name of the currently looped over value.
+     */
+    varName: string,
+    /**
+     * The currently looped over value.
+     */
+    value: unknown
+};
+
 /**
  * A registered event handler entry.
  */
@@ -22,14 +36,13 @@ type HandlerEntry = {
     /**
      * The prefix of the component instance whose rendered native element owns this handler.
      */
-    ownerPrefix: string | undefined
+    ownerPrefix: string | undefined,
+    /**
+     * Context of a current loop iteration that this handler is called from.
+     */
+    loopContext: LoopContext | undefined
 };
 
-/**
- * A serialized event handler entry.
- */
-type SerializedHandlerEntry = OmitStrict<HandlerEntry, 'ownerPrefix'>;
-
 /**
  * Result for a simple delegate (basically just a passthrough).
  */
@@ -118,6 +131,7 @@ export class PreactCollector {
     private readonly map: Map<string, HandlerEntry> = new Map();
     private readonly nestedComponents: NestedComponentEntry[] = [];
     private readonly componentCounters: Map<string, number> = new Map();
+    private readonly loopContextMap: WeakMap<object, LoopContext> = new WeakMap();
     private readonly handlerRegex: RegExp = /^on/i;
 
     /**
@@ -149,8 +163,8 @@ export class PreactCollector {
                     }
                 }
                 else if (typeof val === 'function') {
-                    // Non-event function prop — can't be JSON.stringify'd, handle as inline binding
-                    nonHandlerFns.set(key, val as Function);
+                    // Non-event function prop — can't be JsonUtilities.stringify'd, handle as inline binding
+                    nonHandlerFns.set(key, val);
                 }
                 else {
                     // Capture non-handler props (className, type, disabled, etc.)
@@ -160,9 +174,31 @@ export class PreactCollector {
 
             let rendered: ComponentChild;
             try {
-                this.validateSingleParam(node.type as Function);
-                // eslint-disable-next-line typescript/no-unsafe-assignment, typescript/no-unsafe-call
-                rendered = (node.type as Function)(node.props);
+                this.validateSingleParam(node.type);
+                const originalMap: typeof Array.prototype.map = Array.prototype.map;
+                // eslint-disable-next-line typescript/no-this-alias
+                const self: this = this;
+                Array.prototype.map = function patchedMap<T, U>(
+                    this: T[],
+                    cb: (value: T, index: number, array: T[]) => U,
+                    thisArg?: unknown
+                ): U[] {
+                    const varName: string | undefined = self.extractFirstParamName(cb.toString());
+                    return originalMap.call(this, (item: T, index: number, arr: T[]) => {
+                        const result: U = cb.call(thisArg, item, index, arr);
+                        if (varName && result !== null && typeof result === 'object') {
+                            self.loopContextMap.set(result as object, { varName, value: item });
+                        }
+                        return result;
+                    }) as U[];
+                } as typeof Array.prototype.map;
+                try {
+                    // eslint-disable-next-line typescript/no-unsafe-assignment, typescript/no-unsafe-call
+                    rendered = (node.type as Function)(node.props);
+                }
+                finally {
+                    Array.prototype.map = originalMap;
+                }
                 if (rendered instanceof Promise) {
                     throw new Error(
                         `[ssr] Nested component '${node.type.name}' is async. `
@@ -207,7 +243,7 @@ export class PreactCollector {
                         }
                     }
                     if (ObjectUtilities.keys(resolvedProps).length) {
-                        componentBindings[`__propsObj_${propsParamName}`] = JSON.stringify(resolvedProps);
+                        componentBindings[`__propsObj_${propsParamName}`] = JsonUtilities.stringify(resolvedProps);
                     }
                 }
             }
@@ -239,7 +275,8 @@ export class PreactCollector {
             const val: unknown = node.props[key];
             if (this.handlerRegex.test(key) && typeof val === 'function') {
                 const event: string = key.slice(2).toLowerCase();
-                const id: string = this.registerHandler(val, event, parentPrefix);
+                const loopContext: LoopContext | undefined = this.loopContextMap.get(node) ?? undefined;
+                const id: string = this.registerHandler(val, event, parentPrefix, loopContext);
                 handlers.push(`${id}:${event}`);
             }
         }
@@ -336,7 +373,10 @@ export class PreactCollector {
             }
             let src: string = entry.src;
             for (const [from, to] of sorted) {
-            // Pass 1 — expand shorthand destructure properties
+                if (from === entry.loopContext?.varName) {
+                    continue;
+                }
+                // Pass 1 — expand shorthand destructure properties
                 src = stringAwareReplace(
                     src,
                     new RegExp(`(?<=[{,]\\s*)${from}(?=\\s*[,}])`, 'g'),
@@ -350,7 +390,7 @@ export class PreactCollector {
                 );
             }
             if (src !== entry.src) {
-                this.map.set(id, { event: entry.event, src, ownerPrefix: entry.ownerPrefix });
+                this.map.set(id, { src, event: entry.event, ownerPrefix: entry.ownerPrefix, loopContext: entry.loopContext });
             }
         }
     }
@@ -384,36 +424,31 @@ export class PreactCollector {
      * @returns The js section as a string.
      */
     getHandlerReattachmentSectionForPrefix(ownerPrefix: string | undefined): string {
-        const filtered: Map<string, SerializedHandlerEntry> = new Map(
-            [...this.map.entries()]
-                // eslint-disable-next-line unusedImports/no-unused-vars
-                .filter(([_, e]) => e.ownerPrefix === ownerPrefix)
-                .map(([id, e]) => [id, { event: e.event, src: e.src }])
-        );
-        if (!filtered.size) {
+        const filtered: [string, HandlerEntry][] = [...this.map.entries()]
+            // eslint-disable-next-line unusedImports/no-unused-vars
+            .filter(([_, e]) => e.ownerPrefix === ownerPrefix);
+
+        if (!filtered.length) {
             return '';
         }
 
-        const json: string = JSON.stringify(Object.fromEntries(filtered), undefined, 4)
-            .split('\n')
-            .map((l, i) => i === 0 ? l : '            ' + l)
-            .join('\n');
+        const entries: string[] = filtered.map(([id, e]) => {
+            const safeSrc: string = e.src.replaceAll('</script>', '\\u003c/script>');
+            const fnExpr: string = e.loopContext
+                ? `((${e.loopContext.varName}) => (${safeSrc}))(${this.serializeLoopValue(e.loopContext.value)})`
+                : `(${safeSrc})`;
+            return `                ${JsonUtilities.stringify(id)}: { event: ${JsonUtilities.stringify(e.event)}, fn: ${fnExpr} }`;
+        });
 
         return [
             '    (function() {',
             '        try {',
-            `            const map = ${json};`,
+            '            const map = {',
+            entries.join(',\n'),
+            '            };',
             '            for (const id of Object.keys(map)) {',
             '                const info = map[id];',
-            '                const { event, src } = info;',
-            '                let fn;',
-            '                try {',
-            '                    fn = eval("(" + src + ")");',
-            '                }',
-            '                catch (error) {',
-            '                    console.error("ssr handler compile error", id, error);',
-            '                    continue;',
-            '                }',
+            '                const { event, fn } = info;',
             `                for (const el of document.querySelectorAll('[${HANDLERS_DIRECTIVE}]')) {`,
             `                    const raw = el.getAttribute('${HANDLERS_DIRECTIVE}');`,
             '                    if (!raw) { continue; }',
@@ -442,13 +477,33 @@ export class PreactCollector {
         return `${base}${count}_`;
     }
 
-    private registerHandler(fn: Function, event: string, ownerPrefix: string | undefined): string {
+    private registerHandler(
+        fn: Function,
+        event: string,
+        ownerPrefix: string | undefined,
+        loopContext: LoopContext | undefined
+    ): string {
         const src: string = fn.toString().replaceAll('</script>', '\\u003c/script>');
-        const result: DelegateResult | undefined = this.extractDelegateName(src);
         const id: string = `h${++this.seq}`;
+
+        // If there's a loop context we must keep the full source so the IIFE
+        // can pass the captured value through. extractDelegateName would discard
+        // the argument (e.g. tab.id) and only keep the callee name.
+        const srcDelegateName: DelegateResult | undefined = this.extractDelegateName(src);
+        const storedSrc: string = loopContext
+            ? src
+            : srcDelegateName?.kind === 'simple'
+                ? srcDelegateName.name
+                : src;
+
         // For simple delegations store just the name; for complex expressions store the full src.
         // Both are renamed uniformly by applyRenames().
-        this.map.set(id, { event, src: result?.kind === 'simple' ? result.name : src, ownerPrefix });
+        this.map.set(id, {
+            event,
+            ownerPrefix,
+            loopContext,
+            src: storedSrc
+        });
         return id;
     }
 
@@ -671,4 +726,33 @@ export class PreactCollector {
     private isVNode(node: unknown): node is VNode {
         return !(typeof node !== 'object' || !node || !('props' in node));
     }
+
+    private extractFirstParamName(fnSrc: string): string | undefined {
+        const s: string = fnSrc.trim().replace(/^async\s+/, '');
+        // (tab) => ... or (tab, index) => ...
+        const parenMatch: RegExpMatchArray | null = s.match(/^\(([^)]*)\)/);
+        if (parenMatch) {
+            const param: string = parenMatch[1].trim().split(',')[0].trim();
+            return param || undefined;
+        }
+        // tab => ...
+        const bareMatch: RegExpMatchArray | null = s.match(/^([$_a-z]\w*)\s*=>/i);
+        return bareMatch ? bareMatch[1] : undefined;
+    }
+
+    private serializeLoopValue(value: unknown): string {
+        if (typeof value === 'function') {
+            return value.toString();
+        }
+        if (Array.isArray(value)) {
+            return `[${value.map(v => this.serializeLoopValue(v)).join(', ')}]`;
+        }
+        if (value !== null && typeof value === 'object') {
+            const entries: string[] = Object.entries(value).map(
+                ([k, v]) => `${JsonUtilities.stringify(k)}: ${this.serializeLoopValue(v)}`
+            );
+            return `{ ${entries.join(', ')} }`;
+        }
+        return JsonUtilities.stringify(value);
+    }
 }