copied svelte-json-tree instead of using NPM package

2026-04-17 23:45:59 +00:00 · 2021-04-05 08:58:35 +02:00
parent 573e404612
commit e3fe5a2beb
18 changed files with 525 additions and 15 deletions
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -13,6 +13,7 @@
  ],
  "devDependencies": {
    "@ant-design/colors": "^5.0.0",
+    "@mdi/font": "^5.9.55",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@rollup/plugin-replace": "^2.4.1",
@@ -25,10 +26,12 @@
    "dbgate-sqltree": "^4.0.0",
    "dbgate-tools": "^4.0.0",
    "dbgate-types": "^4.0.0",
+    "file-selector": "^0.2.4",
    "json-stable-stringify": "^1.0.1",
    "localforage": "^1.9.0",
    "lodash": "^4.17.15",
    "randomcolor": "^0.6.2",
+    "resize-observer-polyfill": "^1.5.1",
    "rollup": "^2.3.4",
    "rollup-plugin-copy": "^3.3.0",
    "rollup-plugin-css-only": "^3.1.0",
@@ -40,15 +43,11 @@
    "sql-formatter": "^2.3.3",
    "svelte": "^3.35.0",
    "svelte-check": "^1.0.0",
+    "svelte-markdown": "^0.1.4",
    "svelte-preprocess": "^4.0.0",
+    "svelte-select": "^3.17.0",
    "tslib": "^2.0.0",
    "typescript": "^3.9.3",
-    "uuid": "^3.4.0",
-    "@mdi/font": "^5.9.55",
-    "file-selector": "^0.2.4",
-    "resize-observer-polyfill": "^1.5.1",
-    "svelte-json-tree": "^0.1.0",
-    "svelte-markdown": "^0.1.4",
-    "svelte-select": "^3.17.0"
+    "uuid": "^3.4.0"
  }
-}
+}
--- a/packages/web/src/celldata/JsonCellView.svelte
+++ b/packages/web/src/celldata/JsonCellView.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import _ from 'lodash';
-  import JSONTree from 'svelte-json-tree';
  import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import JsonTree from '../json-tree/JSONTree.svelte';

  export let selection;
  export let showWholeRow = false;
@@ -31,7 +31,7 @@
 {:else}
  <div class="outer">
    <div class="inner">
-      <JSONTree value={json} />
+      <JsonTree value={json} />
    </div>
  </div>
 {/if}
