@sealcode/jdd-editor 0.2.0 → 0.2.4

package/src/jdd-page.ts

@@ -10,6 +10,7 @@ import type { FlatTemplatable, Templatable } from "tempstream";
 import { tempstream } from "tempstream";
 import { ComponentInput } from "./inputs/component-input.js";
 import { ComponentPreviewActions } from "./component-preview-actions.js";
+import { htmlEscape } from "escape-goat";
 
 export const actionName = "Components";
 
@@ -64,22 +65,9 @@ export default abstract class JDDPage extends StatefulPage<
 		return this.registry.getAll();
 	}
 
-	async getInitialState(ctx: Context) {
-		const all_components = Object.entries(this.getRegistryComponents());
-		const first_component = all_components[0];
-		if (!first_component) {
-			throw new Error("No defined components!");
-		}
-		const [component_name, component] = first_component;
+	async getInitialState(ctx: Context): Promise<JDDPageState> {
 		const initial_state = {
-			components: [
-				{
-					component_name: component_name,
-					args: await component.getExampleValues(
-						this.makeJDDContext(ctx)
-					),
-				},
-			],
+			components: [],
 		};
 		return initial_state;
 	}
@@ -267,7 +255,7 @@ export default abstract class JDDPage extends StatefulPage<
 	async deserializeState(ctx: Context, state_string: string) {
 		const jdd_context = this.makeJDDContext(ctx);
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-		const raw = JSON.parse(state_string);
+		const raw = JSON.parse(state_string) as Record<string, unknown>;
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
 		const components_storage = raw.components;
 		if (!Array.isArray(components_storage)) {
@@ -331,9 +319,7 @@ export default abstract class JDDPage extends StatefulPage<
 
 	async render(ctx: Context, state: JDDPageState): Promise<string> {
 		return tempstream/* HTML */ `<div
-			class="${["two-column", "component-debugger", ...this.classes].join(
-				" "
-			)}"
+			class="${["two-column", "component-debugger", ...this.classes].join(" ")}"
 			id="component-debugger"
 			style="${`--resizable-column-width: ${
 				state.preview_size ? state.preview_size + "px" : "50vw"
@@ -367,8 +353,8 @@ export default abstract class JDDPage extends StatefulPage<
 						id="component-debugger-json-textarea"
 						autocomplete="off"
 					>
-							${(await this.serializeState(ctx, state, true)).replaceAll("<", "&lt;")}
-						</textarea
+						${(await this.serializeState(ctx, state, true)).replaceAll("<", "&lt;")}
+					</textarea
 					>
 					${this.makeActionButton(state, {
 						action: "replace_state",
@@ -398,41 +384,89 @@ export default abstract class JDDPage extends StatefulPage<
 					id="component-preview__header"
 					class="component-preview__header"
 				>
-					<span>Preview</span>
-					<select
-						name="$[preview_size]"
-						autocomplete="off"
-						class="component-preview-size-select"
-						data-component-debugger-target="sizeSelect"
-						data-action="change->component-debugger#handleWidthDropdown"
-						data-turbo-data-turbo-permanent
-					>
-						${state.preview_size
-							? /* HTML */ `<option
-									class="dynamic"
-									value="${state.preview_size}"
-									selected
-							  >
-									${state.preview_size} px
-							  </option>`
-							: ""}
-						${this.previewSizes.map(
-							(size) => /* HTML */ `<option value="${size}">
-								${`${size} px`}
-							</option>`
-						)}
-					</select>
-					<noscript>
-						${this.makeActionButton(state, "change_size")}
-					</noscript>
+					<div class="component-preview__item">
+						<span>Window size</span>
+						<select
+							name="$[preview_size]"
+							autocomplete="off"
+							class="component-preview-size-select"
+							data-component-debugger-target="sizeSelect"
+							data-action="change->component-debugger#handleWidthDropdown"
+							data-turbo-data-turbo-permanent
+						>
+							${
+								state.preview_size
+									? /* HTML */ `<option
+											class="dynamic"
+											value="${state.preview_size}"
+											selected
+									  >
+											${state.preview_size} px
+									  </option>`
+									: ""
+							}
+							${this.previewSizes.map(
+								(size) => /* HTML */ `<option value="${size}">
+									${`${size} px`}
+								</option>`
+							)}
+						</select>
+						<noscript>
+							${this.makeActionButton(state, "change_size")}
+						</noscript>
+					</div>
+					<style>
+						.component-preview .component-raw-view {
+							display: none;
+						}
+
+						.component-preview .jdd-outer-container {
+							display: block;
+						}
+
+						.component-preview:has(
+								.component-preview-checkbox:checked
+							)
+							.component-raw-view {
+							display: block;
+						}
+
+						.component-preview:has(
+								.component-preview-checkbox:checked
+							)
+							.jdd-outer-container {
+							display: none;
+						}
+					</style>
+					<label class="component-preview__item" for="show-html">
+						Show HTML
+						<input
+							type="checkbox"
+							id="show-html"
+							class="component-preview-checkbox"
+						/>
+					</label>
 				</div>
-				<div class="jdd-outer-container">
-					<div class="jdd-container">
-						${JDD.render(
-							this.registry,
-							documentContainerFromParsed(state.components),
-							this.makeJDDContext(ctx)
-						)}
+				
+						${(async () => {
+							const currentComponent = await JDD.render(
+								this.registry,
+								documentContainerFromParsed(state.components),
+								this.makeJDDContext(ctx)
+							);
+							return /* HTML */ ` <div
+									class="jdd-outer-container"
+								>
+									<div class="jdd-container">
+										${currentComponent}
+									</div>
+								</div>
+								<div class="component-raw-view">
+									<pre><code>${htmlEscape(
+										currentComponent
+									)}</code></pre>
+								</div>`;
+						})()}
 					</div>
 				</div>
 			</div>

package/.nyc_output/2ad4e34c-cebb-4299-9698-08eccbbe71f7.json

@@ -1 +0,0 @@
-{}

package/.nyc_output/71f2685b-e2c9-4db2-9f31-0dbdcacfcea1.json

@@ -1 +0,0 @@
-{}