feat: allow for plugins being passed down as props to <open-scd>

packages/core/foundation.ts

@@ -27,4 +27,4 @@ export type {
 export { cyrb64 } from './foundation/cyrb64.js';
 
 export { Editing } from './mixins/Editing.js';
-export { Plugging } from './mixins/Plugging.js';
+export type { Plugin, PluginSet } from './foundation/plugin.js';

packages/core/foundation/plugin.ts

@@ -0,0 +1,12 @@
+import { targetLocales } from '../locales.js';
+
+export type Plugin = {
+  name: string;
+  translations?: Record<(typeof targetLocales)[number], string>;
+  src: string;
+  icon: string;
+  requireDoc?: boolean;
+  active?: boolean;
+  position: ('top' | 'middle' | 'bottom') | number;
+};
+export type PluginSet = { menu: Plugin[]; editor: Plugin[] };

packages/open-scd/.eslintrc.cjs

@@ -21,4 +21,7 @@ module.exports = {
     'no-duplicate-imports': 'off',
     'tsdoc/syntax': 'warn'
   },
+  env: {
+    browser: true,
+  },
 };

packages/open-scd/src/open-scd.ts

@@ -53,7 +53,16 @@ import { Switch } from '@material/mwc-switch';
 import { TextField } from '@material/mwc-textfield';
 import { Dialog } from '@material/mwc-dialog';
 import { initializeNsdoc, Nsdoc } from './foundation/nsdoc.js';
-import { HistoryUIKind, newEmptyIssuesEvent, newHistoryUIEvent, newRedoEvent, newUndoEvent, UndoRedoChangedEvent } from './addons/History.js';
+import {
+  HistoryUIKind,
+  newEmptyIssuesEvent,
+  newHistoryUIEvent,
+  newRedoEvent,
+  newUndoEvent,
+  UndoRedoChangedEvent,
+} from './addons/History.js';
+
+import type { PluginSet, Plugin as CorePlugin } from '@openscd/core';
 
 // HOSTING INTERFACES
 
