Heavily defer requires for faster activation time

lib/popover-component.js

@@ -1,9 +1,9 @@
 const etch = require('etch')
 const $ = etch.dom
-const PortalListComponent = require('./portal-list-component')
-const SignInComponent = require('./sign-in-component')
-const PackageOutdatedComponent = require('./package-outdated-component')
-const PackageInitializationErrorComponent = require('./package-initialization-error-component')
+let PortalListComponent = null
+let SignInComponent = null
+let PackageOutdatedComponent = null
+let PackageInitializationErrorComponent = null
 
 module.exports =
 class PopoverComponent {
@@ -21,22 +21,25 @@ class PopoverComponent {
 
  render () {
  const {
- isClientOutdated, initializationError,
+ isClientOutdated, hasInitializationError,
  authenticationProvider, portalBindingManager,
  commandRegistry, credentialCache, clipboard, workspace, notificationManager
  } = this.props
 
  let activeComponent
- if (isClientOutdated) {
+ if (isClientOutdated()) {
+ if (!PackageOutdatedComponent) PackageOutdatedComponent = require('./package-outdated-component')
  activeComponent = $(PackageOutdatedComponent, {
  ref: 'packageOutdatedComponent',
  workspace
  })
- } else if (initializationError) {
+ } else if (hasInitializationError()) {
+ if (!PackageInitializationErrorComponent) PackageInitializationErrorComponent = require('./package-initialization-error-component')
  activeComponent = $(PackageInitializationErrorComponent, {
  ref: 'packageInitializationErrorComponent'
  })
- } else if (this.props.authenticationProvider.isSignedIn()) {
+ } else if (authenticationProvider.isSignedIn()) {
+ if (!PortalListComponent) PortalListComponent = require('./portal-list-component')
  activeComponent = $(PortalListComponent, {
  ref: 'portalListComponent',
  localUserIdentity: authenticationProvider.getIdentity(),
@@ -46,6 +49,7 @@ class PopoverComponent {
  notificationManager
  })
  } else {
+ if (!SignInComponent) SignInComponent = require('./sign-in-component')
  activeComponent = $(SignInComponent, {
  ref: 'signInComponent',
  authenticationProvider,

lib/portal-status-bar-indicator.js

@@ -1,20 +1,13 @@
 const {CompositeDisposable} = require('atom')
-const PopoverComponent = require('./popover-component')
+let PopoverComponent = null
 
 module.exports =
 class PortalStatusBarIndicator {
  constructor (props) {
  this.props = props
  this.subscriptions = new CompositeDisposable()
  this.element = buildElement(props)
- this.popoverComponent = new PopoverComponent(props)
-
- if (props.portalBindingManager) {
- this.portalBindingManager = props.portalBindingManager
- this.subscriptions.add(this.portalBindingManager.onDidChange(() => {
- this.updatePortalStatus()
- }))
- }
+ this.element.onclick = this.handleInitialClick.bind(this)
  }
 
  attach () {
@@ -23,15 +16,6 @@ class PortalStatusBarIndicator {
  item: this,
  priority: PRIORITY_BETWEEN_BRANCH_NAME_AND_GRAMMAR
  })
- this.tooltip = this.props.tooltipManager.add(
- this.element,
- {
- item: this.popoverComponent,
- class: 'TeletypePopoverTooltip',
- trigger: 'click',
- placement: 'top'
- }
- )
  }
 
  destroy () {
@@ -49,6 +33,7 @@ class PortalStatusBarIndicator {
  }
 
  isPopoverVisible () {
+ if (!this.popoverComponent) return false
  return document.contains(this.popoverComponent.element)
  }
 
@@ -60,13 +45,47 @@ class PortalStatusBarIndicator {
  this.element.classList.remove('transmitting')
  }
  }
+
+ async handleInitialClick () {
+ this.initialOpenPromise = new Promise((resolve, reject) => this.resolveInitialOpenPromise = resolve)
+ this.element.onclick = null
+ this.portalBindingManager = await this.props.getPortalBindingManager()
+ if (this.portalBindingManager) {
+ this.subscriptions.add(this.portalBindingManager.onDidChange(() => {
+ this.updatePortalStatus()
+ }))
+ }
+
+ this.authenticationProvider = await this.props.getAuthenticationProvider()
+ if (this.authenticationProvider) await this.authenticationProvider.signInUsingSavedToken()
+
+ if (!PopoverComponent) PopoverComponent = require('./popover-component')
+ this.popoverComponent = new PopoverComponent(Object.assign(
+ {portalBindingManager: this.portalBindingManager},
+ {authenticationProvider: this.authenticationProvider},
+ this.props
+ ))
+ this.tooltip = this.props.tooltipManager.add(
+ this.element,
+ {
+ item: this.popoverComponent,
+ class: 'TeletypePopoverTooltip',
+ trigger: 'click',
+ placement: 'top'
+ }
+ )
+
+ if (this.props.isClientOutdated()) this.element.classList.add('outdated')
+ if (this.props.hasInitializationError()) this.element.classList.add('initialization-error')
+
+ this.element.click()
+ this.resolveInitialOpenPromise(this.popoverComponent)
+ }
 }
 
-function buildElement (props) {
+function buildElement () {
  const anchor = document.createElement('a')
  anchor.classList.add('PortalStatusBarIndicator', 'inline-block')
- if (props.isClientOutdated) anchor.classList.add('outdated')
- if (props.initializationError) anchor.classList.add('initialization-error')
 
  const icon = document.createElement('span')
  icon.classList.add('icon', 'icon-radio-tower')

lib/teletype-package.js

@@ -1,9 +1,9 @@
-const {TeletypeClient, Errors} = require('@atom/teletype-client')
 const {CompositeDisposable} = require('atom')
-const PortalBindingManager = require('./portal-binding-manager')
-const PortalStatusBarIndicator = require('./portal-status-bar-indicator')
-const AuthenticationProvider = require('./authentication-provider')
-const CredentialCache = require('./credential-cache')
+let [TeletypeClient, Errors] = []
+let PortalBindingManager = null
+let PortalStatusBarIndicator = null
+let AuthenticationProvider = null
+let CredentialCache = null
 
 module.exports =
 class TeletypePackage {
@@ -23,21 +23,13 @@ class TeletypePackage {
  this.pusherOptions = pusherOptions
  this.baseURL = baseURL
  this.tetherDisconnectWindow = tetherDisconnectWindow
- this.credentialCache = credentialCache || new CredentialCache()
- this.client = new TeletypeClient({
- pusherKey: this.pusherKey,
- pusherOptions: this.pusherOptions,
- baseURL: this.baseURL,
- pubSubGateway: this.pubSubGateway,
- tetherDisconnectWindow: this.tetherDisconnectWindow
- })
- this.client.onConnectionError(this.handleConnectionError.bind(this))
+ this.credentialCache = credentialCache
  this.portalBindingManagerPromise = null
  }
 
  activate () {
- console.log('teletype: Using pusher key:', this.pusherKey)
- console.log('teletype: Using base URL:', this.baseURL)
+ // console.log('teletype: Using pusher key:', this.pusherKey)
+ // console.log('teletype: Using base URL:', this.baseURL)
 
  this.subscriptions = new CompositeDisposable()
 
@@ -53,10 +45,6 @@ class TeletypePackage {
  this.subscriptions.add(this.commandRegistry.add('atom-workspace.teletype-Host', {
  'teletype:close-portal': () => this.closeHostPortal()
  }))
-
- // Initiate sign-in, which will continue asynchronously, since we don't want
- // to block here.
- this.signInUsingSavedToken()
  }
 
  async deactivate () {
@@ -65,11 +53,12 @@ class TeletypePackage {
 
  if (this.portalBindingManagerPromise) {
  const manager = await this.portalBindingManagerPromise
- await manager.dispose()
+ if (manager) await manager.dispose()
  }
  }
 
  async sharePortal () {
+ await this.signInUsingSavedToken()
  this.showPopover()
 
  if (await this.isSignedIn()) {
@@ -80,6 +69,7 @@ class TeletypePackage {
  }
 
  async joinPortal (id) {
+ await this.signInUsingSavedToken()
  this.showPopover()
 
  if (await this.isSignedIn()) {
@@ -102,16 +92,17 @@ class TeletypePackage {
  }
 
  async consumeStatusBar (statusBar) {
- const teletypeClient = await this.getClient()
- const portalBindingManager = await this.getPortalBindingManager()
- const authenticationProvider = await this.getAuthenticationProvider()
+ const getPortalBindingManager = async () => await this.getPortalBindingManager()
+ const getAuthenticationProvider = async () => await this.getAuthenticationProvider()
+ const isClientOutdated = () => this.isClientOutdated
+ const hasInitializationError = () => this.initializationError
+ if (!PortalStatusBarIndicator) PortalStatusBarIndicator = require('./portal-status-bar-indicator')
  this.portalStatusBarIndicator = new PortalStatusBarIndicator({
  statusBar,
- teletypeClient,
- portalBindingManager,
- authenticationProvider,
- isClientOutdated: this.isClientOutdated,
- initializationError: this.initializationError,
+ getPortalBindingManager,
+ getAuthenticationProvider,
+ isClientOutdated,
+ hasInitializationError,
  tooltipManager: this.tooltipManager,
  commandRegistry: this.commandRegistry,
  clipboard: this.clipboard,
@@ -157,7 +148,8 @@ class TeletypePackage {
  async showJoinPortalPrompt () {
  if (!this.portalStatusBarIndicator) return
 
- const {popoverComponent} = this.portalStatusBarIndicator
+ let {popoverComponent} = this.portalStatusBarIndicator
+ if (!popoverComponent) popoverComponent = await this.portalStatusBarIndicator.initialOpenPromise
  const {portalListComponent} = popoverComponent.refs
  await portalListComponent.showJoinPortalPrompt()
  }
@@ -172,16 +164,24 @@ class TeletypePackage {
  }
 
  getAuthenticationProvider () {
+ if (this.authenticationProvider) return Promise.resolve(this.authenticationProvider)
+
  if (!this.authenticationProviderPromise) {
  this.authenticationProviderPromise = new Promise(async (resolve, reject) => {
  const client = await this.getClient()
  if (client) {
- resolve(new AuthenticationProvider({
+ if (!AuthenticationProvider) AuthenticationProvider = require('./authentication-provider')
+ if (!this.credentialCache) {
+ if (!CredentialCache) CredentialCache = require('./credential-cache')
+ this.credentialCache = new CredentialCache()
+ }
+ this.authenticationProvider = new AuthenticationProvider({
  client,
  credentialCache: this.credentialCache,
  notificationManager: this.notificationManager,
  workspace: this.workspace
- }))
+ })
+ resolve(this.authenticationProvider)
  } else {
  this.authenticationProviderPromise = null
  resolve(null)
@@ -193,15 +193,19 @@ class TeletypePackage {
  }
 
  getPortalBindingManager () {
+ if (this.portalBindingManager) return Promise.resolve(this.portalBindingManager)
+
  if (!this.portalBindingManagerPromise) {
  this.portalBindingManagerPromise = new Promise(async (resolve, reject) => {
  const client = await this.getClient()
  if (client) {
- resolve(new PortalBindingManager({
+ if (!PortalBindingManager) PortalBindingManager = require('./portal-binding-manager')
+ this.portalBindingManager = new PortalBindingManager({
  client,
  workspace: this.workspace,
  notificationManager: this.notificationManager
- }))
+ })
+ resolve(this.portalBindingManager)
  } else {
  this.portalBindingManagerPromise = null
  resolve(null)
@@ -217,6 +221,21 @@ class TeletypePackage {
  if (this.isClientOutdated) return null
 
  try {
+ if(!TeletypeClient) ({TeletypeClient, Errors} = require('@atom/teletype-client'))
+ if (this.client) {
+ await this.client.initialize()
+ return this.client
+ }
+
+ this.client = new TeletypeClient({
+ pusherKey: this.pusherKey,
+ pusherOptions: this.pusherOptions,
+ baseURL: this.baseURL,
+ pubSubGateway: this.pubSubGateway,
+ tetherDisconnectWindow: this.tetherDisconnectWindow
+ })
+ this.client.onConnectionError(this.handleConnectionError.bind(this))
+
  await this.client.initialize()
  return this.client
  } catch (error) {

test/teletype-package.test.js

@@ -214,6 +214,7 @@ suite('TeletypePackage', function () {
  // Show popover when running the "Share Portal" command, but prevent sharing unless user is authenticated.
  assert(!pack.portalStatusBarIndicator.isPopoverVisible())
  assert(!await pack.sharePortal())
+ await pack.portalStatusBarIndicator.initialOpenPromise
  assert(pack.portalStatusBarIndicator.isPopoverVisible())
 
  // Show popover when running the "Join Portal" command, but prevent sharing unless user is authenticated.
@@ -863,6 +864,7 @@ suite('TeletypePackage', function () {
 
  await pack.consumeStatusBar(new FakeStatusBar())
  const {portalStatusBarIndicator} = pack
+ await portalStatusBarIndicator.handleInitialClick() // Initialize popover component
  const {popoverComponent} = portalStatusBarIndicator
  const {packageOutdatedComponent} = popoverComponent.refs
 
@@ -921,6 +923,7 @@ suite('TeletypePackage', function () {
  }
 
  await pack.consumeStatusBar(new FakeStatusBar())
+ await pack.portalStatusBarIndicator.handleInitialClick() // Initialize popover component
 
  assert.equal(env.notifications.getNotifications().length, 1)
  const {type, message, options} = env.notifications.getNotifications()[0]
@@ -943,6 +946,7 @@ suite('TeletypePackage', function () {
  throw new Error('some error')
  }
 
+ await pack.portalStatusBarIndicator.handleInitialClick() // Initialize popover component
  const {popoverComponent} = pack.portalStatusBarIndicator
  popoverComponent.refs.signInComponent.refs.editor.setText('some-token')
  await popoverComponent.refs.signInComponent.signIn()
@@ -988,6 +992,9 @@ suite('TeletypePackage', function () {
  if (options.signIn == null || options.signIn) {
  await credentialCache.set('oauth-token', 'token-' + nextTokenId++)
  await pack.signInUsingSavedToken()
+ } else {
+ // We still need to activate the client for some tests
+ await pack.getClient()
  }
  packages.push(pack)
  return pack