Add resource-initiators example

jackfranklin · jackfranklin · commit 6ba9f0f5b1f6 · 2025-10-10T14:48:12.000+01:00
This example injects resources in numerous ways to test our initiators
logic.
diff --git a/index.html b/index.html
@@ -33,6 +33,7 @@
 <li><a href="nested-interactions/index.html">nested-interactions</a></li>
 <li><a href="node-fib-app/index.html">node-fib-app</a></li>
 <li><a href="react-hello-world/index.html">react-hello-world</a></li>
+<li><a href="resource-initiators/index.html">resource-initiators</a></li>
 <li><a href="scheduler/index.html">scheduler</a></li>
 <li><a href="scheduler-posttask/index.html">scheduler-posttask</a></li>
 <li><a href="soft-navigations/index.html">soft-navigations</a></li>
diff --git a/resource-initiators/app.js b/resource-initiators/app.js
@@ -0,0 +1,32 @@
+// Dynamically injected script
+const dynamicScript = document.createElement('script');
+dynamicScript.src = 'scripts/dynamic.js';
+document.body.appendChild(dynamicScript);
+
+// Script loaded via XHR/Fetch and injected
+fetch('scripts/fetched.js')
+  .then((response) => response.text())
+  .then((scriptText) => {
+    const fetchedScript = document.createElement('script');
+    fetchedScript.textContent = scriptText;
+    document.body.appendChild(fetchedScript);
+  });
+
+// Dynamic import within a module
+import('./scripts/another-module.js').then((module) => {
+  console.log('dynamically imported module loaded', module);
+});
+
+// Script loaded via document.write
+document.write('<script src="scripts/document-write.js"></script>');
+
+// Dynamically injected stylesheet
+const dynamicStylesheet = document.createElement('link');
+dynamicStylesheet.rel = 'stylesheet';
+dynamicStylesheet.href = 'stylesheets/dynamic.css';
+document.head.appendChild(dynamicStylesheet);
+
+// Image created in JS
+const jsImage = new Image();
+jsImage.src = 'images/js-created.png';
+document.body.appendChild(jsImage);
diff --git a/resource-initiators/fonts/font-face.ttf b/resource-initiators/fonts/font-face.ttf
diff --git a/resource-initiators/fonts/preloaded.ttf b/resource-initiators/fonts/preloaded.ttf
diff --git a/resource-initiators/images/background.png b/resource-initiators/images/background.png
diff --git a/resource-initiators/images/js-created.png b/resource-initiators/images/js-created.png
diff --git a/resource-initiators/images/preloaded.png b/resource-initiators/images/preloaded.png
diff --git a/resource-initiators/images/standard.png b/resource-initiators/images/standard.png
diff --git a/resource-initiators/index.html b/resource-initiators/index.html
@@ -0,0 +1,34 @@
+<html>
+  <head>
+    <title>Resource initiators</title>
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="stylesheets/style.css">
+    <style>
+      body { color: green; }
+    </style>
+
+    <!-- Preloads -->
+    <link rel="preload" href="images/preloaded.png" as="image">
+    <link rel="preload" href="fonts/preloaded.ttf" as="font" type="font/ttf" crossorigin>
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
+    <!-- Scripts -->
+    <script src="scripts/standard.js"></script>
+    <script src="scripts/async.js" async></script>
+    <script src="scripts/defer.js" defer></script>
+    <script>console.log('inline script executed');</script>
+    <script type="module" src="scripts/module.js"></script>
+    <script type="module" src="scripts/module-async.js" async></script>
+
+  </head>
+  <body>
+    <h1>Resource Initiator Examples</h1>
+
+    <!-- Images -->
+    <img src="images/standard.png">
+    <div class="bg-image"></div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/resource-initiators/scripts/another-module.js b/resource-initiators/scripts/another-module.js
@@ -0,0 +1 @@
+export const foo = 'bar';
diff --git a/resource-initiators/scripts/async.js b/resource-initiators/scripts/async.js
@@ -0,0 +1 @@
+console.log('async script loaded');
diff --git a/resource-initiators/scripts/defer.js b/resource-initiators/scripts/defer.js
@@ -0,0 +1 @@
+console.log('defer script loaded');
diff --git a/resource-initiators/scripts/document-write.js b/resource-initiators/scripts/document-write.js
@@ -0,0 +1 @@
+console.log('document.write script loaded');
diff --git a/resource-initiators/scripts/dynamic.js b/resource-initiators/scripts/dynamic.js
@@ -0,0 +1 @@
+console.log('dynamically injected script loaded');
diff --git a/resource-initiators/scripts/fetched.js b/resource-initiators/scripts/fetched.js
@@ -0,0 +1 @@
+console.log('fetched and injected script loaded');
diff --git a/resource-initiators/scripts/module-async.js b/resource-initiators/scripts/module-async.js
@@ -0,0 +1,2 @@
+import { foo } from './another-module.js';
+console.log('async module script loaded', foo);
diff --git a/resource-initiators/scripts/module.js b/resource-initiators/scripts/module.js
@@ -0,0 +1,2 @@
+import { foo } from './another-module.js';
+console.log('module script loaded', foo);
diff --git a/resource-initiators/scripts/standard.js b/resource-initiators/scripts/standard.js
@@ -0,0 +1 @@
+console.log('standard script loaded');
diff --git a/resource-initiators/stylesheets/dynamic.css b/resource-initiators/stylesheets/dynamic.css
@@ -0,0 +1,3 @@
+h1 {
+  color: blue;
+}
diff --git a/resource-initiators/stylesheets/import.css b/resource-initiators/stylesheets/import.css
@@ -0,0 +1,3 @@
+h1 {
+  color: blue;
+}
diff --git a/resource-initiators/stylesheets/style.css b/resource-initiators/stylesheets/style.css
@@ -0,0 +1,17 @@
+@import url('import.css');
+
+@font-face {
+  font-family: 'MyFont';
+  src: url('../fonts/font-face.ttf') format('truetype');
+}
+
+body {
+  font-family: 'MyFont', sans-serif;
+}
+
+.bg-image {
+  background-image: url('../images/background.png');
+  width: 200px;
+  height: 200px;
+  border: 1px solid black;
+}
