• This repository has been archived on 03/Mar/2023
  • Stars
    star
    896
  • Rank 50,968 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

eval in reverse: stringifying all the stuff that JSON.stringify won't

lave Build Status

lave is eval in reverse; it does for JavaScript what JSON.stringify does for JSON, turning an arbitrary object in memory into the expression, function, or ES6 module needed to create it.

Why not just use JSON.stringify?

JSON is great data transport, but can only handle a subset of the objects expressible in a JavaScript runtime. This usually results in lossy serializations at best, and TypeError: Converting circular structure to JSON at worst. While we can get around such issues by writing JavaScript code to parse this JSON back into the structures we want, now we have to ship that code out of band, which can be a headache.

Instead of writing a parser for a new language that can represent arbitrary JavaScript runtime values, I built lave to use the best language for the job: JavaScript itself. This allows it to handle the following structures that JSON can't.

Type JavaScript JSON.stringify lave
Circular references a={}; a.self=a TypeError var a={};a.self=a;a
Repeated references a={}; [a, a] ⚠️ [{}, {}] var a={};[a,a]
Global object global TypeError (0,eval)('this') ?
Built-in objects Array.prototype ⚠️ [] Array.prototype
Boxed primitives Object('abc') ⚠️ "abc" Object('abc')
Functions [function(){}] ⚠️ [null] [function(){}]
Dates new Date(1e12) ⚠️ "2001-09-09T01:46:40.000Z" new Date(1000000000000)
NaN NaN ⚠️ null NaN
Infinity Infinity ⚠️ null Infinity
Sets and Maps new Set([1,2,3]) ⚠️ {} new Set([1,2,3])
Sparse arrays a=[]; a[2]=0; a ⚠️ [null,null,0] var a=[];a[2]=0;a
Object properties a=[0,1]; a.b=2; a ⚠️ [0,1] var a=[0,1];a.b=2;a
Custom prototypes Object.create(null) ⚠️ {} Object.create(null)

Keep in mind that there are some things that not even lave can stringify, such as function closures, or built-in native functions.

Example

This command...

node << EOF
  var generate = require('escodegen').generate
  var lave = require('lave')

  var a = [function(){}, new Date, new Buffer('A'), global]
  a.splice(2, 0, a)

  var js = lave(a, {generate, format: 'module'})
  console.log(js)
EOF

...outputs the following JavaScript:

var a = [
    function (){},
    new Date(1456522677247),
    null,
    Buffer('QQ==', 'base64'),
    (0, eval)('this')
];
a[2] = a;
export default a;

When would I want to use this?

  • To transport relational data. Since JSON can only represent hierarchical trees, attempts to serialize a graph require you to define a schema and ship code that reifies the relationship between objects at runtime. For example, if you have list of orders and a list of customers, and each order has a customerId property, you need to write and ship code that turns this property into one that references the customer object directly.

  • To colocate data and dependent logic. The past few years have seen a long overdue rethink of common best practices for web developers. From markup and logic in React components to styles and markup in Radium, we've improved developer productivity by slicing concerns vertically (many concerns per component) instead of horizontally (many components per concern). Having the ability to ship tightly coupled logic and data in one file means fewer moving parts during deployment.

  • To avoid runtime dependencies. There are several libraries that give you the ability to serialize and parse graph data, but most of add a parser dependency to your recipients (in the case of JavaScript, usually a browser). Since lave requires only a JavaScript parser, you do not need to incorporate a runtime library to use it. If you prefer the safety of parsing without evaluation and don't mind the dependency, consider using something like @benjamn's excellent arson.

How does lave work?

