Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add demo of using farm-fe bundler for embedded components #4466

Merged
merged 3 commits into from
Jun 24, 2024
Merged

Add demo of using farm-fe bundler for embedded components #4466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
700c588
Add farm
cmdcolin Jun 23, 2024
02af6ae
[skip ci] Remove cra4
cmdcolin Jun 23, 2024
038ee32
[skip ci] Update the deploy scripts
cmdcolin Jun 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions embedded_demos/clone_demos.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -
4 changes: 4 additions & 0 deletions embedded_demos/copy_files.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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/
1 change: 0 additions & 1 deletion embedded_demos/update_all.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
#!/bin/bash
set -e
export NODE_OPTIONS=--openssl-legacy-provider
./update_demos.sh
./deploy_demos.sh
./push_demos.sh
Expand Down
14 changes: 7 additions & 7 deletions website/docs/embedded_components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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/ |

Expand All @@ -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 |
Loading