index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <script src="./out/full.js"></script>
        <script>
            Object.assign(globalThis, AsyncCall)
            class BroadcastMessageChannel extends BroadcastChannel {
                on(eventListener) {
                    const f = (e) => eventListener(e.data)
                    this.addEventListener('message', f)
                    return () => this.removeEventListener('message', f)
                }
                send(data) {
                    super.postMessage(data)
                }
            }
            const server = new BroadcastMessageChannel('rpc')
            const client = new BroadcastMessageChannel('rpc')
            let count = 0
            function define(def, key = `server${count++}`) {
                // define server
                AsyncCall(def, {
                    channel: server,
                    key,
                    log: false && {
                        beCalled: true,
                        localError: true,
                        remoteError: true,
                        type: 'pretty',
                        requestReplay: true,
                        sendLocalStack: true,
                    },
                })
                // define client
                globalThis[key] = AsyncCall({}, { channel: client, key })
                console.log('Server is available as global variable', key, globalThis[key], def)
            }
            function sleep(ms) {
                return new Promise((resolve) => setTimeout(resolve, ms))
            }
            define({
                async add(a, b) {
                    return a + b
                },
                async error() {
                    debugger
                    throw new SyntaxError()
                },
                async log(...args) {
                    console.log(...args)
                },
            })
        </script>
    </body>
</html>