refactor: make runtimeAssetMap available under window._OWID_RUNTIME_ASSET_MAP

Author: marcelgerber

site/DataPageV2.tsx

@@ -175,7 +175,6 @@ export const DataPageV2 = (props: {
                                 faqEntries={faqEntries}
                                 canonicalUrl={canonicalUrl}
                                 tagToSlugMap={tagToSlugMap}
-                                runtimeAssetMap={runtimeAssetMap}
                             />
                         </DebugProvider>
                     </div>

site/DataPageV2Content.tsx

@@ -11,7 +11,6 @@ import {
     GrapherInterface,
     joinTitleFragments,
     ImageMetadata,
-    AssetMap,
 } from "@ourworldindata/utils"
 import { DocumentContext } from "./gdocs/DocumentContext.js"
 import { AttachmentsContext } from "./gdocs/AttachmentsContext.js"
@@ -38,11 +37,9 @@ export const DataPageV2Content = ({
     canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
     tagToSlugMap,
     imageMetadata,
-    runtimeAssetMap,
 }: DataPageV2ContentFields & {
     grapherConfig: GrapherInterface
     imageMetadata: Record<string, ImageMetadata>
-    runtimeAssetMap?: AssetMap
 }) => {
     const [grapher, setGrapher] = useState<Grapher | undefined>(undefined)
 
@@ -57,9 +54,8 @@ export const DataPageV2Content = ({
             ...grapherConfig,
             isEmbeddedInADataPage: true,
             bindUrlToWindow: true,
-            runtimeAssetMap,
         }),
-        [grapherConfig, runtimeAssetMap]
+        [grapherConfig]
     )
 
     useEffect(() => {

site/GrapherFigureView.tsx

@@ -7,6 +7,11 @@ import {
     DATA_API_URL,
 } from "../settings/clientSettings.js"
 import { useElementBounds } from "./hooks.js"
+import { AssetMap } from "@ourworldindata/types"
+
+declare const window: Window & {
+    _OWID_RUNTIME_ASSET_MAP?: AssetMap
+}
 
 // Wrapper for Grapher that uses css on figure element to determine the bounds
 export const GrapherFigureView = ({
@@ -19,14 +24,18 @@ export const GrapherFigureView = ({
     const base = useRef<HTMLDivElement>(null)
     const bounds = useElementBounds(base)
 
+    const runtimeAssetMap =
+        (typeof window !== "undefined" && window._OWID_RUNTIME_ASSET_MAP) ||
+        undefined
+
     const grapherProps: GrapherProgrammaticInterface = {
         ...grapher.toObject(),
         isEmbeddedInADataPage: grapher.isEmbeddedInADataPage,
         bindUrlToWindow: grapher.props.bindUrlToWindow,
         queryStr: grapher.props.bindUrlToWindow
             ? window.location.search
             : undefined,
-        runtimeAssetMap: grapher.props.runtimeAssetMap,
+        runtimeAssetMap,
         bounds,
         dataApiUrl: DATA_API_URL,
         enableKeyboardShortcuts: true,

site/SiteFooter.tsx

@@ -286,12 +286,15 @@ export const SiteFooter = (props: SiteFooterProps) => (
             <script
                 type="module"
                 dangerouslySetInnerHTML={{
-                    __html: `window.runSiteFooterScripts(${JSON.stringify({
+                    __html: `
+                    window._OWID_RUNTIME_ASSET_MAP = ${JSON.stringify(
+                        props.runtimeAssetMap
+                    )};
+                    window.runSiteFooterScripts(${JSON.stringify({
                         context: props.context,
                         debug: props.debug,
                         isPreviewing: props.isPreviewing,
                         hideDonationFlag: props.hideDonationFlag,
-                        runtimeAssetMap: props.runtimeAssetMap,
                     })})`, // todo: gotta be a better way.
                 }}
             />

site/detailsOnDemand.tsx

@@ -18,16 +18,17 @@ type Tippyfied<E> = E & {
 declare global {
     interface Window {
         details?: DetailDictionary
+        _OWID_RUNTIME_ASSET_MAP?: AssetMap
     }
 }
 
 const siteAnalytics = new SiteAnalytics()
 
-export async function runDetailsOnDemand({
-    runtimeAssetMap,
-}: {
-    runtimeAssetMap?: AssetMap
-} = {}) {
+export async function runDetailsOnDemand() {
+    const runtimeAssetMap =
+        (typeof window !== "undefined" && window._OWID_RUNTIME_ASSET_MAP) ||
+        undefined
+
     const dodFetchUrl = readFromAssetMap(runtimeAssetMap, {
         path: "dods.json",
         fallback: `${BAKED_BASE_URL}/dods.json`,

site/runSiteFooterScripts.tsx

@@ -79,8 +79,7 @@ function hydrateDataInsightsIndexPage() {
 
 function hydrateDataPageV2Content({
     isPreviewing,
-    runtimeAssetMap,
-}: { isPreviewing?: boolean; runtimeAssetMap?: AssetMap } = {}) {
+}: { isPreviewing?: boolean } = {}) {
     const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
     const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS
     const grapherConfig = window._OWID_GRAPHER_CONFIG
@@ -91,7 +90,6 @@ function hydrateDataPageV2Content({
                 {...props}
                 grapherConfig={grapherConfig}
                 isPreviewing={isPreviewing}
-                runtimeAssetMap={runtimeAssetMap}
             />
         </DebugProvider>,
         wrapper
@@ -272,25 +270,23 @@ export const runSiteFooterScripts = (
               context?: SiteFooterContext
               container?: HTMLElement
               hideDonationFlag?: boolean
-              runtimeAssetMap?: AssetMap
           }
         | undefined
 ) => {
     // We used to destructure this in the function signature, but that caused
     // a weird issue reported by bugsnag: https://app.bugsnag.com/our-world-in-data/our-world-in-data-website/errors/63ca39b631e8660009464eb4?event_id=63d384c500acc25fc0810000&i=sk&m=ef
     // So now we define the object as potentially undefined and then destructure it here.
-    const { debug, context, isPreviewing, hideDonationFlag, runtimeAssetMap } =
-        args || {}
+    const { debug, context, isPreviewing, hideDonationFlag } = args || {}
 
     switch (context) {
         case SiteFooterContext.dataPageV2:
-            hydrateDataPageV2Content({ isPreviewing, runtimeAssetMap })
+            hydrateDataPageV2Content({ isPreviewing })
             runAllGraphersLoadedListener()
             runLightbox()
             runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
             runSiteTools()
             runCookiePreferencesManager()
-            void runDetailsOnDemand({ runtimeAssetMap })
+            void runDetailsOnDemand()
             break
         case SiteFooterContext.multiDimDataPage:
             hydrateMultiDimDataPageContent(isPreviewing)
@@ -299,15 +295,15 @@ export const runSiteFooterScripts = (
             runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
             runSiteTools()
             runCookiePreferencesManager()
-            void runDetailsOnDemand({ runtimeAssetMap })
+            void runDetailsOnDemand()
             break
         case SiteFooterContext.grapherPage:
         case SiteFooterContext.explorerPage:
             runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
             runAllGraphersLoadedListener()
             runSiteTools()
             runCookiePreferencesManager()
-            void runDetailsOnDemand({ runtimeAssetMap })
+            void runDetailsOnDemand()
             break
         case SiteFooterContext.explorerIndexPage:
             hydrateExplorerIndex()
@@ -320,7 +316,7 @@ export const runSiteFooterScripts = (
             runAllGraphersLoadedListener()
             runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
             runFootnotes()
-            void runDetailsOnDemand({ runtimeAssetMap })
+            void runDetailsOnDemand()
             runLightbox()
             runSiteTools()
             runCookiePreferencesManager()
@@ -356,7 +352,7 @@ export const runSiteFooterScripts = (
             runFootnotes()
             runSiteTools()
             runCookiePreferencesManager()
-            void runDetailsOnDemand({ runtimeAssetMap })
+            void runDetailsOnDemand()
             break
     }
 }