Use private methods in TabGroup constructor

dist/electron-tabs.d.ts

@@ -38,6 +38,7 @@ export class TabGroup extends HTMLElement {
     on(type: string, fn: (...detail: any[]) => void): void;
     once(type: string, fn: (detail: string) => void): void;
     connectedCallback(): void;
+    initSortable(): void;
     setDefaultTab(tab: TabOptions): void;
     addTab(args?: TabOptions | ((tabGroup: TabGroup) => TabOptions)): Tab;
     getTab(id: number): Tab;
@@ -81,7 +82,7 @@ export class Tab extends EventTarget {
     getBadge(): string;
     setIcon(iconURL: string, icon: string): this;
     getIcon(): string;
-    setPosition(newPosition: number): void;
+    setPosition(newPosition: number): this;
     getPosition(fromRight?: boolean): number;
     activate(): this;
     show(flag?: boolean): this;

dist/electron-tabs.js

@@ -2534,7 +2534,33 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
             viewClass: this.getAttribute("view-class") || "etabs-view",
             visibilityThreshold: Number(this.getAttribute("visibility-threshold")) || 0
         };
-        // Create custom element
+        this.tabs = [];
+        this.newTabId = 0;
+        this.createComponent();
+        this.initVisibility();
+        if (this.options.sortable) this.initSortable();
+        this.emit("ready", this);
+    }
+    emit(type, ...args) {
+        return $eda442ba39f881a8$var$emit(this, type, args);
+    }
+    on(type, fn) {
+        return $eda442ba39f881a8$var$on(this, type, fn);
+    }
+    once(type, fn) {
+        return $eda442ba39f881a8$var$on(this, type, fn, {
+            once: true
+        });
+    }
+    connectedCallback() {
+        // Support custom styles
+        const style = this.querySelector("style");
+        if (style) {
+            const clone = style.cloneNode(true);
+            this.shadow.appendChild(clone);
+        }
+    }
+    createComponent() {
         const shadow = this.attachShadow({
             mode: "open"
         });
@@ -2552,6 +2578,12 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
         buttonContainer.setAttribute("class", "etabs-buttons");
         tabgroup.appendChild(buttonContainer);
         this.buttonContainer = buttonContainer;
+        if (this.options.newTabButton) {
+            const button = this.buttonContainer.appendChild(document.createElement("button"));
+            button.classList.add(`${this.options.tabClass}-button-new`);
+            button.innerHTML = this.options.newTabButtonText;
+            button.addEventListener("click", this.addTab.bind(this, undefined), false);
+        }
         const viewContainer = document.createElement("div");
         viewContainer.setAttribute("class", "etabs-views");
         wrapper.appendChild(viewContainer);
@@ -2560,49 +2592,6 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
         style.textContent = (/*@__PURE__*/$parcel$interopDefault($0648b347057451f2$exports));
         shadow.appendChild(style);
         shadow.appendChild(wrapper);
-        this.tabs = [];
-        this.newTabId = 0;
-        this.initNewTabButton();
-        this.initVisibility();
-        // Init sortable tabs
-        if (this.options.sortable) {
-            const initSortable = ()=>{
-                const options = Object.assign({
-                    direction: "horizontal",
-                    animation: 150,
-                    swapThreshold: 0.20
-                }, this.options.sortableOptions);
-                new $64afbd09cd65a300$export$2e2bcd8739ae039(this.tabContainer, options);
-            };
-            if ($64afbd09cd65a300$export$2e2bcd8739ae039) initSortable();
-            else document.addEventListener("DOMContentLoaded", initSortable);
-        }
-        this.emit("ready", this);
-    }
-    emit(type, ...args) {
-        return $eda442ba39f881a8$var$emit(this, type, args);
-    }
-    on(type, fn) {
-        return $eda442ba39f881a8$var$on(this, type, fn);
-    }
-    once(type, fn) {
-        return $eda442ba39f881a8$var$on(this, type, fn, {
-            once: true
-        });
-    }
-    connectedCallback() {
-        const style = this.querySelector("style");
-        if (style) {
-            const clone = style.cloneNode(true);
-            this.shadow.appendChild(clone);
-        }
-    }
-    initNewTabButton() {
-        if (!this.options.newTabButton) return;
-        const button = this.buttonContainer.appendChild(document.createElement("button"));
-        button.classList.add(`${this.options.tabClass}-button-new`);
-        button.innerHTML = this.options.newTabButtonText;
-        button.addEventListener("click", this.addTab.bind(this, undefined), false);
     }
     initVisibility() {
         function toggleTabsVisibility(tab, tabGroup) {
@@ -2614,6 +2603,18 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
         this.on("tab-added", toggleTabsVisibility);
         this.on("tab-removed", toggleTabsVisibility);
     }
+    initSortable() {
+        const createNewSortable = ()=>{
+            const options = Object.assign({
+                direction: "horizontal",
+                animation: 150,
+                swapThreshold: 0.20
+            }, this.options.sortableOptions);
+            new $64afbd09cd65a300$export$2e2bcd8739ae039(this.tabContainer, options);
+        };
+        if ($64afbd09cd65a300$export$2e2bcd8739ae039) createNewSortable();
+        else document.addEventListener("DOMContentLoaded", createNewSortable);
+    }
     setDefaultTab(tab) {
         this.options.defaultTab = tab;
     }

src/index.ts

@@ -72,7 +72,40 @@ class TabGroup extends HTMLElement {
       visibilityThreshold: Number(this.getAttribute("visibility-threshold")) || 0
     };
 
-    // Create custom element
+    this.tabs = [];
+    this.newTabId = 0;
+
+    this.createComponent();
+    this.initVisibility();
+    if (this.options.sortable) {
+      this.initSortable();
+    }
+
+    this.emit("ready", this);
+  }
+
+  emit(type: string, ...args: any[]) {
+    return emit(this, type, args);
+  }
+
+  on(type: string, fn: (...detail: any[]) => void) {
+    return on(this, type, fn);
+  }
+
+  once(type: string, fn: (detail: string) => void) {
+    return on(this, type, fn, { once: true });
+  }
+
+  connectedCallback() {
+    // Support custom styles
+    const style = this.querySelector("style");
+    if (style) {
+      const clone = style.cloneNode(true);
+      this.shadow.appendChild(clone);
+    }
+  }
+
+  private createComponent() {
     const shadow = this.attachShadow({mode: "open"});
     this.shadow = shadow;
 
@@ -93,6 +126,13 @@ class TabGroup extends HTMLElement {
     tabgroup.appendChild(buttonContainer);
     this.buttonContainer = buttonContainer;
 
+    if (this.options.newTabButton) {
+      const button = this.buttonContainer.appendChild(document.createElement("button"));
+      button.classList.add(`${this.options.tabClass}-button-new`);
+      button.innerHTML = this.options.newTabButtonText;
+      button.addEventListener("click", this.addTab.bind(this, undefined), false);
+    }
+
     const viewContainer = document.createElement("div");
     viewContainer.setAttribute("class", "etabs-views");
     wrapper.appendChild(viewContainer);
@@ -103,59 +143,6 @@ class TabGroup extends HTMLElement {
 
     shadow.appendChild(style);
     shadow.appendChild(wrapper);
-
-    this.tabs = [];
-    this.newTabId = 0;
-    this.initNewTabButton();
-    this.initVisibility();
-
-    // Init sortable tabs
-    if (this.options.sortable) {
-      const initSortable = () => {
-        const options = Object.assign({
-          direction: "horizontal",
-          animation: 150,
-          swapThreshold: 0.20
-        }, this.options.sortableOptions);
-        new Sortable(this.tabContainer, options);
-      };
-
-      if (Sortable) {
-        initSortable();
-      } else {
-        document.addEventListener("DOMContentLoaded", initSortable);
-      }
-    }
-
-    this.emit("ready", this);
-  }
-
-  emit(type: string, ...args: any[]) {
-    return emit(this, type, args);
-  }
-
-  on(type: string, fn: (...detail: any[]) => void) {
-    return on(this, type, fn);
-  }
-
-  once(type: string, fn: (detail: string) => void) {
-    return on(this, type, fn, { once: true });
-  }
-
-  connectedCallback() {
-    const style = this.querySelector("style");
-    if (style) {
-      const clone = style.cloneNode(true);
-      this.shadow.appendChild(clone);
-    }
-  }
-
-  private initNewTabButton() {
-    if (!this.options.newTabButton) return;
-    const button = this.buttonContainer.appendChild(document.createElement("button"));
-    button.classList.add(`${this.options.tabClass}-button-new`);
-    button.innerHTML = this.options.newTabButtonText;
-    button.addEventListener("click", this.addTab.bind(this, undefined), false);
   }
 
   private initVisibility() {
@@ -173,6 +160,23 @@ class TabGroup extends HTMLElement {
     this.on("tab-removed", toggleTabsVisibility);
   }
 
+  initSortable() {
+    const createNewSortable = () => {
+      const options = Object.assign({
+        direction: "horizontal",
+        animation: 150,
+        swapThreshold: 0.20
+      }, this.options.sortableOptions);
+      new Sortable(this.tabContainer, options);
+    };
+
+    if (Sortable) {
+      createNewSortable();
+    } else {
+      document.addEventListener("DOMContentLoaded", createNewSortable);
+    }
+  }
+
   setDefaultTab(tab: TabOptions) {
     this.options.defaultTab = tab;
   }