Release

.github/workflows/publish.yml

@@ -15,20 +15,22 @@ jobs:
 
     name: Make a release and publish to NPM
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Prepare repository
-        run: git fetch --unshallow --tags
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
 
-      - uses: actions/setup-node@v2.3.0
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          cache: 'yarn'
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Install Node dependencies
         run: yarn --frozen-lockfile
 
+      # don't use yarn run to avoid using yarnpkg registry
       - name: Create release
+        run: npm run release
         env:
-            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-            NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: yarn run release
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -15,9 +15,11 @@ jobs:
     name: Test
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v2.3.0
+      - uses: actions/setup-node@v3
+        with:
+          cache: 'yarn'
 
       - name: Install Node dependencies
         run: yarn --frozen-lockfile
@@ -29,4 +31,4 @@ jobs:
         run: yarn jest test/ --collectCoverage=true
 
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v2.0.2
+        uses: codecov/codecov-action@v3.1.1

README.md

@@ -51,7 +51,7 @@ vegaEmbed("#vis", spec, {tooltip: {theme: 'dark'}})
   .catch(console.error);
 ```
 
-If you want to ue a different version of the tooltip handler, you can override the default handler with the handler from Vega Tooltip (and you need to install it separately).
+If you want to use a different version of the tooltip handler, you can override the default handler with the handler from Vega Tooltip (and you need to install it separately).
 
 ```js
 var handler = new vegaTooltip.Handler();

build-style.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
 
 printf "// generated with build-style.sh\nexport default \`" > src/style.ts
-node-sass vega-tooltip.scss >> src/style.ts
+yarn -s sass vega-tooltip.scss >> src/style.ts
 echo "\`;" >> src/style.ts

package.json

@@ -61,26 +61,27 @@
     "release": "yarn run prebuild && yarn build && auto shipit"
   },
   "devDependencies": {
-    "@auto-it/conventional-commits": "^10.31.0",
-    "@auto-it/first-time-contributor": "^10.31.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@wessberg/rollup-plugin-ts": "^1.3.14",
-    "auto": "^10.31.0",
-    "browser-sync": "^2.27.5",
-    "concurrently": "^6.2.1",
-    "gh-pages": "^3.2.3",
-    "node-sass": "^6.0.1",
+    "@auto-it/conventional-commits": "^10.37.6",
+    "@auto-it/first-time-contributor": "^10.37.6",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "auto": "^10.37.6",
+    "browser-sync": "^2.27.10",
+    "concurrently": "^7.4.0",
+    "gh-pages": "^4.0.0",
+    "jest-environment-jsdom": "^29.1.2",
     "path": "^0.12.7",
-    "rollup": "^2.56.2",
+    "rollup": "^2.79.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "~4.3.5",
-    "vega-datasets": "^2.2.0",
-    "vega-lite-dev-config": "^0.18.0",
-    "vega-typings": "^0.21.0"
+    "rollup-plugin-ts": "^3.0.2",
+    "sass": "^1.55.0",
+    "typescript": "~4.8.4",
+    "vega-datasets": "^2.5.1",
+    "vega-lite-dev-config": "^0.21.0",
+    "vega-typings": "^0.22.3"
   },
   "dependencies": {
-    "vega-util": "^1.16.1"
+    "vega-util": "^1.17.0"
   }
 }

rollup.config.js

@@ -1,6 +1,6 @@
 import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
-import ts from '@wessberg/rollup-plugin-ts';
+import ts from 'rollup-plugin-ts';
 import bundleSize from 'rollup-plugin-bundle-size';
 import { terser } from 'rollup-plugin-terser';
 
@@ -25,7 +25,8 @@ const outputs = [
     input: 'src/index.ts',
     output: {
       file: pkg.module,
-      format: 'esm'
+      format: 'esm',
+      sourcemap: true
     },
     plugins: plugins(undefined, true),
     external: [...Object.keys(pkg.dependencies)]
@@ -37,6 +38,7 @@ const outputs = [
         format: 'umd',
         name: 'vegaTooltip',
         exports: 'named',
+        sourcemap: true,
         globals: {
           'vega-util': 'vega'
         },
@@ -46,6 +48,7 @@ const outputs = [
         format: 'umd',
         name: 'vegaTooltip',
         exports: 'named',
+        sourcemap: true,
         globals: {
           'vega-util': 'vega'
         },

src/Handler.ts

@@ -63,12 +63,10 @@ export class Handler {
       this.el.setAttribute('id', this.options.id);
       this.el.classList.add('vg-tooltip');
 
-      document.body.appendChild(this.el);
+      const tooltipContainer = document.fullscreenElement ?? document.body;
+      tooltipContainer.appendChild(this.el);
     }
 
-    const tooltipContainer = document.fullscreenElement ?? document.body;
-    tooltipContainer.appendChild(this.el);
-
     // hide tooltip for null, undefined, or empty string values
     if (value == null || value === '') {
       this.el.classList.remove('visible', `${this.options.theme}-theme`);
@@ -88,6 +86,7 @@ export class Handler {
       this.options.offsetY
     );
 
-    this.el.setAttribute('style', `top: ${y}px; left: ${x}px`);
+    this.el.style.top = `${y}px`;
+    this.el.style.left = `${x}px`;
   }
 }

src/defaults.ts

@@ -1,4 +1,4 @@
-import { formatValue } from './formatValue';
+import {formatValue} from './formatValue';
 import defaultStyle from './style';
 
 const EL_ID = 'vg-tooltip-element';