diff --git a/apps/archive-explorer/src/plugin-wrapper.svelte.ts b/apps/archive-explorer/src/plugin-wrapper.svelte.ts index 0dd081db3..abae2671c 100644 --- a/apps/archive-explorer/src/plugin-wrapper.svelte.ts +++ b/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; diff --git a/apps/engineering-wizard/src/pluginwrapper.svelte.ts b/apps/engineering-wizard/src/plugin-wrapper.svelte.ts similarity index 83% rename from apps/engineering-wizard/src/pluginwrapper.svelte.ts rename to apps/engineering-wizard/src/plugin-wrapper.svelte.ts index 416f7a605..280957f5f 100644 --- a/apps/engineering-wizard/src/pluginwrapper.svelte.ts +++ b/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() { diff --git a/apps/engineering-wizard/vite.config.ts b/apps/engineering-wizard/vite.config.ts index 2488171ad..d81612fef 100644 --- a/apps/engineering-wizard/vite.config.ts +++ b/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', }, diff --git a/apps/history-viewer/src/plugin-wrapper.svelte.ts b/apps/history-viewer/src/plugin-wrapper.svelte.ts index a48024e76..d5ea28c82 100644 --- a/apps/history-viewer/src/plugin-wrapper.svelte.ts +++ b/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; } } diff --git a/apps/location-manager/src/plugin-wrapper.svelte.ts b/apps/location-manager/src/plugin-wrapper.svelte.ts index 0dd081db3..7ea5a45a8 100644 --- a/apps/location-manager/src/plugin-wrapper.svelte.ts +++ b/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; diff --git a/apps/location-viewer/src/plugin-wrapper.svelte.ts b/apps/location-viewer/src/plugin-wrapper.svelte.ts index 85a5ace16..6c421ac61 100644 --- a/apps/location-viewer/src/plugin-wrapper.svelte.ts +++ b/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; } } diff --git a/apps/template-generator/src/plugin-wrapper.svelte.ts b/apps/template-generator/src/plugin-wrapper.svelte.ts index f1a6d69b7..5ee5767db 100644 --- a/apps/template-generator/src/plugin-wrapper.svelte.ts +++ b/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() { diff --git a/apps/type-distributor/src/pluginwrapper.svelte.ts b/apps/type-distributor/src/plugin-wrapper.svelte.ts similarity index 90% rename from apps/type-distributor/src/pluginwrapper.svelte.ts rename to apps/type-distributor/src/plugin-wrapper.svelte.ts index c2cb3ccac..9da7460ec 100644 --- a/apps/type-distributor/src/pluginwrapper.svelte.ts +++ b/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) { diff --git a/apps/type-distributor/vite.config.ts b/apps/type-distributor/vite.config.ts index cd4b2bb61..dfb258221 100644 --- a/apps/type-distributor/vite.config.ts +++ b/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', }, diff --git a/package.json b/package.json index 940b22261..134a1d732 100644 --- a/package.json +++ b/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": {