Compile optimized Vega and Vega-Lite bundles.

Overview

vega-bundler

Utilities for pre-parsing Vega and Vega-Lite specifications and producing optimized module bundles.

Both and Vega and Vega-Lite have their own parser and compiler. A Vega-Lite specification compiles to a full Vega specification, which in turn is parsed to an intermediate dataflow specification that serves as input to a Vega View (for more, see How Vega Works). In addition, Vega provides a number of data and visual encoding transforms, but not all of them may be needed within a given a deployment.

To reduce both file size and loading time, this package pre-parses input specifications and generates optimized code bundles that omit the parsers and include only the underlying transforms that are actually used. This can result in substantial savings, especially when using Vega-Lite.

API Reference

# bundle(specs[, options]) <>

Returns bundled source code for browser use. The source code includes the Vega View constructor as an exported method.

By default the bundle also exports a method for each named specification in specs. The exported methods take Vega View constructor options as input and return an instantiated View. Set the specs to false to disable inclusion of runtime specifications in the output bundle.

  • specs: An object of key-value pairs where the key is a unique name (must be a valid JavaScript identifier) and the value is a Vega or Vega-Lite specification object. The specifications should include the $schema property indicating the Vega or Vega-Lite schema.
  • options: An object containing build options passed to the rollup bundler:
    • specs: A boolean flag (default true) indicating if parsed runtime dataflow specifications should be included in the bundle. If false, all specifications are excluded from the generated output code, in which case clients must directly pass runtime dataflow specifications to the exported View constructor.
    • transpile: A boolean flag (default true) indicating if the Vega code should be transpiled (using Babel) for greater browser compatibility.
    • targets: A string indicating the Babel transpilation target platforms (default 'defaults and not IE 11'). This option is ignored if the babel option is false.
    • name: The name of the output bundle (default 'vegaBundle'). This corresponds to the global variable name for the compiled bundle when loaded directly via the browser <script> tag.
    • format: The output format for the bundle (default 'umd'). Valid options are 'umd' (universal module definition), 'iife' (immediately-invoked function expression), and es (EcmaScript module).
    • minify: A boolean flag (default true) indicating if output code should be minified using terser.

# Bundle() <>

A class for generating custom builds. The bundle method is a convenient shorthand that calls Bundle class methods. Developers can use a Bundle directly to exert more control over the bundling process, including generation of module index code that can then be used in other projects and passed to bundlers other than rollup.

An instantiated Bundle includes the following methods:

# Bundle.add(name, spec) <>

Adds a Vega or Vega-Lite specification to the bundle along with a unique name, and returns this Bundle instance. This method is a convenience method that redirects to either addVegaSpec or addVegaLiteSpec. The type of the file will be determined by consulting the $schema property of the input spec object. If the $schema property is not defined or the Vega language variant can not be determined, the input spec is parsed as a Vega specification.

# Bundle.addVegaSpec(name, spec) <>

Adds a Vega specification to the bundle along with a unique name, and returns this Bundle instance. The input spec must be a valid Vega JSON specification.

# Bundle.addVegaLiteSpec(name, spec) <>

Adds a Vega-Lite specification to the bundle along with a unique name, and returns this Bundle instance. The input spec must be a valid Vega-Lite JSON specification.

# Bundle.addDataflowSpec(name, spec) <>

Adds a parsed Vega dataflow specification to the bundle along with a unique name, and returns this bundler instance. The input spec should be a valid Vega dataflow specification, such as those produced by vega.parse.

# Bundle.getDataflowSpec(name) <>

Get a named Vega dataflow specification in this bundle. This method retrieves a runtime dataflow specification for an added Vega or Vega-Lite specification.

# Bundle.getDataflowSpecs() <>

Get all Vega runtime dataflow specifications in this bundle. Returns an object with specification names for keys and Vega runtime dataflow specification as values.

# Bundle.codegen() <>

Returns generated JavaScript module index code for the current bundle, using ES module syntax. The generated code will import only the Vega transforms needed for the current set of specifications, and will export View constructor functions for each of the named specifications.

For example, a specification named 'barChart' will result in an exported method barChart(options) { ... } that takes Vega View constructor options as input and returns an instantiated View instance.

# Bundle.build(options) <>

Compiles a bundle using rollup and returns a Promise to the resulting JavaScript code. This method accepts the same options as bundle.

Command Line Utility

The vega_bundler command line utility generates optimized code bundles for input Vega or Vega-Lite specification files.

Usage

