kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes in state in component debugger

Browse Source
This commit is contained in:
Kuba Orlik 2024-02-12 21:29:24 +01:00
parent 0d82616958
commit b891325a78
4 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -15,7 +15,7 @@
"@koa/router": "^12.0.1",
"@playwright/test": "^1.36.1",
"@sealcode/jdd": "^0.2.13",
"@sealcode/sealgen": "^0.12.7",
"@sealcode/sealgen": "^0.12.8",
"@sealcode/ts-predicates": "^0.4.3",
"@types/kill-port": "^2.0.0",
"get-port": "^7.0.0",
@ -1302,9 +1302,9 @@
}
},
"node_modules/@sealcode/sealgen": {
"version": "0.12.7",
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.12.7.tgz",
"integrity": "sha512-RWVWiaj1/yXPdtNGedw58nKL4DYsU1JpnU6F78Ihm5cvFL8e3d3I7QLBcZAga+TN9cNZSjZCp04ABt8iXjzeqA==",
"version": "0.12.8",
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.12.8.tgz",
"integrity": "sha512-OyYBc3phnbpso/IjNNvRtR4BsIMrDFiiPmKjUp6aGWy/1b6jYcj5nu60kXcNb/pQDWJeQZzxZNypeBtP3Z+1Rg==",
"dependencies": {
"@koa/router": "^12.0.1",
"@sealcode/ts-predicates": "^0.4.3",

2
package.json
View File

@ -36,7 +36,7 @@
"@koa/router": "^12.0.1",
"@playwright/test": "^1.36.1",
"@sealcode/jdd": "^0.2.13",
"@sealcode/sealgen": "^0.12.7",
"@sealcode/sealgen": "^0.12.8",
"@sealcode/ts-predicates": "^0.4.3",
"@types/kill-port": "^2.0.0",
"get-port": "^7.0.0",

3
src/back/jdd-components/components.ts
View File

@ -5,3 +5,6 @@ export const registry = new Registry();
import { NiceBox } from "./nice-box/nice-box.jdd.js";
registry.add("nice-box", NiceBox);
import { SomeOtherComponent } from "./some-other-component/some-other-component.jdd.js";
registry.add("some-other-component", SomeOtherComponent);

24
src/back/routes/components.sreact.tsx
View File

@ -15,8 +15,6 @@ import objectPath from "object-path";
export const actionName = "Components";
const rerender = "this.closest('form').requestSubmit()";
const actions = {
add_array_item: (
state: State,
@ -49,6 +47,15 @@ const actions = {
args,
};
},
change_component: (state: State, inputs: Record<string, string>) => {
const component_name = inputs.component;
const component = registry.get(component_name);
return {
...state,
component: component_name,
args: component?.getExampleValues() || {},
};
},
} as const;
type State = {
@ -60,7 +67,8 @@ export default new (class ComponentsPage extends StatefulPage<State, typeof acti
actions = actions;
getInitialState() {
return { component: "", args: {} };
const [component_name, component] = Object.entries(registry.getAll())[0];
return { component: component_name, args: component.getExampleValues() };
}
wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
@ -151,7 +159,7 @@ export default new (class ComponentsPage extends StatefulPage<State, typeof acti
{arg_path.at(-1)}
<select
name={`$.args${this.printArgPath(arg_path)}`}
onchange={rerender}
onchange={this.rerender()}
>
{arg.values.map((v) => (
<option value={v} selected={value == v}>
@ -196,7 +204,7 @@ export default new (class ComponentsPage extends StatefulPage<State, typeof acti
{arg.getTypeName() == "markdown" ? (
<textarea
name={`$.args${this.printArgPath(arg_path)}`}
onblur={rerender}
onblur={this.rerender()}
cols="70"
>
{value as string}
@ -223,7 +231,11 @@ export default new (class ComponentsPage extends StatefulPage<State, typeof acti
<div class="resizable">
{/*The below button has to be here in order for it to be the default behavior */}
<input type="submit" value="Preview" />
<select name="$.component" onchange={rerender}>
<select
name="component"
onchange={this.makeActionCallback("change_component")}
autocomplete="off"
>
{Object.entries(all_components).map(([name]) => (
<option value={name} selected={name == state.component}>
{name}