Add runCode, stopCode & rerunCode to web component

Based on [1] & #899.

[1]: f9086a8

Author: loiswells97

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Add `assets_identifier` attribute to web component (#1014 & originally #901)
 - Enhance `code` attribute on web component to override project main component content (#1014 & originally #901)
 - Add `embedded` attribute to web component (#1014 & originally #901)
+- Add `runCode`, `stopCode` & `rerunCode` methods to web component (#1014 & originally #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.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,
@@ -102,6 +103,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,