@sealcode/jdd-editor 0.2.14 → 0.2.15
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/@types/jdd-page.d.ts +4 -2
- package/assets/styles/components.jdd-page.css +1 -0
- package/dist/src/edit-jdd-field.js +3 -5
- package/dist/src/edit-jdd-field.js.map +2 -2
- package/dist/src/jdd-page.js +22 -11
- package/dist/src/jdd-page.js.map +2 -2
- package/package.json +1 -1
- package/src/edit-jdd-field.ts +3 -5
- package/src/jdd-page.ts +30 -13
package/@types/jdd-page.d.ts
CHANGED
|
@@ -9,7 +9,6 @@ export declare const actionName = "Components";
|
|
|
9
9
|
export type JDDPageState = {
|
|
10
10
|
components: RawJDDocument;
|
|
11
11
|
preview_size?: string;
|
|
12
|
-
messages?: string[];
|
|
13
12
|
};
|
|
14
13
|
export default abstract class JDDPage extends StatefulPage<JDDPageState, typeof ComponentPreviewActions> {
|
|
15
14
|
actions: Record<string, import("@sealcode/sealgen").StatefulPageAction<JDDPageState>>;
|
|
@@ -45,6 +44,9 @@ export default abstract class JDDPage extends StatefulPage<JDDPageState, typeof
|
|
|
45
44
|
}[];
|
|
46
45
|
}>;
|
|
47
46
|
renderPreParameterButtons(_ctx: Context, _state: JDDPageState): FlatTemplatable | Promise<FlatTemplatable>;
|
|
48
|
-
renderMessages(_ctx: Context, state: JDDPageState): string;
|
|
49
47
|
render(ctx: Context, state: JDDPageState): Promise<string>;
|
|
48
|
+
renderWithMessages(ctx: Context, state: JDDPageState, messages: {
|
|
49
|
+
type: "error" | "success";
|
|
50
|
+
content: string;
|
|
51
|
+
}[]): Promise<string>;
|
|
50
52
|
}
|
|
@@ -42,11 +42,9 @@ class EditJDDField extends JDDCreator {
|
|
|
42
42
|
await item.save(ctx.$context);
|
|
43
43
|
ctx.type = "html";
|
|
44
44
|
ctx.status = 422;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
state.messages.push("Saved!");
|
|
49
|
-
ctx.body = this.render(ctx, state);
|
|
45
|
+
ctx.body = this.renderWithMessages(ctx, state, [
|
|
46
|
+
{ type: "success", content: "Saved!" }
|
|
47
|
+
]);
|
|
50
48
|
});
|
|
51
49
|
}
|
|
52
50
|
async renderHeader(_ctx, _item) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/edit-jdd-field.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type Router from \"@koa/router\";\nimport type { JDDocumentContainer, RawJDDocument } from \"@sealcode/jdd\";\nimport {\n\tdocumentContainerFromStorage,\n\tdocumentToParsed,\n\tdocumentToStorage,\n} from \"@sealcode/jdd\";\nimport type { Context } from \"koa\";\nimport type { Collection, CollectionItem, FieldNames } from \"sealious\";\nimport JDDCreator from \"./jdd-creator.js\";\nimport type { JDDPageState } from \"./jdd-page.js\";\nimport { tempstream } from \"tempstream\";\n\nexport abstract class EditJDDField<C extends Collection> extends JDDCreator {\n\tasync getID(ctx: Context): Promise<string> {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-member-access\n\t\tconst id = ctx.params[\"id\"] as string;\n\t\tif (!id) {\n\t\t\tthrow new Error(\"Missing URL parameter: \" + \"id\");\n\t\t}\n\t\treturn id;\n\t}\n\n\tabstract getCollection(ctx: Context): C;\n\n\tasync getItem(ctx: Context): Promise<CollectionItem<C>> {\n\t\tconst {\n\t\t\titems: [item],\n\t\t} = await this.getCollection(ctx)\n\t\t\t.list(ctx.$context)\n\t\t\t.ids([await this.getID(ctx)])\n\t\t\t.fetch();\n\t\tif (!item) {\n\t\t\tthrow new Error(\n\t\t\t\t\"Couldn't get item of id \" + (await this.getID(ctx))\n\t\t\t);\n\t\t}\n\t\treturn item;\n\t}\n\n\tabstract getJDDFieldName(): FieldNames<C[\"fields\"]>;\n\n\tmount(router: Router, path: string) {\n\t\tsuper.mount(router, path);\n\n\t\trouter.post(path + \"save/\", async (ctx) => {\n\t\t\tconst { state } = await this.extractState(ctx);\n\t\t\tconst item = await this.getItem(ctx);\n\n\t\t\titem.set(\n\t\t\t\tthis.getJDDFieldName(),\n\t\t\t\t(\n\t\t\t\t\tawait documentToStorage(\n\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvalue: state.components,\n\t\t\t\t\t\t} as unknown as JDDocumentContainer<\"parsed\">\n\t\t\t\t\t)\n\t\t\t\t).value as any\n\t\t\t);\n\t\t\tawait item.save(ctx.$context);\n\t\t\tctx.type = \"html\";\n\t\t\tctx.status = 422;\n\t\t\
|
|
5
|
-
"mappings": "AAMA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAGP,OAAO,gBAAgB;AAEvB,SAAS,kBAAkB;AAEpB,MAAe,qBAA2C,WAAW;AAAA,EAC3E,MAAM,MAAM,KAA+B;AAE1C,UAAM,KAAK,IAAI,OAAO;AACtB,QAAI,CAAC,IAAI;AACR,YAAM,IAAI,MAAM,4BAAiC;AAAA,IAClD;AACA,WAAO;AAAA,EACR;AAAA,EAIA,MAAM,QAAQ,KAA0C;AACvD,UAAM;AAAA,MACL,OAAO,CAAC,IAAI;AAAA,IACb,IAAI,MAAM,KAAK,cAAc,GAAG,EAC9B,KAAK,IAAI,QAAQ,EACjB,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,CAAC,CAAC,EAC3B,MAAM;AACR,QAAI,CAAC,MAAM;AACV,YAAM,IAAI;AAAA,QACT,6BAA8B,MAAM,KAAK,MAAM,GAAG;AAAA,MACnD;AAAA,IACD;AACA,WAAO;AAAA,EACR;AAAA,EAIA,MAAM,QAAgB,MAAc;AACnC,UAAM,MAAM,QAAQ,IAAI;AAExB,WAAO,KAAK,OAAO,SAAS,OAAO,QAAQ;AAC1C,YAAM,EAAE,MAAM,IAAI,MAAM,KAAK,aAAa,GAAG;AAC7C,YAAM,OAAO,MAAM,KAAK,QAAQ,GAAG;AAEnC,WAAK;AAAA,QACJ,KAAK,gBAAgB;AAAA,SAEpB,MAAM;AAAA,UACL,KAAK;AAAA,UACL,KAAK,eAAe,GAAG;AAAA,UACvB;AAAA,YACC,OAAO,MAAM;AAAA,UACd;AAAA,QACD,GACC;AAAA,MACH;AACA,YAAM,KAAK,KAAK,IAAI,QAAQ;AAC5B,UAAI,OAAO;AACX,UAAI,SAAS;AACb,UAAI,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type Router from \"@koa/router\";\nimport type { JDDocumentContainer, RawJDDocument } from \"@sealcode/jdd\";\nimport {\n\tdocumentContainerFromStorage,\n\tdocumentToParsed,\n\tdocumentToStorage,\n} from \"@sealcode/jdd\";\nimport type { Context } from \"koa\";\nimport type { Collection, CollectionItem, FieldNames } from \"sealious\";\nimport JDDCreator from \"./jdd-creator.js\";\nimport type { JDDPageState } from \"./jdd-page.js\";\nimport { tempstream } from \"tempstream\";\n\nexport abstract class EditJDDField<C extends Collection> extends JDDCreator {\n\tasync getID(ctx: Context): Promise<string> {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-member-access\n\t\tconst id = ctx.params[\"id\"] as string;\n\t\tif (!id) {\n\t\t\tthrow new Error(\"Missing URL parameter: \" + \"id\");\n\t\t}\n\t\treturn id;\n\t}\n\n\tabstract getCollection(ctx: Context): C;\n\n\tasync getItem(ctx: Context): Promise<CollectionItem<C>> {\n\t\tconst {\n\t\t\titems: [item],\n\t\t} = await this.getCollection(ctx)\n\t\t\t.list(ctx.$context)\n\t\t\t.ids([await this.getID(ctx)])\n\t\t\t.fetch();\n\t\tif (!item) {\n\t\t\tthrow new Error(\n\t\t\t\t\"Couldn't get item of id \" + (await this.getID(ctx))\n\t\t\t);\n\t\t}\n\t\treturn item;\n\t}\n\n\tabstract getJDDFieldName(): FieldNames<C[\"fields\"]>;\n\n\tmount(router: Router, path: string) {\n\t\tsuper.mount(router, path);\n\n\t\trouter.post(path + \"save/\", async (ctx) => {\n\t\t\tconst { state } = await this.extractState(ctx);\n\t\t\tconst item = await this.getItem(ctx);\n\n\t\t\titem.set(\n\t\t\t\tthis.getJDDFieldName(),\n\t\t\t\t(\n\t\t\t\t\tawait documentToStorage(\n\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvalue: state.components,\n\t\t\t\t\t\t} as unknown as JDDocumentContainer<\"parsed\">\n\t\t\t\t\t)\n\t\t\t\t).value as any\n\t\t\t);\n\t\t\tawait item.save(ctx.$context);\n\t\t\tctx.type = \"html\";\n\t\t\tctx.status = 422;\n\t\t\tctx.body = this.renderWithMessages(ctx, state, [\n\t\t\t\t{ type: \"success\", content: \"Saved!\" },\n\t\t\t]);\n\t\t});\n\t}\n\n\tasync renderHeader(_ctx: Context, _item: CollectionItem<C>) {\n\t\treturn /* HTML */ `<h1>Edit JDD</h1>`;\n\t}\n\n\tasync renderPreParameterButtons(ctx: Context) {\n\t\tconst item = await this.getItem(ctx);\n\t\treturn tempstream`<div>${this.renderHeader(ctx, item)}</div>`;\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\t<input type=\"submit\" formaction=\"./save/\" value=\"zapisz\" />\n\t\t\t</div>`;\n\t}\n\n\tasync getInitialState(ctx: Context) {\n\t\tconst article = await this.getItem(ctx);\n\t\tconst parsed_document = await documentToParsed(\n\t\t\tthis.registry,\n\t\t\tthis.makeJDDContext(ctx),\n\t\t\tdocumentContainerFromStorage(\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\t\t(article.get(this.getJDDFieldName()) as RawJDDocument) || []\n\t\t\t)\n\t\t);\n\t\treturn {\n\t\t\tcomponents: parsed_document.value.map((e) => ({\n\t\t\t\t...e,\n\t\t\t\topen: true,\n\t\t\t})),\n\t\t};\n\t}\n\n\t// uncomment to create whitelist of allowed components\n\t// getAllowedComponents() {\n\t// \treturn [\"nice-box\"];\n\t// }\n}\n"],
|
|
5
|
+
"mappings": "AAMA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAGP,OAAO,gBAAgB;AAEvB,SAAS,kBAAkB;AAEpB,MAAe,qBAA2C,WAAW;AAAA,EAC3E,MAAM,MAAM,KAA+B;AAE1C,UAAM,KAAK,IAAI,OAAO;AACtB,QAAI,CAAC,IAAI;AACR,YAAM,IAAI,MAAM,4BAAiC;AAAA,IAClD;AACA,WAAO;AAAA,EACR;AAAA,EAIA,MAAM,QAAQ,KAA0C;AACvD,UAAM;AAAA,MACL,OAAO,CAAC,IAAI;AAAA,IACb,IAAI,MAAM,KAAK,cAAc,GAAG,EAC9B,KAAK,IAAI,QAAQ,EACjB,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,CAAC,CAAC,EAC3B,MAAM;AACR,QAAI,CAAC,MAAM;AACV,YAAM,IAAI;AAAA,QACT,6BAA8B,MAAM,KAAK,MAAM,GAAG;AAAA,MACnD;AAAA,IACD;AACA,WAAO;AAAA,EACR;AAAA,EAIA,MAAM,QAAgB,MAAc;AACnC,UAAM,MAAM,QAAQ,IAAI;AAExB,WAAO,KAAK,OAAO,SAAS,OAAO,QAAQ;AAC1C,YAAM,EAAE,MAAM,IAAI,MAAM,KAAK,aAAa,GAAG;AAC7C,YAAM,OAAO,MAAM,KAAK,QAAQ,GAAG;AAEnC,WAAK;AAAA,QACJ,KAAK,gBAAgB;AAAA,SAEpB,MAAM;AAAA,UACL,KAAK;AAAA,UACL,KAAK,eAAe,GAAG;AAAA,UACvB;AAAA,YACC,OAAO,MAAM;AAAA,UACd;AAAA,QACD,GACC;AAAA,MACH;AACA,YAAM,KAAK,KAAK,IAAI,QAAQ;AAC5B,UAAI,OAAO;AACX,UAAI,SAAS;AACb,UAAI,OAAO,KAAK,mBAAmB,KAAK,OAAO;AAAA,QAC9C,EAAE,MAAM,WAAW,SAAS,SAAS;AAAA,MACtC,CAAC;AAAA,IACF,CAAC;AAAA,EACF;AAAA,EAEA,MAAM,aAAa,MAAe,OAA0B;AAC3D,WAAkB;AAAA,EACnB;AAAA,EAEA,MAAM,0BAA0B,KAAc;AAC7C,UAAM,OAAO,MAAM,KAAK,QAAQ,GAAG;AACnC,WAAO,kBAAkB,KAAK,aAAa,KAAK,IAAI;AAAA,EACrD;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;AAAA,EAGJ;AAAA,EAEA,MAAM,gBAAgB,KAAc;AACnC,UAAM,UAAU,MAAM,KAAK,QAAQ,GAAG;AACtC,UAAM,kBAAkB,MAAM;AAAA,MAC7B,KAAK;AAAA,MACL,KAAK,eAAe,GAAG;AAAA,MACvB;AAAA,QAEE,QAAQ,IAAI,KAAK,gBAAgB,CAAC,KAAuB,CAAC;AAAA,MAC5D;AAAA,IACD;AACA,WAAO;AAAA,MACN,YAAY,gBAAgB,MAAM,IAAI,CAAC,OAAO;AAAA,QAC7C,GAAG;AAAA,QACH,MAAM;AAAA,MACP,EAAE;AAAA,IACH;AAAA,EACD;AAMD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/src/jdd-page.js
CHANGED
|
@@ -207,16 +207,6 @@ class JDDPage extends StatefulPage {
|
|
|
207
207
|
renderPreParameterButtons(_ctx, _state) {
|
|
208
208
|
return "";
|
|
209
209
|
}
|
|
210
|
-
renderMessages(_ctx, state) {
|
|
211
|
-
return `<ul
|
|
212
|
-
class="jdd-editor__messages"
|
|
213
|
-
data-controller="toast"
|
|
214
|
-
>
|
|
215
|
-
${(state.messages || []).map(
|
|
216
|
-
(e) => `<li class="jdd-editor__message">${e}</li>`
|
|
217
|
-
)}
|
|
218
|
-
</ul>`;
|
|
219
|
-
}
|
|
220
210
|
async render(ctx, state) {
|
|
221
211
|
return tempstream`<div
|
|
222
212
|
class="${["two-column", "component-debugger", ...this.classes].join(" ")}"
|
|
@@ -227,7 +217,11 @@ class JDDPage extends StatefulPage {
|
|
|
227
217
|
<div class="component-arguments" id="component-arguments">
|
|
228
218
|
${this.renderPreParameterButtons(ctx, state)}
|
|
229
219
|
${this.renderParameterButtons(state)}
|
|
230
|
-
|
|
220
|
+
<ul
|
|
221
|
+
id="jdd-editor-messages"
|
|
222
|
+
class="jdd-editor__messages"
|
|
223
|
+
data-controller="toast"
|
|
224
|
+
></ul>
|
|
231
225
|
${state.components.map(
|
|
232
226
|
(component, component_index) => this.renderComponentBlock(
|
|
233
227
|
ctx,
|
|
@@ -378,6 +372,23 @@ class JDDPage extends StatefulPage {
|
|
|
378
372
|
</div>
|
|
379
373
|
</div>`;
|
|
380
374
|
}
|
|
375
|
+
async renderWithMessages(ctx, state, messages) {
|
|
376
|
+
return tempstream`${this.render(ctx, state)}
|
|
377
|
+
${messages.map(
|
|
378
|
+
({ type, content }) => `<turbo-stream
|
|
379
|
+
action="append"
|
|
380
|
+
target="jdd-editor-messages"
|
|
381
|
+
>
|
|
382
|
+
<template>
|
|
383
|
+
<div
|
|
384
|
+
class="jdd-editor__message jdd-editor__message--${type}"
|
|
385
|
+
>
|
|
386
|
+
${content}
|
|
387
|
+
</div>
|
|
388
|
+
</template>
|
|
389
|
+
</turbo-stream>`
|
|
390
|
+
).join("")}`;
|
|
391
|
+
}
|
|
381
392
|
}
|
|
382
393
|
export {
|
|
383
394
|
actionName,
|
package/dist/src/jdd-page.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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\";\nimport prettier from \"prettier\";\nimport hljs from \"highlight.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): Promise<JDDPageState> {\n\t\tconst initial_state = {\n\t\t\tcomponents: [],\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_context = this.makeJDDContext(ctx);\n\t\tconst jdd = new JDD(\n\t\t\tthis.registry,\n\t\t\tjdd_context,\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\tasync renderComponentArgs<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): Promise<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\tcomponent\n\t\t\t\t\t\t\t\t.getArguments()\n\t\t\t\t\t\t\t\t[arg_name]?.isEmpty(args[arg_name])\n\t\t\t\t\t\t\t\t? await 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\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\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{ ...state, components: serialized_components },\n\t\t\tnull,\n\t\t\tpretty ? 4 : \"\"\n\t\t);\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) as Record<string, unknown>;\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 = { ...raw, 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\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${(await this.serializeState(ctx, state, true)).replaceAll(\"<\", \"<\")}\n\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<div class=\"component-preview__item\">\n\t\t\t\t\t\t<span>Window size</span>\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tname=\"$[preview_size]\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\tclass=\"component-preview-size-select\"\n\t\t\t\t\t\t\tdata-component-debugger-target=\"sizeSelect\"\n\t\t\t\t\t\t\tdata-action=\"change->component-debugger#handleWidthDropdown\"\n\t\t\t\t\t\t\tdata-turbo-permanent\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\tstate.preview_size\n\t\t\t\t\t\t\t\t\t? /* HTML */ `<option\n\t\t\t\t\t\t\t\t\t\t\tclass=\"dynamic\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"${state.preview_size}\"\n\t\t\t\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t${state.preview_size} px\n\t\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t${this.previewSizes.map(\n\t\t\t\t\t\t\t\t(size) =>\n\t\t\t\t\t\t\t\t\t/* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t\t\t${`${size} px`}\n\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<noscript>\n\t\t\t\t\t\t\t${this.makeActionButton(state, \"change_size\")}\n\t\t\t\t\t\t</noscript>\n\t\t\t\t\t</div>\n\t\t\t\t\t<style>\n\t\t\t\t\t\t.component-preview .component-raw-view {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview .jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.component-raw-view {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<label class=\"component-preview__item\" for=\"show-html\">\n\t\t\t\t\t\tShow HTML\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tid=\"show-html\"\n\t\t\t\t\t\t\tclass=\"component-preview-checkbox\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t\t\t${(async () => {\n\t\t\t\t\t\t\tconst currentComponent = await JDD.render(\n\t\t\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\t\t\tdocumentContainerFromParsed(state.components),\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tlet currentComponentPrettified = currentComponent;\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\tcurrentComponentPrettified =\n\t\t\t\t\t\t\t\t\tawait prettier.format(currentComponent, {\n\t\t\t\t\t\t\t\t\t\tparser: \"html\",\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t\t\t\"JDD editor: couldn't format the html\"\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst highlightedHTML = hljs.highlight(\n\t\t\t\t\t\t\t\tcurrentComponentPrettified,\n\t\t\t\t\t\t\t\t{ language: \"html\" }\n\t\t\t\t\t\t\t).value;\n\t\t\t\t\t\t\treturn /* HTML */ ` <div\n\t\t\t\t\t\t\t\t\tclass=\"jdd-outer-container\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div class=\"jdd-container\">\n\t\t\t\t\t\t\t\t\t\t${currentComponent}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"component-raw-view\">\n\t\t\t\t\t\t\t\t\t<pre><code>${highlightedHTML}</code></pre>\n\t\t\t\t\t\t\t\t</div>`;\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": "AAGA,SAAS,mCAA6C;AACtD,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,UAAU,kBAAkB;AAGrD,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,OAAO,cAAc;AACrB,OAAO,UAAU;AAEV,MAAM,aAAa;
|
|
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\";\nimport prettier from \"prettier\";\nimport hljs from \"highlight.js\";\n\nexport const actionName = \"Components\";\n\nexport type JDDPageState = {\n\tcomponents: RawJDDocument;\n\tpreview_size?: 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): Promise<JDDPageState> {\n\t\tconst initial_state = {\n\t\t\tcomponents: [],\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_context = this.makeJDDContext(ctx);\n\t\tconst jdd = new JDD(\n\t\t\tthis.registry,\n\t\t\tjdd_context,\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\tasync renderComponentArgs<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): Promise<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\tcomponent\n\t\t\t\t\t\t\t\t.getArguments()\n\t\t\t\t\t\t\t\t[arg_name]?.isEmpty(args[arg_name])\n\t\t\t\t\t\t\t\t? await 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\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\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{ ...state, components: serialized_components },\n\t\t\tnull,\n\t\t\tpretty ? 4 : \"\"\n\t\t);\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) as Record<string, unknown>;\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 = { ...raw, 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\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\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<ul\n\t\t\t\t\tid=\"jdd-editor-messages\"\n\t\t\t\t\tclass=\"jdd-editor__messages\"\n\t\t\t\t\tdata-controller=\"toast\"\n\t\t\t\t></ul>\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${(await this.serializeState(ctx, state, true)).replaceAll(\"<\", \"<\")}\n\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<div class=\"component-preview__item\">\n\t\t\t\t\t\t<span>Window size</span>\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tname=\"$[preview_size]\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\tclass=\"component-preview-size-select\"\n\t\t\t\t\t\t\tdata-component-debugger-target=\"sizeSelect\"\n\t\t\t\t\t\t\tdata-action=\"change->component-debugger#handleWidthDropdown\"\n\t\t\t\t\t\t\tdata-turbo-permanent\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\tstate.preview_size\n\t\t\t\t\t\t\t\t\t? /* HTML */ `<option\n\t\t\t\t\t\t\t\t\t\t\tclass=\"dynamic\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"${state.preview_size}\"\n\t\t\t\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t${state.preview_size} px\n\t\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t${this.previewSizes.map(\n\t\t\t\t\t\t\t\t(size) =>\n\t\t\t\t\t\t\t\t\t/* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t\t\t${`${size} px`}\n\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<noscript>\n\t\t\t\t\t\t\t${this.makeActionButton(state, \"change_size\")}\n\t\t\t\t\t\t</noscript>\n\t\t\t\t\t</div>\n\t\t\t\t\t<style>\n\t\t\t\t\t\t.component-preview .component-raw-view {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview .jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.component-raw-view {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<label class=\"component-preview__item\" for=\"show-html\">\n\t\t\t\t\t\tShow HTML\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tid=\"show-html\"\n\t\t\t\t\t\t\tclass=\"component-preview-checkbox\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t\t\t${(async () => {\n\t\t\t\t\t\t\tconst currentComponent = await JDD.render(\n\t\t\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\t\t\tdocumentContainerFromParsed(state.components),\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tlet currentComponentPrettified = currentComponent;\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\tcurrentComponentPrettified =\n\t\t\t\t\t\t\t\t\tawait prettier.format(currentComponent, {\n\t\t\t\t\t\t\t\t\t\tparser: \"html\",\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t\t\t\"JDD editor: couldn't format the html\"\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst highlightedHTML = hljs.highlight(\n\t\t\t\t\t\t\t\tcurrentComponentPrettified,\n\t\t\t\t\t\t\t\t{ language: \"html\" }\n\t\t\t\t\t\t\t).value;\n\t\t\t\t\t\t\treturn /* HTML */ ` <div\n\t\t\t\t\t\t\t\t\tclass=\"jdd-outer-container\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div class=\"jdd-container\">\n\t\t\t\t\t\t\t\t\t\t${currentComponent}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"component-raw-view\">\n\t\t\t\t\t\t\t\t\t<pre><code>${highlightedHTML}</code></pre>\n\t\t\t\t\t\t\t\t</div>`;\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\tasync renderWithMessages(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tmessages: { type: \"error\" | \"success\"; content: string }[]\n\t): Promise<string> {\n\t\treturn tempstream /* HTML */ `${this.render(ctx, state)}\n\t\t${messages\n\t\t\t.map(\n\t\t\t\t({ type, content }) =>\n\t\t\t\t\t/* HTML */ `<turbo-stream\n\t\t\t\t\t\taction=\"append\"\n\t\t\t\t\t\ttarget=\"jdd-editor-messages\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<template>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"jdd-editor__message jdd-editor__message--${type}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${content}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</turbo-stream>`\n\t\t\t)\n\t\t\t.join(\"\")}`;\n\t}\n}\n"],
|
|
5
|
+
"mappings": "AAGA,SAAS,mCAA6C;AACtD,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,UAAU,kBAAkB;AAGrD,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,OAAO,cAAc;AACrB,OAAO,UAAU;AAEV,MAAM,aAAa;AAO1B,MAAO,gBAAuC,aAG5C;AAAA,EAgBD,YAAY,MAUT;AACF,UAAM;AA1BP,mBAAU;AAEV,wBAAe,CAAC,OAAO,OAAO,OAAO,QAAQ,QAAQ,MAAM;AAC3D,mBAAoB,CAAC;AAwBpB,SAAK,WAAW,KAAK;AACrB,SAAK,iBAAiB,KAAK;AAC3B,SAAK,cAAc,KAAK;AACxB,SAAK,OAAO,KAAK;AACjB,SAAK,eACJ,KAAK,iBACJ,CAAC,QACD,kBAAkB,IAAI,WAAW,GAAG,IAAI,IAAI,MAAM,CAAC,IAAI;AAAA,EAC1D;AAAA,EAEA,wBAAwB;AACvB,WAAO,KAAK,SAAS,OAAO;AAAA,EAC7B;AAAA,EAEA,MAAM,gBAAgB,KAAqC;AAC1D,UAAM,gBAAgB;AAAA,MACrB,YAAY,CAAC;AAAA,IACd;AACA,WAAO;AAAA,EACR;AAAA,EAEA,aACC,KACA,SACA,OACc;AACd,UAAM,cAAc,KAAK,eAAe,GAAG;AAC3C,UAAM,MAAM,IAAI;AAAA,MACf,KAAK;AAAA,MACL;AAAA,MACA,4BAA4B,MAAM,UAAU;AAAA,IAC7C;AACA,WAAO,KAAK,KAAK;AAAA,MAChB;AAAA,MACA,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY,CAAC,YAAY,GAAG,IAAI,gBAAgB,CAAC;AAAA,MACjD,aAAa;AAAA,QACZ,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,QAAQ,MAAM;AAAA,QACd,aAAa,CAAC,YAAY;AAAA,QAC1B,kBAAkB;AAAA,QAClB,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,mBAAmB;AAAA,QACnB,iBAAiB;AAAA,MAClB;AAAA,MACA,UAAU,IAAI,SACb,aAAyB,KAAK,YAAY,GAAG,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAM9C,IAAI,kBAAkB;AAAA,IAC3B,CAAC;AAAA,EACF;AAAA,EAEA,MAAM,oBACL,MACA,OACA,WACC;AACD,UAAM,cAAc,KAAK,eAAe,IAAI;AAC5C,QACC,CAAC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACV,WAAW,MAAM;AAAA,UAChB,MAAM,WAAW;AAAA,QAClB,CAAC;AAAA,MACF;AAAA,IACD,GACC;AACD,aAAO,CAAC;AAAA,IACT;AACA,eAAW,CAAC,iBAAiB,EAAE,eAAe,CAAC,KAAK,OAAO;AAAA,MAC1D,MAAM;AAAA,IACP,GAAG;AACF,YAAM,YAAY,KAAK,SAAS,IAAI,cAAc;AAClD,UAAI,CAAC,WAAW;AACf,cAAM,IAAI,MAAM,sBAAsB,gBAAgB;AAAA,MACvD;AACA,YAAM,0BAA0B,UAAU,WACzC,SAAS,eAAe,MACpB,EAAE,MAAM,CAAC,EAAE;AAChB,YAAM,WAAW,OAAO,QAAQ,UAAU,aAAa,CAAC,EAAE;AAAA,QACzD,OAAO,CAAC,UAAU,GAAG,MAAM;AAC1B,gBAAM,QAAQ,wBAAwB,KAAK;AAC3C,cAAI,OAAO;AACV,kBAAM,YAAY,MAAM,IAAI;AAAA,cAC3B;AAAA,cACA;AAAA,YACD;AACA,oCAAwB,KAAK,YAAY;AAAA,UAC1C;AAAA,QACD;AAAA,MACD;AAEA,YAAM,QAAQ,IAAI,QAAQ;AAAA,IAC3B;AAEA,WAAO;AAAA,EACR;AAAA,EAKA,MAAM,oBACL,KACA,OACA,WACA,MACA,OAC2B;AAC3B,UAAM,cAAc,KAAK,eAAe,GAAG;AAC3C,WAAO;AAAA;AAAA,SAEA,iCAAiC;AAAA;AAAA,KAErC,OAAO,QAAQ,UAAU,aAAa,CAAC,EAAE;AAAA,MAC1C,OAAO,CAAC,UAAU,GAAG,MAAG;AAlL5B;AAmLK,8BAAe;AAAA,UACd;AAAA,UACA,UAAU;AAAA,YACT;AAAA,YACA,MAAM,SAAS;AAAA,YACf;AAAA,YACA;AAAA,UACD;AAAA,UACA;AAAA,UACA;AAAA,UACA,OACC,KAAK,cAAc,YACnB,eACE,aAAa,EACb,cAFF,mBAEa,QAAQ,KAAK,cACvB,MAAM,IAAI,gBAAgB,WAAW,IACrC,KAAK;AAAA,UACT,MAAM;AAAA,UACN,gBAAgB,KAAK;AAAA,UACrB,cAAc,KAAK;AAAA,QACpB,CAAC;AAAA;AAAA,IACH;AAAA;AAAA,EAEF;AAAA,EAEA,qBACC,KACA,OACA;AAAA,IACC;AAAA,IACA,MAAM;AAAA,EACP,GAIA,iBACC;AACD,UAAM,YAAY,KAAK,SAAS,IAAI,cAAc;AAClD,QAAI,CAAC,WAAW;AACf,aAAO;AAAA,IACR;AACA,WAAO,KAAK;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAAA,EAEA,MAAM,eAAe,KAAc,OAAqB,SAAS,OAAO;AACvE,UAAM,wBAAwB,MAAM,QAAQ;AAAA,MAC3C,MAAM,WAAW,IAAI,OAAO,EAAE,gBAAgB,KAAK,MAAM;AACxD,cAAM,YAAY,KAAK,SAAS,IAAI,cAAc;AAClD,cAAM,gBAAgB;AAAA,UACrB;AAAA,UAEA,MAAM,YACH,MAAM,UAAU;AAAA,YAChB,KAAK,eAAe,GAAG;AAAA,YACvB;AAAA,UACD,IACC,CAAC;AAAA,QACL;AACA,eAAO;AAAA,MACR,CAAC;AAAA,IACF;AACA,UAAM,mBAAmB,KAAK;AAAA,MAC7B,EAAE,GAAG,OAAO,YAAY,sBAAsB;AAAA,MAC9C;AAAA,MACA,SAAS,IAAI;AAAA,IACd;AACA,WAAO;AAAA,EACR;AAAA,EAEA,MAAM,iBAAiB,KAAc,cAAsB;AAC1D,UAAM,cAAc,KAAK,eAAe,GAAG;AAE3C,UAAM,MAAM,KAAK,MAAM,YAAY;AAEnC,UAAM,qBAAqB,IAAI;AAC/B,QAAI,CAAC,MAAM,QAAQ,kBAAkB,GAAG;AACvC,YAAM,IAAI;AAAA,QACT;AAAA,MACD;AAAA,IACD;AAEA,UAAM,oBAAoB,MAAM,QAAQ;AAAA,MACvC,mBAAmB,IAAI,OAAO,UAAU;AACvC,YACC,CAAC;AAAA,UACA;AAAA,YACC,gBAAgB,WAAW;AAAA,YAC3B,MAAM,WAAW;AAAA,UAClB;AAAA,UACA;AAAA,QACD,GACC;AACD,gBAAM,IAAI;AAAA,YACT,wFAAwF;AAAA,UACzF;AAAA,QACD;AACA,cAAM,EAAE,gBAAgB,KAAK,IAAI;AACjC,cAAM,YAAY,KAAK,SAAS,IAAI,cAAc;AAClD,YAAI,CAAC,WAAW;AACf,gBAAM,IAAI,MAAM,sCAAsC;AAAA,QACvD;AACA,eAAO;AAAA,UACN;AAAA,UACA,MAAM,MAAM,UAAU;AAAA,YACrB;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD,CAAC;AAAA,IACF;AACA,UAAM,SAAS,EAAE,GAAG,KAAK,YAAY,kBAAkB;AACvD,WAAO;AAAA,EACR;AAAA,EAEA,0BAEC,MAEA,QAC6C;AAC7C,WAAO;AAAA,EACR;AAAA,EAEA,MAAM,OAAO,KAAc,OAAsC;AAChE,WAAO;AAAA,YACG,CAAC,cAAc,sBAAsB,GAAG,KAAK,OAAO,EAAE,KAAK,GAAG;AAAA;AAAA,YAE9D,6BACR,MAAM,eAAe,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA,MAK/C,KAAK,0BAA0B,KAAK,KAAK;AAAA,MACzC,KAAK,uBAAuB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMjC,MAAM,WAAW;AAAA,MAAI,CAAC,WAAW,oBAClC,KAAK;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAgBK,MAAM,KAAK,eAAe,KAAK,OAAO,IAAI,GAAG,WAAW,KAAK,MAAM;AAAA;AAAA;AAAA,OAGrE,KAAK,iBAAiB,OAAO;AAAA,MAC9B,QAAQ;AAAA,MACR,OAAO;AAAA,IACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA+BpB,MAAM,eACQ;AAAA;AAAA,oBAEF,MAAM;AAAA;AAAA;AAAA,aAGb,MAAM;AAAA,uBAER;AAAA,SAEF,KAAK,aAAa;AAAA,MACnB,CAAC,SACW,kBAAkB;AAAA,YAC1B,GAAG;AAAA;AAAA,IAER;AAAA;AAAA;AAAA,SAGE,KAAK,iBAAiB,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoC1C,YAAY;AACd,YAAM,mBAAmB,MAAM,IAAI;AAAA,QAClC,KAAK;AAAA,QACL,4BAA4B,MAAM,UAAU;AAAA,QAC5C,KAAK,eAAe,GAAG;AAAA,MACxB;AAEA,UAAI,6BAA6B;AACjC,UAAI;AACH,qCACC,MAAM,SAAS,OAAO,kBAAkB;AAAA,UACvC,QAAQ;AAAA,QACT,CAAC;AAAA,MACH,SAAS,GAAP;AACD,gBAAQ;AAAA,UACP;AAAA,QACD;AAAA,MACD;AACA,YAAM,kBAAkB,KAAK;AAAA,QAC5B;AAAA,QACA,EAAE,UAAU,OAAO;AAAA,MACpB,EAAE;AACF,aAAkB;AAAA;AAAA;AAAA;AAAA,YAIb;AAAA;AAAA;AAAA;AAAA,sBAIU;AAAA;AAAA,IAEhB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR;AAAA,EAEA,MAAM,mBACL,KACA,OACA,UACkB;AAClB,WAAO,aAAyB,KAAK,OAAO,KAAK,KAAK;AAAA,IACpD,SACA;AAAA,MACA,CAAC,EAAE,MAAM,QAAQ,MACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0DAM0C;AAAA;AAAA,UAEhD;AAAA;AAAA;AAAA;AAAA,IAIP,EACC,KAAK,EAAE;AAAA,EACV;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
package/src/edit-jdd-field.ts
CHANGED
|
@@ -66,11 +66,9 @@ export abstract class EditJDDField<C extends Collection> extends JDDCreator {
|
|
|
66
66
|
await item.save(ctx.$context);
|
|
67
67
|
ctx.type = "html";
|
|
68
68
|
ctx.status = 422;
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
state.messages.push("Saved!");
|
|
73
|
-
ctx.body = this.render(ctx, state);
|
|
69
|
+
ctx.body = this.renderWithMessages(ctx, state, [
|
|
70
|
+
{ type: "success", content: "Saved!" },
|
|
71
|
+
]);
|
|
74
72
|
});
|
|
75
73
|
}
|
|
76
74
|
|
package/src/jdd-page.ts
CHANGED
|
@@ -18,7 +18,6 @@ export const actionName = "Components";
|
|
|
18
18
|
export type JDDPageState = {
|
|
19
19
|
components: RawJDDocument;
|
|
20
20
|
preview_size?: string;
|
|
21
|
-
messages?: string[];
|
|
22
21
|
};
|
|
23
22
|
|
|
24
23
|
export default abstract class JDDPage extends StatefulPage<
|
|
@@ -307,17 +306,6 @@ export default abstract class JDDPage extends StatefulPage<
|
|
|
307
306
|
return "";
|
|
308
307
|
}
|
|
309
308
|
|
|
310
|
-
renderMessages(_ctx: Context, state: JDDPageState) {
|
|
311
|
-
return /* HTML */ `<ul
|
|
312
|
-
class="jdd-editor__messages"
|
|
313
|
-
data-controller="toast"
|
|
314
|
-
>
|
|
315
|
-
${(state.messages || []).map(
|
|
316
|
-
(e) => `<li class="jdd-editor__message">${e}</li>`
|
|
317
|
-
)}
|
|
318
|
-
</ul>`;
|
|
319
|
-
}
|
|
320
|
-
|
|
321
309
|
async render(ctx: Context, state: JDDPageState): Promise<string> {
|
|
322
310
|
return tempstream /* HTML */ `<div
|
|
323
311
|
class="${["two-column", "component-debugger", ...this.classes].join(" ")}"
|
|
@@ -330,7 +318,11 @@ export default abstract class JDDPage extends StatefulPage<
|
|
|
330
318
|
<div class="component-arguments" id="component-arguments">
|
|
331
319
|
${this.renderPreParameterButtons(ctx, state)}
|
|
332
320
|
${this.renderParameterButtons(state)}
|
|
333
|
-
|
|
321
|
+
<ul
|
|
322
|
+
id="jdd-editor-messages"
|
|
323
|
+
class="jdd-editor__messages"
|
|
324
|
+
data-controller="toast"
|
|
325
|
+
></ul>
|
|
334
326
|
${state.components.map((component, component_index) =>
|
|
335
327
|
this.renderComponentBlock(
|
|
336
328
|
ctx,
|
|
@@ -488,4 +480,29 @@ export default abstract class JDDPage extends StatefulPage<
|
|
|
488
480
|
</div>
|
|
489
481
|
</div>`;
|
|
490
482
|
}
|
|
483
|
+
|
|
484
|
+
async renderWithMessages(
|
|
485
|
+
ctx: Context,
|
|
486
|
+
state: JDDPageState,
|
|
487
|
+
messages: { type: "error" | "success"; content: string }[]
|
|
488
|
+
): Promise<string> {
|
|
489
|
+
return tempstream /* HTML */ `${this.render(ctx, state)}
|
|
490
|
+
${messages
|
|
491
|
+
.map(
|
|
492
|
+
({ type, content }) =>
|
|
493
|
+
/* HTML */ `<turbo-stream
|
|
494
|
+
action="append"
|
|
495
|
+
target="jdd-editor-messages"
|
|
496
|
+
>
|
|
497
|
+
<template>
|
|
498
|
+
<div
|
|
499
|
+
class="jdd-editor__message jdd-editor__message--${type}"
|
|
500
|
+
>
|
|
501
|
+
${content}
|
|
502
|
+
</div>
|
|
503
|
+
</template>
|
|
504
|
+
</turbo-stream>`
|
|
505
|
+
)
|
|
506
|
+
.join("")}`;
|
|
507
|
+
}
|
|
491
508
|
}
|