Web components: Introduce versioning

.github/workflows/webcomponents.yml

@@ -6,6 +6,8 @@ on:
   push:
     branches:
       - main
+    tags:
+      - '*.*.*'
   release:
     types: [published]
 
@@ -54,10 +56,10 @@ jobs:
           tag: ${{ github.ref }}
           overwrite: true
 
-      - name: Publish web component to ${{ env.PUBLISH_BRANCH }} branch
+      - name: Publish web component to ${{ env.PUBLISH_BRANCH }}-${{ github.ref_name }} branch
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           force_orphan: true
           publish_dir: ./wc-dist
-          publish_branch: ${{ env.PUBLISH_BRANCH }}
+          publish_branch: ${{ env.PUBLISH_BRANCH }}-${{ github.ref_name }}

apps/datahub/src/app/app.module.ts

@@ -68,6 +68,7 @@ import { WEB_COMPONENT_EMBEDDER_URL } from '@geonetwork-ui/feature/record'
 import { LANGUAGES_LIST, UiCatalogModule } from '@geonetwork-ui/ui/catalog'
 import { METADATA_LANGUAGE } from '@geonetwork-ui/api/repository'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { GN_UI_VERSION } from '@geonetwork-ui/feature/record'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 // https://github.com/nrwl/nx/issues/191
@@ -130,6 +131,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
   providers: [
     { provide: RouterService, useClass: DatahubRouterService },
     importProvidersFrom(FeatureAuthModule),
+    { provide: GN_UI_VERSION, useValue: environment.version },
     {
       provide: Configuration,
       useFactory: () =>

apps/datahub/src/environments/environment.prod.ts

@@ -1,3 +1,5 @@
+import packageJson from '../../../../package.json'
 export const environment = {
   production: true,
+  version: `v${packageJson.version.split('-')[0]}`,
 }

apps/datahub/src/environments/environment.ts

@@ -1,9 +1,14 @@
+import packageJson from '../../../../package.json'
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
   production: false,
+  version:
+    packageJson.version.split('-')[1] === 'dev'
+      ? 'main'
+      : `v${packageJson.version}`,
 }
 
 /*

apps/webcomponents/README.md

@@ -11,7 +11,7 @@ All Web Components are prefixed with `gn-`.
 Web Components are made to be easily included in any context, e.g.:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-main/gn-wc.js"></script>
 ...
 <gn-results-list
   api-url="https://apps.titellus.net/geonetwork/srv/api"

docs/guide/webcomponents.md

@@ -20,7 +20,7 @@ Web Components are made to be easily included in any context. To do so, you have
 - include your Web Component in the HTML content.
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-v1.1.0/gn-wc.js"></script>
 ...
 <gn-results-list
   api-url="https://dev.geo2france.fr/geonetwork/srv/api"
@@ -31,6 +31,12 @@ Web Components are made to be easily included in any context. To do so, you have
 ></gn-results-list>
 ```
 
+## Publication and Versioning
+
+The Web Component script is automatically built upon merges on main and for releases. These builds are made available via a jsdelivr CDN, which points at `wc-dist` branches in the github repository. There is a `wc-dist` branch for every release tag > `v1.1.0` as well as `wc-dist-main`.
+
+You can choose the version of the Web Component script you wish to use by indicating the corresponding value in the script's URL e.g. `wc-dist-v1.1.0`.
+
 ## Build
 
 All Angular custom elements are served by the same application `webcomponents`.

libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts

@@ -8,6 +8,7 @@ import {
 import { Configuration } from '@geonetwork-ui/data-access/gn4'
 import { combineLatest, map } from 'rxjs'
 import { MdViewFacade } from '../state'
+import { GN_UI_VERSION } from '../feature-record.module'
 
 export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
   'webComponentEmbedderUrl'
@@ -28,7 +29,8 @@ export class DataViewPermalinkComponent {
       if (config) {
         const { aggregation, xProperty, yProperty, chartType } = config
         const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
-        url.search = `?e=gn-dataset-view-chart
+        url.search = `?v=${this.version}
+&e=gn-dataset-view-chart
 &a=api-url=${this.config.basePath}
 &a=dataset-id=${metadata.uniqueIdentifier}
 &a=primary-color=%230f4395
@@ -50,6 +52,7 @@ export class DataViewPermalinkComponent {
     @Optional()
     @Inject(WEB_COMPONENT_EMBEDDER_URL)
     protected wcEmbedderBaseUrl: string,
+    @Inject(GN_UI_VERSION) private version: string,
     private facade: MdViewFacade
   ) {}
 }

libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
 import { Configuration } from '@geonetwork-ui/data-access/gn4'
 import { MdViewFacade } from '../state'
 import { combineLatest, map } from 'rxjs'
+import { GN_UI_VERSION } from '../feature-record.module'
 
 @Component({
   selector: 'gn-ui-data-view-web-component',
@@ -17,7 +18,9 @@ export class DataViewWebComponentComponent {
     map(([config, metadata]) => {
       if (config) {
         const { aggregation, xProperty, yProperty, chartType } = config
-        return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+        return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+          this.version
+        }/gn-wc.js"></script>
 <gn-dataset-view-chart
         api-url="${new URL(
           this.config.basePath,
@@ -42,6 +45,7 @@ export class DataViewWebComponentComponent {
 
   constructor(
     @Inject(Configuration) private config: Configuration,
+    @Inject(GN_UI_VERSION) private version: string,
     private facade: MdViewFacade
   ) {}
 }

libs/feature/record/src/lib/feature-record.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core'
+import { InjectionToken, NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { UiMapModule } from '@geonetwork-ui/ui/map'
 import { StoreModule } from '@ngrx/store'
@@ -29,6 +29,7 @@ import { DataViewPermalinkComponent } from './data-view-permalink/data-view-perm
 import { DataViewWebComponentComponent } from './data-view-web-component/data-view-web-component.component'
 import { DataViewShareComponent } from './data-view-share/data-view-share.component'
 
+export const GN_UI_VERSION = new InjectionToken<string>('gnUiVersion')
 @NgModule({
   declarations: [
     RecordMetadataComponent,

tools/webcomponent/wc-embedder.html

@@ -16,7 +16,7 @@
         font-family: 'Open Sans', 'dataFeeder', sans-serif !important;
       }
     </style>
-    <script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+    <script id="gn-wc-script"></script>
     <script>
       function showError(message) {
         const errorMessage = document.createElement('div')
@@ -37,6 +37,10 @@
 
       try {
         const params = new URL(window.location).searchParams
+        const version = params.get('v')
+        document.getElementById(
+          'gn-wc-script'
+        ).src = `https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${version}/gn-wc.js`
         const elementName = params.get('e')
         const attributes = params.getAll('a')