Exposing TypeScript functions to the browser

The goal of this article is to explore the possible options for exposing functions, variables and WebKit message handlers to the browser in the simplest and quickest way possible.

In order to explore these options fully, let's take a look at what a vanilla implementation might look like:

Vanilla Exposure

Define types to be exposed:

declare global {
  interface Window {
    webkit: {
      messageHandlers: {
        // Example 1: Send message to Swift app
        someMessageHandler: {
          someStringFunction: (someParam: string) => void;
        };
      };
    };
    // Example 2: Receive message from Swift app
    sendMessageToReactWebApp: (message: string) => void; 
  }
}

Then, define the function body for each:

Example 1

const sendMessageToSwiftApp = (message: string) => {
  if (
    window.webkit &&
    window.webkit.messageHandlers &&
    window.webkit.messageHandlers.someMessageHandler
  ) {
    window.webkit.messageHandlers.someMessageHandler.sendStringToSwiftApp(
      message
    );
  } else {
    console.warn("Message handler 'someMessageHandler' is not available.");
  }
};
sendMessageToSwiftApp('Hello from React!')

Example 2

const sendMessageToReactWebApp = useCallback((message: string) => {
  console.log(`React received message from Swift app: ${message}`);
  sendMessageToSwiftApp(`Message received from React app: ${message}`);
}, []);

useEffect(() => {
  window.sendMessageToReactWebApp = sendMessageToReactWebApp;
}, [sendMessageToReactWebApp]);

That's a lot of code. It sure would be nice if we could simplify a lot of this. Let's see what our options are...

Exposing Functions

We'll start with exposing functions.

declare global {
  interface Window {
    sendMessageToReactWebApp: (message: string) => void;
  }
}

const Main = () => {
  const sendMessageToReactWebApp = useCallback((message: string) => {
    console.log(`React received message from Swift app: ${message}`);
    sendMessageToSwiftApp(`Message received from React app: ${message}`);
  }, []);

  useEffect(() => {
    window.sendMessageToReactWebApp = sendMessageToReactWebApp;
  }, [sendMessageToReactWebApp]);
}

Hooks

useExposeFunction.ts

import { useEffect, useCallback } from 'react';

const useExposeFunction = <T extends (...args: any[]) => void>(func: T) => {
  const memoizedFunc = useCallback(func, [func]);

  useEffect(() => {
    const functionName = func.name as keyof Window;
    (window as any)[functionName] = memoizedFunc;
    return () => {
      delete (window as any)[functionName];
    };
  }, [memoizedFunc, func.name]);
};

export default useExposeFunction;

Usage

declare global {
  interface Window {
    sendMessageToReactWebApp: (message: string) => void;
  }
}

const Main = () => {
  const sendMessageToReactWebApp = (message: string) => {
    console.log(`React received message from Swift app: ${message}`);
    sendMessageToSwiftApp(`Message received from React app: ${message}`);
  };

  useExposeFunction(sendMessageToReactWebApp);
}

Decorators

Note: Will only work with classes.

exposed.ts

export function exposed(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  if (typeof window !== 'undefined') {
    (window as any)[propertyKey] = descriptor.value;
  }
}

Usage

declare global {
  interface Window {
    showCopilotSidebar: typeof HomePage.prototype.showCopilotSidebar;
    hideCopilotSidebar: typeof HomePage.prototype.hideCopilotSidebar;
    showCopilotPopup: typeof HomePage.prototype.showCopilotPopup;
    hideCopilotPopup: typeof HomePage.prototype.hideCopilotPopup;
    sendStatus: typeof HomePage.prototype.sendStatus;
    sendMessageToReactWebApp: (message: string) => void;
  }
}