@calcit/procs 0.8.34 → 0.8.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/custom-formatter.mjs +119 -61
  2. package/lib/js-tuple.mjs +0 -1
  3. package/lib/package.json +1 -1
  4. package/package.json +1 -1
  5. package/ts-src/custom-formatter.mts +164 -62
  6. package/ts-src/js-tuple.mts +0 -1
package/lib/custom-formatter.mjs CHANGED
@@ -1,3 +1,4 @@
1
+ import { is_literal } from "./js-primes.mjs";
1
2
  import { CalcitRef, CalcitSymbol, CalcitTag } from "./calcit-data.mjs";
2
3
  import { CalcitRecord } from "./js-record.mjs";
3
4
  import { CalcitMap, CalcitSliceMap } from "./js-map.mjs";
@@ -16,11 +17,43 @@ let embedObject = (x) => {
16
17
  },
17
18
  ];
18
19
  };
19
- let shortPreview = (x) => {
20
- if (x.length > 102) {
21
- return x.substring(0, 100) + "...";
20
+ /** camel case to kabab case */
21
+ let kabab = (s) => {
22
+ return s.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
23
+ };
24
+ /** returns {style: "..."} */
25
+ let styles = (o) => {
26
+ let styleCode = "";
27
+ let keys = Object.keys(o);
28
+ for (let idx = 0; idx < keys.length; idx++) {
29
+ let key = keys[idx];
30
+ styleCode += `${kabab(key)}:${o[key]};`;
31
+ }
32
+ return {
33
+ style: styleCode,
34
+ };
35
+ };
36
+ let hsl = (/** 0~360 */ h, /** 0~100 */ s, /** 0~100 */ l, /** 0~1 */ a) => {
37
+ if (a != null) {
38
+ return `hsla(${h}, ${s}%, ${l}%, ${a})`;
22
39
  }
23
- return x;
40
+ return `hsl(${h}, ${s}%, ${l}%)`;
41
+ };
42
+ /** create element */
43
+ let div = (style, ...children) => {
44
+ return ["div", styles(style), ...children];
45
+ };
46
+ let span = (style, ...children) => {
47
+ return ["span", styles(style), ...children];
48
+ };
49
+ let table = (style, ...children) => {
50
+ return ["table", styles(style), ...children];
51
+ };
52
+ let tr = (style, ...children) => {
53
+ return ["tr", styles(style), ...children];
54
+ };
55
+ let td = (style, ...children) => {
56
+ return ["td", styles(style), ...children];
24
57
  };
25
58
  export let load_console_formatter_$x_ = () => {
26
59
  if (typeof window === "object") {
@@ -28,103 +61,122 @@ export let load_console_formatter_$x_ = () => {
28
61
  {
29
62
  header: (obj, config) => {
30
63
  if (obj instanceof CalcitTag) {
31
- return ["div", { style: "color: hsl(240, 80%, 60%)" }, obj.toString()];
64
+ return div({ color: hsl(240, 80, 60) }, obj.toString());
32
65
  }
33
66
  if (obj instanceof CalcitSymbol) {
34
- return ["div", { style: "color: hsl(340, 80%, 60%)" }, obj.toString()];
67
+ return div({ color: hsl(240, 80, 60) }, obj.toString());
35
68
  }
36
69
  if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
37
- return [
38
- "div",
39
- { style: "color: hsl(280, 80%, 60%, 0.4)" },
40
- shortPreview(obj.toString(true, true)),
41
- ["span", { style: "font-size: 80%; vertical-align: 0.7em; color: hsl(280, 80%, 60%, 0.8)" }, `${obj.len()}`],
42
- ];
70
+ let preview = "";
71
+ for (let idx = 0; idx < obj.len(); idx++) {
72
+ preview += " ";
73
+ if (is_literal(obj.get(idx))) {
74
+ preview += obj.get(idx).toString();
75
+ }
76
+ else {
77
+ preview += "..";
78
+ break;
79
+ }
80
+ }
81
+ return div({
82
+ color: hsl(280, 80, 60, 0.4),
83
+ }, `[]`, span({
84
+ fontSize: "8px",
85
+ verticalAlign: "middle",
86
+ color: hsl(280, 80, 80, 0.8),
87
+ }, `${obj.len()}`), " ", preview);
43
88
  }
44
89
  if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
45
- return ["div", { style: "color: hsl(280, 80%, 60%, 0.4)" }, shortPreview(obj.toString(true, true))];
90
+ let preview = "";
91
+ for (let [k, v] of obj.pairs()) {
92
+ preview += " ";
93
+ if (is_literal(k) && is_literal(v)) {
94
+ preview += `(${k.toString()} ${v.toString()})`;
95
+ }
96
+ else {
97
+ preview += "..";
98
+ break;
99
+ }
100
+ }
101
+ return div({ color: hsl(280, 80, 60, 0.4) }, "{}", preview);
46
102
  }
47
103
  if (obj instanceof CalcitSet) {
48
- return ["div", { style: "color: hsl(280, 80%, 60%, 0.4)" }, obj.toString(true)];
104
+ return div({ color: hsl(280, 80, 60, 0.4) }, obj.toString(true));
49
105
  }
50
106
  if (obj instanceof CalcitRecord) {
51
- let ret = ["div", { style: "color: hsl(280, 80%, 60%)" }, `%{} ${obj.name}`];
52
- for (let idx = 0; idx < obj.fields.length; idx++) {
53
- ret.push([
54
- "div",
55
- { style: "margin-left: 8px;" },
56
- ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(obj.fields[idx])],
57
- ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(obj.values[idx])],
58
- ]);
59
- }
107
+ let ret = div({ color: hsl(280, 80, 60, 0.4) }, `%{} ${obj.name} ...`);
60
108
  return ret;
61
109
  }
62
110
  if (obj instanceof CalcitTuple) {
63
- let ret = ["div", {}];
64
- ret.push(["div", { style: "display: inline-block; color: hsl(300, 100%, 40%); " }, "::"]);
65
- ret.push(["div", { style: "margin-left: 6px; display: inline-block;" }, embedObject(obj.tag)]);
111
+ let ret = div({}, div({ display: "inline-block", color: hsl(300, 100, 40) }, "::"), div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.tag)));
66
112
  for (let idx = 0; idx < obj.extra.length; idx++) {
67
- ret.push(["div", { style: "margin-left: 6px; display: inline-block;" }, embedObject(obj.extra[idx])]);
113
+ ret.push(div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.extra[idx])));
68
114
  }
