Merge pull request #26 from navikt/sync-async-warning

fix: 🐛 advarsel om man forsøker async-lasting av definiert app
navikt · Jan 22, 2021 · 450906e · 450906e
2 parents 5f80233 + f5d37b2
commit 450906e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/src/async/async-navspa.tsx b/src/async/async-navspa.tsx
@@ -1,7 +1,8 @@
 import React, {ReactNode} from "react";
 import loadjs from 'loadjs';
 import {createAssetManifestParser, joinPaths} from "./utils";
-import {importer as importerSync} from '../navspa'
+import {importer as importerSync, scope, scopeV2 } from '../navspa'
+import {asyncLoadingOfDefinedApp} from "../feilmelding";
 
 
 const ASSET_MANIFEST_NAME = 'asset-manifest.json';
@@ -29,16 +30,20 @@ function fetchAssetUrls(appBaseUrl: string, assetManifestParser: AssetManifestPa
         .then(manifest => assetManifestParser(manifest));
 }
 
-async function loadAssets(config: PreloadConfig): Promise<void> {
+const loadingStatus: { [key: string]: Promise<void> } = {};
+function loadAssets(config: PreloadConfig): Promise<void> {
     const loadJsBundleId = createLoadJsBundleId(config.appName);
-    const assetManifestParser = config.assetManifestParser || createAssetManifestParser(config.appBaseUrl);
-
-    if (!loadjs.isDefined(loadJsBundleId)) {
-        const assets: string[] = await fetchAssetUrls(config.appBaseUrl, assetManifestParser)
-        if (!loadjs.isDefined(loadJsBundleId)) {
-            await loadjs(assets, loadJsBundleId, {returnPromise: true})
+    if (!loadingStatus[loadJsBundleId]) {
+        if (process.env.NODE_ENV === 'development' && (scope[config.appName] || scopeV2[config.appName])) {
+            console.warn(asyncLoadingOfDefinedApp(config.appName))
         }
+
+        const assetManifestParser = config.assetManifestParser || createAssetManifestParser(config.appBaseUrl);
+        loadingStatus[loadJsBundleId] = fetchAssetUrls(config.appBaseUrl, assetManifestParser)
+                .then((assets) => loadjs(assets, loadJsBundleId, {returnPromise: true}))
     }
+
+    return loadingStatus[loadJsBundleId];
 }
 
 export function preload(config: PreloadConfig) {

diff --git a/src/feilmelding.ts b/src/feilmelding.ts
@@ -2,3 +2,8 @@ export const v2Unmount = (app: string) => `
 NAVSPA-appen '${app}' bruker en eldre versjon av NAVSPA for eksportering.
 Denne har ett kjent problem med unmounting av komponenten, og det er derfor anbefalt å oppdatere til nyeste versjon.
 `.trim();
+
+export const asyncLoadingOfDefinedApp = (app: string) => `
+NAVSPA-appen '${app}' ser ut til å være lastet inn via statiske script/link tags fra før av.
+Man kan derfor bruke synkron innlasting av denne appen, eller fjerne innlastingen fra index.html.
+`.trim()
diff --git a/src/navspa.tsx b/src/navspa.tsx
@@ -17,8 +17,8 @@ type NAVSPAApp = {
 	unmount(element: HTMLElement): void;
 }
 
-const scope: DeprecatedNAVSPAScope = (global as any)['NAVSPA'] = (global as any)['NAVSPA'] || {}; // tslint:disable-line
-const scopeV2: NAVSPAScope = (global as any)['NAVSPA-V2'] = (global as any)['NAVSPA-V2'] || {}; // tslint:disable-line
+export const scope: DeprecatedNAVSPAScope = (global as any)['NAVSPA'] = (global as any)['NAVSPA'] || {}; // tslint:disable-line
+export const scopeV2: NAVSPAScope = (global as any)['NAVSPA-V2'] = (global as any)['NAVSPA-V2'] || {}; // tslint:disable-line
 
 export function eksporter<PROPS>(name: string, component: React.ComponentType<PROPS>) {
 	scope[name] = (element: HTMLElement, props: PROPS) => {