Add message event polyfill (#250)

packages/tuono/src/build/index.ts

@@ -21,6 +21,8 @@ const VITE_SSR_PLUGINS: Array<Plugin> = [
        * @see https://github.com/tuono-labs/tuono/issues/218
        */
       MessageChannel: ['tuono/ssr', 'MessageChannelPolyfill'],
+      MessageEvent: ['tuono/ssr', 'MessageEventPolyfill'],
+      Event: ['tuono/ssr', 'EventPolyfill'],
     }),
   },
 ]

packages/tuono/src/ssr/index.ts

@@ -0,0 +1,5 @@
+export { serverSideRendering } from './server'
+
+export { MessageChannelPolyfill } from './polyfills/MessageChannel'
+export { EventPolyfill } from './polyfills/Event'
+export { MessageEventPolyfill } from './polyfills/MessageEvent'

packages/tuono/src/ssr/polyfills/Event.ts

@@ -0,0 +1,25 @@
+/**
+ * https://dom.spec.whatwg.org/#interface-event
+ */
+// @ts-expect-error Not all the properties are implemented
+export class EventPolyfill implements Event {
+  type: string
+  bubbles: boolean
+  cancelable: boolean
+  composed: boolean
+  currentTarget: EventTarget | null = null
+  defaultPrevented = false
+  eventPhase = 0
+  isTrusted = false
+  target: EventTarget | null = null
+  timeStamp: number = Date.now()
+  returnValue = true
+  srcElement: EventTarget | null = null
+
+  constructor(type: string, eventInitDict?: EventInit) {
+    this.type = type
+    this.bubbles = eventInitDict?.bubbles ?? false
+    this.cancelable = eventInitDict?.cancelable ?? false
+    this.composed = eventInitDict?.composed ?? false
+  }
+}

packages/tuono/src/ssr/polyfills/MessageChannel.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 
-import { MessageChannelPolyfill, MessagePortPolyfill } from './messageChannel'
+import { MessageChannelPolyfill, MessagePortPolyfill } from './MessageChannel'
 
 describe('MessagePortPolyfill', () => {
   it('should invoke onmessage when a message is posted', () => {

packages/tuono/src/ssr/polyfills/MessageEvent.ts

@@ -0,0 +1,25 @@
+import { EventPolyfill } from './Event'
+
+/**
+ * https://html.spec.whatwg.org/multipage/comms.html#the-messageevent-interface
+ */
+// @ts-expect-error Not all the properties are implemented
+export class MessageEventPolyfill<T>
+  extends EventPolyfill
+  implements MessageEvent
+{
+  data?: T
+  lastEventId: string
+  origin: string
+  ports: ReadonlyArray<MessagePort>
+  source: MessageEventSource | null
+
+  constructor(type: string, options: MessageEventInit<T>) {
+    super(type, options)
+    this.data = options.data
+    this.lastEventId = options.lastEventId ?? ''
+    this.origin = options.origin ?? ''
+    this.ports = options.ports ?? []
+    this.source = options.source ?? null
+  }
+}

packages/tuono/src/ssr/server.tsx

@@ -8,7 +8,6 @@ import { HelmetProvider } from 'react-helmet-async'
 import { RouterProvider, createRouter } from 'tuono-router'
 import type { createRoute } from 'tuono-router'
 
-import { MessageChannelPolyfill } from './polyfills/messageChannel'
 import { streamToString } from './utils'
 
 type RouteTree = ReturnType<typeof createRoute>
@@ -95,5 +94,3 @@ export function serverSideRendering(routeTree: RouteTree) {
   `
   }
 }
-
-export { MessageChannelPolyfill }

packages/tuono/vite.config.ts

@@ -15,7 +15,7 @@ export default mergeConfig(
       './src/index.ts',
       './src/build/index.ts',
       './src/config/index.ts',
-      './src/ssr/index.tsx',
+      './src/ssr/index.ts',
       './src/hydration/index.tsx',
     ],
     srcDir: './src',