fix: apply sandboxing changes to embed mode (#221)

Author: smeijer

scripts/build-client.js

@@ -96,10 +96,6 @@ async function main() {
 
   const entries = ['src/index.html', 'src/embed.js', 'src/sandbox.html'];
 
-  if (process.env.NODE_ENV === 'development') {
-    entries.push('src/embed.html');
-  }
-
   const parcel = await build({
     entries,
     dest: 'dist/client',
@@ -118,6 +114,10 @@ async function main() {
     copy('.well-known', join(dest, '.well-known')),
   ]);
 
+  if (process.env.NODE_ENV === 'development') {
+    copy('src/embed.html', join(dest, 'embed.html'));
+  }
+
   if (parcel.watching) {
     openInBrowser(`http://localhost:${parcel.config.serve.port}`);
   }

src/components/Embedded.js

@@ -23,6 +23,14 @@ const SUPPORTED_PANES = {
   result: true,
 };
 
+const styles = {
+  offscreen: {
+    position: 'absolute',
+    left: -300,
+    width: 100,
+  },
+};
+
 // TODO: we should support readonly mode
 function Embedded() {
   const [{ markup, query, result }, dispatch] = usePlayground({
@@ -61,14 +69,27 @@ function Embedded() {
     <div
       className={`h-full overflow-hidden grid grid-flow-col gap-4 p-4 bg-white shadow rounded ${columnClass}`}
     >
+      {/*the sandbox must always be rendered!*/}
+      {!panes.includes('preview') && (
+        <div style={styles.offscreen}>
+          <Preview
+            markup={markup}
+            elements={result.elements}
+            accessibleRoles={result.accessibleRoles}
+            dispatch={dispatch}
+          />
+        </div>
+      )}
+
       {panes.map((area) => {
         switch (area) {
           case 'preview':
             return (
               <Preview
                 key={area}
                 markup={markup}
-                result={result}
+                elements={result.elements}
+                accessibleRoles={result.accessibleRoles}
                 dispatch={dispatch}
               />
             );
@@ -83,6 +104,7 @@ function Embedded() {
                 query={query}
                 result={result}
                 dispatch={dispatch}
+                variant="minimal"
               />
             );
           case 'result':

src/components/Expandable.js

@@ -18,7 +18,7 @@ function Expandable({ children, className, variant }) {
     >
       {expanded && (
         <div className="absolute bottom-0 -ml-4 h-full w-full overflow-hidden bg-inherit rounded-inherit">
-          <Scrollable variant={variant} minHeight="100%" maxHeight="100%">
+          <Scrollable variant={variant}>
             <div className="whitespace-pre-wrap p-4">
               {children} <div className="py-2 px-4">&nbsp;</div>
             </div>

src/lib/postMessage.js

@@ -8,7 +8,7 @@ function postMessage(target, action) {
       source: 'testing-playground',
       ...action,
     },
-    window.location.origin,
+    target.origin,
   );
 }
 

src/sandbox.js

@@ -16,12 +16,12 @@ const state = {
 };
 
 function postMessage(action) {
-  top.postMessage(
+  parent.postMessage(
     {
       source: 'testing-playground-sandbox',
       ...action,
     },
-    top.location.origin,
+    parent.location.origin,
   );
 }
 
@@ -33,6 +33,7 @@ function runQuery(rootNode, query) {
 }
 
 function setInnerHTML(node, html) {
+  console.log('set html', { node, html });
   const doc = node.ownerDocument;
   node.innerHTML = html;
 
@@ -123,7 +124,7 @@ function updateSandbox(rootNode, markup, query) {
 }
 
 function onMessage({ source, data }) {
-  if (source !== top || data.source !== 'testing-playground') {
+  if (source !== parent || data.source !== 'testing-playground') {
     return;
   }