bb_component_superjsontree 1.0.1

package/README.md

@@ -0,0 +1,25 @@
+# SuperJSONTree
+
+Super JSON Tree
+
+An interactive JSON viewer component that renders hierarchical data in an expandable tree structure with syntax highlighting.
+
+## Metadata
+
+| | |
+|---|---|
+| **Type** | Budibase Component |
+| **Category** | basic |
+| **Topics** | `budibase`, `component`, `basic` |
+
+## Development
+
+```bash
+bun install
+bun link @poirazis/superlib
+bun run build
+```
+
+## Schema
+
+See `schema.json` for the component definition.

package/dist/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "bb_component_superjsontree",
+  "version": "1.0.1",
+  "description": "Super JSON Tree",
+  "license": "MIT",
+  "author": "Michael Poirazi - https://github.com/poirazis"
+}

package/dist/plugin.min.js

@@ -0,0 +1,2 @@
+!function(){try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".tree.svelte-1p6t59x{color:var(--spectrum-global-color-gray-700);--text-color:var(--spectrum-global-color-gray-200);--string-color:var(--spectrum-global-color-blue-400);--number-color:var(--spectrum-global-color-red-400);--boolean-color:var(--spectrum-global-color-purple-400);--null-color:var(--spectrum-global-color-green-400);--date-color:var(--spectrum-global-color-orange-400);--toggle-color:var(--spectrum-global-color-gray-700);--spacer-color:var(--spectrum-global-color-gray-500);--empty-text-color:var(--spectrum-global-color-purple-500);font-size:13px;line-height:1.65rem}.tree.quiet.svelte-1p6t59x{--string-color:var(--spectrum-global-color-gray-600);--number-color:var(--spectrum-global-color-gray-600);--boolean-color:var(--spectrum-global-color-gray-600);--null-color:var(--spectrum-global-color-gray-600);--date-color:var(--spectrum-global-color-gray-600)}.list.svelte-1p6t59x{margin:0;padding-left:0;padding-right:.5rem;list-style:none;transition:all .2s ease-in-out}.list-item.svelte-1p6t59x{margin-left:0}.node.svelte-1p6t59x:hover{background-color:var(--spectrum-global-color-gray-100)}.nested.svelte-1p6t59x{padding-left:18px}.nested-item.svelte-1p6t59x{margin-left:0}.node.svelte-1p6t59x{box-sizing:border-box;align-items:center;gap:.25rem;display:flex}.toggle.svelte-1p6t59x{cursor:pointer;text-align:center;width:14px;color:var(--toggle-color);background:0 0;border:none;padding:0}.spacer.svelte-1p6t59x{text-align:center;min-width:14px;color:var(--spacer-color)}.key.svelte-1p6t59x{cursor:pointer;max-width:7rem;margin-right:.5rem}.count.svelte-1p6t59x{color:var(--spectrum-global-color-gray-500);font-family:monospace}.value.svelte-1p6t59x{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.value.string.svelte-1p6t59x{color:var(--string-color)}.value.number.svelte-1p6t59x{color:var(--number-color)}.value.boolean.svelte-1p6t59x{color:var(--boolean-color)}.value.null.svelte-1p6t59x{color:var(--null-color)}.value.date.svelte-1p6t59x{color:var(--date-color)}p.svelte-1p6t59x{color:var(--empty-text-color);margin:0}.plugin-error.svelte-1q1ah0h{border:1px solid var(--spectrum-global-color-red-400);background:var(--spectrum-global-color-red-100);color:var(--spectrum-global-color-red-800);box-sizing:border-box;border-radius:4px;flex-direction:column;gap:.25rem;width:100%;padding:.5rem .75rem;font-size:13px;display:flex}.plugin-error-title.svelte-1q1ah0h{font-weight:600}.plugin-error-detail.svelte-1q1ah0h{color:var(--spectrum-global-color-red-700);word-break:break-word;font-size:12px}\n/*$vite$:1*/")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+var plugin=function(e,t,r,s){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});var l,n,a,i=Object.create,o=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,c=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;a=null!=(l=t)?i(c(l)):{};var v=(t=((e,t,r,s)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var l,n=d(t),a=0,i=n.length;a<i;a++)l=n[a],u.call(e,l)||l===r||o(e,l,{get:(e=>t[e]).bind(null,l),enumerable:!(s=p(t,l))||s.enumerable});return e})(!n&&l&&l.__esModule?a:o(a,"default",{value:l,enumerable:!0}),l)).from_html('<p class="svelte-1p6t59x"></p>'),f=t.from_html('<i class="ri-arrow-drop-down-line"></i>'),g=t.from_html('<i class="ri-arrow-drop-right-line"></i>'),h=t.from_html('<button class="toggle svelte-1p6t59x"><!></button>'),m=t.from_html('<span class="spacer svelte-1p6t59x"></span>'),y=t.from_html('<span class="count svelte-1p6t59x"> </span>'),b=t.from_html("<span> </span>"),_=t.from_html('<i class="ri-arrow-drop-down-line"></i>'),x=t.from_html('<i class="ri-arrow-drop-right-line"></i>'),O=t.from_html('<button class="toggle svelte-1p6t59x"><!></button>'),C=t.from_html('<span class="spacer svelte-1p6t59x"></span>'),N=t.from_html('<span class="count svelte-1p6t59x"> </span>'),w=t.from_html("<span> </span>"),j=t.from_html('<ul class="list nested svelte-1p6t59x"><li class="list-item nested-item svelte-1p6t59x"><!></li></ul>'),k=t.from_html('<li class="list-item nested-item svelte-1p6t59x"><div class="node svelte-1p6t59x"><!>  <span class="key svelte-1p6t59x"> <!></span> <!></div> <!></li>'),S=t.from_html('<li class="list-item nested-item svelte-1p6t59x"><!></li>'),P=t.from_html('<ul class="list nested svelte-1p6t59x"><!></ul>'),A=t.from_html('<li class="list-item svelte-1p6t59x"><div class="node svelte-1p6t59x"><!>  <span class="key svelte-1p6t59x"> <!></span> <!></div> <!></li>'),$=t.from_html('<ul class="list svelte-1p6t59x"></ul>'),T=t.from_html("<div><!></div>");function q(e,r){t.push(r,!0);let l=t.prop(r,"value",19,()=>({})),n=t.prop(r,"showKeyCount",3,!1),a=t.prop(r,"quiet",3,!1),i=t.prop(r,"monospace",3,!1),o=t.prop(r,"expandedNodes",31,()=>t.proxy([]));function p(e){-1===o().indexOf(e)?o([...o(),e]):o(o().filter(t=>t!==e))}function d(e){if(null===e)return"null";if(function(e){if("string"!=typeof e)return!1;if(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.*Z$/.test(e)){const t=new Date(e);return!isNaN(t.getTime())}return!1}(e))return"date";if("object"==typeof e&&!Array.isArray(e)&&0===Object.keys(e).length)return"null";if(Array.isArray(e)&&0===e.length)return"null";switch(typeof e){case"string":return"string";case"number":return"number";case"boolean":return"boolean";case"undefined":return"undefined";default:return"other"}}function c(e,t,r=""){const s=r?`${r}.${e}`:e,l="object"==typeof t&&null!==t,a=Array.isArray(t),i=function(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)||Array.isArray(e)}(t)&&!(l&&!a&&0===Object.keys(t).length||a&&0===t.length),o=d(t),p=a?t.length:l&&!a?Object.keys(t).length:0;return{key:e,value:t,fullPath:s,isObject:l,isArray:a,hasChildNodes:i,typeClass:o,countLabel:n()?a?`[] ${p} items`:l&&!a?`{} ${p} Keys`:"":""}}var u=T();let M,B;var K=t.child(u);t.key(K,l,e=>{var r=t.comment(),d=t.first_child(r),u=e=>{var r=v();r.textContent="{ }",t.append(e,r)},T=t.derived(()=>!l()||0===Object.keys(l()).length),M=e=>{var r=$();t.each(r,21,()=>Object.entries(l()),([e,t])=>e,(e,r)=>{var l=t.derived(()=>t.to_array(t.get(r),2));const d=t.derived(()=>c(t.get(l)[0],t.get(l)[1]));var u=A(),v=t.child(u),$=t.child(v),T=e=>{var r=h(),s=t.child(r),l=e=>{var r=f();t.append(e,r)},n=t.derived(()=>o().includes(t.get(d).fullPath)),a=e=>{var r=g();t.append(e,r)};t.if(s,e=>{t.get(n)?e(l):e(a,-1)}),t.reset(r),t.event("click",r,()=>p(t.get(d).fullPath)),t.append(e,r)},M=e=>{var r=m();t.append(e,r)};t.if($,e=>{t.get(d).hasChildNodes?e(T):e(M,-1)});var B=t.sibling($,2),K=t.child(B),E=t.sibling(K),J=e=>{var r=y(),s=t.child(r,!0);t.reset(r),t.template_effect(()=>t.set_text(s,t.get(d).countLabel)),t.append(e,r)};t.if(E,e=>{t.get(d).countLabel&&e(J)}),t.reset(B);var U=t.sibling(B,2),D=e=>{var r=b(),s=t.child(r,!0);t.reset(r),t.template_effect(e=>{t.set_class(r,1,`value ${t.get(d).typeClass??""}`,"svelte-1p6t59x"),t.set_text(s,e)},[()=>JSON.stringify(t.get(d).value)]),t.append(e,r)};t.if(U,e=>{t.get(d).hasChildNodes||e(D)}),t.reset(v);var L=t.sibling(v,2),I=e=>{var r=P(),l=t.child(r),u=e=>{var r=t.comment(),l=t.first_child(r);t.each(l,17,()=>t.get(d).value,t.index,(e,r,l)=>{const u=t.derived(()=>c(String(l),t.get(r),t.get(d).fullPath));var v=k(),f=t.child(v),g=t.child(f),h=e=>{var r=O(),s=t.child(r),l=e=>{var r=_();t.append(e,r)},n=t.derived(()=>o().includes(t.get(u).fullPath)),a=e=>{var r=x();t.append(e,r)};t.if(s,e=>{t.get(n)?e(l):e(a,-1)}),t.reset(r),t.event("click",r,()=>p(t.get(u).fullPath)),t.append(e,r)},m=e=>{var r=C();t.append(e,r)};t.if(g,e=>{t.get(u).hasChildNodes?e(h):e(m,-1)});var y=t.sibling(g,2),b=t.child(y),S=t.sibling(b),P=e=>{var r=N(),s=t.child(r,!0);t.reset(r),t.template_effect(()=>t.set_text(s,t.get(u).countLabel)),t.append(e,r)};t.if(S,e=>{t.get(u).countLabel&&e(P)}),t.reset(y);var A=t.sibling(y,2),$=e=>{var r=w(),s=t.child(r,!0);t.reset(r),t.template_effect(e=>{t.set_class(r,1,`value ${t.get(u).typeClass??""}`,"svelte-1p6t59x"),t.set_text(s,e)},[()=>JSON.stringify(t.get(u).value)]),t.append(e,r)};t.if(A,e=>{t.get(u).hasChildNodes||e($)}),t.reset(f);var T=t.sibling(f,2),M=e=>{var r=j(),l=t.child(r);q(t.child(l),{get value(){return t.get(u).value},get showKeyCount(){return n()},get quiet(){return a()},get monospace(){return i()},get expandedNodes(){return o()},set expandedNodes(e){o(e)}}),t.reset(l),t.reset(r),t.transition(3,r,()=>s.slide),t.append(e,r)},B=t.derived(()=>t.get(u).hasChildNodes&&o().includes(t.get(u).fullPath));t.if(T,e=>{t.get(B)&&e(M)}),t.reset(v),t.template_effect(()=>t.set_text(b,`${t.get(u).key??""}: `)),t.event("click",y,()=>t.get(u).hasChildNodes&&p(t.get(u).fullPath)),t.append(e,v)}),t.append(e,r)},v=e=>{var r=S();q(t.child(r),{get value(){return t.get(d).value},get showKeyCount(){return n()},get quiet(){return a()},get monospace(){return i()},get expandedNodes(){return o()},set expandedNodes(e){o(e)}}),t.reset(r),t.append(e,r)};t.if(l,e=>{t.get(d).isArray?e(u):t.get(d).isObject&&e(v,1)}),t.reset(r),t.transition(3,r,()=>s.slide),t.append(e,r)},z=t.derived(()=>t.get(d).hasChildNodes&&o().includes(t.get(d).fullPath));t.if(L,e=>{t.get(z)&&e(I)}),t.reset(u),t.template_effect(()=>t.set_text(K,`${t.get(d).key??""}: `)),t.event("click",B,()=>t.get(d).hasChildNodes&&p(t.get(d).fullPath)),t.append(e,u)}),t.reset(r),t.append(e,r)};t.if(d,e=>{t.get(T)?e(u):e(M,-1)}),t.append(e,r)}),t.reset(u),t.template_effect(()=>{M=t.set_class(u,1,"tree svelte-1p6t59x",null,M,{quiet:a()}),B=t.set_style(u,"",B,{"font-family":i()?"monospace":"inherit","font-size":i()?"11px":"13px"})}),t.append(e,u),t.pop()}var M=t.from_html("<div><!></div>");function B(e,s){t.push(s,!0);const l=()=>t.store_get(o,"$component",n),[n,a]=t.setup_stores(),{styleable:i}=(0,r.getContext)("sdk"),o=(0,r.getContext)("component");let p=t.prop(s,"value",19,()=>({})),d=t.prop(s,"showKeyCount",3,!1),c=t.prop(s,"quiet",3,!1),u=t.prop(s,"monospace",3,!1),v=t.state(t.proxy([]));let f=t.derived(()=>function(e){try{return"string"==typeof e?JSON.parse(e):e}catch{return e}}(p()??{})),g=t.derived(()=>({...l().styles,normal:{...l().styles?.normal,overflow:"auto"}}));var h=M();q(t.child(h),{get value(){return t.get(f)},get showKeyCount(){return d()},get quiet(){return c()},get monospace(){return u()},get expandedNodes(){return t.get(v)},set expandedNodes(e){t.set(v,e,!0)}}),t.reset(h),t.action(h,(e,t)=>i?.(e,t),()=>t.get(g)),t.append(e,h),t.pop(),a()}var K=t.from_html('<span class="plugin-error-detail svelte-1q1ah0h"> </span>'),E=t.from_html('<div class="plugin-error svelte-1q1ah0h" role="alert"><span class="plugin-error-title svelte-1q1ah0h">JSON Tree failed to render</span> <!></div>');function J(e,r){let s=t.rest_props(r,["$$slots","$$events","$$legacy"]);var l=t.comment(),n=t.first_child(l);{const e=(e,r=t.noop)=>{var s=E(),l=t.sibling(t.child(s),2),n=e=>{var s=K(),l=t.child(s,!0);t.reset(s),t.template_effect(()=>t.set_text(l,r().message)),t.append(e,s)};t.if(l,e=>{r()instanceof Error&&r().message&&e(n)}),t.reset(s),t.append(e,s)};t.boundary(n,{onerror:e=>{console.error("[SuperJSONTree]",e)},failed:e},e=>{B(e,t.spread_props(()=>s))})}t.append(e,l)}var U={type:"component",metadata:{svelteMajor:5},schema:{name:"bb_component_superjsontree",friendlyName:"Super JSON Tree",description:"A JSON Object tree viewer for Budibase",icon:"Brackets",styles:["size","padding","border","background"],settings:[{type:"text",key:"value",label:"Value"},{type:"boolean",key:"showKeyCount",label:"Key Count"},{type:"boolean",key:"quiet",label:"Quiet"},{type:"boolean",key:"monospace",label:"Monospace"}]}},D="1.0.1";if(window){const e={Component:J,schema:U,version:D};window["##BUDIBASE_CUSTOM_COMPONENTS##"]||(window["##BUDIBASE_CUSTOM_COMPONENTS##"]=[]),window["##BUDIBASE_CUSTOM_COMPONENTS##"].push(e),window.registerCustomComponent&&window.registerCustomComponent(e)}var L=J,I=D;return e.Component=L,e.schema=U,e.version=I,e}({},svelteInternal,svelte,svelteTransition);

