refactor dialogs to be individually async (#206)

package.json

@@ -123,7 +123,8 @@
     ],
     "ignore": [
       "dist",
-      "routes/_utils/asyncModules.js"
+      "routes/_utils/asyncModules.js",
+      "routes/_components/dialog/asyncDialogs.js"
     ]
   },
   "esm": {

routes/_components/compose/ComposeBox.html

@@ -113,7 +113,7 @@
   import { store } from '../../_store/store'
   import { slide } from 'svelte-transitions'
   import { postStatus, insertHandleForReply, setReplySpoiler, setReplyVisibility } from '../../_actions/compose'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowComposeDialog } from '../dialog/asyncDialogs'
   import { classname } from '../../_utils/classname'
 
   export default {
@@ -189,8 +189,8 @@
         if (sticky) {
           // when the button is sticky, we're scrolled down the home timeline,
           // so we should launch a new compose dialog
-          let dialogs = await importDialogs()
+          let showComposeDialog = await importShowComposeDialog()
-          dialogs.showComposeDialog()
+          showComposeDialog()
         } else {
           // else we're actually posting a new toot
           this.doPostStatus()

routes/_components/compose/ComposeToolbar.html

@@ -46,7 +46,7 @@
 <script>
   import IconButton from '../IconButton.html'
   import { store } from '../../_store/store'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
   import { doMediaUpload } from '../../_actions/media'
   import { toggleContentWarningShown } from '../../_actions/contentWarnings'
   import ComposeAutosuggest from './ComposeAutosuggest.html'
@@ -70,9 +70,9 @@
     store: () => store,
     methods: {
       async onEmojiClick () {
-        let dialogs = await importDialogs()
         let { realm } = this.get()
-        dialogs.showEmojiDialog(realm)
+        let showEmojiDialog = await importShowEmojiDialog()
+        showEmojiDialog(realm)
       },
       onMediaClick () {
         this.refs.input.click()
@@ -83,9 +83,9 @@
         doMediaUpload(realm, file)
       },
       async onPostPrivacyClick () {
-        let dialogs = await importDialogs()
         let { realm } = this.get()
-        dialogs.showPostPrivacyDialog(realm)
+        let showPostPrivacyDialog = await importShowPostPrivacyDialog()
+        showPostPrivacyDialog(realm)
       },
       onContentWarningClick () {
         let { realm } = this.get()

routes/_components/dialog/asyncDialogs.js

@@ -0,0 +1,31 @@
+export const importShowAccountProfileOptionsDialog = () => import(
+  /* webpackChunkName: 'showAccountProfileOptionsDialog' */ './creators/showAccountProfileOptionsDialog'
+  ).then(mod => mod.default)
+
+export const importShowComposeDialog = () => import(
+  /* webpackChunkName: 'showComposeDialog' */ './creators/showComposeDialog'
+  ).then(mod => mod.default)
+
+export const importShowConfirmationDialog = () => import(
+  /* webpackChunkName: 'showConfirmationDialog' */ './creators/showConfirmationDialog'
+  ).then(mod => mod.default)
+
+export const importShowEmojiDialog = () => import(
+  /* webpackChunkName: 'showEmojiDialog' */ './creators/showEmojiDialog'
+  ).then(mod => mod.default)
+
+export const importShowImageDialog = () => import(
+  /* webpackChunkName: 'showImageDialog' */ './creators/showImageDialog'
+  ).then(mod => mod.default)
+
+export const importShowPostPrivacyDialog = () => import(
+  /* webpackChunkName: 'showPostPrivacyDialog' */ './creators/showPostPrivacyDialog'
+  ).then(mod => mod.default)
+
+export const importShowStatusOptionsDialog = () => import(
+  /* webpackChunkName: 'showStatusOptionsDialog' */ './creators/showStatusOptionsDialog'
+  ).then(mod => mod.default)
+
+export const importShowVideoDialog = () => import(
+  /* webpackChunkName: 'showVideoDialog' */ './creators/showVideoDialog'
+  ).then(mod => mod.default)

routes/_components/dialog/components/AccountProfileOptionsDialog.html

@@ -10,7 +10,7 @@
 import ModalDialog from './ModalDialog.html'
 import { store } from '../../../_store/store'
 import GenericDialogList from './GenericDialogList.html'
-import { importDialogs } from '../../../_utils/asyncModules'
+import { importShowComposeDialog } from '../asyncDialogs'
 import { createDialogId } from '../helpers/createDialogId'
 import { show } from '../helpers/showDialog'
 import { close } from '../helpers/closeDialog'
@@ -103,8 +103,8 @@ export default {
       this.store.setComposeData('dialog', {
         text: `@${acct} `
       })
-      let dialogs = await importDialogs()
+      let showComposeDialog = await importShowComposeDialog()
-      dialogs.showComposeDialog()
+      showComposeDialog()
       this.close()
     },
     async onFollowClicked () {

routes/_components/dialog/creators/showAccountProfileOptionsDialog.js

@@ -2,7 +2,7 @@ import AccountProfileOptionsDialog from '../components/AccountProfileOptionsDial
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showAccountProfileOptionsDialog (account, relationship, verifyCredentials) {
+export default function showAccountProfileOptionsDialog (account, relationship, verifyCredentials) {
   let dialog = new AccountProfileOptionsDialog({
     target: createDialogElement(),
     data: {

routes/_components/dialog/creators/showComposeDialog.js

@@ -2,7 +2,7 @@ import ComposeDialog from '../components/ComposeDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showComposeDialog () {
+export default function showComposeDialog () {
   let dialog = new ComposeDialog({
     target: createDialogElement(),
     data: {

routes/_components/dialog/creators/showConfirmationDialog.js

@@ -2,7 +2,7 @@ import ConfirmationDialog from '../components/ConfirmationDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showConfirmationDialog (options) {
+export default function showConfirmationDialog (options) {
   let dialog = new ConfirmationDialog({
     target: createDialogElement(),
     data: Object.assign({

routes/_components/dialog/creators/showEmojiDialog.js

@@ -2,7 +2,7 @@ import EmojiDialog from '../components/EmojiDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showEmojiDialog (realm) {
+export default function showEmojiDialog (realm) {
   let emojiDialog = new EmojiDialog({
     target: createDialogElement(),
     data: {

routes/_components/dialog/creators/showImageDialog.js

@@ -2,7 +2,7 @@ import ImageDialog from '../components/ImageDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showImageDialog (poster, src, type, width, height, description) {
+export default function showImageDialog (poster, src, type, width, height, description) {
   let imageDialog = new ImageDialog({
     target: createDialogElement(),
     data: {

routes/_components/dialog/creators/showPostPrivacyDialog.js

@@ -2,7 +2,7 @@ import PostPrivacyDialog from '../components/PostPrivacyDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showPostPrivacyDialog (realm) {
+export default function showPostPrivacyDialog (realm) {
   let dialog = new PostPrivacyDialog({
     target: createDialogElement(),
     data: {

routes/_components/dialog/creators/showStatusOptionsDialog.js

@@ -2,7 +2,7 @@ import StatusOptionsDialog from '../components/StatusOptionsDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showStatusOptionsDialog (statusId) {
+export default function showStatusOptionsDialog (statusId) {
   let dialog = new StatusOptionsDialog({
     target: createDialogElement(),
     data: {

routes/_components/dialog/creators/showVideoDialog.js

@@ -2,7 +2,7 @@ import VideoDialog from '../components/VideoDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showVideoDialog (poster, src, width, height, description) {
+export default function showVideoDialog (poster, src, width, height, description) {
   let videoDialog = new VideoDialog({
     target: createDialogElement(),
     data: {

routes/_components/dialog/dialogs.js

@@ -1,8 +0,0 @@
-export * from './creators/showConfirmationDialog'
-export * from './creators/showImageDialog'
-export * from './creators/showVideoDialog'
-export * from './creators/showEmojiDialog'
-export * from './creators/showPostPrivacyDialog'
-export * from './creators/showStatusOptionsDialog'
-export * from './creators/showComposeDialog'
-export * from './creators/showAccountProfileOptionsDialog'

routes/_components/profile/AccountProfileDetails.html

@@ -106,7 +106,7 @@
 </style>
 <script>
   import IconButton from '../IconButton.html'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs'
 
   const numberFormat = new Intl.NumberFormat('en-US')
 
@@ -122,8 +122,8 @@
     methods: {
       async onMoreOptionsClick () {
         let { account, relationship, verifyCredentials } = this.get()
-        let dialogs = await importDialogs()
+        let showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
-        dialogs.showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
+        showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
       }
     },
     components: {

routes/_components/status/Media.html

@@ -98,7 +98,7 @@
 </style>
 <script>
   import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowVideoDialog, importShowImageDialog } from '../dialog/asyncDialogs'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
   import PlayVideoIcon from '../PlayVideoIcon.html'
@@ -143,14 +143,14 @@
     methods: {
       async onClickPlayVideoButton () {
         let { previewUrl, url, modalWidth, modalHeight, description } = this.get()
-        let dialogs = await importDialogs()
+        let showVideoDialog = await importShowVideoDialog()
-        dialogs.showVideoDialog(previewUrl, url,
+        showVideoDialog(previewUrl, url,
           modalWidth, modalHeight, description)
       },
       async onClickShowImageButton () {
         let { previewUrl, url, modalWidth, modalHeight, description, type } = this.get()
-        let dialogs = await importDialogs()
+        let showImageDialog = await importShowImageDialog()
-        dialogs.showImageDialog(previewUrl, url, type,
+        showImageDialog(previewUrl, url, type,
           modalWidth, modalHeight, description)
       }
     },

routes/_components/status/StatusToolbar.html

@@ -47,7 +47,7 @@
   import { registerClickDelegates } from '../../_utils/delegate'
   import { setFavorited } from '../../_actions/favorite'
   import { setReblogged } from '../../_actions/reblog'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs'
   import { updateProfileAndRelationship } from '../../_actions/accounts'
   import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
   import { on } from '../../_utils/eventBus'
@@ -109,9 +109,9 @@
         e.stopPropagation()
         let { originalStatusId, originalAccountId } = this.get()
         let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
-        let dialogs = await importDialogs()
+        let showStatusOptionsDialog = await importShowStatusOptionsDialog()
         await updateRelationshipPromise
-        dialogs.showStatusOptionsDialog(originalStatusId)
+        showStatusOptionsDialog(originalStatusId)
       },
       onPostedStatus (realm, inReplyToUuid) {
         let {

routes/_pages/settings/instances/[instanceName].html

@@ -95,7 +95,7 @@
   import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
   import ExternalLink from '../../../_components/ExternalLink.html'
   import Avatar from '../../../_components/Avatar.html'
-  import { importDialogs } from '../../../_utils/asyncModules'
+  import { importShowConfirmationDialog } from '../../../_components/dialog/asyncDialogs'
   import {
     changeTheme,
     switchToInstance,
@@ -137,8 +137,8 @@
         e.preventDefault()
         let { instanceName } = this.get()
 
-        let dialogs = await importDialogs()
+        let showConfirmationDialog = await importShowConfirmationDialog()
-        dialogs.showConfirmationDialog({
+        showConfirmationDialog({
           text: `Log out of ${instanceName}?`,
           onPositive () {
             logOutOfInstance(instanceName)

routes/_utils/asyncModules.js

@@ -22,10 +22,6 @@ export const importWebSocketClient = () => import(
   /* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket'
   ).then(mod => mod.default)
 
-export const importDialogs = () => import(
-  /* webpackChunkName: 'dialogs' */ '../_components/dialog/dialogs.js'
-  )
-
 export const importVirtualList = () => import(
   /* webpackChunkName: 'VirtualList.html' */ '../_components/virtualList/VirtualList.html'
   ).then(mod => mod.default)