feat(editing): open documents

foundation.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+
+/** Constructor type for defining `LitElement` mixins. */
+// eslint-disable-next-line  @typescript-eslint/no-explicit-any
+export type LitElementConstructor = new (...args: any[]) => LitElement;
+
+export { newOpenDocEvent } from './foundation/open-doc.js';
+export type { OpenDocEvent, OpenDocDetail } from './foundation/open-doc.js';

foundation/open-doc.ts

@@ -0,0 +1,24 @@
+export interface OpenDocDetail {
+  doc: XMLDocument;
+  docName: string;
+}
+
+/** Represents the intent to open `doc` with filename `docName`. */
+export type OpenDocEvent = CustomEvent<OpenDocDetail>;
+
+export function newOpenDocEvent(
+  doc: XMLDocument,
+  docName: string
+): OpenDocEvent {
+  return new CustomEvent<OpenDocDetail>('open-doc', {
+    bubbles: true,
+    composed: true,
+    detail: { doc, docName },
+  });
+}
+
+declare global {
+  interface ElementEventMap {
+    ['open-doc']: OpenDocEvent;
+  }
+}

mixins/Editing.spec.ts

@@ -0,0 +1,32 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { Editing } from './Editing.js';
+import { newOpenDocEvent } from '../foundation.js';
+
+@customElement('editing-element')
+class EditingElement extends Editing(LitElement) {}
+
+describe('Editing Element', () => {
+  let editor: EditingElement;
+  const doc = new DOMParser().parseFromString(
+    `<?xml version="1.0" encoding="UTF-8"?>
+      <SCL version="2007" revision="B" xmlns="http://www.iec.ch/61850/2003/SCL">
+      </SCL>`,
+    'application/xml'
+  );
+
+  beforeEach(async () => {
+    editor = <EditingElement>(
+      await fixture(html`<editing-element></editing-element>`)
+    );
+  });
+
+  it('loads a document on OpenDocEvent', async () => {
+    editor.dispatchEvent(newOpenDocEvent(doc, 'test.scd'));
+    await editor.updateComplete;
+    expect(editor.doc).to.equal(doc);
+    expect(editor.docName).to.equal('test.scd');
+  });
+});

mixins/Editing.ts

@@ -0,0 +1,32 @@
+import { property } from 'lit/decorators.js';
+import { LitElementConstructor, OpenDocEvent } from '../foundation.js';
+
+/** A mixin for editing a set of [[docs]] using [[EditorActionEvent]]s */
+export function Editing<TBase extends LitElementConstructor>(Base: TBase) {
+  class EditingElement extends Base {
+    /** The `XMLDocument` currently being edited */
+    get doc(): XMLDocument {
+      return this.docs[this.docName];
+    }
+
+    /** The set of `XMLDocument`s currently loaded */
+    @property({ attribute: false })
+    docs: Record<string, XMLDocument> = {};
+
+    /** The name of the [[`doc`]] currently being edited */
+    @property({ type: String }) docName = '';
+
+    private onOpenDoc(event: OpenDocEvent) {
+      this.docName = event.detail.docName;
+      this.docs[this.docName] = event.detail.doc;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(...args: any[]) {
+      super(...args);
+
+      this.addEventListener('open-doc', this.onOpenDoc);
+    }
+  }
+  return EditingElement;
+}

open-scd.ts

@@ -1,3 +1,4 @@
 import { LitElement } from 'lit';
+import { Editing } from './mixins/Editing.js';
 
-window.customElements.define('open-scd', LitElement);
+window.customElements.define('open-scd', Editing(LitElement));

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "test": "tsc && wtr --coverage",
-    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch --coverage\"",
     "analyze": "cem analyze --litelement",
     "build": "tsc && tsc foundation.ts --declaration --emitDeclarationOnly --outDir dist && npm run analyze -- --exclude dist && typedoc --out dist/doc foundation.ts",
     "prepublish": "npm run build",
@@ -44,6 +44,7 @@
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
+    "parserOptions": { "lib": ["es2018", "dom"] },
     "extends": [
       "@open-wc",
       "prettier"
@@ -55,7 +56,10 @@
     "rules": {
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": [
-        "error"
+        "error",
+        {
+          "destructuredArrayIgnorePattern": "^_"
+        }
       ],
       "import/no-unresolved": "off",
       "import/extensions": [

tsconfig.json

@@ -4,7 +4,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
+    "lib": ["es2018", "dom"],
     "strict": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
@@ -18,5 +18,5 @@
     "declaration": false,
     "incremental": true
   },
-  "include": ["*.ts"]
+  "include": ["**/*.ts"]
 }