package/dist/schema.json

@@ -0,0 +1,42 @@
+{
+  "type": "component",
+  "metadata": {
+    "svelteMajor": 5
+  },
+  "schema": {
+    "name": "bb_component_superjsontree",
+    "friendlyName": "Super JSON Tree",
+    "description": "A JSON Object tree viewer for Budibase",
+    "icon": "Brackets",
+    "styles": [
+      "size",
+      "padding",
+      "border",
+      "background"
+    ],
+    "settings": [
+      {
+        "type": "text",
+        "key": "value",
+        "label": "Value"
+      },
+      {
+        "type": "boolean",
+        "key": "showKeyCount",
+        "label": "Key Count"
+      },
+      {
+        "type": "boolean",
+        "key": "quiet",
+        "label": "Quiet"
+      },
+      {
+        "type": "boolean",
+        "key": "monospace",
+        "label": "Monospace"
+      }
+    ]
+  },
+  "hash": "b10ab563eeac31ef004fd59fae22b79140959100",
+  "version": "1.0.1"
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "bb_component_superjsontree",
+  "version": "1.0.1",
+  "description": "Super JSON Tree",
+  "author": "Michael Poirazi - https://github.com/poirazis",
+  "license": "MIT",
+  "svelte": "index.js",
+  "module": "dist/plugin.min.js",
+  "schema.metadata.svelteMajor": 5,
+  "type": "module",
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "watch": "NODE_ENV=development vite build --watch --mode development"
+  },
+  "dependencies": {},
+  "exports": {
+    ".": {
+      "import": "./dist/plugin.min.js",
+      "require": "./dist/plugin.min.js"
+    }
+  },
+  "devDependencies": {
+    "@budibase/backend-core": "^3.39.22",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "tar": "^7.5.16",
+    "terser": "^5.48.0",
+    "vite": "^8.1.0",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
+    "vite-plugin-singlefile": "^2.3.3",
+    "svelte": "5.55.10"
+  },
+  "peerDependencies": {
+    "svelte": "5.55.10"
+  },
+  "overrides": {
+    "svelte": "5.55.10"
+  }
+}