Merge pull request #750 from vega/next

.autorc.json

@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    "npm",
+    "conventional-commits",
+    "first-time-contributor",
+    "released"
+  ],
+  "baseBranch": "stable",
+  "prereleaseBranches": [
+    "next"
+  ]
+}

.config/beemo/jest.ts

@@ -3,6 +3,7 @@ import {JestConfig} from '@beemo/driver-jest';
 const config: JestConfig = {
   testURL: 'http://localhost/',
   setupFiles: ['jest-canvas-mock'],
+  testEnvironment: 'jsdom',
 };
 
 export default config;

.github/workflows/merge-dependabot.yml

@@ -0,0 +1,16 @@
+name: Auto-merge Dependabot PRs
+on:
+  schedule:
+    - cron: '0 * * * *'
+jobs:
+  auto_merge:
+    name: Auto-merge Dependabot PRs
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: akheron/dependabot-cron-action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          auto-merge: 'minor'
+          merge-method: 'squash'

.github/workflows/publish.yml

@@ -2,36 +2,39 @@ name: Publish
 
 on:
   push:
-    tags:
-      - "v*"
+    branches-ignore:
+      # No canary deploys for branches opened by dependabot
+      - 'dependabot/**'
 
 jobs:
   publish:
-    name: Publish to NPM
+    name: Make a release and publish to NPM
 
     runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.1.5
+
+      - name: Prepare repository
+        run: git fetch --unshallow --tags
+
+      - uses: actions/setup-node@v2.4.0
         with:
           registry-url: "https://registry.npmjs.org"
           node-version: "15"
+
       - name: Install Node dependencies
         run: yarn --frozen-lockfile
+
       - name: Build
         run: yarn build
-      - name: Publish to NPM
-        run: npm publish
+
+      # don't use yarn run to avoid using yarnpkg registry
+      - name: Create release
+        run: |
+          npm run release
         env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Create Release
-        id: create_release
-        uses: actions/create-release@v1
-        env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tag_name: ${{ github.ref }}
-          release_name: Release ${{ github.ref }}
-          draft: false
-          prerelease: false

.github/workflows/test.yml

@@ -3,10 +3,10 @@ name: Test
 on:
   push:
     branches:
-      - master
+      - next
   pull_request:
     branches:
-      - master
+      - next
 
 jobs:
   test:
@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Setup Node
-        uses: actions/setup-node@v2.1.5
+        uses: actions/setup-node@v2.4.0
         with:
           node-version: "15"
 
@@ -32,4 +32,4 @@ jobs:
         run: yarn jest test/ --collectCoverage=true
 
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v2.1.0

README.md

