dustinswan/cg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

no more ValueToUI

Browse source
This commit is contained in:
Dustin Swan 2026-02-11 22:50:56 -07:00
parent e12809efba
commit dd6dad76c8
No known key found for this signature in database
GPG key ID: 30D46587E2100467
3 changed files with 16 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/runtime-compiled.ts
View file

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

84
src/runtime-js.ts
View file

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

95
src/valueToUI-compiled.ts
View file

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