@sealcode/jdd-editor 0.1.8 → 0.1.9
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/component-preview-actions.d.ts +1 -7
- package/@types/components.sreact.d.ts +1 -7
- package/@types/jdd-creator.d.ts +3 -9
- package/@types/jdd-page.d.ts +2 -13
- package/dist/src/jdd-page.js +2 -4
- package/dist/src/jdd-page.js.map +2 -2
- package/package.json +1 -1
- package/src/jdd-page.ts +2 -4
|
@@ -33,11 +33,5 @@ export declare const ComponentPreviewActions: {
|
|
|
33
33
|
readonly move_component_up: ({ state, args: [component_index], }: StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
|
|
34
34
|
readonly move_component_down: ({ state, args: [component_index], }: StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
|
|
35
35
|
readonly remove_file: ({ state, args: [arg_path], }: StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
|
|
36
|
-
readonly replace_state: ({ ctx, state, inputs, page, }: StatefulPageActionArgument<JDDPageState>) => Promise<
|
|
37
|
-
preview_size: string | undefined;
|
|
38
|
-
components: {
|
|
39
|
-
component_name: string;
|
|
40
|
-
args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
|
|
41
|
-
}[];
|
|
42
|
-
}>;
|
|
36
|
+
readonly replace_state: ({ ctx, state, inputs, page, }: StatefulPageActionArgument<JDDPageState>) => Promise<any>;
|
|
43
37
|
};
|
|
@@ -28,13 +28,7 @@ export declare class JDDDebugger extends JDDPage {
|
|
|
28
28
|
readonly move_component_up: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
|
|
29
29
|
readonly move_component_down: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
|
|
30
30
|
readonly remove_file: ({ state, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
|
|
31
|
-
readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<
|
|
32
|
-
preview_size: string | undefined;
|
|
33
|
-
components: {
|
|
34
|
-
component_name: string;
|
|
35
|
-
args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
|
|
36
|
-
}[];
|
|
37
|
-
}>;
|
|
31
|
+
readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<any>;
|
|
38
32
|
};
|
|
39
33
|
getInitialState(ctx: Context): Promise<{
|
|
40
34
|
components: {
|
package/@types/jdd-creator.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ export default abstract class JDDCreator extends JDDPage {
|
|
|
17
17
|
readonly move_table_row_down: ({ state, page, args: [arg_path, row_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
|
|
18
18
|
readonly change_size: ({ state, inputs, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => {
|
|
19
19
|
preview_size: string | undefined;
|
|
20
|
-
components: import("
|
|
20
|
+
components: import("../../jdd/@types/document.js").RawJDDocument;
|
|
21
21
|
messages?: string[];
|
|
22
22
|
};
|
|
23
23
|
readonly add_component: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
|
|
@@ -25,13 +25,7 @@ export default abstract class JDDCreator extends JDDPage {
|
|
|
25
25
|
readonly move_component_up: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
|
|
26
26
|
readonly move_component_down: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
|
|
27
27
|
readonly remove_file: ({ state, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
|
|
28
|
-
readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<
|
|
29
|
-
preview_size: string | undefined;
|
|
30
|
-
components: {
|
|
31
|
-
component_name: string;
|
|
32
|
-
args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
|
|
33
|
-
}[];
|
|
34
|
-
}>;
|
|
28
|
+
readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<any>;
|
|
35
29
|
};
|
|
36
30
|
/**
|
|
37
31
|
* This method returns list of components allowed in JDD Editor instance.
|
|
@@ -40,7 +34,7 @@ export default abstract class JDDCreator extends JDDPage {
|
|
|
40
34
|
* available.
|
|
41
35
|
*/
|
|
42
36
|
getAllowedComponents(): string[];
|
|
43
|
-
getRegistryComponents(): Record<string, import("
|
|
37
|
+
getRegistryComponents(): Record<string, import("../../jdd/@types/component.js").Component<Record<string, import("../../jdd/@types/index.js").ComponentArgument<unknown, unknown, unknown>>>>;
|
|
44
38
|
renderParameterButtons(state: JDDPageState): string;
|
|
45
39
|
renderComponentBlock(ctx: Context, state: JDDPageState, component_data: {
|
|
46
40
|
component_name: string;
|
package/@types/jdd-page.d.ts
CHANGED
|
@@ -35,13 +35,7 @@ export default abstract class JDDPage extends StatefulPage<JDDPageState, typeof
|
|
|
35
35
|
readonly move_component_up: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
|
|
36
36
|
readonly move_component_down: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
|
|
37
37
|
readonly remove_file: ({ state, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
|
|
38
|
-
readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<
|
|
39
|
-
preview_size: string | undefined;
|
|
40
|
-
components: {
|
|
41
|
-
component_name: string;
|
|
42
|
-
args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
|
|
43
|
-
}[];
|
|
44
|
-
}>;
|
|
38
|
+
readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<any>;
|
|
45
39
|
};
|
|
46
40
|
previewSizes: string[];
|
|
47
41
|
classes: string[];
|
|
@@ -73,12 +67,7 @@ export default abstract class JDDPage extends StatefulPage<JDDPageState, typeof
|
|
|
73
67
|
args: Record<string, unknown>;
|
|
74
68
|
}, component_index: number): import("tempstream/@types/stringify.js").Stringifiable;
|
|
75
69
|
serializeState(ctx: Context, state: JDDPageState, pretty?: boolean): Promise<string>;
|
|
76
|
-
deserializeState(ctx: Context, state_string: string): Promise<
|
|
77
|
-
components: {
|
|
78
|
-
component_name: string;
|
|
79
|
-
args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
|
|
80
|
-
}[];
|
|
81
|
-
}>;
|
|
70
|
+
deserializeState(ctx: Context, state_string: string): Promise<any>;
|
|
82
71
|
renderPreParameterButtons(_ctx: Context, _state: JDDPageState): FlatTemplatable | Promise<FlatTemplatable>;
|
|
83
72
|
renderMessages(_ctx: Context, state: JDDPageState): string;
|
|
84
73
|
render(ctx: Context, state: JDDPageState): Promise<string>;
|
package/dist/src/jdd-page.js
CHANGED
|
@@ -152,7 +152,6 @@ class JDDPage extends StatefulPage {
|
|
|
152
152
|
);
|
|
153
153
|
}
|
|
154
154
|
async serializeState(ctx, state, pretty = false) {
|
|
155
|
-
console.time("serializing state");
|
|
156
155
|
const serialized_components = await Promise.all(
|
|
157
156
|
state.components.map(async ({ component_name, args }) => {
|
|
158
157
|
const component = this.registry.get(component_name);
|
|
@@ -167,11 +166,10 @@ class JDDPage extends StatefulPage {
|
|
|
167
166
|
})
|
|
168
167
|
);
|
|
169
168
|
const serialized_state = JSON.stringify(
|
|
170
|
-
{ components: serialized_components },
|
|
169
|
+
{ ...state, components: serialized_components },
|
|
171
170
|
null,
|
|
172
171
|
pretty ? 4 : ""
|
|
173
172
|
);
|
|
174
|
-
console.timeEnd("serializing state");
|
|
175
173
|
return serialized_state;
|
|
176
174
|
}
|
|
177
175
|
async deserializeState(ctx, state_string) {
|
|
@@ -210,7 +208,7 @@ class JDDPage extends StatefulPage {
|
|
|
210
208
|
};
|
|
211
209
|
})
|
|
212
210
|
);
|
|
213
|
-
const result = { components: components_parsed };
|
|
211
|
+
const result = { ...raw, components: components_parsed };
|
|
214
212
|
return result;
|
|
215
213
|
}
|
|
216
214
|
renderPreParameterButtons(_ctx, _state) {
|
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\";\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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
|
|
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\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{ ...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);\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\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
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
package/src/jdd-page.ts
CHANGED
|
@@ -236,7 +236,6 @@ export default abstract class JDDPage extends StatefulPage<
|
|
|
236
236
|
}
|
|
237
237
|
|
|
238
238
|
async serializeState(ctx: Context, state: JDDPageState, pretty = false) {
|
|
239
|
-
console.time("serializing state");
|
|
240
239
|
const serialized_components = await Promise.all(
|
|
241
240
|
state.components.map(async ({ component_name, args }) => {
|
|
242
241
|
const component = this.registry.get(component_name);
|
|
@@ -254,11 +253,10 @@ export default abstract class JDDPage extends StatefulPage<
|
|
|
254
253
|
})
|
|
255
254
|
);
|
|
256
255
|
const serialized_state = JSON.stringify(
|
|
257
|
-
{ components: serialized_components },
|
|
256
|
+
{ ...state, components: serialized_components },
|
|
258
257
|
null,
|
|
259
258
|
pretty ? 4 : ""
|
|
260
259
|
);
|
|
261
|
-
console.timeEnd("serializing state");
|
|
262
260
|
return serialized_state;
|
|
263
261
|
}
|
|
264
262
|
|
|
@@ -303,7 +301,7 @@ export default abstract class JDDPage extends StatefulPage<
|
|
|
303
301
|
};
|
|
304
302
|
})
|
|
305
303
|
);
|
|
306
|
-
const result = { components: components_parsed };
|
|
304
|
+
const result = { ...raw, components: components_parsed };
|
|
307
305
|
return result;
|
|
308
306
|
}
|
|
309
307
|
|