Use cross-origin HTML preview renderer

.env.example

@@ -3,8 +3,9 @@ REACT_APP_SENTRY_DSN=''
 REACT_APP_SENTRY_ENV='local'
 PUBLIC_URL='http://localhost:3011'
 ASSETS_URL='http://localhost:3011'
+HTML_RENDERER_URL='http://localhost:3003'
 REACT_APP_GOOGLE_TAG_MANAGER_ID=''
 REACT_APP_API_ENDPOINT='http://localhost:3009'
 REACT_APP_PLAUSIBLE_DATA_DOMAIN=''
 REACT_APP_PLAUSIBLE_SOURCE=''
-REACT_APP_ALLOWED_IFRAME_ORIGINS='http://localhost:3011,http://localhost:3012'
+REACT_APP_ALLOWED_IFRAME_ORIGINS='http://localhost:3011,http://localhost:3012'

.github/workflows/deploy.yml

@@ -18,6 +18,10 @@ on:
         required: false
         default: "https://staging-editor-static.raspberrypi.org"
         type: string
+      html_renderer_url:
+        required: false
+        default: "https://staging-editor-static.raspberrypi.org"
+        type: string
       react_app_api_endpoint:
         required: false
         default: "https://staging-editor-api.raspberrypi.org"
@@ -62,7 +66,7 @@ on:
         required: false
         default: "https://staging-editor.raspberrypi.org,https://staging-editor-static.raspberrypi.org,https://test-editor.raspberrypi.org"
         type: string
-        
+
     secrets:
       AWS_ACCESS_KEY_ID:
         required: false
@@ -86,6 +90,7 @@ jobs:
       deploy_dir: ${{ steps.setup-environment.outputs.deploy_dir }}
       public_url: ${{ steps.setup-environment.outputs.public_url }}
       assets_url: ${{ steps.setup-environment.outputs.assets_url }}
+      html_renderer_url: ${{ steps.setup-environment.outputs.html_renderer_url }}
       react_app_base_url: ${{ steps.setup-environment.outputs.react_app_base_url }}
     steps:
       - id: setup-environment
@@ -94,9 +99,11 @@ jobs:
           deploy_dir=${{inputs.prefix}}/$safe_ref_name
           public_url=${{inputs.base_url}}/$deploy_dir
           assets_url=${{inputs.assets_url}}/$deploy_dir
+          html_renderer_url=${{inputs.html_renderer_url}}/$deploy_dir/html-renderer
           echo "deploy_dir=$deploy_dir" >> $GITHUB_OUTPUT
           echo "public_url=$public_url" >> $GITHUB_OUTPUT
           echo "assets_url=$assets_url" >> $GITHUB_OUTPUT
+          echo "html_renderer_url=$html_renderer_url" >> $GITHUB_OUTPUT
           if [ "${{inputs.react_app_base_url}}" = "unspecified" ] ; then
             echo "react_app_base_url=$deploy_dir" >> $GITHUB_OUTPUT
           else
@@ -139,6 +146,7 @@ jobs:
         env:
           PUBLIC_URL: ${{ needs.setup-environment.outputs.public_url }}
           ASSETS_URL: ${{ needs.setup-environment.outputs.assets_url }}
+          HTML_RENDERER_URL: ${{ needs.setup-environment.outputs.html_renderer_url }}
           REACT_APP_API_ENDPOINT: ${{ inputs.react_app_api_endpoint }}
           REACT_APP_AUTHENTICATION_CLIENT_ID: ${{ inputs.react_app_authentication_client_id }}
           REACT_APP_AUTHENTICATION_URL: ${{ inputs.react_app_authentication_url }}
@@ -151,11 +159,18 @@ jobs:
           REACT_APP_SENTRY_ENV: ${{ inputs.react_app_sentry_env }}
           REACT_APP_ALLOWED_IFRAME_ORIGINS: ${{ inputs.react_app_allowed_iframe_origins }}
 
+      - name: Build HTML renderer bundle
+        run: yarn build-html-renderer
+        env:
+          HTML_RENDERER_URL: ${{ needs.setup-environment.outputs.html_renderer_url }}
+          REACT_APP_ALLOWED_IFRAME_ORIGINS: ${{ inputs.react_app_allowed_iframe_origins }}
+
       - name: Deploy site to S3 bucket
         if: env.AWS_SECRET_ACCESS_KEY != ''
         run: |
           aws s3 sync ./build/ s3://${{ secrets.AWS_S3_BUCKET }}/${{ needs.setup-environment.outputs.deploy_dir }} --endpoint ${{ secrets.AWS_ENDPOINT }} --progress-frequency 5
           aws s3 sync ./build/chunks/ s3://${{ secrets.AWS_S3_BUCKET }}/chunks/ --endpoint ${{ secrets.AWS_ENDPOINT }} --exclude "*" --include "fetch-worker*" --progress-frequency 5
