filter events by source=coderoad

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

src/channel.ts

@@ -20,6 +20,11 @@ class Channel implements Channel {
 
   // receive from webview
   public receive = async (action: T.Action): Promise<void> => {
+    if (action.source !== 'coderoad') {
+      // filter out events from other extensions
+      return
+    }
+
     // action may be an object.type or plain string
     const actionType: string = typeof action === 'string' ? action : action.type
 

src/services/webview/create.ts

@@ -56,7 +56,11 @@ const createReactWebView = ({ extensionPath, channel }: ReactWebViewProps): Outp
 
   // Handle messages from the webview
   const receive = channel.receive
-  const send = (action: T.Action) => panel.webview.postMessage(action)
+  const send = (action: T.Action) =>
+    panel.webview.postMessage({
+      ...action,
+      source: 'coderoad', // filter events on client by source. origin is not reliable
+    })
 
   panel.webview.onDidReceiveMessage(receive, null, disposables)
 

typings/index.d.ts

@@ -49,6 +49,7 @@ export interface Position {
 // current tutorial state
 
 export interface Action {
+  source?: 'coderoad' // filter received actions by this
   type: string
   payload?: any
   meta?: any

web-app/src/services/state/useStateMachine.tsx

@@ -16,7 +16,10 @@ declare let acquireVsCodeApi: any
 const editor = acquireVsCodeApi()
 const editorSend = (action: T.Action) => {
   logger(`TO EXT: "${action.type}"`)
-  return editor.postMessage(action)
+  return editor.postMessage({
+    ...action,
+    source: 'coderoad', // filter events by source on editor side
+  })
 }
 
 // router finds first state match of <Route path='' />
@@ -31,14 +34,15 @@ const useStateMachine = (): Output => {
   // event bus listener
   React.useEffect(() => {
     const listener = 'message'
-    // propograte channel event to state machine
+    // propagate channel event to state machine
     const handler = (event: any) => {
-      // ensure events are coming from coderoad webview
-      if (!event.origin.match(/^vscode-webview/)) {
-        return
-      }
       // NOTE: must call event.data, cannot destructure. VSCode acts odd
       const action = event.data
+
+      if (action.source !== 'coderoad') {
+        // filter out events from other extensions
+        return
+      }
       sendWithLog(action)
     }
     window.addEventListener(listener, handler)