• Stars
    star
    167
  • Rank 226,635 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated over 1 year ago

Reviews

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

Repository Details

🛰 JSON parse & stringify with support for cyclic objects, functions, dates, regex, infinity, undefined, null, NaN, Classes, Instances

TeleJSON

A library for teleporting rich data to another place.

Install

yarn add telejson

What can it do, what can't it do:

JSON.parse & JSON.stringify have limitation by design, because there are no data formats for things like

  • Date
  • Function
  • Class
  • Symbol
  • etc.

Also JSON doesn't support cyclic data structures.

This library allows you to pass in data with all of the above properties. It will transform the properties to something that's allowed by the JSON spec whilst stringifying, and then convert back to the cyclic data structure when parsing.

When parsing, class instances will be given the Class's name again. The prototype isn't copied over.

Functions are supported, they are stringified and will be eval-ed when called. This lazy eval is important for performance. The eval happens via eval() Functions are stripped of comments and whitespace.

Obviously calling the function will only really work as expected if the functions were pure the begin with.

Regular expressions just work.

Symbol will be re-created with the same string. (resulting in a similar, but different symbol)

Dates are parsed back into actual Date objects.

DOM Events are processed to extract the internal (hidden) properties, resulting in an object containing the same properties but not being an instance of the original class.

API

You have 2 choices:

import { stringify, parse } from 'telejson';

const Foo = function () {};

const root = {
  date: new Date('2018'),
  regex1: /foo/,
  regex2: /foo/g,
  regex2: new RegExp('foo', 'i'),
  fn1: () => 'foo',
  fn2: function fn2() {
    return 'foo';
  },
  Foo: new Foo(),
};

// something cyclic
root.root = root;

const stringified = stringify(root);
const parsed = parse(stringified);

stringify and parse do not conform to the JSON.stringify or JSON.parse api. they take an data object and a option object.

OR you can use use the replacer and reviver:

import { replacer, reviver } from 'telejson';
import data from 'somewhere';

const stringified = JSON.stringify(data, replacer(), 2);
const parsed = JSON.parse(stringified, reviver(), 2);

notice that both replacer and reviver need to be called! doing the following will NOT WORK:

const stringified = JSON.stringify(data, replacer, 2);
const parsed = JSON.parse(stringified, reviver, 2);

options

You either pass the options-object to replacer or as a second argument to stringify:

replacer({ maxDepth: 10 });
stringify(date, { maxDepth: 10 });

replacer

maxDepth: controls how deep to keep stringifying. When max depth is reach, objects will be replaced with "[Object]", arrays will be replaced with "[Array(<length>)]". default value is 10 This option is really useful if your object is huge/complex, and you don't care about the deeply nested data.

space: controls how to prettify the output string. default value is undefined, no white space is used. Only relevant when using stringify.

allowFunction: When set to false, functions will not be serialized. (default = true)

allowRegExp: When set to false, regular expressions will not be serialized. (default = true)

allowClass: When set to false, class instances will not be serialized. (default = true)

allowDate: When set to false, Date objects will not be serialized. (default = true)

allowUndefined: When set to false, undefined will not be serialized. (default = true)

allowSymbol: When set to false, Symbols will not be serialized. (default = true)

reviver

lazyEval: When set to false, lazy eval will be disabled. (default true)

Note: disabling lazy eval will affect performance. Consider disabling it only if you truly need to.

Requirements

telejson depends on the collection type Map. If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.

Contributing

If you have any suggestions, please open an issue.

All contributions are welcome!

run tests:

yarn test

More Repositories

1

storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
TypeScript
83,871
star
2

design-system

🗃 Storybook Design System
TypeScript
1,910
star
3

react-native

📓 Storybook for React Native!
TypeScript
1,024
star
4

builder-vite

A builder plugin to run and build Storybooks with Vite
TypeScript
890
star
5

addon-designs

A Storybook addon that embeds Figma, websites, or images in the addon panel.
TypeScript
875
star
6

