feat: Add shouldTreatIterableAsObject to treat iterable as plain object

Author: tanhauhau

.changeset/strong-readers-pay.md

@@ -0,0 +1,5 @@
+---
+'svelte-json-tree': minor
+---
+
+Add `shouldTreatIterableAsObject` to treat iterable as plain object

src/lib/svelte-json-tree/SvelteJsonTree/JSONNode.svelte

@@ -12,10 +12,13 @@
   import JsonSvelteStoreNode from './JSONSvelteStoreNode.svelte';
   import TypedArrayNode from './TypedArrayNode.svelte';
   import RegExpNode from './RegExpNode.svelte';
+  import { useState } from './utils/context';
 
   export let value: unknown;
   const nodeType = writable<string>();
-  $: $nodeType = objType(value);
+  const { shouldTreatIterableAsObject } = useState();
+
+  $: $nodeType = objType(value, shouldTreatIterableAsObject);
   $: [componentType, props] = getComponentAndProps($nodeType, value);
 
   function getComponentAndProps(nodeType: string, value: any) {
@@ -70,7 +73,7 @@
       case 'RegExp':
         return [RegExpNode];
       default:
-        return [JSONValueNode, { nodeType, value: `<${nodeType}>` }];
+        return [JSONObjectNode, { summary: nodeType }];
     }
   }
 </script>

src/lib/svelte-json-tree/SvelteJsonTree/JSONObjectNode.svelte

@@ -4,15 +4,16 @@
   import PreviewList from './PreviewList.svelte';
 
   export let value: Record<string, unknown>;
+  export let summary: string | undefined;
 
   $: keys = Object.getOwnPropertyNames(value);
   $: previewKeys = keys.slice(0, 5);
 </script>
 
 <JSONNested {keys}>
-  <svelte:fragment slot="summary"><span class="label">{'{…}'}</span></svelte:fragment>
+  <svelte:fragment slot="summary"><span class="label">{summary ?? '{…}'}</span></svelte:fragment>
   <svelte:fragment slot="preview" let:root>
-    <PreviewList list={previewKeys} hasMore={previewKeys.length < keys.length} prefix={'{'} postfix={'}'} {root}>
+    <PreviewList list={previewKeys} hasMore={previewKeys.length < keys.length} prefix={summary ? `${summary} {` : '{'} postfix={'}'} {root}>
       <svelte:fragment slot="item" let:item
         ><span class="property">{item}</span><span class="operator">{': '}</span><JSONNode value={value[item]} /></svelte:fragment
       >

src/lib/svelte-json-tree/SvelteJsonTree/Root.svelte

@@ -7,6 +7,7 @@
 
   export let value: unknown;
   export let shouldShowPreview: boolean = true;
+  export let shouldTreatIterableAsObject: boolean = false;
   export let defaultExpandedPaths: string[] = [];
   export let defaultExpandedLevel: number = 0;
 
@@ -21,6 +22,7 @@
     level: 0,
     keyPath: [],
     showPreview: shouldShowPreview,
+    shouldTreatIterableAsObject,
   });
 </script>
 

src/lib/svelte-json-tree/SvelteJsonTree/utils/context.ts

@@ -12,6 +12,7 @@ export type State = {
   keyPath: string[],
   level: number,
   showPreview: boolean;
+  shouldTreatIterableAsObject: boolean;
 };
 
 export function useState(newState?: Partial<State> | ((state: State) => Partial<State>), opts?: { expandable?: boolean }): State {

src/lib/svelte-json-tree/SvelteJsonTree/utils/objType.ts

@@ -1,7 +1,7 @@
-export default function objType(obj: unknown): string {
+export default function objType(obj: unknown, shouldTreatIterableAsObject: boolean): string {
   const type = Object.prototype.toString.call(obj).slice(8, -1);
   if (type === 'Object') {
-    if (typeof obj[Symbol.iterator] === 'function') {
+    if (!shouldTreatIterableAsObject && typeof obj[Symbol.iterator] === 'function') {
       return 'Iterable';
     }
     return obj.constructor.name;