--- a/packages/web/src/json-tree/ErrorNode.svelte
+++ b/packages/web/src/json-tree/ErrorNode.svelte
@@ -0,0 +1,60 @@
+<script>
+  import { getContext, setContext } from 'svelte';
+  import contextKey from './context';
+  import JSONArrow from './JSONArrow.svelte';
+  import JSONNode from './JSONNode.svelte';
+  import JSONKey from './JSONKey.svelte';
+
+  export let key, value, isParentExpanded, isParentArray;
+  export let expanded = false;
+
+  $: stack = value.stack.split('\n');
+
+  const context = getContext(contextKey);
+  setContext(contextKey, { ...context, colon: ':' })
+
+  $: if (!isParentExpanded) {
+    expanded = false;
+  }
+
+  function toggleExpand() {
+    expanded = !expanded;
+  }
+</script>
+<style>
+  li {
+    user-select: text;
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+  .indent {
+    padding-left: var(--li-identation);
+  }
+  .collapse {
+    --li-display: inline;
+    display: inline;
+    font-style: italic;
+  }
+</style>
+<li class:indent={isParentExpanded}>
+  {#if isParentExpanded}
+    <JSONArrow on:click={toggleExpand} {expanded} />
+  {/if}
+  <JSONKey {key} colon={context.colon} {isParentExpanded} {isParentArray} />
+  <span on:click={toggleExpand}>Error: {expanded?'':value.message}</span>
+  {#if isParentExpanded}
+    <ul class:collapse={!expanded}>
+      {#if expanded}
+        <JSONNode key="message" value={value.message} />
+        <li>
+          <JSONKey key="stack" colon=":" {isParentExpanded} />
+          <span>
+            {#each stack as line, index}
+              <span class:indent={index > 0}>{line}</span><br />
+            {/each}
+          </span>
+        </li>
+      {/if}
+    </ul>
+  {/if}
+</li>
--- a/packages/web/src/json-tree/JSONArrayNode.svelte
+++ b/packages/web/src/json-tree/JSONArrayNode.svelte
@@ -0,0 +1,28 @@
+<script>
+  import JSONNested from './JSONNested.svelte';
+
+  export let key, value, isParentExpanded, isParentArray;
+  export let expanded = false;
+  const filteredKey = new Set(['length']);
+
+  $: keys = Object.getOwnPropertyNames(value);
+  $: previewKeys = keys.filter(key => !filteredKey.has(key));
+
+  function getValue(key) {
+    return value[key];
+  }
+
+</script>
+<JSONNested
+  {key}
+  {expanded}
+  {isParentExpanded}
+  {isParentArray}
+  isArray={true}
+  {keys}
+  {previewKeys}
+  {getValue}
+  label="Array({value.length})"
+  bracketOpen="["
+  bracketClose="]"
+/>
--- a/packages/web/src/json-tree/JSONArrow.svelte
+++ b/packages/web/src/json-tree/JSONArrow.svelte
@@ -0,0 +1,31 @@
+<script>
+  export let expanded;
+</script>
+<style>
+  .container {
+    display: inline-block;
+    cursor: pointer;
+    transform: translate(calc(0px - var(--li-identation)), -50%);
+    position: absolute;
+    top: 50%;
+    padding-right: 100%;
+  }
+  .arrow {
+    transform-origin: 25% 50%;
+    position: relative;
+    line-height: 1.1em;
+    font-size: 0.75em;
+    margin-left: 0;
+    transition: 150ms;
+    color: var(--arrow-sign);
+    user-select: none;
+    font-family: 'Courier New', Courier, monospace;
+  }
+  .expanded {
+    transform: rotateZ(90deg) translateX(-3px);
+  }
+</style>
+
+<div class="container" on:click>
+  <div class="arrow" class:expanded={expanded}>{'\u25B6'}</div>
+</div>
--- a/packages/web/src/json-tree/JSONIterableArrayNode.svelte
+++ b/packages/web/src/json-tree/JSONIterableArrayNode.svelte
@@ -0,0 +1,35 @@
+<script>
+  import JSONNested from './JSONNested.svelte';
+
+  export let key, value, isParentExpanded, isParentArray, nodeType;
+
+  let keys = [];
+
+  $: {
+    let result = [];
+    let i = 0;
+    for(const entry of value) {
+      result.push([i++, entry]);
+    }
+    keys = result;
+  }
+
+  function getKey(key) {
+    return String(key[0]);
+  }
+  function getValue(key) {
+    return key[1];
+  }
+</script>
+<JSONNested
+  {key}
+  {isParentExpanded}
+  {isParentArray}
+  {keys}
+  {getKey}
+  {getValue}
+  isArray={true}
+  label="{nodeType}({keys.length})"
+  bracketOpen={'{'}
+  bracketClose={'}'}
+/>
--- a/packages/web/src/json-tree/JSONIterableMapNode.svelte
+++ b/packages/web/src/json-tree/JSONIterableMapNode.svelte
@@ -0,0 +1,35 @@
+<script>
+  import JSONNested from './JSONNested.svelte';
+  import MapEntry from './utils/MapEntry'
+
+  export let key, value, isParentExpanded, isParentArray, nodeType;
+
+  let keys = [];
+
+  $: {
+    let result = [];
+    let i = 0;
+    for(const entry of value) {
+      result.push([i++, new MapEntry(entry[0], entry[1])]);
+    }
+    keys = result;
+  }
+  function getKey(entry) {
+    return entry[0];
+  }
+  function getValue(entry) {
+    return entry[1];
+  }
+</script>
+<JSONNested
+  {key}
+  {isParentExpanded}
+  {isParentArray}
+  {keys}
+  {getKey}
+  {getValue}
+  label="{nodeType}({keys.length})"
+  colon=""
+  bracketOpen={'{'}
+  bracketClose={'}'}
+/>
--- a/packages/web/src/json-tree/JSONKey.svelte
+++ b/packages/web/src/json-tree/JSONKey.svelte
@@ -0,0 +1,20 @@
+<script>
+  export let key, isParentExpanded, isParentArray = false, colon = ':';
+
+  $: showKey = (isParentExpanded || !isParentArray || key != +key);
+</script>
+<style>
+  label {
+    display: inline-block;
+    color: var(--label-color);
+    padding: 0;
+  }
+  .spaced {
+    padding-right: var(--li-colon-space);
+  }
+</style>
+{#if showKey && key}
+  <label class:spaced={isParentExpanded} on:click>
+    <span>{key}{colon}</span>
+  </label>
+{/if}
--- a/packages/web/src/json-tree/JSONMapEntryNode.svelte
+++ b/packages/web/src/json-tree/JSONMapEntryNode.svelte
@@ -0,0 +1,23 @@
+<script>
+  import JSONNested from './JSONNested.svelte';
+
+  export let key, value, isParentExpanded, isParentArray;
+  export let expanded = false;
+
+  const keys = ['key', 'value'];
+
+  function getValue(key) {
+    return value[key];
+  }
+</script>
+<JSONNested
+  {expanded}
+  {isParentExpanded}
+  {isParentArray}
+  key={isParentExpanded ? String(key) : value.key}
+  {keys}
+  {getValue}
+  label={isParentExpanded ? 'Entry ' : '=> '}
+  bracketOpen={'{'}
+  bracketClose={'}'}
+/>
--- a/packages/web/src/json-tree/JSONNested.svelte
+++ b/packages/web/src/json-tree/JSONNested.svelte
@@ -0,0 +1,79 @@
+<script>
+  import { getContext, setContext } from 'svelte';
+  import contextKey from './context';
+  import JSONArrow from './JSONArrow.svelte';
+  import JSONNode from './JSONNode.svelte';
+  import JSONKey from './JSONKey.svelte';
+
+  export let key, keys, colon = ':', label = '', isParentExpanded, isParentArray, isArray = false, bracketOpen, bracketClose;
+  export let previewKeys = keys;
+  export let getKey = key => key;
+  export let getValue = key => key;
+  export let getPreviewValue = getValue;
+  export let expanded = false, expandable = true;
+
+  const context = getContext(contextKey);
+  setContext(contextKey, { ...context, colon })
+
+  $: slicedKeys = expanded ? keys: previewKeys.slice(0, 5);
+
+  $: if (!isParentExpanded) {
+    expanded = false;
+  }
+
+  function toggleExpand() {
+    expanded = !expanded;
+  }
+
+  function expand() {
+    expanded = true;
+  }
+
+</script>
+<style>
+  label {
+    display: inline-block;
+  }
+  .indent {
+    padding-left: var(--li-identation);
+  }
+  .collapse {
+    --li-display: inline;
+    display: inline;
+    font-style: italic;
+  }
+  .comma {
+    margin-left: -0.5em;
+    margin-right: 0.5em;
+  }
+
+  label {
+    /* display: contents; */
+    position: relative;
+  }
+</style>
+<li class:indent={isParentExpanded}>
+  <label>
+    {#if expandable && isParentExpanded}
+      <JSONArrow on:click={toggleExpand} {expanded} />
+    {/if}
+    <JSONKey {key} colon={context.colon} {isParentExpanded} {isParentArray} on:click={toggleExpand} />
+    <span on:click={toggleExpand}><span>{label}</span>{bracketOpen}</span>
+  </label>
+    {#if isParentExpanded}
+      <ul class:collapse={!expanded} on:click={expand}>
+        {#each slicedKeys as key, index}
+          <JSONNode key={getKey(key)} isParentExpanded={expanded} isParentArray={isArray} value={expanded ? getValue(key) : getPreviewValue(key)} />
+          {#if !expanded && index < previewKeys.length - 1}
+            <span class="comma">,</span>
+          {/if}
+        {/each}
+        {#if slicedKeys.length < previewKeys.length }
+          <span>…</span>
+        {/if}
+      </ul>
+    {:else}
+      <span>…</span>
+    {/if}
+  <span>{bracketClose}</span>
+</li>
--- a/packages/web/src/json-tree/JSONNode.svelte
+++ b/packages/web/src/json-tree/JSONNode.svelte
@@ -0,0 +1,65 @@
+<script>
+  import JSONObjectNode from './JSONObjectNode.svelte';
+  import JSONArrayNode from './JSONArrayNode.svelte';
+  import JSONIterableArrayNode from './JSONIterableArrayNode.svelte';
+  import JSONIterableMapNode from './JSONIterableMapNode.svelte';
+  import JSONMapEntryNode from './JSONMapEntryNode.svelte';
+  import JSONValueNode from './JSONValueNode.svelte';
+  import ErrorNode from './ErrorNode.svelte';
+  import objType from './objType';
+
+  export let key, value, isParentExpanded, isParentArray;
+  $: nodeType = objType(value);
+  $: componentType = getComponent(nodeType);
+  $: valueGetter = getValueGetter(nodeType);
+
+  function getComponent(nodeType) {
+    switch (nodeType) {
+      case 'Object':
+        return JSONObjectNode;
+      case 'Error':
+        return ErrorNode;
+      case 'Array':
+        return JSONArrayNode;
+      case 'Iterable':
+      case 'Map':
+      case 'Set':
+        return typeof value.set === 'function' ? JSONIterableMapNode : JSONIterableArrayNode;
+      case 'MapEntry':
+        return JSONMapEntryNode;
+      default:
+        return JSONValueNode;
+    }
+  }
+
+  function getValueGetter(nodeType) {
+    switch (nodeType) {
+      case 'Object':
+      case 'Error':
+      case 'Array':
+      case 'Iterable':
+      case 'Map':
+      case 'Set':
+      case 'MapEntry':
+      case 'Number':
+        return undefined;
+      case 'String':
+        return raw => `"${raw}"`;
+      case 'Boolean':
+        return raw => (raw ? 'true' : 'false');
+      case 'Date':
+        return raw => raw.toISOString();
+      case 'Null':
+        return () => 'null';
+      case 'Undefined':
+        return () => 'undefined';
+      case 'Function':
+      case 'Symbol':
+        return raw => raw.toString();
+      default:
+        return () => `<${nodeType}>`;
+    }
+  }
+</script>
+
+<svelte:component this={componentType} {key} {value} {isParentExpanded} {isParentArray} {nodeType} {valueGetter} />
--- a/packages/web/src/json-tree/JSONObjectNode.svelte
+++ b/packages/web/src/json-tree/JSONObjectNode.svelte
@@ -0,0 +1,24 @@
+<script>
+  import JSONNested from './JSONNested.svelte';
+
+  export let key, value, isParentExpanded, isParentArray, nodeType;
+  export let expanded = false;
+
+  $: keys = Object.getOwnPropertyNames(value);
+
+  function getValue(key) {
+    return value[key];
+  }
+</script>
+<JSONNested
+  {key}
+  {expanded}
+  {isParentExpanded}
+  {isParentArray}
+  {keys}
+  previewKeys={keys}
+  {getValue}
+  label="{nodeType} "
+  bracketOpen={'{'}
+  bracketClose={'}'}
+/>
--- a/packages/web/src/json-tree/JSONTree.svelte
+++ b/packages/web/src/json-tree/JSONTree.svelte
@@ -0,0 +1,40 @@
+<script>
+  import JSONNode from './JSONNode.svelte';
+  import { setContext } from 'svelte';
+  import contextKey from './context';
+
+  setContext(contextKey, {});
+
+  export let key = '', value;
+</script>
+<style>
+  ul {
+    --string-color: var(--json-tree-string-color, #cb3f41);
+    --symbol-color: var(--json-tree-symbol-color, #cb3f41);
+    --boolean-color: var(--json-tree-boolean-color, #112aa7);
+    --function-color: var(--json-tree-function-color, #112aa7);
+    --number-color: var(--json-tree-number-color, #3029cf);
+    --label-color: var(--json-tree-label-color, #871d8f);
+    --arrow-color: var(--json-tree-arrow-color, #727272);
+    --null-color: var(--json-tree-null-color, #8d8d8d);
+    --undefined-color: var(--json-tree-undefined-color, #8d8d8d);
+    --date-color: var(--json-tree-date-color, #8d8d8d);
+    --li-identation: var(--json-tree-li-indentation, 1em);
+    --li-line-height: var(--json-tree-li-line-height, 1.3);
+    --li-colon-space: 0.3em;
+    font-size: var(--json-tree-font-size, 12px);
+    font-family: var(--json-tree-font-family, 'Courier New', Courier, monospace);
+  }
+  ul :global(li) {
+    line-height: var(--li-line-height);
+    display: var(--li-display, list-item);
+    list-style: none;
+  }
+  ul, ul :global(ul) {
+    padding: 0;
+    margin: 0;
+  }
+</style>
+<ul>
+  <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} />
+</ul>
--- a/packages/web/src/json-tree/JSONValueNode.svelte
+++ b/packages/web/src/json-tree/JSONValueNode.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { getContext } from 'svelte';
+  import contextKey from './context';
+
+  import JSONKey from './JSONKey.svelte';
+
+  export let key, value, valueGetter = null, isParentExpanded, isParentArray, nodeType;
+
+  const { colon } = getContext(contextKey);
+</script>
+<style>
+  li {
+    user-select: text;
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+  .indent {
+    padding-left: var(--li-identation);
+  }
+  .String {
+    color: var(--string-color);
+  }
+  .Date {
+    color: var(--date-color);
+  }
+  .Number {
+    color: var(--number-color);
+  }
+  .Boolean {
+    color: var(--boolean-color);
+  }
+  .Null {
+    color: var(--null-color);
+  }
+  .Undefined {
+    color: var(--undefined-color);
+  }
+  .Function {
+    color: var(--function-color);
+    font-style: italic;
+  }
+  .Symbol {
+    color: var(--symbol-color);
+  }
+</style>
+<li class:indent={isParentExpanded}>
+  <JSONKey {key} {colon} {isParentExpanded} {isParentArray} />
+  <span class={nodeType}>
+    {valueGetter ? valueGetter(value) : value}
+  </span>
+</li>
--- a/packages/web/src/json-tree/context.js
+++ b/packages/web/src/json-tree/context.js
@@ -0,0 +1 @@
+export default {};
--- a/packages/web/src/json-tree/objType.js
+++ b/packages/web/src/json-tree/objType.js
@@ -0,0 +1,11 @@
+export default function objType(obj) {
+  const type = Object.prototype.toString.call(obj).slice(8, -1);
+  if (type === 'Object') {
+    if (typeof obj[Symbol.iterator] === 'function') {
+      return 'Iterable';
+    }
+    return obj.constructor.name;
+  }
+
+  return type;
+}
--- a/packages/web/src/json-tree/utils/MapEntry.js
+++ b/packages/web/src/json-tree/utils/MapEntry.js
@@ -0,0 +1,6 @@
+export default class MapEntry {
+  constructor(key, value) {
+    this.key = key;
+    this.value = value;
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -2068,6 +2068,13 @@ date-fns@^2.0.1:
  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.9.0.tgz#d0b175a5c37ed5f17b97e2272bbc1fa5aec677d2"
  integrity sha512-khbFLu/MlzLjEzy9Gh8oY1hNt/Dvxw3J6Rbc28cVoYWQaC1S3YI4xwkF9ZWcjDLscbZlY9hISMr66RFzZagLsA==

+dbgate-tools@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/dbgate-tools/-/dbgate-tools-4.0.2.tgz#927e0e100fed7331750c1969f19f3e824e700d0f"
+  integrity sha512-A3gjsf25CPMwALHe3jCzViblY3xZYfYC+bFKArG0gp6LxnYYEqc7EvJtO1p+TVAawCwoM/OJLqkOSSQtGnTg5A==
+  dependencies:
+    lodash "^4.17.15"
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -7017,11 +7024,6 @@ svelte-check@^1.0.0:
    svelte-preprocess "^4.0.0"
    typescript "*"

-svelte-json-tree@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/svelte-json-tree/-/svelte-json-tree-0.1.0.tgz#2711e36162046a10766dfbef69739168a5eaafa6"
-  integrity sha512-ufKWvS94z5m6Je9Hu0yosvdALy0mOPcaexbTcQQ/jW+3Rzi4oaHkOeg4RQ3cNpOlOQlIs0lfsF9FBlyquZ7XuQ==
-
 svelte-markdown@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/svelte-markdown/-/svelte-markdown-0.1.4.tgz#03bec6dcd8ff1c09126e7c62c8a5a481905881d7"