feat: allow dynamic updates of query and markup from embedding window (#275)

Co-authored-by: Stephan Meijer <[email protected]>

Author: Michal Kočárek

README.md

@@ -81,6 +81,38 @@ To configure your playground even further, add one or more of the following attr
 | data-width   | number | string                               | '100% '                                  | width of the element                            |
 | data-loading | eager | lazy                                  | 'lazy'                                   | load the frame eager or lazy (see iframe specs) |
 
+#### dynamic updates
+
+Playground can be updated using [cross-window messaging](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
+after it has been loaded. After the playground is loaded, you can update it with following message: `{type: 'UPDATE_DATA', markup: 'new markup', query: 'new query'}` with both `markup` and `query` being optional.
+
+To find out, if playground is ready, you can listen for a message `{source: 'embedded-testing-playground', type: 'READY'}`
+in window from which are you embedding the playground.
+
+Example:
+
+```html
+<template data-testing-playground data-class="messaging-iframe"></template>
+<script type="text/javascript">
+  function updatePlayground() {
+    const iframe = document.querySelector('.messaging-iframe');
+    iframe.contentWindow.postMessage(
+      { type: 'UPDATE_DATA', markup: 'new markup', query: 'new query' },
+      'https://testing-playground.com',
+    );
+  }
+
+  window.addEventListener('message', ({ data }) => {
+    if (
+      data.source === 'embedded-testing-playground' &&
+      data.type === 'READY'
+    ) {
+      updatePlayground();
+    }
+  });
+</script>
+```
+
 ## Roadmap
 
 Future ideas are maintained in [roadmap.md]. Please use the [issue tracker] to discuss any questions or suggestions you have.
@@ -127,6 +159,7 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

src/components/Embedded.js

@@ -5,6 +5,7 @@ import Preview from './Preview';
 import Query from './Query';
 import Result from './Result';
 import MarkupEditor from './MarkupEditor';
+import useParentMessaging from '../hooks/useParentMessaging';
 import usePlayground from '../hooks/usePlayground';
 import Loader from './Loader';
 
@@ -67,6 +68,8 @@ function Embedded(props) {
     return () => document.body.classList.remove('embedded');
   }, []);
 
+  useParentMessaging(dispatch);
+
   return (
     <div className="relative w-full h-full">
       <Loader loading={isLoading} />

src/embed.html

@@ -55,6 +55,23 @@
       </script>
     </template>
 
+    <template data-testing-playground data-class="messaging-iframe"></template>
+    <script type="text/javascript">
+      function updatePlayground() {
+        const iframe = document.querySelector('.messaging-iframe');
+        iframe.contentWindow.postMessage(
+          { type: 'UPDATE_DATA', markup: 'new markup', query: 'new query' },
+          'http://localhost:1234',
+        );
+      }
+
+      window.addEventListener('message', ({ data }) => {
+        if (data.source === 'embedded-testing-playground' && data.type === 'READY') {
+          updatePlayground();
+        }
+      });
+    </script>
+
     <script async src="embed.js"></script>
   </body>
 </html>

src/hooks/useParentMessaging.js

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+
+function dispatchUpdateData(dispatch, { markup, query }) {
+  if (markup !== undefined) {
+    dispatch({ type: 'SET_MARKUP', markup });
+  }
+
+  if (query !== undefined) {
+    dispatch({ type: 'SET_QUERY', query });
+  }
+}
+
+function useParentMessaging(dispatch) {
+  useEffect(() => {
+    if (window === parent) {
+      return;
+    }
+
+    const listener = ({ source, target, data }) => {
+      if (source !== parent) {
+        return;
+      }
+
+      if (target !== window) {
+        return;
+      }
+
+      switch (data.type) {
+        case 'UPDATE_DATA':
+          dispatchUpdateData(dispatch, data);
+          break;
+        default:
+          return;
+      }
+    };
+
+    window.addEventListener('message', listener);
+
+    parent.postMessage(
+      {
+        source: 'embedded-testing-playground',
+        type: 'READY',
+      },
+      '*', // We don't know parent origin, so we have to send it to whoever is there
+    );
+    return () => window.removeEventListener('message', listener);
+  }, [dispatch]);
+}
+
+export default useParentMessaging;