react-inspector

🔍 Power of Browser DevTools inspectors right inside your React app
TypeScript
768
star
7

testing-react

Testing utilities that allow you to reuse your Storybook stories in your React unit tests!
TypeScript
588
star
8

presets

🧩 Presets for Storybook
TypeScript
424
star
9

marksy

📑 A markdown to custom VDOM components library
JavaScript
354
star
10

vue-cli-plugin-storybook

Vue CLI plugin for Storybook
JavaScript
279
star
11

eslint-plugin-storybook

🎗Official ESLint plugin for Storybook
TypeScript
243
star
12

addon-jsx

This Storybook addon show you the JSX / template of the story
TypeScript
236
star
13

test-runner

🚕 Turn stories into executable tests
TypeScript
226
star
14

frontpage

🌐 The website for storybook.js.org
TypeScript
214
star
15

storybook-addon-console

storybook-addon. Redirects console output into action logger panel
TypeScript
200
star
16

native

📱 Storybook for Native: iOS, Android, Flutter
TypeScript
186
star
17

babel-plugin-react-docgen

📝 Babel plugin to add react-docgen info into your code.
JavaScript
162
star
18

addon-kit

Everything you need to build a Storybook addon
TypeScript
137
star
19

vs-code-plugin

Aesop: a VSCode Extension to stage Storybook stories inside your IDE.
TypeScript
131
star
20

addon-svelte-csf

[Incubation] CSF using Svelte components.
TypeScript
99
star
21

brand

🎨 Materials for your articles and talks about storybook
93
star
22

addon-react-native-web

Build react-native-web projects in Storybook for React
TypeScript
76
star
23

desktop

💻 Desktop app for all your Storybooks
JavaScript
72
star
24

testing-library

Instrumented version of Testing Library for Storybook Interactions
TypeScript
56
star
25

require-context.macro

🖇 A Babel macro needed for some advanced Storybook setups. Used to mock webpack's context function in test environments.
JavaScript
48
star
26

solidjs

SolidJS integration for Storybook, maintained by the community
TypeScript
44
star
27

addon-styling

A base addon for configuring popular styling tools
TypeScript
44
star
28

ember-cli-storybook

📒 Ember storybook adapter
JavaScript
37
star
29

sandboxes

MDX
35
star
30

aem

Adobe Experience Manager Storybook app with events, knobs, docs, addons, and more
JavaScript
33
star
31

paths.macro

👣 Babel plugin that returns an object containing paths like __dirname and __filename as static values
JavaScript
32
star
32

shout-out-kit

An image generation API template
JavaScript
30
star
33

linter-config

📐 ESlint config, Prettier config, Remark config for storybook
JavaScript
27
star
34

addon-styling-webpack

Successor to @storybook/addon-styling. Configure the styles of your webpack storybook with ease!
TypeScript
26
star
35

SBNext

A future SB
JavaScript
26
star
36

addon-postcss

This Storybook addon can be used to run the PostCSS preprocessor against your stories.
JavaScript
21
star
37

addon-measure

JavaScript
20
star
38

addon-coverage

TypeScript
19
star
39

jest

Instrumented version of Jest for Storybook Interactions
TypeScript
18
star
40

nextjs-example

Example app showing Storybook integrated with Next.js (v11) pages
JavaScript
18
star
41

testing-vue3

Testing utilities that allow you to reuse your stories in your unit tests
TypeScript
16
star
42

bench

Storybook benchmark
TypeScript
15
star
43

nextjs-server

Embedded Storybook in Next.js
TypeScript
14
star
44

mdx2-csf

MDX to CSF compiler using MDXv2
TypeScript
14
star
45

testing-angular

TypeScript
13
star
46

addon-knobs

Storybook addon prop editor component
TypeScript
12
star
47

storybook-rsc-demo

Project demo to showcase Storybook's new module mocking functionality
TypeScript
12
star
48

