Insert <head> content after script tags

yarn build (GitHub Actions)
Load script tags the normal way instead of with jQuery's synchronouse XHR
2026-01-11 07:58:11 -05:00 · 2022-07-07 22:01:01 -05:00 · 2022-07-07 20:01:30 +00:00 · 2022-07-07 14:54:29 -05:00
6 changed files with 1158 additions and 366 deletions
--- a/inst/www/shared/shiny.js
+++ b/inst/www/shared/shiny.js
--- a/inst/www/shared/shiny.js.map
+++ b/inst/www/shared/shiny.js.map
--- a/inst/www/shared/shiny.min.js
+++ b/inst/www/shared/shiny.min.js
--- a/inst/www/shared/shiny.min.js.map
+++ b/inst/www/shared/shiny.min.js.map
--- a/srcts/src/shiny/render.ts
+++ b/srcts/src/shiny/render.ts
@@ -209,6 +209,9 @@ function renderDependency(dep_: HtmlDep) {
    $head.append(stylesheetLinks);
  }

+  const scriptPromises: Array<Promise<any>> = [];
+  const scriptElements: HTMLScriptElement[] = [];
+
  dep.script.forEach((x) => {
    const script = document.createElement("script");

@@ -220,9 +223,23 @@ function renderDependency(dep_: HtmlDep) {
      script.setAttribute(attr, val ? val : "");
    });

-    $head.append(script);
+    const p = new Promise((resolve) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      script.onload = (e: Event) => {
+        resolve(null);
+      };
+    });
+
+    scriptPromises.push(p);
+    scriptElements.push(script);
  });

+  // Append the script elements all at once, so that we're sure they'll load in
+  // order. (We didn't append them individually in the `forEach()` above,
+  // because we're not sure that the browser will load them in order if done
+  // that way.)
+  document.head.append(...scriptElements);
+
  dep.attachment.forEach((x) => {
    const link = $("<link rel='attachment'>")
      .attr("id", dep.name + "-" + x.key + "-attachment")
@@ -231,12 +248,22 @@ function renderDependency(dep_: HtmlDep) {
    $head.append(link);
  });

-  if (dep.head) {
-    const $newHead = $("<head></head>");
+  Promise.allSettled(scriptPromises).then(() => {
+    // After the scripts are all loaded, insert any head content. This may
+    // contain <script> tags with inline content, which we want to execute after
+    // the script elements above, because the code here may depend on them.
+    if (dep.head) {
+      const $newHead = $("<head></head>");
+
+      $newHead.html(dep.head);
+      $head.append($newHead.children());
+    }
+
+    // Bind all
+    shinyInitializeInputs(document.body);
+    shinyBindAll(document.body);
+  });

-    $newHead.html(dep.head);
-    $head.append($newHead.children());
-  }
  return true;
 }

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,12 +1,13 @@
 {
  "declaration": true,
  "compilerOptions": {
-    "target": "ES5",
+    "target": "es2020",
    "isolatedModules": true,
    "esModuleInterop": true,
    "declaration": true,
    "declarationDir": "./srcts/types",
    "emitDeclarationOnly": true,
+    "moduleResolution": "node",
    // Can not use `types: []` to disable injecting NodeJS types. More types are
    // needed than just the DOM's `window.setTimeout`
    // "types": [],
Author	SHA1	Message	Date
Winston Chang	2e934797c9	Insert <head> content after script tags	2022-07-07 22:01:01 -05:00
wch	581ace76e4	`yarn build` (GitHub Actions)	2022-07-07 20:01:30 +00:00
Winston Chang	e43609b60a	Load script tags the normal way instead of with jQuery's synchronouse XHR	2022-07-07 14:54:29 -05:00