@@ -156,6 +165,7 @@ export type Plugin = {
   name: string;
   src: string;
   icon?: string;
+  default?: boolean;
   kind: PluginKind;
   requireDoc?: boolean;
   position?: MenuPosition;
@@ -189,9 +199,9 @@ export const pluginIcons: Record<PluginKind | MenuPosition, string> = {
   bottom: 'play_circle',
 };
 
-function resetPlugins(): void {
+function resetPlugins(paramPlugins: Plugin[]): void {
   storePlugins(
-    officialPlugins.map(plugin => {
+    (officialPlugins as Plugin[]).concat(paramPlugins).map(plugin => {
       return {
         src: plugin.src,
         installed: plugin.default ?? false,
@@ -302,9 +312,6 @@ export class OpenSCD extends LitElement {
 
     this.handleKeyPress = this.handleKeyPress.bind(this);
     document.onkeydown = this.handleKeyPress;
-
-    this.updatePlugins();
-    this.requestUpdate();
   }
 
   protected renderMain(): TemplateResult {
@@ -338,18 +345,21 @@ export class OpenSCD extends LitElement {
       this.canRedo = e.detail.canRedo;
       this.canUndo = e.detail.canUndo;
     });
+
+    this.updatePlugins();
+    this.requestUpdate();
   }
 
   render(): TemplateResult {
     return html`<oscd-waiter>
       <oscd-settings .host=${this}>
         <oscd-wizards .host=${this}>
-          <oscd-history 
-            .host=${this} 
-            @undo-redo-changed="${(e:UndoRedoChangedEvent) => { 
-              this.editCount = e.detail.editCount 
-              this.canRedo = e.detail.canRedo
-              this.canUndo = e.detail.canUndo
+          <oscd-history
+            .host=${this}
+            @undo-redo-changed="${(e: UndoRedoChangedEvent) => {
+              this.editCount = e.detail.editCount;
+              this.canRedo = e.detail.canRedo;
+              this.canUndo = e.detail.canUndo;
             }}"
           >
             <oscd-editor
@@ -573,7 +583,7 @@ export class OpenSCD extends LitElement {
         name: 'undo',
         actionItem: true,
         action: (): void => {
-          this.dispatchEvent(newUndoEvent())
+          this.dispatchEvent(newUndoEvent());
         },
         disabled: (): boolean => !this.canUndo,
         kind: 'static',
@@ -583,7 +593,7 @@ export class OpenSCD extends LitElement {
         name: 'redo',
         actionItem: true,
         action: (): void => {
-          this.dispatchEvent(newRedoEvent())
+          this.dispatchEvent(newRedoEvent());
         },
         disabled: (): boolean => !this.canRedo,
         kind: 'static',
@@ -594,7 +604,7 @@ export class OpenSCD extends LitElement {
         name: 'menu.viewLog',
         actionItem: true,
         action: (): void => {
-          this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.log))
+          this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.log));
         },
         kind: 'static',
       },
@@ -603,7 +613,7 @@ export class OpenSCD extends LitElement {
         name: 'menu.viewHistory',
         actionItem: true,
         action: (): void => {
-          this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.history))
+          this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.history));
         },
         kind: 'static',
       },
@@ -612,7 +622,7 @@ export class OpenSCD extends LitElement {
         name: 'menu.viewDiag',
         actionItem: true,
         action: (): void => {
-          this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.diagnostic))
+          this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.diagnostic));
         },
         kind: 'static',
       },
@@ -743,17 +753,17 @@ export class OpenSCD extends LitElement {
   }
 
   get editors(): Plugin[] {
-    return this.plugins.filter(
+    return this.sortedStoredPlugins.filter(
       plugin => plugin.installed && plugin.kind === 'editor'
     );
   }
   get validators(): Plugin[] {
-    return this.plugins.filter(
+    return this.sortedStoredPlugins.filter(
       plugin => plugin.installed && plugin.kind === 'validator'
     );
   }
   get menuEntries(): Plugin[] {
-    return this.plugins.filter(
+    return this.sortedStoredPlugins.filter(
       plugin => plugin.installed && plugin.kind === 'menu'
     );
   }
@@ -767,13 +777,40 @@ export class OpenSCD extends LitElement {
     return this.menuEntries.filter(plugin => plugin.position === 'bottom');
   }
 
-  private get plugins(): Plugin[] {
+  /**
+   * @prop {PluginSet} plugins - Set of plugins that are used by OpenSCD
+   */
+  @property({ type: Object })
+  plugins: PluginSet = { menu: [], editor: [] };
+
+  get parsedPlugins(): Plugin[] {
+    return this.plugins.menu
+      .map((p: CorePlugin) => ({
+        ...p,
+        position:
+          typeof p.position !== 'number'
+            ? (p.position as MenuPosition)
+            : undefined,
+        kind: 'menu' as PluginKind,
+        installed: p.active ?? false,
+      }))
+      .concat(
+        this.plugins.editor.map((p: CorePlugin) => ({
+          ...p,
+          position: undefined,
+          kind: 'editor' as PluginKind,
+          installed: p.active ?? false,
+        }))
+      );
+  }
+
+  private get sortedStoredPlugins(): Plugin[] {
     return this.storedPlugins
       .map(plugin => {
         if (!plugin.official) return plugin;
-        const officialPlugin = officialPlugins.find(
-          needle => needle.src === plugin.src
-        );
+        const officialPlugin = (officialPlugins as Plugin[])
+          .concat(this.parsedPlugins)
+          .find(needle => needle.src === plugin.src);
         return <Plugin>{
           ...officialPlugin,
           ...plugin,
@@ -813,7 +850,7 @@ export class OpenSCD extends LitElement {
   }
 
   private setPlugins(indices: Set<number>) {
-    const newPlugins = this.plugins.map((plugin, index) => {
+    const newPlugins = this.sortedStoredPlugins.map((plugin, index) => {
       return { ...plugin, installed: indices.has(index) };
     });
     storePlugins(newPlugins);
@@ -823,7 +860,10 @@ export class OpenSCD extends LitElement {
   private updatePlugins() {
     const stored: Plugin[] = this.storedPlugins;
     const officialStored = stored.filter(p => p.official);
-    const newOfficial: Array<Plugin | InstalledOfficialPlugin> = officialPlugins
+    const newOfficial: Array<Plugin | InstalledOfficialPlugin> = (
+      officialPlugins as Plugin[]
+    )
+      .concat(this.parsedPlugins)
       .filter(p => !officialStored.find(o => o.src === p.src))
       .map(plugin => {
         return {
@@ -833,7 +873,10 @@ export class OpenSCD extends LitElement {
         };
       });
     const oldOfficial = officialStored.filter(
-      p => !officialPlugins.find(o => p.src === o.src)
+      p =>
+        !(officialPlugins as Plugin[])
+          .concat(this.parsedPlugins)
+          .find(o => p.src === o.src)
     );
     const newPlugins: Array<Plugin | InstalledOfficialPlugin> = stored.filter(
       p => !oldOfficial.find(o => p.src === o.src)
@@ -1056,7 +1099,7 @@ export class OpenSCD extends LitElement {
           <li divider role="separator"></li>
           ${this.renderPluginKind(
             'editor',
-            this.plugins.filter(p => p.kind === 'editor')
+            this.sortedStoredPlugins.filter(p => p.kind === 'editor')
           )}
           <mwc-list-item graphic="avatar" noninteractive
             ><strong>${get(`plugins.menu`)}</strong
@@ -1067,24 +1110,26 @@ export class OpenSCD extends LitElement {
           <li divider role="separator"></li>
           ${this.renderPluginKind(
             'top',
-            this.plugins.filter(p => p.kind === 'menu' && p.position === 'top')
+            this.sortedStoredPlugins.filter(
+              p => p.kind === 'menu' && p.position === 'top'
+            )
           )}
           <li divider role="separator" inset></li>
           ${this.renderPluginKind(
             'validator',
-            this.plugins.filter(p => p.kind === 'validator')
+            this.sortedStoredPlugins.filter(p => p.kind === 'validator')
           )}
           <li divider role="separator" inset></li>
           ${this.renderPluginKind(
             'middle',
-            this.plugins.filter(
+            this.sortedStoredPlugins.filter(
               p => p.kind === 'menu' && p.position === 'middle'
             )
           )}
           <li divider role="separator" inset></li>
           ${this.renderPluginKind(
             'bottom',
-            this.plugins.filter(
+            this.sortedStoredPlugins.filter(
               p => p.kind === 'menu' && p.position === 'bottom'
             )
           )}
@@ -1094,7 +1139,7 @@ export class OpenSCD extends LitElement {
           icon="refresh"
           label="${get('reset')}"
           @click=${async () => {
-            resetPlugins();
+            resetPlugins(this.parsedPlugins);
             this.requestUpdate();
           }}
           style="--mdc-theme-primary: var(--mdc-theme-error)"