@@ -161,6 +161,7 @@ var opt = {
   timeFormatLocale: ...,
 
   ast: ...,
+  expr: ...,
 
   i18n: {
     COMPILED_ACTION: ...,
@@ -197,7 +198,8 @@ var opt = {
 | `downloadFileName` | String   | Sets the file name (default: `visualization`) for charts downloaded using the `png` or `svg` action. |
 | `formatLocale` | Object   | Sets the default locale definition for number formatting. See the [d3-format locale collection](https://github.com/d3/d3-format/tree/master/locale) for definition files for a variety of languages. Note that this is a global setting. |
 | `timeFormatLocale` | Object   | Sets the default locale definition for date/time formatting. See the [d3-time-format locale collection](https://github.com/d3/d3-time-format/tree/master/locale) for definition files for a variety of languages. Note that this is a global setting. |
-| `ast` | Boolean   | Generate an [Abstract Syntax Tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) instead of expressions and use an interpreter instead of native evaluation. While the interpreter is slower, it adds support for Vega expressions that are [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)-compliant. In addition to enabling the `ast` option, you need to load the Vega interpreter module before loading Vega. See https://github.com/vega/vega/pull/2658 for details. |
+| `ast` | Boolean   | Generate an [Abstract Syntax Tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) instead of expressions and use an interpreter instead of native evaluation. While the interpreter is slower, it adds support for Vega expressions that are [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)-compliant. |
+| `expr` | Object   | Custom Vega Expression interpreter. |
 | `viewClass` | Class         | Class which extends [Vega `View`](https://vega.github.io/vega/docs/api/view/#view) for custom rendering. |
 
 ## Common questions
@@ -220,4 +222,9 @@ To build `vega-embed.js` and view the test examples, you must have [yarn](https:
 
 ## Release Process
 
-To release a new version, make sure that everything works. Then run `yarn version` and bump the version number. Lastly, push to GitHub (with the release tag). GitHub Actions will build a bundle and make the [npm release](https://www.npmjs.com/package/vega-embed) automatically.
+Publishing is handled by a 2-branch [pre-release process](https://intuit.github.io/auto/docs/generated/shipit#next-branch-default), configured in `publish.yml`. All changes should be based off the default `next` branch, and are published automatically.
+
+- PRs made into the default branch that [would trigger a version bump](https://intuit.github.io/auto/docs/generated/conventional-commits) are auto-deployed to the `next` pre-release tag on NPM. The result can be installed with `npm install vega-embed/@next`.
+  - When merging into `next`, please use the `squash and merge` strategy.
+- To release a new stable version, open a PR from `next` into `stable` using this [compare link](https://github.com/vega/vega-embed/compare/stable...next).
+  - When merging from `next` into `stable`, please use the `create a merge commit` strategy.

package.json

@@ -39,42 +39,46 @@
     "build-es5"
   ],
   "devDependencies": {
-    "@rollup/plugin-commonjs": "19.0.0",
+    "@auto-it/conventional-commits": "^10.32.0",
+    "@auto-it/first-time-contributor": "^10.32.0",
+    "@rollup/plugin-commonjs": "20.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@types/semver": "^7.3.5",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@types/semver": "^7.3.8",
     "@wessberg/rollup-plugin-ts": "^1.3.14",
-    "browser-sync": "^2.26.14",
-    "concurrently": "^6.0.2",
-    "del-cli": "^3.0.1",
+    "auto": "^10.32.0",
+    "browser-sync": "^2.27.5",
+    "concurrently": "^6.2.1",
+    "del-cli": "^4.0.1",
     "jest-canvas-mock": "^2.3.1",
-    "node-sass": "^6.0.0",
-    "rollup": "2.46.0",
+    "node-sass": "^6.0.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.2.4",
-    "vega": "^5.19.1",
+    "rollup": "2.56.3",
+    "typescript": "^4.4.3",
+    "vega-interpreter": "^1.0.4",
+    "vega-lite-dev-config": "^0.18.0",
     "vega-lite": "^5.0.0",
-    "vega-lite-dev-config": "^0.17.3"
+    "vega": "^5.19.1"
   },
   "peerDependencies": {
-    "vega": "^5.13.0",
+    "vega": "^5.20.2",
     "vega-lite": "*"
   },
   "dependencies": {
-    "fast-json-patch": "^3.0.0-1",
+    "fast-json-patch": "^3.1.0",
     "json-stringify-pretty-compact": "^3.0.0",
     "semver": "^7.3.5",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.1",
     "vega-schema-url-parser": "^2.2.0",
     "vega-themes": "^2.10.0",
-    "vega-tooltip": "^0.25.1"
+    "vega-tooltip": "^0.27.0"
   },
   "scripts": {
     "prebuild": "yarn clean && yarn build:style",
     "build": "rollup -c",
     "build:style": "./build-style.sh",
-    "clean": "del build build-es5 src/style.ts",
+    "clean": "del-cli build build-es5 src/style.ts",
     "prepublishOnly": "yarn clean && yarn build",
     "preversion": "yarn lint && yarn test",
     "serve": "browser-sync start --directory -s -f build *.html",
@@ -86,6 +90,7 @@
     "prettierbase": "beemo prettier '*.{css,scss,html}'",
     "eslintbase": "beemo eslint .",
     "format": "yarn eslintbase --fix && yarn prettierbase --write",
-    "lint": "yarn eslintbase && yarn prettierbase --check"
+    "lint": "yarn eslintbase && yarn prettierbase --check",
+    "release": "auto shipit"
   }
 }

src/embed.ts

@@ -16,6 +16,7 @@ import {
   TooltipHandler,
   View,
 } from 'vega';
+import {expressionInterpreter} from 'vega-interpreter';
 import * as vegaLiteImport from 'vega-lite';
 import {Config as VlConfig, TopLevelSpec as VlSpec} from 'vega-lite';
 import schemaParser from 'vega-schema-url-parser';
@@ -87,6 +88,7 @@ export interface EmbedOptions<S = string, R = Renderers> {
   formatLocale?: Record<string, unknown>;
   timeFormatLocale?: Record<string, unknown>;
   ast?: boolean;
+  expr?: typeof expressionInterpreter;
   viewClass?: typeof View;
 }
 
@@ -354,7 +356,7 @@ async function _embed(
     loader,
     logLevel,
     renderer,
-    ...(ast ? {expr: (vega as any).expressionInterpreter} : {}),
+    ...(ast ? {expr: (vega as any).expressionInterpreter ?? opts.expr ?? expressionInterpreter} : {}),
   });
 
   view.addSignalListener('autosize', (_, autosize: Exclude<AutoSize, string>) => {

test-csp.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="Content-Security-Policy" content="default-src https://cdn.jsdelivr.net/ 'self' 'unsafe-inline'" />
+    <title>Vega-Embed for Vega-Lite</title>
+
+    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
+    <script src="build/vega-embed.js"></script>
+  </head>
+
+  <body>
+    <div id="vis"></div>
+    <script>
+      async function run() {
+        const spec = {
+          $schema: "https://vega.github.io/schema/vega-lite/v4.json",
+          data: {
+            values: [
+              { a: "A", b: 28 },
+              { a: "B", b: 55 },
+              { a: "C", b: 43 },
+              { a: "D", b: 91 },
+              { a: "E", b: 81 },
+              { a: "F", b: 53 },
+              { a: "G", b: 19 },
+              { a: "H", b: 87 },
+              { a: "I", b: 52 },
+            ],
+          },
+          mark: "bar",
+          encoding: {
+            x: { field: "a", type: "nominal" },
+            y: { field: "b", type: "quantitative" },
+          },
+        };
+
+        const result = await vegaEmbed("#vis", spec, {
+          ast: true,
+        });
+      }
+      run();
+    </script>
+  </body>
+</html>

test-vl.html

@@ -6,7 +6,7 @@
     <title>Vega-Embed for Vega-Lite</title>
 
     <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
     <script src="build/vega-embed.js"></script>
   </head>
 

test/embed.test.ts

@@ -1,5 +1,6 @@
 import * as vega from 'vega';
 import {View} from 'vega';
+import {expressionInterpreter} from 'vega-interpreter';
 import * as vl from 'vega-lite';
 import {compile, TopLevelSpec} from 'vega-lite';
 import embed, {guessMode, Mode} from '../src/embed';
@@ -259,6 +260,14 @@ test('can set ast option', async () => {
   expect(result).toBeTruthy();
 });
 
+test('can set expr option', async () => {
+  const el = document.createElement('div');
+  const result = await embed(el, vlSpec, {
+    expr: expressionInterpreter,
+  });
+  expect(result).toBeTruthy();
+});
+
 test('can change i18n strings', async () => {
   const el = document.createElement('div');
   await embed(el, vlSpec, {