@geektech/tsone 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Geek Tech Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,176 @@
+# TSone
+
+轻量级纯 TypeScript 前端框架，提供响应式系统、类组件、策略化渲染和路由能力。
+
+## 特性
+
+- 纯 TypeScript 实现，公开 API 提供类型定义
+- Bun 原生工具链：安装、测试、构建、示例服务和文档服务均由 Bun 驱动
+- 响应式系统：`reactive`、`effect`、`computed`
+- 面向对象组件模型：`Component<Props, State>`、生命周期、事件、插槽
+- 策略模式渲染层：文本、元素、组件、插槽按 VNode 类型分发
+- 内置路由：`createRouter`、`RouterView`、`RouterLink`
+- 轻量级运行时，生产包无外部运行时依赖
+
+## 安装
+
+```bash
+bun add @geektech/tsone
+```
+
+```bash
+pnpm add @geektech/tsone
+```
+
+## 快速开始
+
+```typescript
+import {
+  Component,
+  VNode,
+  createApp,
+  computed,
+  reactive,
+} from '@geektech/tsone';
+
+interface AppState {
+  count: number;
+  version: string;
+}
+
+class App extends Component<Record<string, never>, AppState> {
+  protected initState(): AppState {
+    return {
+      count: 0,
+      version: '0.0.1',
+    };
+  }
+
+  protected initStyles(): void {}
+
+  protected render(): VNode {
+    return {
+      tag: 'main',
+      props: { className: 'app' },
+      children: [
+        { tag: 'h1', children: ['TSone'] },
+        { tag: 'p', children: [`version: '{{version}}'`] },
+        {
+          tag: 'button',
+          listeners: {
+            click: () => {
+              this.state.count += 1;
+            },
+          },
+          children: [`count: {{count}}`],
+        },
+      ],
+    };
+  }
+}
+
+const state = reactive({ ready: true });
+const status = computed(() => (state.ready ? 'ready' : 'pending'));
+
+const app = createApp({ root: App, rootElement: '#app', state });
+app.mount();
+
+console.log(status.value);
+```
+
+## 路由
+
+```typescript
+import { Component, VNode, createApp } from '@geektech/tsone';
+import { RouterLink, RouterView, createRouter } from '@geektech/tsone/router';
+
+class Layout extends Component {
+  protected initState(): object {
+    return {};
+  }
+
+  protected initStyles(): void {}
+
+  protected render(): VNode {
+    return {
+      tag: 'main',
+      children: [
+        {
+          component: RouterLink,
+          props: { to: '/', children: ['首页'] },
+        },
+        {
+          component: RouterLink,
+          props: { to: '/users/42', children: ['用户'] },
+        },
+        { component: RouterView },
+      ],
+    };
+  }
+}
+
+const router = createRouter({
+  mode: 'history',
+  routes: [
+    { path: '/', component: HomePage },
+    { path: '/users/:id', component: UserPage, meta: { title: '用户详情' } },
+  ],
+});
+
+createApp({ root: Layout, rootElement: '#app' }).use(router).mount();
+```
+
+## 开发命令
+
+```bash
+bun install
+bun test
+bun run build
+bun run dev
+bun run docs
+```
+
+## 公开 API
+
+主入口 `@geektech/tsone`：
+
+- `createApp(options)`
+- `Component<Props, State>`
+- `VNode`
+- `h()` / `createComponent()` / `slot()`
+- `reactive()` / `readonly()`
+- `effect()` / `stop()`
+- `computed()`
+- `ref()` / `isRef()` / `unref()`
+- `version`，当前为 `0.0.1`
+
+路由入口 `@geektech/tsone/router`：
+
+- `createRouter({ routes, mode, base })`
+- `Router`
+- `RouterView`
+- `RouterLink`
+- `useRouter()`
+- `RouteRecord`
+- `RouteLocation`
+
+样式入口 `@geektech/tsone/style`：
+
+- `StyleManager`
+
+## 发布前检查
+
+```bash
+bun test
+bunx tsc --noEmit
+bun run build
+bun pm pack --dry-run
+```
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request。开源发布前请确保测试、类型检查和构建均通过。
+
+## 许可证
+
+[MIT](LICENSE)

package/dist/core/app.d.ts