69
115
  return ret;
70
116
  }
71
117
  if (obj instanceof CalcitRef) {
72
- return [
73
- "div",
74
- { style: "color: hsl(280, 80%, 60%)" },
75
- `Ref ${obj.path}`,
76
- ["div", { style: "color: hsl(280, 80%, 60%)" }, ["div", { style: "margin-left: 8px;" }, embedObject(obj.value)]],
77
- ];
118
+ return div({
119
+ color: hsl(280, 80, 60),
120
+ }, `Ref ${obj.path}`, div({ color: hsl(280, 80, 60) }, div({ marginLeft: "8px" }, embedObject(obj.value))));
78
121
  }
79
122
  if (obj instanceof CalcitCirruQuote) {
80
- return [
81
- "div",
82
- { style: "color: hsl(240, 80%, 60%); display: flex;" },
83
- `CirruQuote`,
84
- [
85
- "div",
86
- { style: "color: hsl(280, 80%, 60%); padding: 4px 4px; margin: 0 4px 2px; border: 1px solid hsl(0,70%,90%); border-radius: 4px;" },
87
- obj.textForm().trim(),
88
- ],
89
- ];
123
+ return div({ color: hsl(280, 80, 60), display: "flex" }, `CirruQuote`, div({ color: hsl(280, 80, 60), padding: "4px 4px", margin: "0 4px 2px", border: "1px solid hsl(0,70%,90%)", borderRadius: "4px" }, obj.textForm().trim()));
90
124
  }
91
125
  return null;
92
126
  },
93
127
  hasBody: (obj) => {
94
128
  if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
95
- return obj.len() > 0;
129
+ let has_collection = false;
130
+ for (let idx = 0; idx < obj.len(); idx++) {
131
+ if (!is_literal(obj.get(idx))) {
132
+ has_collection = true;
133
+ break;
134
+ }
135
+ }
136
+ return obj.len() > 0 && has_collection;
96
137
  }
97
138
  if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
98
- return obj.len() > 0;
139
+ let has_collection = false;
140
+ for (let [k, v] of obj.pairs()) {
141
+ if (!is_literal(k) || !is_literal(v)) {
142
+ has_collection = true;
143
+ break;
144
+ }
145
+ }
146
+ return obj.len() > 0 && has_collection;
99
147
  }
