From 46af00a22ad2cbc9629f3197a21189bd5524d686 Mon Sep 17 00:00:00 2001
From: Ed Gargan <edward.gargan@ft.com>
Date: Thu, 18 Jul 2024 16:32:26 +0100
Subject: [PATCH] feat: load stocks widget component from staging, add to RHR

This commit hackily reproduces the behaviour of the Extensible Frontends 'runtime'
module, which pulls components from a registry and loads them onto the page.

The stocks widget component is pulled from the stocks widget's staging component server,
which at the time of writing hosts a hacked version of the widget that knows how
to use the new 'cmd' attribute on the RHR element.

You'll need to install a plugin to have the browser ignore the stocks
widget server's CORS rules, I use the "Allow CORS" extension: just
download it and activate it when you're in the demo app and it should
all work fine!
---
 src/client/index.ts   |  4 ++--
 src/pages/index.astro | 25 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/client/index.ts b/src/client/index.ts
index 59fb921..9ab6a0c 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -87,7 +87,7 @@ onDomReady.then(() => {
   articleRhrEl.cmd ??= [];
 
   // We can enqueue RHR commands before the RHR has been initialised
-  insertProWidget(articleRhrEl, "middle");
+  // insertProWidget(articleRhrEl, "middle");
 
   initRhrInstances();
 
@@ -97,5 +97,5 @@ onDomReady.then(() => {
   );
 
   // Commands can be run post-initialisation too
-  setTimeout(() => insertProWidget(articleRhrEl, "bottom"), 5000);
+  // setTimeout(() => insertProWidget(articleRhrEl, "bottom"), 5000);
 });
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8506b9e..78c5975 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -49,3 +49,28 @@ import ShareNav from "../server/components/share-nav.astro";
     </section>
   </div>
 </Layout>
+
+<script>
+// This code is basically a very brief version of the Extensible Frontends 'runtime' module.
+// It fetches the JS and CSS for the pro-stocks-widget component and loads them onto the page, using
+// the 'init' and 'mount' functions exposed by the component.
+//
+// See https://github.com/egargan-ft/ef-runtime/blob/main/packages/ef-runtime-client/src/EFRuntime/EFRuntime.ts
+  const stocksWidgetJsUrl = "https://pro-stocks-widget-staging.ft.com/js";
+  const stocksWidgetCssUrl = "https://pro-stocks-widget-staging.ft.com/css";
+
+  const componentScript = document.createElement("script");
+  componentScript.type = "module";
+  componentScript.innerHTML = `
+import * as component from "${stocksWidgetJsUrl}";
+if (component.init) component.init();
+if (component.mount) component.mount();
+`;
+
+  document.body.append(componentScript);
+
+  const componentCss = document.createElement("link");
+  componentCss.rel = "stylesheet";
+  componentCss.href = stocksWidgetCssUrl;
+  document.head.append(componentCss);
+</script>