@@ -0,0 +1,92 @@
+import { ComponentConstructor } from './component';
+import type { Router } from '../router';
+export interface Plugin {
+    install: (app: OneApp, ...args: unknown[]) => void;
+    onMounted?: (app: OneApp) => void;
+    onUpdated?: (app: OneApp) => void;
+    onBeforeUnmount?: (app: OneApp) => void;
+}
+export interface AppOptions<TState = Record<string, unknown>, TConfig = Record<string, unknown>> {
+    /** 根组件构造函数 */
+    root?: ComponentConstructor;
+    /** 应用挂载点 */
+    rootElement?: string | Element;
+    /** 全局状态 */
+    state?: TState;
+    /** 全局配置 */
+    config?: TConfig;
+}
+export interface AppContext<TConfig = Record<string, unknown>> {
+    app: OneApp;
+    version: string;
+    config: TConfig;
+    router?: Router;
+}
+export declare class OneApp<TState extends object = Record<string, unknown>, TConfig extends object = Record<string, unknown>> {
+    private options;
+    private container;
+    private rootInstance;
+    private mounted;
+    private templateEngine;
+    private readonly appContext;
+    private plugins;
+    private unmountedCallback?;
+    router?: Router;
+    constructor(options?: AppOptions<TState, TConfig>);
+    private handleError;
+    /**
+     * 渲染错误UI
+     */
+    private renderErrorUI;
+    /**
+     * 使用插件
+     */
+    use(plugin: Plugin, ...args: unknown[]): this;
+    /**
+     * 挂载应用
+     */
+    mount(): void;
+    /**
+     * 卸载应用
+     */
+    unmount(): void;
+    /**
+     * 应用是否正在运行
+     */
+    isRunning(): boolean;
+    /**
+     * 更新根组件
+     */
+    updateRootComponent(component: ComponentConstructor): void;
+    /**
+     * 更新应用状态
+     */
+    update(state?: Partial<TState>): this;
+    /**
+     * 获取应用上下文
+     */
+    getContext(): AppContext<TConfig>;
+    /**
+     * 获取应用状态
+     */
+    getState(): TState | undefined;
+    /**
+     * 设置应用状态
+     */
+    setState(newState: TState): this;
+    /**
+     * 监听应用卸载
+     */
+    onUnmounted(callback: () => void): this;
+    /**
+     * 解析根元素
+     */
+    private resolveRootElement;
+    private onMounted;
+    private onUpdated;
+    private onBeforeUnmount;
+}
+/**
+ * 创建应用实例
+ */
+export declare function createApp<TState extends object = Record<string, unknown>, TConfig extends object = Record<string, unknown>>(options?: AppOptions<TState, TConfig>): OneApp<TState, TConfig>;

package/dist/core/component/base.d.ts

@@ -0,0 +1,53 @@
+import { StyleManager } from '../../style/StyleManager';
+import { ComponentInstance } from '../renderer';
+import type { VNode } from '../vnode';
+export type ComponentProps = object;
+export type ComponentState = object;
+export type ComponentEventListener = (...args: unknown[]) => void;
+export type ComponentConstructor<TProps extends ComponentProps = ComponentProps, TState extends ComponentState = ComponentState> = new (props?: TProps) => Component<TProps, TState>;
+export type AnyComponentConstructor = new (props?: never) => Component<ComponentProps, ComponentState>;
+export declare abstract class Component<TProps extends ComponentProps = ComponentProps, TState extends ComponentState = ComponentState> implements ComponentInstance {
+    protected props: TProps;
+    private vnode;
+    private el;
+    private readonly renderer;
+    private readonly templateEngine;
+    private readonly childComponents;
+    private readonly eventListeners;
+    private readonly updateEffect;
+    private appContext;
+    protected styleManager: StyleManager;
+    state: TState;
+    mounted: boolean;
+    constructor(props?: TProps);
+    protected abstract initState(): TState;
+    protected abstract initStyles(): void;
+    protected abstract render(): VNode;
+    mount(container: HTMLElement): void;
+    mountToNode(): Node;
+    update(): void;
+    unmount(): void;
+    setProps(props: Partial<TProps>): void;
+    setState(state: Partial<TState>): void;
+    setAppContext(context: unknown): void;
+    getElement(): Node | null;
+    protected beforeMount(): void;
+    protected onMounted(): void;
+    protected beforeUpdate(): void;
+    protected onUpdated(): void;
+    protected beforeUnmount(): void;
+    protected onUnmounted(): void;
+    protected getContext(): unknown;
+    protected get router(): unknown;
+    protected emit(eventName: string, ...args: unknown[]): void;
+    on(eventName: string, listener: ComponentEventListener): void;
+    off(eventName: string, listener: ComponentEventListener): void;
+    private createRenderContext;
+    private collectSlots;
+    private getSlotName;
+    private normalizeSlotChild;
+    private trackStateProperties;
+    private getRouterFrom;
+    private getRouterFromGlobalApp;
+    private trackReactiveValue;
+}