vega_bundler --help
Compile Vega or Vega-Lite specifications into an optimized bundle.
Usage: vega_bundler [options] spec_files
  If the "output" option is unspecified, writes generated code to stdout.
  For errors and log messages, writes to stderr.

Options:
  -o, --output     Output file to write bundled code. If omitted, writes to
                   standard output.                                     [string]
  -m, --manifest   JSON file mapping specification names to files. If omitted,
                   spec1, spec2, ...specN naming is used. If provided, the
                   spec_files input is ignored.                         [string]
      --include    Include Vega runtime dataflow specifications in the bundle.
                   If false, the dataflow specifications are omitted from the
                   bundle and written to individual files.
                                                       [boolean] [default: true]
      --minify     Minify output code using terser.    [boolean] [default: true]
      --format     The output bundle format. One of "umd" (default, universal
                   module definition), "iife" (immediately-invoked function
                   expression), or "es" (EcmaScript module).            [string]
      --name       The output bundle name. This is the global variable name for
                   the bundle when loaded via the <script> tag.         [string]
      --transpile  Transpile code using Babel.         [boolean] [default: true]
      --targets    Transpilation target platforms. Ignored if transpile is
                   false.                                               [string]
      --help       Show help                                           [boolean]
      --version    Show version number                                 [boolean]

Examples

vega_bundler -o bundle.min.js arc.vg.json bar.vg.json

Compiles the provided specifications into an optimized bundle. The bundle includes the methods spec1(opt) a spec2(opt) for instantiating View instances.

vega_bundler -m specs.json -o bundle.min.js

Compiles the specifications included in the manifest file specs.json into an optimized bundle. For example, the manifest file

{
  "arc": "specs/arc.vg.json",
  "bar": "specs/bar.vg.json"
}

will result in an optimized bundle with the methods arc(opt) and bar(opt) for instantiating View instances.

vega_bundler --no-includes -m specs.json -o bundle.min.js

Compiles an optimized bundle that exports the Vega View constructor but does not include parsed runtime dataflow specifications. Instead, the dataflow specifications are written to the separate files arc.json and bar.json, which can be loaded separately and passed to the View constructor.

You might also like...

A lite version for the my original app loki stream which allowed watching anime on your phone. Made using expo.

A lite version for the my original app loki stream which allowed watching anime on your phone. Made using expo.

LokiStream Lite A lite version for the my original app loki stream. This app is faster, smaller and more optimized for your phone. It allows you to wa

Nov 4, 2022

A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framework.

Sveltosis Still in development A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framew

Nov 24, 2022

Some compile-time magic for your Vite project

๐Ÿ’› You can help the author become a full-time open-source maintainer by sponsoring him on GitHub. vite-plugin-compile-time Use this plugin to generate

Nov 17, 2022

A simple nodejs module which is wrapper around solc that allows you to compile Solidity code

A simple nodejs module which is wrapper around solc that allows you to compile Solidity code

Simple Solidity Compiler It's a simple nodejs module which is wrapper around solc that allows you to compile Solidity code and get the abi and bytecod

Feb 21, 2022

Converts JSX to HTML strings at compile time.

unplugin-jsx-string Converts JSX to HTML strings at compile time. Installation npm i unplugin-jsx-string Vite // vite.config.ts import JsxString from

Sep 3, 2022

Jsonup - This is a zero dependency compile-time JSON parser written in TypeScript

jsonup This is a zero dependency compile-time JSON parser written in TypeScript.

Nov 16, 2022

Allows you to build fetcher function by URL at compile-time.

Allows you to build fetcher function by URL at compile-time.

fetch.macro Allows you to build fetcher function by URL at compile-time. Usage Simply install and configure babel-plugin-macros and then use fetch.mac

Nov 7, 2022

Compile-time tests for types. Useful to make sure types don't regress into being overly-permissive as changes go in over time.

expect-type Compile-time tests for types. Useful to make sure types don't regress into being overly-permissive as changes go in over time. Similar to

Nov 21, 2022

Experimental compile-time optimizer for SolidJS

solid-optimizer Experimental compile-time optimizer for SolidJS Install npm i -D solid-optimizer yarn add -D solid-optimizer pnpm add -D solid-optimiz

Oct 21, 2022

A hardhat solidity template with necessary libraries that support to develop, compile, test, deploy, upgrade, verify solidity smart contract

solidity-hardhat-template A solidity hardhat template with necessary libraries that support to develop, compile, test, deploy, upgrade, verify solidit

Oct 16, 2022

Compile Master CSS ahead of time with zero-configuration integration with build tools