lave uses all of the syntax available in JavaScript to build the most concise representation of an object, such as by preferring literals ([1,2]) over assignment (var a=[];a[0]=1;a[1]=2). Here's how it works:

  • lave traverses the global object to cache paths for any host object. So if your structure contains [].slice, lave knows that you're looking for Array.prototype.slice, and uses that path in its place.

  • lave then traverses your object, converting each value that it finds into an abstract syntax graph. It never converts the same object twice; instead it caches all nodes it creates and reuses them any time their corresponding value appears.

  • lave then finds all expressions referenced more than once, and for each one, pulls the expression into a variable declaration, and replaces everywhere that it occurs with its corresponding identifier. This process of removing dipoles converts the abstract syntax graph into a serializable abstract syntax tree.

  • Finally, lave adds any assignment statements needed to fulfil circular references in your original graph, and then returns the expression corresponding to your original root value.

Installation

Please run the following command to install lave:

$ npm install lave

The library has been tested on Node 4.x and 5.x.

API

ast = lave(object, [options])

By default, lave takes an object and returns an abstract syntax tree (AST) representing the generated JavaScript. Any of the following options can also be specified:

  • generate: A function that takes an ESTree AST and returns JavaScript code, such as through escodegen or babel-generator. If this is omitted, an AST will be returned, with any functions in the original object serialized using toString, and wrapped in an eval call. If this is specified, a JavaScript string will be returned.
  • format: A string specifying the type of code to output, from the following:
    • expression (default): Returns code in which the last statement is result expression, such as var a={};[a, a];. This is useful when the code is evaluated with eval.
    • function: Returns the code as a function expression, such as (function(){var a={};return[a, a]}). This is useful for inlining as an expression without polluting scope.
    • module: Returns the code as an ES6 module export, such as var a={};export default[a, a];. This is currently useful for integration with a module build process, such as Rollup or Babel transforms.

Addenda

  • Many thanks to Jamen Marz for graciously providing the lave name on npm.
  • Right before publishing this, I discovered that uneval was a thing.

More Repositories

1

140bytes

Once a tweet-sized, fork-to-play, community-curated collection of JavaScript.
HTML
1,031
star
2

fab

a modular async web framework for node.js
JavaScript
732
star
3

browserver-client

෴ A node.js HTTP server in your browser ෴
JavaScript
638
star
4

authom

A zero-dependency mutli-service authentication tool for node.js
JavaScript
401
star
5

browserver-node

෴ Browserver proxy for node.js ෴
JavaScript
333
star
6

domo

Markup, style, and code in one language.
JavaScript
308
star
7

certbot-route53

Helping create Let's Encrypt certificates for AWS Route53
Shell
175
star
8

kibi

a client-side web framework in 1,024 bytes
JavaScript
144
star
9

dynamo

DynamoDB client for node.js
JavaScript
141
star
10

building-brooklynjs

My story of how we built BrooklynJS.
136
star
11

rndr.me

an HTTP server that uses PhantomJS to render HTML
JavaScript
133
star
12

weenote

A quick/dirty/tiny tool for creating simple Takahashi-style presentations.
HTML
119
star
13

hyperspider

A declarative HATEOAS API crawler for node.js
JavaScript
114
star
14

sheet-down

A Google Spreadsheet implementation of leveldown
JavaScript
108
star
15

cookie-node

signed cookie functionality for node.js
JavaScript
82
star
16

config-leaf

Hide your sensitive node.js bits in plain sight.
JavaScript
53
star
17

sajak

Simple Authenticated JSON API Kit
JavaScript
33
star
18

dynamo-down

A leveldown API implementation on AWS DynamoDB
JavaScript
31
star
19

localhose

Hose your hosts file for easier local web development
JavaScript
29
star
20

browserver.org

The code for the browserver.org web site.
CoffeeScript
29
star
21

emit

A reactive toolkit for JavaScript
JavaScript
29
star
22

dynamo-client

A low-level client for accessing DynamoDB from node.js
JavaScript
28
star
23

osx-browser-vm

Evaluate JavaScript in local OS X browsers
JavaScript
28
star
24

dynamo-streams

A stream-flavored wrapper for the AWS DynamoDB JavaScript API
JavaScript
25
star
25

wc-jsx-runtime

A JSX transform for Web Components
JavaScript
23
star
26

tmpl-node

a template module for node.js
JavaScript
20
star
27

