Plugins param

package.json

@@ -14,6 +14,7 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "babel-loader": "^9.1.2",
+    "prettier": "^3.0.3",
     "webpack": "^5.85.0",
     "webpack-cli": "^5.1.1"
   }

srcjs/components/JsonView.jsx

@@ -7,17 +7,38 @@ import { messageShiny } from '../utils'
 
 export default function View(props) {
   const configObject = JSON.parse(props.config)
-  const { assembly, tracks, defaultSession, theme, text_index } = configObject
-  const location = props.location
-  const state = createViewState({
+  const {
     assembly,
     tracks,
     defaultSession,
-    location,
-    onChange: messageShiny,
-    configuration: { theme },
-    aggregateTextSearchAdapters: [text_index],
-  })
+    theme,
+    text_index,
+    plugins: pluginInput = [],
+  } = configObject
+  const location = props.location
+
+  const [viewState, setViewState] = useState()
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        const plugins = await loadPlugins(pluginInput)
+        const state = createViewState({
+          assembly,
+          tracks,
+          defaultSession,
+          location,
+          onChange: messageShiny,
+          configuration: { theme },
+          aggregateTextSearchAdapters: [text_index],
+          plugins: plugins.map(p => p.plugin),
+        })
+        setViewState(state)
+      } catch (e) {
+        setError(e)
+      }
+    })()
+  }, [])
 
-  return <JBrowseLinearGenomeView viewState={state} />
+  return <JBrowseLinearGenomeView viewState={viewState} />
 }