add BigInt support

Author: shikaku

dev-server/src/index.js

@@ -181,6 +181,7 @@ function getExampleJson1() {
     return {
         string: 'this is a test string',
         integer: 42,
+        bigint: BigInt('123456789012345678901234567890'),
         empty_array: [],
         empty_object: {},
         array: [1, 2, 3, 'test'],

package-lock.json

@@ -5,6 +5,7 @@
     "main": "dist/main.js",
     "dependencies": {
         "flux": "^4.0.1",
+        "json-bigint": "^1.0.0",
         "react-base16-styling": "^0.6.0",
         "react-lifecycles-compat": "^3.0.4",
         "react-textarea-autosize": "^8.3.2"

package.json

@@ -1,4 +1,5 @@
 import React from 'react';
+import JSONBig from 'json-bigint';
 
 import { toType } from './../helpers/util';
 
@@ -29,7 +30,7 @@ export default class extends React.PureComponent {
         const container = document.createElement('textarea');
         const { clickCallback, src, namespace } = this.props;
 
-        container.innerHTML = JSON.stringify(
+        container.innerHTML = JSONBig.stringify(
             this.clipboardValue(src),
             null,
             '  '

src/js/components/CopyToClipboard.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import DataTypeLabel from './DataTypeLabel';
+
+//theme
+import Theme from './../../themes/getStyle';
+
+export default class extends React.PureComponent {
+    render() {
+        const type_name = 'bigint';
+        const { props } = this;
+        return (
+            <div {...Theme(props.theme, 'integer')}>
+                <DataTypeLabel type_name={type_name} {...props} />
+                {this.props.value.toString()}
+            </div>
+        );
+    }
+}

src/js/components/DataTypes/BigInt.js

@@ -5,6 +5,7 @@ export { default as JsonFunction } from './Function';
 export { default as JsonNan } from './Nan';
 export { default as JsonNull } from './Null';
 export { default as JsonInteger } from './Integer';
+export { default as JsonBigInt } from './BigInt';
 export { default as JsonObject } from './Object';
 export { default as JsonRegexp } from './Regexp';
 export { default as JsonString } from './String';

src/js/components/DataTypes/DataTypes.js

@@ -14,6 +14,7 @@ import {
     JsonFloat,
     JsonFunction,
     JsonInteger,
+    JsonBigInt,
     JsonNan,
     JsonNull,
     JsonRegexp,
@@ -226,6 +227,8 @@ class VariableEditor extends React.PureComponent {
                 return <JsonString value={variable.value} {...props} />;
             case 'integer':
                 return <JsonInteger value={variable.value} {...props} />;
+            case 'bigint':
+                return <JsonBigInt value={variable.value} {...props} />;
             case 'float':
                 return <JsonFloat value={variable.value} {...props} />;
             case 'boolean':
@@ -436,6 +439,8 @@ class VariableEditor extends React.PureComponent {
                     return <JsonString value={value} {...props} />;
                 case 'integer':
                     return <JsonInteger value={value} {...props} />;
+                case 'bigint':
+                    return <JsonBigInt value={value} {...props} />;
                 case 'float':
                     return <JsonFloat value={value} {...props} />;
                 case 'boolean':

src/js/components/VariableEditor.js

@@ -1,17 +1,19 @@
+import JSONBig from 'json-bigint';
+
 export default function parseInput(input) {
     //following code is to make a best guess at
     //the type for a variable being submitted.
 
     //we are working with a serialized data representation
     input = input.trim();
     try {
-        input = JSON.stringify(JSON.parse(input));
+        input = JSONBig.stringify(JSONBig.parse(input));
         if (input[0] === '[') {
             //array
-            return formatResponse('array', JSON.parse(input));
+            return formatResponse('array', JSONBig({ useNativeBigInt: true }).parse(input));
         } else if (input[0] === '{') {
             //object
-            return formatResponse('object', JSON.parse(input));
+            return formatResponse('object', JSONBig({ useNativeBigInt: true }).parse(input));
         } else if (
             input.match(/\-?\d+\.\d+/) &&
             input.match(/\-?\d+\.\d+/)[0] === input
@@ -28,6 +30,10 @@ export default function parseInput(input) {
             input.match(/\-?\d+/) &&
             input.match(/\-?\d+/)[0] === input
         ) {
+            //bigint
+            if (Number(input) > Number.MAX_SAFE_INTEGER) {
+                return formatResponse('bigint', BigInt(input));
+            }
             //integer
             return formatResponse('integer', parseInt(input));
         } else if (

src/js/helpers/parseInput.js

@@ -1,4 +1,5 @@
 import { toType } from './util';
+import JSONBig from 'json-bigint';
 
 export default value => {
     const type = toType(value);
@@ -25,7 +26,7 @@ export default value => {
             break;
         default: {
             try {
-                string_value = JSON.stringify(value, null, '  ');
+                string_value = JSONBig.stringify(value, null, '  ');
             } catch (e) {
                 string_value = '';
             }