Adding support for optional chaining

Author: Arne Hassel

.babelrc

@@ -5,6 +5,7 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-transform-async-to-generator",
     "@babel/plugin-transform-runtime"
   ]

package-lock.json

@@ -69,6 +69,7 @@
     "@babel/cli": "^7.6.2",
     "@babel/core": "^7.6.2",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
     "@babel/plugin-transform-async-to-generator": "^7.5.0",
     "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.6.2",

package.json

@@ -148,23 +148,23 @@ export function tabWidget (options: TabWidgetOptions) {
       div.setAttribute('style', selectedStyle)
       if (!ele.bodyTR) return
       ele.bodyTR.setAttribute('style', shownStyle)
-      let bodyMain = ele.bodyTR.children[0] as ContainerElement
-      if (!bodyMain) {
+      const bodyMain = getOrCreateContainerElement(ele)
+      if (options.renderTabSettings && e.altKey && ele.subject && bodyMain.asSettings !== true) {
         bodyMain = ele.bodyTR.appendChild(dom.createElement('main'))
         bodyMain.setAttribute('style', bodyMainStyle)
       }
       if (options.renderTabSettings && e.altKey && ele.subject) {
         if (bodyMain.asSettings !== true) {
-          bodyMain.innerHTML = 'loading settings ...' + item
-          options.renderTabSettings(bodyMain, ele.subject)
-          bodyMain.asSettings = true
-        }
+        bodyMain.innerHTML = 'loading settings ...' + item
+        options.renderTabSettings(bodyMain, ele.subject)
+        bodyMain.asSettings = true
+      } else if (options.renderMain && ele.subject && bodyMain.asSettings !== false) {
       } else if (options.renderMain && ele.subject) {
         if (bodyMain.asSettings !== false) {
-          bodyMain.innerHTML = 'loading item ...' + item
-          options.renderMain(bodyMain, ele.subject)
-          bodyMain.asSettings = false
-        }
+        bodyMain.innerHTML = 'loading item ...' + item
+        options.renderMain(bodyMain, ele.subject)
+        bodyMain.asSettings = false
+      }
       }
     })
 
@@ -174,6 +174,14 @@ export function tabWidget (options: TabWidgetOptions) {
       div.textContent = label(item)
     }
     return ele
+
+    function getOrCreateContainerElement (ele: TabElement): ContainerElement {
+      const bodyMain = ele.bodyTR?.children[0] as ContainerElement
+      if (bodyMain) return bodyMain
+      const newBodyMain = ele.bodyTR!.appendChild(dom.createElement('main'))
+      newBodyMain.setAttribute('style', bodyMainStyle)
+      return newBodyMain
+    }
   }
 
   // @@ Use common one from utils?