feat: add vega interpreter as dependency and support custom interpreter (#747)

Author: domoritz

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

package.json

@@ -43,32 +43,33 @@
     "@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.2",
-    "@types/semver": "^7.3.7",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@types/semver": "^7.3.8",
     "@wessberg/rollup-plugin-ts": "^1.3.14",
     "auto": "^10.32.0",
-    "browser-sync": "^2.27.4",
-    "concurrently": "^6.2.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.1",
-    "rollup": "2.56.3",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.3.5",
-    "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.18.0"
+    "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.3.0",
+    "tslib": "^2.3.1",
     "vega-schema-url-parser": "^2.2.0",
     "vega-themes": "^2.10.0",
     "vega-tooltip": "^0.27.0"

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, {