feat: support json5 (#11)

Author: yeonjuan

.travis.yml

@@ -1,8 +1,8 @@
 language: node_js
 node_js:
- - 12
+  - 12
 branches:
- only:
-   - master
+  only:
+    - master
 script:
-   - npm run test:all
+  - npm run test:all

package-lock.json

@@ -42,6 +42,7 @@
     "core-js": "^3.6.5",
     "eslint": "^7.10.0",
     "esquery": "^1.3.1",
+    "json5": "^2.1.3",
     "query-string": "^6.13.5",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
@@ -56,6 +57,7 @@
     "@types/codemirror": "0.0.98",
     "@types/eslint": "^7.2.4",
     "@types/jest": "^26.0.14",
+    "@types/json5": "0.0.30",
     "@types/react": "^16.9.51",
     "@types/react-bootstrap": "^0.32.24",
     "@types/react-dom": "^16.9.8",

package.json

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, ChangeEvent } from "react";
 import { Container, Row, Col, Tabs, Tab, Spinner } from "react-bootstrap";
+import JSON5 from "json5";
 import { CodeEditor } from "@/components/CodeEditor";
 import { RuleConfig } from "@/components/RuleConfig";
 import { LintMessages } from "@/components/LintMessages";
@@ -52,7 +53,7 @@ export const App: FC = () => {
 
   const handleRuleEditing = (ruleStr: string) => {
     try {
-      const rules = JSON.parse(ruleStr);
+      const rules = JSON5.parse(ruleStr);
       setRules(rules);
       setRuleConfigError(null);
     } catch (error) {
@@ -109,7 +110,7 @@ export const App: FC = () => {
         <Row>
           <Col className="bottom-col">
             <Tabs>
-              <Tab eventKey="rules" title="Rules">
+              <Tab eventKey="rules" title="Rules (json5)">
                 <RuleConfig
                   initial={rules}
                   ruleConfig={rules}

src/App.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import CodeMirror from "codemirror";
 import { EDITING_TIMEOUT } from "@/constants";
 import { debounce } from "@/shared/debounce";
+import JSON5 from "json5";
 import type { FC } from "react";
 import type { Linter } from "eslint";
 import "codemirror/lib/codemirror.css";
@@ -25,7 +26,7 @@ const CODE_MIRROR_OPTIONS = {
 
 export const RuleConfig: FC<Props> = (props) => {
   const [text, setText] = useState<string>(
-    JSON.stringify(props.initial, null, 2)
+    JSON5.stringify(props.initial, null, 2)
   );
   const ref = useRef<HTMLTextAreaElement>(null);
 

src/components/RuleConfig.tsx

@@ -1,3 +1,4 @@
+import JSON5 from "json5";
 import type { Linter } from "eslint";
 import type { ParserOptions } from "@typescript-eslint/parser";
 
@@ -13,12 +14,12 @@ export const queryParamsState = {
       const decoded = decodeURIComponent(
         escape(atob(location.hash.replace("#", "")))
       );
-      return JSON.parse(decoded);
+      return JSON5.parse(decoded);
     } catch {}
     return {};
   },
   set(state: QueryParamsState): void {
-    const encoded = btoa(unescape(encodeURIComponent(JSON.stringify(state))));
+    const encoded = btoa(unescape(encodeURIComponent(JSON5.stringify(state))));
     location.hash = encoded;
   },
 };