100
148
  if (obj instanceof CalcitSet) {
101
149
  return obj.len() > 0;
102
150
  }
151
+ if (obj instanceof CalcitRecord) {
152
+ return obj.fields.length > 0;
153
+ }
103
154
  return false;
104
155
  },
105
156
  body: (obj, config) => {
106
157
  if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
107
158
  let flexMode = obj.len() > 40 ? "inline-flex" : "flex";
108
- return ["div", { style: "color: hsl(280, 80%, 60%)" }].concat(obj.toArray().map((x, idx) => {
109
- return [
110
- "div",
111
- { style: `margin-left: 8px; display: ${flexMode}; padding-right: 16px;` },
112
- ["span", { style: "font-family: monospace; margin-right: 8px; color: hsl(280,80%,85%); flex-shrink: 0; font-size: 10px;" }, idx],
113
- embedObject(x),
114
- ];
159
+ return div({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" }, ...obj.toArray().map((x, idx) => {
160
+ return div({ marginLeft: "8px", display: flexMode, paddingRight: "16px" }, span({
161
+ fontFamily: "monospace",
162
+ marginRight: "8px",
163
+ color: hsl(280, 80, 90),
164
+ flexShrink: 0,
165
+ fontSize: "10px",
166
+ }, idx), embedObject(x));
115
167
  }));
116
168
  }
117
169
  if (obj instanceof CalcitSet) {
118
- let ret = ["div", { style: "color: hsl(280, 80%, 60%)" }];
170
+ let ret = div({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
119
171
  let values = obj.values();
120
172
  for (let idx = 0; idx < values.length; idx++) {
121
173
  let x = values[idx];
122
- ret.push(["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(x)]);
174
+ ret.push(div({ marginLeft: "8px", display: "inline-block" }, embedObject(x)));
123
175
  }
124
176
  return ret;
125
177
  }
126
178
  if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
127
- let ret = ["div", { style: "color: hsl(280, 80%, 60%)" }];
179
+ let ret = table({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
128
180
  let pairs = obj.pairs();
129
181
  pairs.sort((pa, pb) => {
130
182
  let ka = pa[0].toString();
@@ -141,12 +193,18 @@ export let load_console_formatter_$x_ = () => {
141
193
  });
142
194
  for (let idx = 0; idx < pairs.length; idx++) {
143
195
  let [k, v] = pairs[idx];
144
- ret.push([
145
- "div",
146
- { style: "margin-left: 8px; display: flex;" },
147
- ["div", { style: "margin-left: 8px; flex-shrink: 0; display: inline-block;" }, embedObject(k)],
148
- ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(v)],
149
- ]);
196
+ ret.push(tr({
197
+ marginLeft: "8px",
198
+ }, td({ marginLeft: "8px", verticalAlign: "top" }, embedObject(k)), td({ marginLeft: "8px" }, embedObject(v))));
199
+ }
200
+ return ret;
201
+ }
202
+ if (obj instanceof CalcitRecord) {
203
+ let ret = table({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
204
+ for (let idx = 0; idx < obj.fields.length; idx++) {
205
+ ret.push(tr({
206
+ marginLeft: "8px",
207
+ }, td({ marginLeft: "8px", verticalAlign: "top" }, embedObject(obj.fields[idx])), td({ marginLeft: "8px" }, embedObject(obj.values[idx]))));
150
208
  }
151
209
  return ret;
152
210
  }
package/lib/js-tuple.mjs CHANGED
@@ -58,7 +58,6 @@ export class CalcitTuple {
58
58
  content += toString(args[i], false, disableJsDataWarning);
59
59
  }
60
60
  if (this.klass instanceof CalcitRecord) {
61
- console.log("CLASS", this.klass);
62
61
  return `(%:: ${content} (:class ${this.klass.name.value}))`;
63
62
  }
64
63
  else {
package/lib/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@calcit/procs",
3
- "version": "0.8.34",
3
+ "version": "0.8.35",
4
4
  "main": "./lib/calcit.procs.mjs",
5
5
  "devDependencies": {
6
6
  "@types/node": "^20.11.8",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@calcit/procs",
3
- "version": "0.8.34",
3
+ "version": "0.8.35",
4
4
  "main": "./lib/calcit.procs.mjs",
5
5
  "devDependencies": {
6
6
  "@types/node": "^20.11.8",
package/ts-src/custom-formatter.mts CHANGED
@@ -1,4 +1,4 @@
1
- import { CalcitValue } from "./js-primes.mjs";
1
+ import { CalcitValue, is_literal } from "./js-primes.mjs";
2
2
  import { CalcitRef, CalcitSymbol, CalcitTag } from "./calcit-data.mjs";
3
3
 
4
4
  import { CalcitRecord } from "./js-record.mjs";
@@ -30,11 +30,46 @@ let embedObject = (x: CalcitValue) => {
30
30
  ];
31
31
  };
32
32
 
33
- let shortPreview = (x: string) => {
34
- if (x.length > 102) {
35
- return x.substring(0, 100) + "...";
33
+ /** camel case to kabab case */
34
+ let kabab = (s: string) => {
35
+ return s.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
36
+ };
37
+
38
+ /** returns {style: "..."} */
39
+ let styles = (o: any) => {
40
+ let styleCode = "";
41
+ let keys = Object.keys(o);
42
+ for (let idx = 0; idx < keys.length; idx++) {
43
+ let key = keys[idx];
44
+ styleCode += `${kabab(key)}:${(o as any)[key]};`;
45
+ }
46
+ return {
47
+ style: styleCode,
48
+ };
49
+ };
50
+
51
+ let hsl = (/** 0~360 */ h: number, /** 0~100 */ s: number, /** 0~100 */ l: number, /** 0~1 */ a?: number) => {
52
+ if (a != null) {
53
+ return `hsla(${h}, ${s}%, ${l}%, ${a})`;
36
54
  }
37
- return x;
55
+ return `hsl(${h}, ${s}%, ${l}%)`;
56
+ };
57
+
58
+ /** create element */
59
+ let div = (style: any, ...children: any[]) => {
60
+ return ["div", styles(style), ...children];
61
+ };
62
+ let span = (style: any, ...children: any[]) => {
63
+ return ["span", styles(style), ...children];
64
+ };
65
+ let table = (style: any, ...children: any[]) => {
66
+ return ["table", styles(style), ...children];
67
+ };
68
+ let tr = (style: any, ...children: any[]) => {
69
+ return ["tr", styles(style), ...children];
70
+ };
71
+ let td = (style: any, ...children: any[]) => {
72
+ return ["td", styles(style), ...children];
38
73
  };
39
74
 
40
75
  export let load_console_formatter_$x_ = () => {
@@ -43,105 +78,154 @@ export let load_console_formatter_$x_ = () => {
43
78
  {
44
79
  header: (obj, config) => {
45
80
  if (obj instanceof CalcitTag) {
46
- return ["div", { style: "color: hsl(240, 80%, 60%)" }, obj.toString()];
81
+ return div({ color: hsl(240, 80, 60) }, obj.toString());
47
82
  }
48
83
  if (obj instanceof CalcitSymbol) {
49
- return ["div", { style: "color: hsl(340, 80%, 60%)" }, obj.toString()];
84
+ return div({ color: hsl(240, 80, 60) }, obj.toString());
50
85
  }
51
86
  if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
52
- return [
53
- "div",
54
- { style: "color: hsl(280, 80%, 60%, 0.4)" },
55
- shortPreview(obj.toString(true, true)),
56
- ["span", { style: "font-size: 80%; vertical-align: 0.7em; color: hsl(280, 80%, 60%, 0.8)" }, `${obj.len()}`],
57
- ];
87
+ let preview = "";
88
+ for (let idx = 0; idx < obj.len(); idx++) {
89
+ preview += " ";
90
+ if (is_literal(obj.get(idx))) {
91
+ preview += obj.get(idx).toString();
92
+ } else {
93
+ preview += "..";
94
+ break;
95
+ }
96
+ }
97
+ return div(
98
+ {
99
+ color: hsl(280, 80, 60, 0.4),
100
+ },
101
+ `[]`,
102
+ span(
103
+ {
104
+ fontSize: "8px",
105
+ verticalAlign: "middle",
106
+ color: hsl(280, 80, 80, 0.8),
107
+ },
108
+ `${obj.len()}`
109
+ ),
110
+ " ",
111
+ preview
112
+ );
58
113
  }
59
114
  if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
60
- return ["div", { style: "color: hsl(280, 80%, 60%, 0.4)" }, shortPreview(obj.toString(true, true))];
115
+ let preview = "";
116
+ for (let [k, v] of obj.pairs()) {
117
+ preview += " ";
118
+ if (is_literal(k) && is_literal(v)) {
119
+ preview += `(${k.toString()} ${v.toString()})`;
120
+ } else {
121
+ preview += "..";
122
+ break;
123
+ }
124
+ }
125
+ return div({ color: hsl(280, 80, 60, 0.4) }, "{}", preview);
61
126
  }
62
127
  if (obj instanceof CalcitSet) {
63
- return ["div", { style: "color: hsl(280, 80%, 60%, 0.4)" }, obj.toString(true)];
128
+ return div({ color: hsl(280, 80, 60, 0.4) }, obj.toString(true));
64
129
  }
65
130
  if (obj instanceof CalcitRecord) {
66
- let ret: any[] = ["div", { style: "color: hsl(280, 80%, 60%)" }, `%{} ${obj.name}`];
67
- for (let idx = 0; idx < obj.fields.length; idx++) {
68
- ret.push([
69
- "div",
70
- { style: "margin-left: 8px;" },
71
- ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(obj.fields[idx])],
72
- ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(obj.values[idx])],
73
- ]);
74
- }
131
+ let ret: any[] = div({ color: hsl(280, 80, 60, 0.4) }, `%{} ${obj.name} ...`);
75
132
  return ret;
76
133
  }
77
134
  if (obj instanceof CalcitTuple) {
78
- let ret: any[] = ["div", {}];
79
- ret.push(["div", { style: "display: inline-block; color: hsl(300, 100%, 40%); " }, "::"]);
80
- ret.push(["div", { style: "margin-left: 6px; display: inline-block;" }, embedObject(obj.tag)]);
135
+ let ret: any[] = div(
136
+ {},
137
+ div({ display: "inline-block", color: hsl(300, 100, 40) }, "::"),
138
+ div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.tag))
139
+ );
81
140
  for (let idx = 0; idx < obj.extra.length; idx++) {
82
- ret.push(["div", { style: "margin-left: 6px; display: inline-block;" }, embedObject(obj.extra[idx])]);
141
+ ret.push(div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.extra[idx])));
83
142
  }
84
143
  return ret;
85
144
  }
86
145
  if (obj instanceof CalcitRef) {
87
- return [
88
- "div",
89
- { style: "color: hsl(280, 80%, 60%)" },
146
+ return div(
147
+ {
148
+ color: hsl(280, 80, 60),
149
+ },
90
150
  `Ref ${obj.path}`,
91
- ["div", { style: "color: hsl(280, 80%, 60%)" }, ["div", { style: "margin-left: 8px;" }, embedObject(obj.value)]],
92
- ];
151
+ div({ color: hsl(280, 80, 60) }, div({ marginLeft: "8px" }, embedObject(obj.value)))
152
+ );
93
153
  }
94
154
  if (obj instanceof CalcitCirruQuote) {
95
- return [
96
- "div",
97
- { style: "color: hsl(240, 80%, 60%); display: flex;" },
155
+ return div(
156
+ { color: hsl(280, 80, 60), display: "flex" },
98
157
  `CirruQuote`,
99
- [
100
- "div",
101
- { style: "color: hsl(280, 80%, 60%); padding: 4px 4px; margin: 0 4px 2px; border: 1px solid hsl(0,70%,90%); border-radius: 4px;" },
102
- obj.textForm().trim(),
103
- ],
104
- ];
158
+ div(
159
+ { color: hsl(280, 80, 60), padding: "4px 4px", margin: "0 4px 2px", border: "1px solid hsl(0,70%,90%)", borderRadius: "4px" },
160
+ obj.textForm().trim()
161
+ )
162
+ );
105
163
  }
106
164
  return null;
107
165
  },
108
166
  hasBody: (obj) => {
109
167
  if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
110
- return obj.len() > 0;
168
+ let has_collection = false;
169
+ for (let idx = 0; idx < obj.len(); idx++) {
170
+ if (!is_literal(obj.get(idx))) {
171
+ has_collection = true;
172
+ break;
173
+ }
174
+ }
175
+ return obj.len() > 0 && has_collection;
111
176
  }
112
177
  if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
113
- return obj.len() > 0;
178
+ let has_collection = false;
179
+ for (let [k, v] of obj.pairs()) {
180
+ if (!is_literal(k) || !is_literal(v)) {
181
+ has_collection = true;
182
+ break;
183
+ }
184
+ }
185
+ return obj.len() > 0 && has_collection;
114
186
  }
115
187
  if (obj instanceof CalcitSet) {
116
188
  return obj.len() > 0;
117
189
  }
190
+ if (obj instanceof CalcitRecord) {
191
+ return obj.fields.length > 0;
192
+ }
118
193
  return false;
119
194
  },
120
195
  body: (obj, config) => {
121
196
  if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
122
197
  let flexMode = obj.len() > 40 ? "inline-flex" : "flex";
123
- return ["div", { style: "color: hsl(280, 80%, 60%)" }].concat(
124
- obj.toArray().map((x, idx) => {
125
- return [
126
- "div",
127
- { style: `margin-left: 8px; display: ${flexMode}; padding-right: 16px;` },
128
- ["span", { style: "font-family: monospace; margin-right: 8px; color: hsl(280,80%,85%); flex-shrink: 0; font-size: 10px;" }, idx],
129
- embedObject(x),
130
- ];
131
- }) as any[]
198
+ return div(
199
+ { color: hsl(280, 80, 60), borderLeft: "1px solid #eee" },
200
+ ...(obj.toArray().map((x, idx) => {
201
+ return div(
202
+ { marginLeft: "8px", display: flexMode, paddingRight: "16px" },
203
+ span(
204
+ {
205
+ fontFamily: "monospace",
206
+ marginRight: "8px",
207
+ color: hsl(280, 80, 90),
208
+ flexShrink: 0,
209
+ fontSize: "10px",
210
+ },
211
+ idx
212
+ ),
213
+ embedObject(x)
214
+ );
215
+ }) as any[])
132
216
  );
133
217
  }
134
218
  if (obj instanceof CalcitSet) {
135
- let ret: any[] = ["div", { style: "color: hsl(280, 80%, 60%)" }];
219
+ let ret: any[] = div({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
136
220
  let values = obj.values();
137
221
  for (let idx = 0; idx < values.length; idx++) {
138
222
  let x = values[idx];
139
- ret.push(["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(x)]);
223
+ ret.push(div({ marginLeft: "8px", display: "inline-block" }, embedObject(x)));
140
224
  }
141
225
  return ret;
142
226
  }
143
227
  if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
144
- let ret: any[] = ["div", { style: "color: hsl(280, 80%, 60%)" }];
228
+ let ret: any[] = table({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
145
229
  let pairs = obj.pairs();
146
230
  pairs.sort((pa, pb) => {
147
231
  let ka = pa[0].toString();
@@ -156,12 +240,30 @@ export let load_console_formatter_$x_ = () => {
156
240
  });
157
241
  for (let idx = 0; idx < pairs.length; idx++) {
158
242
  let [k, v] = pairs[idx];
159
- ret.push([
160
- "div",
161
- { style: "margin-left: 8px; display: flex;" },
162
- ["div", { style: "margin-left: 8px; flex-shrink: 0; display: inline-block;" }, embedObject(k)],
163
- ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(v)],
164
- ]);
243
+ ret.push(
244
+ tr(
245
+ {
246
+ marginLeft: "8px",
247
+ },
248
+ td({ marginLeft: "8px", verticalAlign: "top" }, embedObject(k)),
249
+ td({ marginLeft: "8px" }, embedObject(v))
250
+ )
251
+ );
252
+ }
253
+ return ret;
254
+ }
255
+ if (obj instanceof CalcitRecord) {
256
+ let ret: any[] = table({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
257
+ for (let idx = 0; idx < obj.fields.length; idx++) {
258
+ ret.push(
259
+ tr(
260
+ {
261
+ marginLeft: "8px",
262
+ },
263
+ td({ marginLeft: "8px", verticalAlign: "top" }, embedObject(obj.fields[idx])),
264
+ td({ marginLeft: "8px" }, embedObject(obj.values[idx]))
265
+ )
266
+ );
165
267
  }
166
268
  return ret;
167
269
  }
package/ts-src/js-tuple.mts CHANGED
@@ -62,7 +62,6 @@ export class CalcitTuple {
62
62
  content += toString(args[i], false, disableJsDataWarning);
63
63
  }
64
64
  if (this.klass instanceof CalcitRecord) {
65
- console.log("CLASS", this.klass);
66
65
  return `(%:: ${content} (:class ${this.klass.name.value}))`;
67
66
  } else {
68
67
  return `(:: ${content})`;