Fixes in state in component debugger

package-lock.json

@@ -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",

package.json

@@ -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",

src/back/jdd-components/components.ts

@@ -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);

src/back/routes/components.sreact.tsx

@@ -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}