From e3d3bd42eaba7d827ffa298246f21e6b9a800908 Mon Sep 17 00:00:00 2001
From: Rafal Dziegielewski <rafal.dzieg@gmail.com>
Date: Fri, 1 Apr 2022 11:57:21 +0200
Subject: [PATCH 1/2] feat: allow to version admin bundle assets

---
 src/adminjs-options.interface.ts              |  5 +++
 .../utils/view-helpers/view-helpers.ts        |  8 ++--
 src/core-scripts.interface.ts                 | 41 +++++++++++++++++++
 src/frontend/layout-template.tsx              |  8 ++--
 src/frontend/login-template.tsx               |  4 +-
 5 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 src/core-scripts.interface.ts

diff --git a/src/adminjs-options.interface.ts b/src/adminjs-options.interface.ts
index 87473b963..c4229d03f 100644
--- a/src/adminjs-options.interface.ts
+++ b/src/adminjs-options.interface.ts
@@ -7,6 +7,7 @@ import { PageContext } from './backend/actions/action.interface'
 import { ResourceOptions } from './backend/decorators/resource/resource-options.interface'
 import { Locale } from './locale/config'
 import { CurrentAdmin } from './current-admin.interface'
+import { CoreScripts } from './core-scripts.interface'
 
 /**
  * AdminJSOptions
@@ -264,6 +265,10 @@ export type Assets = {
    * library - you can pass its url here.
    */
   scripts?: Array<string>;
+  /**
+   *  Mapping of core scripts in case you want to version your assets
+   */
+  coreScripts?: CoreScripts;
 }
 
 /**
diff --git a/src/backend/utils/view-helpers/view-helpers.ts b/src/backend/utils/view-helpers/view-helpers.ts
index 84a3ceecd..2cfa799e4 100644
--- a/src/backend/utils/view-helpers/view-helpers.ts
+++ b/src/backend/utils/view-helpers/view-helpers.ts
@@ -1,4 +1,4 @@
-import { AdminJSOptions } from '../../../adminjs-options.interface'
+import { AdminJSOptions, Assets } from '../../../adminjs-options.interface'
 import { Paths } from '../../../frontend/store/store'
 
 let globalAny: any = {}
@@ -265,11 +265,13 @@ export class ViewHelpers {
    * @private
    *
    * @param  {string} asset
+   * @param  {Assets | undefined} assetsConfig
    * @return {string}
    */
-  assetPath(asset: string): string {
+  assetPath(asset: string, assetsConfig?: Assets): string {
     if (this.options.assetsCDN) {
-      const url = new URL(asset, this.options.assetsCDN).href
+      const pathname = assetsConfig?.coreScripts?.[asset] ?? asset
+      const url = new URL(pathname, this.options.assetsCDN).href
 
       // adding timestamp to the href invalidates the CDN cache
       return `${url}?date=${runDate.getTime()}`
diff --git a/src/core-scripts.interface.ts b/src/core-scripts.interface.ts
new file mode 100644
index 000000000..b158e15ff
--- /dev/null
+++ b/src/core-scripts.interface.ts
@@ -0,0 +1,41 @@
+/**
+ * @memberof Assets
+ * @alias CoreScripts
+ *
+ * Optional mapping of core AdminJS browser scripts:
+ * - app.bundle.js
+ * - components.bundle.js
+ * - design-system.bundle.js
+ * - global.bundle.js
+ *
+ * You may want to use it if you'd like to version assets for caching. This
+ * will only work if you have also configured `assetsCDN` in AdminJS options.
+ *
+ * Example:
+ * ```
+ * {
+ *   'app.bundle.js': 'app.bundle.123456.js',
+ *   'components.bundle.js': 'components.bundle.123456.js',
+ *   'design-system.bundle.js': 'design-system.bundle.123456.js',
+ *   'global.bundle.js': 'global.bundle.123456.js',
+ * }
+ * ```
+ */
+ export interface CoreScripts {
+  /**
+  * App Bundle
+  */
+  'app.bundle.js': string;
+  /**
+  * Custom Components
+  */
+  'components.bundle.js': string;
+  /**
+  * Design System Bundle
+  */
+  'design-system.bundle.js': string;
+  /**
+   * Global bundle
+   */
+  'global.bundle.js': string;
+}
diff --git a/src/frontend/layout-template.tsx b/src/frontend/layout-template.tsx
index 0ae54e8f0..269742829 100644
--- a/src/frontend/layout-template.tsx
+++ b/src/frontend/layout-template.tsx
@@ -52,10 +52,10 @@ const html = async (
 
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" type="text/css">
 
-      <script src="${h.assetPath('global.bundle.js')}"></script>
-      <script src="${h.assetPath('design-system.bundle.js')}"></script>
-      <script src="${h.assetPath('app.bundle.js')}"></script>
-      <script src="${h.assetPath('components.bundle.js')}"></script>
+      <script src="${h.assetPath('global.bundle.js', assets)}"></script>
+      <script src="${h.assetPath('design-system.bundle.js', assets)}"></script>
+      <script src="${h.assetPath('app.bundle.js', assets)}"></script>
+      <script src="${h.assetPath('components.bundle.js', assets)}"></script>
       ${styles.join('\n')}
     </head>
     <body>
diff --git a/src/frontend/login-template.tsx b/src/frontend/login-template.tsx
index d45f44472..5095438fe 100644
--- a/src/frontend/login-template.tsx
+++ b/src/frontend/login-template.tsx
@@ -93,8 +93,8 @@ const html = async (
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" type="text/css">
       ${styles.join('\n')}
 
-      <script src="${h.assetPath('global.bundle.js')}"></script>
-      <script src="${h.assetPath('design-system.bundle.js')}"></script>
+      <script src="${h.assetPath('global.bundle.js', assets)}"></script>
+      <script src="${h.assetPath('design-system.bundle.js', assets)}"></script>
     </head>
     <body>
       <div id="app">${loginComponent}</div>

From cfd0e37af35da0540e1d9903be7e33462429ac75 Mon Sep 17 00:00:00 2001
From: Rafal Dziegielewski <rafal.dzieg@gmail.com>
Date: Fri, 1 Apr 2022 12:02:58 +0200
Subject: [PATCH 2/2] chore: fix lint errors

---
 src/core-scripts.interface.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/core-scripts.interface.ts b/src/core-scripts.interface.ts
index b158e15ff..3f4b21385 100644
--- a/src/core-scripts.interface.ts
+++ b/src/core-scripts.interface.ts
@@ -21,18 +21,18 @@
  * }
  * ```
  */
- export interface CoreScripts {
+export interface CoreScripts {
   /**
-  * App Bundle
-  */
+   * App Bundle
+   */
   'app.bundle.js': string;
   /**
-  * Custom Components
-  */
+   * Custom Components
+   */
   'components.bundle.js': string;
   /**
-  * Design System Bundle
-  */
+   * Design System Bundle
+   */
   'design-system.bundle.js': string;
   /**
    * Global bundle