package/dist/core/component/index.d.ts

@@ -0,0 +1,4 @@
+import { Component } from './base';
+import type { AnyComponentConstructor, ComponentConstructor, ComponentEventListener, ComponentProps, ComponentState } from './base';
+export { Component };
+export type { AnyComponentConstructor, ComponentConstructor, ComponentEventListener, ComponentProps, ComponentState, };

package/dist/core/component.d.ts

@@ -0,0 +1 @@
+export * from './component/index';

package/dist/core/index.d.ts

@@ -0,0 +1,6 @@
+export * from './app';
+export * from './component';
+export * from './reactive';
+export * from './vnode';
+export * from './template';
+export * from './renderer';

package/dist/core/reactive/types.d.ts

@@ -0,0 +1,19 @@
+export interface ReactiveEffect<T = unknown> {
+    (): T | undefined;
+    deps: Set<ReactiveEffect>[];
+    id: number;
+    active: boolean;
+    scheduler?: (effect: ReactiveEffect) => void;
+}
+export interface ReactiveEffectOptions {
+    lazy?: boolean;
+    scheduler?: (effect: ReactiveEffect) => void;
+}
+export interface ComputedRef<T> {
+    readonly value: T;
+}
+export declare const IS_REACTIVE: unique symbol;
+export declare const IS_READONLY: unique symbol;
+export declare const MUTATING_ARRAY_METHODS: readonly ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"];
+export declare function hasReactiveFlag(value: object, flag: typeof IS_REACTIVE | typeof IS_READONLY): boolean;
+export declare function isObject(value: unknown): value is object;

package/dist/core/reactive.d.ts

@@ -0,0 +1,31 @@
+import { ComputedRef, ReactiveEffect, ReactiveEffectOptions } from './reactive/types';
+export type { ComputedRef, ReactiveEffect, ReactiveEffectOptions, } from './reactive/types';
+export declare class ReactiveSystem {
+    private static instance;
+    private activeEffect;
+    private readonly effectStack;
+    private targetMap;
+    private reactiveMap;
+    private readonlyMap;
+    private constructor();
+    static getInstance(): ReactiveSystem;
+    reactive<T extends object>(target: T): T;
+    /**
+     * 创建响应式数组
+     */
+    private createReactiveArray;
+    readonly<T extends object>(target: T): Readonly<T>;
+    effect<T = unknown>(fn: () => T, options?: ReactiveEffectOptions): ReactiveEffect<T>;
+    computed<T>(getter: () => T): ComputedRef<T>;
+    private cleanup;
+    private track;
+    private trigger;
+    stop(effect: ReactiveEffect): void;
+}
+export declare function reactive<T extends object>(target: T): T;
+export declare function readonly<T extends object>(target: T): Readonly<T>;
+export declare function effect<T = unknown>(fn: () => T, options?: ReactiveEffectOptions): ReactiveEffect<T>;
+export declare function computed<T>(getter: () => T): ComputedRef<T>;
+export declare function stop(effect: ReactiveEffect): void;
+export declare function isReactive(value: unknown): boolean;
+export declare function isReadonly(value: unknown): boolean;

package/dist/core/renderer/props.d.ts

@@ -0,0 +1,9 @@
+export interface ParsedEventName {
+    eventName: string;
+    modifiers: Set<string>;
+}
+export declare function isEventProp(key: string): boolean;
+export declare function eventNameFromProp(key: string): string;
+export declare function parseEventName(event: string): ParsedEventName;
+export declare function wrapEventHandler(handler: (event: Event) => void, modifiers: Set<string>): EventListener;
+export declare function setStyleValue(style: CSSStyleDeclaration, property: string, value: string | number): void;

package/dist/core/renderer/types.d.ts

