fix: resolve CSS loading issue in plugin wrapper and update script en…

apps/archive-explorer/src/plugin-wrapper.svelte.ts

@@ -24,13 +24,12 @@ export default class NewOSCDPlugin extends HTMLElement {
     this.props.doc = this._doc;
     this.props.editCount = this.editCount;
 
-    mount(Plugin, {
-      target: this.shadowRoot!,
-      props: this.props,
-    });
-
     const linkElement = createStyleLinkElement();
-    this.shadowRoot?.appendChild(linkElement);
+    this.shadowRoot!.appendChild(linkElement);
+
+    const mountPlugin = () => mount(Plugin, { target: this.shadowRoot!, props: this.props});
+    linkElement.addEventListener('load', mountPlugin, { once: true });
+    linkElement.addEventListener('error', mountPlugin, { once: true });
   }
 
   private _doc?: XMLDocument;

apps/engineering-wizard/src/pluginwrapper.svelte.ts → apps/engineering-wizard/src/plugin-wrapper.svelte.ts

@@ -3,7 +3,10 @@ import * as pkg from '../package.json';
 import { mount } from 'svelte';
 import type { CoMPASPlugin } from '@oscd-transnet-plugins/shared';
 import { setInternalPlugins } from './features/processes/mutations.svelte';
-import { scheduleEditValidation, cancelPendingValidation } from './services/editValidationHandler';
+import {
+  cancelPendingValidation,
+  scheduleEditValidation,
+} from './services/editValidationHandler';
 
 interface PluginProps {
   doc?: XMLDocument;
@@ -43,12 +46,24 @@ export default class NewOSCDPlugin extends HTMLElement {
     this.attachShadow({ mode: 'open' });
     const shadowRoot = this.shadowRoot!;
 
-    mount(Plugin, { target: shadowRoot, props: this._props });
-    shadowRoot.appendChild(createStyleLinkElement());
-    
+    const linkElement = createStyleLinkElement();
+    shadowRoot.appendChild(linkElement);
+
     const themeEl = document.createElement('style');
     themeEl.textContent = `:host { --primary-base: var(--primary); --white: #ffffff; --danger: var(--red); }`;
     shadowRoot.appendChild(themeEl);
+
+    linkElement.addEventListener(
+      'load',
+      () => mount(Plugin, { target: shadowRoot, props: this._props }),
+      { once: true },
+    );
+
+    linkElement.addEventListener(
+      'error',
+      () => mount(Plugin, { target: shadowRoot, props: this._props }),
+      { once: true },
+    );
   }
 
   disconnectedCallback() {

apps/engineering-wizard/vite.config.ts

@@ -37,7 +37,7 @@ export default (defineConfig as any)(async () => {
         },
       },
       lib: {
-        entry: 'src/pluginwrapper.svelte.ts',
+        entry: 'src/plugin-wrapper.svelte.ts',
         formats: ['es'],
         fileName: 'index',
       },

apps/history-viewer/src/plugin-wrapper.svelte.ts

@@ -23,24 +23,25 @@ export default class NewOSCDPlugin extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.props.doc = this._doc;
-    this.props.editCount = this.editCount;
-
-    mount(Plugin, {
-      target: this.shadowRoot!,
-      props: this.props,
-    });
+    this.props.editCount = this._editCount;
 
     const linkElement = createStyleLinkElement();
-    this.shadowRoot?.appendChild(linkElement);
+    this.shadowRoot!.appendChild(linkElement);
+
+    const mountPlugin = () => mount(Plugin, { target: this.shadowRoot!, props: this.props });
+    linkElement.addEventListener('load', mountPlugin, { once: true });
+    linkElement.addEventListener('error', mountPlugin, { once: true });
   }
 
   private _doc?: XMLDocument;
   public set doc(newDoc: XMLDocument) {
     this._doc = newDoc;
-    this.props.doc = newDoc
+    this.props.doc = newDoc;
   }
 
+  private _editCount?: number;
   public set editCount(newCount: number) {
+    this._editCount = newCount;
     this.props.editCount = newCount;
   }
 }

apps/location-manager/src/plugin-wrapper.svelte.ts

@@ -22,15 +22,14 @@ export default class NewOSCDPlugin extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.props.doc = this._doc;
-    this.props.editCount = this.editCount;
-
-    mount(Plugin, {
-      target: this.shadowRoot!,
-      props: this.props,
-    });
+    this.props.editCount = this._editCount;
 
     const linkElement = createStyleLinkElement();
-    this.shadowRoot?.appendChild(linkElement);
+    this.shadowRoot!.appendChild(linkElement);
+
+    const mountPlugin = () => mount(Plugin, { target: this.shadowRoot!, props: this.props });
+    linkElement.addEventListener('load', mountPlugin, { once: true });
+    linkElement.addEventListener('error', mountPlugin, { once: true });
   }
 
   private _doc?: XMLDocument;

