chore(core): update build (#977)

 - Removes /embed entrypoint 
 - Removes umd build 
 - Adds "exports" field to package.json 
 - Adds [knip](https://github.com/webpro/knip)
 - Removes unused dependencies 
 - Removes unused files 
 - Removes some unused methods
 - Make all CI/CD run on Node 20
 - Updates gosling.js HTML template to use module imports 
 - Upgrade vite and vitest
 - replace @vitejs/plugin-react-refresh with @vitejs/plugin-react

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
             - name: Use Node.js
               uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
             - run: yarn install
             - run: yarn build-editor
               env:
@@ -30,7 +30,7 @@ jobs:
         runs-on: ubuntu-latest
         strategy:
             matrix:
-                node-version: [14.x, 16.x]
+                node-version: [20.x]
         steps:
             - uses: actions/checkout@v3
             - name: Use Node.js ${{ matrix.node-version }}
@@ -54,7 +54,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
             - run: yarn install
             - name: ESLint
               run: yarn eslint src/ editor/

.github/workflows/deploy-editor.yml

@@ -14,7 +14,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
             - run: yarn install
             - run: yarn build-editor
               env:

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: yarn
       - run: yarn build
@@ -30,7 +30,7 @@ jobs:
             fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - run: npx changelogithub
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.nvmrc

@@ -0,0 +1 @@
+20

CONTRIBUTING.md

@@ -7,11 +7,13 @@ While contribution guidelines are loosely defined, we recommend to read the foll
 
 We use Yarn (and not NPM) to manage dependencies in stable and consistent ways. 
 
-After installing [Yarn](https://yarnpkg.com/getting-started/install), clone this repository and run the following commands to install all dependencies and run the Gosling.js editor locally:
+After installing [Yarn](https://yarnpkg.com/getting-started/install), clone this repository and run the following commands to install all dependencies and run the Gosling.js editor locally. We recommend you use Node 20. 
 
 ```sh
-yarn
-yarn start
+git clone https://github.com/gosling-lang/gosling.js.git # Clone the repository to your current directory
+cd gosling.js                                            # Navigate to gosling repository
+yarn                                                     # Install dependencies 
+yarn start                                               # Start a local server running the Gosling online editor 
 ```
 
 Then, you can open http://localhost:3000/ in a web browser to test the online editor.
@@ -49,6 +51,10 @@ To learn more about the commitlint, please visit [conventional-changelog/commitl
 ## Opening Pull Requests
 We use the [commitlint](#commitlint) for the title of PR. So, if the title of PR is not following the commitlint conventions, [Semantic Pull Request](https://github.com/zeke/semantic-pull-requests) will complain about it, disallowing your PR to be merged. When your PR is accepted and merged into the master branch, the title of the PR will be recorded as a single commit message which will then added as a single item in [CHANGELOG.md](/CHANGELOG.md).
 
+## Testing 
+
+Gosling.js uses [Vitest](https://vitest.dev/) for running tests. To run all of the tests, you can use the command `yarn test`. 
+
 ## Testing Production Build Using Editor
 
 It is sometimes necessary to test the production build of Gosling.js. This frequently happened to us when we needed to ensure that certain data fetchers, like BAM and VCF, work correctly without errors in a deployed app.

editor/html-template.ts

@@ -1,24 +1,34 @@
-import { version as goslingVersion } from '../package.json';
-const higlassVersion = '1.11';
-const reactVersion = '17';
-const pixiVersion = '6';
+import { version as _goslingVersion } from '../package.json';
 
-export const getHtmlTemplate = (spec: string) => `
+export const getHtmlTemplate = (
+    spec: string,
+    reactVersion = 18,
+    pixiVersion = 6,
+    higlassVersion = 1.13,
+    goslingVersion = _goslingVersion
+) => `
 <!DOCTYPE html>
 <html>
 <head>
     <title>Gosling Visualization</title>
-    <link rel="stylesheet" href="https://unpkg.com/higlass@${higlassVersion}/dist/hglib.css">
-    <script src="https://unpkg.com/react@${reactVersion}/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@${reactVersion}/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/pixi.js@${pixiVersion}/dist/browser/pixi.min.js"></script>
-    <script src="https://unpkg.com/higlass@${higlassVersion}/dist/hglib.js"></script>
-    <script src="https://unpkg.com/gosling.js@${goslingVersion}/dist/gosling.js"></script>
+    <link rel="stylesheet" href="https://esm.sh/higlass@${higlassVersion}/dist/hglib.css">
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@${reactVersion}",
+          "react-dom": "https://esm.sh/react-dom@${reactVersion}",
+          "pixi": "https://esm.sh/pixi.js@${pixiVersion}",
+          "higlass": "https://esm.sh/higlass@${higlassVersion}?external=react,react-dom,pixi",
+          "gosling.js": "https://esm.sh/gosling.js@${goslingVersion}?external=react,react-dom,pixi,higlass"
+        }
+      }
+    </script>
 </head>
 <body>
-    <div id="gosling-container"/>
-    <script>
-        gosling.embed(document.getElementById('gosling-container'), ${spec})
+    <div id="gosling-container"></div>
+    <script type="module">
+        import { embed } from 'gosling.js';
+        embed(document.getElementById('gosling-container'), ${spec})
     </script>
 </body>
 </html>

editor/index.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route } from 'react-router-dom';
 import Editor from './Editor';
 import './index.css';
 import 'higlass/dist/hglib.css';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
     <BrowserRouter>
         <Route component={Editor} />
-    </BrowserRouter>,
-    document.getElementById('root') as HTMLElement
+    </BrowserRouter>
 );

knip.config.json

@@ -0,0 +1,4 @@
+{
+    "entry": ["./src/index.ts", "./editor/index.tsx", "scripts/setup-vitest.js"],
+    "project": ["**/*.ts", "**/*.tsx"]
+  }

package.json

@@ -8,21 +8,24 @@
         "url": "https://github.com/gosling-lang/gosling.js"
     },
     "homepage": "https://gosling-lang.github.io/gosling.js/",
-    "main": "dist/gosling.js",
+    "main": "dist/gosling.es.js",
     "module": "dist/gosling.es.js",
     "types": "dist/src/index.d.ts",
     "files": [
         "dist"
     ],
+    "type": "module",
     "exports": {
-        ".": "./dist/gosling.es.js",
-        "./embed": "./dist/embed/index.js"
+        ".": {
+            "types": "./dist/src/index.d.ts",
+            "import": "./dist/gosling.es.js"
+        }
     },
     "scripts": {
         "start": "vite --mode editor",
         "start-embed": "vite",
         "build": "run-s build-clear build-types build-lib",
-        "build-lib": "vite build --mode lib && node scripts/build-umd && node scripts/build-embed",
+        "build-lib": "vite build --mode lib",
         "build-types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
         "build-editor": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build",
         "build-clear": "rm -rf ./dist",
@@ -34,27 +37,21 @@
         "schema": "node scripts/generate-schemas.mjs",
         "predeploy": "yarn build-editor; echo \"gosling.js.org\" >> build/CNAME",
         "deploy": "gh-pages -d build",
-        "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
+        "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
+        "knip": "knip --config knip.config.json"
     },
     "peerDependencies": {
         "pixi.js": "^6.3.0",
         "react": "^16.6.3 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.6.3 || ^17.0.0 || ^18.0.0"
     },
-    "sideEffect": false,
     "dependencies": {
         "@gmod/bam": "^1.1.18",
         "@gmod/bbi": "^3.0.1",
         "@gmod/bed": "^2.1.2",
         "@gmod/gff": "^1.3.0",
         "@gmod/tabix": "^1.5.6",
         "@gmod/vcf": "^5.0.10",
-        "@types/bezier-js": "^4.1.0",
-        "@types/d3": "^7.0.0",
-        "@types/lodash": "^4.14.151",
-        "@types/node": "^18.6.2",
-        "@types/rbush": "^3.0.0",
-        "@types/uuid": "^8.3.1",
         "allotment": "^1.19.0",
         "bezier-js": "4.0.3",
         "buffer": "^6.0.3",
@@ -69,45 +66,44 @@
         "fflate": "^0.7.1",
         "generic-filehandle": "^3.0.1",
         "gosling-theme": "^0.0.10",
-        "higlass": "^1.12.4",
+        "higlass": "^1.13.2",
         "higlass-register": "^0.3.0",
         "higlass-text": "^0.1.1",
         "json-stringify-pretty-compact": "^2.0.0",
         "jspdf": "^2.3.1",
         "lodash-es": "^4.17.21",
-        "mixwith": "^0.1.1",
         "nanoevents": "^7.0.1",
         "pubsub-js": "^1.9.3",
         "quick-lru": "^6.1.1",
         "rbush": "^3.0.1",
-        "react-grid-layout": "^1.2.5",
         "stream-browserify": "^3.0.0",
         "threads": "^1.6.4",
         "uuid": "^8.3.2"
     },
     "devDependencies": {
-        "@testing-library/react": "^10.4.8",
-        "@testing-library/user-event": "^12.1.1",
+        "@types/bezier-js": "^4.1.0",
+        "@types/d3": "^7.0.0",
         "@types/d3-drag": "^2.0.0",
         "@types/d3-dsv": "^3.0.1",
-        "@types/d3-request": "^1.0.6",
         "@types/d3-selection": "^2.0.0",
         "@types/lodash-es": "^4.17.5",
+        "@types/node": "^18.6.2",
         "@types/pubsub-js": "^1.8.2",
+        "@types/rbush": "^3.0.0",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
         "@types/react-resize-detector": "^4.2.0",
         "@types/react-router-dom": "^5.1.6",
+        "@types/uuid": "^8.3.1",
         "@typescript-eslint/eslint-plugin": "^5.56.0",
         "@typescript-eslint/parser": "^5.56.0",
-        "@vitejs/plugin-react-refresh": "^1.3.6",
+        "@vitejs/plugin-react": "^4.1.0",
+        "@vitest/coverage-v8": "^0.34.6",
         "ajv": "^6.12.2",
         "c8": "^7.11.2",
         "conventional-changelog-cli": "^2.1.1",
-        "cross-fetch": "^3.1.5",
         "d3-drag": "^2.0.0",
         "d3-selection": "^2.0.0",
-        "documentation": "^13.0.2",
         "esbuild": "^0.12.25",
         "eslint": "^8.19.0",
         "eslint-config-prettier": "^8.5.0",
@@ -116,10 +112,9 @@
         "eslint-plugin-react": "^7.30.1",
         "fetch-jsonp": "^1.1.3",
         "gh-pages": "^3.1.0",
-        "git-branch-is": "^4.0.0",
-        "jest-canvas-mock": "^2.3.0",
         "jsdom": "^19.0.0",
         "jsoncrush": "^1.1.6",
+        "knip": "^2.30.0",
         "npm-run-all": "^4.1.5",
         "pixi.js": "^6.3.0",
         "prettier": "^2.0.5",
@@ -133,8 +128,9 @@
         "strip-json-comments": "^3.1.1",
         "ts-json-schema-generator": "^1.0.0",
         "typescript": "^5.0.2",
-        "vite": "^2.9.5",
-        "vitest": "^0.10.0"
+        "vite": "^4.4.11",
+        "vitest": "^0.34.6",
+        "vitest-canvas-mock": "^0.3.3"
     },
     "resolutions": {
         "slugid": "^3.0.0"