Add option to control when URL hash is updated

posit-dev · May 7, 2024 · 3c1f83e · 3c1f83e
1 parent ae298ae
commit 3c1f83e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/site_template/editor/index.html b/site_template/editor/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -18,6 +18,13 @@
         allowCodeUrl: true,
         allowGistUrl: true,
         allowExampleUrl: true,
+        // This option causes shinylive to update the URL hash when the user
+        // clicks on the re-run button in the editor. It is false by default.
+        // It should be set to true only when the editor and viewer are used
+        // in a full-window configuration. If you are using the editor and
+        // viewer embedded in a larger page, it does not make sense to set
+        // this to true.
+        updateUrlHashOnRerun: true,
       };
 
       const appRoot = document.getElementById("root");

diff --git a/site_template/examples/index.html b/site_template/examples/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -15,11 +15,23 @@
       // reasons, if you enable any of these, then this site should be hosted on
       // a separate domain or subdomain from other content. Otherwise the
       // running of arbitrary code could be used, for example, to steal cookies.
-      runApp(appRoot, "examples-editor-terminal-viewer", {
-        allowCodeUrl: true,
-        allowGistUrl: true,
-        allowExampleUrl: true,
-      }, "{{APP_ENGINE}}");
+      runApp(
+        appRoot,
+        "examples-editor-terminal-viewer",
+        {
+          allowCodeUrl: true,
+          allowGistUrl: true,
+          allowExampleUrl: true,
+          // This option causes shinylive to update the URL hash when the user
+          // clicks on the re-run button in the editor. It is false by default.
+          // It should be set to true only when the editor and viewer are used
+          // in a full-window configuration. If you are using the editor and
+          // viewer embedded in a larger page, it does not make sense to set
+          // this to true.
+          updateUrlHashOnRerun: true,
+        },
+        "{{APP_ENGINE}}",
+      );
     </script>
     <link rel="stylesheet" href="../shinylive/style-resets.css" />
     <link rel="stylesheet" href="../shinylive/shinylive.css" />

diff --git a/src/Components/App.tsx b/src/Components/App.tsx
@@ -91,6 +91,10 @@ type AppOptions = {
 
   // In Viewer-only mode, should the header bar be shown?
   showHeaderBar?: boolean;
+
+  // When the app is re-run from the Editor, should the URL hash be updated with
+  // the encoded version of the app?
+  updateUrlHashOnRerun?: boolean;
 };
 
 export type ProxyHandle = PyodideProxyHandle | WebRProxyHandle;
@@ -353,6 +357,7 @@ export function App({
                   file.name === "app.R" ||
                   file.name === "server.R",
               )}
+              updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
               appEngine={appEngine}
             />
           </React.Suspense>
@@ -400,6 +405,7 @@ export function App({
                   file.name === "app.R" ||
                   file.name === "server.R",
               )}
+              updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
               appEngine={appEngine}
             />
           </React.Suspense>
@@ -433,6 +439,7 @@ export function App({
             terminalMethods={terminalMethods}
             utilityMethods={utilityMethods}
             runOnLoad={false}
+            updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
             appEngine={appEngine}
           />
         </React.Suspense>
@@ -458,6 +465,7 @@ export function App({
             lineNumbers={false}
             showHeaderBar={false}
             floatingButtons={true}
+            updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
             appEngine={appEngine}
           />
         </React.Suspense>
@@ -495,6 +503,7 @@ export function App({
             terminalMethods={terminalMethods}
             utilityMethods={utilityMethods}
             viewerMethods={viewerMethods}
+            updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
             appEngine={appEngine}
           />
         </React.Suspense>

diff --git a/src/Components/Editor.tsx b/src/Components/Editor.tsx
@@ -81,6 +81,7 @@ export default function Editor({
   lineNumbers = true,
   showHeaderBar = true,
   floatingButtons = false,
+  updateUrlHashOnRerun = false,
   appEngine,
 }: {
   currentFilesFromApp: FileContent[];
@@ -97,6 +98,7 @@ export default function Editor({
   lineNumbers?: boolean;
   showHeaderBar?: boolean;
   floatingButtons?: boolean;
+  updateUrlHashOnRerun?: boolean;
   appEngine: AppEngine;
 }) {
   // In the future, instead of directly instantiating the PyrightClient, it
@@ -188,8 +190,10 @@ export default function Editor({
     syncActiveFileState();
     const fileContents = editorFilesToFileContents(files);
 
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    updateBrowserUrlHash(fileContents);
+    if (updateUrlHashOnRerun) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      updateBrowserUrlHash(fileContents);
+    }
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     (async () => {