oxiui-lib 0.2.0

package/src/core/elements/index.ts

@@ -0,0 +1,10 @@
+export * from "./Animation.js";
+export * from "./Button.js";
+export * from "./HRow.js";
+export * from "./InputText.js";
+export * from "./OxiComponent.js";
+export * from "./OxiStateFull.js";
+export * from "./Stack.js";
+export * from "./Text.js";
+export * from "./ui.js";
+export * from "./VRow.js";

package/src/core/elements/ui.ts

@@ -0,0 +1,5 @@
+export function createStyle<
+	T extends Record<string, Partial<CSSStyleDeclaration>>,
+>(style: T): T {
+	return style;
+}

package/src/core/renderer.ts

@@ -0,0 +1,12 @@
+let globalCursor = 0;
+
+export function getGlobalCursor() {
+	return globalCursor;
+}
+export function nextCursor() {
+	return globalCursor++;
+}
+
+export function resetCursor() {
+	globalCursor = 0;
+}

package/src/core/renderers/html.ts

@@ -0,0 +1,268 @@
+import type { IComponent } from "../types/component.js";
+import {
+	type CommonProps,
+	type InputProps,
+	type IntrinsicElements,
+} from "../types/html.js";
+
+export class HTMLRenderer {
+	private rootBody: HTMLElement;
+	private oldRoot?: IComponent<keyof IntrinsicElements>;
+	private nodeMap: Map<string, HTMLElement> = new Map();
+
+	constructor(rootId: string = "app") {
+		const el = document.getElementById(rootId);
+		if (!el) throw new Error(`Root element #${rootId} not found`);
+		this.rootBody = el;
+	}
+
+	render(
+		stateId: string,
+		readers: Set<string>,
+		tree: IComponent<keyof IntrinsicElements>,
+	) {
+		if (!this.oldRoot) {
+			this.oldRoot = this.cloneTree(tree);
+			this.replaceRoot(this.oldRoot);
+			return;
+		}
+
+		const affected = this.findAllByState(this.oldRoot, stateId);
+		const topMost = this.getTopMost(Array.from(affected).map((n) => n.index));
+
+		for (const index of topMost) {
+			const newNode = this.findByIndex(tree, index);
+			const oldNode = this.findByIndex(this.oldRoot, index);
+
+			if (newNode && oldNode && this.structureChanged(oldNode, newNode)) {
+				this.replaceNode(index, newNode);
+				this.oldRoot = this.cloneTree(tree);
+				this.nodeMap.forEach((e, k) => {
+					// clean map
+					if (!this.findByIndex(this.oldRoot!, k)) {
+						this.nodeMap.delete(k);
+					}
+				});
+				return;
+			}
+		}
+
+		for (const id of readers) {
+			const compNode = this.findByIndex(tree, id);
+			if (!compNode) continue;
+
+			const domNode = this.nodeMap.get(id);
+			if (!domNode) continue;
+
+			this.applyProps(domNode, compNode);
+		}
+
+		console.log(this.nodeMap);
+	}
+
+	private findByIndex(
+		node: IComponent<keyof IntrinsicElements>,
+		index: string,
+	): IComponent<keyof IntrinsicElements> | undefined {
+		if (node.index === index) return node;
+
+		for (const child of node.down) {
+			const found = this.findByIndex(child, index);
+			if (found) return found;
+		}
+
+		return undefined;
+	}
+
+	private findAllByState(
+		node: IComponent<keyof IntrinsicElements>,
+		index: string,
+		acc: Set<IComponent<keyof IntrinsicElements>> = new Set(),
+	): Set<IComponent<keyof IntrinsicElements>> {
+		if (node.cursors?.has(index)) {
+			acc.add(node);
+		}
+
+		for (const child of node.down) {
+			this.findAllByState(child, index, acc);
+		}
+
+		return acc;
+	}
+
+	private structureChanged(
+		prev: IComponent<keyof IntrinsicElements> | undefined,
+		next: IComponent<keyof IntrinsicElements>,
+	): boolean {
+		if (!prev) return true;
+		if (prev.type !== next.type) return true;
+		if (prev.down.length !== next.down.length) return true;
+
+		for (let i = 0; i < next.down.length; i++) {
+			if (next.down[i] !== undefined) {
+				if (
+					this.structureChanged(
+						prev.down[i],
+						next.down[i] as IComponent<keyof IntrinsicElements>,
+					)
+				) {
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
+
+	private cloneTree(
+		node: IComponent<keyof IntrinsicElements>,
+	): IComponent<keyof IntrinsicElements> {
+		return {
+			type: node.type,
+			index: node.index,
+			cursors: new Set(node.cursors),
+			down: node.down.map((n) => this.cloneTree(n)),
+			props: node.props,
+		} as IComponent<keyof IntrinsicElements>;
+	}
+
+	private renderNode(node: IComponent<keyof IntrinsicElements>): HTMLElement {
+		if (node.type === "semanticText") return this.renderTextNode(node);
+
+		const element = document.createElement(node.type);
+		element.setAttribute("id", node.index);
+
+		this.nodeMap.set(node.index, element);
+
+		this.applyProps(element, node);
+
+		for (const child of node.down) {
+			element.appendChild(this.renderNode(child));
+		}
+
+		return element;
+	}
+
+	private renderTextNode(
+		node: IComponent<keyof IntrinsicElements>,
+	): HTMLElement {
+		const props = node.props as IntrinsicElements["semanticText"];
+
+		const element = document.createElement(props.type);
+		element.setAttribute("id", node.index);
+		this.nodeMap.set(node.index, element);
+
+		this.applyProps(element, node);
+
+		for (const child of node.down) {
+			element.appendChild(this.renderNode(child));
+		}
+
+		return element;
+	}
+
+	private replaceRoot(component: IComponent<keyof IntrinsicElements>) {
+		const fragment = document.createDocumentFragment();
+
+		for (const child of component.down) {
+			fragment.appendChild(this.renderNode(child));
+		}
+
+		this.rootBody.replaceChildren(fragment);
+	}
+
+	private replaceNode(
+		index: string,
+		node: IComponent<keyof IntrinsicElements>,
+	) {
+		if (index === "0") this.replaceRoot(node);
+		const oldNode = this.findByIndex(this.oldRoot!, index);
+		if (!oldNode) return;
+
+		const domNode = this.nodeMap.get(oldNode.index);
+		if (!domNode) return;
+
+		const newDom = this.renderNode(node);
+		domNode.replaceWith(newDom);
+	}
+
+	private getTopMost(indices: string[]): string[] {
+		const sorted = indices.sort((a, b) => a.length - b.length);
+		const result: string[] = [];
+
+		for (const value of sorted) {
+			const isChild = result.some((parent) => value.startsWith(parent + "."));
+			if (!isChild) result.push(value);
+		}
+
+		return result;
+	}
+
+	private applyProps(
+		element: HTMLElement,
+		node: IComponent<keyof IntrinsicElements>,
+	) {
+		if (!node.props) return;
+
+		const props: CommonProps =
+			node.type === "semanticText"
+				? (node.props as IntrinsicElements["semanticText"]).props
+				: (node.props as CommonProps);
+
+		this.applyCommonProps(element, props);
+
+		if (node.type === "input") {
+			this.applyInputProps(element as HTMLInputElement, props as InputProps);
+		}
+	}
+
+	private applyCommonProps(element: HTMLElement, props: CommonProps) {
+		if (props.content !== undefined) {
+			const value =
+				typeof props.content === "function" ? props.content() : props.content;
+
+			element.textContent = String(value);
+		}
+
+		this.applyStyle(element, props.style);
+
+		if (props.id) element.id = props.id;
+		if (props.class) element.className = props.class;
+		if (props.title) element.title = props.title;
+		if (props.hidden !== undefined) element.hidden = props.hidden;
+
+		element.onclick = props.onClick ?? null;
+		element.onchange = props.onChange ?? null;
+		element.onfocus = props.onFocus ?? null;
+		element.onblur = props.onBlur ?? null;
+		element.onkeydown = props.onKeyDown ?? null;
+		element.onkeyup = props.onKeyUp ?? null;
+
+		element.oninput = (ev: Event) => props.onInput?.(ev as InputEvent) ?? null;
+	}
+
+	private applyStyle(
+		element: HTMLElement,
+		style?: string | Partial<CSSStyleDeclaration>,
+	) {
+		if (!style) return;
+
+		if (typeof style === "string") {
+			element.setAttribute("style", style);
+		} else {
+			Object.assign(element.style, style);
+		}
+	}
+
+	private applyInputProps(element: HTMLInputElement, props: InputProps) {
+		if (props.value !== undefined) {
+			element.value = String(props.value);
+		}
+
+		element.oninput = (ev: Event) => {
+			const input = ev.target as HTMLInputElement;
+			props.onTextChange?.(input.value);
+			props.onInput?.(ev as InputEvent);
+		};
+	}
+}

package/src/core/scheduler.ts

@@ -0,0 +1,124 @@
+import type { DivContainer } from "./elements/AbaStateFull";
+import { resetCursor } from "./renderer";
+import type { IComponent } from "./types/component";
+import type { IntrinsicElements } from "./types/html";
+
+type RenderCallback = (
+	stateId: string,
+	readers: Set<string>,
+	root: IComponent<keyof IntrinsicElements>,
+) => void;
+
+let running = false;
+let app: DivContainer | null = null;
+let renderCallback: RenderCallback | null = null;
+const postRenderQueue: (() => void)[] = [];
+const resetTree = () => {
+	if (app?.down) {
+		app.down = [];
+	}
+};
+
+export function initScheduler(
+	App: new () => DivContainer,
+	renderer: RenderCallback,
+) {
+	app = new App();
+	renderCallback = renderer;
+	performRender("", new Set());
+}
+
+export function scheduleEffect(fn: () => void) {
+	postRenderQueue.push(fn);
+}
+
+function findByIndex(
+	node: IComponent<keyof IntrinsicElements>,
+	index: string,
+): IComponent<keyof IntrinsicElements> | null {
+	if (node.index === index) return node;
+
+	for (const child of node.down) {
+		const found = findByIndex(child, index);
+		if (found) return found;
+	}
+
+	return null;
+}
+
+function clearCursors(node?: IComponent<keyof IntrinsicElements>) {
+	if (!node) return;
+
+	node.cursors?.clear();
+
+	for (const child of node.down) {
+		clearCursors(child);
+	}
+}
+
+function performRender(stateId: string, readers: Set<string>) {
+	if (!app || !renderCallback) return;
+	console.clear();
+
+	resetTree();
+	resetCursor();
+	app.body();
+	renderCallback(stateId, readers, app as IComponent<keyof IntrinsicElements>);
+	postRenderQueue.forEach((fn) => fn());
+	postRenderQueue.length = 0;
+	clearCursors(app as IComponent<keyof IntrinsicElements>);
+}
+
+export function rerender(stateId: string, readers: Set<string>) {
+	if (!renderCallback || !app) return;
+	if (running) return;
+
+	const validComponents: Set<string> = new Set();
+
+	readers.forEach((id) => {
+		if (findByIndex(app as IComponent<keyof IntrinsicElements>, id)) {
+			validComponents.add(id);
+		}
+	});
+
+	running = true;
+
+	setTimeout(() => {
+		running = false;
+		performRender(stateId, validComponents);
+	}, 0);
+}
+
+let immediateRunning = false;
+let frameId: number | null = null;
+
+export function startImmediateMode() {
+	if (!app || !renderCallback) return;
+	if (immediateRunning) return;
+
+	immediateRunning = true;
+
+	const loop = () => {
+		if (!immediateRunning || !app) return;
+
+		resetTree();
+		resetCursor();
+		app.body();
+		renderCallback?.("", new Set(), app as IComponent<keyof IntrinsicElements>);
+		postRenderQueue.forEach((fn) => fn());
+		postRenderQueue.length = 0;
+		clearCursors(app as IComponent<keyof IntrinsicElements>);
+		frameId = requestAnimationFrame(loop);
+	};
+
+	frameId = requestAnimationFrame(loop);
+}
+
+export function stopImmediateMode() {
+	immediateRunning = false;
+
+	if (frameId !== null) {
+		cancelAnimationFrame(frameId);
+		frameId = null;
+	}
+}

package/src/core/signals.ts

@@ -0,0 +1,84 @@
+import { nextCursor } from "./renderer.js";
+import { rerender } from "./scheduler.js";
+import { current } from "./tree.js";
+
+type SignalState<T> = {
+	value: T;
+};
+
+export class Signal<T> {
+	public constructor(public initial: T) {
+		this.cursor = nextCursor();
+		if (!Signal.#memory.has(this.cursor)) {
+			Signal.#memory.set(this.cursor, { value: initial });
+		}
+		this.state = Signal.#memory.get(this.cursor) as SignalState<T>;
+	}
+	private state: SignalState<T>;
+	private cursor: number;
+
+	public get value(): T {
+		const reader = Signal.getCurrentReaderWithCursorId(this.cursor);
+		if (!Signal.#readers.has(reader)) {
+			Signal.#readers.add(reader);
+		}
+		return this.state.value;
+	}
+
+	public set value(v: T) {
+		this.state.value = v;
+		if (this.cursor) {
+			rerender(`${this.cursor}`, Signal.getReadersWithCursor(this.cursor));
+			console.log(this.cursor, current());
+		}
+
+		Signal.clearReaders();
+	}
+
+	static #memory = new Map<number, { value: unknown }>();
+	static #readers = new Set<string>();
+
+	private static clearReaders() {
+		Signal.#readers.clear();
+	}
+
+	private static getCurrentReaderWithCursorId(cursor: number) {
+		const callee = current();
+		callee?.cursors?.add(cursor.toString());
+		const c = (callee?.down?.length ?? 0) - 1;
+		return `${callee?.index}.${(c < 0 ? 0 : c).toString()}-${cursor}`;
+	}
+
+	private static getReadersWithCursor(cursor: number) {
+		return new Set(
+			Array.from(Signal.#readers)
+				.filter((r) => r.endsWith(`-${cursor}`))
+				.map((v) => v.split("-")[0])
+				.filter((v): v is string => v !== undefined),
+		);
+	}
+
+	public static create<T>(initial: T): [() => T, (v: T) => void] {
+		const cursor = nextCursor();
+		if (!Signal.#memory.has(cursor)) {
+			Signal.#memory.set(cursor, { value: initial });
+		}
+		const state = Signal.#memory.get(cursor) as SignalState<T>;
+
+		const read = () => {
+			const reader = Signal.getCurrentReaderWithCursorId(cursor);
+			if (!Signal.#readers.has(reader)) {
+				Signal.#readers.add(reader);
+			}
+			return state.value;
+		};
+
+		const write = (v: T) => {
+			state.value = v;
+			rerender(`${cursor}`, Signal.getReadersWithCursor(cursor));
+			Signal.clearReaders();
+		};
+
+		return [read, write];
+	}
+}

package/src/core/tree.ts

@@ -0,0 +1,20 @@
+import type { IComponent } from "./types/component";
+import type { IntrinsicElements } from "./types/html";
+
+const stack: IComponent<keyof IntrinsicElements>[] = [];
+
+export function current() {
+	return stack[stack.length - 1];
+}
+
+function _open(component: IComponent<keyof IntrinsicElements>) {
+	stack.push(component);
+}
+
+export function open(component: IComponent<any>) {
+	stack.push(component as IComponent<keyof IntrinsicElements>);
+}
+
+export function close() {
+	stack.pop();
+}

package/src/core/types/component.ts

@@ -0,0 +1,25 @@
+import type { IntrinsicElements } from "./html.js";
+
+export type StyleProp<P> = P extends { style?: infer ST }
+	? ST
+	: string | Partial<CSSStyleDeclaration>;
+
+export interface IComponent<K extends keyof IntrinsicElements> {
+	index: string;
+	props: IntrinsicElements[K];
+	cursors: Set<string>;
+	type: K;
+	down: IComponent<keyof IntrinsicElements>[];
+	up?: IComponent<keyof IntrinsicElements>;
+	view?: () => void;
+	body(fn: (component: this) => void): this;
+	onAppear(fn: (component: this) => void): this;
+	withProps<T extends Partial<IntrinsicElements[K]>>(newProps: T): this;
+	withStyle(style: StyleProp<IntrinsicElements[K]>): this;
+	withExtension(extension: (component: this) => void): this;
+}
+
+export interface IScreen<K extends keyof IntrinsicElements>
+	extends IComponent<K> {
+	render(): void;
+}

package/src/core/types/html.ts

@@ -0,0 +1,97 @@
+export type EventHandler<E = Event> = (event: E) => void;
+
+export type CommonProps = {
+	id?: string;
+	class?: string;
+	style?: Partial<CSSStyleDeclaration>;
+	title?: string;
+	hidden?: boolean;
+
+	onClick?: EventHandler<MouseEvent>;
+	onInput?: EventHandler<InputEvent>;
+	onChange?: EventHandler<Event>;
+	onFocus?: EventHandler<FocusEvent>;
+	onBlur?: EventHandler<FocusEvent>;
+	onKeyDown?: EventHandler<KeyboardEvent>;
+	onKeyUp?: EventHandler<KeyboardEvent>;
+
+	content?: string | number | (() => string | number);
+};
+
+export type ButtonProps = CommonProps & {
+	type?: "button" | "submit" | "reset";
+	disabled?: boolean;
+};
+
+export type InputProps = CommonProps & {
+	type?:
+		| "text"
+		| "email"
+		| "password"
+		| "number"
+		| "date"
+		| "time"
+		| "datetime-local"
+		| "month"
+		| "week"
+		| "url"
+		| "search"
+		| "tel"
+		| "color";
+	value?: string | number;
+	placeholder?: string;
+	required?: boolean;
+	onTextChange?: EventHandler<string>;
+};
+
+export type SemanticText = {
+	h1: CommonProps;
+	h2: CommonProps;
+	h3: CommonProps;
+	h4: CommonProps;
+	h5: CommonProps;
+	body: CommonProps;
+	p: CommonProps;
+	span: CommonProps;
+};
+
+export type IntrinsicElements = {
+	root: CommonProps;
+	div: CommonProps;
+	span: CommonProps;
+	semanticText: {
+		type: keyof SemanticText;
+		props: CommonProps;
+	};
+	animation: CommonProps;
+	button: ButtonProps;
+	input: InputProps;
+	form: CommonProps;
+	label: CommonProps;
+	a: CommonProps & { href?: string; target?: string };
+	img: CommonProps & { src: string; alt?: string };
+	textarea: CommonProps & { value?: string };
+	text: { text: string };
+};
+
+function isObject(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function isCommonProps(props: unknown): props is CommonProps {
+	if (!isObject(props)) return false;
+
+	if ("id" in props && typeof props.id !== "string") return false;
+	if ("class" in props && typeof props.class !== "string") return false;
+	if ("title" in props && typeof props.title !== "string") return false;
+	if ("hidden" in props && typeof props.hidden !== "boolean") return false;
+
+	if ("content" in props) {
+		const c = props.content;
+		const valid =
+			typeof c === "string" || typeof c === "number" || typeof c === "function";
+		if (!valid) return false;
+	}
+
+	return true;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./core/elements";
+export * from "./core/scheduler";
+export * from "./core/signals";

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"compilerOptions": {
+		"target": "es2019",
+		"module": "commonjs",
+		"declaration": true,
+		"outDir": "./dist",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true
+	},
+	"include": ["src"]
+}