⚡ Explicitly initialize transfer nested functions to support tree-shaking

Moved the Comlink transfer handler registration from a module-level side effect to an explicit initialization function. This allows the package to be marked as side-effect free in package.json, enabling better bundle optimization. The initialization is now called specifically in the FrameWrapper and HostIframe components and includes checks to prevent redundant registrations.

Author: Heiner Pöpping

package.json

@@ -16,9 +16,7 @@
             "default": "./dist/esm/index.js"
         }
     },
-    "sideEffects": [
-        "**/utils/transferNestedFunctions.*"
-    ],
+    "sideEffects": false,
     "keywords": [
         "chayns",
         "chayns-toolkit",

src/host/iframe/HostIframe.tsx

@@ -13,6 +13,7 @@ import {
 } from '../../types/IChaynsReact';
 import useUpdateData from './utils/useUpdateData';
 import { replaceStagingUrl } from "../../util/url";
+import { initTransferNestedFunctions } from '../../util/transferNestedFunctions';
 
 type HostIframeProps = {
     iFrameProps: { [key: string]: unknown, name: string },
@@ -109,6 +110,8 @@ const HostIframe: FC<HostIframeProps> = ({
     // region expose data and functions to iframe
     useEffect(() => {
         if (ref.current?.contentWindow) {
+            initTransferNestedFunctions();
+
             const obj = {
                 [iFrameProps.name]: {
                     functions: {

src/index.ts

@@ -1,5 +1,3 @@
-import './util/transferNestedFunctions';
-
 export { default as ChaynsProvider, type ChaynsProviderProps } from './components/ChaynsProvider';
 export { default as getDeviceInfo, getScreenSize, getClientDeviceInfo } from './util/deviceHelper';
 export { default as ChaynsHost } from './host/ChaynsHost';

src/umd.index.ts

@@ -1,5 +1,3 @@
-import './util/transferNestedFunctions';
-
 export { default as getDeviceInfo, getScreenSize, getClientDeviceInfo } from './util/deviceHelper';
 export * from './calls';
 export * from './types/IChaynsReact';

src/util/transferNestedFunctions.ts

@@ -1,32 +1,46 @@
 // @ts-nocheck
 import * as Comlink from 'comlink';
 
-Comlink.transferHandlers.set("FUNCTION", {
-    canHandle: obj => {
-        return obj && typeof obj === "object" && Object.values(obj).some(x => typeof x === 'function');
-    },
-    serialize(obj) {
-        obj._functionKeys = [];
-        const ports = [];
-        Object.entries(obj).forEach(([k,v]) => {
-            if(typeof v === 'function'){
-                const { port1, port2 } = new MessageChannel();
-                obj._functionKeys.push(k);
-                Comlink.expose(obj[k], port1);
-                obj[k] = port2;
-                ports.push(port2);
-            }
-        })
-        return [obj,ports];
-    },
-    deserialize(obj) {
-        obj._functionKeys.forEach((x) => {
-            // under certain conditions deserialize can be called more than once on same object
-            if (obj[x] instanceof MessagePort) {
-                obj[x].start();
-                obj[x] = Comlink.wrap(obj[x]);
-            }
-        })
-        return obj;
+const TRANSFER_HANDLER_NAME = 'FUNCTION';
+
+let isInitialized = false;
+
+export const initTransferNestedFunctions = () => {
+    if (isInitialized || Comlink.transferHandlers.has(TRANSFER_HANDLER_NAME)) {
+        isInitialized = true;
+        return;
     }
-});
+
+    Comlink.transferHandlers.set(TRANSFER_HANDLER_NAME, {
+        canHandle: obj => {
+            return obj && typeof obj === 'object' && Object.values(obj).some(x => typeof x === 'function');
+        },
+        serialize(obj) {
+            obj._functionKeys = [];
+            const ports = [];
+            Object.entries(obj).forEach(([k, v]) => {
+                if (typeof v === 'function') {
+                    const { port1, port2 } = new MessageChannel();
+                    obj._functionKeys.push(k);
+                    Comlink.expose(obj[k], port1);
+                    obj[k] = port2;
+                    ports.push(port2);
+                }
+            });
+            return [obj, ports];
+        },
+        deserialize(obj) {
+            obj._functionKeys.forEach((x) => {
+                // under certain conditions deserialize can be called more than once on same object
+                if (obj[x] instanceof MessagePort) {
+                    obj[x].start();
+                    obj[x] = Comlink.wrap(obj[x]);
+                }
+            });
+            return obj;
+        }
+    });
+
+    isInitialized = true;
+};
+

src/wrapper/FrameWrapper.ts

@@ -19,6 +19,7 @@ import {
     ToolbarChangeListenerResult,
 } from '../types/IChaynsReact';
 import { setTappHeight } from '../util/heightHelper';
+import { initTransferNestedFunctions } from '../util/transferNestedFunctions';
 
 export class FrameWrapper implements IChaynsReact {
 
@@ -261,10 +262,6 @@ export class FrameWrapper implements IChaynsReact {
             return this.exposedFunctions.scrollByY(value, duration);
         },
         createDialog: <I, R>(config: Dialog<I>) => {
-            if (config.type === DialogType.INPUT && typeof config.formatter === 'function') {
-                config.formatter = comlink.proxy(config.formatter);
-            }
-
             return new DialogHandler<R>(config, this.functions.openDialog, this.exposedFunctions.closeDialog, this.functions.dispatchEventToDialogClient, this.functions.addDialogClientEventListener);
         },
         closeDialog: async (dialogId) => {
@@ -340,6 +337,8 @@ export class FrameWrapper implements IChaynsReact {
     initialized = false;
 
     constructor() {
+        initTransferNestedFunctions();
+
         const initialDataTag = document.querySelector('#__CHAYNS_DATA__');
         if (initialDataTag) {
             this.values = JSON.parse(initialDataTag.innerHTML) as ChaynsReactValues;