feat(json-prettify): sort keys

src/tools/json-viewer/json.models.ts

@@ -0,0 +1,35 @@
+import { get, type MaybeRef } from '@vueuse/core';
+import JSON5 from 'json5';
+
+export { sortObjectKeys, formatJson };
+
+function sortObjectKeys<T>(obj: T): T {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map(sortObjectKeys) as T;
+  }
+
+  return Object.keys(obj)
+    .sort()
+    .reduce((sortedObj, key) => {
+      sortedObj[key] = sortObjectKeys((obj as Record<string, unknown>)[key]);
+      return sortedObj;
+    }, {} as Record<string, unknown>) as T;
+}
+
+function formatJson({
+  rawJson,
+  sortKeys = true,
+  indentSize = 3,
+}: {
+  rawJson: MaybeRef<string>;
+  sortKeys?: MaybeRef<boolean>;
+  indentSize?: MaybeRef<number>;
+}) {
+  const parsedObject = JSON5.parse(get(rawJson));
+
+  return JSON.stringify(get(sortKeys) ? sortObjectKeys(parsedObject) : parsedObject, null, get(indentSize));
+}