@torpor/view 0.1.11 → 0.2.0

package/test/bench/components/temp/Bench-client-4e18421473e97bac7c24b17ba14751ce14dd187e.ts

@@ -0,0 +1,414 @@
+import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
+import t_event from "../../../../src/render/addEvent";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_class from "../../../../src/render/buildClasses";
+import t_fmt from "../../../../src/render/formatText";
+import t_fragment from "../../../../src/render/getFragment";
+import t_list_item from "../../../../src/render/newListItem";
+import t_range from "../../../../src/render/newRange";
+import t_anchor from "../../../../src/render/nodeAnchor";
+import t_child from "../../../../src/render/nodeChild";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+import t_pop_range from "../../../../src/render/popRange";
+import t_push_range from "../../../../src/render/pushRange";
+import t_run_list from "../../../../src/render/runList";
+import { type ListItem } from "../../../../src/types/ListItem";
+import { type SlotRender } from "../../../../src/types/SlotRender";
+
+export default function Bench(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>,
+) {
+	let rowId = 1;
+	let $state = $watch({
+		data: [],
+		selected: null,
+	});
+
+	const adjectives = [
+		"pretty",
+		"large",
+		"big",
+		"small",
+		"tall",
+		"short",
+		"long",
+		"handsome",
+		"plain",
+		"quaint",
+		"clean",
+		"elegant",
+		"easy",
+		"angry",
+		"crazy",
+		"helpful",
+		"mushy",
+		"odd",
+		"unsightly",
+		"adorable",
+		"important",
+		"inexpensive",
+		"cheap",
+		"expensive",
+		"fancy",
+	];
+	const colours = [
+		"red",
+		"yellow",
+		"blue",
+		"green",
+		"pink",
+		"brown",
+		"purple",
+		"brown",
+		"white",
+		"black",
+		"orange",
+	];
+	const nouns = [
+		"table",
+		"chair",
+		"house",
+		"bbq",
+		"desk",
+		"car",
+		"pony",
+		"cookie",
+		"sandwich",
+		"burger",
+		"pizza",
+		"mouse",
+		"keyboard",
+	];
+
+	function append() {
+		$state.data = [...$state.data, ...buildData(1000)];
+	}
+
+	function clear() {
+		$state.data = [];
+	}
+
+	function partialUpdate() {
+		for (let i = 0; i < $state.data.length; i += 10) {
+			const row = $state.data[i];
+			row.label = row.label + " !!!";
+		}
+	}
+
+	function remove(row) {
+		const clone = $state.data.slice();
+		clone.splice(clone.indexOf(row), 1);
+		$state.data = clone;
+	}
+
+	function create() {
+		// TODO: Build this up to 1000:
+		$state.data = buildData(10);
+	}
+
+	function createLots() {
+		$state.data = buildData(10000);
+	}
+
+	function swapRows() {
+		if ($state.data.length > 998) {
+			const clone = $state.data.slice();
+			const tmp = clone[1];
+			clone[1] = clone[998];
+			clone[998] = tmp;
+			$state.data = clone;
+		}
+	}
+
+	function _random(max) {
+		return Math.round(Math.random() * 1000) % max;
+	}
+
+	class Item {
+		id = rowId++;
+		label = `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`;
+	}
+
+	function buildData(count = 1000) {
+		const data = new Array(count);
+		for (let i = 0; i < count; i++) {
+			data[i] = $watch(new Item());
+		}
+		return data;
+	}
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment(
+		$parent.ownerDocument!,
+		t_fragments,
+		0,
+		` <div id="main" class="container"> <div class="jumbotron"> <div class="row"> <div class="col-md-6"> <h1>Torpor (keyed)</h1> </div> <div class="col-md-6"> <div class="row"> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="create">Create 1,000 rows</button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="createlots"> Create 10,000 rows </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="append"> Append 1,000 rows </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="update"> Update every 10th row </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="clear">Clear</button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button> </div> </div> </div> </div> </div> <table class="table table-hover table-striped test-data"> <tbody> <!> </tbody> </table> <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span> </div> `,
+	);
+	// @ts-ignore
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_button_1 = t_next(
+		t_child(
+			t_next(
+				t_child(
+					t_next(
+						t_child(
+							t_next(
+								t_next(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_root_0))))))), true),
+							),
+						),
+					),
+				),
+			),
+		),
+	) as HTMLElement;
+	const t_button_2 = t_next(
+		t_child(
+			t_next(
+				t_next(
+					t_next(
+						t_child(
+							t_next(
+								t_child(
+									t_next(
+										t_next(
+											t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_root_0))))))),
+											true,
+										),
+									),
+								),
+							),
+						),
+					),
+					true,
+				),
+			),
+		),
+	) as HTMLElement;
+	const t_button_3 = t_next(
+		t_child(
+			t_next(
+				t_next(
+					t_next(
+						t_next(
+							t_next(
+								t_child(
+									t_next(
+										t_child(
+											t_next(
+												t_next(
+													t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_root_0))))))),
+													true,
+												),
+											),
+										),
+									),
+								),
+							),
+							true,
+						),
+					),
+					true,
+				),
+			),
+		),
+	) as HTMLElement;
+	const t_button_4 = t_next(
+		t_child(
+			t_next(
+				t_next(
+					t_next(
+						t_next(
+							t_next(
+								t_next(
+									t_next(
+										t_child(
+											t_next(
+												t_child(
+													t_next(
+														t_next(
+															t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_root_0))))))),
+															true,
+														),
+													),
+												),
+											),
+										),
+									),
+									true,
+								),
+							),
+							true,
+						),
+					),
+					true,
+				),
+			),
+		),
+	) as HTMLElement;
+	const t_button_5 = t_next(
+		t_child(
+			t_next(
+				t_next(
+					t_next(
+						t_next(
+							t_next(
+								t_next(
+									t_next(
+										t_next(
+											t_next(
+												t_child(
+													t_next(
+														t_child(
+															t_next(
+																t_next(
+																	t_next(
+																		t_child(t_next(t_child(t_next(t_child(t_next(t_root_0)))))),
+																	),
+																	true,
+																),
+															),
+														),
+													),
+												),
+											),
+											true,
+										),
+									),
+									true,
+								),
+							),
+							true,
+						),
+					),
+					true,
+				),
+			),
+		),
+	) as HTMLElement;
+	const t_button_6 = t_next(
+		t_child(
+			t_next(
+				t_next(
+					t_next(
+						t_next(
+							t_next(
+								t_next(
+									t_next(
+										t_next(
+											t_next(
+												t_next(
+													t_next(
+														t_child(
+															t_next(
+																t_child(
+																	t_next(
+																		t_next(
+																			t_next(
+																				t_child(t_next(t_child(t_next(t_child(t_next(t_root_0)))))),
+																			),
+																			true,
+																		),
+																	),
+																),
+															),
+														),
+													),
+													true,
+												),
+											),
+											true,
+										),
+									),
+									true,
+								),
+							),
+							true,
+						),
+					),
+					true,
+				),
+			),
+		),
+	) as HTMLElement;
+	const t_for_parent_1 = t_next(
+		t_child(t_next(t_next(t_next(t_child(t_next(t_root_0))), true))),
+	) as HTMLElement;
+	let t_for_anchor_1 = t_anchor(
+		t_next(t_child(t_next(t_child(t_next(t_next(t_next(t_child(t_next(t_root_0))), true)))))),
+	) as HTMLElement;
+
+	/* @for */
+	let t_for_range_1 = t_range();
+	t_run_list(
+		t_for_range_1,
+		t_for_parent_1,
+		t_for_anchor_1,
+		function createNewItems() {
+			let t_new_items: ListItem[] = [];
+			for (let row of $state.data) {
+				t_new_items.push(t_list_item({ row }, row.id));
+				/*t_new_items.push({
+					key: row.id,
+					data: { row }
+				});*/
+			}
+			return t_new_items;
+		},
+		function createListItem(t_item, t_before) {
+			let t_old_range_1 = t_push_range(t_item, true);
+			const t_fragment_1 = t_fragment(
+				$parent.ownerDocument!,
+				t_fragments,
+				1,
+				` <tr> <td class="col-md-1">#</td> <td class="col-md-4"> <a>#</a> </td> <td class="col-md-1"> <a> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a> </td> <td class="col-md-6"></td> </tr> `,
+			);
+			// @ts-ignore
+			const t_root_1 = t_root(t_fragment_1, true);
+			const t_tr_1 = t_next(t_root_1) as HTMLElement;
+			const t_text_1 = t_child(t_next(t_child(t_tr_1)));
+			const t_a_1 = t_next(t_child(t_next(t_next(t_next(t_child(t_tr_1)), true)))) as HTMLElement;
+			const t_text_2 = t_child(t_a_1);
+			const t_a_2 = t_next(
+				t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_tr_1)), true)), true))),
+			) as HTMLElement;
+			// @ts-ignore
+			const t_text_3 = t_next(t_tr_1, true);
+			$run(function setClasses() {
+				t_tr_1.className = t_class({ danger: $state.selected === t_item.data.row.id });
+			});
+			$run(function setTextContent() {
+				t_text_1.textContent = t_fmt(t_item.data.row.id);
+			});
+			t_event(t_a_1, "click", () => ($state.selected = t_item.data.row.id));
+			$run(function setTextContent() {
+				t_text_2.textContent = ` ${t_fmt(t_item.data.row.label)} `;
+			});
+			t_event(t_a_2, "click", () => remove(t_item.data.row));
+			t_add_fragment(t_fragment_1, t_for_parent_1, t_before, t_text_3);
+			t_next(t_text_3);
+			t_pop_range(t_old_range_1);
+		},
+	);
+
+	// @ts-ignore
+	const t_text_4 = t_next(t_next(t_root_0), true);
+	t_event(t_button_1, "click", create);
+	t_event(t_button_2, "click", createLots);
+	t_event(t_button_3, "click", append);
+	t_event(t_button_4, "click", partialUpdate);
+	t_event(t_button_5, "click", clear);
+	t_event(t_button_6, "click", swapRows);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_4);
+	t_next(t_text_4);
+}

