Page MenuHomeSealhub
Files F12656306

components.sreact.ts
No OneTemporary
Actions

components.sreact.ts
View Options

import { documentContainerFromParsed, JDD } from "@sealcode/jdd";
import type { Context } from "koa";
import type { Templatable } from "tempstream";
import { tempstream } from "tempstream";
import type { Stringifiable } from "tempstream/@types/stringify.js";
import { ComponentPreviewActions } from "./component-preview-actions.js";
import type { JDDPageState } from "./jdd-page.js";
import JDDPage from "./jdd-page.js";
export class JDDDebugger extends JDDPage {
renderParameterButtons(state: JDDPageState): Stringifiable {
const all_components = super.getRegistryComponents();
if (!state.components[0]) {
console.error("No components are present in state.components");
}
return /* HTML */ `<div>
<input type="submit" value="Preview" />
<select
name="component"
onchange="${this.makeActionCallback("change_component")}"
autocomplete="off"
>
${Object.entries(all_components)
.map(
([name]) => /* HTML */ `<option
value="${name}"
${name == state.components[0]?.component_name
? "selected"
: ""}
>
${name}
</option>`
)
.join("")}
</select>
<noscript>
${this.makeActionButton(state, "change_component")}
</noscript>
${this.makeActionButton(state, "randomize_args", "0")}
</div>`;
}
actions = ComponentPreviewActions;
async getInitialState(ctx: Context) {
const initial_state = {
components: [],
};
return initial_state;
}
wrapInLayout(
ctx: Context,
content: Templatable,
state: JDDPageState
): Templatable {
const jdd_context = this.makeJDDContext(ctx);
const jdd = new JDD(
this.registry,
jdd_context,
documentContainerFromParsed(state.components)
);
const css_clumps = ["jdd-page", ...jdd.getAllCSSClumps()];
return this.html({
ctx,
title: "Components",
body: content,
description: "",
css_clumps,
htmlOptions: {
morphing: true,
preserveScroll: true,
autoRefreshCSS: true,
showBanner: false,
navbar: () => ``,
bodyClasses: ["jdd-editor"],
showBottomNavbar: false,
showFooter: false,
loadHamburgerMenu: false,
loadSearchModal: false,
},
makeHead: (...args: unknown[]) =>
tempstream`${this.defaultHead(
...args
)}${jdd.renderEarlyAssets()}`,
});
}
containerSizes = ["320", "600", "800", "1024", "1300", "1920"];
}

File Metadata

Mime Type
text/x-java
Expires
Fri, Nov 28, 15:10 (1 d, 13 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1083263
Default Alt Text
components.sreact.ts (2 KB)

Event Timeline