diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts index 3bb82e8a9..3af36765a 100644 --- a/client/src/app/core/plugins/plugin.service.ts +++ b/client/src/app/core/plugins/plugin.service.ts @@ -18,6 +18,7 @@ import { PublicServerSetting } from '@shared/models/plugins/public-server.settin import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' import { RegisterClientHelpers } from '../../../types/register-client-option.model' import { PluginTranslation } from '@shared/models/plugins/plugin-translation.model' +import { importModule } from '@app/shared/misc/utils' interface HookStructValue extends RegisterClientHookOptions { plugin: ServerConfigPlugin @@ -222,7 +223,7 @@ export class PluginService implements ClientHook { console.log('Loading script %s of plugin %s.', clientScript.script, plugin.name) return this.zone.runOutsideAngular(() => { - return import(/* webpackIgnore: true */ clientScript.script) + return importModule(clientScript.script) .then((script: ClientScriptModule) => script.register({ registerHook, peertubeHelpers })) .then(() => this.sortHooksByPriority()) .catch(err => console.error('Cannot import or register plugin %s.', pluginInfo.plugin.name, err)) diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 85fc1c3a0..f26240d21 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -134,6 +134,41 @@ function scrollToTop () { window.scroll(0, 0) } +// Thanks: https://github.com/uupaa/dynamic-import-polyfill +function importModule (path: string) { + return new Promise((resolve, reject) => { + const vector = '$importModule$' + Math.random().toString(32).slice(2) + const script = document.createElement('script') + + const destructor = () => { + delete window[ vector ] + script.onerror = null + script.onload = null + script.remove() + URL.revokeObjectURL(script.src) + script.src = '' + } + + script.defer = true + script.type = 'module' + + script.onerror = () => { + reject(new Error(`Failed to import: ${path}`)) + destructor() + } + script.onload = () => { + resolve(window[ vector ]) + destructor() + } + const absURL = (environment.apiUrl || window.location.origin) + path + const loader = `import * as m from "${absURL}"; window.${vector} = m;` // export Module + const blob = new Blob([ loader ], { type: 'text/javascript' }) + script.src = URL.createObjectURL(blob) + + document.head.appendChild(script) + }) +} + export { sortBy, durationToString, @@ -147,5 +182,6 @@ export { objectToFormData, objectLineFeedToHtml, removeElementFromArray, + importModule, scrollToTop }