Page MenuHomeSealhub
Files F21589303

components.sreact.ts
No OneTemporary
Actions

Authored By
Unknown
Size
2 KB
Referenced Files
None
Subscribers
None

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 first_component = Object.entries(this.registry.getAll())[0];
if (!first_component) {
throw new Error("No registered components!");
}
const [component_name, component] = first_component;
const initial_state = {
components: [
{
component_name: component_name,
args: await component.getExampleValues(
this.makeJDDContext(ctx)
),
open: true,
},
],
};
return initial_state;
}
wrapInLayout(
ctx: Context,
content: Templatable,
state: JDDPageState
): Templatable {
const jdd = new JDD(
this.registry,
this.makeJDDContext(ctx),
documentContainerFromParsed(state.components)
);
return this.html({
ctx,
title: "Components",
body: content,
description: "",
css_clumps: ["jdd-page", ...jdd.getAllCSSClumps()],
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
application/javascript
Expires
Sat, Nov 7, 17:19 (3 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1181994
Default Alt Text
components.sreact.ts (2 KB)

Event Timeline