Merge pull request #23 from nd-02110114/add-option-json-string-size

add minJSONStringSize option

Author: nissy-dev

README.md

@@ -9,6 +9,8 @@ This repository is inspired by [this article](https://v8.dev/blog/cost-of-javasc
 
 > 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.
 
+**Caution!!** : I made this plugin for my understanding about AST and babel plugin, so this plugin is not production ready.
+
 ## Object to JSON.parse
 
 This plugin converts from object literal to JSON.parse ([example](https://github.com/nd-02110114/babel-plugin-object-to-json-parse/tree/master/example))
@@ -33,12 +35,28 @@ $ yarn babel-plugin-object-to-json-parse -D
 
 ### setup `.babelrc`
 
-```
+```json
 {
   "plugins": ["object-to-json-parse"]
 }
 ```
 
+
+### Options 
+#### `minJSONStringSize` (`number`, dafaults 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
+    }]
+  ]
+}
+```
+
 ## Development
 
 ### Setup
@@ -51,7 +69,7 @@ $ yarn install
 
 ### Tips
 
-```
+```sh
 // example
 $ yarn build && yarn example
 

example/.babelrc

@@ -2,6 +2,9 @@
   "plugins": [
     [
       "../dist/index.js",
+      {
+        "minJSONStringSize": 0
+      }
     ]
   ]
 }

src/visitors/object_expression.ts

@@ -2,13 +2,32 @@ import { ObjectExpression } from '@babel/types'
 import { NodePath } from '@babel/traverse'
 import { converter } from '../utils'
 
+interface PluginState {
+  opts: {
+    minJSONStringSize: number
+  }
+}
+
+const DEFAULT_THRESHOLD = 1024
+
 /* eslint-disable no-redeclare */
-export function ObjectExpression(path: NodePath<ObjectExpression>) {
+export function ObjectExpression(
+  path: NodePath<ObjectExpression>,
+  state: PluginState
+) {
   try {
     const obj = converter(path.node)
     const json = JSON.stringify(obj)
     // escaping for single quotes
     const escapedJson = json.replace(/'/g, "\\'")
+    // it simply isn't worth it to convert into the AST objects that are too small.
+    // so, this plugin only convert large objects by default.
+    const { minJSONStringSize } = state.opts
+    const threshold =
+      minJSONStringSize !== undefined ? minJSONStringSize : DEFAULT_THRESHOLD
+    if (escapedJson.length < threshold) {
+      return
+    }
     path.replaceWithSourceString(`JSON.parse('${escapedJson}')`)
   } catch (e) {
     // disable error message

test/visitors/object_expression.test.ts

@@ -6,18 +6,57 @@ pluginTester({
   plugin: buildPlugin([ObjectExpression]),
   tests: [{
       title: 'empty object',
+      pluginOptions: {
+        minJSONStringSize: 0
+      },
       code: `const a = {};`,
       output: `const a = JSON.parse('{}');`
+  }, {
+    title: 'respects minJSONStringSize (default : 1024)',
+    code: `const a = { b: 1, c: 2 };`,
+    output: `
+      const a = {
+        b: 1,
+        c: 2
+      };
+    `
+  }, {
+    title: 'respects minJSONStringSize',
+    pluginOptions: {
+      minJSONStringSize: 15
+    },
+    code: `const a = { b: 1, c: 2 };`,
+    output:  `
+      const a = {
+        b: 1,
+        c: 2
+      };
+    `
+  },  {
+    title: 'respects minJSONStringSize',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
+    code: `const a = { b: 1, c: 2 };`,
+    output: `
+      const a = JSON.parse('{"b":1,"c":2}');
+    `
   }, {
     title: 'does not convert objects which include the spread syntax',
     code: `const a = { ...a, b: 1 };`,
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     output: `
       const a = { ...a,
         b: 1
       };
     `
   }, {
     title: 'does not convert objects which include the object method',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `
       const a = {
         method(arg) {
@@ -37,6 +76,9 @@ pluginTester({
     `
   }, {
     title: 'does not convert objects which include the invalid value',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: () => console.log("b") };`,
     output: `
       const a = {
@@ -45,6 +87,9 @@ pluginTester({
     `
   }, {
     title: 'does not convert objects which have computed property names',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b : "b_val", ["c"]: "c_val" };`,
     output: `
       const a = {
@@ -54,6 +99,9 @@ pluginTester({
     `
   }, {
     title: 'does not convert objects which have double quotes in string',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: 'ab\"c' };`,
     output: `
       const a = {
@@ -62,6 +110,9 @@ pluginTester({
     `
   }, {
     title: 'does not convert objects which have double quotes in string',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: 'ab"c' };`,
     output: `
       const a = {
@@ -70,6 +121,9 @@ pluginTester({
     `
   }, {
     title: 'does not convert objects which have invalid numeric key',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a ={ 77777777777777777.1: "foo" };`,
     output: `
       const a = {
@@ -78,42 +132,72 @@ pluginTester({
     `
   }, {
     title: 'string',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: "b_val" };`,
     output: `const a = JSON.parse('{"b":"b_val"}');`
   }, {
     title: 'string (include single quote)',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: "'abc'" };`,
     output: `const a = JSON.parse('{"b":"\\'abc\\'"}');`
   }, {
     title: 'string (include single quote)',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: "ab\'c" };`,
     output: `const a = JSON.parse('{"b":"ab\\'c"}');`
   }, {
     title: 'number',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: 1 };`,
     output: `const a = JSON.parse('{"b":1}');`
   }, {
     title: 'null',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: null };`,
     output: `const a = JSON.parse('{"b":null}');`
   }, {
     title: 'boolean',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: false };`,
     output: `const a = JSON.parse('{"b":false}');`
   }, {
     title: 'Array',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: [1, 'b_val', null] };`,
     output: `const a = JSON.parse('{"b":[1,"b_val",null]}');`
   }, {
     title: 'Nested Array',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: [1, ['b_val', { a: 1 }], null] };`,
     output: `const a = JSON.parse('{"b":[1,["b_val",{"a":1}],null]}');`
   }, {
     title: 'Object',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { b: { c: 1 } };`,
     output: `const a = JSON.parse('{"b":{"c":1}}');`
   }, {
     title: 'Object (having numeric keys)',
+    pluginOptions: {
+      minJSONStringSize: 0
+    },
     code: `const a = { 1: "123", 23: 45, b: "b_val" };`,
     output: `const a = JSON.parse('{"1":"123","23":45,"b":"b_val"}');`
   },]

typings/babel-plugin-tester/index.d.ts

@@ -8,6 +8,9 @@ declare namespace pluginTester {
 
   export interface Test {
       title?: string;
+      pluginOptions?: {
+        minJSONStringSize: number
+      };
       code?: string;
       output?: string;
       snapshot?: boolean;