Improve frame communication in html environment

Author: dabbott

src/components/player/ConsoleProxy.ts

@@ -6,22 +6,25 @@ import {
   LogVisibility,
 } from '../../types/Messages'
 
-const consoleProxy = ({ id: '0' } as unknown) as typeof window.console & {
-  id: string
-  _rnwp_log?: typeof window.console.log
+export type ConsoleProxy = Console & { _rnwp_log: Console['log'] }
+
+function attachConsoleMethodsToProxy(self: { console: Console }) {
+  // I don't think this can fail, but the console object can be strange...
+  // If it fails, we won't proxy all the methods (which is likely fine)
+  try {
+    for (let key in self.console) {
+      let f = (self.console as any)[key]
+
+      if (typeof f === 'function') {
+        ;(consoleProxy as any)[key] = f.bind(self.console)
+      }
+    }
+  } catch (e) {}
 }
 
-// I don't think this can fail, but the console object can be strange...
-// If it fails, we won't proxy all the methods (which is likely fine)
-try {
-  for (let key in window.console) {
-    let f = (window.console as any)[key]
+const consoleProxy = {} as ConsoleProxy
 
-    if (typeof f === 'function') {
-      ;(consoleProxy as any)[key] = f.bind(window.console)
-    }
-  }
-} catch (e) {}
+attachConsoleMethodsToProxy(window)
 
 let consoleMessageIndex = 0
 

src/components/workspace/Workspace.tsx

@@ -456,8 +456,16 @@ export default function Workspace(props: Props) {
         runTsc(filename, code)
         break
       case 'babel':
-      default:
-        runBabel(filename, code)
+      default: {
+        if (/(j|t)sx?$/.test(filename)) {
+          runBabel(filename, code)
+        } else {
+          // We don't actually "compile" non-JS/TS files, but it's simpler
+          // to mark them as compiled so we only have to check file extensions
+          // in one place
+          dispatch(compiled(filename, code))
+        }
+      }
     }
   }
 

src/environments/html-environment.tsx

@@ -1,8 +1,61 @@
 import { bundle } from 'packly'
+import consoleProxy, { ConsoleProxy } from '../components/player/ConsoleProxy'
 import * as path from '../utils/path'
-import { initializeCommunication } from '../utils/playerCommunication'
+import {
+  bindConsoleLogMethods,
+  createWindowErrorHandler,
+  initializeCommunication,
+} from '../utils/playerCommunication'
 import { createAppLayout } from '../utils/PlayerUtils'
