no more ValueToUI

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

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' },

src/valueToUI-compiled.ts

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