run snip in shared with reset

wandyezj · Sep 19, 2024 · 8f711d7 · 8f711d7
1 parent 15fa9fe
commit 8f711d7
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 5 deletions.
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -66,7 +66,7 @@ module.exports = async (env, options) => {
             settings: "./src/settings.tsx",
             blocks: "./src/blocks.tsx",
             test: "./src/test.ts",
-            shared: "./src/shared.ts",
+            shared: "./src/shared.tsx",
         },
         output: {
             // Add contenthash to cache bust on CDN

diff --git a/src/run.ts b/src/run.ts
@@ -69,6 +69,7 @@ function loadJs(js: string) {
 
 async function runSnip() {
     const goBack = window.location.hash === "#back";
+    const goBackSharedReset = window.location.hash === "#reset";
 
     const snip = await getCurrentSnip();
     console.log("snip", snip);
@@ -80,6 +81,7 @@ async function runSnip() {
     const libraries = snip.files["libraries"].content;
     const css = snip.files["css"].content;
     let html = snip.files["html"].content;
+
     // Add back button to top of html
     if (goBack) {
         // window.location.href='./edit.html';
@@ -88,6 +90,11 @@ async function runSnip() {
         html = `${backButtonHtml} ${refreshButtonHtml}<br/><br/>${html}`;
     }
 
+    if (goBackSharedReset) {
+        const backButtonHtml = `<button onclick="window.location.href='./shared.html#reset'">Reset</button>`;
+        html = `${backButtonHtml}<br/><br/>${html}`;
+    }
+
     // compile TypeScript
     const ts = snip.files["typescript"].content;
     const { js, issues } = compileCode(ts);

diff --git a/src/shared.html b/src/shared.html
@@ -10,7 +10,10 @@
     </head>
     <body>
         <div>
-            <h1>Shared</h1>
+            <div id="container">
+                <h1>Startup</h1>
+                <p>Loading...</p>
+            </div>
         </div>
     </body>
 </html>
diff --git a/src/shared.ts → src/shared.tsx b/src/shared.ts → src/shared.tsx
@@ -1,13 +1,16 @@
 // Shared runtime, will be used for snips that should run in the background.
 
 import { setupOffice } from "./core/setupOffice";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./shared/App";
+import { run } from "./shared/run";
 
 // Some rules for snips to run in the background
 // must
 //  - only allow one to run in the background
 //  - be embedded in the document
 //  - only have default library references
-
 // Want a button to go back from currently loaded
 // Want a button to load a new one.
 
@@ -17,8 +20,14 @@ async function setup() {
     // After the first time the add in is opened it will automatically load
     Office.addin.setStartupBehavior(Office.StartupBehavior.load);
 
-    // redirect to edit and allow back
-    window.location.href = "./run.html#back";
+    if (window.location.hash === "#reset") {
+        const container = document.getElementById("container")!;
+        const root = createRoot(container);
+        root.render(<App />);
+    } else {
+        run();
+    }
+
     // back will act as reload in this case.
 }
 

diff --git a/src/shared/App.tsx b/src/shared/App.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Button, FluentProvider, webLightTheme } from "@fluentui/react-components";
+import { run } from "./run";
+
+/**
+ * The top level application component.
+ */
+export function App() {
+    return (
+        <FluentProvider theme={webLightTheme}>
+            <Button onClick={run}>Start</Button>
+        </FluentProvider>
+    );
+}
diff --git a/src/shared/run.ts b/src/shared/run.ts
@@ -0,0 +1,7 @@
+/**
+ * Redirect to edit view, with reset that will be caught on this return.
+ */
+export function run() {
+    // redirect to edit and allow back
+    window.location.href = "./run.html#reset";
+}