apps/location-viewer/src/plugin-wrapper.svelte.ts

@@ -22,24 +22,25 @@ export default class NewOSCDPlugin extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.props.doc = this._doc;
-    this.props.editCount = this.editCount;
-
-    mount(Plugin, {
-          target: this.shadowRoot!,
-          props: this.props,
-        });
+    this.props.editCount = this._editCount;
 
     const linkElement = createStyleLinkElement();
-    this.shadowRoot?.appendChild(linkElement);
+    this.shadowRoot!.appendChild(linkElement);
+
+    const mountPlugin = () => mount(Plugin, { target: this.shadowRoot!, props: this.props });
+    linkElement.addEventListener('load', mountPlugin, { once: true });
+    linkElement.addEventListener('error', mountPlugin, { once: true });
   }
 
   private _doc?: XMLDocument;
   public set doc(newDoc: XMLDocument) {
     this._doc = newDoc;
-    this.props.doc = newDoc
+    this.props.doc = newDoc;
   }
 
+  private _editCount?: number;
   public set editCount(newCount: number) {
+    this._editCount = newCount;
     this.props.editCount = newCount;
   }
 }

apps/template-generator/src/plugin-wrapper.svelte.ts

@@ -14,16 +14,30 @@ export default class NewOSCDPlugin extends HTMLElement {
     });
 
     const linkElement = createStyleLinkElement();
-    this.shadowRoot?.appendChild(linkElement);
+    this.shadowRoot!.appendChild(linkElement);
 
     const themeEl = document.createElement('style');
     themeEl.textContent = `:host { --primary-base: var(--primary); --white: #ffffff; --danger: var(--red); }`;
     this.shadowRoot!.appendChild(themeEl);
 
     initializeDataTypeService(this._doc!, this);
-    pluginStore.setPluginState({host: this, doc: this._doc})
+    pluginStore.setPluginState({host: this, doc: this._doc});
 
