From dd6dad76c8253ebaba027ab25dcfdffe19aea2a8 Mon Sep 17 00:00:00 2001 From: Dustin Swan Date: Wed, 11 Feb 2026 22:50:56 -0700 Subject: [PATCH] no more ValueToUI --- src/runtime-compiled.ts | 6 +-- src/runtime-js.ts | 84 ++++++---------------------------- src/valueToUI-compiled.ts | 95 --------------------------------------- 3 files changed, 16 insertions(+), 169 deletions(-) delete mode 100644 src/valueToUI-compiled.ts diff --git a/src/runtime-compiled.ts b/src/runtime-compiled.ts index 54f62c2..0761bfb 100644 --- a/src/runtime-compiled.ts +++ b/src/runtime-compiled.ts @@ -1,5 +1,3 @@ -// import type { UIValue } from './types'; -import { valueToUI } from './valueToUI-compiled'; import { render, hitTest } from './ui'; type UIValue = any; @@ -92,7 +90,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) { } const viewResult = instance.view(instance.state); - let viewUI = valueToUI(viewResult); + let viewUI = viewResult; if (ui.focusable) { viewUI = { @@ -139,7 +137,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) { try { const uiValue = app.view(state)(viewport); - const ui = valueToUI(uiValue); + const ui = uiValue; const expandedUI = expandStateful(ui, [], renderedKeys); // clean up unrendered instances diff --git a/src/runtime-js.ts b/src/runtime-js.ts index 5d5a000..614e723 100644 --- a/src/runtime-js.ts +++ b/src/runtime-js.ts @@ -3,6 +3,7 @@ import { Parser } from './parser' import { compile, recompile, definitions, freeVars, dependencies, dependents } from './compiler' import { prettyPrint } from './ast' import type { AST } from './ast' +import { measure } from './ui'; const STORAGE_KEY = 'cg-definitions'; @@ -27,18 +28,18 @@ export const _rt = { lte: (a: any) => (b: any) => ({ _tag: a <= b ? 'True' : 'False' }), ui: { - rect: (config: any) => ({ _kind: 'rect', ...config }), - text: (config: any) => ({ _kind: 'text', ...config }), - stack: (config: any) => ({ _kind: 'stack', ...config }), - row: (config: any) => ({ _kind: 'row', ...config }), - column: (config: any) => ({ _kind: 'column', ...config }), - padding: (config: any) => ({ _kind: 'padding', ...config }), - positioned: (config: any) => ({ _kind: 'positioned', ...config }), - clickable: (config: any) => ({ _kind: 'clickable', ...config }), - clip: (config: any) => ({ _kind: 'clip', ...config }), - opacity: (config: any) => ({ _kind: 'opacity', ...config }), - stateful: (config: any) => ({ _kind: 'stateful', ...config }), - measure: (config: any) => ({ _kind: 'measure', ...config }), + rect: (config: any) => ({ kind: 'rect', ...config }), + text: (config: any) => ({ kind: 'text', ...config }), + stack: (config: any) => ({ kind: 'stack', ...config }), + row: (config: any) => ({ kind: 'row', ...config }), + column: (config: any) => ({ kind: 'column', ...config }), + padding: (config: any) => ({ kind: 'padding', ...config }), + positioned: (config: any) => ({ kind: 'positioned', ...config }), + clickable: (config: any) => ({ kind: 'clickable', ...config }), + clip: (config: any) => ({ kind: 'clip', ...config }), + opacity: (config: any) => ({ kind: 'opacity', ...config }), + stateful: (config: any) => ({ kind: 'stateful', ...config }), + measure: (config: any) => ({ kind: 'measure', ...config }), measureText: (text: string) => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); @@ -50,64 +51,7 @@ export const _rt = { }, }, - measure: (ui: any): { width: number, height: number } => { - switch (ui._kind) { - case 'rect': return { width: ui.w, height: ui.h }; - case 'text': return { width: ui.content.length * 10, height: 20 }; // TODO - case 'clip': return { width: ui.w, height: ui.h }; - case 'row': { - let totalWidth = 0; - let maxHeight = 0; - for (const child of ui.children) { - const size = _rt.measure(child); - totalWidth += size.width; - maxHeight = Math.max(maxHeight, size.height); - } - totalWidth += ui.gap * (ui.children.length - 1); - return { width: totalWidth, height: maxHeight }; - } - - case 'column': { - let totalHeight = 0; - let maxWidth = 0; - for (const child of ui.children) { - const size = _rt.measure(child); - totalHeight += size.height; - maxWidth = Math.max(maxWidth, size.width); - } - totalHeight += ui.gap * (ui.children.length - 1); - return { width: maxWidth, height: totalHeight }; - } - - case 'padding': { - const childSize = _rt.measure(ui.child); - return { - width: childSize.width + ui.amount * 2, - height: childSize.height + ui.amount * 2, - } - } - - case 'stack': { - let maxWidth = 0; - let maxHeight = 0; - for (const child of ui.children) { - const size = _rt.measure(child); - maxWidth = Math.max(maxWidth, size.width); - maxHeight = Math.max(maxHeight, size.height); - } - - return { width: maxWidth, height: maxHeight }; - } - - case 'clickable': - case 'opacity': - case 'positioned': - return _rt.measure(ui.child); - - default: - return { width: 0, height: 0 }; - } - }, + measure: measure, batch: (events: any[]) => ({ _tag: 'Batch', _0: events }), noOp: { _tag: 'NoOp' }, diff --git a/src/valueToUI-compiled.ts b/src/valueToUI-compiled.ts deleted file mode 100644 index 40dc5d4..0000000 --- a/src/valueToUI-compiled.ts +++ /dev/null @@ -1,95 +0,0 @@ -export function valueToUI(value: any): any { - if (!value || !value._kind) - throw new Error(`Expected UI constructor, got: ${JSON.stringify(value)}`); - - switch(value._kind) { - case 'rect': - return { - kind: 'rect', - w: value.w, - h: value.h, - color: value.color, - radius: value.radius, - strokeWidth: value.strokeWidth, - strokeColor: value.strokeColor, - }; - - case 'text': - return { - kind: 'text', - content: value.content, - color: value.color, - }; - - case 'row': - return { - kind: 'row', - gap: value.gap || 0, - children: value.children.map(valueToUI), - }; - - case 'column': - return { - kind: 'column', - gap: value.gap || 0, - children: value.children.map(valueToUI), - }; - - case 'stack': - return { - kind: 'stack', - children: value.children.map(valueToUI), - }; - - case 'positioned': - return { - kind: 'positioned', - x: value.x || 0, - y: value.y || 0, - child: valueToUI(value.child), - }; - - case 'padding': - return { - kind: 'padding', - amount: value.amount || 0, - child: valueToUI(value.child), - }; - - case 'clickable': - return { - kind: 'clickable', - event: value.event, - child: valueToUI(value.child), - }; - - case 'clip': - return { - kind: 'clip', - w: value.w, - h: value.h, - child: valueToUI(value.child), - }; - - case 'opacity': - return { - kind: 'opacity', - opacity: value.opacity, - child: valueToUI(value.child), - }; - - case 'stateful': - return { - kind: 'stateful', - key: value.key, - focusable: value.focusable, - autoFocus: value.autoFocus, - init: value.init, - update: value.update, - view: value.view, - }; - - default: - throw new Error(`Unknown UI constructor: ${value._kind}`); - } -}