Page MenuHomeSealhub
Files F9583068

stateful-page.ts
No OneTemporary
Actions

stateful-page.ts
View Options

import { curryImportPath } from "../utils/import-path.js";
import { formatWithPrettier } from "../utils/prettier.js";
export async function statefulPageTemplate(
action_name: string,
newfilefullpath: string
): Promise<string> {
const rel = curryImportPath(newfilefullpath);
return formatWithPrettier(`import { TempstreamJSX, Templatable } from "tempstream";
import { Context } from "koa";
import { StatefulPage, StatefulPageActionArgument } from "@sealcode/sealgen";
import html from "${rel("src/back/html.js")}";
export const actionName = "${action_name}";
const actions = {
add: ({ state, inputs }: StatefulPageActionArgument<State>) => {
return {
...state,
elements: [...state.elements, inputs.element_to_add || "new element"],
};
},
remove: ({
state,
args: [index_to_remove],
}: StatefulPageActionArgument<State, [number]>) => {
return {
...state,
elements: state.elements.filter((_, index) => index != index_to_remove),
};
},
} as const;
type State = {
elements: string[];
};
export default new (class ${action_name}Page extends StatefulPage<State, typeof actions> {
actions = actions;
getInitialState() {
return { elements: ["one", "two", "three"] };
}
wrapInLayout(ctx: Context, content: Templatable): Templatable {
return html({ctx, title: "${action_name}", body: <>{content}</>, description: "${action_name}"});
}
render(ctx: Context, state: State, inputs: Record<string, string>) {
return (
<div>
<ul>
{state.elements.map((e, index) => (
<li>
{e} {this.makeActionButton(state, "remove", index)}
</li>
))}
</ul>
<div>
<input
name="element_to_add"
type="text"
value={inputs.element_to_add || ""}
/>
{this.makeActionButton(state, "add")}
</div>
</div>
);
}
})();
`);
}

File Metadata

Mime Type
text/x-java
Expires
Sat, Oct 11, 08:39 (1 d, 37 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
960045
Default Alt Text
stateful-page.ts (1 KB)

Event Timeline