@sealcode/jdd-editor 0.1.6 → 0.1.7
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/.nyc_output/29e7bb87-9f10-462e-84d8-ec620cfa9e6b.json +1 -0
- package/.nyc_output/7d7104e8-f179-427b-b4bd-30f78397e4f1.json +1 -0
- package/.nyc_output/9bfa248d-4f8e-4d29-9c47-d1a3961c5254.json +1 -0
- package/.nyc_output/processinfo/29e7bb87-9f10-462e-84d8-ec620cfa9e6b.json +1 -0
- package/.nyc_output/processinfo/7d7104e8-f179-427b-b4bd-30f78397e4f1.json +1 -0
- package/.nyc_output/processinfo/9bfa248d-4f8e-4d29-9c47-d1a3961c5254.json +1 -0
- package/.nyc_output/processinfo/index.json +1 -0
- package/.xunit +2 -0
- package/assets/styles/components.jdd-page.css +3 -2
- package/coverage/clover.xml +846 -0
- package/lib/src/component-preview-actions.js +439 -0
- package/lib/src/component-preview-actions.js.map +7 -0
- package/lib/src/components.sreact.js +93 -0
- package/lib/src/components.sreact.js.map +7 -0
- package/{dist/src → lib/src/controllers}/autogrow-textarea.stimulus.js.map +1 -1
- package/{dist/src → lib/src/controllers}/component-debugger.stimulus.js +3 -0
- package/lib/src/controllers/component-debugger.stimulus.js.map +7 -0
- package/{dist/src → lib/src/controllers}/exportable-textarea.stimulus.js.map +1 -1
- package/{dist/src → lib/src/controllers}/input-image-preview.stimulus.js.map +1 -1
- package/{dist/src → lib/src/controllers}/jdd-table-paste.stimulus.js.map +1 -1
- package/{dist/src → lib/src/controllers}/json-editor.stimulus.js.map +1 -1
- package/{dist/src → lib/src/controllers}/markdown-textarea.stimulus.js.map +1 -1
- package/lib/src/controllers/refresh-on-ts-changes.stimulus.js +90 -0
- package/lib/src/controllers/refresh-on-ts-changes.stimulus.js.map +7 -0
- package/lib/src/controllers/refresh-styles.stimulus.js +67 -0
- package/lib/src/controllers/refresh-styles.stimulus.js.map +7 -0
- package/{dist/src → lib/src/controllers}/submit-on-input.stimulus.js.map +1 -1
- package/{dist/src → lib/src/controllers}/toast.stimulus.js.map +1 -1
- package/lib/src/edit-jdd-field.js +94 -0
- package/lib/src/edit-jdd-field.js.map +7 -0
- package/lib/src/index.js +3 -0
- package/lib/src/index.js.map +7 -0
- package/lib/src/inputs/component-input-enum.js +30 -0
- package/lib/src/inputs/component-input-enum.js.map +7 -0
- package/lib/src/inputs/component-input-image.js +63 -0
- package/lib/src/inputs/component-input-image.js.map +7 -0
- package/lib/src/inputs/component-input-list.js +74 -0
- package/lib/src/inputs/component-input-list.js.map +7 -0
- package/lib/src/inputs/component-input-single-reference.js +31 -0
- package/lib/src/inputs/component-input-single-reference.js.map +7 -0
- package/lib/src/inputs/component-input-structured.js +36 -0
- package/lib/src/inputs/component-input-structured.js.map +7 -0
- package/lib/src/inputs/component-input-table.js +228 -0
- package/lib/src/inputs/component-input-table.js.map +7 -0
- package/lib/src/inputs/component-input.js +164 -0
- package/lib/src/inputs/component-input.js.map +7 -0
- package/lib/src/inputs/print-arg-path.js +7 -0
- package/lib/src/inputs/print-arg-path.js.map +7 -0
- package/lib/src/jdd-creator.js +131 -0
- package/lib/src/jdd-creator.js.map +7 -0
- package/lib/src/jdd-page.js +339 -0
- package/lib/src/jdd-page.js.map +7 -0
- package/lib/src/test.test.js +5 -0
- package/lib/src/test.test.js.map +7 -0
- package/package.json +1 -1
- package/dist/src/component-debugger.stimulus.js.map +0 -7
- package/lib/component-preview-actions.js +0 -286
- package/lib/component-preview-actions.js.map +0 -1
- package/lib/components.sreact.js +0 -102
- package/lib/components.sreact.js.map +0 -1
- package/lib/controllers/autogrow-textarea.stimulus.js +0 -15
- package/lib/controllers/autogrow-textarea.stimulus.js.map +0 -1
- package/lib/controllers/component-debugger.stimulus.js +0 -188
- package/lib/controllers/component-debugger.stimulus.js.map +0 -1
- package/lib/controllers/exportable-textarea.stimulus.js +0 -79
- package/lib/controllers/exportable-textarea.stimulus.js.map +0 -1
- package/lib/controllers/input-image-preview.stimulus.js +0 -28
- package/lib/controllers/input-image-preview.stimulus.js.map +0 -1
- package/lib/controllers/jdd-table-paste.stimulus.js +0 -84
- package/lib/controllers/jdd-table-paste.stimulus.js.map +0 -1
- package/lib/controllers/json-editor.stimulus.js +0 -134
- package/lib/controllers/json-editor.stimulus.js.map +0 -1
- package/lib/controllers/markdown-textarea.stimulus.js +0 -186
- package/lib/controllers/markdown-textarea.stimulus.js.map +0 -1
- package/lib/controllers/refresh-on-ts-changes.stimulus.js +0 -123
- package/lib/controllers/refresh-on-ts-changes.stimulus.js.map +0 -1
- package/lib/controllers/refresh-styles.stimulus.js +0 -66
- package/lib/controllers/refresh-styles.stimulus.js.map +0 -1
- package/lib/controllers/submit-on-input.stimulus.js +0 -48
- package/lib/controllers/submit-on-input.stimulus.js.map +0 -1
- package/lib/controllers/toast.stimulus.js +0 -16
- package/lib/controllers/toast.stimulus.js.map +0 -1
- package/lib/edit-jdd-field.js +0 -102
- package/lib/edit-jdd-field.js.map +0 -1
- package/lib/index.js +0 -19
- package/lib/index.js.map +0 -1
- package/lib/inputs/component-input-enum.js +0 -25
- package/lib/inputs/component-input-enum.js.map +0 -1
- package/lib/inputs/component-input-image.js +0 -47
- package/lib/inputs/component-input-image.js.map +0 -1
- package/lib/inputs/component-input-list.js +0 -61
- package/lib/inputs/component-input-list.js.map +0 -1
- package/lib/inputs/component-input-single-reference.js +0 -36
- package/lib/inputs/component-input-single-reference.js.map +0 -1
- package/lib/inputs/component-input-structured.js +0 -42
- package/lib/inputs/component-input-structured.js.map +0 -1
- package/lib/inputs/component-input-table.js +0 -184
- package/lib/inputs/component-input-table.js.map +0 -1
- package/lib/inputs/component-input.js +0 -133
- package/lib/inputs/component-input.js.map +0 -1
- package/lib/inputs/print-arg-path.js +0 -7
- package/lib/inputs/print-arg-path.js.map +0 -1
- package/lib/jdd-creator.js +0 -113
- package/lib/jdd-creator.js.map +0 -1
- package/lib/jdd-page.js +0 -310
- package/lib/jdd-page.js.map +0 -1
- /package/{dist/src → lib/src/controllers}/autogrow-textarea.stimulus.js +0 -0
- /package/{dist/src → lib/src/controllers}/exportable-textarea.stimulus.js +0 -0
- /package/{dist/src → lib/src/controllers}/input-image-preview.stimulus.js +0 -0
- /package/{dist/src → lib/src/controllers}/jdd-table-paste.stimulus.js +0 -0
- /package/{dist/src → lib/src/controllers}/json-editor.stimulus.js +0 -0
- /package/{dist/src → lib/src/controllers}/markdown-textarea.stimulus.js +0 -0
- /package/{dist/src → lib/src/controllers}/submit-on-input.stimulus.js +0 -0
- /package/{dist/src → lib/src/controllers}/toast.stimulus.js +0 -0
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { ComponentPreviewActions } from "./component-preview-actions.js";
|
|
2
|
+
import JDDPage from "./jdd-page.js";
|
|
3
|
+
import { htmlEscape } from "escape-goat";
|
|
4
|
+
import { tempstream } from "tempstream";
|
|
5
|
+
class JDDCreator extends JDDPage {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.actions = ComponentPreviewActions;
|
|
9
|
+
}
|
|
10
|
+
getAllowedComponents() {
|
|
11
|
+
return [];
|
|
12
|
+
}
|
|
13
|
+
getRegistryComponents() {
|
|
14
|
+
const all_components = super.getRegistryComponents();
|
|
15
|
+
const allowed_components = this.getAllowedComponents();
|
|
16
|
+
if (allowed_components.length > 0) {
|
|
17
|
+
return Object.fromEntries(
|
|
18
|
+
Object.entries(all_components).filter(
|
|
19
|
+
([name]) => allowed_components.includes(name)
|
|
20
|
+
)
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
return all_components;
|
|
24
|
+
}
|
|
25
|
+
renderParameterButtons(state) {
|
|
26
|
+
{
|
|
27
|
+
}
|
|
28
|
+
return `<div class="jdd-editor__toolbar">
|
|
29
|
+
<input type="submit" value="Preview" />
|
|
30
|
+
<select name="component">
|
|
31
|
+
${Object.keys(this.getRegistryComponents()).map((cmp) => `<option value="${cmp}">${cmp}</option>`).join("")}
|
|
32
|
+
</select>
|
|
33
|
+
${this.makeActionButton(state, {
|
|
34
|
+
action: "add_component",
|
|
35
|
+
label: "Add component"
|
|
36
|
+
})}
|
|
37
|
+
</div>`;
|
|
38
|
+
}
|
|
39
|
+
renderComponentBlock(ctx, state, component_data, component_index) {
|
|
40
|
+
const component = this.getRegistryComponents()[component_data.component_name];
|
|
41
|
+
const checkbox_id = `component_${component_index}_open`;
|
|
42
|
+
return tempstream`<div
|
|
43
|
+
class="jdd-editor__component-block jdd-editor__component-block--number-${component_index}"
|
|
44
|
+
id="${`jdd-editor__component-block--${component_data.component_name}-${component_index}`}"
|
|
45
|
+
data-component-debugger-target="componentBlock"
|
|
46
|
+
data-component-index="${component_index.toString()}"
|
|
47
|
+
>
|
|
48
|
+
<summary class="jdd-editor__component-block__top_bar">
|
|
49
|
+
${this.makeActionButton(
|
|
50
|
+
state,
|
|
51
|
+
{ action: "remove_component", label: "\u274C" },
|
|
52
|
+
component_index
|
|
53
|
+
)}
|
|
54
|
+
${this.makeActionButton(
|
|
55
|
+
state,
|
|
56
|
+
{
|
|
57
|
+
action: "move_component_up",
|
|
58
|
+
label: "Move this row up",
|
|
59
|
+
content: `<img
|
|
60
|
+
width="20"
|
|
61
|
+
height="20"
|
|
62
|
+
src="${this.makeAssetURL(
|
|
63
|
+
"icons/table-move-row-up.svg"
|
|
64
|
+
)}"
|
|
65
|
+
/>`
|
|
66
|
+
},
|
|
67
|
+
component_index
|
|
68
|
+
)}
|
|
69
|
+
${this.makeActionButton(
|
|
70
|
+
state,
|
|
71
|
+
{
|
|
72
|
+
action: "move_component_down",
|
|
73
|
+
label: "Move this row down",
|
|
74
|
+
content: `<img
|
|
75
|
+
width="20"
|
|
76
|
+
height="20"
|
|
77
|
+
src="${this.makeAssetURL(
|
|
78
|
+
"icons/table-move-row-down.svg"
|
|
79
|
+
)}"
|
|
80
|
+
/>`
|
|
81
|
+
},
|
|
82
|
+
component_index
|
|
83
|
+
)}
|
|
84
|
+
<span class="jdd-editor__component-block__title">
|
|
85
|
+
<div class="jdd-editor__component-block__title__main">
|
|
86
|
+
${htmlEscape(
|
|
87
|
+
(component == null ? void 0 : component.getTitle(
|
|
88
|
+
this.makeJDDContext(ctx),
|
|
89
|
+
component_data.args
|
|
90
|
+
)) || ""
|
|
91
|
+
)}
|
|
92
|
+
</div>
|
|
93
|
+
<div class="jdd-editor__component-block__title__secondary">
|
|
94
|
+
${component_data.component_name}
|
|
95
|
+
</div>
|
|
96
|
+
</span>
|
|
97
|
+
<label
|
|
98
|
+
class="component-block__handle"
|
|
99
|
+
for="${checkbox_id}"
|
|
100
|
+
style="flex-grow: 1"
|
|
101
|
+
data-action="click->component-debugger#labelClicked"
|
|
102
|
+
>
|
|
103
|
+
<span class="jdd-editor__component-block__chevron">
|
|
104
|
+
${" "} >${" "}
|
|
105
|
+
</span>
|
|
106
|
+
</label>
|
|
107
|
+
</summary>
|
|
108
|
+
<input
|
|
109
|
+
type="checkbox"
|
|
110
|
+
class="component-collapse-toggle"
|
|
111
|
+
name="${`$[components][${component_index}][open]`}"
|
|
112
|
+
data-turbo-permanent
|
|
113
|
+
id="${checkbox_id}"
|
|
114
|
+
style="display:none"
|
|
115
|
+
data-component-debugger-target="checkbox"
|
|
116
|
+
/>
|
|
117
|
+
<div class="jdd-editor__component-block__inner">
|
|
118
|
+
${super.renderComponentBlock(
|
|
119
|
+
ctx,
|
|
120
|
+
state,
|
|
121
|
+
component_data,
|
|
122
|
+
component_index
|
|
123
|
+
)}
|
|
124
|
+
</div>
|
|
125
|
+
</div>`;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
export {
|
|
129
|
+
JDDCreator as default
|
|
130
|
+
};
|
|
131
|
+
//# sourceMappingURL=jdd-creator.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/jdd-creator.ts"],
|
|
4
|
+
"sourcesContent": ["import type { Context } from \"koa\";\nimport { ComponentPreviewActions } from \"./component-preview-actions.js\";\nimport type { JDDPageState } from \"./jdd-page.js\";\nimport JDDPage from \"./jdd-page.js\";\nimport { htmlEscape } from \"escape-goat\";\nimport { tempstream } from \"tempstream\";\n\nexport default abstract class JDDCreator extends JDDPage {\n\tactions = ComponentPreviewActions;\n\n\t/**\n\t * This method returns list of components allowed in JDD Editor instance.\n\t * If list is empty it will allow all of the components in registry,\n\t * if you overide this function you can decide on what components should\n\t * available.\n\t */\n\tgetAllowedComponents(): string[] {\n\t\treturn [];\n\t}\n\n\tgetRegistryComponents() {\n\t\tconst all_components = super.getRegistryComponents();\n\t\tconst allowed_components = this.getAllowedComponents();\n\n\t\tif (allowed_components.length > 0) {\n\t\t\treturn Object.fromEntries(\n\t\t\t\tObject.entries(all_components).filter(([name]) =>\n\t\t\t\t\tallowed_components.includes(name)\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\treturn all_components;\n\t}\n\n\trenderParameterButtons(state: JDDPageState) {\n\t\t{\n\t\t\t/*The below button has to be here in order for it to be the default behavior */\n\t\t}\n\t\treturn `<div class=\"jdd-editor__toolbar\">\n\t\t\t\t<input type=\"submit\" value=\"Preview\" />\n\t\t\t\t<select name=\"component\">\n\t\t\t\t\t${Object.keys(this.getRegistryComponents())\n\t\t\t\t\t\t.map((cmp) => `<option value=\"${cmp}\">${cmp}</option>`)\n\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t</select>\n\t\t\t\t${this.makeActionButton(state, {\n\t\t\t\t\taction: \"add_component\",\n\t\t\t\t\tlabel: \"Add component\",\n\t\t\t\t})}\n\t\t\t</div>`;\n\t}\n\n\trenderComponentBlock(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tcomponent_data: {\n\t\t\tcomponent_name: string;\n\t\t\targs: Record<string, unknown>;\n\t\t},\n\t\tcomponent_index: number\n\t) {\n\t\tconst component =\n\t\t\tthis.getRegistryComponents()[component_data.component_name];\n\t\tconst checkbox_id = `component_${component_index}_open`;\n\t\treturn tempstream/* HTML */ `<div\n\t\t\tclass=\"jdd-editor__component-block jdd-editor__component-block--number-${component_index}\"\n\t\t\tid=\"${`jdd-editor__component-block--${component_data.component_name}-${component_index}`}\"\n\t\t\tdata-component-debugger-target=\"componentBlock\"\n\t\t\tdata-component-index=\"${component_index.toString()}\"\n\t\t>\n\t\t\t<summary class=\"jdd-editor__component-block__top_bar\">\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{ action: \"remove_component\", label: \"\u274C\" },\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{\n\t\t\t\t\t\taction: \"move_component_up\",\n\t\t\t\t\t\tlabel: \"Move this row up\",\n\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tsrc=\"${this.makeAssetURL(\n\t\t\t\t\t\t\t\t\"icons/table-move-row-up.svg\"\n\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t/>`,\n\t\t\t\t\t},\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{\n\t\t\t\t\t\taction: \"move_component_down\",\n\t\t\t\t\t\tlabel: \"Move this row down\",\n\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tsrc=\"${this.makeAssetURL(\n\t\t\t\t\t\t\t\t\"icons/table-move-row-down.svg\"\n\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t/>`,\n\t\t\t\t\t},\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t<span class=\"jdd-editor__component-block__title\">\n\t\t\t\t\t<div class=\"jdd-editor__component-block__title__main\">\n\t\t\t\t\t\t${htmlEscape(\n\t\t\t\t\t\t\tcomponent?.getTitle(\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t\t\tcomponent_data.args\n\t\t\t\t\t\t\t) || \"\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"jdd-editor__component-block__title__secondary\">\n\t\t\t\t\t\t${component_data.component_name}\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t\t<label\n\t\t\t\t\tclass=\"component-block__handle\"\n\t\t\t\t\tfor=\"${checkbox_id}\"\n\t\t\t\t\tstyle=\"flex-grow: 1\"\n\t\t\t\t\tdata-action=\"click->component-debugger#labelClicked\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"jdd-editor__component-block__chevron\">\n\t\t\t\t\t\t${\" \"} >${\" \"}\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t</summary>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"component-collapse-toggle\"\n\t\t\t\tname=\"${`$[components][${component_index}][open]`}\"\n\t\t\t\tdata-turbo-permanent\n\t\t\t\tid=\"${checkbox_id}\"\n\t\t\t\tstyle=\"display:none\"\n\t\t\t\tdata-component-debugger-target=\"checkbox\"\n\t\t\t/>\n\t\t\t<div class=\"jdd-editor__component-block__inner\">\n\t\t\t\t${super.renderComponentBlock(\n\t\t\t\t\tctx,\n\t\t\t\t\tstate,\n\t\t\t\t\tcomponent_data,\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,+BAA+B;AAExC,OAAO,aAAa;AACpB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAE3B,MAAO,mBAA0C,QAAQ;AAAA,EAAzD;AAAA;AACC,mBAAU;AAAA;AAAA,EAQV,uBAAiC;AAChC,WAAO,CAAC;AAAA,EACT;AAAA,EAEA,wBAAwB;AACvB,UAAM,iBAAiB,MAAM,sBAAsB;AACnD,UAAM,qBAAqB,KAAK,qBAAqB;AAErD,QAAI,mBAAmB,SAAS,GAAG;AAClC,aAAO,OAAO;AAAA,QACb,OAAO,QAAQ,cAAc,EAAE;AAAA,UAAO,CAAC,CAAC,IAAI,MAC3C,mBAAmB,SAAS,IAAI;AAAA,QACjC;AAAA,MACD;AAAA,IACD;AAEA,WAAO;AAAA,EACR;AAAA,EAEA,uBAAuB,OAAqB;AAC3C;AAAA,IAEA;AACA,WAAO;AAAA;AAAA;AAAA,OAGF,OAAO,KAAK,KAAK,sBAAsB,CAAC,EACxC,IAAI,CAAC,QAAQ,kBAAkB,QAAQ,cAAc,EACrD,KAAK,EAAE;AAAA;AAAA,MAER,KAAK,iBAAiB,OAAO;AAAA,MAC9B,QAAQ;AAAA,MACR,OAAO;AAAA,IACR,CAAC;AAAA;AAAA,EAEJ;AAAA,EAEA,qBACC,KACA,OACA,gBAIA,iBACC;AACD,UAAM,YACL,KAAK,sBAAsB,EAAE,eAAe;AAC7C,UAAM,cAAc,aAAa;AACjC,WAAO;AAAA,4EACmE;AAAA,SACnE,gCAAgC,eAAe,kBAAkB;AAAA;AAAA,2BAE/C,gBAAgB,SAAS;AAAA;AAAA;AAAA,MAG9C,KAAK;AAAA,MACN;AAAA,MACA,EAAE,QAAQ,oBAAoB,OAAO,SAAI;AAAA,MACzC;AAAA,IACD;AAAA,MACE,KAAK;AAAA,MACN;AAAA,MACA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAoB;AAAA;AAAA;AAAA,cAGZ,KAAK;AAAA,UACX;AAAA,QACD;AAAA;AAAA,MAEF;AAAA,MACA;AAAA,IACD;AAAA,MACE,KAAK;AAAA,MACN;AAAA,MACA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAoB;AAAA;AAAA;AAAA,cAGZ,KAAK;AAAA,UACX;AAAA,QACD;AAAA;AAAA,MAEF;AAAA,MACA;AAAA,IACD;AAAA;AAAA;AAAA,QAGI;AAAA,OACD,uCAAW;AAAA,QACV,KAAK,eAAe,GAAG;AAAA,QACvB,eAAe;AAAA,YACX;AAAA,IACN;AAAA;AAAA;AAAA,QAGE,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX;AAAA;AAAA;AAAA;AAAA;AAAA,QAKJ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOP,iBAAiB;AAAA;AAAA,UAEnB;AAAA;AAAA;AAAA;AAAA;AAAA,MAKJ,MAAM;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA;AAAA;AAAA,EAGH;AACD;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
import { documentContainerFromParsed } from "@sealcode/jdd";
|
|
2
|
+
import { JDD } from "@sealcode/jdd";
|
|
3
|
+
import { StatefulPage } from "@sealcode/sealgen";
|
|
4
|
+
import { hasFieldOfType, hasShape, predicates } from "@sealcode/ts-predicates";
|
|
5
|
+
import { tempstream } from "tempstream";
|
|
6
|
+
import { ComponentInput } from "./inputs/component-input.js";
|
|
7
|
+
import { ComponentPreviewActions } from "./component-preview-actions.js";
|
|
8
|
+
const actionName = "Components";
|
|
9
|
+
class JDDPage extends StatefulPage {
|
|
10
|
+
constructor(args) {
|
|
11
|
+
super();
|
|
12
|
+
this.actions = ComponentPreviewActions;
|
|
13
|
+
this.previewSizes = ["320", "600", "800", "1024", "1300", "1920"];
|
|
14
|
+
this.classes = [];
|
|
15
|
+
this.registry = args.registry;
|
|
16
|
+
this.makeJDDContext = args.makeJDDContext;
|
|
17
|
+
this.defaultHead = args.defaultHead;
|
|
18
|
+
this.html = args.html;
|
|
19
|
+
this.makeAssetURL = args.makeAssetURL || ((str) => `/dist/jdd-page/${str.startsWith("/") ? str.slice(1) : str}`);
|
|
20
|
+
}
|
|
21
|
+
getRegistryComponents() {
|
|
22
|
+
return this.registry.getAll();
|
|
23
|
+
}
|
|
24
|
+
async getInitialState(ctx) {
|
|
25
|
+
const all_components = Object.entries(this.getRegistryComponents());
|
|
26
|
+
const first_component = all_components[0];
|
|
27
|
+
if (!first_component) {
|
|
28
|
+
throw new Error("No defined components!");
|
|
29
|
+
}
|
|
30
|
+
const [component_name, component] = first_component;
|
|
31
|
+
const initial_state = {
|
|
32
|
+
components: [
|
|
33
|
+
{
|
|
34
|
+
component_name,
|
|
35
|
+
args: await component.getExampleValues(
|
|
36
|
+
this.makeJDDContext(ctx)
|
|
37
|
+
)
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
};
|
|
41
|
+
return initial_state;
|
|
42
|
+
}
|
|
43
|
+
wrapInLayout(ctx, content, state) {
|
|
44
|
+
const jdd = new JDD(
|
|
45
|
+
this.registry,
|
|
46
|
+
this.makeJDDContext(ctx),
|
|
47
|
+
documentContainerFromParsed(state.components)
|
|
48
|
+
);
|
|
49
|
+
return this.html({
|
|
50
|
+
ctx,
|
|
51
|
+
title: "Components",
|
|
52
|
+
body: content,
|
|
53
|
+
description: "",
|
|
54
|
+
css_clumps: ["jdd-page", ...jdd.getAllCSSClumps()],
|
|
55
|
+
htmlOptions: {
|
|
56
|
+
morphing: true,
|
|
57
|
+
preserveScroll: true,
|
|
58
|
+
autoRefreshCSS: false,
|
|
59
|
+
navbar: () => ``,
|
|
60
|
+
bodyClasses: ["jdd-editor"],
|
|
61
|
+
showBottomNavbar: false,
|
|
62
|
+
showBanner: false,
|
|
63
|
+
showFooter: false,
|
|
64
|
+
loadHamburgerMenu: false,
|
|
65
|
+
loadSearchModal: false
|
|
66
|
+
},
|
|
67
|
+
makeHead: (...args) => tempstream`${this.defaultHead(...args)}
|
|
68
|
+
<link
|
|
69
|
+
href="/dist/jdd-page.entrypoint.css"
|
|
70
|
+
rel="stylesheet"
|
|
71
|
+
type="text/css"
|
|
72
|
+
/>
|
|
73
|
+
${jdd.renderEarlyAssets()}`
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
async preprocessOverrides(_ctx, state, overrides) {
|
|
77
|
+
const jdd_context = this.makeJDDContext(_ctx);
|
|
78
|
+
if (!hasFieldOfType(
|
|
79
|
+
"components",
|
|
80
|
+
overrides,
|
|
81
|
+
predicates.array(
|
|
82
|
+
predicates.shape({
|
|
83
|
+
args: predicates.object
|
|
84
|
+
})
|
|
85
|
+
)
|
|
86
|
+
)) {
|
|
87
|
+
return {};
|
|
88
|
+
}
|
|
89
|
+
for (const [component_index, { component_name }] of Object.entries(
|
|
90
|
+
state.components
|
|
91
|
+
)) {
|
|
92
|
+
const component = this.registry.get(component_name);
|
|
93
|
+
if (!component) {
|
|
94
|
+
throw new Error(`Unknown component: ${component_name}`);
|
|
95
|
+
}
|
|
96
|
+
const overrides_for_component = overrides.components[parseInt(component_index)] || { args: {} };
|
|
97
|
+
const promises = Object.entries(component.getArguments()).map(
|
|
98
|
+
async ([arg_name, arg]) => {
|
|
99
|
+
const value = overrides_for_component.args[arg_name];
|
|
100
|
+
if (value) {
|
|
101
|
+
const new_value = await arg.receivedToParsed(
|
|
102
|
+
jdd_context,
|
|
103
|
+
value
|
|
104
|
+
);
|
|
105
|
+
overrides_for_component.args[arg_name] = new_value;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
await Promise.all(promises);
|
|
110
|
+
}
|
|
111
|
+
return overrides;
|
|
112
|
+
}
|
|
113
|
+
renderComponentArgs(ctx, state, component, args, index) {
|
|
114
|
+
const jdd_context = this.makeJDDContext(ctx);
|
|
115
|
+
return tempstream`<div
|
|
116
|
+
class="component-preview-parameters"
|
|
117
|
+
id="${`component-preview-parameters--${index}`}"
|
|
118
|
+
>
|
|
119
|
+
${Object.entries(component.getArguments()).map(
|
|
120
|
+
async ([arg_name, arg]) => ComponentInput({
|
|
121
|
+
state,
|
|
122
|
+
arg_path: [
|
|
123
|
+
"components",
|
|
124
|
+
index.toString(),
|
|
125
|
+
"args",
|
|
126
|
+
arg_name
|
|
127
|
+
],
|
|
128
|
+
ctx,
|
|
129
|
+
arg,
|
|
130
|
+
value: args[arg_name] === void 0 ? arg.getExampleValue(jdd_context) : args[arg_name],
|
|
131
|
+
page: this,
|
|
132
|
+
makeJDDContext: this.makeJDDContext,
|
|
133
|
+
makeAssetURL: this.makeAssetURL
|
|
134
|
+
})
|
|
135
|
+
)}
|
|
136
|
+
</div>`;
|
|
137
|
+
}
|
|
138
|
+
renderComponentBlock(ctx, state, {
|
|
139
|
+
component_name,
|
|
140
|
+
args: component_args
|
|
141
|
+
}, component_index) {
|
|
142
|
+
const component = this.registry.get(component_name);
|
|
143
|
+
if (!component) {
|
|
144
|
+
return null;
|
|
145
|
+
}
|
|
146
|
+
return this.renderComponentArgs(
|
|
147
|
+
ctx,
|
|
148
|
+
state,
|
|
149
|
+
component,
|
|
150
|
+
component_args,
|
|
151
|
+
component_index
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
async serializeState(ctx, state, pretty = false) {
|
|
155
|
+
console.time("serializing state");
|
|
156
|
+
const serialized_components = await Promise.all(
|
|
157
|
+
state.components.map(async ({ component_name, args }) => {
|
|
158
|
+
const component = this.registry.get(component_name);
|
|
159
|
+
const single_result = {
|
|
160
|
+
component_name,
|
|
161
|
+
args: component ? await component.convertParsedToStorage(
|
|
162
|
+
this.makeJDDContext(ctx),
|
|
163
|
+
args
|
|
164
|
+
) : {}
|
|
165
|
+
};
|
|
166
|
+
return single_result;
|
|
167
|
+
})
|
|
168
|
+
);
|
|
169
|
+
const serialized_state = JSON.stringify(
|
|
170
|
+
{ components: serialized_components },
|
|
171
|
+
null,
|
|
172
|
+
pretty ? 4 : ""
|
|
173
|
+
);
|
|
174
|
+
console.timeEnd("serializing state");
|
|
175
|
+
return serialized_state;
|
|
176
|
+
}
|
|
177
|
+
async deserializeState(ctx, state_string) {
|
|
178
|
+
const jdd_context = this.makeJDDContext(ctx);
|
|
179
|
+
const raw = JSON.parse(state_string);
|
|
180
|
+
const components_storage = raw.components;
|
|
181
|
+
if (!Array.isArray(components_storage)) {
|
|
182
|
+
throw new Error(
|
|
183
|
+
"'components' key is not an array, got ${components_storage}"
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
const components_parsed = await Promise.all(
|
|
187
|
+
components_storage.map(async (entry) => {
|
|
188
|
+
if (!hasShape(
|
|
189
|
+
{
|
|
190
|
+
component_name: predicates.string,
|
|
191
|
+
args: predicates.object
|
|
192
|
+
},
|
|
193
|
+
entry
|
|
194
|
+
)) {
|
|
195
|
+
throw new Error(
|
|
196
|
+
`Expected components[] items to be objects with 'component_name' and 'args' keys, got ${entry}`
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
const { component_name, args } = entry;
|
|
200
|
+
const component = this.registry.get(component_name);
|
|
201
|
+
if (!component) {
|
|
202
|
+
throw new Error("Unknown component: ${component_name}");
|
|
203
|
+
}
|
|
204
|
+
return {
|
|
205
|
+
component_name,
|
|
206
|
+
args: await component.convertStorageToParsed(
|
|
207
|
+
jdd_context,
|
|
208
|
+
args
|
|
209
|
+
)
|
|
210
|
+
};
|
|
211
|
+
})
|
|
212
|
+
);
|
|
213
|
+
const result = { components: components_parsed };
|
|
214
|
+
return result;
|
|
215
|
+
}
|
|
216
|
+
renderPreParameterButtons(_ctx, _state) {
|
|
217
|
+
return "";
|
|
218
|
+
}
|
|
219
|
+
renderMessages(_ctx, state) {
|
|
220
|
+
return `<ul
|
|
221
|
+
class="jdd-editor__messages"
|
|
222
|
+
data-controller="toast"
|
|
223
|
+
>
|
|
224
|
+
${(state.messages || []).map(
|
|
225
|
+
(e) => `<li class="jdd-editor__message">${e}</li>`
|
|
226
|
+
)}
|
|
227
|
+
</ul>`;
|
|
228
|
+
}
|
|
229
|
+
async render(ctx, state) {
|
|
230
|
+
return tempstream`<div
|
|
231
|
+
class="${["two-column", "component-debugger", ...this.classes].join(
|
|
232
|
+
" "
|
|
233
|
+
)}"
|
|
234
|
+
id="component-debugger"
|
|
235
|
+
style="${`--resizable-column-width: ${state.preview_size ? state.preview_size + "px" : "50vw"}`}"
|
|
236
|
+
data-controller="component-debugger"
|
|
237
|
+
>
|
|
238
|
+
<div class="component-arguments" id="component-arguments">
|
|
239
|
+
${this.renderPreParameterButtons(ctx, state)}
|
|
240
|
+
${this.renderParameterButtons(state)}
|
|
241
|
+
${this.renderMessages(ctx, state)}
|
|
242
|
+
${state.components.map(
|
|
243
|
+
(component, component_index) => this.renderComponentBlock(
|
|
244
|
+
ctx,
|
|
245
|
+
state,
|
|
246
|
+
component,
|
|
247
|
+
component_index
|
|
248
|
+
)
|
|
249
|
+
)}
|
|
250
|
+
<details
|
|
251
|
+
class="component-debugger__json"
|
|
252
|
+
data-controller="exportable-textarea"
|
|
253
|
+
id="exportable-textarea"
|
|
254
|
+
open
|
|
255
|
+
>
|
|
256
|
+
<summary>Edit/Export raw JSON</summary>
|
|
257
|
+
<textarea
|
|
258
|
+
name="state_override"
|
|
259
|
+
rows="40"
|
|
260
|
+
cols="40"
|
|
261
|
+
data-controller="json-editor"
|
|
262
|
+
id="component-debugger-json-textarea"
|
|
263
|
+
autocomplete="off"
|
|
264
|
+
>
|
|
265
|
+
${(await this.serializeState(ctx, state, true)).replaceAll("<", "<")}
|
|
266
|
+
</textarea
|
|
267
|
+
>
|
|
268
|
+
${this.makeActionButton(state, {
|
|
269
|
+
action: "replace_state",
|
|
270
|
+
label: "Apply"
|
|
271
|
+
})}
|
|
272
|
+
<button data-action="exportable-textarea#copy">Copy</button>
|
|
273
|
+
<button data-action="exportable-textarea#download">
|
|
274
|
+
Download
|
|
275
|
+
</button>
|
|
276
|
+
<input type="file" />${" "}
|
|
277
|
+
<button data-action="exportable-textarea#import">
|
|
278
|
+
Import
|
|
279
|
+
</button>
|
|
280
|
+
</details>
|
|
281
|
+
</div>
|
|
282
|
+
<div
|
|
283
|
+
id="resize-gutter"
|
|
284
|
+
class="resize-gutter"
|
|
285
|
+
data-component-debugger-target="gutter"
|
|
286
|
+
></div>
|
|
287
|
+
<div
|
|
288
|
+
id="component-preview"
|
|
289
|
+
class="component-preview"
|
|
290
|
+
data-component-debugger-target="preview"
|
|
291
|
+
>
|
|
292
|
+
<div
|
|
293
|
+
id="component-preview__header"
|
|
294
|
+
class="component-preview__header"
|
|
295
|
+
>
|
|
296
|
+
<span>Preview</span>
|
|
297
|
+
<select
|
|
298
|
+
name="$[preview_size]"
|
|
299
|
+
autocomplete="off"
|
|
300
|
+
class="component-preview-size-select"
|
|
301
|
+
data-component-debugger-target="sizeSelect"
|
|
302
|
+
data-action="change->component-debugger#handleWidthDropdown"
|
|
303
|
+
data-turbo-data-turbo-permanent
|
|
304
|
+
>
|
|
305
|
+
${state.preview_size ? `<option
|
|
306
|
+
class="dynamic"
|
|
307
|
+
value="${state.preview_size}"
|
|
308
|
+
selected
|
|
309
|
+
>
|
|
310
|
+
${state.preview_size} px
|
|
311
|
+
</option>` : ""}
|
|
312
|
+
${this.previewSizes.map(
|
|
313
|
+
(size) => `<option value="${size}">
|
|
314
|
+
${`${size} px`}
|
|
315
|
+
</option>`
|
|
316
|
+
)}
|
|
317
|
+
</select>
|
|
318
|
+
<noscript>
|
|
319
|
+
${this.makeActionButton(state, "change_size")}
|
|
320
|
+
</noscript>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="jdd-outer-container">
|
|
323
|
+
<div class="jdd-container">
|
|
324
|
+
${JDD.render(
|
|
325
|
+
this.registry,
|
|
326
|
+
documentContainerFromParsed(state.components),
|
|
327
|
+
this.makeJDDContext(ctx)
|
|
328
|
+
)}
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>`;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
export {
|
|
336
|
+
actionName,
|
|
337
|
+
JDDPage as default
|
|
338
|
+
};
|
|
339
|
+
//# sourceMappingURL=jdd-page.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/jdd-page.ts"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport type { Readable } from \"node:stream\";\nimport type { Component, JDDContext, RawJDDocument } from \"@sealcode/jdd\";\nimport { documentContainerFromParsed, Registry } from \"@sealcode/jdd\";\nimport { JDD } from \"@sealcode/jdd\";\nimport { StatefulPage } from \"@sealcode/sealgen\";\nimport { hasFieldOfType, hasShape, predicates } from \"@sealcode/ts-predicates\";\nimport type { Context } from \"koa\";\nimport type { FlatTemplatable, Templatable } from \"tempstream\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInput } from \"./inputs/component-input.js\";\nimport { ComponentPreviewActions } from \"./component-preview-actions.js\";\n\nexport const actionName = \"Components\";\n\nexport type JDDPageState = {\n\tcomponents: RawJDDocument;\n\tpreview_size?: string;\n\tmessages?: string[];\n};\n\nexport default abstract class JDDPage extends StatefulPage<\n\tJDDPageState,\n\ttypeof ComponentPreviewActions\n> {\n\tactions = ComponentPreviewActions;\n\n\tpreviewSizes = [\"320\", \"600\", \"800\", \"1024\", \"1300\", \"1920\"];\n\tclasses: string[] = [];\n\n\tpublic registry: Registry;\n\tpublic makeJDDContext: (ctx: Context) => JDDContext;\n\tpublic html: (\n\t\targs: unknown\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic defaultHead: (\n\t\t...args: unknown[]\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic makeAssetURL: (asset: string) => string;\n\n\tconstructor(args: {\n\t\tregistry: Registry;\n\t\tmakeJDDContext: (ctx: Context) => JDDContext;\n\t\thtml: (\n\t\t\targs: unknown\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tdefaultHead: (\n\t\t\t...args: unknown[]\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tmakeAssetURL?: (asset: string) => string;\n\t}) {\n\t\tsuper();\n\t\tthis.registry = args.registry;\n\t\tthis.makeJDDContext = args.makeJDDContext;\n\t\tthis.defaultHead = args.defaultHead;\n\t\tthis.html = args.html;\n\t\tthis.makeAssetURL =\n\t\t\targs.makeAssetURL ||\n\t\t\t((str) =>\n\t\t\t\t`/dist/jdd-page/${str.startsWith(\"/\") ? str.slice(1) : str}`);\n\t}\n\n\tgetRegistryComponents() {\n\t\treturn this.registry.getAll();\n\t}\n\n\tasync getInitialState(ctx: Context) {\n\t\tconst all_components = Object.entries(this.getRegistryComponents());\n\t\tconst first_component = all_components[0];\n\t\tif (!first_component) {\n\t\t\tthrow new Error(\"No defined components!\");\n\t\t}\n\t\tconst [component_name, component] = first_component;\n\t\tconst initial_state = {\n\t\t\tcomponents: [\n\t\t\t\t{\n\t\t\t\t\tcomponent_name: component_name,\n\t\t\t\t\targs: await component.getExampleValues(\n\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\t\treturn initial_state;\n\t}\n\n\twrapInLayout(\n\t\tctx: Context,\n\t\tcontent: Templatable,\n\t\tstate: JDDPageState\n\t): Templatable {\n\t\tconst jdd = new JDD(\n\t\t\tthis.registry,\n\t\t\tthis.makeJDDContext(ctx),\n\t\t\tdocumentContainerFromParsed(state.components)\n\t\t);\n\t\treturn this.html({\n\t\t\tctx,\n\t\t\ttitle: \"Components\",\n\t\t\tbody: content,\n\t\t\tdescription: \"\",\n\t\t\tcss_clumps: [\"jdd-page\", ...jdd.getAllCSSClumps()],\n\t\t\thtmlOptions: {\n\t\t\t\tmorphing: true,\n\t\t\t\tpreserveScroll: true,\n\t\t\t\tautoRefreshCSS: false,\n\t\t\t\tnavbar: () => ``,\n\t\t\t\tbodyClasses: [\"jdd-editor\"],\n\t\t\t\tshowBottomNavbar: false,\n\t\t\t\tshowBanner: false,\n\t\t\t\tshowFooter: false,\n\t\t\t\tloadHamburgerMenu: false,\n\t\t\t\tloadSearchModal: false,\n\t\t\t},\n\t\t\tmakeHead: (...args: unknown[]) =>\n\t\t\t\ttempstream/* HTML */ `${this.defaultHead(...args)}\n\t\t\t\t\t<link\n\t\t\t\t\t\thref=\"/dist/jdd-page.entrypoint.css\"\n\t\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\t\ttype=\"text/css\"\n\t\t\t\t\t/>\n\t\t\t\t\t${jdd.renderEarlyAssets()}`,\n\t\t});\n\t}\n\n\tasync preprocessOverrides(\n\t\t_ctx: Context,\n\t\tstate: JDDPageState,\n\t\toverrides: Record<string, unknown>\n\t) {\n\t\tconst jdd_context = this.makeJDDContext(_ctx);\n\t\tif (\n\t\t\t!hasFieldOfType(\n\t\t\t\t\"components\",\n\t\t\t\toverrides,\n\t\t\t\tpredicates.array(\n\t\t\t\t\tpredicates.shape({\n\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t) {\n\t\t\treturn {};\n\t\t}\n\t\tfor (const [component_index, { component_name }] of Object.entries(\n\t\t\tstate.components\n\t\t)) {\n\t\t\tconst component = this.registry.get(component_name);\n\t\t\tif (!component) {\n\t\t\t\tthrow new Error(`Unknown component: ${component_name}`);\n\t\t\t}\n\t\t\tconst overrides_for_component = overrides.components[\n\t\t\t\tparseInt(component_index)\n\t\t\t] || { args: {} };\n\t\t\tconst promises = Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) => {\n\t\t\t\t\tconst value = overrides_for_component.args[arg_name];\n\t\t\t\t\tif (value) {\n\t\t\t\t\t\tconst new_value = await arg.receivedToParsed(\n\t\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t);\n\t\t\t\t\t\toverrides_for_component.args[arg_name] = new_value;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t);\n\t\t\t// eslint-disable-next-line no-await-in-loop\n\t\t\tawait Promise.all(promises);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn overrides;\n\t}\n\n\t// eslint-disable-next-line no-unused-vars\n\tabstract renderParameterButtons(_state: JDDPageState): FlatTemplatable;\n\n\trenderComponentArgs<C extends Component>(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tcomponent: C,\n\t\targs: Record<string, unknown>,\n\t\tindex: number\n\t): FlatTemplatable {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\treturn tempstream/* HTML */ `<div\n\t\t\tclass=\"component-preview-parameters\"\n\t\t\tid=\"${`component-preview-parameters--${index}`}\"\n\t\t>\n\t\t\t${Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) =>\n\t\t\t\t\tComponentInput({\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\"components\",\n\t\t\t\t\t\t\tindex.toString(),\n\t\t\t\t\t\t\t\"args\",\n\t\t\t\t\t\t\targ_name,\n\t\t\t\t\t\t],\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\targ,\n\t\t\t\t\t\tvalue:\n\t\t\t\t\t\t\targs[arg_name] === undefined\n\t\t\t\t\t\t\t\t? arg.getExampleValue(jdd_context)\n\t\t\t\t\t\t\t\t: args[arg_name],\n\t\t\t\t\t\tpage: this,\n\t\t\t\t\t\tmakeJDDContext: this.makeJDDContext,\n\t\t\t\t\t\tmakeAssetURL: this.makeAssetURL,\n\t\t\t\t\t})\n\t\t\t)}\n\t\t</div>`;\n\t}\n\n\trenderComponentBlock(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\t{\n\t\t\tcomponent_name,\n\t\t\targs: component_args,\n\t\t}: {\n\t\t\tcomponent_name: string;\n\t\t\targs: Record<string, unknown>;\n\t\t},\n\t\tcomponent_index: number\n\t) {\n\t\tconst component = this.registry.get(component_name);\n\t\tif (!component) {\n\t\t\treturn null;\n\t\t}\n\t\treturn this.renderComponentArgs(\n\t\t\tctx,\n\t\t\tstate,\n\t\t\tcomponent,\n\t\t\tcomponent_args,\n\t\t\tcomponent_index\n\t\t);\n\t}\n\n\tasync serializeState(ctx: Context, state: JDDPageState, pretty = false) {\n\t\tconsole.time(\"serializing state\");\n\t\tconst serialized_components = await Promise.all(\n\t\t\tstate.components.map(async ({ component_name, args }) => {\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tconst single_result = {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n\t\t\t\t\targs: component\n\t\t\t\t\t\t? await component.convertParsedToStorage(\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t\t\targs\n\t\t\t\t\t\t )\n\t\t\t\t\t\t: {},\n\t\t\t\t};\n\t\t\t\treturn single_result;\n\t\t\t})\n\t\t);\n\t\tconst serialized_state = JSON.stringify(\n\t\t\t{ components: serialized_components },\n\t\t\tnull,\n\t\t\tpretty ? 4 : \"\"\n\t\t);\n\t\tconsole.timeEnd(\"serializing state\");\n\t\treturn serialized_state;\n\t}\n\n\tasync deserializeState(ctx: Context, state_string: string) {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst raw = JSON.parse(state_string);\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n\t\tconst components_storage = raw.components;\n\t\tif (!Array.isArray(components_storage)) {\n\t\t\tthrow new Error(\n\t\t\t\t\"'components' key is not an array, got ${components_storage}\"\n\t\t\t);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst components_parsed = await Promise.all(\n\t\t\tcomponents_storage.map(async (entry) => {\n\t\t\t\tif (\n\t\t\t\t\t!hasShape(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcomponent_name: predicates.string,\n\t\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tentry\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t`Expected components[] items to be objects with 'component_name' and 'args' keys, got ${entry}`\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tconst { component_name, args } = entry;\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tif (!component) {\n\t\t\t\t\tthrow new Error(\"Unknown component: ${component_name}\");\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\targs: await component.convertStorageToParsed(\n\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\targs\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\t\tconst result = { components: components_parsed };\n\t\treturn result;\n\t}\n\n\trenderPreParameterButtons(\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_ctx: Context,\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_state: JDDPageState\n\t): FlatTemplatable | Promise<FlatTemplatable> {\n\t\treturn \"\";\n\t}\n\n\trenderMessages(_ctx: Context, state: JDDPageState) {\n\t\treturn /* HTML */ `<ul\n\t\t\tclass=\"jdd-editor__messages\"\n\t\t\tdata-controller=\"toast\"\n\t\t>\n\t\t\t${(state.messages || []).map(\n\t\t\t\t(e) => `<li class=\"jdd-editor__message\">${e}</li>`\n\t\t\t)}\n\t\t</ul>`;\n\t}\n\n\tasync render(ctx: Context, state: JDDPageState): Promise<string> {\n\t\treturn tempstream/* HTML */ `<div\n\t\t\tclass=\"${[\"two-column\", \"component-debugger\", ...this.classes].join(\n\t\t\t\t\" \"\n\t\t\t)}\"\n\t\t\tid=\"component-debugger\"\n\t\t\tstyle=\"${`--resizable-column-width: ${\n\t\t\t\tstate.preview_size ? state.preview_size + \"px\" : \"50vw\"\n\t\t\t}`}\"\n\t\t\tdata-controller=\"component-debugger\"\n\t\t>\n\t\t\t<div class=\"component-arguments\" id=\"component-arguments\">\n\t\t\t\t${this.renderPreParameterButtons(ctx, state)}\n\t\t\t\t${this.renderParameterButtons(state)}\n\t\t\t\t${this.renderMessages(ctx, state)}\n\t\t\t\t${state.components.map((component, component_index) =>\n\t\t\t\t\tthis.renderComponentBlock(\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\tcomponent,\n\t\t\t\t\t\tcomponent_index\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t\t<details\n\t\t\t\t\tclass=\"component-debugger__json\"\n\t\t\t\t\tdata-controller=\"exportable-textarea\"\n\t\t\t\t\tid=\"exportable-textarea\"\n\t\t\t\t\topen\n\t\t\t\t>\n\t\t\t\t\t<summary>Edit/Export raw JSON</summary>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tname=\"state_override\"\n\t\t\t\t\t\trows=\"40\"\n\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\tdata-controller=\"json-editor\"\n\t\t\t\t\t\tid=\"component-debugger-json-textarea\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\t${(await this.serializeState(ctx, state, true)).replaceAll(\"<\", \"<\")}\n\t\t\t\t\t\t</textarea\n\t\t\t\t\t>\n\t\t\t\t\t${this.makeActionButton(state, {\n\t\t\t\t\t\taction: \"replace_state\",\n\t\t\t\t\t\tlabel: \"Apply\",\n\t\t\t\t\t})}\n\t\t\t\t\t<button data-action=\"exportable-textarea#copy\">Copy</button>\n\t\t\t\t\t<button data-action=\"exportable-textarea#download\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</button>\n\t\t\t\t\t<input type=\"file\" />${\" \"}\n\t\t\t\t\t<button data-action=\"exportable-textarea#import\">\n\t\t\t\t\t\tImport\n\t\t\t\t\t</button>\n\t\t\t\t</details>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tid=\"resize-gutter\"\n\t\t\t\tclass=\"resize-gutter\"\n\t\t\t\tdata-component-debugger-target=\"gutter\"\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tid=\"component-preview\"\n\t\t\t\tclass=\"component-preview\"\n\t\t\t\tdata-component-debugger-target=\"preview\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tid=\"component-preview__header\"\n\t\t\t\t\tclass=\"component-preview__header\"\n\t\t\t\t>\n\t\t\t\t\t<span>Preview</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tname=\"$[preview_size]\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\tclass=\"component-preview-size-select\"\n\t\t\t\t\t\tdata-component-debugger-target=\"sizeSelect\"\n\t\t\t\t\t\tdata-action=\"change->component-debugger#handleWidthDropdown\"\n\t\t\t\t\t\tdata-turbo-data-turbo-permanent\n\t\t\t\t\t>\n\t\t\t\t\t\t${state.preview_size\n\t\t\t\t\t\t\t? /* HTML */ `<option\n\t\t\t\t\t\t\t\t\tclass=\"dynamic\"\n\t\t\t\t\t\t\t\t\tvalue=\"${state.preview_size}\"\n\t\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t >\n\t\t\t\t\t\t\t\t\t${state.preview_size} px\n\t\t\t\t\t\t\t </option>`\n\t\t\t\t\t\t\t: \"\"}\n\t\t\t\t\t\t${this.previewSizes.map(\n\t\t\t\t\t\t\t(size) => /* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t${`${size} px`}\n\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t)}\n\t\t\t\t\t</select>\n\t\t\t\t\t<noscript>\n\t\t\t\t\t\t${this.makeActionButton(state, \"change_size\")}\n\t\t\t\t\t</noscript>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"jdd-outer-container\">\n\t\t\t\t\t<div class=\"jdd-container\">\n\t\t\t\t\t\t${JDD.render(\n\t\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\t\tdocumentContainerFromParsed(state.components),\n\t\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/component-debugger.stimulus.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { Controller } from \"stimulus\";\n\nexport default class ComponentDebugger extends Controller {\n\tdeclare sizeSelectTarget: HTMLSelectElement;\n\tdeclare gutterTarget: HTMLDivElement;\n\tdeclare checkboxTarget: HTMLInputElement;\n\tdeclare checkboxTargets: HTMLInputElement[];\n\tdeclare previewTarget: HTMLDivElement;\n\tdeclare componentBlockTargets: HTMLDivElement[];\n\tstatic targets = [\n\t\t\"gutter\",\n\t\t\"componentBlock\",\n\t\t\"checkbox\",\n\t\t\"preview\",\n\t\t\"sizeSelect\",\n\t];\n\n\tid: string;\n\tmain_form: HTMLFormElement;\n\torigin_x: number;\n\torigin_width: number;\n\n\tconnect() {\n\t\tconst main_form = document\n\t\t\t.querySelector(\"#component-debugger\")\n\t\t\t?.closest(\"form\");\n\t\tif (!main_form) {\n\t\t\tthrow new Error(\"No main form\");\n\t\t}\n\t\tdocument.documentElement.addEventListener(\"ts-rebuilt\", () => {\n\t\t\tthis.main_form.requestSubmit();\n\t\t});\n\t\tthis.main_form.addEventListener(\"turbo:submit-end\", () => {\n\t\t\t// this clears the values of file inputs, so they don't get unecessarily\n\t\t\t// re-uploaded on future submissions - the file is alreade there on the server\n\t\t\tthis.main_form\n\t\t\t\t.querySelectorAll(\"input[type=file]\")\n\t\t\t\t.forEach((input: HTMLInputElement) => (input.value = \"\"));\n\t\t});\n\n\t\twindow.addEventListener(\"load\", () => {\n\t\t\tthis.update_width_display();\n\t\t});\n\t\tdocument.addEventListener(\"turbo:render\", () => {\n\t\t\t// not calling that to see if that improves performance\n\t\t\t// console.log(\"UWD because of render event\");\n\t\t\t// this.update_width_display();\n\t\t});\n\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconst gutter = this.gutterTarget;\n\t\tgutter.addEventListener(\"mousedown\", (e) => {\n\t\t\tthis.origin_x = e.clientX;\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tconst resizable = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\t\tthis.origin_width = resizable.getBoundingClientRect().width;\n\t\t\tconst handler = (e: MouseEvent) => this.resizeHandler(e);\n\t\t\tdocument.addEventListener(\"mousemove\", handler);\n\t\t\tconst remove_move_listener = () => {\n\t\t\t\tdocument.removeEventListener(\"mousemove\", handler);\n\t\t\t\tdocument.removeEventListener(\"mouseup\", remove_move_listener);\n\t\t\t\tdocument.dispatchEvent(\n\t\t\t\t\tnew Event(\"component-debugger--resize-done\")\n\t\t\t\t);\n\t\t\t};\n\t\t\tdocument.addEventListener(\"mouseup\", remove_move_listener);\n\t\t\te.preventDefault();\n\t\t});\n\t}\n\n\tupdate_width_display() {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconst preview = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\tconst component_width = preview.offsetWidth;\n\t\tthis.sizeSelectTarget\n\t\t\t.querySelectorAll(\"option\")\n\t\t\t.forEach((e) => e.removeAttribute(\"selected\"));\n\t\tlet option: HTMLOptionElement | null =\n\t\t\tthis.sizeSelectTarget.querySelector(\"option.dynamic\");\n\t\tif (!option) {\n\t\t\toption = document.createElement(\"option\");\n\t\t\toption.classList.add(\"dynamic\");\n\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\tthis.sizeSelectTarget.insertBefore(\n\t\t\t\toption,\n\t\t\t\tthis.sizeSelectTarget.childNodes[0]!\n\t\t\t);\n\t\t}\n\t\toption.setAttribute(\"selected\", \"\");\n\t\toption.innerHTML = `${component_width} px`;\n\t\toption.value = String(component_width);\n\t}\n\n\tresizeHandler(e: MouseEvent) {\n\t\tconst width_offset = this.origin_x - e.clientX;\n\t\tconst new_width = Math.max(this.origin_width + width_offset, 1);\n\t\tthis.setPreviewWidth(new_width);\n\t\tthis.update_width_display();\n\t\tdocument.dispatchEvent(new Event(\"component-debugger--resize\"));\n\t}\n\n\tsetPreviewWidth(width: number) {\n\t\tdocument\n\t\t\t.getElementById(\"component-debugger\")\n\t\t\t?.style.setProperty(\n\t\t\t\t\"--resizable-column-width\",\n\t\t\t\twidth.toString() + \"px\"\n\t\t\t);\n\t\tthis.update_width_display();\n\t}\n\n\thandleWidthDropdown() {\n\t\tconst value = this.sizeSelectTarget.value;\n\t\tthis.setPreviewWidth(parseInt(value));\n\t}\n\n\thandleBlockHover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tthis.element\n\t\t\t.querySelector(`.component-number-${index}`)\n\t\t\t?.classList.add(\"highlighted\");\n\t}\n\n\thandleBlockUnhover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"\"\n\t\t);\n\t\tthis.element\n\t\t\t.querySelectorAll(`.component-number-${index}.highlighted`)\n\t\t\t.forEach((e) => e.classList.remove(\"highlighted\"));\n\t}\n\n\tcomponentBlockTargetConnected(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tblock_element.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tblock_element.addEventListener(\"focusin\", () => {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t});\n\n\t\tconst summary = block_element.querySelector(\"summary\");\n\t\tif (summary) {\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseenter\",\n\t\t\t\tthis.handleBlockHover.bind(this)\n\t\t\t);\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseleave\",\n\t\t\t\tthis.handleBlockUnhover.bind(this)\n\t\t\t);\n\t\t}\n\t}\n\n\tpreviewTargetConnected(preview_element: HTMLDivElement) {\n\t\tpreview_element.addEventListener(\"click\", ({ target }) => {\n\t\t\tif (!(target instanceof HTMLElement)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst closest = target.closest(\".jdd-component\");\n\t\t\tif (!closest) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst index = parseInt(\n\t\t\t\tString(\n\t\t\t\t\tArray.from(closest.classList)\n\t\t\t\t\t\t.find((c) => c.startsWith(\"component-number-\"))\n\t\t\t\t\t\t?.replace(\"component-number-\", \"\")\n\t\t\t\t)\n\t\t\t);\n\t\t\tif (isNaN(index)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.focusComponentBlock(index);\n\t\t});\n\t}\n\n\tfocusComponentBlock(index: number) {\n\t\tconst block = this.componentBlockTargets[index];\n\t\tif (!block) {\n\t\t\treturn;\n\t\t}\n\t\tthis.checkboxTargets[index]!.checked = true;\n\t\tthis.checkboxTargets[index]!.dispatchEvent(new Event(\"change\")); // to help with refreshing markdown editor\n\t\tblock.scrollIntoView({ behavior: \"smooth\" });\n\t\t(\n\t\t\tblock.querySelector(\n\t\t\t\t\".component-preview-parameters input\"\n\t\t\t) as HTMLInputElement\n\t\t)?.focus();\n\t}\n\n\tgetIndex(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tString(block_element.getAttribute(\"data-component-index\"))\n\t\t);\n\t\treturn index;\n\t}\n\n\tlabelClicked(element: MouseEvent) {\n\t\tconst block_element = (element.target as HTMLDivElement).closest(\n\t\t\t`[data-component-debugger-target=\"componentBlock\"]`\n\t\t) as HTMLDivElement;\n\t\tconst index = this.getIndex(block_element);\n\t\tif (!this.checkboxTargets?.[index]?.checked) {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t}\n\t}\n\n\tgetPreviewElementForComponentIndex(index: number) {\n\t\tconst element = this.element.querySelector(\n\t\t\t`.component-number-${index}`\n\t\t) as HTMLDialogElement;\n\t\treturn element;\n\t}\n\n\tscrollToComponentPreview(index: number) {\n\t\tconst element = this.getPreviewElementForComponentIndex(index);\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tconst preview_element =\n\t\t\tthis.element.querySelector(\".component-preview\");\n\t\tif (!preview_element) {\n\t\t\tthrow new Error(\"Missing preview element!\");\n\t\t}\n\t\tif (element.clientHeight > preview_element.clientHeight) {\n\t\t\tpreview_element.scrollTop = element.offsetTop - 44;\n\t\t} else {\n\t\t\tpreview_element.scrollTop =\n\t\t\t\telement.offsetTop -\n\t\t\t\t(preview_element.clientHeight - element.clientHeight) / 2 -\n\t\t\t\t44;\n\t\t}\n\t}\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["e"]
|
|
7
|
-
}
|