Skip to content

feat: allow to version admin bundle assets #1066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dziraf merged 2 commits into from
Apr 3, 2022
Merged

feat: allow to version admin bundle assets #1066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3d3bd4
feat: allow to version admin bundle assets
dziraf Apr 1, 2022
cfd0e37
chore: fix lint errors
dziraf Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/adminjs-options.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}

/**
Expand Down
8 changes: 5 additions & 3 deletions src/backend/utils/view-helpers/view-helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {}
Expand Down Expand Up @@ -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()}`
Expand Down
41 changes: 41 additions & 0 deletions src/core-scripts.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
8 changes: 4 additions & 4 deletions src/frontend/layout-template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/login-template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down