From 29e604fe319879b218a7ac596e76afd45f6eb2df Mon Sep 17 00:00:00 2001 From: Colin Date: Wed, 28 Feb 2024 09:17:36 -0500 Subject: [PATCH] Run prettier --- .prettierrc.json | 7 + README.md | 335 ++++++++++++++++++------------- cypress/fixtures/hello_view.json | 14 +- cypress/tsconfig.json | 4 +- package.json | 7 +- scripts/tsconfig.json | 4 +- tsconfig.json | 6 +- tsconfig.test.json | 4 +- yarn.lock | 8 +- 9 files changed, 215 insertions(+), 174 deletions(-) create mode 100644 .prettierrc.json diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..c3e9304 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "all", + "arrowParens": "avoid", + "proseWrap": "always" +} diff --git a/README.md b/README.md index 1f97da2..1dfe6f7 100644 --- a/README.md +++ b/README.md @@ -1,144 +1,191 @@ -# jbrowse-plugin-template - -> Template to quickly start a new JBrowse plugin - -## Usage - -You can use this template to create a new GitHub repository or a new local -project. - -### Software requirements - -- [git](https://git-scm.com/downloads) -- [Node.js](https://nodejs.org/en/download/) (version 10 or greater) -- [yarn](https://yarnpkg.com/en/docs/install) (or npm which comes with Node.js) -- [JBrowse 2](https://github.com/gmod/jbrowse-components) (version 2.0 or greater) - -### Create a new project from this template - -You can click the "Use this template" button in the repository (instructions -[here](https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template)): - -![screenshot showing where "Use this template" button is in the GitHub repository page](https://user-images.githubusercontent.com/25592344/102671843-eb8ae380-414c-11eb-84e5-6ebf10bd89f9.png) - -Or you can use the GitHub CLI: - -```console -$ gh repo create jbrowse-plugin-my-project --template https://github.com/GMOD/jbrowse-plugin-template.git -``` - -Or you can start a plugin locally: - -```console -$ git clone https://github.com/GMOD/jbrowse-plugin-template.git jbrowse-plugin-my-project -$ cd jbrowse-plugin-my-project -$ rm -rf .git -$ # If you want to use Git, re-initialize it -$ git init -``` - -## Getting started - -### Setup - -Run `yarn init` (or `npm init`) and answer the prompts to fill out the -information for your plugin - -- Make sure you at least enter a "name" (probably starting with - "jbrowse-plugin-", or "@myscope/jbrowse-plugin-" if you're going to publish to - an NPM organization) -- Other fields may be left blank -- leave the "entry point" as `dist/index.js` - -Now run `yarn` (or `rm yarn.lock && npm install` to use npm instead of yarn) to install the necessary dependencies. - -After this, run `yarn setup` (or `npm run setup`). -This configures your project, and adds a build of JBrowse 2 that can be used to test your plugin during development. - -### Build - -```console -$ yarn build ## or `npm run build` -``` - -### Development - -To develop against JBrowse Web: - -- Start a development version of JBrowse Web (see - [here](https://github.com/GMOD/jbrowse-components/blob/master/CONTRIBUTING.md)) -- In this project, run `yarn start` (or `npm run start`) -- Assuming JBrowse Web is being served on port 3000, navigate in your web - browser to - http://localhost:3000/?config=http://localhost:9000/jbrowse_config.json -- When you make changes to your plugin, it will automatically be re-built. - You can then refresh JBrowse Web to see the changes. - -**Note:** The current version of `jbrowse-plugin-template` is only compatible with "JBrowse 2" v2.0 or greater. If you are developing for a version of "JBrowse 2" v1.x, please consider upgrading, or you will have to manually downgrade the package dependencies in this template to ensure compatibility. - -### Testing - -To test your plugin, there are several commands available: - -#### `yarn browse` or `npm run browse` - -Launches your local JBrowse 2 build that is used for integration testing, with your -plugin already included in the configuration. Your plugin must also be running -(`yarn start` or `npm run start`). - -#### `yarn test` or `npm test` - -Runs any unit tests defined during plugin development. - -#### `yarn cypress:run` or `npm run cypress:run` - -Runs the [cypress](https://www.cypress.io/) integration tests for your plugin. -Both the plugin and `browse` must already be running. - -#### `yarn test:e2e` or `npm run test:e2e` - -Starts up the JBrowse 2 build as well as your plugin, and runs the [cypress](https://www.cypress.io/) -integration tests against them. Closes both resources after tests finish. - -#### `yarn cypress` or `npm run cypress` - -Launches the [cypress](https://www.cypress.io/) test runner, which can be very -useful for writing integration tests for your plugin. Both the plugin and `browse` -must already be running. - -#### Github Action - -This template includes a [Github action](https://github.com/features/actions) that -runs your integration tests when you push new changes to your repository. - -### Publishing - -Once you have developed your plugin, you can publish it to NPM. Remember to -remove `"private": true` from `package.json` before doing so. - -If you are using `@jbrowse/react-linear-genome-view`, you can install the plugin -from NPM and use it there. If you are using JBrowse Web, after the plugin is -published to NPM, you can use [unpkg](https://unpkg.com/) to host plugin bundle. -A JBrowse Web config using this plugin would look like this: - -```json -{ - "plugins": [ - { - "name": "MyProject", - "url": "https://unpkg.com/jbrowse-plugin-my-project/dist/jbrowse-plugin-my-project.umd.production.min.js" - } - ] -} -``` - -You can also use a specific version in unpkg, such as -`https://unpkg.com/jbrowse-plugin-my-project@1.0.1/dist/jbrowse-plugin-my-project.umd.production.min.js` - -### TypeScript vs. JavaScript - -This template is set up in such a way that you can use both TypeScript and -JavaScript for development. If using only JavaScript, you can change -`src/index.ts` to `src/index.js`. If using only TypeScript, you can remove -`"allowJs": true` from `tsconfig.json` and `"@babel/preset-react"` from -`.babelrc` (and from "devDependencies" in `package.json`). +# jbrowse-plugin-template + +> Template to quickly start a new JBrowse plugin + +## Usage + +You can use this template to create a new GitHub repository or a new local +project. + +### Software requirements + +- [git](https://git-scm.com/downloads) +- [Node.js](https://nodejs.org/en/download/) (version 10 or greater) +- [yarn](https://yarnpkg.com/en/docs/install) (or npm which comes with Node.js) +- [JBrowse 2](https://github.com/gmod/jbrowse-components) (version 2.0 or + greater) + +### Create a new project from this template + +You can click the "Use this template" button in the repository (instructions +[here](https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template)): + +![screenshot showing where "Use this template" button is in the GitHub repository page](https://user-images.githubusercontent.com/25592344/102671843-eb8ae380-414c-11eb-84e5-6ebf10bd89f9.png) + +Or you can use the GitHub CLI: + +```console +$ gh repo create jbrowse-plugin-my-project --template https://github.com/GMOD/jbrowse-plugin-template.git +``` + +Or you can start a plugin locally: + +```console +$ git clone https://github.com/GMOD/jbrowse-plugin-template.git jbrowse-plugin-my-project +$ cd jbrowse-plugin-my-project +$ rm -rf .git +$ # If you want to use Git, re-initialize it +$ git init +``` + +## Getting started + +### Setup + +Run `yarn init` (or `npm init`) and answer the prompts to fill out the +information for your plugin + +- Make sure you at least enter a "name" (probably starting with + "jbrowse-plugin-", or "@myscope/jbrowse-plugin-" if you're going to publish to + an NPM organization) +- Other fields may be left blank +- leave the "entry point" as `dist/index.js` + +Now run `yarn` (or `rm yarn.lock && npm install` to use npm instead of yarn) to +install the necessary dependencies. + +After this, run `yarn setup` (or `npm run setup`). This configures your project, +and adds a build of JBrowse 2 that can be used to test your plugin during +development. + +### Build + +```console +$ yarn build ## or `npm run build` +``` + +### Development + +To develop against JBrowse Web: + +- Start a development version of JBrowse Web (see + [here](https://github.com/GMOD/jbrowse-components/blob/master/CONTRIBUTING.md)) +- In this project, run `yarn start` (or `npm run start`) +- Assuming JBrowse Web is being served on port 3000, navigate in your web + browser to + http://localhost:3000/?config=http://localhost:9000/jbrowse_config.json +- When you make changes to your plugin, it will automatically be re-built. You + can then refresh JBrowse Web to see the changes. + +**Note:** The current version of `jbrowse-plugin-template` is only compatible +with "JBrowse 2" v2.0 or greater. If you are developing for a version of +"JBrowse 2" v1.x, please consider upgrading, or you will have to manually +downgrade the package dependencies in this template to ensure compatibility. + +### Testing + +To test your plugin, there are several commands available: + +#### `yarn browse` or `npm run browse` + +Launches your local JBrowse 2 build that is used for integration testing, with +your plugin already included in the configuration. Your plugin must also be +running (`yarn start` or `npm run start`). + +#### `yarn test` or `npm test` + +Runs any unit tests defined during plugin development. + +#### `yarn cypress:run` or `npm run cypress:run` + +Runs the [cypress](https://www.cypress.io/) integration tests for your plugin. +Both the plugin and `browse` must already be running. + +#### `yarn test:e2e` or `npm run test:e2e` + +Starts up the JBrowse 2 build as well as your plugin, and runs the +[cypress](https://www.cypress.io/) integration tests against them. Closes both +resources after tests finish. + +#### `yarn cypress` or `npm run cypress` + +Launches the [cypress](https://www.cypress.io/) test runner, which can be very +useful for writing integration tests for your plugin. Both the plugin and +`browse` must already be running. + +#### Github Action + +This template includes a [Github action](https://github.com/features/actions) +that runs your integration tests when you push new changes to your repository. + +### Publishing to NPM + +Once you have developed your plugin, you can publish it to NPM. Remember to +remove `"private": true` from `package.json` before doing so. + +### Using plugins with embedded components + +If you are using plugins in the embedded apps such as +`@jbrowse/react-linear-genome-view`, then you can install jbrowse plugins such +as this one using normal "npm install jbrowse-plugin-yourplugin" if you have +published them to NPM, and use code like this + +```typescript +import React from 'react' +import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType' +import PluginManager from '@jbrowse/core/PluginManager' +import Plugin from '@jbrowse/core/Plugin' + +// in your code +import { createViewState, JBrowseLinearGenomeView } from '@jbrowse/react-linear-genome-view' +import MyPlugin from 'jbrowse-plugin-yourplugin' + +export const MyApp = () => { + const state = createViewState({ + assembly: {/*...your assembly config...*/}, + plugins: [MyPlugin], + tracks: [/*...your track configs...*/], + location: 'ctgA:1105..1221', + }) + + return ( + + ) +} +``` + +See https://jbrowse.org/storybook/lgv/main/?path=/docs/using-plugins--docs for +live example, and also method for loading plugins from urls instead of from NPM +in embedded + +### Using plugins with JBrowse Web + +If you are using JBrowse Web, after the plugin is published to NPM, you can use +[unpkg](https://unpkg.com/) to host plugin bundle. The plugin can then be +referenced by URL in the config.json + +A JBrowse Web config using this plugin would look like this: + +```json +{ + "plugins": [ + { + "name": "MyProject", + "url": "https://unpkg.com/jbrowse-plugin-my-project/dist/jbrowse-plugin-my-project.umd.production.min.js" + } + ] +} +``` + +You can also use a specific version in unpkg, such as +`https://unpkg.com/jbrowse-plugin-my-project@1.0.1/dist/jbrowse-plugin-my-project.umd.production.min.js` + +### TypeScript vs. JavaScript + +This template is set up in such a way that you can use both TypeScript and +JavaScript for development. If using only JavaScript, you can change +`src/index.ts` to `src/index.js`. + +If using only TypeScript, you can remove `"allowJs": true` from `tsconfig.json` +and `"@babel/preset-react"` from `.babelrc` (and from "devDependencies" in +`package.json`). diff --git a/cypress/fixtures/hello_view.json b/cypress/fixtures/hello_view.json index 9062d8b..5a3a39e 100644 --- a/cypress/fixtures/hello_view.json +++ b/cypress/fixtures/hello_view.json @@ -2,9 +2,7 @@ "assemblies": [ { "name": "volvox", - "aliases": [ - "vvx" - ], + "aliases": ["vvx"], "sequence": { "type": "ReferenceSequenceTrack", "trackId": "volvox_refseq", @@ -22,18 +20,12 @@ { "refName": "ctgA", "uniqueId": "alias1", - "aliases": [ - "A", - "contigA" - ] + "aliases": ["A", "contigA"] }, { "refName": "ctgB", "uniqueId": "alias2", - "aliases": [ - "B", - "contigB" - ] + "aliases": ["B", "contigB"] } ] } diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index 53cc161..f87a578 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "target": "es5", "lib": ["es5", "dom"], - "types": ["cypress"], + "types": ["cypress"] }, - "include": ["**/*.ts"], + "include": ["**/*.ts"] } diff --git a/package.json b/package.json index 4f2a320..186a779 100644 --- a/package.json +++ b/package.json @@ -50,11 +50,6 @@ "jbrowse-plugin": { "name": "Template" }, - "prettier": { - "semi": false, - "singleQuote": true, - "trailingComma": "all" - }, "dependencies": { "jest-environment-jsdom": "^29.6.1", "regenerator-runtime": "^0.13.9", @@ -101,7 +96,7 @@ "mobx-react": "^7.0.0", "mobx-state-tree": "5.1.8", "npm-run-all": "^4.1.5", - "prettier": "^3.0.0", + "prettier": "^3.2.5", "prop-types": "^15.8.1", "react": "^17.0.0", "react-dom": "^17.0.0", diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index bf43d53..eeae432 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -4,7 +4,7 @@ "rootDir": ".", "lib": ["ES2019"], "module": "commonjs", - "target": "ES2019", + "target": "ES2019" }, - "include": ["."], + "include": ["."] } diff --git a/tsconfig.json b/tsconfig.json index d301be6..99fb793 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -33,13 +33,13 @@ // Can remove this if only using TypeScript "allowJs": true, // Allow importing JSON files - "resolveJsonModule": false, + "resolveJsonModule": false }, // Jest uses ts-node to load the jest.config.ts file "ts-node": { "transpileOnly": true, - "project": "./tsconfig.test.json", + "project": "./tsconfig.test.json" }, "include": ["src"], - "exclude": ["**/dist/"], + "exclude": ["**/dist/"] } diff --git a/tsconfig.test.json b/tsconfig.test.json index d726f18..f309c01 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -1,7 +1,7 @@ { "extends": "./tsconfig.json", "compilerOptions": { - "rootDir": "./", + "rootDir": "./" }, - "include": ["./jest.config.ts", "./jest.setup.ts"], + "include": ["./jest.config.ts", "./jest.setup.ts"] } diff --git a/yarn.lock b/yarn.lock index cfc5bb9..dc3de91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8281,10 +8281,10 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.0.tgz#e7b19f691245a21d618c68bc54dc06122f6105ae" - integrity sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g== +prettier@^3.2.5: + version "3.2.5" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" + integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A== pretty-bytes@^5.6.0: version "5.6.0"