perf!: reduce the bundle size of /converters/json-yaml

BREAKING CHANGE: empty keys in yaml are no longer supported

app/converters/json-yaml/page.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo, useState } from "react";
 import * as O from "fp-ts/lib/Option";
-import YAML from "yaml";
+import yaml from "js-yaml";
 
 import { toolGroups } from "@/config/tools";
 import { safeJsonParse } from "@/lib/json";
@@ -47,12 +47,12 @@ export default function Page() {
       json: text,
       yaml: O.isNone(parsed)
         ? ""
-        : YAML.stringify(parsed.value, { indent: prev.indentation.length, simpleKeys: true }),
+        : yaml.dump(parsed.value, { indent: prev.indentation.length, quotingType: '"' }),
     }));
   }, []);
 
   const setYamlReactively = useCallback((text: string) => {
-    const parsed = safeYamlParse(text, (_, v) => v, { merge: true });
+    const parsed = safeYamlParse(text);
 
     setForm(prev => ({
       ...prev,
@@ -72,7 +72,7 @@ export default function Page() {
       ? { json: "", yaml: "" }
       : {
           json: JSON.stringify(parsed.value, null, value),
-          yaml: YAML.stringify(parsed.value, { indent: value.length, simpleKeys: true }),
+          yaml: yaml.dump(parsed.value, { indent: value.length, quotingType: '"' }),
         };
 
     setForm({

lib/yaml.ts

@@ -1,4 +1,4 @@
 import { tryCatchK } from "fp-ts/lib/Option";
-import YAML from "yaml";
+import yaml from "js-yaml";
 
-export const safeYamlParse = tryCatchK(YAML.parse);
+export const safeYamlParse = tryCatchK(yaml.load);

package.json

@@ -38,6 +38,7 @@
     "html-entities": "^2.3.3",
     "io-ts": "^2.2.20",
     "js-base64": "^3.7.5",
+    "js-yaml": "^4.1.0",
     "jwt-decode": "^3.1.2",
     "lucide-react": "^0.221.0",
     "next": "13.4.4",
@@ -48,13 +49,13 @@
     "sharp": "^0.32.1",
     "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5",
-    "uuid": "^9.0.0",
-    "yaml": "^2.3.1"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.0.1",
     "@next/bundle-analyzer": "13.4.4",
     "@types/create-hash": "^1.2.2",
+    "@types/js-yaml": "^4.0.5",
     "@types/node": "~18.16.16",
     "@types/react": "~18.2.7",
     "@types/react-dom": "~18.2.4",

pnpm-lock.yaml

@@ -52,6 +52,9 @@ dependencies:
   js-base64:
     specifier: ^3.7.5
     version: 3.7.5
+  js-yaml:
+    specifier: ^4.1.0
+    version: 4.1.0
   jwt-decode:
     specifier: ^3.1.2
     version: 3.1.2
@@ -85,9 +88,6 @@ dependencies:
   uuid:
     specifier: ^9.0.0
     version: 9.0.0
-  yaml:
-    specifier: ^2.3.1
-    version: 2.3.1
 
 devDependencies:
   '@ianvs/prettier-plugin-sort-imports':
@@ -99,6 +99,9 @@ devDependencies:
   '@types/create-hash':
     specifier: ^1.2.2
     version: 1.2.2
+  '@types/js-yaml':
+    specifier: ^4.0.5
+    version: 4.0.5
   '@types/node':
     specifier: ~18.16.16
     version: 18.16.16
@@ -1443,6 +1446,10 @@ packages:
       '@types/node': 18.16.16
     dev: true
 
+  /@types/js-yaml@4.0.5:
+    resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
+    dev: true
+
   /@types/json-schema@7.0.12:
     resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
     dev: true
@@ -1672,7 +1679,6 @@ packages:
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: true
 
   /aria-hidden@1.2.3:
     resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==}
@@ -3270,7 +3276,6 @@ packages:
     hasBin: true
     dependencies:
       argparse: 2.0.1
-    dev: true
 
   /jsesc@2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}