-import { EnvironmentOptions, IEnvironment } from './IEnvironment'
+import {
+  EnvironmentOptions,
+  EvaluationContext,
+  IEnvironment,
+} from './IEnvironment'
+
+// Inline stylesheets and scripts
+function generateBundle(context: EvaluationContext) {
+  return bundle({
+    entry: context.entry,
+    request({ origin, url }) {
+      if (origin === undefined) return context.fileMap[url]
+
+      // Don't inline (external) urls starting with http://, https://, or //
+      if (/^(https?)?\/\//.test(url)) return undefined
+
+      // Inline absolute urls
+      if (url.startsWith('/')) return context.fileMap[url.slice(1)]
+
+      // Inline relative urls
+      const lookup = path.join(path.dirname(origin), url)
+
+      return context.fileMap[lookup]
+    },
+  })
+}
+
+function bindIframeCommunication(
+  iframe: HTMLIFrameElement,
+  { id, codeVersion }: { id: string; codeVersion: number }
+) {
+  const iframeWindow = iframe.contentWindow! as Window & {
+    console: ConsoleProxy
+  }
+
+  bindConsoleLogMethods({
+    consoleProxy: iframeWindow.console,
+    codeVersion,
+    id,
+    prefixLineCount: 0,
+    sharedEnvironment: false,
+  })
+
+  iframeWindow.onerror = createWindowErrorHandler({
+    codeVersion,
+    id,
+    prefixLineCount: 0,
+  })
+}
 
 export class HTMLEnvironment implements IEnvironment {
   async initialize({
@@ -21,24 +74,9 @@ export class HTMLEnvironment implements IEnvironment {
       id,
       prefixLineCount: 0,
       sharedEnvironment,
+      consoleProxy,
       onRunApplication: (context) => {
-        const html = bundle({
-          entry: context.entry,
-          request({ origin, url }) {
-            if (origin === undefined) return context.fileMap[url]
-
-            // Don't inline (external) urls starting with http://, https://, or //
-            if (/^(https?)?\/\//.test(url)) return undefined
-
-            // Inline absolute urls
-            if (url.startsWith('/')) return context.fileMap[url.slice(1)]
-
-            // Inline relative urls
-            const lookup = path.join(path.dirname(origin), url)
-
-            return context.fileMap[lookup]
-          },
-        })
+        const html = generateBundle(context)
 
         const document = iframe.contentDocument
 
@@ -47,6 +85,12 @@ export class HTMLEnvironment implements IEnvironment {
         // https://stackoverflow.com/questions/5784638/replace-entire-content-of-iframe
         document.close()
         document.open()
+
+        bindIframeCommunication(iframe, {
+          id,
+          codeVersion: context.codeVersion,
+        })
+
         document.write(html)
         document.close()
       },

src/environments/javascript-environment.tsx

@@ -7,7 +7,10 @@ import VendorComponents, {
 } from '../components/player/VendorComponents'
 import formatError from '../utils/formatError'
 import * as path from '../utils/path'
-import { initializeCommunication } from '../utils/playerCommunication'
+import {
+  initializeCommunication,
+  sendError,
+} from '../utils/playerCommunication'
 import { createAppLayout } from '../utils/PlayerUtils'
 import { prefixAndApply } from '../utils/Styles'
 import type {
@@ -214,8 +217,9 @@ export class JavaScriptEnvironment implements IEnvironment {
         wrapperElement.appendChild(statusBarElement)
       }
 
-      const { sendError } = initializeCommunication({
+      initializeCommunication({
         id,
+        consoleProxy,
         prefixLineCount: this.prefixLineCount,
         sharedEnvironment,
         onRunApplication: (context) => {
@@ -229,7 +233,7 @@ export class JavaScriptEnvironment implements IEnvironment {
         prelude,
         (codeVersion, error) => {
           const message = formatError(error, this.prefixLineCount)
-          sendError(codeVersion, message)
+          sendError(id, codeVersion, message)
         }
       )
 

src/utils/playerCommunication.ts

@@ -1,44 +1,104 @@
 import { isValidElement } from 'react'
 import ReactDOM from 'react-dom'
-import { Message } from '../types/Messages'
-import * as ExtendedJSON from './ExtendedJSON'
-import consoleProxy, {
+import {
   consoleClear,
   consoleLog,
   consoleLogRNWP,
+  ConsoleProxy,
 } from '../components/player/ConsoleProxy'
 import { EvaluationContext } from '../environments/IEnvironment'
+import { Message } from '../types/Messages'
+import * as ExtendedJSON from './ExtendedJSON'
+
+function post(message: Message) {
+  try {
+    parent.postMessage(ExtendedJSON.stringify(message), '*')
+  } catch {}
+}
+
+export function sendMessage(sharedEnvironment: boolean, message: Message) {
+  if (sharedEnvironment) {
+    enhanceConsoleLogs(message)
+    parent.__message(message)
+  } else {
+    post(message)
+  }
+}
+
+export function sendError(
+  id: string,
+  codeVersion: number,
+  errorMessage: string
+) {
+  post({ id, codeVersion, type: 'error', payload: errorMessage })
+}
+
+export function createWindowErrorHandler({
+  codeVersion,
+  id,
+  prefixLineCount,
+}: {
+  codeVersion: number
+  id: string
+  prefixLineCount: number
+}) {
+  return (message: Event | string, _?: string, line?: number) => {
+    const editorLine = (line || 0) - prefixLineCount
+    sendError(id, codeVersion, `${message} (${editorLine})`)
+    return true
+  }
+}
+
+export function bindConsoleLogMethods(options: {
+  codeVersion: number
+  consoleProxy: ConsoleProxy
+  sharedEnvironment: boolean
+  id: string
+  prefixLineCount: number
+}) {
+  const { codeVersion, consoleProxy, sharedEnvironment, id } = options
+
+  consoleProxy._rnwp_log = consoleLogRNWP.bind(
+    consoleProxy,
+    sendMessage.bind(null, sharedEnvironment),
+    id,
+    codeVersion
+  )
+
+  consoleProxy.log = consoleLog.bind(
+    consoleProxy,
+    sendMessage.bind(null, sharedEnvironment),
+    id,
+    codeVersion,
+    'visible'
+  )
 
+  consoleProxy.clear = consoleClear.bind(
+    consoleProxy,
+    sendMessage.bind(null, sharedEnvironment),
+    id,
+    codeVersion
+  )
+}
+
+/**
+ * Every time we run the application, we re-bind all the logging and error message
+ * handlers with a new `codeVersion`. This ensures that logs aren't stale. We also
+ * include the iframe's id to handle the case of multiple preview iframes
+ */
 export function initializeCommunication({
   id,
   sharedEnvironment,
   prefixLineCount,
+  consoleProxy,
   onRunApplication,
 }: {
   id: string
   sharedEnvironment: boolean
   prefixLineCount: number
+  consoleProxy: ConsoleProxy
   onRunApplication: (context: EvaluationContext) => void
 }) {
-  function post(message: Message) {
-    try {
-      parent.postMessage(ExtendedJSON.stringify(message), '*')
-    } catch {}
-  }
-
-  function sendError(codeVersion: number, errorMessage: string) {
-    post({ id, codeVersion, type: 'error', payload: errorMessage })
-  }
-
-  function sendMessage(message: Message) {
-    if (sharedEnvironment) {
-      enhanceConsoleLogs(message)
-      parent.__message(message)
-    } else {
-      post(message)
-    }
-  }
-
   window.onmessage = (e: MessageEvent) => {
     if (!e.data || e.data.source !== 'rnwp') return
 
@@ -48,43 +108,28 @@ export function initializeCommunication({
       codeVersion: number
     }
 
-    consoleProxy._rnwp_log = consoleLogRNWP.bind(
+    bindConsoleLogMethods({
+      codeVersion,
       consoleProxy,
-      sendMessage,
+      sharedEnvironment,
       id,
-      codeVersion
-    )
-    consoleProxy.log = consoleLog.bind(
-      consoleProxy,
-      sendMessage,
+      prefixLineCount,
+    })
+
+    window.onerror = createWindowErrorHandler({
+      prefixLineCount,
       id,
       codeVersion,
-      'visible'
-    )
-    consoleProxy.clear = consoleClear.bind(
-      consoleProxy,
-      sendMessage,
-      id,
-      codeVersion
-    )
-    window.onerror = (message: Event | string, _?: string, line?: number) => {
-      const editorLine = (line || 0) - prefixLineCount
-      sendError(codeVersion, `${message} (${editorLine})`)
-      return true
-    }
+    })
 
     onRunApplication({ entry, fileMap, codeVersion, requireCache: {} })
   }
-
-  return {
-    sendError,
-  }
 }
 
 /**
  * Enhance console logs to allow React elements to be rendered in the parent frame
  */
-function enhanceConsoleLogs(message: Message) {
+export function enhanceConsoleLogs(message: Message) {
   if (message.type === 'console' && message.payload.command === 'log') {
     message.payload.data = message.payload.data.map((log) => {
       if (isValidElement(log as any)) {