Move to Custom Elements v1 API

Thanks to the upgrade to Chromium 54 in Electron 1.5, we now have access to it
dschaefer · Feb 10, 2017 · 8514f8d · 8514f8d
1 parent 96f218a
commit 8514f8d
Show file tree

Hide file tree

Showing 15 changed files with 89 additions and 105 deletions.
diff --git a/package.json b/package.json
@@ -12,18 +12,17 @@
   "author": "Doug Schaefer and others",
   "license": "EPL-1.0",
   "devDependencies": {
-    "electron": "^1.4.12",
-    "typescript": "^2.1.4",
-    "@types/node": "^6.0.55"
+    "electron": "1.5",
+    "typescript": "2.1",
+    "@types/node": "^6.0.55",
+    "@types/d3": "^4.4.0",
+    "@types/three": "^0.81.0"
   },
   "dependencies": {
-    "@types/d3": "^4.4.0",
-    "@types/es6-promise": "0.0.32",
-    "@types/three": "^0.81.0",
     "app-module-path": "^2.2.0",
     "d3": "^4.4.1",
     "font-awesome": "^4.7.0",
-    "monaco-editor": "^0.7.0",
+    "monaco-editor": "0.8",
     "three": "^0.83.0"
   }
 }
diff --git a/src/components/FileExplorer.ts b/src/components/FileExplorer.ts
@@ -8,17 +8,14 @@
 import * as electron from 'electron';
 import * as path from 'path';
 import * as fs from 'fs';
+import customElements from 'ui/customElements';
 