esbuild-plugin-http-fetch

An esbuild plugin that resolves http(s) modules
JavaScript
19
star
28

skeyma

A JavaScript parser & serializer for {key, value} objects & streams
JavaScript
18
star
29

browserver-router

A platform-agnostic router for HTTP listeners that follow the node.js spec
JavaScript
18
star
30

cfn-api-gateway-custom-domain

API Gateway custom domains as CloudFormation resources, backed by Let's Encrypt
JavaScript
18
star
31

alReady.js

a terse, embeddable, and cross-browser domReady implementation
JavaScript
17
star
32

electric-objects

A node.js API for the Electric Objects EO1 frame
JavaScript
17
star
33

monot

Unique JavaScript dates
JavaScript
15
star
34

google-worksheet-stream

A streaming interface for Google Spreadsheets
JavaScript
14
star
35

dinkumise

Keep ya JavaScripts Dinki-di!
11
star
36

pbsb

getters/setters and pub/sub in one tiny javascript function
JavaScript
11
star
37

twil-eo

Using Twilio, AWS, and Electric Objects to create an MMS-powered family photo frame.
JavaScript
10
star
38

textpanda

web-based text shortcuts for the lazy
JavaScript
8
star
39

diff-stream2

Merges multiple sorted streams into a diffed tuple stream
JavaScript
7
star
40

namedrop

minification for DOM-heavy code
JavaScript
7
star
41

eartag

Tag browsers like farmers tag livestock
JavaScript
7
star
42

autorequire

small module for autorequiring. warning: MAGIC!
JavaScript
6
star
43

sort-stream2

Array.prototype.sort for streams
JavaScript
6
star
44

dynamo-sync

Differential data synchronization for Amazon's DynamoDB
6
star
45

google-oauth-jwt-stream

A readable stream of OAuth access tokens for use with Google APIs
JavaScript
6
star
46

dom-jsx-runtime

A tiny library that turns JSX into DOM operations
JavaScript
6
star
47

node-lacrosse

A node.js streaming API for Lacrosse Alert sensors
JavaScript
6
star
48

abstract-stream-leveldown

A stream-based abstract prototype matching the LevelDOWN API
JavaScript
5
star
49

gist-in-time

a stylesheet for displaying github gist metadata on hover
5
star
50

typd.in

a web-based input method editor for japanese
JavaScript
4
star
51

esbuild-plugin-eval

An esbuild plugin that evaluates a module before importing it
JavaScript
4
star
52

one-character-identifiers

every javascript identifier that fits in a character
JavaScript
4
star
53

jed.is

personal web site
3
star
54

domogenize

Turn static HTML and CSS into declarative JavaScript
JavaScript
3
star
55

ramendan

CoffeeScript
3
star
56

census-topologies

Topologies from the U.S. Census Bureau
Shell
3
star
57

20x20

a simple pecha kucha timer optimized for my iPhone
JavaScript
3
star
58

utfn

a test of the utf-n encoding
3
star
59

esbuild-plugin-bundle

An esbuild plugin that bundles modules before importing them
JavaScript
2
star
60

deno_bundle

A temporary workaround to support bundling with sourcemaps in Deno
JavaScript
2
star
61

ordered-kv-tuple-stream

Aligns multiple ordered k/v readable streams into one
JavaScript
2
star
62

tuple-stream2

Aligns multiple readable object streams into one stream
JavaScript
2
star
63

esbuild-plugin-deno-http

An esbuild plugin that uses Deno to resolve and cache HTTP modules
JavaScript
2
star
64

esbuild-plugin-env

An esbuild plugin that exports the current environment as a module
JavaScript
2
star
65

deno-file-system-access-api

File System Access API for Deno
JavaScript
1
star
66

level-sync

One-way sync for levelup data stores
JavaScript
1
star
67

abevigoda

Abe Vigoda as a Service
JavaScript
1
star
68

esbuild-plugin-view-source

An esbuild plugin that enables built modules to be imported as source
JavaScript
1
star