Devkit HMR adjustments (#2537)

* chore(): adjust importmaps, delete sources on unmount * chore(): adjust csp, guard against missing bare specifier in systemjs * chore(): adjust csp --------- Co-authored-by: Marius Darila <3396463+kenshyx@users.noreply.github.com>
AKASHAorg · Feb 11, 2025 · 09f4ad0 · 09f4ad0
1 parent 1bd1bdd
commit 09f4ad0
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 263 deletions.
diff --git a/libs/app-loader/src/index.ts b/libs/app-loader/src/index.ts
@@ -83,6 +83,7 @@ export default class AppLoader {
   erroredApps: string[];
   isLoadingUserExtensions: boolean;
   navigationCanceledExtensions: Set<string>;
+
   constructor(worldConfig: WorldConfig) {
     this.worldConfig = worldConfig;
     this.uiEvents = new Subject<UIEventData>();
@@ -329,7 +330,12 @@ export default class AppLoader {
       try {
         const source = this.getUriFromSource(extensionData.source);
         if (source) {
-          return System.import<SystemModuleType>(`${source}`);
+          System.addImportMap({
+            imports: {
+              [extensionData.name]: source,
+            },
+          });
+          return System.import<SystemModuleType>(extensionData.name);
         }
       } catch (err) {
         this.logger.error(
@@ -356,6 +362,11 @@ export default class AppLoader {
       try {
         const source = this.getUriFromSource(latestRelease.node.source);
         if (source) {
+          System.addImportMap({
+            imports: {
+              [extensionData.name]: source,
+            },
+          });
           return System.import<SystemModuleType>(`${source}`);
         }
       } catch (err) {
@@ -733,15 +744,19 @@ export default class AppLoader {
     extensionInfo: AkashaApp,
     extensionModule: SystemModuleType,
     extensionConfig: IAppConfig & { name: string },
+    isDevMode = false,
   ) => {
     this.extensionModules.set(extensionInfo.name, extensionModule);
     this.extensionConfigs.set(extensionInfo.name, extensionConfig);
     this.extensionData.push(extensionInfo);
     this.registerAdditionalEntities(extensionConfig, extensionInfo.applicationType);
-    this.singleSpaRegister(new Map().set(extensionInfo.name, extensionConfig));
+    this.singleSpaRegister(new Map().set(extensionInfo.name, extensionConfig), isDevMode);
   };
 
-  singleSpaRegister = (extensionConfigs: Map<string, IAppConfig & { name: string }>) => {
+  singleSpaRegister = (
+    extensionConfigs: Map<string, IAppConfig & { name: string }>,
+    isDevMode = false,
+  ) => {
     for (const [name, conf] of extensionConfigs) {
       const logger = this.parentLogger.create(name);
       if (singleSpa.getAppNames().includes(name)) continue;
@@ -787,6 +802,7 @@ export default class AppLoader {
         name,
         app: () =>
           createLoadingFunction(conf.rootComponent, conf.UILib, {
+            deleteSourcesOnUnmount: isDevMode,
             logger,
             onRenderError: () => {
               showError({

diff --git a/libs/app-loader/src/loading-functions/index.ts b/libs/app-loader/src/loading-functions/index.ts
@@ -1,6 +1,11 @@
 import { IAppConfig, IRootComponentProps, SupportedUILibs } from '@akashaorg/typings/lib/ui';
 
 export type LoadingFunctionOptions = {
+  /**
+   *  when true, the sources will also be removed when the app unmounts
+   *  useful in hmr.
+   */
+  deleteSourcesOnUnmount?: boolean;
   logger: IRootComponentProps['logger'];
   /**
    * Called when the application failed to render due to an error

diff --git a/libs/app-loader/src/loading-functions/react.ts b/libs/app-loader/src/loading-functions/react.ts
@@ -6,7 +6,7 @@ import { LoadingFunctionOptions } from './index';
 
 export const getLifecycles = (
   rootComponent: IAppConfig['rootComponent'],
-  { onRenderError, onModuleError }: LoadingFunctionOptions,
+  { deleteSourcesOnUnmount, onRenderError, onModuleError }: LoadingFunctionOptions,
 ) => {
   const lifecycles = singleSpaReact({
     React,
@@ -41,7 +41,12 @@ export const getLifecycles = (
   return {
     bootstrap: lifecycles.bootstrap,
     mount: lifecycles.mount,
-    unmount: lifecycles.unmount,
+    unmount: (props: IRootComponentProps) => {
+      if (deleteSourcesOnUnmount && System.has(props.name)) {
+        System.delete(System.resolve(props.name));
+      }
+      return lifecycles.unmount(props);
+    },
     update: lifecycles.update,
   };
 };
diff --git a/libs/app-loader/src/plugins/test-mode-loader.ts b/libs/app-loader/src/plugins/test-mode-loader.ts
@@ -19,6 +19,7 @@ type ExtensionTestModeConfig = {
     info: AkashaAppEdgeNode,
     extensionModule: SystemModuleType,
     extensionConfig: IAppConfig & { name: string },
+    isDevMode?: boolean,
   ) => void;
 };
 
@@ -57,8 +58,10 @@ export class TestModeLoader implements ITestModeLoaderPlugin {
         if (evObj.event === AUTH_EVENTS.SIGN_IN) {
           const userData: { id?: string } = evObj.data;
           if ('id' in userData && userData.hasOwnProperty('id')) {
-            this.#user = userData;
-            this.loadStoredExtensions();
+            if (!this.#user.id || this.#user.id !== userData.id) {
+              this.#user = userData;
+              this.loadStoredExtensions();
+            }
           }
         }
         if (evObj.event === AUTH_EVENTS.SIGN_OUT) {
@@ -71,6 +74,7 @@ export class TestModeLoader implements ITestModeLoaderPlugin {
   getTestSessionKey = () => {
     return `EXTENSIONS_IN_TEST_MODE_${this.#user.id}`;
   };
+
   getStaticStatusCodes() {
     return staticInstallStatusCodes;
   }
@@ -83,9 +87,7 @@ export class TestModeLoader implements ITestModeLoaderPlugin {
       try {
         extensions = JSON.parse(storage);
         if (extensions.length) {
-          extensions.forEach(ext => {
-            this.load(ext);
-          });
+          extensions.forEach(ext => this.load(ext));
         }
       } catch (err) {
         this.#logger.error('Failed to load test mode extensions %s', err.message);
@@ -170,6 +172,7 @@ export class TestModeLoader implements ITestModeLoaderPlugin {
           },
           extensionModule,
           extensionConfig,
+          true,
         );
         this.#notifyCurrentStatus(this.getStaticStatusCodes().status.EXTENSION_TEST_LOAD_SUCCESS);
       } else {

diff --git a/libs/webpack.config.js b/libs/webpack.config.js
@@ -1,6 +1,5 @@
 /* eslint-disable */
 const webpack = require('webpack');
-// const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const commons = require('./app.pack.conf');
 const path = require('path');
 const Dotenv = require('dotenv-webpack');
@@ -52,11 +51,6 @@ const exp = {
     clean: true,
   },
   plugins: [
-    // new CleanWebpackPlugin({
-    //   verbose: true,
-    //   dry: false,
-    //   dangerouslyAllowCleanPatternsOutsideProject: process.env.NODE_ENV !== 'production',
-    // }),
     new WebpackManifestPlugin({
       generate: (seed, files, entries) => {
         const packageJson = require(path.join(process.cwd(), './package.json'));
@@ -99,12 +93,6 @@ const exp = {
     new WebpackAssetsManifest({
       integrity: true,
     }),
-    // new webpack.ProgressPlugin({
-    //   entries: false,
-    //   modules: true,
-    //   modulesCount: 10,
-    //   profile: true,
-    // }),
   ],
   devtool: isProduction ? undefined : 'eval-source-map',
   externals: commons.externals,

diff --git a/package.json b/package.json
@@ -141,7 +141,6 @@
     "@nx/webpack": "19.0.3",
     "@nx/workspace": "19.0.3",
     "@playwright/test": "1.45.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@popperjs/core": "2.11.8",
     "@storybook/addon-actions": "^8.1.11",
     "@storybook/addon-docs": "^8.1.11",
@@ -185,7 +184,7 @@
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
     "@types/react-test-renderer": "18.0.0",
-    "@types/systemjs": "6.13.5",
+    "@types/systemjs": "6.15.1",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "@welldone-software/why-did-you-render": "^7.0.1",
@@ -195,7 +194,6 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-i18next-extract": "0.9.0",
     "chai": "4.3.7",
-    "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "copyfiles": "2.4.1",
     "css-loader": "6.7.2",
@@ -251,7 +249,6 @@
     "react-is": "18.3.1",
     "react-markdown": "9.0.1",
     "react-popper": "2.3.0",
-    "react-refresh": "^0.10.0",
     "react-test-renderer": "18.2.0",
     "react-use": "17.5.0",
     "react-zoom-pan-pinch": "3.4.4",

diff --git a/worlds/akasha.world/public/index.dev.html b/worlds/akasha.world/public/index.dev.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8" />
   <meta
     http-equiv="Content-Security-Policy"
-    content="default-src 'self' 'unsafe-inline' 'unsafe-eval' cloudflare.com *.cloudflare.com *.ipfs.cf-ipfs.com *.cf-ipfs.com cloudflare-ipfs.com unpkg.com *.akasha.network *.akasha.world *.walletconnect.org *.infura.io *.ipfs.infura-ipfs.io *.ipfs.hub.textile.io http://localhost:* *.litgateway.com:* https://* wss://* wss://localhost:* data: ; img-src https: data: blob:"
+    content="default-src 'self' 'unsafe-inline' 'unsafe-eval' cloudflare.com *.cloudflare.com *.ipfs.cf-ipfs.com *.cf-ipfs.com cloudflare-ipfs.com unpkg.com *.akasha.network *.akasha.world *.walletconnect.org *.infura.io *.ipfs.infura-ipfs.io *.ipfs.hub.textile.io *.litgateway.com:* https://* https://localhost:* wss://localhost:* wss://* data: ; img-src https: data: blob:"
   />
   <meta
     name="viewport"
@@ -39,18 +39,15 @@
     integrity="sha256-BjMWRiizxkmQwQ1IObv4XcdPDQxRQi6KBORApabpcD4="
     crossorigin="anonymous"
   ></script>
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.10.2/system.min.js"
-    integrity="sha512-q8mW8h6inMCO7EwhzsalSSa2wxgUhZq7EYa37ZxIkqgrd/oOI5tO9+E42Hq+4zq3pSb6pkf+tJAXWckjxHdLZw=="
-    crossorigin="anonymous"
-    referrerpolicy="no-referrer"
-  ></script>
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.10.2/extras/named-exports.min.js"
-    integrity="sha512-R1m4kK4v2B7kiU+dGztkBxEfMnJkPaQA+WNjSkIWq7+DYEuA1t/UguVwHKjh8SAUJV9yg6uarhA/weCCdV1r2Q=="
-    crossorigin="anonymous"
-    referrerpolicy="no-referrer"
-  ></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.15.1/system.min.js"
+          integrity="sha512-uqwFgHHxg9qZmWJnFhtUQjSmyeWU3NByQQfx1U5DGjJ1iNfAbbgMxEDQuuxQgq2D133Cn3b5jD4cIBCPj4VKpA=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.15.1/extras/named-exports.min.js"
+          integrity="sha512-kJuYYMm2TgeHIkXYI/atujo5tvUxI4WRF5zJcKUYJShoUd3gauoq7gt03TvSH9i0A6dx9K7TzdaR2TUEYW8/mg=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.15.1/extras/dynamic-import-maps.min.js"
+          integrity="sha512-Xhy6NHUMyoo0b0otMX2Fklq9nI/Ey7eC+I8z8nXOhy4IixzJ24IIvTW5LfVfJkWMYqhDBK7FwZhf+JwhTdxdzQ=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="/scripts/theme.js"></script>
   <meta name="importmap-type" content="systemjs-importmap" />
 
@@ -88,7 +85,8 @@
       <h1 class="font-bold text-xl mt-2 text-xl">Oops! Extension not found</h1>
       <div class="items-start my-4 text-grey4 dark:text-grey6 text-sm">
         <p>
-          It appears that the extension <span id="app-name" class="font-bold"></span> does not exist on <span id="world-title"></span>.
+          It appears that the extension <span id="app-name" class="font-bold"></span> does not exist on <span
+          id="world-title"></span>.
           It may have been moved, deleted, or the URL might be incorrect.
         </p>
         <p class="mt-4">
@@ -156,15 +154,15 @@ <h1 class="font-bold text-xl mt-2">Uh-oh! You are not connected</h1>
   </div>
 </template>
 <script>
-  if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
       navigator.serviceWorker
-        .register('/sw.js', { scope: '/' })
+        .register("/sw.js", { scope: "/" })
         .then(registration => {
-          console.log('SW registered: ', registration);
+          console.log("SW registered: ", registration);
         })
         .catch(registrationError => {
-          console.log('SW registration failed: ', registrationError);
+          console.log("SW registration failed: ", registrationError);
         });
     });
   }

diff --git a/worlds/akasha.world/public/index.html b/worlds/akasha.world/public/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8" />
   <meta
     http-equiv="Content-Security-Policy"
-    content="default-src 'self' 'unsafe-inline' 'unsafe-eval' cloudflare.com *.cloudflare.com *.ipfs.cf-ipfs.com *.cf-ipfs.com cloudflare-ipfs.com unpkg.com *.akasha.network *.akasha.world *.walletconnect.org *.infura.io *.ipfs.infura-ipfs.io *.ipfs.hub.textile.io *.textile.io *.litgateway.com:* https://* wss://* data: ; img-src https: data: blob:"
+    content="default-src 'self' 'unsafe-inline' 'unsafe-eval' cloudflare.com *.cloudflare.com *.ipfs.cf-ipfs.com *.cf-ipfs.com cloudflare-ipfs.com unpkg.com *.akasha.network *.akasha.world *.walletconnect.org *.infura.io *.ipfs.infura-ipfs.io *.ipfs.hub.textile.io *.litgateway.com:* https://* https://localhost:* wss://localhost:* wss://* data: ; img-src https: data: blob:"
   />
   <meta
     name="viewport"
@@ -39,18 +39,15 @@
     crossorigin="anonymous"
   ></script>
 
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.10.2/system.min.js"
-    integrity="sha512-q8mW8h6inMCO7EwhzsalSSa2wxgUhZq7EYa37ZxIkqgrd/oOI5tO9+E42Hq+4zq3pSb6pkf+tJAXWckjxHdLZw=="
-    crossorigin="anonymous"
-    referrerpolicy="no-referrer"
-  ></script>
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.10.2/extras/named-exports.min.js"
-    integrity="sha512-R1m4kK4v2B7kiU+dGztkBxEfMnJkPaQA+WNjSkIWq7+DYEuA1t/UguVwHKjh8SAUJV9yg6uarhA/weCCdV1r2Q=="
-    crossorigin="anonymous"
-    referrerpolicy="no-referrer"
-  ></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.15.1/system.min.js"
+          integrity="sha512-uqwFgHHxg9qZmWJnFhtUQjSmyeWU3NByQQfx1U5DGjJ1iNfAbbgMxEDQuuxQgq2D133Cn3b5jD4cIBCPj4VKpA=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.15.1/extras/named-exports.min.js"
+          integrity="sha512-kJuYYMm2TgeHIkXYI/atujo5tvUxI4WRF5zJcKUYJShoUd3gauoq7gt03TvSH9i0A6dx9K7TzdaR2TUEYW8/mg=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.15.1/extras/dynamic-import-maps.min.js"
+          integrity="sha512-Xhy6NHUMyoo0b0otMX2Fklq9nI/Ey7eC+I8z8nXOhy4IixzJ24IIvTW5LfVfJkWMYqhDBK7FwZhf+JwhTdxdzQ=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="/scripts/theme.js"></script>
 
   <meta name="importmap-type" content="systemjs-importmap" />
@@ -89,7 +86,8 @@
       <h1 class="font-bold text-xl mt-2 text-xl">Oops! Extension not found</h1>
       <div class="items-start my-4 text-grey4 dark:text-grey6 text-sm">
         <p>
-          It appears that the extension <span id="app-name" class="font-bold"></span> does not exist on <span id="world-title"></span>.
+          It appears that the extension <span id="app-name" class="font-bold"></span> does not exist on <span
+          id="world-title"></span>.
           It may have been moved, deleted, or the URL might be incorrect.
         </p>
         <p class="mt-4">
@@ -157,15 +155,15 @@ <h1 class="font-bold text-xl mt-2">Uh-oh! You are not connected</h1>
   </div>
 </template>
 <script>
-  if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
       navigator.serviceWorker
-        .register('/sw.js', { scope: '/' })
+        .register("/sw.js", { scope: "/" })
         .then(registration => {
-          console.log('SW registered: ', registration);
+          console.log("SW registered: ", registration);
         })
         .catch(registrationError => {
-          console.log('SW registration failed: ', registrationError);
+          console.log("SW registration failed: ", registrationError);
         });
     });
   }