@@ -0,0 +1,31 @@
+import type { TemplateEngine } from '../template';
+import type { ComponentEventListener, ComponentProps } from '../component';
+import type { VNode } from '../vnode';
+export interface ComponentInstance {
+    mountToNode(): Node;
+    update(): void;
+    unmount(): void;
+    setProps(props: Partial<ComponentProps>): void;
+    setAppContext?(context: unknown): void;
+    getElement(): Node | null;
+    on(eventName: string, listener: ComponentEventListener): void;
+}
+export type Renderable = VNode | string;
+export interface RendererHost {
+    mount(vnode: Renderable, context: RenderRuntimeContext): Node;
+    patch(oldVNode: Renderable, newVNode: Renderable, currentNode: Node, context: RenderRuntimeContext): Node;
+    unmount(vnode: Renderable, currentNode: Node, context: RenderRuntimeContext): void;
+}
+export interface RenderRuntimeContext {
+    templateEngine: TemplateEngine;
+    appContext?: unknown;
+    renderer: RendererHost;
+    slots: Record<string, Array<VNode | string>>;
+    registerChild(component: ComponentInstance): void;
+}
+export interface RenderStrategy<T extends Renderable = Renderable> {
+    matches(vnode: Renderable): vnode is T;
+    mount(vnode: T, context: RenderRuntimeContext): Node;
+    patch(oldVNode: T, newVNode: T, currentNode: Node, context: RenderRuntimeContext): Node;
+    unmount(vnode: T, currentNode: Node, context: RenderRuntimeContext): void;
+}

package/dist/core/renderer.d.ts

@@ -0,0 +1,57 @@
+import { ComponentNode, HTMLNode, SlotProvider } from './vnode';
+export type { ComponentInstance, RenderRuntimeContext, RenderStrategy, Renderable, RendererHost, } from './renderer/types';
+import type { RenderRuntimeContext, RenderStrategy, Renderable } from './renderer/types';
+export declare class RendererContext {
+    private readonly strategies;
+    constructor();
+    mount(vnode: Renderable, context: RenderRuntimeContext): Node;
+    patch(oldVNode: Renderable, newVNode: Renderable, currentNode: Node, context: RenderRuntimeContext): Node;
+    unmount(vnode: Renderable, currentNode: Node, context: RenderRuntimeContext): void;
+    private findStrategy;
+}
+export declare class TextRenderStrategy implements RenderStrategy<string> {
+    matches(vnode: Renderable): vnode is string;
+    mount(vnode: string, context: RenderRuntimeContext): Node;
+    patch(oldVNode: string, newVNode: string, currentNode: Node, context: RenderRuntimeContext): Node;
+    unmount(): void;
+}
+export declare class ComponentRenderStrategy implements RenderStrategy<ComponentNode> {
+    private readonly instances;
+    matches(vnode: Renderable): vnode is ComponentNode;
+    mount(vnode: ComponentNode, context: RenderRuntimeContext): Node;
+    patch(oldVNode: ComponentNode, newVNode: ComponentNode, currentNode: Node, context: RenderRuntimeContext): Node;
+    unmount(_vnode: ComponentNode, currentNode: Node): void;
+    private createProps;
+}
+export declare class SlotRenderStrategy implements RenderStrategy<SlotProvider> {
+    private readonly renderedChildren;
+    matches(vnode: Renderable): vnode is SlotProvider;
+    mount(vnode: SlotProvider, context: RenderRuntimeContext): Node;
+    patch(oldVNode: SlotProvider, newVNode: SlotProvider, currentNode: Node, context: RenderRuntimeContext): Node;
+    unmount(_vnode: SlotProvider, currentNode: Node, context: RenderRuntimeContext): void;
+    private resolveChildren;
+    private replaceSlotChildren;
+    private mountSlotChildren;
+    private unmountSlotChildren;
+}
+export declare class ElementRenderStrategy implements RenderStrategy<HTMLNode> {
+    private readonly listeners;
+    private readonly effects;
+    private readonly modelBindings;
+    matches(vnode: Renderable): vnode is HTMLNode;
+    mount(vnode: HTMLNode, context: RenderRuntimeContext): Node;
+    patch(oldVNode: HTMLNode, newVNode: HTMLNode, currentNode: Node, context: RenderRuntimeContext): Node;
+    unmount(vnode: HTMLNode, currentNode: Node, context: RenderRuntimeContext): void;
+    private applyProps;
+    private applyDirections;
+    private updateChildren;
+    private updateKeyedChildren;
+    private hasKeyedChildren;
+    private getVNodeKey;
+    private collectListeners;
+    private updateListeners;
+    private setupReactiveAttribute;
+    private setupTwoWayBinding;
+    private getStateValue;
+    private trackEffect;
+}

