feat: Restructure and expand export_template files (#144)

* feat: Restructure `export_template` to use a single `index.html` template file * Adds `{{title}}` as a template parameter. * Consolidate app-launching code in `runExportedApp()`. * Pick up app mode from the `mode` query parameter. * `edit/index.html` now redirects to `index.html?mode="editor-terminal-viewer"`. * fix: Includes can include raw HTML * chore: Include `<title>` only if in the template data * feat: use object destructuring in the function signature * chore: Use `console.warn` * chore: Don't need to load jquery terminal
posit-dev · Jul 1, 2024 · 5f29f1a · 5f29f1a
1 parent 9792e0c
commit 5f29f1a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 41 deletions.
diff --git a/export_template/edit/index.html b/export_template/edit/index.html
@@ -1,34 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Shiny examples browser</title>
-    <script
-      src="../{{REL_PATH}}shinylive/load-shinylive-sw.js"
-      type="module"
-    ></script>
-    <script src="../{{REL_PATH}}shinylive/jquery.min.js"></script>
-    <script src="../{{REL_PATH}}shinylive/jquery.terminal/js/jquery.terminal.min.js"></script>
-    <link
-      href="../{{REL_PATH}}shinylive/jquery.terminal/css/jquery.terminal.min.css"
-      rel="stylesheet"
+    <title>Redirect to editable app</title>
+    <meta
+      http-equiv="refresh"
+      content="0;URL='../index.html?mode=editor-terminal-viewer'"
     />
-    <script type="module">
-      import { runApp } from "../{{REL_PATH}}shinylive/shinylive.js";
-      const response = await fetch("../app.json");
-      if (!response.ok) {
-        throw new Error("HTTP error loading app.json: " + response.status);
-      }
-      const appFiles = await response.json();
-
-      const appRoot = document.getElementById("root");
-      runApp(appRoot, "editor-terminal-viewer", {startFiles: appFiles}, "{{APP_ENGINE}}");
-    </script>
-    <link rel="stylesheet" href="../{{REL_PATH}}shinylive/style-resets.css" />
-    <link rel="stylesheet" href="../{{REL_PATH}}shinylive/shinylive.css" />
   </head>
-  <body>
-    <div style="height: 100vh; width: 100vw" id="root"></div>
-  </body>
+  <body></body>
 </html>
diff --git a/export_template/index.html b/export_template/index.html
@@ -1,28 +1,30 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Shiny App</title>
+    {{#title}}
+    <title>{{.}}</title>
+    {{/title}}
     <script
       src="./{{REL_PATH}}shinylive/load-shinylive-sw.js"
       type="module"
     ></script>
     <script type="module">
-      import { runApp } from "./{{REL_PATH}}shinylive/shinylive.js";
-      const response = await fetch("./app.json");
-      if (!response.ok) {
-        throw new Error("HTTP error loading app.json: " + response.status);
-      }
-      const appFiles = await response.json();
-
-      const appRoot = document.getElementById("root");
-      runApp(appRoot, "viewer", {startFiles: appFiles}, "{{APP_ENGINE}}");
+      import { runExportedApp } from "./{{REL_PATH}}shinylive/shinylive.js";
+      runExportedApp({
+        id: "root",
+        appEngine: "{{APP_ENGINE}}",
+        relPath: "{{REL_PATH}}",
+      });
     </script>
     <link rel="stylesheet" href="./{{REL_PATH}}shinylive/style-resets.css" />
     <link rel="stylesheet" href="./{{REL_PATH}}shinylive/shinylive.css" />
+    {{{ include_in_head }}}
   </head>
   <body>
+    {{{ include_before_body }}}
     <div style="height: 100vh; width: 100vw" id="root"></div>
+    {{{ include_after_body }}}
   </body>
 </html>
diff --git a/src/Components/App.tsx b/src/Components/App.tsx
@@ -75,6 +75,15 @@ export type AppMode =
   | "editor-cell"
   | "viewer";
 
+const AppModes = [
+  "examples-editor-terminal-viewer",
+  "editor-terminal-viewer",
+  "editor-terminal",
+  "editor-viewer",
+  "editor-cell",
+  "viewer",
+];
+
 type AppOptions = {
   // An optional set of files to start with.
   startFiles?: FileContentJson[] | FileContent[];
@@ -557,6 +566,40 @@ export function App({
   }
 }
 
+// This function helps launch apps exported with the shinylive Python and R
+// packages and is used by `export_template/index.html`.
+export async function runExportedApp({
+  id,
+  appEngine,
+  relPath = "",
+}: {
+  id: string;
+  appEngine: AppEngine;
+  relPath: string;
+}) {
+  const response = await fetch("./app.json");
+  if (!response.ok) {
+    throw new Error("HTTP error loading app.json: " + response.status);
+  }
+  const appFiles = await response.json();
+
+  const appRoot = document.getElementById(id);
+  if (!appRoot) {
+    throw new Error(`Could not find app root element with id "${id}"`);
+  }
+
+  // Get `appMode` from the URL query string
+  const urlParams = new URLSearchParams(window.location.search);
+  let appMode = urlParams.get("mode") ?? "viewer";
+
+  if (!AppModes.includes(appMode)) {
+    console.warn(`[shinylive] Unrecognized app mode: ${appMode}`);
+    appMode = "viewer";
+  }
+
+  runApp(appRoot, appMode as AppMode, { startFiles: appFiles }, appEngine);
+}
+
 // The exported function that can be used for embedding into a web page.
 //
 // Note: When `allowCodeUrl`, `allowGistUrl`, and `allowExampleUrl` are enabled,