[update docs] Add demo of using farm-fe bundler for embedded componen…

…ts (#4466)
GMOD · Jun 24, 2024 · 3091e05 · 3091e05
1 parent deb2102
commit 3091e05
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 107 deletions.
diff --git a/embedded_demos/clone_demos.sh b/embedded_demos/clone_demos.sh
@@ -3,16 +3,16 @@ mkdir $JB2TMP
 cd $JB2TMP
 git clone git@github.com:GMOD/jbrowse-react-linear-genome-view-vanillajs-demo
 git clone git@github.com:GMOD/jbrowse-react-linear-genome-view-cra5-demo
-git clone git@github.com:GMOD/jbrowse-react-linear-genome-view-cra4-demo
 git clone git@github.com:GMOD/jbrowse-react-linear-genome-view-vite-demo
+git clone git@github.com:GMOD/jbrowse-react-linear-genome-view-farm-demo
 git clone git@github.com:GMOD/jbrowse-react-linear-genome-view-nextjs-demo
 
 git clone git@github.com:GMOD/jbrowse-react-circular-genome-view-vanillajs-demo
 git clone git@github.com:GMOD/jbrowse-react-circular-genome-view-cra5-demo
-git clone git@github.com:GMOD/jbrowse-react-circular-genome-view-cra4-demo
 git clone git@github.com:GMOD/jbrowse-react-circular-genome-view-nextjs-demo
 
 git clone git@github.com:GMOD/jbrowse-react-app-nextjs-demo
 git clone git@github.com:GMOD/jbrowse-react-app-vite-demo
+git clone git@github.com:GMOD/jbrowse-react-app-farm-demo
 git clone git@github.com:GMOD/jbrowse-react-app-cra5-demo
 cd -
diff --git a/embedded_demos/copy_files.sh b/embedded_demos/copy_files.sh
@@ -4,16 +4,19 @@
 cp base/linear/assembly.ts $JB2TMP/jbrowse-react-linear-genome-view/src/
 cp base/linear/assembly.ts $JB2TMP/jbrowse-react-linear-genome-view-cra5/src/
 cp base/linear/assembly.ts $JB2TMP/jbrowse-react-linear-genome-view-vite/src/
+cp base/linear/assembly.ts $JB2TMP/jbrowse-react-linear-genome-view-farm/src/
 cp base/linear/assembly.ts $JB2TMP/jbrowse-react-linear-genome-view-nextjs/utils/
 cp base/linear/assembly.ts $JB2TMP/jbrowse-react-linear-genome-view-vanillajs/assembly.js
 cp base/linear/tracks.ts $JB2TMP/jbrowse-react-linear-genome-view/src/
 cp base/linear/tracks.ts $JB2TMP/jbrowse-react-linear-genome-view-cra5/src/
 cp base/linear/tracks.ts $JB2TMP/jbrowse-react-linear-genome-view-vite/src/
+cp base/linear/tracks.ts $JB2TMP/jbrowse-react-linear-genome-view-farm/src/
 cp base/linear/tracks.ts $JB2TMP/jbrowse-react-linear-genome-view-nextjs/utils/
 cp base/linear/tracks.ts $JB2TMP/jbrowse-react-linear-genome-view-vanillajs/tracks.js
 cp base/linear/defaultSession.ts $JB2TMP/jbrowse-react-linear-genome-view/src/
 cp base/linear/defaultSession.ts $JB2TMP/jbrowse-react-linear-genome-view-cra5/src/
 cp base/linear/defaultSession.ts $JB2TMP/jbrowse-react-linear-genome-view-vite/src/
+cp base/linear/defaultSession.ts $JB2TMP/jbrowse-react-linear-genome-view-farm/src/
 cp base/linear/defaultSession.ts $JB2TMP/jbrowse-react-linear-genome-view-nextjs/utils/
 cp base/linear/defaultSession.ts $JB2TMP/jbrowse-react-linear-genome-view-vanillajs/defaultSession.js
 
@@ -33,4 +36,5 @@ cp base/circular/defaultSession.ts $JB2TMP/jbrowse-react-circular-genome-view-va
 ## react app
 cp base/app/config.ts $JB2TMP/jbrowse-react-app-cra5/src/
 cp base/app/config.ts $JB2TMP/jbrowse-react-app-vite/src/
+cp base/app/config.ts $JB2TMP/jbrowse-react-app-farm/src/
 cp base/app/config.ts $JB2TMP/jbrowse-react-app-nextjs/utils/
diff --git a/embedded_demos/update_all.sh b/embedded_demos/update_all.sh
@@ -1,6 +1,5 @@
 #!/bin/bash
 set -e
-export NODE_OPTIONS=--openssl-legacy-provider
 ./update_demos.sh
 ./deploy_demos.sh
 ./push_demos.sh

diff --git a/website/docs/embedded_components.md b/website/docs/embedded_components.md
@@ -24,6 +24,7 @@ bundlers
 | create-react-app v5 | [demo](https://jbrowse.org/demos/app-cra5/)     | [source code](https://github.com/GMOD/jbrowse-react-app-cra5-demo)      | For create-react-app v5, we use craco to update the webpack config to polyfill some node modules. This demo uses webworkers.                                                 |
 | next.js             | [demo](https://jbrowse.org/demos/app-nextjs)    | [source code](https://github.com/GMOD/jbrowse-react-app-nextjs-demo)    | Uses next.js 14. Currently is hardcoded to use /demos/app-nextjs/ as sub-uri, update next.config.js to customize as needed. This demo was updated to use webworkers in 2024. |
 | vite                | [demo](https://jbrowse.org/demos/app-vite)      | [source code](https://github.com/GMOD/jbrowse-react-app-vite-demo)      | Uses vite. This demo was updated to utilize the webworkers in 2024                                                                                                           |
+| farm-fe             | [demo](https://jbrowse.org/demos/app-farm)      | [source code](https://github.com/GMOD/jbrowse-react-app-farm-demo)      | Uses farm (https://github.com/farm-fe/farm)                                                                                                                                  |
 | vanillajs           | [demo](https://jbrowse.org/demos/app-vanillajs) | [source code](https://github.com/GMOD/jbrowse-react-app-vanillajs-demo) |                                                                                                                                                                              |
 
 ## @jbrowse/react-linear-genome-view
@@ -41,9 +42,9 @@ using different bundlers
 
 | Bundler             | Demo                                            | Source code                                                                            | Note                                                                                                                                                                                                      |
 | ------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| create-react-app v4 | [demo](https://jbrowse.org/demos/lgv/)          | [source code](https://github.com/GMOD/jbrowse-react-linear-genome-view-cra4-demo)      | No polyfills needed in create-react-app v4. on newer versions of node, you can need to use `export NODE_OPTIONS=--openssl-legacy-provider` before building cra4 apps                                      |
 | create-react-app v5 | [demo](https://jbrowse.org/demos/lgv-cra5/)     | [source code](https://github.com/GMOD/jbrowse-react-linear-genome-view-cra5-demo)      | For create-react-app v5, we use craco to update the webpack config to polyfill some node modules. This demo uses webworkers                                                                               |
 | vite                | [demo](https://jbrowse.org/demos/lgv-vite)      | [source code](https://github.com/GMOD/jbrowse-react-linear-genome-view-vite-demo)      | Uses vite. This demo was updated to utilize webworkers in 2024                                                                                                                                            |
+| farm-fe             | [demo](https://jbrowse.org/demos/lgv-farm)      | [source code](https://github.com/GMOD/jbrowse-react-linear-genome-view-farm-demo)      | Uses farm (https://github.com/farm-fe/farm)                                                                                                                                                               |
 | next.js             | [demo](https://jbrowse.org/demos/lgv-nextjs)    | [source code](https://github.com/GMOD/jbrowse-react-linear-genome-view-nextjs-demo)    | Uses next.js 14. Currently is hardcoded to use /demos/lgv-nextjs/ as sub-uri, update next.config.js to customize as needed. This demo was updated to use webworkers in 2024                               |
 | vanilla js          | [demo](https://jbrowse.org/demos/lgv-vanillajs) | [source code](https://github.com/GMOD/jbrowse-react-linear-genome-view-vanillajs-demo) | Uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling. see also dev tutorial here https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/01_introduction/ |
 
@@ -59,9 +60,8 @@ This component consists of a single JBrowse 2 circular view.
 Here is a table of different usages of the `@jbrowse/react-circular-genome-view`
 using different bundlers
 
-| Syntax              | Demo                                            | Source code                                                                              | Note                                                                                                                                                                 |
-| ------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| create-react-app v4 | [demo](https://jbrowse.org/demos/cgv/)          | [source code](https://github.com/GMOD/jbrowse-react-circular-genome-view-cra4-demo)      | no polyfills needed in create-react-app v4. on newer versions of node, you can need to use `export NODE_OPTIONS=--openssl-legacy-provider` before building cra4 apps |
-| create-react-app v5 | [demo](https://jbrowse.org/demos/cgv-cra5/)     | [source code](https://github.com/GMOD/jbrowse-react-circular-genome-view-cra5-demo)      | for create-react-app v5, we use craco to update the webpack config to polyfill some node modules                                                                     |
-| vanilla js          | [demo](https://jbrowse.org/demos/cgv-vanillajs) | [source code](https://github.com/GMOD/jbrowse-react-circular-genome-view-vanillajs-demo) | uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling                                                                         |
-| nextjs              | [demo](https://jbrowse.org/demos/cgv-nextjs)    | [source code](https://github.com/GMOD/jbrowse-react-circular-genome-view-nextjs-demo)    | uses next.js                                                                                                                                                         |
+| Syntax              | Demo                                            | Source code                                                                              | Note                                                                                             |
+| ------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| create-react-app v5 | [demo](https://jbrowse.org/demos/cgv-cra5/)     | [source code](https://github.com/GMOD/jbrowse-react-circular-genome-view-cra5-demo)      | for create-react-app v5, we use craco to update the webpack config to polyfill some node modules |
+| vanilla js          | [demo](https://jbrowse.org/demos/cgv-vanillajs) | [source code](https://github.com/GMOD/jbrowse-react-circular-genome-view-vanillajs-demo) | uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling     |
+| nextjs              | [demo](https://jbrowse.org/demos/cgv-nextjs)    | [source code](https://github.com/GMOD/jbrowse-react-circular-genome-view-nextjs-demo)    | uses next.js                                                                                     |