From a373901c00f2c4eadb5769c3bc7091858b511f1a Mon Sep 17 00:00:00 2001 From: guerler Date: Thu, 5 Dec 2024 14:41:12 +0300 Subject: [PATCH 01/17] Add jbrowse vite project --- packages/jbrowse/.gitignore | 6 + packages/jbrowse/.prettierrc.json | 7 + packages/jbrowse/README.md | 21 + packages/jbrowse/eslint.config.js | 28 + packages/jbrowse/index.html | 13 + packages/jbrowse/package.json | 42 + packages/jbrowse/src/App.tsx | 82 + packages/jbrowse/src/config.ts | 277 +++ packages/jbrowse/src/favicon.svg | 15 + packages/jbrowse/src/index.css | 13 + packages/jbrowse/src/logo.svg | 7 + packages/jbrowse/src/main.tsx | 11 + packages/jbrowse/src/rpcWorker.ts | 2 + packages/jbrowse/src/vite-env.d.ts | 1 + packages/jbrowse/tsconfig.app.json | 26 + packages/jbrowse/tsconfig.json | 7 + packages/jbrowse/tsconfig.node.json | 24 + packages/jbrowse/vite.config.ts | 14 + packages/jbrowse/yarn.lock | 3398 +++++++++++++++++++++++++++ 19 files changed, 3994 insertions(+) create mode 100644 packages/jbrowse/.gitignore create mode 100644 packages/jbrowse/.prettierrc.json create mode 100644 packages/jbrowse/README.md create mode 100644 packages/jbrowse/eslint.config.js create mode 100644 packages/jbrowse/index.html create mode 100644 packages/jbrowse/package.json create mode 100644 packages/jbrowse/src/App.tsx create mode 100644 packages/jbrowse/src/config.ts create mode 100644 packages/jbrowse/src/favicon.svg create mode 100644 packages/jbrowse/src/index.css create mode 100644 packages/jbrowse/src/logo.svg create mode 100644 packages/jbrowse/src/main.tsx create mode 100644 packages/jbrowse/src/rpcWorker.ts create mode 100644 packages/jbrowse/src/vite-env.d.ts create mode 100644 packages/jbrowse/tsconfig.app.json create mode 100644 packages/jbrowse/tsconfig.json create mode 100644 packages/jbrowse/tsconfig.node.json create mode 100644 packages/jbrowse/vite.config.ts create mode 100644 packages/jbrowse/yarn.lock diff --git a/packages/jbrowse/.gitignore b/packages/jbrowse/.gitignore new file mode 100644 index 00000000..d08e4fcf --- /dev/null +++ b/packages/jbrowse/.gitignore @@ -0,0 +1,6 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local +*.tsbuildinfo diff --git a/packages/jbrowse/.prettierrc.json b/packages/jbrowse/.prettierrc.json new file mode 100644 index 00000000..c3e93040 --- /dev/null +++ b/packages/jbrowse/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "all", + "arrowParens": "avoid", + "proseWrap": "always" +} diff --git a/packages/jbrowse/README.md b/packages/jbrowse/README.md new file mode 100644 index 00000000..5741ce69 --- /dev/null +++ b/packages/jbrowse/README.md @@ -0,0 +1,21 @@ +# vite with @jbrowse/react-app + +This is a demo of using the @jbrowse/react-app NPM package with vite (see +https://vitejs.dev/) + +Vite is a build system that is very fast and becoming more popular, using +esbuild and rollup instead of webpack + +This particular demo includes several polyfills that are needed for JBrowse +including the Buffer polyfill + +## Demo of `@jbrowse/react-app` with vite + +See this app running at https://jbrowse.org/demos/app-vite/. + +## Usage + +Run `yarn` and then `yarn dev` to start a development instance + +Run `yarn build` which produces a `build` directory that can be deployed to a +static web server diff --git a/packages/jbrowse/eslint.config.js b/packages/jbrowse/eslint.config.js new file mode 100644 index 00000000..092408a9 --- /dev/null +++ b/packages/jbrowse/eslint.config.js @@ -0,0 +1,28 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' + +export default tseslint.config( + { ignores: ['dist'] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, + }, +) diff --git a/packages/jbrowse/index.html b/packages/jbrowse/index.html new file mode 100644 index 00000000..913d8110 --- /dev/null +++ b/packages/jbrowse/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/packages/jbrowse/package.json b/packages/jbrowse/package.json new file mode 100644 index 00000000..307ab227 --- /dev/null +++ b/packages/jbrowse/package.json @@ -0,0 +1,42 @@ +{ + "name": "vite-jbrowse-react-app", + "type": "module", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "preview": "vite preview", + "predeploy": "npm run build", + "deploy": "aws s3 sync --delete dist s3://jbrowse.org/demos/app-vite/", + "postdeploy": "AWS_PAGER=\"\" aws cloudfront create-invalidation --distribution-id E13LGELJOT4GQO --paths \"/demos/app-vite/*\"", + "lint": "eslint ." + }, + "dependencies": { + "@fontsource/roboto": "^5.0.2", + "@jbrowse/core": "^2.0.0", + "@jbrowse/react-app": "^2.0.0", + "@types/node": "^20.10.4", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "devDependencies": { + "@eslint/js": "^9.13.0", + "@types/react": "^18.2.43", + "@types/react-dom": "^18.0.9", + "@vitejs/plugin-react": "^4.2.1", + "@vitejs/plugin-vue": "^5.2.1", + "buffer": "^6.0.3", + "eslint": "^9.13.0", + "eslint-plugin-react-hooks": "^5.0.0", + "eslint-plugin-react-refresh": "^0.4.14", + "globals": "^15.11.0", + "prettier": "^3.2.5", + "typescript": "^5.3.3", + "typescript-eslint": "^8.11.0", + "vite": "^5.0.7" + }, + "resolutions": { + "@mui/icons-material": "6.0.2" + } +} diff --git a/packages/jbrowse/src/App.tsx b/packages/jbrowse/src/App.tsx new file mode 100644 index 00000000..833b1e57 --- /dev/null +++ b/packages/jbrowse/src/App.tsx @@ -0,0 +1,82 @@ +import { useState, useEffect } from 'react' +import { createRoot, hydrateRoot } from 'react-dom/client' +import { createViewState, JBrowseApp } from '@jbrowse/react-app' +// @ts-expect-error no font types +import '@fontsource/roboto' + +import config from './config' + +type ViewModel = ReturnType + +function View() { + const [viewState, setViewState] = useState() + const [stateSnapshot, setStateSnapshot] = useState('') + + useEffect(() => { + const state = createViewState({ + config: { + ...config, + + // remove this and the makeWorkerInstance if you do not want to use web + // workers + configuration: { + rpc: { + defaultDriver: 'WebWorkerRpcDriver', + }, + }, + }, + + hydrateFn: hydrateRoot, + createRootFn: createRoot, + makeWorkerInstance: () => { + return new Worker(new URL('./rpcWorker', import.meta.url), { + type: 'module', + }) + }, + }) + setViewState(state) + }, []) + + if (!viewState) { + return null + } + + return ( + <> +

JBrowse 2 React App Demo (with vite)

+ +

Code

+

+ The code for this app is available at{' '} + + https://github.com/GMOD/jbrowse-react-app-vite-demo + + . +

+ +

See the state

+
+

+ The button below will show you the current session, which includes + things like what region the view is showing and which tracks are open. + This session JSON object can be used in the{' '} + defaultSession of createViewState. +

+ +
+