-export default class FileExplorer extends HTMLUListElement {
+export default class FileExplorer extends HTMLElement {
     static tag = 'eclipse-fileexplorer';
     static folderClosed = 'fa-folder';
     static folderOpen = 'fa-folder-open';
     static fileIcon = 'fa-file-o';
 
-    static createElement(): FileExplorer {
-        return <FileExplorer> document.createElement(FileExplorer.tag);
-    }
-
     clickNode(e: MouseEvent) {
         const entry = (<HTMLElement> e.currentTarget);
         const li = entry.parentElement;
@@ -79,7 +76,7 @@ export default class FileExplorer extends HTMLUListElement {
         return li;
     }
 
-    attachedCallback(): void {
+    connectedCallback(): void {
         this.style.overflow = 'auto';
         this.style.height = '100%';
         this.style.width = '20%';
@@ -95,4 +92,4 @@ export default class FileExplorer extends HTMLUListElement {
     }
 }
 
-(<any> document).registerElement(FileExplorer.tag, FileExplorer);
+customElements.define(FileExplorer.tag, FileExplorer);
diff --git a/src/components/Monaco.ts b/src/components/Monaco.ts
@@ -7,7 +7,10 @@
  *******************************************************************************/
 /// <reference path="../../node_modules/monaco-editor/monaco.d.ts" />
 import { Editor } from 'ui/Editor';
+import customElements from 'ui/customElements';
+
 import * as loader from 'monaco-editor/min/vs/loader';
+
 import * as electron from 'electron';
 import * as path from 'path';
 import * as fs from 'fs';
@@ -24,10 +27,6 @@ export default class MonacoEditor extends Editor {
 
     editor: monaco.editor.IStandaloneCodeEditor;
 
-    static createElement(): MonacoEditor {
-        return <MonacoEditor> document.createElement(MonacoEditor.tag);
-    }
-
     openFile(filePath: string) {
         super.openFile(filePath);
 
@@ -66,8 +65,12 @@ export default class MonacoEditor extends Editor {
             case '.json':
                 language = 'json';
                 break;
-            default:
-                language = 'javascript';
+            case '.ts':
+                language = 'typescript';
+                break;
+            case '.md':
+                language = 'markdown';
+                break;
         }
 
         this.editor = monaco.editor.create(this, {
@@ -77,10 +80,10 @@ export default class MonacoEditor extends Editor {
         });
     }
 
-    attachedCallback(): void {
+    connectedCallback(): void {
         this.style.height = '100%';
         this.style.width = '100%';
     }
 }
 
-(<any> document).registerElement(MonacoEditor.tag, MonacoEditor);
+customElements.define(MonacoEditor.tag, MonacoEditor);
diff --git a/src/components/SplitPane.ts b/src/components/SplitPane.ts
@@ -5,6 +5,8 @@
  * which accompanies this distribution, and is available at
  * http://www.eclipse.org/legal/epl-v10.html
  *******************************************************************************/
+import customElements from 'ui/customElements';
+
 class Splitter extends HTMLElement {
     static tag = 'eclipse-splitter';
 
@@ -13,10 +15,6 @@ class Splitter extends HTMLElement {
     _move: any;
     _stop: any;
 
-    static createElement(): Splitter {
-        return (<any> document).createElement(Splitter.tag);
-    }
-
     getLeft() {
         return <HTMLElement> this.previousElementSibling;
     }
@@ -25,7 +23,9 @@ class Splitter extends HTMLElement {
         return <HTMLElement> this.nextElementSibling;
     }
 
-    createdCallback() {
+    constructor() {
+        super();
+
         this.dragging = false;
 
         this._move = this.move.bind(this);
@@ -55,7 +55,7 @@ class Splitter extends HTMLElement {
         }
     }
 
-    attachedCallback() {
+    connectedCallback() {
         this.style.width = '0';
         this.style.padding = '1px';
         this.style.background = '#ccc';
@@ -72,16 +72,12 @@ class Splitter extends HTMLElement {
     }
 }
 
-(<any> document).registerElement(Splitter.tag, Splitter);
+customElements.define(Splitter.tag, Splitter);
 
 export default class SplitPane extends HTMLElement {
     static tag = 'eclipse-splitpane';
 
-    static createElement(): SplitPane {
-        return <SplitPane> document.createElement(SplitPane.tag);
-    }
-
-    attachedCallback() {
+    connectedCallback() {
         this.style.display = 'flex';
         this.style.overflow = 'hidden';
         this.style.width = '100%';
@@ -93,10 +89,10 @@ export default class SplitPane extends HTMLElement {
         }
 
         for (var i = 1; i < kids.length; i++) {
-            const splitter = Splitter.createElement();
+            const splitter = new Splitter();
             this.insertBefore(splitter, kids[i]);
         }
     }
 }
 
-(<any> document).registerElement(SplitPane.tag, SplitPane);
+customElements.define(SplitPane.tag, SplitPane);
diff --git a/src/components/TabFolder.ts b/src/components/TabFolder.ts
@@ -5,6 +5,7 @@
  * which accompanies this distribution, and is available at
  * http://www.eclipse.org/legal/epl-v10.html
  *******************************************************************************/
+import customElements from 'ui/customElements';
 
 export interface TabItem extends HTMLElement {
     // The element to show in the tab header for this tab item
@@ -14,15 +15,11 @@ export interface TabItem extends HTMLElement {
     close(): boolean;
 }
 
-class TabElement extends HTMLLIElement {
+class TabElement extends HTMLElement {
     static tag = 'eclipse-tab';
 
     tabItem: HTMLElement;
 
-    static createElement(): TabElement {
-        return <TabElement> document.createElement(TabElement.tag);
-    }
-
     activateTab() {
         this.tabItem.style.display = 'block';
         this.classList.add(TabFolder.classActive);
@@ -33,7 +30,7 @@ class TabElement extends HTMLLIElement {
         this.classList.remove(TabFolder.classActive);
     }
 
-    attachedCallback(): void {
+    connectedCallback(): void {
         if (!this.tabItem) {
             return;
         }
@@ -65,7 +62,7 @@ class TabElement extends HTMLLIElement {
     }
 }
 
-(<any> document).registerElement(TabElement.tag, TabElement);
+customElements.define(TabElement.tag, TabElement);
 
 export default class TabFolder extends HTMLElement {
     static tag = 'eclipse-tab-folder';
@@ -74,16 +71,12 @@ export default class TabFolder extends HTMLElement {
     static classActive = 'eclipse-tab-active';
     static classHeader = 'eclipse-tab-header';
 
-    static createElement(): TabFolder {
-        return <TabFolder> document.createElement(TabFolder.tag);
-    }
-
     currentTab: TabElement;
 
     private addItem(element: HTMLElement) {
         const header = this.children[0];
 
-        const tab = TabElement.createElement();
+        const tab = new TabElement();
         tab.tabItem = element;
         tab.addEventListener('click', e => {
             this.activateTab(tab);
@@ -118,7 +111,7 @@ export default class TabFolder extends HTMLElement {
         }
     }
 
-    attachedCallback(): void {
+    connectedCallback(): void {
         const header = document.createElement('ul');
         header.classList.add(TabFolder.classHeader);
 
@@ -147,4 +140,4 @@ export default class TabFolder extends HTMLElement {
     }
 }
 
-(<any> document).registerElement(TabFolder.tag, TabFolder);
+customElements.define(TabFolder.tag, TabFolder);
diff --git a/src/extensions/code/CodePage.ts b/src/extensions/code/CodePage.ts
@@ -6,6 +6,7 @@
  * http://www.eclipse.org/legal/epl-v10.html
  *******************************************************************************/
 import { Editor, EditorTab } from 'ui/Editor';
+import customElements from 'ui/customElements';
 
 import SplitPane from 'components/SplitPane';
 import FileExporer from 'components/FileExplorer';
@@ -16,10 +17,6 @@ import * as path from 'path';
 export default class CodePage extends HTMLElement {
     static tag = 'eclipse-codepage';
 
-    static createElement() : CodePage {
-        return <CodePage> document.createElement(CodePage.tag);
-    }
-
     tabList: HTMLUListElement;
     editorSpace: HTMLElement;
     activeEditor: Editor;
@@ -36,7 +33,7 @@ export default class CodePage extends HTMLElement {
     openEditor(filePath: string) {
         const name = path.basename(filePath);
 
-        const monaco = MonacoEditor.createElement();
+        const monaco = new MonacoEditor();
         this.editorSpace.appendChild(monaco);
         monaco.openFile(filePath);
         monaco.addEventListener('close-editor', (e: CustomEvent) => {
@@ -62,10 +59,10 @@ export default class CodePage extends HTMLElement {
         this.activateEditor(monaco);
     }
 
-    attachedCallback(): void {
-        const splitPane = SplitPane.createElement();
+    connectedCallback(): void {
+        const splitPane = new SplitPane();
 
-        const fileExplorer = FileExporer.createElement();
+        const fileExplorer = new FileExporer();
         splitPane.appendChild(fileExplorer);
 
         fileExplorer.addEventListener('open-file', (e: CustomEvent) => {
@@ -96,4 +93,4 @@ export default class CodePage extends HTMLElement {
     }
 }
 
-(<any> document).registerElement(CodePage.tag, CodePage);
+customElements.define(CodePage.tag, CodePage);
diff --git a/src/extensions/code/CodeUI.ts b/src/extensions/code/CodeUI.ts
@@ -6,7 +6,7 @@ let codeUIExtension = new UIExtension();
 codeUIExtension.pageProviders['code-page'] = {
     label: 'Code',
     create(): HTMLElement {
-        return CodePage.createElement();
+        return new CodePage();
     }
 }
 

diff --git a/src/pages/Demo3DPage.ts b/src/pages/Demo3DPage.ts
@@ -1,12 +1,9 @@
+import customElements from 'ui/customElements';
 import * as THREE from 'three';
 
 export default class Demo3DPage extends HTMLElement {
     static tag = 'eclipse-demo3d';
 
-    static createElement(): Demo3DPage {
-        return <Demo3DPage> document.createElement(Demo3DPage.tag);
-    }
-
     camera: THREE.PerspectiveCamera;
     scene: THREE.Scene;
     raycaster: THREE.Raycaster;
@@ -16,7 +13,7 @@ export default class Demo3DPage extends HTMLElement {
     radius: number;
     theta: number;
 
-    attachedCallback(): void {
+    connectedCallback(): void {
         this.style.backgroundColor = '#f0f0f0';
         this.radius = 100;
         this.theta = 0;
@@ -101,4 +98,4 @@ export default class Demo3DPage extends HTMLElement {
     }
 }
 
-(<any> document).registerElement(Demo3DPage.tag, Demo3DPage);
+customElements.define(Demo3DPage.tag, Demo3DPage);
diff --git a/src/pages/DemoD3Page.ts b/src/pages/DemoD3Page.ts
@@ -1,15 +1,12 @@
+import customElements from 'ui/customElements';
 import * as d3 from 'd3';
 
 export default class DemoD3Page extends HTMLElement {
     static tag = 'eclipse-demod3';
 
-    static createElement(): DemoD3Page {
-        return <DemoD3Page> document.createElement(DemoD3Page.tag);
-    }
-
     svg: HTMLElement;
 
-    attachedCallback() {
+    connectedCallback() {
         this.svg = <HTMLElement> d3.select(this).append('svg')
             .attr('width', '100%')
             .attr('height', '100%')
@@ -41,4 +38,4 @@ export default class DemoD3Page extends HTMLElement {
     }
 }
 
-(<any> document).registerElement(DemoD3Page.tag, DemoD3Page);
+customElements.define(DemoD3Page.tag, DemoD3Page);
diff --git a/src/pages/GithubPage.ts b/src/pages/GithubPage.ts
@@ -5,15 +5,12 @@
  * which accompanies this distribution, and is available at
  * http://www.eclipse.org/legal/epl-v10.html
  *******************************************************************************/
+import customElements from 'ui/customElements';
 
 export default class GithubPage extends HTMLElement {
     static tag = 'eclipse-github';
 
-    static createElement(): GithubPage {
-        return <GithubPage> document.createElement(GithubPage.tag);
-    }
-
-    attachedCallback(): void {
+    connectedCallback(): void {
         const home = 'https://github.com/dschaefer/eclipse-two';
         const controls = document.createElement('div');
         controls.id = 'github-controls';
@@ -87,4 +84,4 @@ export default class GithubPage extends HTMLElement {
     }
 }
 
-(<any> document).registerElement(GithubPage.tag, GithubPage);
+customElements.define(GithubPage.tag, GithubPage);