fix: reduce expense of preloader on webapp init

by refactoring the load path for mode and badge registration logic

Fixes #3286

Author: starpit

packages/core/src/api/commands.ts

@@ -77,6 +77,7 @@ export {
   KResponse,
   ParsedOptions,
   EvaluatorArgs as Arguments,
+  Event,
   CommandRegistrar as Registrar
 } from '../models/command'
 

packages/core/src/api/selection.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2019 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { clearSelection, currentSelection } from '../webapp/views/sidecar-visibility'

packages/core/src/api/tab.ts

@@ -15,3 +15,4 @@
  */
 
 export { Tab } from '../webapp/tab'
+export { default as TabState } from '../models/tab-state'

packages/core/src/models/mmr/button.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2019 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Tab } from '../../webapp/tab'
+import { MetadataBearing } from '../entity'
+import { MultiModalResponse, Button } from './types'
+import { SidecarMode } from '../../webapp/bottom-stripe'
+
+export function formatButton<T extends MetadataBearing>(
+  tab: Tab,
+  resource: T,
+  { mode, label, command, confirm, kind }: Button
+): SidecarMode {
+  const cmd = typeof command === 'string' ? command : command(tab, resource)
+
+  return {
+    mode,
+    label,
+    flush: 'right',
+    actAsButton: true,
+    direct: confirm ? `confirm "${cmd}"` : cmd,
+    execOptions: {
+      exec: kind === 'view' ? 'qexec' : 'pexec'
+    }
+  }
+}
+
+export function formatButtons(tab: Tab, mmr: MultiModalResponse, buttons: Button[]): SidecarMode[] {
+  return buttons.map(button => formatButton(tab, mmr, button))
+}

packages/core/src/models/mmr/show.ts

@@ -16,12 +16,12 @@
 
 import { Tab } from '../../webapp/tab'
 import { MetadataBearing } from '../entity'
-import { CustomSpec, isCustomSpec, showCustom } from '../../webapp/views/sidecar'
+import { CustomSpec } from '../../webapp/views/sidecar-core'
+import { isCustomSpec } from '../../webapp/views/custom-content'
 import { SidecarMode, addModeButtons } from '../../webapp/bottom-stripe'
 import { isTable, isMultiTable, Table, MultiTable } from '../../webapp/models/table'
-import { formatTable } from '../../webapp/views/table'
 