CSS Compiler Compile Master CSS ahead of time with zero-configuration integration with build tools On this page Usage webpack.config.js vite.config.js

Oct 31, 2022

A library optimized for concise and principled data graphics and layouts.

A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Nov 30, 2022

An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Nov 13, 2022

A library optimized for concise and principled data graphics and layouts.

A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Nov 29, 2022

Interactive To Do List, draggable tasks, optimized for desktop and mobile screen sizes. It reserves data in local storage. Built with HTML, CSS, and JavaScript.

To Do List Interactive daily To-Do List Built With Major languages: html, css, javascript Frameworks: Technologies used: Webpack Live Demo Live Demo L

Aug 4, 2022

๐ŸŒ๐Ÿ“– A readable, automated, and optimized (5 kb) internationalization for JavaScript

Linguijs ๐ŸŒ ๐Ÿ“– A readable, automated, and optimized (5 kb) internationalization for JavaScript Documentation ยท Documentation 2.x ยท Quickstart ยท Exampl

Nov 21, 2022

Swiffy-slider - Super fast carousel and slider with touch for optimized websites running in modern browsers.

Swiffy Slider Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers. Explore Swiffy Slider docs ยป Se

Nov 24, 2022

BotsApp is an optimized and easy-to-use WhatsApp UserBot written in Node.js

BotsApp is an optimized and easy-to-use WhatsApp UserBot written in Node.js

๐Ÿ’  BotsApp ๐Ÿ’  Your Personal Assisstant, on WhatsApp! BotsApp is an optimized and easy-to-use WhatsApp UserBot written in Node.js. Utilize your persona

Nov 29, 2022

A fast and optimized middleware server with an absurdly small amount of code (300 lines) built on top of Deno's native HTTP APIs

A fast and optimized middleware server with an absurdly small amount of code (300 lines) built on top of Deno's native HTTP APIs with no dependencies. It also has a collection of useful middlewares: log file, serve static, CORS, session, rate limit, token, body parsers, redirect, proxy and handle upload. In "README" there are examples of all the resources. Faster's ideology is: all you need is an optimized middleware manager, all other functionality is middleware.

Oct 23, 2022
Releases(v0.0.1)
Owner
Vega
Data Visualization Languages & Tools
Vega
A visualization grammar. Moved to: https://github.com/vega/vega

Vega: A Visualization Grammar Vega is a visualization grammar, a declarative format for creating and saving interactive visualization designs. With Ve

Trifacta Inc. 29 Sep 24, 2022
Add all games from purchased itch.io bundles to your library.

itch-io-bundle-claimer When you purchase some game bundles on itch.io, you are required to manually claim every game that you want to add to your libr

Anthony Brown 7 Oct 3, 2022
๐ŸŽฏ Wallet Lite is a Quick and Simple way to use your Tokens of Lunes Blockchain in a light Chrome extension

Lunes Wallet Lite Offered by: Lunes Installing Web store: Lunes Lite will be available on Chrome Web Store Build: Requisites NodeJS (16 or higher) Git

Lunes Platform 10 Oct 25, 2022
A JavaScript, zero-dependency, super small version of IP2Location LITE country lookups.

ip3country This is a zero-dependency, super small, IP address to 2-letter country code lookup library. There are already several libraries available,

Statsig 33 Feb 9, 2022
Analysis of WordPress 3D Print Lite 1.9.1.4 - arbitrary file upload vulnerability.

3DPrint-Lite-1.9.1.4-File-Upload Analysis of WordPress 3D Print Lite 1.9.1.4 - arbitrary file upload vulnerability. The Vulnerability: This vulnerabil

Jakom 4 Mar 15, 2022
A JavaScript, zero-dependency, super small version of IP2Location LITE country lookups.

A JavaScript, zero-dependency, super small version of IP2Location LITE country lookups.

Statsig 33 Feb 9, 2022
Material Design Lite for Ember.js Apps

ember-material-lite Google's Material Design Lite for Ember.js apps This addon requires ember >= 1.11.0 Installation # ember-cli < 0.2.3 ember install

Mike North 148 Dec 17, 2021
CLI tool to update caniuse-lite to refresh target browsers from Browserslist config

Update Browserslist DB CLI tool to update caniuse-lite with browsers DB from Browserslist config. Some queries like last 2 version or >1% depends on a

Browserslist 24 Nov 8, 2022
Babel Plugin Lite Regenerator

Babel Plugin Lite Regenerator intro This babel plugin is a ported version of TypeScript generator transform. It can transform async and generator func

Shi Meng 6 Jul 8, 2022