package/test/bench/components/temp/{Bench-server-00cefa588803c01ca4f2741c595e4f045cdd101e.ts → Bench-server-4648921af9bc146718d55a7e9fc288b47a57dfda.ts}

@@ -1,7 +1,7 @@
 import $watch from "../../../../src/render/$serverWatch";
-import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
-import t_class from "../../../../src/render/getClasses";
+import t_class from "../../../../src/render/buildClasses";
 import t_fmt from "../../../../src/render/formatText";
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 
 export default function Bench(
 	// @ts-ignore
@@ -9,7 +9,7 @@ export default function Bench(
 	// @ts-ignore
 	$context?: Record<PropertyKey, any>,
 	// @ts-ignore
-	$slots?: Record<string, ServerSlotRender>
+	$slots?: Record<string, ServerSlotRender>,
 ) {
 	let rowId = 1;
 	let $state = $watch({
@@ -44,7 +44,19 @@ export default function Bench(
 		"expensive",
 		"fancy",
 	];
-	const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
+	const colours = [
+		"red",
+		"yellow",
+		"blue",
+		"green",
+		"pink",
+		"brown",
+		"purple",
+		"brown",
+		"white",
+		"black",
+		"orange",
+	];
 	const nouns = [
 		"table",
 		"chair",
@@ -120,11 +132,11 @@ export default function Bench(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div id="main" class="container"> <div class="jumbotron"> <div class="row"> <div class="col-md-6"> <h1>Torpor (keyed)</h1> </div> <div class="col-md-6"> <div class="row"> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="create">Create 1,000 rows</button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="createlots"> Create 10,000 rows </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="append"> Append 1,000 rows </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="update"> Update every 10th row </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="clear">Clear</button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button> </div> </div> </div> </div> </div> <table class="table table-hover table-striped test-data"> <tbody> <![>`;
+	$output += ` <div id="main" class="container"> <div class="jumbotron"> <div class="row"> <div class="col-md-6"> <h1>Torpor (keyed)</h1> </div> <div class="col-md-6"> <div class="row"> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="create">Create 1,000 rows</button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="createlots"> Create 10,000 rows </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="append"> Append 1,000 rows </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="update"> Update every 10th row </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="clear">Clear</button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button> </div> </div> </div> </div> </div> <table class="table table-hover table-striped test-data"> <tbody> <![>`;
 	for (let row of $state.data) {
 		$output += `<!^>  <tr class="${t_class({ danger: $state.selected === row.id })}"> <td class="col-md-1">${t_fmt(row.id)}</td> <td class="col-md-4"> <a> ${t_fmt(row.label)} </a> </td> <td class="col-md-1"> <a> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a> </td> <td class="col-md-6"></td> </tr> `;
 	}
-	$output += `<!]><!> </tbody> </table> <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span> </div>`;
+	$output += `<!]><!> </tbody> </table> <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span> </div> `;
 
 	return $output;
 }

package/test/bind/components/BindComponent.torp

@@ -2,28 +2,13 @@ export default function BindComponent() {
 	let $state = $watch({ name: "Alice", selected: 1 });
 
 	@render {
-		<div>
-			@// t_name_changed = (value) => $state.name = value;
-			<BindText &name={$state.name} />
-			<p>Hello, {$state.name}</p>
-		</div>
+		<BindText &name={$state.name} />
+		<p>Hello, {$state.name}</p>
 	}
 }
 
 function BindText($props: any) {
-	//let $state = $watch({
-	//	text: $props.name
-	//})
-
-	// $run(() => t_name_changed($props.name))
-
-	//$run(() => {
-	//	$props.name = $state.text
-	//});
-
 	@render {
-		<div>
-			<input &value={$props.name} />
-		</div>
+		<input &value={$props.name} />
 	}
 }

package/test/bind/components/BindText.torp

@@ -2,15 +2,13 @@ export default function BindText() {
 	let $state = $watch({ name: "Alice", selected: 1 });
 
 	@render {
-		<div>
-			<input &value={$state.name} />
-			<select &value={$state.selected}>
-				<option value=0>First</option>
-				<option value=1>Second</option>
-				<option value=2>Third</option>
-			</select>
-			<p>Hello, {$state.name}</p>
-			<p>You have selected, {$state.selected}</p>
-		</div>
+		<input &value={$state.name} />
+		<select &value={$state.selected}>
+			<option value=0>First</option>
+			<option value=1>Second</option>
+			<option value=2>Third</option>
+		</select>
+		<p>Hello, {$state.name}</p>
+		<p>You have selected, {$state.selected}</p>
 	}
 }

package/test/bind/components/output/BindComponent-client.ts

@@ -26,11 +26,10 @@ export default function BindComponent(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> <p>#</p> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <!> <p>#</p> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
-	let t_comp_anchor_1 = t_anchor(t_next(t_child(t_comp_parent_1))) as HTMLElement;
+	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 	/* @component */
 	const t_props_1: any = $watch({});
@@ -40,11 +39,11 @@ export default function BindComponent(
 	$run(function setBinding() {
 		$state.name = t_props_1["name"];
 	});
-	BindText(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+	BindText(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 
 	const t_text_1 = t_child(t_next(t_next(t_comp_anchor_1, true)));
 	// @ts-ignore
-	const t_text_2 = t_next(t_comp_parent_1, true);
+	const t_text_2 = t_next(t_next(t_next(t_comp_anchor_1, true)), true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Hello, ${t_fmt($state.name)}`;
 	});
@@ -64,30 +63,20 @@ function BindText(
 ) {
 	$props ??= $watch({});
 
-	//let $state = $watch({
-		//	text: $props.name
-		//})
-
-		// $run(() => t_name_changed($props.name))
-
-		//$run(() => {
-			//	$props.name = $state.text
-			//});
-
-			/* User interface */
-			const t_fragments: DocumentFragment[] = [];
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
 
-			const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <input></input> </div> `);
-			// @ts-ignore
-			const t_root_0 = t_root(t_fragment_0, true);
-			const t_input_1 = t_next(t_child(t_next(t_root_0))) as HTMLInputElement;
-			// @ts-ignore
-			const t_text_1 = t_next(t_next(t_root_0), true);
-			$run(function setBinding() {
-				t_input_1.value = $props.name || "";
-			});
-			t_event(t_input_1, "input", (e) => $props.name = e.target.value);
-			t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
-			t_next(t_text_1);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <input></input> `);
+	// @ts-ignore
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_input_1 = t_next(t_root_0) as HTMLInputElement;
+	// @ts-ignore
+	const t_text_1 = t_next(t_input_1, true);
+	$run(function setBinding() {
+		t_input_1.value = $props.name || "";
+	});
+	t_event(t_input_1, "input", (e) => $props.name = e.target.value);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
-		}
+}

package/test/bind/components/output/BindComponent-server.ts

@@ -1,4 +1,3 @@
-import $run from "../../../../src/render/$serverRun";
 import $watch from "../../../../src/render/$serverWatch";
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 import t_attr from "../../../../src/render/formatAttributeText";
@@ -15,15 +14,18 @@ export default function BindComponent(
 	let $state = $watch({ name: "Alice", selected: 1 });
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	const t_props_1: any = {};
 	t_props_1["&name"] = $state.name;
 
-	$output += BindText(t_props_1, $context)
-	$output += `<!]><!> <p>Hello, ${t_fmt($state.name)}</p> </div> `;
+	const t_comp_1 = BindText(t_props_1, $context);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> <p>Hello, ${t_fmt($state.name)}</p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }
 
 function BindText(
@@ -34,19 +36,11 @@ function BindText(
 	$slots?: Record<string, ServerSlotRender>
 ) {
 	$props ??= {};
-	//let $state = $watch({
-		//	text: $props.name
-		//})
 
-		// $run(() => t_name_changed($props.name))
-
-		//$run(() => {
-			//	$props.name = $state.text
-			//});
-
-			/* User interface */
-			let $output = "";
-			$output += ` <div> <input value="${t_attr($props.name) || ""}"> </div> `;
+	/* User interface */
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <input value="${t_attr($props.name) || ""}"> `;
 
-			return $output;
-		}
+	return { body: t_body, head: t_head };
+}

package/test/bind/components/output/BindText-client.ts

@@ -25,15 +25,15 @@ export default function BindText(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_input_1 = t_next(t_child(t_next(t_root_0))) as HTMLInputElement;
+	const t_input_1 = t_next(t_root_0) as HTMLInputElement;
 	const t_select_1 = t_next(t_next(t_input_1, true)) as HTMLElement;
 	const t_text_1 = t_child(t_next(t_next(t_select_1, true)));
 	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_select_1, true)), true)));
 	// @ts-ignore
-	const t_text_3 = t_next(t_next(t_root_0), true);
+	const t_text_3 = t_next(t_next(t_next(t_next(t_next(t_select_1, true)), true)), true);
 	$run(function setBinding() {
 		t_input_1.value = $state.name || "";
 	});