Add runCode, stopCode & rerunCode to web component

Based on [1] & #899.

[1]: f9086a8

Author: loiswells97

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Add `project_name_editable` attribute to web component (#1009)
 - `assets_identifier` attribute for the web component (#901)
 - `code` attribute overriding content of `main.py`/`index.html` in the web component (#901)
+- Web component methods to run, stop and rerun the code from the host page (#899)
 
 ### Changed
 

src/components/Editor/Output/Output.jsx

@@ -12,6 +12,7 @@ const Output = ({ embedded = false, browserPreview = false }) => {
   const isBrowserPreview =
     searchParams.get("browserPreview") === "true" || browserPreview;
   const usePyodide = searchParams.get("pyodide") === "true";
+  const webComponent = useSelector((state) => state.editor.webComponent);
 
   return (
     <>
@@ -21,7 +22,9 @@ const Output = ({ embedded = false, browserPreview = false }) => {
           projectType={project.project_type}
           usePyodide={usePyodide}
         />
-        {isEmbedded && !isBrowserPreview && <RunBar embedded />}
+        {!webComponent && isEmbedded && !isBrowserPreview && (
+          <RunBar embedded />
+        )}
       </div>
     </>
   );

src/components/WebComponentProject/WebComponentProject.jsx

@@ -44,10 +44,8 @@ const WebComponentProject = ({
   const [codeHasRun, setCodeHasRun] = useState(codeHasBeenRun);
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    dispatch(setIsSplitView(false));
-    dispatch(setWebComponent(true));
-  }, [dispatch]);
+  dispatch(setIsSplitView(false));
+  dispatch(setWebComponent(true));
 
   useEffect(() => {
     setCodeHasRun(false);

src/web-component.html

@@ -53,7 +53,6 @@
           "info",
         ]),
       );
-      webComp.setAttribute("output_only", "true");
       webComp.setAttribute("identifier", "hello-world-solution");
 
       // Pre-set the code attribute with an empty string.

src/web-component.js

@@ -8,6 +8,7 @@ import store from "./redux/stores/WebComponentStore";
 import { Provider } from "react-redux";
 import "./utils/i18n";
 import camelCase from "camelcase";
+import { stopCodeRun, stopDraw, triggerCodeRun } from "./redux/EditorSlice";
 
 Sentry.init({
   dsn: process.env.REACT_APP_SENTRY_DSN,
@@ -101,6 +102,34 @@ class WebComponent extends HTMLElement {
     this.mountReactApp();
   }
 
+  stopCode() {
+    const state = store.getState();
+    if (state.editor.codeRunTriggered || state.editor.drawTriggered) {
+      store.dispatch(stopCodeRun());
+      store.dispatch(stopDraw());
+    }
+  }
+
+  runCode() {
+    store.dispatch(triggerCodeRun());
+  }
+
+  rerunCode() {
+    this.stopCode();
+
+    new Promise((resolve) => {
+      let checkInterval = setInterval(() => {
+        let state = store.getState();
+        if (!state.codeRunTriggered && !state.drawTriggered) {
+          clearInterval(checkInterval);
+          resolve();
+        }
+      }, 50);
+    }).then(() => {
+      this.runCode();
+    });
+  }
+
   reactProps() {
     return {
       ...this.componentAttributes,