diff --git a/package.json b/package.json index 617175a0..18d44f44 100644 --- a/package.json +++ b/package.json @@ -1,157 +1,157 @@ { - "name": "react-vega-monorepo", - "version": "0.0.0", - "description": "Home of react-vega", - "author": "Krist Wongsuphasawat (http://kristw.yellowpigz.com)", - "keywords": [], - "repository": "git@github.com:vega/react-vega.git", - "bugs": { - "url": "https://github.com/vega/react-vega/issues" - }, - "private": true, - "license": "Apache-2.0", - "scripts": { - "postpublish": "git push; git push --tags", - "build": "yarn babel && yarn type", - "babel": "yarn babel:cjs && yarn babel:esm", - "babel:cjs": "nimbus babel --clean --workspaces=\"(react-vega)\"", - "babel:esm": "nimbus babel --clean --workspaces=\"(react-vega)\" --esm", - "clean": "rm -rf ./packages/**/{lib,esm}", - "commit": "superset-commit", - "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 20", - "format": "yarn prettier --write", - "jest": "NODE_ENV=test nimbus jest --coverage --verbose", - "lint": "nimbus eslint", - "lint:fix": "yarn lint --fix", - "prettier": "nimbus prettier", - "test": "yarn jest", - "test:watch": "yarn lint:fix && yarn jest --watch", - "type": "nimbus typescript --build --reference-workspaces", - "prepare-release": "git checkout master && git pull --rebase origin master && yarn && yarn test", - "prerelease": "yarn build", - "pretest": "yarn lint", - "release": "yarn prepare-release && lerna publish --exact && yarn postrelease", - "postrelease": "lerna run deploy-demo", - "storybook": "cd packages/react-vega-demo && yarn storybook" - }, - "devDependencies": { - "@airbnb/config-babel": "^3.1.0", - "@airbnb/config-eslint": "^3.1.0", - "@airbnb/config-jest": "^3.0.2", - "@airbnb/config-prettier": "^3.1.0", - "@airbnb/config-typescript": "^3.0.1", - "@airbnb/nimbus": "^3.1.4", - "@superset-ui/commit-config": "^0.0.9", - "@types/enzyme": "^3.10.4", - "@types/jest": "^26.0.8", - "@types/jsdom": "^16.1.0", - "@types/react-test-renderer": "^16.9.2", - "canvas": "^2.6.1", - "enzyme": "^3.11.0", - "enzyme-adapter-react-16": "^1.15.2", - "enzyme-to-json": "^3.4.3", - "fast-glob": "^3.2.2", - "fs-extra": "^9.0.1", - "husky": "^4.3.0", - "lerna": "^3.20.2", - "lint-staged": "^10.0.3", - "parse5": "^6.0.1", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "react-test-renderer": "^16.12.0", - "typescript": "^3.9.7", - "vega": "^5.10.0", - "vega-lite": "^4.8.0" - }, - "engines": { - "node": ">=10.16.0", - "npm": ">=6.8.0", - "yarn": ">=1.13.0" - }, - "workspaces": [ - "./packages/*" - ], - "browserslist": [ - "last 3 chrome versions", - "last 3 firefox versions", - "last 3 safari versions", - "last 3 edge versions" - ], - "nimbus": { - "drivers": [ - "babel", - "eslint", - "jest", - "prettier", - "typescript" - ], - "settings": { - "library": true, - "react": true, - "next": true, - "env": { - "targets": false - } + "name": "react-vega-monorepo", + "version": "0.0.0", + "description": "Home of react-vega", + "author": "Krist Wongsuphasawat (http://kristw.yellowpigz.com)", + "keywords": [], + "repository": "git@github.com:vega/react-vega.git", + "bugs": { + "url": "https://github.com/vega/react-vega/issues" + }, + "private": true, + "license": "Apache-2.0", + "scripts": { + "postpublish": "git push; git push --tags", + "build": "yarn babel && yarn type", + "babel": "yarn babel:cjs && yarn babel:esm", + "babel:cjs": "nimbus babel --clean --workspaces=\"(react-vega)\"", + "babel:esm": "nimbus babel --clean --workspaces=\"(react-vega)\" --esm", + "clean": "rm -rf ./packages/**/{lib,esm}", + "commit": "superset-commit", + "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 20", + "format": "yarn prettier --write", + "jest": "NODE_ENV=test nimbus jest --coverage --verbose", + "lint": "nimbus eslint", + "lint:fix": "yarn lint --fix", + "prettier": "nimbus prettier", + "test": "yarn jest", + "test:watch": "yarn lint:fix && yarn jest --watch", + "type": "nimbus typescript --build --reference-workspaces", + "prepare-release": "git checkout master && git pull --rebase origin master && yarn && yarn test", + "prerelease": "yarn build", + "pretest": "yarn lint", + "release": "yarn prepare-release && lerna publish --exact && yarn postrelease", + "postrelease": "lerna run deploy-demo", + "storybook": "cd packages/react-vega-demo && yarn storybook" }, - "jest": { - "timers": "real", - "setupFilesAfterEnv": [ - "@airbnb/config-jest/enzyme" + "devDependencies": { + "@airbnb/config-babel": "^3.1.0", + "@airbnb/config-eslint": "^3.1.0", + "@airbnb/config-jest": "^3.0.2", + "@airbnb/config-prettier": "^3.1.0", + "@airbnb/config-typescript": "^3.0.1", + "@airbnb/nimbus": "^3.1.4", + "@superset-ui/commit-config": "^0.0.9", + "@types/enzyme": "^3.10.4", + "@types/jest": "^26.0.8", + "@types/jsdom": "^16.1.0", + "@types/react-test-renderer": "^16.9.2", + "canvas": "^2.6.1", + "enzyme": "^3.11.0", + "enzyme-adapter-react-16": "^1.15.2", + "enzyme-to-json": "^3.4.3", + "fast-glob": "^3.2.2", + "fs-extra": "^9.0.1", + "husky": "^4.3.0", + "lerna": "^3.20.2", + "lint-staged": "^10.0.3", + "parse5": "^6.0.1", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-test-renderer": "^16.12.0", + "typescript": "^3.9.7", + "vega": "^5.10.0", + "vega-lite": "^4.8.0" + }, + "engines": { + "node": ">=10.16.0", + "npm": ">=6.8.0", + "yarn": ">=1.13.0" + }, + "workspaces": [ + "./packages/*" + ], + "browserslist": [ + "last 3 chrome versions", + "last 3 firefox versions", + "last 3 safari versions", + "last 3 edge versions" + ], + "nimbus": { + "drivers": [ + "babel", + "eslint", + "jest", + "prettier", + "typescript" ], - "coverageThreshold": { - "global": { - "branches": 5, - "functions": 5, - "lines": 5, - "statements": 5 + "settings": { + "library": true, + "react": true, + "next": true, + "env": { + "targets": false } - } - }, - "eslint": { - "overrides": [ - { - "files": "*.test.{js,jsx,ts,tsx}", - "rules": { - "import/no-extraneous-dependencies": "off", - "jest/no-test-return-statement": "off", - "promise/param-names": "off", - "react/jsx-no-literals": "off" - } - }, - { - "files": "*.{js,jsx,ts,tsx}", - "rules": { - "react/jsx-no-literals": "off", - "@typescript-eslint/no-explicit-any": [ - "warn", - { - "fixToUnknown": false - } - ] + }, + "jest": { + "timers": "real", + "setupFilesAfterEnv": [ + "@airbnb/config-jest/enzyme" + ], + "coverageThreshold": { + "global": { + "branches": 5, + "functions": 5, + "lines": 5, + "statements": 5 } } - ] - }, - "typescript": { - "compilerOptions": { - "resolveJsonModule": true, - "emitDeclarationOnly": true }, - "include": [ - "./storybook/**/*" + "eslint": { + "overrides": [ + { + "files": "*.test.{js,jsx,ts,tsx}", + "rules": { + "import/no-extraneous-dependencies": "off", + "jest/no-test-return-statement": "off", + "promise/param-names": "off", + "react/jsx-no-literals": "off" + } + }, + { + "files": "*.{js,jsx,ts,tsx}", + "rules": { + "react/jsx-no-literals": "off", + "@typescript-eslint/no-explicit-any": [ + "warn", + { + "fixToUnknown": false + } + ] + } + } + ] + }, + "typescript": { + "compilerOptions": { + "resolveJsonModule": true, + "emitDeclarationOnly": true + }, + "include": [ + "./storybook/**/*" + ] + } + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged", + "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" + } + }, + "lint-staged": { + "./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx,json,md}": [ + "yarn prettier --write", + "git add" ] } - }, - "husky": { - "hooks": { - "pre-commit": "lint-staged", - "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" - } - }, - "lint-staged": { - "./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx,json,md}": [ - "yarn prettier --write", - "git add" - ] - } -} + } \ No newline at end of file diff --git a/packages/react-vega/src/VegaEmbed.tsx b/packages/react-vega/src/VegaEmbed.tsx index 12fa4363..fab20342 100644 --- a/packages/react-vega/src/VegaEmbed.tsx +++ b/packages/react-vega/src/VegaEmbed.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties } from 'react'; -import vegaEmbed, { EmbedOptions, VisualizationSpec } from 'vega-embed'; -import { ViewListener, View, SignalListeners } from './types'; +import vegaEmbed, { EmbedOptions, Result, VisualizationSpec } from 'vega-embed'; +import { ViewListener, SignalListeners } from './types'; import shallowEqual from './utils/shallowEqual'; import getUniqueFieldNames from './utils/getUniqueFieldNames'; import { NOOP } from './constants'; @@ -21,7 +21,7 @@ export type VegaEmbedProps = { export default class VegaEmbed extends React.PureComponent { containerRef = React.createRef(); - viewPromise?: Promise; + result?: Result | undefined; componentDidMount() { this.createView(); @@ -102,46 +102,46 @@ export default class VegaEmbed extends React.PureComponent { }; modifyView = (action: ViewListener) => { - if (this.viewPromise) { - this.viewPromise - .then((view) => { - if (view) { - action(view); - } - - return true; - }) - .catch(this.handleError); + try { + if (this.result) { + const { view } = this.result; + if (view) { + action(view); + } + return true; + } + } catch (err) { + this.handleError(err); } }; - createView() { + createView = async () => { const { spec, onNewView, signalListeners = {}, width, height, ...options } = this.props; - if (this.containerRef.current) { - const finalSpec = combineSpecWithDimension(this.props); - this.viewPromise = vegaEmbed(this.containerRef.current, finalSpec, options) - .then(({ view }) => { - if (addSignalListenersToView(view, signalListeners)) { - view.run(); - } - return view; - }) - .catch(this.handleError); + try { + if (this.containerRef.current) { + const finalSpec = combineSpecWithDimension(this.props); + this.result = await vegaEmbed(this.containerRef.current, finalSpec, options); - if (onNewView) { - this.modifyView(onNewView); + if (addSignalListenersToView(this.result.view, signalListeners)) { + this.result.view.run(); + } + if (onNewView) { + this.modifyView(onNewView); + } } + } catch (err) { + this.handleError(err); } - } + }; - clearView() { - this.modifyView((view) => { - view.finalize(); - }); - this.viewPromise = undefined; + clearView = () => { + if (this.result) { + this.result.finalize(); + } + this.result = undefined; return this; - } + }; render() { const { className, style } = this.props;