+          aws s3 sync ./build-html-renderer/ s3://${{ secrets.AWS_S3_BUCKET }}/${{ needs.setup-environment.outputs.deploy_dir }}/html-renderer/ --endpoint ${{ secrets.AWS_ENDPOINT }} --progress-frequency 5
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
@@ -170,10 +185,6 @@ jobs:
           fi
 
           echo -n "${{ needs.setup-environment.outputs.deploy_dir }}" | aws s3 cp - s3://${{ secrets.AWS_S3_BUCKET }}/latest_version --endpoint ${{ secrets.AWS_ENDPOINT }} --content-type "text/plain"
-        env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: ${{ secrets.AWS_REGION }}
 
       - name: Purge Cloudflare cache
         if: env.HAS_CLOUDFLARE_SECRETS == 'true'
@@ -182,7 +193,7 @@ jobs:
             curl -sS --fail-with-body -X POST "https://api.cloudflare.com/client/v4/zones/${CLOUDFLARE_ZONE_ID}/purge_cache" \
               -H "Authorization: Bearer ${CLOUDFLARE_API_TOKEN}" \
               -H "Content-Type: application/json" \
-              --data '{"files":["${{ needs.setup-environment.outputs.public_url }}/web-component.html", "${{ needs.setup-environment.outputs.public_url }}/web-component.js", "${{ needs.setup-environment.outputs.public_url }}/scratch.html", "${{ needs.setup-environment.outputs.public_url }}/scratch.js", "${{ inputs.base_url }}/latest_version"]}'
+              --data '{"files":["${{ needs.setup-environment.outputs.public_url }}/web-component.html", "${{ needs.setup-environment.outputs.public_url }}/web-component.js", "${{ needs.setup-environment.outputs.public_url }}/scratch.html", "${{ needs.setup-environment.outputs.public_url }}/scratch.js", "${{ inputs.base_url }}/latest_version", "${{ needs.setup-environment.outputs.html_renderer_url}}/index.html", "${{ needs.setup-environment.outputs.html_renderer_url}}/html-renderer.js"]}'
           )" || {
             echo "Cloudflare purge request failed:"
             echo "$response"

.gitignore

@@ -17,6 +17,7 @@ node_modules
 
 # production
 /build
+/build-html-renderer
 /public/storybook
 
 # misc
@@ -33,3 +34,4 @@ yarn-error.log*
 .yarn/install-state.gz
 
 .vscode/settings.json
+.idea/*

cypress/e2e/spec-wc.cy.js

@@ -1,5 +1,4 @@
 import {
-  expectHtmlRunnerPreviewToContainText,
   getCodeEditorInput,
   getEditorShadow,
   getRunButton,
@@ -148,28 +147,4 @@ describe("when embedded, output_only & output_split_view are true", () => {
     getSkulptTabByName("Visual output").should("be.visible");
     getSkulptTabByName("Visual output").should("have.length", 1);
   });
-
-  it("displays the embedded view for an HTML project", () => {
-    cy.visit(urlFor("anime-expressions-solution"));
-
-    // Check HTML preview output panel is visible and has a run button
-    // Important to wait for this before making the negative assertions that follow
-    getEditorShadow().contains("index.html preview").should("be.visible");
-    getRunButton().should("not.be.disabled");
-    getRunButton().should("be.visible");
-
-    // Check that the code has automatically run i.e. the HTML has been rendered
-    expectHtmlRunnerPreviewToContainText("Draw anime with me");
-
-    // Check that the side bar is not displayed
-    getEditorShadow().should("not.contain.text", "Project files");
-    // Check that the project bar is not displayed
-    getEditorShadow().should("not.contain.text", "Anime expressions solution");
-    // Check that the editor input containing the code is not displayed
-    getEditorShadow().should("not.contain.text", "<h1>Draw anime with me</h1>");
-
-    // Run the code and check it executed without error
-    runProject();
-    cy.get("#results").should("contain", '"errorDetails":{}');
-  });
 });

package.json

@@ -87,7 +87,9 @@
   },
   "scripts": {
     "start": "NODE_ENV=development BABEL_ENV=development webpack serve -c ./webpack.config.js",
+    "start-html-renderer": "NODE_ENV=development BABEL_ENV=development webpack serve -c ./webpack.html-renderer.config.js",
     "build": "NODE_ENV=production BABEL_ENV=production webpack build -c ./webpack.config.js",
+    "build-html-renderer": "NODE_ENV=production BABEL_ENV=production webpack build -c ./webpack.html-renderer.config.js",
     "analyze": "ANALYZE_WEBPACK_BUNDLE=true yarn build",
     "lint": "eslint 'src/**/*.{js,jsx}' cypress/**/*.js",
     "lint:fix": "eslint --fix 'src/**/*.{js,jsx}' cypress/**/*.js",

public/index-html-renderer.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width" />
+  <link rel="icon" href="data:," />
+  <title>Editor HTML preview</title>
+  <style>
+    html,
+    body,
+    #root {
+      block-size: 100%;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>

src/assets/stylesheets/HtmlRunner.scss

@@ -25,3 +25,18 @@ a.htmlrunner-link {
   block-size: 100%;
   inline-size: 100%;
 }
+
+.htmlrenderer-root {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  block-size: 100%;
+  inline-size: 100%;
+
+  .htmlrunner-iframe {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    block-size: auto;
+  }
+}