https://github.com/nissy-dev/babel-plugin-object-to-json-parse

This plugin converts object literal to JSON.parse
https://github.com/nissy-dev/babel-plugin-object-to-json-parse

babel-plugin json-parse

Last synced: 3 months ago
JSON representation

This plugin converts object literal to JSON.parse

• Host: GitHub
• URL: https://github.com/nissy-dev/babel-plugin-object-to-json-parse
• Owner: nissy-dev
• License: mit
• Archived: true
• Created: 2019-06-30T03:44:25.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-01-01T08:03:39.000Z (almost 2 years ago)
• Last Synced: 2024-07-29T00:55:58.654Z (3 months ago)
• Topics: babel-plugin, json-parse
• Language: JavaScript
• Homepage:
• Size: 896 KB
• Stars: 159
• Watchers: 3
• Forks: 12
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-babel - object-to-json-parse - Converts from object literal to `JSON.parse`. (Plugins / Optimization)

README

        
# babel-plugin-object-to-json-parse 🚀

![release](https://github.com/nissy-dev/babel-plugin-remove-react-fc-and-vfc/actions/workflows/release.yml/badge.svg)

[![License: MIT](https://img.shields.io/github/license/nd-02110114/babel-plugin-object-to-json-parse.svg)](https://opensource.org/licenses/MIT)

[![npm version](https://badge.fury.io/js/babel-plugin-object-to-json-parse.svg)](https://badge.fury.io/js/babel-plugin-object-to-json-parse)

This repository is inspired by [this article](https://v8.dev/blog/cost-of-javascript-2019#json)

> As long as the JSON string is only evaluated once, the JSON.parse approach is much faster compared to the JavaScript object literal, especially for cold loads.

## Object to JSON.parse

This plugin converts from object literal to JSON.parse

```js

// before

const data = { foo: 42, bar: 1337 };

// after

const data = JSON.parse('{"foo":42,"bar":1337}');

```

## How to use

### Install

```sh

$ npm install babel-plugin-object-to-json-parse -D

or

$ yarn add babel-plugin-object-to-json-parse -D

```

### setup `.babelrc`

```json

{

  "plugins": ["object-to-json-parse"]

}

```

### Options 

#### `minJSONStringSize` (`number`, defaults to `1024`)

The `minJSONStringSize` option will prevent the plugin from replacing an expression if the length of the JSON string given to `JSON.parse` is smaller than `minJSONStringSize`. For example, the following ensures all replacements have a string size of at least 1kb.

```json

{

  "plugins": [

    ["object-to-json-parse", {

      "minJSONStringSize": 1024

    }]

  ]

}

```

## Caution!!

### this plugin may not be production ready

I just made this plugin for my understanding about AST and babel plugin.

### this plugin doesn't support partially JSON expression

I decided not to support partially JSON expression like below.

> Partially JSON expressions such as [notValid, {isValid:true}] ensuring {isValid:true} is transformed.

```

const data = { bar: invalid_object, foo: 'foo' }

↓

const data = { bar: invalid_object, JSON.parse('{"foo": "foo"}')}

```

This is because I think most large objects are not partially JSON expressions. **JSON.parse() is much faster in the case that object is 10 kB or larger. Converting small object to JSON.parse expression is not meaningful.**

### this plugin produces output that only works in modern environments (e.g. Node.js v10+)

I don't care about some backwards compatibilities like [this issue](https://github.com/nd-02110114/babel-plugin-object-to-json-parse/issues/12).

## Development

Any contributions are welcomed from everyone!!

### Setup

```sh

$ git clone [email protected]:nissy-dev/babel-plugin-object-to-json-parse.git

$ cd babel-plugin-object-to-json-parse

$ yarn install

```

### Tips

```sh

// build

$ yarn build

// test

$ yarn test

```