json-renderers 1.14.1 → 1.16.1
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.
- package/docs/aboutSelect.html +964 -0
- package/docs/aboutTable.html +12 -0
- package/docs/dist/min.js +1510 -1063
- package/docs/dist/v14/min.js +1063 -1063
- package/docs/dist/v15/min.js +1510 -0
- package/docs/index.html +283 -79
- package/docs/select.html +33 -11
- package/docs/table/cdn.html +634 -0
- package/docs/table/index.html +607 -0
- package/docs/table/windowKs.html +332 -0
- package/docs/table/windowKsV1.html +647 -0
- package/docs/table.html +34 -11
- package/package.json +1 -1
- package/src/index.js +2 -2
- package/src/v15/buildSpec/index.js +39 -0
- package/src/v15/common/deriveColumnsFromData.js +20 -0
- package/src/v15/guard.js +35 -0
- package/src/v15/index.js +70 -0
- package/src/v15/meta.js +6 -0
- package/src/v15/registerGlobal.js +14 -0
- package/src/v16/buildSpec/index.js +40 -0
- package/src/v16/common/deriveColumnsFromData.js +20 -0
- package/src/v16/guard.js +38 -0
- package/src/v16/index.js +110 -0
- package/src/v16/meta.js +6 -0
- package/src/v16/registerGlobal.js +27 -0
package/docs/table.html
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en" class="dark">
|
|
3
|
+
|
|
3
4
|
<head>
|
|
4
5
|
<meta charset="UTF-8" />
|
|
5
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
7
|
<title>json-renderers | Table Flow</title>
|
|
7
8
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
-
<link
|
|
10
|
+
<link
|
|
11
|
+
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap"
|
|
12
|
+
rel="stylesheet" />
|
|
10
13
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
11
14
|
<script>
|
|
12
15
|
tailwind.config = {
|
|
@@ -22,16 +25,29 @@
|
|
|
22
25
|
};
|
|
23
26
|
</script>
|
|
24
27
|
<style>
|
|
25
|
-
body {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
body {
|
|
29
|
+
font-family: 'Inter', sans-serif;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
pre,
|
|
33
|
+
code {
|
|
34
|
+
font-family: 'Fira Code', monospace;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.glass {
|
|
38
|
+
background: rgba(15, 23, 42, 0.8);
|
|
39
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
40
|
+
}
|
|
28
41
|
</style>
|
|
29
42
|
</head>
|
|
43
|
+
|
|
30
44
|
<body class="bg-slate-950 text-slate-100 min-h-screen">
|
|
31
45
|
<header class="border-b border-slate-800 bg-slate-900/80 backdrop-blur sticky top-0 z-50">
|
|
32
46
|
<div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
|
|
33
47
|
<div class="flex items-center gap-3">
|
|
34
|
-
<div
|
|
48
|
+
<div
|
|
49
|
+
class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-600 to-indigo-600 flex items-center justify-center font-bold text-lg">
|
|
50
|
+
📊</div>
|
|
35
51
|
<div>
|
|
36
52
|
<div class="text-base font-bold text-white">json-renderers</div>
|
|
37
53
|
<div class="text-xs text-slate-400">Table Flow Story</div>
|
|
@@ -39,15 +55,18 @@
|
|
|
39
55
|
</div>
|
|
40
56
|
<nav class="flex items-center gap-2 text-sm">
|
|
41
57
|
<a href="index.html" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200">Home</a>
|
|
42
|
-
<a href="table.html" class="px-3 py-1.5 rounded-lg bg-
|
|
43
|
-
<a href="
|
|
58
|
+
<a href="table/index.html" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200">About Table</a>
|
|
59
|
+
<a href="aboutSelect.html" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200">About Select</a>
|
|
60
|
+
<a href="table.html" class="px-3 py-1.5 rounded-lg bg-emerald-600 text-white font-semibold">Table Flow</a>
|
|
61
|
+
<a href="select.html" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200">Select Flow</a>
|
|
44
62
|
</nav>
|
|
45
63
|
</div>
|
|
46
64
|
</header>
|
|
47
65
|
|
|
48
66
|
<main class="max-w-7xl mx-auto px-4 py-10 space-y-8">
|
|
49
67
|
<section class="glass rounded-3xl p-8">
|
|
50
|
-
<div
|
|
68
|
+
<div
|
|
69
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-300 font-mono mb-6">
|
|
51
70
|
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
|
52
71
|
Table / JSON to DOM
|
|
53
72
|
</div>
|
|
@@ -56,7 +75,9 @@
|
|
|
56
75
|
A table is not built by the runtime directly.
|
|
57
76
|
</h1>
|
|
58
77
|
<p class="max-w-4xl mt-5 text-lg text-slate-300">
|
|
59
|
-
The runtime asks for a table blueprint, receives JSON, and then hands that JSON to <span
|
|
78
|
+
The runtime asks for a table blueprint, receives JSON, and then hands that JSON to <span
|
|
79
|
+
class="text-emerald-300 font-mono">@keshavsoft/json-to-tag</span> so the browser can create real HTML table
|
|
80
|
+
elements.
|
|
60
81
|
</p>
|
|
61
82
|
</section>
|
|
62
83
|
|
|
@@ -126,7 +147,8 @@ target.append(...nodeList);
|
|
|
126
147
|
|
|
127
148
|
<section class="glass rounded-3xl p-5">
|
|
128
149
|
<h2 class="text-2xl font-bold text-white mb-4">Live render</h2>
|
|
129
|
-
<div class="mb-4 text-sm text-slate-300">This is the final DOM that is mounted after the JSON spec is turned into
|
|
150
|
+
<div class="mb-4 text-sm text-slate-300">This is the final DOM that is mounted after the JSON spec is turned into
|
|
151
|
+
real browser nodes.</div>
|
|
130
152
|
<div id="table-container" class="overflow-x-auto rounded-2xl border border-slate-700"></div>
|
|
131
153
|
</section>
|
|
132
154
|
</main>
|
|
@@ -169,4 +191,5 @@ target.append(...nodeList);
|
|
|
169
191
|
document.getElementById('table-container').appendChild(table);
|
|
170
192
|
</script>
|
|
171
193
|
</body>
|
|
172
|
-
|
|
194
|
+
|
|
195
|
+
</html>
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from "./
|
|
2
|
-
export { default } from "./
|
|
1
|
+
export * from "./v16/index.js";
|
|
2
|
+
export { default } from "./v16/index.js";
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import jsonRenderBuild from "json-renderers-build";
|
|
2
|
+
import jsonToTag from "@keshavsoft/json-to-tag";
|
|
3
|
+
|
|
4
|
+
// --- Story of Table Render ---
|
|
5
|
+
const startFunc = ({
|
|
6
|
+
inTargetHtmlId,
|
|
7
|
+
inColumns, type,
|
|
8
|
+
inData, showLog
|
|
9
|
+
} = {}) => {
|
|
10
|
+
// debugger
|
|
11
|
+
const localTargetHtmlId = inTargetHtmlId;
|
|
12
|
+
const localData = inData ?? [];
|
|
13
|
+
const localColumns = inColumns;
|
|
14
|
+
|
|
15
|
+
if (showLog) console.log("buildSpec 1 :", localTargetHtmlId, localData.localColumns);
|
|
16
|
+
|
|
17
|
+
let specAsJsonToDom = jsonRenderBuild({
|
|
18
|
+
type,
|
|
19
|
+
targetHtmlId: localTargetHtmlId,
|
|
20
|
+
data: localData,
|
|
21
|
+
columns: localColumns
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
let jsonToSend = specAsJsonToDom;
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
// if (!("tagName" in specAsJsonToDom) && "children" in specAsJsonToDom) {
|
|
28
|
+
// jsonToSend = specAsJsonToDom.children;
|
|
29
|
+
// };
|
|
30
|
+
|
|
31
|
+
const content = jsonToTag(jsonToSend);
|
|
32
|
+
console.log("buildSpec 2 :", jsonToSend, content);
|
|
33
|
+
|
|
34
|
+
if (showLog) console.log("buildSpec 3 :", content);
|
|
35
|
+
|
|
36
|
+
return content;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export default startFunc;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const deriveColumnsFromData = ({ inData = [] } = {}) => {
|
|
2
|
+
const localData = inData;
|
|
3
|
+
|
|
4
|
+
if (!Array.isArray(localData) || localData.length === 0) {
|
|
5
|
+
return [];
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const firstRow = localData[0];
|
|
9
|
+
if (!firstRow || typeof firstRow !== "object") {
|
|
10
|
+
return [];
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return Object.keys(firstRow).map(key => ({
|
|
14
|
+
key,
|
|
15
|
+
label: key
|
|
16
|
+
}));
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { deriveColumnsFromData };
|
|
20
|
+
export default deriveColumnsFromData;
|
package/src/v15/guard.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
const gaurdFunc = ({ intype, indata, intargetHtmlId, incoumns, inshowLog }) => {
|
|
2
|
+
|
|
3
|
+
if (typeof intype !== "string" || intype.trim() === "") {
|
|
4
|
+
console.error("type must be a string");
|
|
5
|
+
throw new Error("type must be a string");
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
if (!Array.isArray(indata)) {
|
|
9
|
+
console.error("data must be an Array");
|
|
10
|
+
throw new Error("data must be an Array");
|
|
11
|
+
};
|
|
12
|
+
if (typeof intargetHtmlId !== "string" || !intargetHtmlId.trim()) {
|
|
13
|
+
console.error("targetHtmlId must be a non-empty string");
|
|
14
|
+
throw new TypeError("targetHtmlId must be a non-empty string");
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
if (!Array.isArray(incoumns)) {
|
|
18
|
+
console.error("columns must be an array");
|
|
19
|
+
throw new TypeError("columns must be an array");
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
if (typeof inshowLog !== "boolean") {
|
|
23
|
+
console.error("showLog must be a boolean");
|
|
24
|
+
throw new TypeError("showLog must be a boolean");
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
if (inshowLog !== true) {
|
|
28
|
+
console.error("showLog must be true");
|
|
29
|
+
throw new TypeError("showLog must be true");
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return true;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export default gaurdFunc;
|
package/src/v15/index.js
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import registerGlobal from "./registerGlobal.js";
|
|
2
|
+
import gaurdFunc from "./guard.js";
|
|
3
|
+
|
|
4
|
+
import buildSpec from "./buildSpec/index.js";
|
|
5
|
+
|
|
6
|
+
const render = ({
|
|
7
|
+
type = "table",
|
|
8
|
+
targetHtmlId,
|
|
9
|
+
data,
|
|
10
|
+
classToApply,
|
|
11
|
+
columns,
|
|
12
|
+
appendPosition,
|
|
13
|
+
showLog = false
|
|
14
|
+
} = {}) => {
|
|
15
|
+
const rawType = type;
|
|
16
|
+
|
|
17
|
+
const localTargetHtmlId = targetHtmlId;
|
|
18
|
+
const localData = data;
|
|
19
|
+
const localColumns = columns;
|
|
20
|
+
const localShowLog = showLog;
|
|
21
|
+
|
|
22
|
+
gaurdFunc({
|
|
23
|
+
intype: rawType,
|
|
24
|
+
indata: localData,
|
|
25
|
+
intargetHtmlId: localTargetHtmlId,
|
|
26
|
+
incoumns: localColumns,
|
|
27
|
+
inshowLog: localShowLog
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
if (localShowLog);
|
|
31
|
+
|
|
32
|
+
// Default to table renderer
|
|
33
|
+
const content = buildSpec({
|
|
34
|
+
inTargetHtmlId: localTargetHtmlId,
|
|
35
|
+
inColumns: localColumns, showLog,
|
|
36
|
+
inData: localData, type: rawType
|
|
37
|
+
});
|
|
38
|
+
if (showLog) console.log("showLog 2 :", content);
|
|
39
|
+
|
|
40
|
+
const container = document.getElementById(localTargetHtmlId);
|
|
41
|
+
|
|
42
|
+
if (showLog) console.log("showLog 3 :", container);
|
|
43
|
+
|
|
44
|
+
const isCollection = Array.isArray(content) ||
|
|
45
|
+
content instanceof NodeList ||
|
|
46
|
+
content instanceof HTMLCollection;
|
|
47
|
+
|
|
48
|
+
if (isCollection) {
|
|
49
|
+
if (appendPosition === "prepend") {
|
|
50
|
+
container.prepend(...content);
|
|
51
|
+
} else {
|
|
52
|
+
container.append(...content);
|
|
53
|
+
};
|
|
54
|
+
} else {
|
|
55
|
+
if (appendPosition === "prepend") {
|
|
56
|
+
container.prepend(content);
|
|
57
|
+
} else {
|
|
58
|
+
if (container) container.innerHTML = "";
|
|
59
|
+
container.append(content);
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
if (showLog) console.log("showLog 5 :", container);
|
|
64
|
+
|
|
65
|
+
return container;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
registerGlobal(render);
|
|
69
|
+
|
|
70
|
+
export default render;
|
package/src/v15/meta.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import meta from "./meta.js";
|
|
2
|
+
|
|
3
|
+
export const registerGlobal = (inFuncDefinition) => {
|
|
4
|
+
if (typeof globalThis === "undefined" || !inFuncDefinition) return;
|
|
5
|
+
|
|
6
|
+
globalThis.ks ??= {};
|
|
7
|
+
|
|
8
|
+
globalThis.ks.jsonRenderers ??= {
|
|
9
|
+
meta,
|
|
10
|
+
renderToDom: inFuncDefinition
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default registerGlobal;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import jsonRenderBuild from "json-renderers-build";
|
|
2
|
+
import jsonToTag from "@keshavsoft/json-to-tag";
|
|
3
|
+
|
|
4
|
+
// --- Story of Table Render ---
|
|
5
|
+
const startFunc = ({
|
|
6
|
+
inTargetHtmlId,
|
|
7
|
+
inColumns,
|
|
8
|
+
inType = "table",
|
|
9
|
+
inData,
|
|
10
|
+
inShowLog = false
|
|
11
|
+
} = {}) => {
|
|
12
|
+
const localTargetHtmlId = inTargetHtmlId;
|
|
13
|
+
const localData = inData ?? [];
|
|
14
|
+
const localColumns = inColumns;
|
|
15
|
+
const localType = inType;
|
|
16
|
+
const localShowLog = inShowLog;
|
|
17
|
+
|
|
18
|
+
if (localShowLog) console.log("buildSpec 1 :", localTargetHtmlId, localData, localColumns);
|
|
19
|
+
|
|
20
|
+
let specAsJsonToDom = jsonRenderBuild({
|
|
21
|
+
type: localType,
|
|
22
|
+
targetHtmlId: localTargetHtmlId,
|
|
23
|
+
data: localData,
|
|
24
|
+
columns: localColumns
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
let jsonToSend = specAsJsonToDom;
|
|
28
|
+
|
|
29
|
+
const content = jsonToTag(jsonToSend);
|
|
30
|
+
|
|
31
|
+
if (localShowLog) {
|
|
32
|
+
console.log("buildSpec 2 :", jsonToSend, content);
|
|
33
|
+
console.log("buildSpec 3 :", content);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return content;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export { startFunc };
|
|
40
|
+
export default startFunc;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const deriveColumnsFromData = ({ inData = [] } = {}) => {
|
|
2
|
+
const localData = inData;
|
|
3
|
+
|
|
4
|
+
if (!Array.isArray(localData) || localData.length === 0) {
|
|
5
|
+
return [];
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const firstRow = localData[0];
|
|
9
|
+
if (!firstRow || typeof firstRow !== "object") {
|
|
10
|
+
return [];
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return Object.keys(firstRow).map(key => ({
|
|
14
|
+
key,
|
|
15
|
+
label: key
|
|
16
|
+
}));
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { deriveColumnsFromData };
|
|
20
|
+
export default deriveColumnsFromData;
|
package/src/v16/guard.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
const guardFunc = ({ inConfig } = {}) => {
|
|
2
|
+
const localConfig = inConfig;
|
|
3
|
+
|
|
4
|
+
if (!localConfig || typeof localConfig !== "object") {
|
|
5
|
+
console.error("Config must be an object");
|
|
6
|
+
throw new TypeError("Config must be an object");
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
if (localConfig.type !== "table") {
|
|
10
|
+
console.error("type must be 'table'");
|
|
11
|
+
throw new Error("type must be 'table'");
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
if (!Array.isArray(localConfig.data)) {
|
|
15
|
+
console.error("data must be an Array");
|
|
16
|
+
throw new TypeError("data must be an Array");
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if (typeof localConfig.targetHtmlId !== "string" || !localConfig.targetHtmlId.trim()) {
|
|
20
|
+
console.error("targetHtmlId must be a non-empty string");
|
|
21
|
+
throw new TypeError("targetHtmlId must be a non-empty string");
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
if (!Array.isArray(localConfig.columns)) {
|
|
25
|
+
console.error("columns must be an array");
|
|
26
|
+
throw new TypeError("columns must be an array");
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
if (localConfig.showLog !== undefined && typeof localConfig.showLog !== "boolean") {
|
|
30
|
+
console.error("showLog must be a boolean");
|
|
31
|
+
throw new TypeError("showLog must be a boolean");
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return true;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { guardFunc };
|
|
38
|
+
export default guardFunc;
|
package/src/v16/index.js
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import registerGlobal from "./registerGlobal.js";
|
|
2
|
+
import guardFunc from "./guard.js";
|
|
3
|
+
import buildSpec from "./buildSpec/index.js";
|
|
4
|
+
|
|
5
|
+
// Pure function: builds and validates the JSON configuration without touching DOM
|
|
6
|
+
const getSpec = ({
|
|
7
|
+
type = "table",
|
|
8
|
+
targetHtmlId,
|
|
9
|
+
data,
|
|
10
|
+
columns,
|
|
11
|
+
classToApply,
|
|
12
|
+
appendPosition,
|
|
13
|
+
showLog = false
|
|
14
|
+
} = {}) => {
|
|
15
|
+
const localType = type;
|
|
16
|
+
const localTargetHtmlId = targetHtmlId;
|
|
17
|
+
const localData = data;
|
|
18
|
+
const localColumns = columns;
|
|
19
|
+
const localClassToApply = classToApply;
|
|
20
|
+
const localAppendPosition = appendPosition;
|
|
21
|
+
const localShowLog = showLog;
|
|
22
|
+
|
|
23
|
+
const specJson = {
|
|
24
|
+
type: localType,
|
|
25
|
+
targetHtmlId: localTargetHtmlId,
|
|
26
|
+
data: localData,
|
|
27
|
+
columns: localColumns,
|
|
28
|
+
classToApply: localClassToApply,
|
|
29
|
+
appendPosition: localAppendPosition,
|
|
30
|
+
showLog: localShowLog
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// Internal call using the in-convention
|
|
34
|
+
guardFunc({ inConfig: specJson });
|
|
35
|
+
|
|
36
|
+
return specJson;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
// Render function: Public API accepting clean single options object
|
|
40
|
+
const render = ({
|
|
41
|
+
type = "table",
|
|
42
|
+
targetHtmlId,
|
|
43
|
+
data,
|
|
44
|
+
columns,
|
|
45
|
+
classToApply,
|
|
46
|
+
appendPosition,
|
|
47
|
+
showLog = false
|
|
48
|
+
} = {}) => {
|
|
49
|
+
// 1. Get and validate the clean JSON specification
|
|
50
|
+
const specJson = getSpec({
|
|
51
|
+
type,
|
|
52
|
+
targetHtmlId,
|
|
53
|
+
data,
|
|
54
|
+
columns,
|
|
55
|
+
classToApply,
|
|
56
|
+
appendPosition,
|
|
57
|
+
showLog
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
if (specJson.showLog) console.log("showLog 1 (spec):", specJson);
|
|
61
|
+
|
|
62
|
+
// 2. Build DOM content via buildSpec
|
|
63
|
+
const content = buildSpec({
|
|
64
|
+
inTargetHtmlId: specJson.targetHtmlId,
|
|
65
|
+
inColumns: specJson.columns,
|
|
66
|
+
inData: specJson.data,
|
|
67
|
+
inType: specJson.type,
|
|
68
|
+
inShowLog: specJson.showLog
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
if (specJson.showLog) console.log("showLog 2 (content):", content);
|
|
72
|
+
|
|
73
|
+
const container = document.getElementById(specJson.targetHtmlId);
|
|
74
|
+
if (specJson.showLog) console.log("showLog 3 (container):", container);
|
|
75
|
+
|
|
76
|
+
if (!container) return null;
|
|
77
|
+
|
|
78
|
+
const isCollection = Array.isArray(content) ||
|
|
79
|
+
content instanceof NodeList ||
|
|
80
|
+
content instanceof HTMLCollection;
|
|
81
|
+
|
|
82
|
+
if (isCollection) {
|
|
83
|
+
if (specJson.appendPosition === "prepend") {
|
|
84
|
+
container.prepend(...content);
|
|
85
|
+
} else {
|
|
86
|
+
container.append(...content);
|
|
87
|
+
}
|
|
88
|
+
} else {
|
|
89
|
+
if (specJson.appendPosition === "prepend") {
|
|
90
|
+
container.prepend(content);
|
|
91
|
+
} else {
|
|
92
|
+
container.innerHTML = "";
|
|
93
|
+
container.append(content);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
if (specJson.showLog) console.log("showLog 4 (mounted):", container);
|
|
98
|
+
|
|
99
|
+
return container;
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
// Register on global window.ks.jsonRenderers
|
|
103
|
+
registerGlobal({ render, getSpec });
|
|
104
|
+
|
|
105
|
+
// Export two ways:
|
|
106
|
+
// 1. As an object (named exports)
|
|
107
|
+
export { render, getSpec, guardFunc, buildSpec };
|
|
108
|
+
|
|
109
|
+
// 2. As a single function (default export)
|
|
110
|
+
export default render;
|
package/src/v16/meta.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import meta from "./meta.js";
|
|
2
|
+
|
|
3
|
+
export const registerGlobal = (inDefinition) => {
|
|
4
|
+
const localDefinition = inDefinition;
|
|
5
|
+
|
|
6
|
+
if (typeof globalThis === "undefined" || !localDefinition) return;
|
|
7
|
+
|
|
8
|
+
globalThis.ks ??= {};
|
|
9
|
+
|
|
10
|
+
const renderFunc = typeof localDefinition === "function"
|
|
11
|
+
? localDefinition
|
|
12
|
+
: localDefinition.render;
|
|
13
|
+
|
|
14
|
+
const getSpecFunc = typeof localDefinition === "object"
|
|
15
|
+
? localDefinition.getSpec
|
|
16
|
+
: undefined;
|
|
17
|
+
|
|
18
|
+
globalThis.ks.jsonRenderers = {
|
|
19
|
+
meta,
|
|
20
|
+
renderToDom: renderFunc,
|
|
21
|
+
render: renderFunc,
|
|
22
|
+
...(getSpecFunc ? { getSpec: getSpecFunc } : {}),
|
|
23
|
+
...(typeof localDefinition === "object" ? localDefinition : {})
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export default registerGlobal;
|