-    this.app = mount(Plugin, { target: this.shadowRoot! });
+    linkElement.addEventListener(
+      'load',
+      () => {
+        this.app = mount(Plugin, { target: this.shadowRoot! });
+      },
+      { once: true },
+    );
+
+    linkElement.addEventListener(
+      'error',
+      () => {
+        this.app = mount(Plugin, { target: this.shadowRoot! });
+      },
+      { once: true },
+    );
   }
 
   disconnectedCallback() {

apps/type-distributor/src/pluginwrapper.svelte.ts → apps/type-distributor/src/plugin-wrapper.svelte.ts

@@ -41,13 +41,12 @@ export default class NewOSCDPlugin extends HTMLElement {
 
     this.attachShadow({ mode: 'open' });
 
-    mount(Plugin, {
-      target: this.shadowRoot!,
-      props: this._props,
-    });
-
     const linkElement = createStyleLinkElement();
     this.shadowRoot!.appendChild(linkElement);
+
+    const mountPlugin = () => mount(Plugin, { target: this.shadowRoot!, props: this._props });
+    linkElement.addEventListener('load', mountPlugin, { once: true });
+    linkElement.addEventListener('error', mountPlugin, { once: true });
   }
 
   set doc(newDoc: XMLDocument) {

apps/type-distributor/vite.config.ts

@@ -36,7 +36,7 @@ export default (defineConfig as any)(async () => {
         },
       },
       lib: {
-        entry: 'src/pluginwrapper.svelte.ts',
+        entry: 'src/plugin-wrapper.svelte.ts',
         formats: ['es'],
         fileName: 'index',
       },

package.json

@@ -4,33 +4,35 @@
   "license": "MIT",
   "scripts": {
     "build": "npm run generate:history-api-client && npm run generate:archiving-api-client && npm run build:history-viewer && npm run build:archive-explorer && npm run build:location-viewer && npm run build:location-manager && npm run build:engineering-wizard && npm run build:template-generator && npm run build:type-distributor",
-    "test:all": "nx run-many --target=test --projects='oscd-template-generator,oscd-services'",
-    "mock-server": "node mocks/server.js",
-    "clean:history-viewer": "rm -rf dist/apps/history-viewer",
-    "run:history-viewer": "nx run history-viewer:serve",
-    "run:archive-explorer": "nx run archive-explorer:serve",
-    "run:location-viewer": "nx run location-viewer:serve",
-    "run:location-manager": "nx run location-manager:serve",
-    "run:engineering-wizard": "nx run engineering-wizard:serve",
-    "run:template-generator": "nx run template-generator:serve",
-    "run:type-distributor": "nx run type-distributor:serve",
-    "build:history-viewer": "nx run --prod history-viewer:build --no-outputhashing --emptyOutDir --verbose",
     "build:archive-explorer": "nx run --prod archive-explorer:build --no-outputhashing --emptyOutDir --verbose",
-    "build:location-viewer": "nx run --prod location-viewer:build --no-outputhashing --emptyOutDir --verbose",
-    "build:location-manager": "nx run --prod location-manager:build --no-outputhashing --emptyOutDir --verbose",
     "build:engineering-wizard": "nx run --prod engineering-wizard:build --no-outputhashing --emptyOutDir --verbose",
+    "build:history-viewer": "nx run --prod history-viewer:build --no-outputhashing --emptyOutDir --verbose",
+    "build:location-manager": "nx run --prod location-manager:build --no-outputhashing --emptyOutDir --verbose",
+    "build:location-viewer": "nx run --prod location-viewer:build --no-outputhashing --emptyOutDir --verbose",
+    "build:oscd-api-client": "nx run oscd-history-api-client:build --no-outputhashing --emptyOutDir --verbose",
+    "build:oscd-xml-utils": "nx run oscd-xml-utils:build --no-outputhashing --emptyOutDir --verbose",
+    "build:template-generator": "nx run --prod template-generator:build --no-outputhashing --emptyOutDir --verbose",
     "build:type-distributor": "nx run --prod type-distributor:build --no-outputhashing --emptyOutDir --verbose",
+    "clean:history-viewer": "rm -rf dist/apps/history-viewer",
+    "generate:archiving-api-client": "openapi-generator-cli generate -g typescript-rxjs -i docs/archiving-api.yml --package-name archiving-api-client --enable-post-process-file  --additional-properties \"artifactId=archiving-api,npmName=archiving-api,hideGenerationTimestamp:true,serializableModel:true,withInterfaces=true,withSeparateModelsAndApi=true\" --output libs/oscd-archiving-api-client/src/lib",
+    "generate:history-api-client": "openapi-generator-cli generate -g typescript-rxjs -i docs/history-api.yml --package-name history-api-client --enable-post-process-file  --additional-properties \"artifactId=history-api,npmName=history-api,hideGenerationTimestamp:true,serializableModel:true,withInterfaces=true,withSeparateModelsAndApi=true\" --output libs/oscd-history-api-client/src/lib",
+    "http-server:history-viewer": "http-server dist/apps/history-viewer -p 4202 --cors",
+    "mock-server": "node mocks/server.js",
+    "preview:archive-explorer": "nx run --prod archive-explorer:preview",
+    "preview:history-viewer": "nx run --prod history-viewer:preview",
     "preview:engineering-wizard": "nx run --prod engineering-wizard:preview",
-    "preview:type-distributor": "nx run --prod type-distributor:preview --no-outputhashing --emptyOutDir --verbose",
-    "preview:location-viewer": "nx run --prod location-viewer:preview",
     "preview:location-manager": "nx run --prod location-manager:preview",
-    "build:template-generator": "nx run --prod template-generator:build --no-outputhashing --emptyOutDir --verbose",
+    "preview:location-viewer": "nx run --prod location-viewer:preview",
     "preview:template-generator": "nx run --prod template-generator:preview --no-outputhashing --emptyOutDir --verbose",
-    "http-server:history-viewer": "http-server dist/apps/history-viewer -p 4202 --cors",
-    "generate:history-api-client": "openapi-generator-cli generate -g typescript-rxjs -i docs/history-api.yml --package-name history-api-client --enable-post-process-file  --additional-properties \"artifactId=history-api,npmName=history-api,hideGenerationTimestamp:true,serializableModel:true,withInterfaces=true,withSeparateModelsAndApi=true\" --output libs/oscd-history-api-client/src/lib",
-    "generate:archiving-api-client": "openapi-generator-cli generate -g typescript-rxjs -i docs/archiving-api.yml --package-name archiving-api-client --enable-post-process-file  --additional-properties \"artifactId=archiving-api,npmName=archiving-api,hideGenerationTimestamp:true,serializableModel:true,withInterfaces=true,withSeparateModelsAndApi=true\" --output libs/oscd-archiving-api-client/src/lib",
-    "build:oscd-api-client": "nx run oscd-history-api-client:build --no-outputhashing --emptyOutDir --verbose",
-    "build:oscd-xml-utils": "nx run oscd-xml-utils:build --no-outputhashing --emptyOutDir --verbose"
+    "preview:type-distributor": "nx run --prod type-distributor:preview --no-outputhashing --emptyOutDir --verbose",
+    "run:archive-explorer": "nx run archive-explorer:serve",
+    "run:engineering-wizard": "nx run engineering-wizard:serve",
+    "run:history-viewer": "nx run history-viewer:serve",
+    "run:location-manager": "nx run location-manager:serve",
+    "run:location-viewer": "nx run location-viewer:serve",
+    "run:template-generator": "nx run template-generator:serve",
+    "run:type-distributor": "nx run type-distributor:serve",
+    "test:all": "nx run-many --target=test --projects='oscd-template-generator,oscd-services'"
   },
   "private": true,
   "dependencies": {