docs(website): use json5 library to parse config in playground (typescript-eslint#4341)

armano2 · web-flow · commit ba0b1e3c52b4 · 2021-12-23T10:02:51.000-08:00
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -29,6 +29,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remark-docusaurus-tabs": "^0.2.0",
+    "json5": "^2.2.0",
     "typescript": "*"
   },
   "devDependencies": {
diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import clsx from 'clsx';
+import { parse } from 'json5';
 
 import styles from './ConfigEditor.module.css';
 
@@ -79,7 +80,7 @@ function reducerObject(
     }
     case 'json': {
       try {
-        const parsed: unknown = JSON.parse(action.code);
+        const parsed: unknown = parse(action.code);
         if (isRecord(parsed)) {
           const item = parsed[action.field];
           if (item && isRecord(item)) {
@@ -93,8 +94,6 @@ function reducerObject(
       return state;
     }
   }
-  // @ts-expect-error: Safeguard
-  throw new Error();
 }
 
 function filterConfig(
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`import React, { useCallback, useEffect, useReducer, useState } from 'react';`
`2`	`2`	`import clsx from 'clsx';`
	`3`	`+import { parse } from 'json5';`
`3`	`4`
`4`	`5`	`import styles from './ConfigEditor.module.css';`
`5`	`6`
`@@ -79,7 +80,7 @@ function reducerObject(`
`79`	`80`	`}`
`80`	`81`	`case 'json': {`
`81`	`82`	`try {`
`82`		`- const parsed: unknown = JSON.parse(action.code);`
	`83`	`+ const parsed: unknown = parse(action.code);`
`83`	`84`	`if (isRecord(parsed)) {`
`84`	`85`	`const item = parsed[action.field];`
`85`	`86`	`if (item && isRecord(item)) {`
`@@ -93,8 +94,6 @@ function reducerObject(`
`93`	`94`	`return state;`
`94`	`95`	`}`
`95`	`96`	`}`
`96`		`- // @ts-expect-error: Safeguard`
`97`		`- throw new Error();`
`98`	`97`	`}`
`99`	`98`
`100`	`99`	`function filterConfig(`