Does Blits support dynamically registering custom components to a component's `components: {}` configuration? Is it possible to dynamically insert components into a template?

[kingway188]

We are developing a set-top box web system using blits, similar to the Android TV system. The code includes many modules and many JS files.
Currently, all JS files are statically imported, which makes the app startup very slow, taking more than 8 seconds to load and display the page.

For example, importing Settings.js will simultaneously parse and evaluate a large number of submodules (about 15+ settings/Osd files), which can cause a blockage of several seconds on low-performance devices—resulting in the 4s+ delay you see.

So I tried some lazy loading methods with Copilot's help, which could display the necessary components when loading the main page, and then dynamically load other components later.

such as:
Option 1: Lazy loading + conditional import => await import('../settings/Settings.js');
Option 2: Unified dynamic component container
Option 3: Route-level lazy loading => {
{ path: 'settings', component: () => import('./settings/Settings.js') },
{ path: 'applist', component: () => import('./home/OverlayApplist.js') },
{ path: 'add-fav-app', component: () => import('./home/OverlayAddFavApp.js') },
// ... (route can not show overlay with components)

I think if Blits support dynamically registering custom components to a component's components: {} configuration.we can dynamically insert components into a template. if so ,we can load other components later with Lazy loading + conditional import as overlay compoments.

Therefore, we would like to ask about this issue, and any suggestions would be appreciated.

Many Thanks

======
Currently source code tree:
.
|-- App.js
|-- api
| |-- ConfirmDialogManager.js
| |-- DataManager.js
| |-- FetchApi.js
| |-- MessageBoxManager.js
| |-- NetworkManager.js
| |-- PlayerManager.js
| |-- StorageManager.js
| -- data | |-- DataApps.js | -- DataChannels.js
|-- app
| |-- LiveTV
| |-- MediaCenter
| -- ShakaPlayer | -- ShakaPlayer.js
|-- components
| |-- Appcard.js
| |-- Background.js
| |-- Button.js
| |-- ButtonBig.js
| |-- Checkbox.js
| |-- ConfirmDialog.js
| |-- Grid.js
| |-- Input.js
| |-- Item.js
| |-- ItemOptions.js
| |-- Keyboard.js
| |-- List.js
| |-- Loader.js
| |-- MsgBox.js
| |-- OpLoading.js
| |-- OptionApplist.js
| |-- OptionFavorite.js
| |-- OptionItem.js
| |-- PortalItem.js
| |-- PortalRow.js
| |-- ProgressBar.js
| |-- ProgressBarShort.js
| |-- ResultScreen.js
| |-- Spinner.js
| |-- Square.js
| |-- StatusIcon.js
| |-- StatusRow.js
| |-- Toggle.js
| -- Toggles.js |-- home | |-- OverlayAddFastCh.js | |-- OverlayAddFavApp.js | |-- OverlayApplist.js | |-- OverlayCustomizeChannels.js | -- Portal.js
|-- index.js
|-- menu
| |-- MenuItemOneLine.js
| |-- MenuItemOneLineText.js
| |-- MenuItemSelectApp.js
| |-- MenuItemToggle.js
| |-- MenuItemToggleText.js
| |-- MenuItemTwoLine.js
| |-- MenuItemTwoLineText.js
| |-- MenuItemTwoLineTextToggle.js
| |-- MenuItemWifi.js
| |-- MenuSubTitle.js
| -- MenuTitile.js -- settings
|-- ColorSpaceSelect.js
|-- DeviceAbout.js
|-- DeviceAccessibility.js
|-- DeviceDateTime.js
|-- DeviceDeveloper.js
|-- DeviceDisplaySound.js
|-- DeviceEnergySaver.js
|-- DeviceHomeScreen.js
|-- DeviceKeyboard.js
|-- DeviceLanguage.js
|-- DeviceLocation.js
|-- DeviceMain.js
|-- DeviceStorage.js
|-- DeviceUsageDiagnostics.js
|-- DisplayHDMICEC.js
|-- DisplayModeSelect.js
|-- DisplayPictureSettings.js
|-- DisplayScreenPosition.js
|-- DisplayScreenResolution.js
|-- DisplaySoundMain.js
|-- HDRPolicySelect.js
|-- OsdAddNewNet.js
|-- OsdBluetoothSearch.js
|-- OsdCanNotLoginIn.js
|-- OsdFactoryReset.js
|-- OsdIPsetting.js
|-- OsdProxySetting.js
|-- OsdReadyLoginIn.js
|-- OsdRestart.js
|-- OsdWifiConnect.js
|-- Settings.js
|-- SettingsAccounts.js
|-- SettingsApps.js
|-- SettingsDevice.js
|-- SettingsMain.js
|-- SettingsNetwork.js
|-- SettingsRemote.js
|-- SoundDigitalOutput.js
|-- SoundOutputFormat.js
`-- SoundVolumeControl.js

11 directories, 98 files

[michielvandergeest]

hey @kingway188, the Blits router supports dynamic imports as components out of the box. See: https://github.com/lightning-js/blits-example-app/blob/master/src/App.js#L86-L89 This will allow you to dynamically load pages that are not part of your main app bundle. Vite / rollup will take care of the bundling

Additionally for non-page components, there exists the is-directive (https://lightningjs.io/v3-docs/blits/built-in/directives.html#is-directive) which allows you to dynamically (not reactively - yet ..) set what component type to use. The is directive accepts a string (and in that case you need to have those component pre registered), but you can also pass a component directly, which should allow you to import them on the fly using dynamic imports.

Let is know if this works for your use case!

[kingway188]

Hi @michielvandergeest ， Thanks for your reply.

our app loads very slow and happen on a low-performance devices for STB chips. but it run very fast in PC browser.
the STB cpu is low powerfull when process a lot of JS code imported.

1. Yes, Blits router can supports dynamic import and reduce page startup time. But the new router page does not display overlay on the home page. the home page will distroy if route to a new page. that can not display some OSD on the homepage like Androd TV. the applist and setting should display on the top layer on the home.

2. The is directive can change the components but the components must been imported firstly and registered. that can not reduce the time to process the import javascript and Instantiate components。it seems the JS files that is statically imported still need to be execute by CPU.

I find a method that can meet the Lazy loading requirements with Lazy-load placeholders.

import PlaceholderOverlay from '../components/PlaceholderOverlay.js'

/**
 * portalComponents is a module-level mutable object.
 * Blits resolves component constructors at runtime via context.components[name],
 * so injecting the real constructor before :for triggers instantiation enables lazy loading.
 */
const portalComponents = {
  // Lightweight components needed at startup
  PortalRow: null, // assigned below
  StatusRow: null,
  OpLoading,
  OptionFavorite,

  // Lazy-load placeholders: each slot holds PlaceholderOverlay until first use.
  // :for="item in $xxxSlot" with an empty array ensures PlaceholderOverlay is never instantiated.
  Settings: PlaceholderOverlay,
  OverlayApplist: PlaceholderOverlay,
  OverlayAddFavApp: PlaceholderOverlay,
  OverlayAddFastCh: PlaceholderOverlay,
  OverlayCustomizeChannels: PlaceholderOverlay,
}

export default Blits.Component('Portal', {
  components: portalComponents,

  template: `

    ........
      <Settings :for="item in $settingsSlot" :show="$showSettings" ref="OverlaySettings" />
      <OverlayApplist :for="item in $applistSlot" :show="$showApplist" ref="OverlayApplist" />
    .......

  `,

  state() {
    return {
......
      // Lazy-load slots: [] = not yet created (not instantiated); [{}] = created (persistent)
      // Blits native :for: empty array skips instantiation; non-empty array creates the component
      settingsSlot: [],
      applistSlot: [],
......
    },
  },

  hooks: {

    ready() {

......
      this.$listen('showSettings', async () => {
        if (this.settingsSlot.length === 0) {
          // Check if already preloaded, otherwise import dynamically
          if (portalComponents.Settings === PlaceholderOverlay) {
            const mod = await import('../settings/Settings.js')
            portalComponents.Settings = mod.default
          }
          this.settingsSlot = [{}] // trigger :for to instantiate
          this.showOverlayAfterInstantiation('showSettings', 'OverlaySettings0')
          // }, 50) // 50ms delay allows loading animation to start
        } else {
          this.showSettings = true
          const overlay = this.$select('OverlaySettings0')
          if (overlay) overlay.$focus()
        }
      })
.....

Loading process:
Application launch → Load only necessary components → User trigger → Dynamically load corresponding chunks → Register components → Display interface

Load triggers on demand
Settings - Load when the settings button is clicked
OverlayApplist - Load when the app list is accessed

Memory usage significantly reduced, only loading the components that are actually used. .
The app startup time has been reduced from 8 seconds to 2.8 seconds.
This 2.8 seconds is for loading the components that must be displayed initially and the core code of Blits and lightning.