• Stars
    star
    158
  • Rank 229,305 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 9 months 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 a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
TypeScript
82,383
star
2

design-system

🗃 Storybook Design System
TypeScript
1,862
star
3

react-native

📓 Storybook for React Native!
TypeScript
942
star
4

builder-vite

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

addon-designs

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

react-inspector

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

testing-react

Testing utilities that allow you to reuse your Storybook stories in your React unit tests!
TypeScript
589
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
280
star
11

addon-jsx

This Storybook addon show you the JSX / template of the story
TypeScript
237
star
12

eslint-plugin-storybook

🎗Official ESLint plugin for Storybook
TypeScript
228
star
13

frontpage

🌐 The website for storybook.js.org
TypeScript
209
star
14

test-runner

🚕 Turn stories into executable tests
TypeScript
202
star
15

storybook-addon-console

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

native

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

babel-plugin-react-docgen

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

vs-code-plugin

Aesop: a VSCode Extension to stage Storybook stories inside your IDE.
TypeScript
130
star
19

addon-kit

Everything you need to build a Storybook addon
TypeScript
122
star
20

brand

🎨 Materials for your articles and talks about storybook
89
star
21

addon-svelte-csf

[Incubation] CSF using Svelte components.
TypeScript
86
star
22

desktop

💻 Desktop app for all your Storybooks
JavaScript
71
star
23

addon-react-native-web

Build react-native-web projects in Storybook for React
TypeScript
71
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

addon-styling

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

ember-cli-storybook

📒 Ember storybook adapter
JavaScript
36
star
28

solidjs

SolidJS integration for Storybook, maintained by the community
TypeScript
35
star
29

aem

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

paths.macro

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

shout-out-kit

An image generation API template
JavaScript
30
star
32

linter-config

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

SBNext

A future SB
JavaScript
26
star
34

sandboxes

MDX
25
star
35

addon-measure

JavaScript
20
star
36

addon-postcss

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

addon-styling-webpack

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

jest

Instrumented version of Jest for Storybook Interactions
TypeScript
18
star
39

addon-coverage

TypeScript
18
star
40

nextjs-example

Example app showing Storybook integrated with Next.js (v11) pages
JavaScript
17
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

testing-angular

TypeScript
13
star
44

mdx2-csf

MDX to CSF compiler using MDXv2
TypeScript
13
star
45

addon-knobs

Storybook addon prop editor component
TypeScript
10
star
46

testing-vue

TypeScript
10
star
47

jest-storybook

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

addon-google-analytics

Storybook addon for google analytics
JavaScript
9
star
49

expect

Browser-compatible version of Jest's `expect`
JavaScript
7
star
50

storybook-nuxt

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

raycast-extension-sandboxes

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

icons

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

vue3-code-examples

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

marko

Storybook framework support for marko
TypeScript
6
star
55

addon-graphql

Storybook addon to display the GraphiQL IDE
TypeScript
6
star
56

addon-onboarding

TypeScript
6
star
57

action

🚢 WIP, storybook github action - build your storybook from github
JavaScript
6
star
58

addon-queryparams

parameter addon for storybook
TypeScript
6
star
59

storybook-day

Storybook day website
TypeScript
5
star
60

addon-ie11

JavaScript
5
star
61

addon-design-assets

Design asset preview for storybook
JavaScript
5
star
62

addon-cssresources

A storybook addon to switch between css resources at runtime for your story
TypeScript
5
star
63

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
5
star
64

addon-events

Add events to your Storybook stories.
TypeScript
4
star
65

governance

⚖️ Storybook governance and community policies
4
star
66

community

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

mdx1-csf

MDX to CSF compiler using MDXv1
TypeScript
4
star
68

addon-react-native-server

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

docs-mdx

TypeScript
3
star
70

addon-angular-ivy

TypeScript
3
star
71

babel-plugin-named-exports-order

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

nextjs-server

Embedded Storybook in Next.js
TypeScript
3
star
73

addon-bench

Storybook benchmarking helper
JavaScript
3
star
74

repro-react-cra

Reproduction template for Create React App
JavaScript
3
star
75

react-native-demo

Storybook for React Native monorepo
2
star
76

ember

Storybook for Ember
TypeScript
2
star
77

docs2-prototype

TypeScript
2
star
78

components-marketing

TypeScript
2
star
79

repro-templates

WIP
JavaScript
2
star
80

eslint-config-storybook

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

.github

Repo community health files
1
star
82

regression-test-other

1
star
83

e2e-testing-starter

JavaScript
1
star
84

vue3-autogen-controls

TypeScript
1
star
85

stencil-builder-test

TypeScript
1
star
86

auto-config

TypeScript
1
star
87

external-sandboxes

MDX
1
star
88

create-webpack5-react

JavaScript
1
star
89

playwright-ct

Playwright component testing against a Storybook instance
TypeScript
1
star
90

regression-test-preact

1
star
91

addon-webpack5-compiler-babel

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

web

TypeScript
1
star