wip

app/src/app.module.ts

@@ -1,20 +1,13 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { NgModule } from '@angular/core'
+import { ApplicationRef, ComponentFactoryResolver, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { ToastrModule } from 'ngx-toastr'
+// import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+// import { ToastrModule } from 'ngx-toastr'
 
 export function getRootModule (plugins: any[]) {
     const imports = [
         BrowserModule,
         ...plugins,
-        NgbModule,
-        ToastrModule.forRoot({
-            positionClass: 'toast-bottom-center',
-            toastClass: 'toast',
-            preventDuplicates: true,
-            extendedTimeOut: 1000,
-        }),
     ]
 
     const bootstrap = [
@@ -27,10 +20,18 @@ export function getRootModule (plugins: any[]) {
 
     @NgModule({
         imports,
-        bootstrap,
     }) class RootModule {
-        ngDoBootstrap () {
+        constructor (private resolver: ComponentFactoryResolver) { }
+
+        ngDoBootstrap (appRef: ApplicationRef) {
             (window as any)['requestAnimationFrame'] = window[window['Zone'].__symbol__('requestAnimationFrame')]
+
+            bootstrap.forEach(componentDef => {
+                const factory = this.resolver.resolveComponentFactory(componentDef)
+                if (document.querySelector(factory.selector)) {
+                    appRef.bootstrap(factory)
+                }
+            })
         }
     }
 

app/src/entry.ts

@@ -8,9 +8,8 @@ import './toastr.scss'
 // Importing before @angular/*
 import { findPlugins, initModuleLookup, loadPlugins } from './plugins'
 
-import { enableProdMode, NgModuleRef, ApplicationRef } from '@angular/core'
-import { enableDebugTools } from '@angular/platform-browser'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { enableProdMode } from '@angular/core'
+import { bootstrapApplication } from '@angular/platform-browser'
 import { ipcRenderer } from 'electron'
 
 import { getRootModule } from './app.module'
@@ -31,7 +30,7 @@ if (process.env.TABBY_DEV && !process.env.TABBY_FORCE_ANGULAR_PROD) {
     enableProdMode()
 }
 
-async function bootstrap (bootstrapData: BootstrapData, plugins: PluginInfo[], safeMode = false): Promise<NgModuleRef<any>> {
+async function bootstrap (bootstrapData: BootstrapData, plugins: PluginInfo[], safeMode = false): Promise<void> {
     if (safeMode) {
         plugins = plugins.filter(x => x.isBuiltin)
     }
@@ -41,15 +40,40 @@ async function bootstrap (bootstrapData: BootstrapData, plugins: PluginInfo[], s
     })
     const module = getRootModule(pluginModules)
     window['rootModule'] = module
-    const moduleRef = await platformBrowserDynamic([
-        { provide: BOOTSTRAP_DATA, useValue: bootstrapData },
-    ]).bootstrapModule(module)
-    if (process.env.TABBY_DEV) {
-        const applicationRef = moduleRef.injector.get(ApplicationRef)
-        const componentRef = applicationRef.components[0]
-        enableDebugTools(componentRef)
+
+    function crawlProviders (m) {
+        if (m.ngModule) {
+            return [...crawlProviders(m.ngModule), ...m.providers ?? []]
+        }
+        const providers = m.ɵinj?.providers ?? []
+        for (const exp of m.ɵmod?.exports ?? []) {
+            providers.push(...crawlProviders(exp))
+        }
+        return providers
     }
-    return moduleRef
+
+    const providers = pluginModules.map(x => crawlProviders(x)).flat()
+
+    console.log(providers)
+
+    bootstrapApplication(
+        pluginModules.find(x => x.bootstrap).bootstrap,
+        {
+            providers: [
+                { provide: BOOTSTRAP_DATA, useValue: bootstrapData },
+                ...providers,
+            ],
+        },
+    )
+    // const moduleRef = await platformBrowserDynamic([
+    //     { provide: BOOTSTRAP_DATA, useValue: bootstrapData },
+    // ]).bootstrapModule(module)
+    // if (process.env.TABBY_DEV) {
+    //     const applicationRef = moduleRef.injector.get(ApplicationRef)
+    //     const componentRef = applicationRef.components[0]
+    //     enableDebugTools(componentRef)
+    // }
+    // return moduleRef
 }
 
 ipcRenderer.once('start', async (_$event, bootstrapData: BootstrapData) => {

app/webpack.config.mjs

@@ -34,8 +34,9 @@ export default () => ({
                 test: /\.(m?)js$/,
                 loader: 'babel-loader',
                 options: {
-                    compact: false,
                     plugins: [linkerPlugin],
+                    compact: false,
+                    cacheDirectory: true,
                 },
                 resolve: {
                     fullySpecified: false,

tabby-core/src/components/appRoot.component.ts

@@ -17,6 +17,7 @@ import { SafeModeModalComponent } from './safeModeModal.component'
 import { TabBodyComponent } from './tabBody.component'
 import { SplitTabComponent } from './splitTab.component'
 import { AppService, Command, CommandLocation, FileTransfer, HostWindowService, PlatformService } from '../api'
+import { CommonModule } from '@angular/common'
 
 function makeTabAnimation (dimension: string, size: number) {
     return [
@@ -54,6 +55,8 @@ function makeTabAnimation (dimension: string, size: number) {
 
 /** @hidden */
 @Component({
+    imports: [CommonModule],
+    standalone: true,
     selector: 'app-root',
     template: require('./appRoot.component.pug'),
     styles: [require('./appRoot.component.scss')],

tabby-core/src/index.ts

@@ -125,17 +125,8 @@ const PROVIDERS = [
         CdkAutoDropGroup,
         ProfileIconComponent,
     ],
-    entryComponents: [
-        AppRootComponent,
-        PromptModalComponent,
-        RenameTabModalComponent,
-        SafeModeModalComponent,
-        SelectorModalComponent,
-        SplitTabComponent,
-        UnlockVaultModalComponent,
-        WelcomeTabComponent,
-    ],
     exports: [
+        AppRootComponent,
         CheckboxComponent,
         ToggleComponent,
         PromptModalComponent,

tabby-local/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+// import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
@@ -46,7 +46,7 @@ import { LocalProfilesService } from './profiles'
 /** @hidden */
 @NgModule({
     imports: [
-        BrowserModule,
+        // BrowserModule,
         FormsModule,
         NgbModule,
         ToastrModule,
@@ -90,11 +90,6 @@ import { LocalProfilesService } from './profiles'
         WSLShellProvider,
         WindowsStockShellsProvider,
     ],
-    entryComponents: [
-        TerminalTabComponent,
-        ShellSettingsTabComponent,
-        LocalProfileSettingsComponent,
-    ],
     declarations: [
         TerminalTabComponent,
         ShellSettingsTabComponent,

tabby-plugin-manager/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+// import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 
@@ -12,7 +12,7 @@ import { PluginsSettingsTabProvider } from './settings'
 
 @NgModule({
     imports: [
-        BrowserModule,
+        // BrowserModule,
         FormsModule,
         NgbModule,
         TabbyCorePlugin,
@@ -20,9 +20,6 @@ import { PluginsSettingsTabProvider } from './settings'
     providers: [
         { provide: SettingsTabProvider, useClass: PluginsSettingsTabProvider, multi: true },
     ],
-    entryComponents: [
-        PluginsSettingsTabComponent,
-    ],
     declarations: [
         PluginsSettingsTabComponent,
     ],

tabby-serial/src/index.ts

@@ -30,10 +30,6 @@ import { SerialProfilesService } from './profiles'
         { provide: TabRecoveryProvider, useClass: RecoveryProvider, multi: true },
         { provide: HotkeyProvider, useClass: SerialHotkeyProvider, multi: true },
     ],
-    entryComponents: [
-        SerialProfileSettingsComponent,
-        SerialTabComponent,
-    ],
     declarations: [
         SerialProfileSettingsComponent,
         SerialTabComponent,

tabby-settings/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+// import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { InfiniteScrollModule } from 'ngx-infinite-scroll'
@@ -30,7 +30,7 @@ import { HotkeySettingsTabProvider, WindowSettingsTabProvider, VaultSettingsTabP
 /** @hidden */
 @NgModule({
     imports: [
-        BrowserModule,
+        // BrowserModule,
         FormsModule,
         NgbModule,
         TabbyCorePlugin,
@@ -46,18 +46,6 @@ import { HotkeySettingsTabProvider, WindowSettingsTabProvider, VaultSettingsTabP
         { provide: SettingsTabProvider, useClass: ProfilesSettingsTabProvider, multi: true },
         { provide: SettingsTabProvider, useClass: ConfigSyncSettingsTabProvider, multi: true },
     ],
-    entryComponents: [
-        EditProfileModalComponent,
-        HotkeyInputModalComponent,
-        HotkeySettingsTabComponent,
-        ProfilesSettingsTabComponent,
-        SettingsTabComponent,
-        SetVaultPassphraseModalComponent,
-        VaultSettingsTabComponent,
-        WindowSettingsTabComponent,
-        ConfigSyncSettingsTabComponent,
-        ReleaseNotesComponent,
-    ],
     declarations: [
         EditProfileModalComponent,
         HotkeyInputModalComponent,

tabby-ssh/src/index.ts

@@ -48,15 +48,6 @@ import { SFTPCreateDirectoryModalComponent } from './components/sftpCreateDirect
         { provide: ProfileProvider, useExisting: SSHProfilesService, multi: true },
         { provide: SFTPContextMenuItemProvider, useClass: CommonSFTPContextMenu, multi: true },
     ],
-    entryComponents: [
-        SSHProfileSettingsComponent,
-        SFTPDeleteModalComponent,
-        SFTPCreateDirectoryModalComponent,
-        SSHPortForwardingModalComponent,
-        SSHSettingsTabComponent,
-        SSHTabComponent,
-        HostKeyPromptModalComponent,
-    ],
     declarations: [
         SSHProfileSettingsComponent,
         SFTPDeleteModalComponent,

tabby-telnet/src/index.ts

@@ -32,10 +32,6 @@ import { TelnetProfilesService } from './profiles'
         { provide: HotkeyProvider, useClass: TelnetHotkeyProvider, multi: true },
         { provide: ProfileProvider, useExisting: TelnetProfilesService, multi: true },
     ],
-    entryComponents: [
-        TelnetProfileSettingsComponent,
-        TelnetTabComponent,
-    ],
     declarations: [
         TelnetProfileSettingsComponent,
         TelnetTabComponent,

tabby-terminal/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+// import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
@@ -37,7 +37,7 @@ import { TerminalCLIHandler } from './cli'
 /** @hidden */
 @NgModule({
     imports: [
-        BrowserModule,
+        // BrowserModule,
         FormsModule,
         NgbModule,
         ToastrModule,
@@ -61,12 +61,6 @@ import { TerminalCLIHandler } from './cli'
 
         { provide: CLIHandler, useClass: TerminalCLIHandler, multi: true },
     ],
-    entryComponents: [
-        AppearanceSettingsTabComponent,
-        ColorSchemeSettingsTabComponent,
-        TerminalSettingsTabComponent,
-        ColorSchemeSelectorComponent,
-    ],
     declarations: [
         ColorPickerComponent,
         ColorSchemePreviewComponent,

tabby-web-demo/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+// import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 
@@ -12,7 +12,7 @@ import { DemoProfilesService } from './profiles'
 /** @hidden */
 @NgModule({
     imports: [
-        BrowserModule,
+        // BrowserModule,
         FormsModule,
         NgbModule,
         TabbyCorePlugin,
@@ -21,9 +21,6 @@ import { DemoProfilesService } from './profiles'
     providers: [
         { provide: ProfileProvider, useClass: DemoProfilesService, multi: true },
     ],
-    entryComponents: [
-        DemoTerminalTabComponent,
-    ],
     declarations: [
         DemoTerminalTabComponent,
     ],

tabby-web/src/index.ts

@@ -27,8 +27,5 @@ import './styles.scss'
     declarations: [
         MessageBoxModalComponent,
     ],
-    entryComponents: [
-        MessageBoxModalComponent,
-    ],
 })
 export default class WebModule { } // eslint-disable-line @typescript-eslint/no-extraneous-class

webpack.plugin.config.mjs

@@ -55,17 +55,6 @@ export default options => {
         module: {
             rules: [
                 ...options.rules ?? [],
-                {
-                    test: /\.mjs$/,
-                    loader: 'babel-loader',
-                    options: {
-                        compact: false,
-                        plugins: [linkerPlugin],
-                    },
-                    resolve: {
-                        fullySpecified: false,
-                    },
-                },
                 {
                     test: /\.js$/,
                     enforce: 'pre',
@@ -84,12 +73,26 @@ export default options => {
                 },
                 {
                     test: /\.ts$/,
-                    use: {
-                        loader: 'ts-loader',
-                        options: {
-                            configFile: path.resolve(options.dirname, 'tsconfig.json'),
-                            allowTsInNodeModules: true,
+                    use: [
+                        {
+                            loader: 'ts-loader',
+                            options: {
+                                configFile: path.resolve(options.dirname, 'tsconfig.json'),
+                                allowTsInNodeModules: true,
+                            },
                         },
+                    ],
+                },
+                {
+                    test: /\.mjs$/,
+                    loader: 'babel-loader',
+                    options: {
+                        plugins: [linkerPlugin],
+                        compact: false,
+                        cacheDirectory: true,
+                    },
+                    resolve: {
+                        fullySpecified: false,
                     },
                 },
                 { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] },