feat: unify ESM/UMD build and development with Vite (#522)

* feat: try esbuild build

* chore: separate build scripts

* chore: try umd with esbuild

* feat: working umd bundle

* test: fix tests & format

* chore: format tsconfig.json

* chore: comment on build script

* chore: include sourcemaps

* chore: remove script tags for webpack & import higlass css

* chore: minify UMD bundle

* chore: update editor styles to remove bootstrap dependency (#505)

* chore: update css to remove bootstrap dependency

* chore: adjust title bar css

* chore: rest of css adjustments

* fix: simplify polyfills

* fix: remove nullish collascing

* feat: replace webpack/webpack-dev-server with vite

* chore: update package.json

* fix: format html

* chore: update bundle-worker comment

* chore: remove webpack.config.js

* feat: add react-refresh plugin

* test: bump minimum node to 12

* fix: support monaco functions (#511)

* fix: tsc compilation

* fix: silence error message on chromSizesUrl

* fix: restore monaco behavior without all languages

* fix: use lodash-es

* test: isolate cross-fetch import to test

* chore: update d3 types

* fix: restore monaco setup

* feat: unified vite

* feat: build library target

* chore: upgrade vite

* chore: remove unneeded aliases

* chore: minimally polyfill node built-ins

* chore: move aliases to vite.config.js

* feat: unify build with vite

* feat: break out umd build

* chore: bundle some dependencies

* chore: reinstall with yarn-lock

* fix: jest loader for inline worker

* chore: update url in CONTRIBUTING.md

* fix: zlib/vm polyfills

* fix: emit ts types

* refactor: use define to inject global

* chore: remove jsoncrush from .eslintignore

* chore: wrap JSONCrush with encodeURIComponent to reflect on the recent library update

Co-authored-by: Sehi L'Yi <[email protected]>
Co-authored-by: Sehi L'Yi <[email protected]>

.eslintignore

@@ -2,8 +2,4 @@ public
 build
 dist
 
-# Use the file as it is
-# JSONCrush by Frank Force [MIT] https:/KilledByAPixel/JSONCrush
-json-crush.ts
-
 *worker.js

.eslintrc.js

@@ -62,4 +62,4 @@ module.exports = {
  'no-useless-concat': 'error',
  "prefer-template": 'error'
  }
-};
+};

.github/workflows/build-and-deploy.yml

@@ -13,7 +13,7 @@ jobs:
 
  strategy:
  matrix:
- node-version: [ 10.x, 12.x, 14.x ]
+ node-version: [ 12.x, 14.x ]
 
  steps:
  - uses: actions/checkout@v2
@@ -56,4 +56,4 @@ jobs:
  yarn deploy
  env:
  ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
- REPO: ${{ github.repository }}
+ REPO: ${{ github.repository }}

CHANGELOG.md

@@ -168,19 +168,19 @@
 
 ### Bug Fixes
 
-* remove improper loading message in track ([#418](https:/gosling-lang/gosling.js/issues/418)) ([62bf073](https:/gosling-lang/gosling.js/commit/62bf073d6a67bca03ddb5687b9ef4c51f99d3ea2))
-* **editor:** address hiccups in editor ([#411](https:/gosling-lang/gosling.js/issues/411)) ([3025533](https:/gosling-lang/gosling.js/commit/30255337e4eb0a6601319068a8be141edd19b861))
 * convert to numbers when quantitative fields are strings ([#402](https:/gosling-lang/gosling.js/issues/402)) ([95212bd](https:/gosling-lang/gosling.js/commit/95212bd42fc8cccf26517ea1da24d35ed7706e8d))
+* **editor:** address hiccups in editor ([#411](https:/gosling-lang/gosling.js/issues/411)) ([3025533](https:/gosling-lang/gosling.js/commit/30255337e4eb0a6601319068a8be141edd19b861))
+* remove improper loading message in track ([#418](https:/gosling-lang/gosling.js/issues/418)) ([62bf073](https:/gosling-lang/gosling.js/commit/62bf073d6a67bca03ddb5687b9ef4c51f99d3ea2))
 
 
 ### Features
 
 * add `margin` and `border` as props of GoslingComponent ([#420](https:/gosling-lang/gosling.js/issues/420)) ([4df2b2e](https:/gosling-lang/gosling.js/commit/4df2b2e00445a786833ce4a3d79bf1a07837c79c))
 * add a between-link mark ([#405](https:/gosling-lang/gosling.js/issues/405)) ([c7a76e2](https:/gosling-lang/gosling.js/commit/c7a76e22df9e7755242a764c70400c6beeb9cdb8))
 * allow specifying `id` and `className` in `GoslingComponent` ([#419](https:/gosling-lang/gosling.js/issues/419)) ([30d45a3](https:/gosling-lang/gosling.js/commit/30d45a31b057ee5884b55a14224417dddaee96a4))
+* **api:** zoom to extent ([#408](https:/gosling-lang/gosling.js/issues/408)) ([0b3c71f](https:/gosling-lang/gosling.js/commit/0b3c71ff3ab99ee7b5cb445c704c2fe35145be99))
 * background of circular tracks, legend titles, and better brush style ([#429](https:/gosling-lang/gosling.js/issues/429)) ([e469efe](https:/gosling-lang/gosling.js/commit/e469efe67c520d10a36c31863a5dab73f3ca2ab9))
 * rename link marks to betweenLink and withinLink ([#416](https:/gosling-lang/gosling.js/issues/416)) ([8e7556c](https:/gosling-lang/gosling.js/commit/8e7556cfbfd674ec21e7783df8e37513d0cad7ec))
-* **api:** zoom to extent ([#408](https:/gosling-lang/gosling.js/issues/408)) ([0b3c71f](https:/gosling-lang/gosling.js/commit/0b3c71ff3ab99ee7b5cb445c704c2fe35145be99))
 
 
 
@@ -189,8 +189,8 @@
 
 ### Features
 
-* **api:** support mouseover event listener ([#388](https:/gosling-lang/gosling.js/issues/388)) ([e56e32c](https:/gosling-lang/gosling.js/commit/e56e32cdbbcf3a68bb9ecebc45f2ff39d4833c94))
 * allow vertical band connection w/o independent scales yet ([#394](https:/gosling-lang/gosling.js/issues/394)) ([5591e2d](https:/gosling-lang/gosling.js/commit/5591e2d7ba6339c4a5eb7cc6a4e105a3c633c8f0))
+* **api:** support mouseover event listener ([#388](https:/gosling-lang/gosling.js/issues/388)) ([e56e32c](https:/gosling-lang/gosling.js/commit/e56e32cdbbcf3a68bb9ecebc45f2ff39d4833c94))
 
 
 
@@ -249,8 +249,8 @@
 * add 'about' model view ([#347](https:/gosling-lang/gosling.js/issues/347)) ([53cb362](https:/gosling-lang/gosling.js/commit/53cb3625ca79b7364bec756cd149797825d3ef0c))
 * add exon split transformation ([#364](https:/gosling-lang/gosling.js/issues/364)) ([1413494](https:/gosling-lang/gosling.js/commit/141349482645d3357442abc1c8fbfbd04ab727dd))
 * allow defining track styles in the upper level ([#363](https:/gosling-lang/gosling.js/issues/363)) ([d00b871](https:/gosling-lang/gosling.js/commit/d00b87191a8e7e0000dfe03ea9f8fcf7b6abb8af))
-* support a dark theme ([#359](https:/gosling-lang/gosling.js/issues/359)) ([2248fc4](https:/gosling-lang/gosling.js/commit/2248fc493dc39c9420bb903c0c09c8dab793e82d))
 * **api:** allow specifying transition duration in zoom ([#358](https:/gosling-lang/gosling.js/issues/358)) ([78db378](https:/gosling-lang/gosling.js/commit/78db378e95784c49013af8fb03abadc9a7bd76d3))
+* support a dark theme ([#359](https:/gosling-lang/gosling.js/issues/359)) ([2248fc4](https:/gosling-lang/gosling.js/commit/2248fc493dc39c9420bb903c0c09c8dab793e82d))
 
 
 
@@ -268,8 +268,8 @@
 
 ### Features
 
-* data transform as ordered array ([#355](https:/gosling-lang/gosling.js/issues/355)) ([38ed0e4](https:/gosling-lang/gosling.js/commit/38ed0e4fde5cfeba7a41ca6ab6bb59ad2a6559d5))
 * **api:** zoom to gene ([#353](https:/gosling-lang/gosling.js/issues/353)) ([3021b82](https:/gosling-lang/gosling.js/commit/3021b82350d524fcfa3b55105fae06cd3cebd8c7))
+* data transform as ordered array ([#355](https:/gosling-lang/gosling.js/issues/355)) ([38ed0e4](https:/gosling-lang/gosling.js/commit/38ed0e4fde5cfeba7a41ca6ab6bb59ad2a6559d5))
 * enable customizing stroke of brush ([#352](https:/gosling-lang/gosling.js/issues/352)) ([b713b94](https:/gosling-lang/gosling.js/commit/b713b948351bec90b21c57cae96f869b4955f708))
 
 

CONTRIBUTING.md

@@ -14,7 +14,7 @@ yarn
 yarn start
 ```
 
-Then, you can open http://localhost:8080/ in a web browser to test the online editor.
+Then, you can open http://localhost:3000/ in a web browser to test the online editor.
 
 ## Editing Grammar
 You may want to edit the grammar (e.g., rename properties) and test the updated grammar in the Online Editor. The Gosling's grammar is defined using TypeScript in a single file, [/src/core/gosling.schema.ts](/src/core/gosling.schema.ts). You can update this file to edit grammar. However, to test with Online Editor, you need to update [/src/core/gosling.schema.json](/src/core/gosling.schema.json) by running the following command:

build-umd.js

@@ -0,0 +1,36 @@
+const esbuild = require('esbuild');
+const pkg = require('./package.json');
+
+esbuild.build({
+ entryPoints: ['./dist/gosling.es.js'],
+ target: 'esnext',
+ outfile: pkg.main,
+ bundle: true,
+ format: 'cjs',
+ minify: false,
+ sourcemap: true,
+ inject: ['./src/alias/buffer-shim.js'],
+ external: ['react', 'react-dom', 'pixi.js', 'higlass'],
+ define: {
+ 'process.platform': 'undefined',
+ 'process.env.THREADS_WORKER_INIT_TIMEOUT': 'undefined',
+ 'global': 'globalThis',
+ },
+ // esbuild doesn't support UMD format directy. The banner/footer
+ // wraps the commonjs output as a UMD module. The function signature is copied
+ // from what is generated from rollup. If the external UMD dependencies change
+ // (or the name of the gosling global) this needs changing.
+ banner: {
+ js: `\
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('pixi.js'), require('react'), require('higlass'), require('react-dom')) :
+ typeof define === 'function' && define.amd ? define(['exports', 'pixi.js', 'react', 'higlass', 'react-dom'], factory) :
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.gosling = {}, global.PIXI, global.React, global.hglib, global.ReactDOM));
+}(this, (function (exports, pixi_js, React, higlass, ReactDOM) { 'use strict';
+
+var __mods = { 'pixi.js': pixi_js, 'react': React, 'react-dom': ReactDOM, 'higlass': higlass };
+var require = name => __mods[name];
+`,
+ },
+ footer: { js: '\n})));' },
+});

src/editor/editor-panel.tsx → editor/editor-panel.tsx

@@ -1,8 +1,9 @@
 import React, { useRef, useState, useEffect } from 'react'; // eslint-disable-line no-unused-vars
 import MonacoEditor from 'react-monaco-editor';
-import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
 import ReactResizeDetector from 'react-resize-detector';
-import { GoslingSchema } from '..';
+import { GoslingSchema } from 'gosling.js';
+import * as Monaco from './monaco';
 
 function EditorPanel(props: {
  code: string;

src/editor/editor.css → editor/editor.css

@@ -10,13 +10,15 @@
 
 .logo {
  display: inline-block;
- vertical-align: middle;
  height: 100%;
- padding-top: 8px;
  margin-left: 7px;
  margin-right: 5px;
 }
 
+.logo svg {
+ vertical-align: middle;
+}
+
 .gosling-color {
  color: #e18343 !important;
 }
@@ -151,7 +153,6 @@
  padding-left: 10px;
  background: #fafafa;
  border-bottom: 1px solid lightgray;
- height: 30px;
  overflow-x: auto;
 }
 
@@ -249,6 +250,8 @@
 
 .editor-data-preview-table table {
  width: 100%;
+ border-spacing: 0;
+ border-collapse: collapse;
 }
 
 .editor-data-preview-table th,
@@ -460,6 +463,7 @@ td {
 }
 
 .hide-description-button {
+ cursor: pointer;
  font-size: 9px;
  color: rgb(89, 89, 89);
  border: 1px solid #aaa;

src/editor/editor.tsx → editor/editor.tsx

@@ -1,4 +1,4 @@
-import * as gosling from '../';
+import * as gosling from 'gosling.js';
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
@@ -11,20 +11,19 @@ import { select as d3Select } from 'd3-selection';
 import stringify from 'json-stringify-pretty-compact';
 import SplitPane from 'react-split-pane';
 import ErrorBoundary from './error-boundary';
-import { Datum, GoslingSpec } from '../core/gosling.schema';
 import { debounce, isEqual } from 'lodash';
 import { examples } from './example';
-import { HiGlassSpec } from '../core/higlass.schema';
-import GoslingSchema from '../../schema/gosling.schema.json';
-import { validateSpec, Validity } from '../core/utils/validate';
 import stripJsonComments from 'strip-json-comments';
 import * as qs from 'qs';
-import { JSONCrush, JSONUncrush } from '../core/utils/json-crush';
+import JSONCrush from 'jsoncrush';
 import './editor.css';
 import { ICONS, ICON_INFO } from './icon';
 // @ts-ignore
 import { Themes } from 'gosling-theme';
 
+import type { HiGlassSpec } from '@higlass.schema';
+import type { Datum } from '@gosling.schema';
+
 const INIT_DEMO_INDEX = examples.findIndex(d => d.forceShow) !== -1 ? examples.findIndex(d => d.forceShow) : 0;
 
 // Limit of the character length to allow copy to clipboard
@@ -135,13 +134,15 @@ function Editor(props: any) {
 
  // custom spec contained in the URL
  const urlParams = qs.parse(props.location.search, { ignoreQueryPrefix: true });
- const urlSpec = urlParams?.spec ? JSONUncrush(urlParams.spec as string) : null;
+ const urlSpec = urlParams?.spec ? JSONCrush.uncrush(urlParams.spec as string) : null;
  const urlGist = urlParams?.gist ?? null;
  const urlExampleIndex = urlParams?.example
  ? examples.map(d => d.id).indexOf(urlParams.example as string)
  : INIT_DEMO_INDEX;
 
- const defaultCode = urlGist ? emptySpec() : stringify(urlSpec ?? (examples[INIT_DEMO_INDEX].spec as GoslingSpec));
+ const defaultCode = urlGist
+ ? emptySpec()
+ : stringify(urlSpec ?? (examples[INIT_DEMO_INDEX].spec as gosling.GoslingSpec));
 
  const previewData = useRef<PreviewData[]>([]);
  const [refreshData, setRefreshData] = useState<boolean>(false);
@@ -151,7 +152,7 @@ function Editor(props: any) {
  const [hg, setHg] = useState<HiGlassSpec>();
  const [code, setCode] = useState(defaultCode);
  const [goslingSpec, setGoslingSpec] = useState<gosling.GoslingSpec>();
- const [log, setLog] = useState<Validity>({ message: '', state: 'success' });
+ const [log, setLog] = useState<ReturnType<typeof gosling.validateGoslingSpec>>({ message: '', state: 'success' });
  const [autoRun, setAutoRun] = useState(true);
  const [selectedPreviewData, setSelectedPreviewData] = useState<number>(0);
  const [gistTitle, setGistTitle] = useState<string>();
@@ -230,7 +231,7 @@ function Editor(props: any) {
  useEffect(() => {
  previewData.current = [];
  setSelectedPreviewData(0);
- setCode(urlSpec ?? (urlGist ? emptySpec() : stringify(demo.spec as GoslingSpec)));
+ setCode(urlSpec ?? (urlGist ? emptySpec() : stringify(demo.spec as gosling.GoslingSpec)));
  setHg(undefined);
  }, [demo]);
 
@@ -274,7 +275,7 @@ function Editor(props: any) {
  let valid;
  try {
  editedGos = JSON.parse(stripJsonComments(code));
- valid = validateSpec(GoslingSchema, editedGos);
+ valid = gosling.validateGoslingSpec(editedGos);
  setLog(valid);
  } catch (e) {
  const message = '✘ Cannnot parse the code.';
@@ -306,7 +307,6 @@ function Editor(props: any) {
  const token = PubSub.subscribe('data-preview', (_: string, data: PreviewData) => {
  // Data with different `dataConfig` is shown separately in data preview.
  const id = `${data.dataConfig}`;
-
  const newPreviewData = previewData.current.filter(d => d.id !== id);
  previewData.current = [...newPreviewData, { ...data, id }];
  });
@@ -422,7 +422,10 @@ function Editor(props: any) {
  // }
  }}
  >
- <span style={{ cursor: 'pointer' }} onClick={() => window.open('https://gosling.js.org', '_blank')}>
+ <span
+ style={{ cursor: 'pointer', lineHeight: '40px' }}
+ onClick={() => window.open('https://gosling.js.org', '_blank')}
+ >
  <span className="logo">{GoslingLogoSVG(20, 20)}</span>
  Gosling.js Editor
  </span>
@@ -601,9 +604,8 @@ function Editor(props: any) {
  onClick={() => {
  if (code.length <= LIMIT_CLIPBOARD_LEN) {
  // copy the unique url to clipboard using `<input/>`
- const url = `https://gosling-lang.github.io/gosling.js/?full=${isHideCode}&spec=${JSONCrush(
- code
- )}`;
+ const crushedSpec = encodeURIComponent(JSONCrush.crush(code));
+ const url = `https://gosling-lang.github.io/gosling.js/?full=${isHideCode}&spec=${crushedSpec}`;
  const element = document.getElementById('spec-url-exporter');
  (element as any).type = 'text';
  (element as any).value = url;
@@ -769,8 +771,9 @@ function Editor(props: any) {
  key={JSON.stringify(d)}
  onClick={() => setSelectedPreviewData(i)}
  >
- {`${(JSON.parse(d.dataConfig).data
- .type as string).toLocaleLowerCase()} `}
+ {`${(
+ JSON.parse(d.dataConfig).data.type as string
+ ).toLocaleLowerCase()} `}
  <small>{i}</small>
  </button>
  ))}

src/editor/example/basic-semantic-zoom.ts → editor/example/basic-semantic-zoom.ts

@@ -1,4 +1,4 @@
-import { GoslingSpec } from '../../';
+import { GoslingSpec } from 'gosling.js';
 import { GOSLING_PUBLIC_DATA } from './gosling-data';
 
 export const EX_SPEC_BASIC_SEMANTIC_ZOOM: GoslingSpec = {

src/editor/example/cancer-variant.ts → editor/example/cancer-variant.ts

@@ -1,4 +1,4 @@
-import { GoslingSpec } from '../..';
+import type { GoslingSpec } from 'gosling.js';
 import { EX_SPEC_VIEW_PILEUP } from './pileup';
 
 export const EX_SPEC_CANCER_VARIANT_PROTOTYPE: GoslingSpec = {
@@ -27,8 +27,7 @@ export const EX_SPEC_CANCER_VARIANT_PROTOTYPE: GoslingSpec = {
  title: 'Patient Overview (PD35930a)',
  alignment: 'overlay',
  data: {
- url:
- 'https://raw.githubusercontent.com/sehilyi/gemini-datasets/master/data/UCSC.HG38.Human.CytoBandIdeogram.csv',
+ url: 'https://raw.githubusercontent.com/sehilyi/gemini-datasets/master/data/UCSC.HG38.Human.CytoBandIdeogram.csv',
  type: 'csv',
  chromosomeField: 'Chromosome',
  genomicFields: ['chromStart', 'chromEnd']
@@ -213,8 +212,7 @@ export const EX_SPEC_CANCER_VARIANT_PROTOTYPE: GoslingSpec = {
  title: 'Ideogram',
  alignment: 'overlay',
  data: {
- url:
- 'https://raw.githubusercontent.com/sehilyi/gemini-datasets/master/data/UCSC.HG38.Human.CytoBandIdeogram.csv',
+ url: 'https://raw.githubusercontent.com/sehilyi/gemini-datasets/master/data/UCSC.HG38.Human.CytoBandIdeogram.csv',
  type: 'csv',
  chromosomeField: 'Chromosome',
  genomicFields: ['chromStart', 'chromEnd']
@@ -580,8 +578,7 @@ export function view(sample: string): GoslingSpec {
  title: 'Overview',
  alignment: 'overlay',
  data: {
- url:
- 'https://raw.githubusercontent.com/sehilyi/gemini-datasets/master/data/UCSC.HG38.Human.CytoBandIdeogram.csv',
+ url: 'https://raw.githubusercontent.com/sehilyi/gemini-datasets/master/data/UCSC.HG38.Human.CytoBandIdeogram.csv',
  type: 'csv',
  chromosomeField: 'Chromosome',
  genomicFields: ['chromStart', 'chromEnd']