Support umdLoc/esmLoc for plugins

packages/core/PluginLoader.ts

@@ -229,7 +229,7 @@ export default class PluginLoader {
     )
   }
 
-  async load(windowHref: string) {
+  async load(windowHref: string = '') {
     return Promise.all(
       this.definitions.map(async definition => ({
         plugin: await this.loadPlugin(definition, windowHref),

products/jbrowse-desktop/src/StartScreen/util.tsx

@@ -42,11 +42,11 @@ const defaultInternetAccounts = [
   },
 ]
 
-export async function loadPluginManager(filePath: string) {
-  const snap = await ipcRenderer.invoke('loadSession', filePath)
+export async function loadPluginManager(configPath: string) {
+  const snap = await ipcRenderer.invoke('loadSession', configPath)
   const pm = await createPluginManager(snap)
   // @ts-ignore
-  pm.rootModel?.setSessionPath(filePath)
+  pm.rootModel?.setSessionPath(configPath)
   return pm
 }
 
@@ -101,7 +101,7 @@ export async function createPluginManager(
     },
   })
   pluginLoader.installGlobalReExports(window)
-  const runtimePlugins = await pluginLoader.load()
+  const runtimePlugins = await pluginLoader.load(window.location.href)
   const pm = new PluginManager([
     ...corePlugins.map(P => ({
       plugin: new P(),

products/jbrowse-desktop/src/rpc.worker.ts

@@ -18,6 +18,7 @@ if (typeof __webpack_require__ === 'function') {
 
 interface WorkerConfiguration {
   plugins: PluginDefinition[]
+  windowHref: string
 }
 
 let jbPluginManager: PluginManager | undefined
@@ -46,7 +47,7 @@ async function getPluginManager() {
     fetchESM: url => import(/* webpackIgnore:true */ url),
   })
   pluginLoader.installGlobalReExports(self)
-  const runtimePlugins = await pluginLoader.load()
+  const runtimePlugins = await pluginLoader.load(config.windowHref)
   const plugins = [...corePlugins.map(p => ({ plugin: p })), ...runtimePlugins]
   const pluginManager = new PluginManager(plugins.map(P => new P.plugin()))
   pluginManager.createPluggableElements()

products/jbrowse-web/public/umd_plugin.js

@@ -0,0 +1,15 @@
+function MyComponent() {
+  return 'Hello world'
+}
+
+class MyClass2 {
+  name = 'UMDUrlPlugin'
+  install(pluginManager) {}
+  configure() {}
+}
+
+// the plugin will be included in both the main thread and web worker, so
+// install plugin to either window or self (webworker global scope)
+;(typeof self !== 'undefined' ? self : window).JBrowsePluginUMDUrlPlugin = {
+  default: MyClass2,
+}

products/jbrowse-web/src/SessionLoader.ts

@@ -14,24 +14,23 @@ import { openLocation } from '@jbrowse/core/util/io'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import shortid from 'shortid'
 
-function addRelativeUris(
-  config: SnapshotOut<AnyConfigurationModel>,
-  configUri: URL,
-) {
+type Config = SnapshotOut<AnyConfigurationModel>
+
+function addRelativeUris(config: Config, base: URL) {
   if (typeof config === 'object') {
     for (const key of Object.keys(config)) {
       if (typeof config[key] === 'object') {
-        addRelativeUris(config[key], configUri)
+        addRelativeUris(config[key], base)
       } else if (key === 'uri') {
-        config.baseUri = configUri.href
+        config.baseUri = base.href
       }
     }
   }
 }
 
 // raw readConf alternative for before conf is initialized
 function readConf(
-  { configuration = {} }: { configuration?: { [key: string]: string } },
+  { configuration = {} }: { configuration?: Config },
   attr: string,
   def: string,
 ) {
@@ -54,32 +53,25 @@ async function checkPlugins(pluginsToCheck: PluginDefinition[]) {
     if (isUMDPluginDefinition(p)) {
       return Boolean(
         storePlugins.plugins.find(
-          storePlugin =>
-            isUMDPluginDefinition(storePlugin) &&
-            (('url' in storePlugin &&
-              'url' in p &&
-              storePlugin.url === p.url) ||
-              ('umdUrl' in storePlugin &&
-                'umdUrl' in p &&
-                storePlugin.umdUrl === p.umdUrl)),
+          p =>
+            isUMDPluginDefinition(p) &&
+            (('url' in p && 'url' in p && p.url === p.url) ||
+              ('umdUrl' in p && 'umdUrl' in p && p.umdUrl === p.umdUrl)),
         ),
       )
     }
     if (isESMPluginDefinition(p)) {
       return Boolean(
         storePlugins.plugins.find(
-          storePlugin =>
-            isESMPluginDefinition(storePlugin) &&
-            storePlugin.esmUrl === p.esmUrl,
+          p =>
+            isESMPluginDefinition(p) && 'esmUrl' in p && p.esmUrl === p.esmUrl,
         ),
       )
     }
     if (isCJSPluginDefinition(p)) {
       return Boolean(
         storePlugins.plugins.find(
-          storePlugin =>
-            isCJSPluginDefinition(storePlugin) &&
-            storePlugin.cjsUrl === p.cjsUrl,
+          p => isCJSPluginDefinition(p) && p.cjsUrl === p.cjsUrl,
         ),
       )
     }
@@ -213,7 +205,7 @@ const SessionLoader = types
           fetchESM: url => import(/* webpackIgnore:true */ url),
         })
         pluginLoader.installGlobalReExports(window)
-        const runtimePlugins = await pluginLoader.load()
+        const runtimePlugins = await pluginLoader.load(window.location.href)
         self.setRuntimePlugins([...runtimePlugins])
       } catch (e) {
         console.error(e)
@@ -226,7 +218,7 @@ const SessionLoader = types
           fetchESM: url => import(/* webpackIgnore:true */ url),
         })
         pluginLoader.installGlobalReExports(window)
-        const plugins = await pluginLoader.load()
+        const plugins = await pluginLoader.load(self.configPath || '')
         self.setSessionPlugins([...plugins])
       } catch (e) {
         console.error(e)
@@ -273,19 +265,15 @@ const SessionLoader = types
         const configPlugins = config.plugins || []
         const configPluginsAllowed = await checkPlugins(configPlugins)
         if (!configPluginsAllowed) {
-          self.setSessionTriaged({
+          return self.setSessionTriaged({
             snap: config,
             origin: 'config',
             reason: configPlugins,
           })
-        } else {
-          await this.fetchPlugins(config)
-          self.setConfigSnapshot(config)
         }
-      } else {
-        await this.fetchPlugins(config)
-        self.setConfigSnapshot(config)
       }
+      await this.fetchPlugins(config)
+      self.setConfigSnapshot(config)
     },
 
     async fetchSessionStorageSession() {
@@ -296,8 +284,7 @@ const SessionLoader = types
       if (sessionStr) {
         const sessionSnap = JSON.parse(sessionStr).session || {}
         if (query === sessionSnap.id) {
-          await this.setSessionSnapshot(sessionSnap)
-          return
+          return this.setSessionSnapshot(sessionSnap)
         }
       }
 

products/jbrowse-web/src/__snapshots__/jbrowseModel.test.ts.snap

@@ -276,7 +276,18 @@ Object {
       "type": "GoogleDriveOAuthInternetAccount",
     },
   ],
-  "plugins": Array [],
+  "plugins": Array [
+    Object {
+      "name": "UMDLocPlugin",
+      "umdLoc": Object {
+        "uri": "umd_plugin.js",
+      },
+    },
+    Object {
+      "name": "UMDUrlPlugin",
+      "umdUrl": "umd_plugin.js",
+    },
+  ],
   "tracks": Array [
     Object {
       "adapter": Object {

products/jbrowse-web/src/rpc.worker.ts

@@ -19,6 +19,7 @@ if (typeof __webpack_require__ === 'function') {
 
 interface WorkerConfiguration {
   plugins: PluginDefinition[]
+  windowHref: string
 }
 
 let jbPluginManager: PluginManager | undefined
@@ -47,7 +48,7 @@ async function getPluginManager() {
     fetchESM: url => import(/* webpackIgnore:true */ url),
   })
   pluginLoader.installGlobalReExports(self)
-  const runtimePlugins = await pluginLoader.load()
+  const runtimePlugins = await pluginLoader.load(config.windowHref)
   const plugins = [...corePlugins.map(p => ({ plugin: p })), ...runtimePlugins]
   const pluginManager = new PluginManager(plugins.map(P => new P.plugin()))
   pluginManager.createPluggableElements()
@@ -80,31 +81,22 @@ function wrapForRpc(func: RpcFunc) {
   }
 }
 
-getPluginManager()
-  .then(pluginManager => {
-    const rpcConfig = Object.fromEntries(
-      pluginManager.getElementTypesInGroup('rpc method').map(entry => {
-        const { execute, name } = entry as RpcMethodType
-        return [name, wrapForRpc((execute as RpcFunc).bind(entry))]
-      }),
-    )
+getPluginManager().then(pluginManager => {
+  const rpcConfig = Object.fromEntries(
+    pluginManager.getElementTypesInGroup('rpc method').map(entry => {
+      const { execute, name } = entry as RpcMethodType
+      return [name, wrapForRpc((execute as RpcFunc).bind(entry))]
+    }),
+  )
 
-    // @ts-ignore
-    self.rpcServer = new RpcServer.Server({
-      ...rpcConfig,
-      ...remoteAbortRpcHandler(),
-      ping: () => {}, // < the ping method is required by the worker driver for checking the health of the worker
-    })
-    postMessage('ready')
-  })
-  .catch(error => {
-    // @ts-ignore
-    self.rpcServer = new RpcServer.Server({
-      ping: () => {
-        throw error
-      },
-    })
+  // @ts-ignore
+  self.rpcServer = new RpcServer.Server({
+    ...rpcConfig,
+    ...remoteAbortRpcHandler(),
+    ping: () => {}, // < the ping method is required by the worker driver for checking the health of the worker
   })
+  postMessage('ready')
+})
 
 export default () => {
   /* do nothing */

test_data/volvox/config.json

@@ -1,4 +1,8 @@
 {
+  "plugins": [
+    { "name": "UMDLocPlugin", "umdLoc": { "uri": "umd_plugin.js" } },
+    { "name": "UMDUrlPlugin", "umdUrl": "umd_plugin.js" }
+  ],
   "assemblies": [
     {
       "name": "volvox",

test_data/volvox/umd_plugin.js

@@ -0,0 +1,11 @@
+class MyClass {
+  name = 'UMDLocPlugin'
+  install(pluginManager) {}
+  configure() {}
+}
+
+// the plugin will be included in both the main thread and web worker, so
+// install plugin to either window or self (webworker global scope)
+;(typeof self !== 'undefined' ? self : window).JBrowsePluginUMDLocPlugin = {
+  default: MyClass,
+}