[⚡] Preloader for apps

src/apps/files.ts

@@ -1,7 +1,6 @@
 import icon from '../assets/icons/files.png'
 import { App } from '../types.ts'
 
-import flow from '../flow.ts'
 import { FlowWindow } from '../wm.ts'
 
 import { Stats } from 'fs'
@@ -121,7 +120,7 @@ export default class FilesApp implements App {
               if (fileStat.isDirectory()) {
                 await setDir(dir + separator + file)
               } else {
-                flow.openApp('flow.editor', { path: dir + separator + file })
+                await window.flow.openApp('flow.editor', { path: dir + separator + file })
               }
             }
 

src/flow.ts

@@ -1,24 +1,56 @@
-import { Flow } from './types.ts'
+import { Apps } from './types.ts'
 
-import SettingsApp from './apps/settings.ts'
+class Flow {
-import FilesApp from './apps/files.ts'
+  apps: Apps = {}
-import MusicApp from './apps/music.ts'
-import EditorApp from './apps/editor.ts'
-import InfoApp from './apps/info.ts'
 
-const flow: Flow = {
+  appList = [
-  apps: {
+    'settings',
-    'flow.settings': new SettingsApp(),
+    'music',
-    'flow.music': new MusicApp(),
+    'files',
-    'flow.files': new FilesApp(),
+    'editor',
-    'flow.editor': new EditorApp(),
+    'info'
-    'flow.info': new InfoApp()
+  ]
-  },
+
-  async openApp (pkg: string, data: any) {
+  async init (): Promise<void> {
+    window.preloader.setPending('apps')
+    window.preloader.setStatus('importing default apps...')
+
+    for (const appPath of this.appList) {
+      const { default: ImportedApp } = await import(`./apps/${appPath}.ts`)
+      const app = new ImportedApp()
+
+      window.preloader.setStatus(`importing default apps\n${appPath}`)
+      this.apps[app.pkg] = app
+    }
+
+    window.wm.launcher.style.opacity = '0'
+    window.wm.launcher.style.filter = 'blur(0px)'
+    window.wm.launcher.style.pointerEvents = 'none'
+
+    window.preloader.setStatus('adding apps to app launcher...')
+
+    for (const pkg in window.flow.apps) {
+      window.preloader.setStatus(`adding apps to app launcher\n${window.flow.apps[pkg].name}`)
+      const app = document.createElement('app')
+      app.onclick = async () => {
+        await window.flow.openApp(pkg)
+        window.wm.toggleLauncher()
+      }
+      app.innerHTML = `<img src="${window.flow.apps[pkg].icon}"><div>${window.flow.apps[pkg].name}</div>`
+      window.wm.launcher.querySelector('apps')?.appendChild(app)
+    }
+
+    document.body.appendChild(window.wm.windowArea)
+    document.body.appendChild(window.wm.launcher)
+
+    await window.preloader.setDone('apps')
+  }
+
+  async openApp (pkg: string, data?: any): Promise<void> {
     const win = this.apps[pkg].open(data)
     const event = new CustomEvent('app_opened', { detail: { app: this.apps[pkg], win: await win } })
     window.dispatchEvent(event)
   }
 }
 
-export default flow
+export default Flow

src/index.ts

@@ -3,15 +3,17 @@ import './style.less'
 import Preloader from './preloader'
 import StatusBar from './statusbar'
 import WM from './wm'
+import Flow from './flow'
 
 import * as fs from 'fs'
 
 declare global {
   interface Window {
     preloader: Preloader
+    flow: Flow
+    fs: typeof fs
     statusBar: StatusBar
     wm: WM
-    fs: typeof fs
   }
 }
 
@@ -28,6 +30,7 @@ if (params.get('debug') !== null && params.get('debug') !== undefined) {
 }
 
 window.preloader = new Preloader()
+window.flow = new Flow()
 window.statusBar = new StatusBar()
 window.wm = new WM();
 
@@ -39,6 +42,8 @@ window.wm = new WM();
   await window.statusBar.init()
   await window.wm.init()
 
+  await window.flow.init()
+
   window.preloader.setStatus('')
   window.preloader.finish()
 })().catch(e => console.error)

src/types.ts

@@ -50,9 +50,6 @@ export interface FlowWindowConfig {
   minHeight?: number
 }
 
-export interface Flow {
+export interface Apps {
-  apps: {
   [key: string]: App
-  }
-  openApp: Function
 }

src/wm.ts

@@ -1,4 +1,3 @@
-import flow from './flow.ts'
 import { v4 as uuid } from 'uuid'
 import { FlowWindowConfig } from './types.ts'
 
@@ -234,26 +233,6 @@ class WM {
       this.toggleLauncher()
     }
 
-    this.launcher.style.opacity = '0'
-    this.launcher.style.filter = 'blur(0px)'
-    this.launcher.style.pointerEvents = 'none'
-
-    window.preloader.setStatus('adding apps to app launcher...')
-
-    for (const pkg in flow.apps) {
-      window.preloader.setStatus(`adding apps to app launcher\n${flow.apps[pkg].name}`)
-      const app = document.createElement('app')
-      app.onclick = () => {
-        flow.openApp(pkg)
-        this.toggleLauncher()
-      }
-      app.innerHTML = `<img src="${flow.apps[pkg].icon}"><div>${flow.apps[pkg].name}</div>`
-      this.launcher.querySelector('apps')?.appendChild(app)
-    }
-
-    document.body.appendChild(this.windowArea)
-    document.body.appendChild(this.launcher)
-
     await window.preloader.setDone('window manager')
   }
 }