testing-vue

TypeScript
10
star
49

addon-google-analytics

Storybook addon for google analytics
JavaScript
10
star
50

jest-storybook

Test storybook stories automagically using Jest. 🧙🏻‍♀️
JavaScript
9
star
51

storybook-nuxt

Storybook integration for Nuxt Framework - Unleashing the power of Storybook in Nuxt/Vue Land!
TypeScript
9
star
52

icons

Library of icons used in apps and marketing sites
TypeScript
9
star
53

expect

Browser-compatible version of Jest's `expect`
JavaScript
8
star
54

create-svelte-with-args

A small CLI wrapper around the create-svelte package that enables you to replace the interactive prompts with CLI arguments.
JavaScript
8
star
55

addon-queryparams

parameter addon for storybook
TypeScript
8
star
56

addon-cssresources

A storybook addon to switch between css resources at runtime for your story
TypeScript
7
star
57

addon-graphql

Storybook addon to display the GraphiQL IDE
TypeScript
7
star
58

action

🚢 WIP, storybook github action - build your storybook from github
JavaScript
7
star
59

addon-events

Add events to your Storybook stories.
TypeScript
6
star
60

addon-design-assets

Design asset preview for storybook
JavaScript
6
star
61

vue3-code-examples

it is a repo to show Vuetify implementation with new @storybook/vue3 reactive mode
TypeScript
6
star
62

addon-react-native-server

A replacement for @storybook/react-native-server which will enable multiple devices to sync over websockets
TypeScript
6
star
63

raycast-extension-sandboxes

A Raycast Extension to quickly create sandboxes online or locally
TypeScript
6
star
64

marko

Storybook framework support for marko
TypeScript
6
star
65

addon-onboarding

TypeScript
6
star
66

storybook-day

Storybook day website
TypeScript
5
star
67

addon-ie11

JavaScript
5
star
68

components-marketing

TypeScript
5
star
69

web

Storybook documentation site
TypeScript
5
star
70

governance

⚖️ Storybook governance and community policies
4
star
71

docs2-prototype

TypeScript
4
star
72

community

🙌 Storybook community resources: monthly meetings, meetups, conferences
4
star
73

mdx1-csf

MDX to CSF compiler using MDXv1
TypeScript
4
star
74

docs-mdx

TypeScript
3
star
75

addon-angular-ivy

TypeScript
3
star
76

babel-plugin-named-exports-order

Babel plugin for preserving exports order across transforms
JavaScript
3
star
77

ember

Storybook for Ember
TypeScript
3
star
78

addon-bench

Storybook benchmarking helper
JavaScript
3
star
79

repro-react-cra

Reproduction template for Create React App
JavaScript
3
star
80

react-native-demo

Storybook for React Native monorepo
2
star
81

repro-templates

WIP
JavaScript
2
star
82

eslint-config-storybook

🔗 wrapper around our @storybook/linter-config package
JavaScript
2
star
83

vitest-plugin

Highly experimental Storybook vitest plugin
TypeScript
2
star
84

.github

Repo community health files
1
star
85

e2e-testing-starter

JavaScript
1
star
86

vue3-autogen-controls

TypeScript
1
star
87

stencil-builder-test

TypeScript
1
star
88

svelte-csf-demo

Demonstrating Svelte CSF (@storybook/addon-svelte-csf) vs regular CSF3
Svelte
1
star
89

auto-config

TypeScript
1
star
90

external-sandboxes

MDX
1
star
91

addon-webpack5-compiler-swc

Adds SWC as a Webpack5 compiler to Storybook
TypeScript
1
star
92

playwright-ct

Playwright component testing against a Storybook instance
TypeScript
1
star
93

create-webpack5-react

JavaScript
1
star
94

addon-webpack5-compiler-babel

Adds babel as a Webpack5 compiler to Storybook
TypeScript
1
star
95

vite-plugin-storybook-nextjs

TypeScript
1
star