adding autoFocus to stateful components. getting global keys working

This commit is contained in:
Dustin Swan 2026-02-09 21:28:46 -07:00
parent 244126ee9e
commit 30234875fe
No known key found for this signature in database
GPG key ID: 30D46587E2100467
3 changed files with 21 additions and 6 deletions

View file

@ -67,11 +67,14 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
}
}
function expandStateful(ui: UIValue, path: number[]): UIValue {
function expandStateful(ui: UIValue, path: number[], renderedKeys: Set<string>): UIValue {
switch (ui.kind) {
case 'stateful': {
const fullKey = [...path, ui.key].join('.');
renderedKeys.add(fullKey);
let instance = componentInstances.get(fullKey);
const isNew = !instance;
if (!instance) {
instance = {
@ -86,6 +89,10 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
instance.view = ui.view;
}
if (ui.autoFocus && isNew) {
setFocus(fullKey);
}
const viewResult = instance.view(instance.state);
let viewUI = valueToUI(viewResult);
@ -96,7 +103,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
event: { _tag: 'FocusAndClick', _0: fullKey }
};
}
return expandStateful(viewUI, path);
return expandStateful(viewUI, path, renderedKeys);
}
case 'stack':
@ -105,7 +112,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
return {
...ui,
children: ui.children.map((child: UIValue, i: number) =>
expandStateful(child, [...path, i])
expandStateful(child, [...path, i], renderedKeys)
)
}
}
@ -117,7 +124,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
case 'clip': {
return {
...ui,
child: expandStateful((ui as any).child, [...path, 0])
child: expandStateful((ui as any).child, [...path, 0], renderedKeys)
};
}
@ -130,11 +137,17 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
function rerender() {
const viewport = { width: window.innerWidth, height: window.innerHeight };
const renderedKeys = new Set<string>();
try {
const uiValue = app.view(state)(viewport);
const ui = valueToUI(uiValue);
const expandedUI = expandStateful(ui, []);
const expandedUI = expandStateful(ui, [], renderedKeys);
if (focusedComponentKey && !renderedKeys.has(focusedComponentKey)) {
focusedComponentKey = null;
}
render(expandedUI, canvas);
} catch (error) {
console.error('Render error:', error);