feat: add support for allowTrailingCommas option in JSON (#96)

Author: lumirlumir

package-lock.json

@@ -41,7 +41,7 @@
     "@codemirror/language": "^6.10.3",
     "@eslint/css": "^0.2.0",
     "@eslint/js": "^9.9.0",
-    "@eslint/json": "^0.4.1",
+    "@eslint/json": "^0.12.0",
     "@eslint/markdown": "^6.4.0",
     "@lezer/highlight": "^1.2.1",
     "@radix-ui/react-accordion": "^1.2.0",

package.json

@@ -33,19 +33,39 @@ import type {
 const JSONPanel: React.FC = () => {
 	const explorer = useExplorer();
 	const { jsonOptions, setJsonOptions } = explorer;
-	const { jsonMode } = jsonOptions;
+	const { jsonMode, allowTrailingCommas } = jsonOptions;
 	return (
-		<LabeledSelect
-			id="jsonMode"
-			label="Mode"
-			value={jsonMode}
-			onValueChange={(value: string) => {
-				const jsonMode = value as JsonMode;
-				setJsonOptions({ ...jsonOptions, jsonMode });
-			}}
-			items={jsonModes}
-			placeholder="Mode"
-		/>
+		<>
+			<LabeledSelect
+				id="jsonMode"
+				label="Mode"
+				value={jsonMode}
+				onValueChange={(value: string) => {
+					const jsonMode = value as JsonMode;
+					setJsonOptions({ ...jsonOptions, jsonMode });
+				}}
+				items={jsonModes}
+				placeholder="Mode"
+			/>
+
+			{jsonMode === "jsonc" && (
+				<div className="flex items-center gap-1.5">
+					<Switch
+						id="allowTrailingCommas"
+						checked={allowTrailingCommas}
+						onCheckedChange={(value: boolean) => {
+							setJsonOptions({
+								...jsonOptions,
+								allowTrailingCommas: value,
+							});
+						}}
+					/>
+					<Label htmlFor="allowTrailingCommas">
+						Allow Trailing Commas
+					</Label>
+				</div>
+			)}
+		</>
 	);
 };
 

src/components/options.tsx

@@ -41,14 +41,21 @@ export function useAST() {
 		}
 
 		case "json": {
-			const { jsonMode } = jsonOptions;
+			const { jsonMode, allowTrailingCommas } = jsonOptions;
 			const language = json.languages[jsonMode];
-			astParseResult = language.parse({
-				body: code.json,
-				path: "",
-				physicalPath: "",
-				bom: false,
-			});
+			astParseResult = language.parse(
+				{
+					body: code.json,
+					path: "",
+					physicalPath: "",
+					bom: false,
+				},
+				{
+					languageOptions: {
+						allowTrailingCommas,
+					},
+				},
+			);
 			break;
 		}
 

src/hooks/use-ast.ts

@@ -38,6 +38,7 @@ export type JsOptions = {
 
 export type JsonOptions = {
 	jsonMode: JsonMode;
+	allowTrailingCommas: boolean;
 };
 
 export type MarkdownOptions = {

src/hooks/use-explorer.ts

@@ -392,6 +392,7 @@ export const defaultJsOptions: JsOptions = {
 
 export const defaultJsonOptions: JsonOptions = {
 	jsonMode: "jsonc",
+	allowTrailingCommas: false,
 };
 
 export const defaultMarkdownOptions: MarkdownOptions = {