package/dist/core/template.d.ts

@@ -0,0 +1,50 @@
+import { ReactiveEffect } from './reactive';
+export interface TemplateBinding {
+    node: Text;
+    originalText: string;
+    effect: ReactiveEffect;
+}
+export declare class TemplateEngine {
+    state: object;
+    private bindings;
+    private readonly templateRegex;
+    constructor(state: object);
+    /**
+     * 解析模板字符串，创建响应式的文本节点
+     * @param text 包含模板表达式的文本字符串
+     * @returns 创建的文本节点
+     */
+    parseTemplate(text: string): Text;
+    /**
+     * 设置响应式绑定
+     */
+    private setupReactiveBindings;
+    /**
+     * 计算模板文本的值
+     */
+    private evaluateTemplate;
+    /**
+     * 从状态对象中获取值，支持嵌套属性访问
+     */
+    private getValueFromState;
+    /**
+     * 清除所有模板绑定
+     */
+    clearBindings(): void;
+    /**
+     * 获取当前的绑定数量
+     */
+    getBindingCount(): number;
+    /**
+     * 检查模板是否包含表达式
+     */
+    hasExpressions(text: string): boolean;
+    /**
+     * 获取模板中的所有表达式键
+     */
+    extractKeys(text: string): string[];
+    /**
+     * 计算模板值
+     */
+    evaluateTemplateValue(text: string): string;
+}

package/dist/core/vnode.d.ts

@@ -0,0 +1,64 @@
+import type { AnyComponentConstructor, ComponentConstructor, ComponentEventListener, ComponentProps } from './component';
+export interface ComponentType {
+    mount(container: HTMLElement): void;
+    unmount(): void;
+    on(eventName: string, listener: ComponentEventListener): void;
+}
+type VNodeComponentProps = ComponentProps;
+export type VNodeComponentConstructor<P extends VNodeComponentProps = VNodeComponentProps> = ComponentConstructor<P> | AnyComponentConstructor;
+export type HTMLPropValue = string | number | boolean | null | undefined | Record<string, string | number> | EventListener;
+export interface HTMLProps {
+    [key: string]: HTMLPropValue;
+    class?: string;
+    className?: string;
+    style?: Record<string, string | number>;
+}
+export interface EventListeners {
+    [eventName: string]: (event: Event) => void;
+}
+export interface Directions {
+    model?: string;
+    if?: boolean;
+    show?: boolean;
+}
+export interface HTMLNode {
+    tag: string;
+    props?: HTMLProps;
+    children?: Array<VNode | string>;
+    listeners?: EventListeners;
+    key?: string | number;
+    slot?: string;
+    directions?: Directions;
+}
+export interface ComponentNode<P extends VNodeComponentProps = VNodeComponentProps> {
+    component: VNodeComponentConstructor<P>;
+    props?: P;
+    children?: Array<VNode | string>;
+    emitters?: Record<string, ComponentEventListener>;
+    key?: string | number;
+    slot?: string;
+    directions?: Directions;
+}
+export interface SlotProvider {
+    tag: 'slot';
+    props: {
+        name: string;
+    };
+    children?: Array<VNode | string>;
+    key?: string | number;
+    directions?: Directions;
+}
+export interface SlotInjector {
+    tag: string;
+    slot: string;
+    key?: string | number;
+    directions?: Directions;
+}
+export type VNode = HTMLNode | ComponentNode | SlotProvider | SlotInjector;
+export declare function isComponentNode(vnode: VNode): vnode is ComponentNode;
+export declare function isHTMLNode(vnode: VNode): vnode is HTMLNode;
+export declare function isSlotProvider(vnode: VNode): vnode is SlotProvider;
+export declare function h(tag: string, props?: HTMLProps, children?: Array<VNode | string>, listeners?: EventListeners, key?: string | number, directions?: Directions): HTMLNode;
+export declare function createComponent<P extends VNodeComponentProps>(componentClass: ComponentConstructor<P>, props?: P, children?: Array<VNode | string>, key?: string | number, directions?: Directions): ComponentNode<P>;
+export declare function slot(name: string, key?: string | number, directions?: Directions): SlotProvider;
+export {};