Demo of worker plugin

package.json

@@ -7,7 +7,8 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
     "@fontsource/roboto": "^5.0.13",
-    "@jbrowse/react-linear-genome-view": "^3.0.0",
+    "@jbrowse/core": "^3.0.1",
+    "@jbrowse/react-linear-genome-view": "^3.0.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "node-polyfill-webpack-plugin": "^4.0.0",

src/App.tsx

@@ -4,33 +4,31 @@ import {
   createViewState,
   JBrowseLinearGenomeView,
 } from '@jbrowse/react-linear-genome-view'
-import makeWorkerInstance from '@jbrowse/react-linear-genome-view/esm/makeWorkerInstance'
 
 import assembly from './assembly'
 import tracks from './tracks'
 import defaultSession from './defaultSession'
+import MyPlugin from './MyPlugin'
 
 type ViewModel = ReturnType<typeof createViewState>
 
 function View() {
   const [viewState, setViewState] = useState<ViewModel>()
-  const [patches, setPatches] = useState('')
   const [stateSnapshot, setStateSnapshot] = useState('')
 
   useEffect(() => {
     const state = createViewState({
       assembly,
       tracks,
-      onChange: (patch: any) => {
-        setPatches(previous => previous + JSON.stringify(patch) + '\n')
-      },
+      plugins: [MyPlugin],
       defaultSession,
       configuration: {
         rpc: {
           defaultDriver: 'WebWorkerRpcDriver',
         },
       },
-      makeWorkerInstance,
+      makeWorkerInstance: () =>
+        new Worker(new URL('./rpcWorker', import.meta.url)),
     })
     setViewState(state)
   }, [])
@@ -106,7 +104,6 @@ function View() {
         </a>
         . The patches for the component on this page are shown below.
       </p>
-      <textarea value={patches} readOnly rows={5} cols={80} wrap="off" />
     </>
   )
 }

src/MyPlugin.ts

@@ -0,0 +1,12 @@
+import type PluginManager from '@jbrowse/core/PluginManager'
+import Plugin from '@jbrowse/core/Plugin'
+
+export default class MyPlugin extends Plugin {
+  name = 'MyPlugin'
+  install(pluginManager: PluginManager) {}
+  configure(pluginManager: PluginManager) {
+    pluginManager.jexl.addFunction('colorFeature', feature => {
+      return 'purple'
+    })
+  }
+}

src/rpcWorker.ts

@@ -0,0 +1,12 @@
+import '@jbrowse/react-linear-genome-view/esm/workerPolyfill'
+import { initializeWorker } from '@jbrowse/product-core'
+import { enableStaticRendering } from 'mobx-react'
+import corePlugins from '@jbrowse/react-linear-genome-view/esm/corePlugins'
+import MyPlugin from './MyPlugin'
+
+enableStaticRendering(true)
+
+initializeWorker([...corePlugins, MyPlugin], {
+  fetchESM: url => import(url),
+})
+export default function doNothing() {}

src/tracks.ts

@@ -93,6 +93,18 @@ const tracks = [
         },
       },
     },
+
+    displays: [
+      {
+        type: 'LinearVariantDisplay',
+        displayId:
+          'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf-LinearVariantDisplay',
+        renderer: {
+          type: 'SvgFeatureRenderer',
+          color1: 'jexl:colorFeature(feature)',
+        },
+      },
+    ],
   },
   {
     type: 'QuantitativeTrack',