-import { MultiModalResponse, Button, isButton } from './types'
+import { MultiModalResponse, isButton } from './types'
 import {
   Content,
   hasContent,
@@ -33,6 +33,8 @@ import {
   isFunctionContent
 } from './content-types'
 
+import { formatButtons } from './button'
+
 type Viewable = CustomSpec | HTMLElement | Table | MultiTable
 
 /**
@@ -67,37 +69,17 @@ export async function format<T extends MetadataBearing>(
   }
 }
 
-function wrapTable(tab: Tab, table: Table | MultiTable): HTMLElement {
+async function wrapTable(tab: Tab, table: Table | MultiTable): Promise<HTMLElement> {
   const dom1 = document.createElement('div')
   const dom2 = document.createElement('div')
   dom1.classList.add('scrollable', 'scrollable-auto')
   dom2.classList.add('result-as-table', 'repl-result')
   dom1.appendChild(dom2)
-  formatTable(tab, table, dom2)
-  return dom1
-}
 
-export function formatButton<T extends MetadataBearing>(
-  tab: Tab,
-  resource: T,
-  { mode, label, command, confirm, kind }: Button
-): SidecarMode {
-  const cmd = typeof command === 'string' ? command : command(tab, resource)
-
-  return {
-    mode,
-    label,
-    flush: 'right',
-    actAsButton: true,
-    direct: confirm ? `confirm "${cmd}"` : cmd,
-    execOptions: {
-      exec: kind === 'view' ? 'qexec' : 'pexec'
-    }
-  }
-}
+  const { formatTable } = await import('../../webapp/views/table')
+  formatTable(tab, table, dom2)
 
-function formatButtons(tab: Tab, mmr: MultiModalResponse, buttons: Button[]): SidecarMode[] {
-  return buttons.map(button => formatButton(tab, mmr, button))
+  return dom1
 }
 
 async function renderContent<T extends MetadataBearing>(
@@ -112,7 +94,7 @@ async function renderContent<T extends MetadataBearing>(
     if (!isScalarContent(actualContent)) {
       if (isTable(actualContent) || isMultiTable(actualContent)) {
         return {
-          content: wrapTable(tab, actualContent)
+          content: await wrapTable(tab, actualContent)
         }
       } else {
         return {
@@ -126,7 +108,7 @@ async function renderContent<T extends MetadataBearing>(
     return content
   } else if (isTable(content) || isMultiTable(content)) {
     return {
-      content: wrapTable(tab, content)
+      content: await wrapTable(tab, content)
     }
   }
 }
@@ -179,6 +161,7 @@ export async function show(tab: Tab, mmr: MultiModalResponse) {
 
   if (content) {
     if (isCustomSpec(content)) {
+      const { showCustom } = await import('../../webapp/views/sidecar')
       return showCustom(tab, Object.assign({ modes: modesWithButtons, toolbarText: mmr.toolbarText }, content), {
         leaveBottomStripeAlone: true
       })
@@ -195,6 +178,7 @@ export async function show(tab: Tab, mmr: MultiModalResponse) {
         await renderContent(tab, mmr, content)
       )
 
+      const { showCustom } = await import('../../webapp/views/sidecar')
       return showCustom(tab, custom, { leaveBottomStripeAlone: true })
     }
   } else {

packages/core/src/plugins/preloader.ts

@@ -22,7 +22,8 @@ import { PrescanModel } from './prescan'
 
 import { MetadataBearing } from '../models/entity'
 import { ImplForPlugins } from '../core/command-tree'
-import { registerBadge, registerMode, BadgeRegistration, ModeRegistration } from '../api/registrars'
+import { registerSidecarBadge as registerBadge, BadgeRegistration } from '../webapp/views/registrar/badges'
+import { registerSidecarMode as registerMode, ModeRegistration } from '../webapp/views/registrar/modes'
 import { PreloadRegistration, PreloadRegistrar, CapabilityRegistration } from '../models/plugin'
 
 class PreloaderRegistrarImpl extends ImplForPlugins implements PreloadRegistrar {

packages/core/src/repl/exec.ts

@@ -29,7 +29,7 @@ import { split, patterns } from './split'
 import { ExecType, Evaluator, EvaluatorArgs, KResponse, ParsedOptions, YargsParserFlags } from '../models/command'
 
 import REPL from '../models/repl'
-import { ElementMimic } from '../util/mimic-dom'
+import isFakeDom from '../util/is-fake-dom'
 import {
   RawContent,
   RawResponse,
@@ -40,7 +40,6 @@ import {
 } from '../models/entity'
 import { ExecOptions, DefaultExecOptions, DefaultExecOptionsForTab } from '../models/execOptions'
 import eventBus from '../core/events'
-import historyModel from '../models/history'
 import { CodedError } from '../models/errors'
 import { UsageError, UsageModel, UsageRow } from '../core/usage-error'
 
@@ -246,6 +245,7 @@ class InProcessExecutor implements Executor {
       // add a history entry
       if (!execOptions || !execOptions.noHistory) {
         if (!execOptions || !execOptions.quiet) {
+          const historyModel = (await import('../models/history')).default
           execOptions.history = historyModel.add({
             raw: command
           })
@@ -486,7 +486,7 @@ class InProcessExecutor implements Executor {
             if (!(nActualArgs >= nRequiredArgs && nActualArgs <= nRequiredArgs + nPositionalOptionals)) {
               // yup, scan for implicitOK
               const implicitIdx = required.findIndex(({ implicitOK }) => implicitOK !== undefined)
-              const { currentSelection } = await import('../webapp/views/sidecar') // FIXME
+              const { currentSelection } = await import('../webapp/views/sidecar-visibility') // FIXME
               const selection = currentSelection(tab)
 
               let nActualArgsWithImplicit = nActualArgs
@@ -658,10 +658,7 @@ class InProcessExecutor implements Executor {
             // response=true means we are in charge of 'ok'
             if (
               !render &&
-              ((execOptions && execOptions.replSilence) ||
-                nested ||
-                isLowLevelLoop(response) ||
-                ElementMimic.isFakeDom(block))
+              ((execOptions && execOptions.replSilence) || nested || isLowLevelLoop(response) || isFakeDom(block))
             ) {
               // the parent exec will deal with the repl
               debug('passing control back to prompt processor or headless')

packages/core/src/util/is-fake-dom.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2019 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * This is a cheap form of isFakeDom for use by repl/exec.ts
+ *
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function isFakeDom(dom: any): boolean {
+  return dom && Object.prototype.hasOwnProperty.call(dom, '_isFakeDom')
+}

packages/core/src/webapp/bottom-stripe.ts

@@ -20,8 +20,8 @@ import { Tab } from './cli'
 import { removeAllDomChildren } from './util/dom'
 import { isTable, isMultiTable, Table, MultiTable } from './models/table'
 import { Capturable } from './models/capturable'
-import { formatTable } from './views/table'
-import { getSidecar, showCustom, isCustomSpec, CustomSpec, insertCustomContent } from './views/sidecar'
+import { CustomSpec, getSidecar } from './views/sidecar-core'
+import { isCustomSpec } from './views/custom-content'
 import sidecarSelector from './views/sidecar-selector'
 import { ExecOptions } from '../models/execOptions'
 import { apply as addRelevantModes } from './views/registrar/modes'
@@ -448,13 +448,15 @@ const _addModeButton = (
         }
       }
 
-      const present = (view: Entity) => {
+      const present = async (view: Entity) => {
         if (typeof view === 'string') {
           const dom = document.createElement('div')
           dom.classList.add('padding-content', 'scrollable', 'scrollable-auto')
           dom.innerText = view
+          const { insertCustomContent } = await import('./views/sidecar')
           insertCustomContent(tab, dom)
         } else if (isStringWithOptionalContentType(view) && isMetadataBearing(entity)) {
+          const { showCustom } = await import('./views/sidecar')
           showCustom(
             tab,
             {
@@ -469,16 +471,20 @@ const _addModeButton = (
           const dom = document.createElement('div')
           dom.classList.add('padding-content', 'scrollable', 'scrollable-auto')
           dom.appendChild(view)
+          const { insertCustomContent } = await import('./views/sidecar')
           insertCustomContent(tab, dom)
         } else if (isCustomSpec(view)) {
+          const { showCustom } = await import('./views/sidecar')
           showCustom(tab, view, { leaveBottomStripeAlone: leaveBottomStripeAlone })
         } else if (isTable(view) || isMultiTable(view)) {
           const dom1 = document.createElement('div')
           const dom2 = document.createElement('div')
           dom1.classList.add('scrollable', 'scrollable-auto')
           dom2.classList.add('result-as-table', 'repl-result')
           dom1.appendChild(dom2)
+          const { formatTable } = await import('./views/table')
           formatTable(tab, view, dom2, { usePip: true })
+          const { insertCustomContent } = await import('./views/sidecar')
           insertCustomContent(tab, dom1)
         }
       }
@@ -510,8 +516,9 @@ const _addModeButton = (
               changeActiveButton()
             }
 
-            present(view)
+            await present(view)
           } else if (!isToggle(view) && isCustomSpec(view)) {
+            const { showCustom } = await import('./views/sidecar')
             showCustom(tab, view, { leaveBottomStripeAlone: leaveBottomStripeAlone })
           } else if (!leaveBottomStripeAlone) {
             changeActiveButton()
@@ -534,7 +541,7 @@ const _addModeButton = (
         const { format } = await import('../models/mmr/show')
         const view = await format(tab, entity as MetadataBearing, opts)
         changeActiveButton()
-        present(view)
+        await present(view)
       }
     }
   }

packages/core/src/webapp/popup.ts

@@ -21,7 +21,6 @@ debug('loading')
 import { getCurrentTab } from './tab'
 import { SidecarMode } from './bottom-stripe'
 
-import { prettyPrintTime } from './util/time'
 import { removeAllDomChildren } from './util/dom'
 import { Badge } from './views/badge'
 import Presentation from './views/presentation'
@@ -62,6 +61,8 @@ export const renderPopupContent = async (
     !_prettyType || _prettyType === 'custom' ? process.env.KUI_DEFAULT_PRETTY_TYPE || command : _prettyType
   debug('renderPopupContent', command, entity, prettyType)
 
+  const { prettyPrintTime } = await import('./util/time')
+
   // Last updated... text
   const subtext = document.createElement('div')
   subtext.appendChild(document.createTextNode('Last updated '))