Web component run method

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `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

@@ -11,13 +11,16 @@ const Output = ({ embedded = false, browserPreview = false }) => {
   const searchParams = new URLSearchParams(window.location.search);
   const isBrowserPreview =
     searchParams.get("browserPreview") === "true" || browserPreview;
+  const webComponent = useSelector((state) => state.editor.webComponent);
 
   return (
     <>
       <ExternalFiles />
       <div className="proj-runner-container">
         <RunnerFactory projectType={project.project_type} />
-        {isEmbedded && !isBrowserPreview && <RunBar embedded />}
+        {!webComponent && isEmbedded && !isBrowserPreview && (
+          <RunBar embedded />
+        )}
       </div>
     </>
   );

src/components/WebComponentProject/WebComponentProject.jsx

@@ -36,10 +36,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));
 
   console.log(`outputOnly: ${outputOnly}`);
 

src/containers/WebComponentLoader.jsx

@@ -4,9 +4,6 @@ import {
   disableTheming,
   setEmbedded,
   setSenseHatAlwaysEnabled,
-  stopCodeRun,
-  stopDraw,
-  triggerCodeRun,
 } from "../redux/EditorSlice";
 import WebComponentProject from "../components/WebComponentProject/WebComponentProject";
 import { useTranslation } from "react-i18next";
@@ -77,23 +74,6 @@ const WebComponentLoader = (props) => {
     ? "dark"
     : "light";
 
-  const [isRunCodeListenerAdded, setIsRunCodeListenerAdded] = useState(false);
-
-  const runCode = () => {
-    dispatch(stopCodeRun());
-    dispatch(stopDraw());
-    dispatch(triggerCodeRun());
-  };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (outputOnly && !isRunCodeListenerAdded) {
-      document.removeEventListener("outputOnly-runCode", runCode);
-      document.addEventListener("outputOnly-runCode", runCode);
-      setIsRunCodeListenerAdded(true);
-    }
-  });
-
   useEmbeddedMode(embedded);
 
   useEffect(() => {

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,
@@ -95,6 +96,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,