init: @ui-arch 私人组件库 monorepo

- core/table-core: Headless 表格内核(排序/筛选/分页/选择插件 + 冒烟 9 项)
- core/frame: signal/computed/effect + hyperscript 微框架(零依赖)
- skin/ui: 16 个 DOM 组件(含自绘 select、滑动指示条 tabs、行选择 dataTable、form 表单校验)
- design/tokens: --ua-* 设计令牌(light/dark)
- tools/cli: ua 命令行(index/list/info/docs/style/mcp)+ MCP 注册表服务
- apps: demo 演示站(esbuild 单文件)+ docs 双轨文档(人类版 + llms-full.txt)
This commit is contained in:
shawn
2026-10-23 14:58:10 +08:00
committed by HIsheR
parent a186d71412
commit 0de9b6e66e
59 changed files with 5293 additions and 0 deletions
+70
View File
@@ -0,0 +1,70 @@
import { effect } from './signal.js';
type Child = Node | string | number | boolean | null | undefined | (() => unknown);
type Props = Record<string, unknown>;
/*** 响应式属性绑定:函数值属性在依赖变化时自动写回 DOM ***/
function bindProp(el: HTMLElement, key: string, fn: () => unknown): void {
effect(() => {
const v = fn();
if (key === 'value') (el as unknown as HTMLInputElement).value = String(v);
else if (key === 'checked') (el as unknown as HTMLInputElement).checked = Boolean(v);
else if (v === false || v == null) el.removeAttribute(key);
else el.setAttribute(key, v === true ? '' : String(v));
});
}
/*** 静态属性写入:false / null 移除属性,true 置空标记属性 ***/
function bindStatic(el: HTMLElement, key: string, value: unknown): void {
if (value === false || value == null) el.removeAttribute(key);
else if (value === true) el.setAttribute(key, '');
else el.setAttribute(key, String(value));
}
/*** 挂载子节点:函数型子节点转为响应式文本节点 ***/
function appendChild(el: HTMLElement, child: unknown): void {
if (child == null || child === false) return;
if (typeof child === 'function') {
const node = document.createTextNode('');
effect(() => {
node.textContent = String(child());
});
el.append(node);
} else if (typeof child === 'object') {
el.append(child as Node);
} else {
el.append(String(child));
}
}
/*** hyperscript 入口:h(tag, props, ...children);on* 为事件,函数值为响应式属性 ***/
export function h(tag: string, props?: Props | null, ...children: unknown[]): HTMLElement {
const el = document.createElement(tag);
for (const [key, value] of Object.entries(props ?? {})) {
if (key.startsWith('on') && typeof value === 'function') {
el.addEventListener(key.slice(2).toLowerCase(), value as EventListener);
} else if (typeof value === 'function') {
bindProp(el, key, value as () => unknown);
} else if (key === 'class') {
el.className = String(value);
} else {
bindStatic(el, key, value);
}
}
for (const child of children.flat(Infinity)) appendChild(el, child);
return el;
}
/*** 列表渲染:信号变化时整体替换容器子节点(tbody / 列表等场景) ***/
export function renderList(el: HTMLElement, fn: () => Node[]): void {
effect(() => {
el.replaceChildren(...fn());
});
}
/*** 挂载视图到容器;容器不存在时静默跳过 ***/
export function mount(target: Element | string, view: () => Node): void {
const root = typeof target === 'string' ? document.querySelector(target) : target;
if (!root) return; // 卫语句:容器不存在
root.replaceChildren(view());
}
+2
View File
@@ -0,0 +1,2 @@
export * from './signal.js';
export * from './dom.js';
+49
View File
@@ -0,0 +1,49 @@
// 当前正在收集依赖的 effect;null 表示非追踪态
let active: (() => void) | null = null;
/*** 响应式信号:无参调用读值并收集依赖,传参写值并触发订阅 ***/
export interface Signal<T> {
(): T;
(value: T): void;
}
/*** 创建信号:框架状态的最小单元 ***/
export function signal<T>(initial: T): Signal<T> {
let value = initial;
const subs = new Set<() => void>();
const read = (...args: unknown[]) => {
if (args.length === 0) {
if (active) subs.add(active); // 依赖收集
return value;
}
const v = args[0] as T;
if (Object.is(v, value)) return; // 值未变不触发
value = v;
for (const fn of [...subs]) fn(); // 拷贝后触发,防遍历中修改
};
return read as Signal<T>;
}
/*** 副作用:立即执行一次并追踪内部读取的信号,依赖变化自动重跑 ***/
export function effect(fn: () => void): () => void {
const run = () => {
const prev = active;
active = run;
try {
fn();
} finally {
active = prev;
}
};
run();
return () => {
/* 演示级实现:不做依赖清理 */
};
}
/*** 计算值:由信号派生的只读视图,同样参与上层依赖收集 ***/
export function computed<T>(fn: () => T): () => T {
const out = signal<T>(undefined as T);
effect(() => out(fn()));
return () => out();
}