|
| 1 | +/*----------------------------------------------------------------------------- |
| 2 | +| Copyright (c) Jupyter Development Team. |
| 3 | +| Distributed under the terms of the Modified BSD License. |
| 4 | +|----------------------------------------------------------------------------*/ |
| 5 | + |
| 6 | +// We copy some of the pageconfig parsing logic in @jupyterlab/coreutils |
| 7 | +// below, since this must run before any other files are loaded (including |
| 8 | +// @jupyterlab/coreutils). |
| 9 | + |
| 10 | +/** |
| 11 | + * Get global configuration data for the Jupyter application. |
| 12 | + * |
| 13 | + * @param name - The name of the configuration option. |
| 14 | + * |
| 15 | + * @returns The config value or an empty string if not found. |
| 16 | + * |
| 17 | + * #### Notes |
| 18 | + * All values are treated as strings. For browser based applications, it is |
| 19 | + * assumed that the page HTML includes a script tag with the id |
| 20 | + * `jupyter-config-data` containing the configuration as valid JSON. |
| 21 | + */ |
| 22 | + |
| 23 | +let _CONFIG_DATA = null; |
| 24 | +function getOption(name) { |
| 25 | + if (_CONFIG_DATA === null) { |
| 26 | + let configData = {}; |
| 27 | + // Use script tag if available. |
| 28 | + if (typeof document !== 'undefined' && document) { |
| 29 | + const el = document.getElementById('jupyter-config-data'); |
| 30 | + |
| 31 | + if (el) { |
| 32 | + configData = JSON.parse(el.textContent || '{}'); |
| 33 | + } |
| 34 | + } |
| 35 | + _CONFIG_DATA = configData; |
| 36 | + } |
| 37 | + |
| 38 | + return _CONFIG_DATA[name] || ''; |
| 39 | +} |
| 40 | + |
| 41 | +/** |
| 42 | + * Hide the loading indicator once the app is fully loaded |
| 43 | + */ |
| 44 | +function hideAppLoadingIndicator() { |
| 45 | + const indicator = document.getElementById('jupyterlite-loading-indicator'); |
| 46 | + if (indicator) { |
| 47 | + indicator.classList.add('hidden'); |
| 48 | + indicator.addEventListener('animationend', () => { |
| 49 | + indicator.remove(); |
| 50 | + // Remove theme classes after the loading indicator is removed |
| 51 | + document.body.classList.remove('jp-mod-dark', 'jp-mod-light'); |
| 52 | + }, { once: true }); |
| 53 | + } |
| 54 | +} |
| 55 | + |
| 56 | +/** |
| 57 | + * Apply theme to loading indicator based on saved settings in IndexedDB |
| 58 | + */ |
| 59 | +async function applyThemeToAppLoadingIndicator() { |
| 60 | + const indicator = document.getElementById('jupyterlite-loading-indicator'); |
| 61 | + if (!indicator) { |
| 62 | + return; |
| 63 | + } |
| 64 | + |
| 65 | + // Hide the indicator by default |
| 66 | + indicator.classList.add('hidden'); |
| 67 | + |
| 68 | + const showLoadingIndicator = getOption('showLoadingIndicator'); |
| 69 | + // Only show the indicator if explicitly set to true |
| 70 | + if (showLoadingIndicator === true) { |
| 71 | + indicator.classList.remove('hidden'); |
| 72 | + } else { |
| 73 | + return; |
| 74 | + } |
| 75 | + |
| 76 | + try { |
| 77 | + const baseUrl = getOption('baseUrl'); |
| 78 | + const defaultStorageName = `JupyterLite Storage - ${baseUrl}`; |
| 79 | + const storageName = getOption('settingsStorageName') || defaultStorageName; |
| 80 | + |
| 81 | + const localforageModule = await import('localforage'); |
| 82 | + const localforage = localforageModule.default; |
| 83 | + |
| 84 | + const settingsDB = localforage.createInstance({ |
| 85 | + name: storageName, |
| 86 | + storeName: 'settings' |
| 87 | + }); |
| 88 | + |
| 89 | + const key = '@jupyterlab/apputils-extension:themes'; |
| 90 | + const settings = await settingsDB.getItem(key); |
| 91 | + |
| 92 | + let isDarkTheme = false; |
| 93 | + |
| 94 | + if (settings) { |
| 95 | + // Use regex to find "theme": "name of theme" pattern, since the |
| 96 | + // settings are stored as a raw string |
| 97 | + const themeRegex = /"theme"\s*:\s*"([^"]+)"/i; |
| 98 | + const matches = settings.match(themeRegex); |
| 99 | + |
| 100 | + if (matches && matches[1]) { |
| 101 | + const themeName = matches[1].toLowerCase(); |
| 102 | + isDarkTheme = |
| 103 | + themeName.includes('dark') || |
| 104 | + themeName.includes('night') || |
| 105 | + themeName.includes('black'); |
| 106 | + } |
| 107 | + } |
| 108 | + |
| 109 | + document.body.classList.remove('jp-mod-dark', 'jp-mod-light'); |
| 110 | + |
| 111 | + if (isDarkTheme) { |
| 112 | + document.body.classList.add('jp-mod-dark'); |
| 113 | + } else { |
| 114 | + document.body.classList.add('jp-mod-light'); |
| 115 | + } |
| 116 | + } catch (e) { |
| 117 | + console.warn('Could not apply theme to loading indicator:', e); |
| 118 | + // Fallback to light theme on error |
| 119 | + document.body.classList.remove('jp-mod-dark'); |
| 120 | + document.body.classList.add('jp-mod-light'); |
| 121 | + } |
| 122 | +} |
| 123 | + |
| 124 | +// eslint-disable-next-line no-undef |
| 125 | +__webpack_public_path__ = getOption('fullStaticUrl') + '/'; |
| 126 | + |
| 127 | +function loadScript(url) { |
| 128 | + return new Promise((resolve, reject) => { |
| 129 | + const newScript = document.createElement('script'); |
| 130 | + newScript.onerror = reject; |
| 131 | + newScript.onload = resolve; |
| 132 | + newScript.async = true; |
| 133 | + document.head.appendChild(newScript); |
| 134 | + newScript.src = url; |
| 135 | + }); |
| 136 | +} |
| 137 | + |
| 138 | +async function loadComponent(url, scope) { |
| 139 | + await loadScript(url); |
| 140 | + |
| 141 | + // From https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers |
| 142 | + await __webpack_init_sharing__('default'); |
| 143 | + const container = window._JUPYTERLAB[scope]; |
| 144 | + // Initialize the container, it may provide shared modules and may need ours |
| 145 | + await container.init(__webpack_share_scopes__.default); |
| 146 | +} |
| 147 | + |
| 148 | +void (async function bootstrap() { |
| 149 | + await applyThemeToAppLoadingIndicator(); |
| 150 | + |
| 151 | + // This is all the data needed to load and activate plugins. This should be |
| 152 | + // gathered by the server and put onto the initial page template. |
| 153 | + const extension_data = getOption('federated_extensions'); |
| 154 | + |
| 155 | + // We first load all federated components so that the shared module |
| 156 | + // deduplication can run and figure out which shared modules from all |
| 157 | + // components should be actually used. We have to do this before importing |
| 158 | + // and using the module that actually uses these components so that all |
| 159 | + // dependencies are initialized. |
| 160 | + let labExtensionUrl = getOption('fullLabextensionsUrl'); |
| 161 | + const extensions = await Promise.allSettled( |
| 162 | + extension_data.map(async data => { |
| 163 | + await loadComponent(`${labExtensionUrl}/${data.name}/${data.load}`, data.name); |
| 164 | + }) |
| 165 | + ); |
| 166 | + |
| 167 | + extensions.forEach(p => { |
| 168 | + if (p.status === 'rejected') { |
| 169 | + // There was an error loading the component |
| 170 | + console.error(p.reason); |
| 171 | + } |
| 172 | + }); |
| 173 | + |
| 174 | + // Now that all federated containers are initialized with the main |
| 175 | + // container, we can import the main function. |
| 176 | + let main = (await import('./index.js')).main; |
| 177 | + await main(); |
| 178 | + |
| 179 | + hideAppLoadingIndicator(); |
| 180 | +})(); |
0 commit comments