feat: allow editor plugins to render without an opened doc

packages/openscd/src/addons/Layout.ts

@@ -469,17 +469,26 @@ export class OscdLayout extends LitElement {
   /** Renders the enabled editor plugins and a tab bar to switch between them*/
   protected renderContent(): TemplateResult {
 
-    if(!this.doc) return html``;
+    const activeEditors = this.editors
+      .filter(editor => !editor.requireDoc || this.doc )
+      .map(this.renderEditorTab)
+
+    const hasActiveEditors = activeEditors.length > 0;
+    if(!hasActiveEditors){ return html``; }
 
     return html`
       <mwc-tab-bar @MDCTabBar:activated=${(e: CustomEvent) => (this.activeTab = e.detail.index)}>
-        ${this.editors.map(this.renderEditorTab)}
+        ${activeEditors}
       </mwc-tab-bar>
-      ${renderEditorContent(this.editors, this.activeTab)}
+      ${renderEditorContent(this.editors, this.activeTab, this.doc)}
     `;
 
-    function renderEditorContent(editors: Plugin[], activeTab: number){
-      const content = editors[activeTab]?.content;
+    function renderEditorContent(editors: Plugin[], activeTab: number, doc: XMLDocument | null){
+      const editor = editors[activeTab];
+      const requireDoc = editor?.requireDoc
+      if(requireDoc && !doc) { return html`` }
+
+      const content = editor?.content;
       if(!content) { return html`` }
 
       return html`${content}`;

packages/openscd/src/open-scd.ts

@@ -488,10 +488,12 @@ export class OpenSCD extends LitElement {
 
   private addContent(plugin: Omit<Plugin, 'content'>): Plugin {
     const tag = pluginTag(plugin.src);
+
     if (!loadedPlugins.has(tag)) {
       loadedPlugins.add(tag);
       import(plugin.src).then(mod => customElements.define(tag, mod.default));
     }
+
     return {
       ...plugin,
       content: staticTagHtml`<${tag}

packages/openscd/src/plugins.ts

@@ -9,97 +9,111 @@ export const officialPlugins = [
     icon: 'developer_board',
     default: true,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Substation',
     src: generatePluginPath('plugins/src/editors/Substation.js'),
     icon: 'margin',
     default: true,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Single Line Diagram',
     src: generatePluginPath('plugins/src/editors/SingleLineDiagram.js'),
     icon: 'edit',
     default: false,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Subscriber Message Binding (GOOSE)',
     src: generatePluginPath('plugins/src/editors/GooseSubscriberMessageBinding.js'),
     icon: 'link',
     default: false,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Subscriber Data Binding (GOOSE)',
     src: generatePluginPath('plugins/src/editors/GooseSubscriberDataBinding.js'),
     icon: 'link',
     default: false,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Subscriber Later Binding (GOOSE)',
     src: generatePluginPath('plugins/src/editors/GooseSubscriberLaterBinding.js'),
     icon: 'link',
     default: true,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Subscriber Message Binding (SMV)',
     src: generatePluginPath('plugins/src/editors/SMVSubscriberMessageBinding.js'),
     icon: 'link',
     default: false,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Subscriber Data Binding (SMV)',
     src: generatePluginPath('plugins/src/editors/SMVSubscriberDataBinding.js'),
     icon: 'link',
     default: false,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Subscriber Later Binding (SMV)',
     src: generatePluginPath('plugins/src/editors/SMVSubscriberLaterBinding.js'),
     icon: 'link',
     default: true,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Communication',
     src: generatePluginPath('plugins/src/editors/Communication.js'),
     icon: 'settings_ethernet',
     default: true,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: '104',
     src: generatePluginPath('plugins/src/editors/Protocol104.js'),
     icon: 'settings_ethernet',
     default: false,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Templates',
     src: generatePluginPath('plugins/src/editors/Templates.js'),
     icon: 'copy_all',
     default: true,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Publisher',
     src: generatePluginPath('plugins/src/editors/Publisher.js'),
     icon: 'publish',
     default: false,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Cleanup',
     src: generatePluginPath('plugins/src/editors/Cleanup.js'),
     icon: 'cleaning_services',
     default: false,
     kind: 'editor',
+    requireDoc: true,
   },
   {
     name: 'Open project',

packages/openscd/test/unit/Plugging.test.ts

@@ -26,8 +26,9 @@ describe('OpenSCD-Plugin', () => {
     await element.updateComplete;
   });
 
-  it('stores default plugins on load', () =>
-    expect(element.layout).property('editors').to.have.lengthOf(6));
+  it('stores default plugins on load', () =>{
+    expect(element.layout).property('editors').to.have.lengthOf(6)
+  });
 
   it('has Locale property', async () => {
     expect(element).to.have.property('locale');
@@ -125,26 +126,43 @@ describe('OpenSCD-Plugin', () => {
       );
     });
 
-    it('requires a name and a valid URL to add a plugin', async () => {
-      primaryAction.click();
-      expect(element.layout.pluginDownloadUI).to.have.property('open', true);
+    describe('requires a name and a valid URL to add a plugin', async () => {
 
-      src.value = 'http://example.com/plugin.js';
-      await src.updateComplete;
-      primaryAction.click();
-      expect(element.layout.pluginDownloadUI).to.have.property('open', true);
+      it('does not add without user interaction', async () => {
+        primaryAction.click();
+        expect(element.layout.pluginDownloadUI).to.have.property('open', true);
+      })
 
-      src.value = 'notaURL';
-      name.value = 'testName';
-      await src.updateComplete;
-      await name.updateComplete;
-      primaryAction.click();
-      expect(element.layout.pluginDownloadUI).to.have.property('open', true);
+      it('does not add without a name', async () => {
+        src.value = 'http://example.com/plugin.js';
+        await src.updateComplete;
+        primaryAction.click();
+        expect(element.layout.pluginDownloadUI).to.have.property('open', true);
+      })
+
+      it('does not add plugin with incorrect url', async () => {
+        src.value = 'notaURL';
+        name.value = 'testName';
+        await src.updateComplete;
+        await name.updateComplete;
+        primaryAction.click();
+        expect(element.layout.pluginDownloadUI).to.have.property('open', true);
+      });
+
+
+      it('adds a plugin with a name and a valid URL', async () => {
+        name.value = 'testName';
+        await name.updateComplete;
+
+        src.value = 'http://localhost:8080/plugin/plugin.js';
+        await src.updateComplete;
+
+        await new Promise(resolve => setTimeout(resolve, 2_000));
+        primaryAction.click();
+
+        expect(element.layout.pluginDownloadUI).to.have.property('open', false);
+      })
 
-      src.value = 'http://example.com/plugin.js';
-      await src.updateComplete;
-      primaryAction.click();
-      expect(element.layout.pluginDownloadUI).to.have.property('open', false);
     });
 
     it('adds a new editor kind plugin on add button click', async () => {
@@ -156,6 +174,7 @@ describe('OpenSCD-Plugin', () => {
       await element.updateComplete;
       expect(element.layout.editors).to.have.lengthOf(7);
     });
+
     it('adds a new menu kind plugin on add button click', async () => {
       const lengthMenuKindPlugins = element.layout.menuEntries.length;
       src.value = 'http://example.com/plugin.js';
@@ -167,6 +186,7 @@ describe('OpenSCD-Plugin', () => {
       await element.updateComplete;
       expect(element.layout.menuEntries).to.have.lengthOf(lengthMenuKindPlugins + 1);
     });
+
     it('sets requireDoc and position for new menu kind plugin', async () => {
       src.value = 'http://example.com/plugin.js';
       name.value = 'testName';