@geektech/tsone 0.1.0 → 0.2.1

package/README-zh.md

@@ -53,7 +53,7 @@ class App extends Component<Record<string, never>, AppState> {
   protected initState(): AppState {
     return {
       count: 0,
-      version: '0.0.2',
+      version: '0.2.1',
     };
   }
 
@@ -121,16 +121,35 @@ export default defineConfig({
 ```
 
 代理也支持字符串简写，例如 `{ '/backend': 'http://localhost:4000' }`。默认值为
-入口 `src/main.ts`、主机 `127.0.0.1`、端口 `52211`、空的 `server.proxy` 和
-输出目录 `dist`。
+入口 `src/main.ts`、主机 `127.0.0.1`、端口 `52211`、空的 `server.proxy`、输出
+目录 `dist`，且没有额外页面。
+
+多页应用可在同一配置文件里把路由映射到页面入口；每个页面入口与根入口一样，
+都要通过 `export const app` 暴露带有 `renderHtmlDocument()` 的应用：
+
+```typescript
+export default defineConfig({
+  entry: 'src/main.ts',
+  pages: {
+    '/about': 'src/about.ts',
+    '/docs/guide': 'src/guide.ts',
+  },
+});
+```
+
+`pages` 的键必须以 `/` 开头并支持嵌套；根路径 `/` 由 `entry` 提供。开发时每个
+页面在其路由下提供服务，`tsone build` 会为每个页面输出一个 HTML 文档
+（`index.html`、`about.html`、`docs/guide.html`），资源 URL 相对各文档。
 
 ```text
-tsone dev [--host <host>] [--port <port>]
+tsone dev [--host <host>] [--port <port>] [--no-watch]
 tsone build [--out-dir <path>]
 ```
 
-`dev` 只接受主机和端口覆盖，`build` 只接受输出目录覆盖；`--port 3000` 和
-`--port=3000` 两种形式均可。构建输出必须是项目根目录内部的安全子目录。
+`dev` 接受主机、端口覆盖和 `--no-watch`；`build` 只接受输出目录覆盖；
+`--port 3000` 和 `--port=3000` 两种形式均可。`tsone dev` 默认监听项目文件，
+文件变化时通过 `/__tsone/reload` 通知浏览器刷新。构建输出必须是项目根目录内部
+的安全子目录。
 
 编程式工具 API 来自 `@geektech/tsone-cli`，而不是框架主入口。该包导出
 `defineConfig`、`resolveConfig`、`startDevServer` 与 `build`。调用方负责开发
@@ -283,7 +302,7 @@ const html = app.renderHtmlDocument({
 - `effect()` / `stop()`
 - `computed()`
 - `ref()` / `isRef()` / `unref()`
-- `version`，当前为 `0.0.2`
+- `version`，当前为 `0.2.1`
 
 ## 渲染、通信与表单
 

package/README.md

@@ -58,7 +58,7 @@ class App extends Component<Record<string, never>, AppState> {
   protected initState(): AppState {
     return {
       count: 0,
-      version: '0.0.2',
+      version: '0.2.1',
     };
   }
 
@@ -130,16 +130,38 @@ export default defineConfig({
 
 The string proxy shorthand is also supported, for example
 `{ '/backend': 'http://localhost:4000' }`. Defaults are `src/main.ts`,
-`127.0.0.1`, port `52211`, an empty `server.proxy`, and `dist`.
+`127.0.0.1`, port `52211`, an empty `server.proxy`, `dist`, and no additional
+pages.
+
+Multi-page applications map routes to page entries in the same config file;
+each page entry exposes `app` with `renderHtmlDocument()` exactly like the root
+entry:
+
+```typescript
+export default defineConfig({
+  entry: 'src/main.ts',
+  pages: {
+    '/about': 'src/about.ts',
+    '/docs/guide': 'src/guide.ts',
+  },
+});
+```
+
+`pages` keys must start with `/` and may nest; the root `/` is served by
+`entry`. During development each page is served at its route, and `tsone build`
+emits one HTML document per page (`index.html`, `about.html`,
+`docs/guide.html`) with page-relative asset URLs.
 
 ```text
-tsone dev [--host <host>] [--port <port>]
+tsone dev [--host <host>] [--port <port>] [--no-watch]
 tsone build [--out-dir <path>]
 ```
 
-`dev` accepts host/port overrides and `build` accepts the output-directory
-override; both `--port 3000` and `--port=3000` forms are valid. Build output
-must remain a safe child directory inside the project root.
+`dev` accepts host/port overrides and `--no-watch`; `build` accepts the
+output-directory override; both `--port 3000` and `--port=3000` forms are
+valid. `tsone dev` watches the project by default and notifies browsers to
+reload over `/__tsone/reload` when a watched file changes. Build output must
+remain a safe child directory inside the project root.
 
 Programmatic tooling is imported from `@geektech/tsone-cli`, not from the
 framework root. It exports `defineConfig`, `resolveConfig`, `startDevServer`,
@@ -303,7 +325,7 @@ The main `@geektech/tsone` entry point exports:
 - `effect()` / `stop()`
 - `computed()`
 - `ref()` / `isRef()` / `unref()`
-- `version`, currently `0.0.2`
+- `version`, currently `0.2.1`
 
 ## Rendering, Communication, and Forms
 

package/dist/dom/index.d.ts

@@ -0,0 +1,534 @@
+/**
+ * 零依赖最小 DOM 实现。
+ *
+ * 供 SSR（CLI 项目渲染、docs 静态构建）与测试环境使用，
+ * 覆盖 TSone 框架与测试实际依赖的 DOM 面（节点树、事件、CSS 选择器、
+ * innerHTML 序列化/解析、history/location/localStorage 等）。
+ * 仅面向本项目所需场景，不追求完整浏览器兼容。
+ */
+export declare const enum DomNodeType {
+    ELEMENT_NODE = 1,
+    TEXT_NODE = 3,
+    COMMENT_NODE = 8,
+    DOCUMENT_NODE = 9,
+    DOCUMENT_FRAGMENT_NODE = 11
+}
+export declare class DOMException extends Error {
+    readonly code: number;
+    constructor(message: string, name?: string);
+}
+type EventListenerRecord = ((event: Event) => void) | {
+    handleEvent(event: Event): void;
+};
+interface ListenerEntry {
+    listener: EventListenerRecord;
+    capture: boolean;
+    once: boolean;
+    passive: boolean;
+}
+/**
+ * EventTarget 基类：addEventListener / removeEventListener / dispatchEvent。
+ */
+export declare class EventTarget {
+    private readonly listenerMap;
+    addEventListener(type: string, listener: EventListenerRecord | null, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerRecord | null, options?: boolean | EventListenerOptions): void;
+    dispatchEvent(event: Event): boolean;
+    /** @internal 返回本节点的监听器。 */
+    getListeners(type: string): ListenerEntry[];
+}
+export declare class Event {
+    static readonly NONE = 0;
+    static readonly CAPTURING_PHASE = 1;
+    static readonly AT_TARGET = 2;
+    static readonly BUBBLING_PHASE = 3;
+    readonly type: string;
+    readonly bubbles: boolean;
+    readonly cancelable: boolean;
+    readonly composed: boolean;
+    target: EventTarget | null;
+    currentTarget: EventTarget | null;
+    eventPhase: number;
+    defaultPrevented: boolean;
+    readonly isTrusted = false;
+    readonly timeStamp: number;
+    cancelBubble: boolean;
+    /** @internal */
+    dispatched: boolean;
+    /** @internal */
+    private propagationStopped;
+    /** @internal */
+    private immediateStopped;
+    /** @internal */
+    private canceled;
+    constructor(type: string, init?: EventInit);
+    preventDefault(): void;
+    stopPropagation(): void;
+    stopImmediatePropagation(): void;
+    /** @internal */
+    propagationPrevented(): boolean;
+    /** @internal */
+    immediatePrevented(): boolean;
+    /** @internal */
+    wasCanceled(): boolean;
+}
+export declare class CustomEvent<T = unknown> extends Event {
+    readonly detail: T;
+    constructor(type: string, init?: CustomEventInit<T>);
+}
+export declare class MouseEvent extends Event {
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly button: number;
+    readonly buttons: number;
+    readonly relatedTarget: unknown;
+    constructor(type: string, init?: MouseEventInit);
+}
+export declare class KeyboardEvent extends Event {
+    readonly key: string;
+    readonly code: string;
+    constructor(type: string, init?: KeyboardEventInit);
+}
+export declare class DOMTokenList implements Iterable<string> {
+    private readonly element;
+    private readonly attributeName;
+    constructor(element: Element, attributeName?: string);
+    get length(): number;
+    get value(): string;
+    set value(value: string);
+    item(index: number): string | null;
+    contains(token: string): boolean;
+    add(...tokens: string[]): void;
+    remove(...tokens: string[]): void;
+    toggle(token: string, force?: boolean): boolean;
+    replace(oldToken: string, newToken: string): boolean;
+    [Symbol.iterator](): Iterator<string>;
+    forEach(callback: (value: string, index: number, list: DOMTokenList) => void): void;
+    toString(): string;
+    private tokens;
+    private setTokens;
+}
+/**
+ * 创建 CSSStyleDeclaration 代理，支持任意 camelCase 属性访问与赋值。
+ */
+export declare function createStyleDeclaration(): CSSStyleDeclaration;
+/**
+ * 类数组节点列表：支持 .length、.item()、数值索引与迭代。
+ */
+export declare class NodeList<T extends Node = Node> implements Iterable<T> {
+    /** @internal */
+    private readonly items;
+    constructor(items?: T[]);
+    get length(): number;
+    item(index: number): T | null;
+    [Symbol.iterator](): Iterator<T>;
+    forEach(callback: (value: T, index: number, list: NodeList<T>) => void): void;
+    entries(): IterableIterator<[number, T]>;
+    keys(): IterableIterator<number>;
+    values(): IterableIterator<T>;
+    toArray(): T[];
+}
+/**
+ * Node 基类：节点树、父子关系、文本内容。
+ */
+export declare class Node extends EventTarget {
+    static readonly ELEMENT_NODE = DomNodeType.ELEMENT_NODE;
+    static readonly TEXT_NODE = DomNodeType.TEXT_NODE;
+    static readonly COMMENT_NODE = DomNodeType.COMMENT_NODE;
+    static readonly DOCUMENT_NODE = DomNodeType.DOCUMENT_NODE;
+    static readonly DOCUMENT_FRAGMENT_NODE = DomNodeType.DOCUMENT_FRAGMENT_NODE;
+    readonly nodeType: number;
+    readonly nodeName: string;
+    parentNode: Node | null;
+    ownerDocument: Document | null;
+    /** @internal */
+    childList: Node[];
+    constructor(nodeType: number, nodeName: string);
+    get parentElement(): Element | null;
+    get childNodes(): NodeList<Node>;
+    get firstChild(): Node | null;
+    get lastChild(): Node | null;
+    get nextSibling(): Node | null;
+    get previousSibling(): Node | null;
+    get textContent(): string;
+    set textContent(value: string);
+    hasChildNodes(): boolean;
+    appendChild<T extends Node>(node: T): T;
+    insertBefore<T extends Node>(node: T, reference: Node | null): T;
+    removeChild<T extends Node>(node: T): T;
+    replaceChild<T extends Node>(newChild: T, oldChild: Node): T;
+    replaceChildren(...nodes: Node[]): void;
+    contains(node: Node | null): boolean;
+    remove(): void;
+    cloneNode(deep?: boolean): Node;
+    /** @internal */
+    protected createClone(): Node;
+    getRootNode(): Node;
+    isConnected(): boolean;
+}
+/**
+ * Element：标签节点。
+ */
+export declare class Element extends Node {
+    readonly namespaceURI: string | null;
+    /** @internal */
+    private readonly attributeList;
+    /** @internal */
+    private styleValue;
+    /** @internal */
+    private classListValue;
+    /** @internal */
+    private datasetProxy;
+    constructor(tagName: string, namespaceURI?: string | null);
+    get tagName(): string;
+    get localName(): string;
+    get id(): string;
+    set id(value: string);
+    get className(): string;
+    set className(value: string);
+    get classList(): DOMTokenList;
+    get style(): CSSStyleDeclaration;
+    get dataset(): Record<string, string>;
+    get children(): NodeList<Element>;
+    get firstElementChild(): Element | null;
+    get lastElementChild(): Element | null;
+    get childElementCount(): number;
+    get attributes(): NamedNodeMap;
+    getAttribute(name: string): string | null;
+    getAttributeNames(): string[];
+    setAttribute(name: string, value: unknown): void;
+    removeAttribute(name: string): void;
+    hasAttribute(name: string): boolean;
+    toggleAttribute(name: string, force?: boolean): boolean;
+    hasAttributes(): boolean;
+    get innerHTML(): string;
+    set innerHTML(value: string);
+    get outerHTML(): string;
+    get value(): string;
+    set value(value: string);
+    querySelector(selector: string): Element | null;
+    querySelectorAll(selector: string): NodeList<Element>;
+    getElementsByTagName(tagName: string): NodeList<Element>;
+    matches(selector: string): boolean;
+    closest(selector: string): Element | null;
+    getBoundingClientRect(): DOMRect;
+    scrollIntoView(): void;
+    focus(): void;
+    blur(): void;
+    click(): void;
+    append(...nodes: (Node | string)[]): void;
+    prepend(...nodes: (Node | string)[]): void;
+    before(...nodes: (Node | string)[]): void;
+    after(...nodes: (Node | string)[]): void;
+    replaceWith(...nodes: (Node | string)[]): void;
+    setAttributeNS(_namespace: string, name: string, value: unknown): void;
+    removeAttributeNS(_namespace: string, name: string): void;
+    hasAttributeNS(_namespace: string, name: string): boolean;
+    getAttributeNS(_namespace: string, name: string): string | null;
+    /** @internal */
+    findAttribute(name: string): {
+        name: string;
+        value: string;
+    } | undefined;
+    /** @internal */
+    attributeEntries(): Array<{
+        name: string;
+        value: string;
+    }>;
+    /** @internal 供序列化读取内联样式。 */
+    inlineStyleText(): string;
+    /** @internal */
+    protected createClone(): Node;
+}
+export declare class HTMLElement extends Element {
+    constructor(tagName: string);
+}
+export declare class NamedNodeMap implements Iterable<{
+    name: string;
+    value: string;
+}> {
+    private readonly element;
+    constructor(element: Element);
+    get length(): number;
+    item(index: number): {
+        name: string;
+        value: string;
+    } | null;
+    getNamedItem(name: string): {
+        name: string;
+        value: string;
+    } | null;
+    setNamedItem(attr: {
+        name: string;
+        value: string;
+    }): void;
+    removeNamedItem(name: string): void;
+    [Symbol.iterator](): Iterator<{
+        name: string;
+        value: string;
+    }>;
+}
+export declare class HTMLOptionElement extends HTMLElement {
+    /** @internal */
+    private selectedValue;
+    constructor(tagName?: string);
+    get value(): string;
+    set value(value: string);
+    get text(): string;
+    get label(): string;
+    get selected(): boolean;
+    set selected(value: boolean);
+    /** @internal */
+    setSelectedRaw(value: boolean): void;
+    /** @internal */
+    hasSelectedValue(): boolean;
+}
+export declare class HTMLSelectElement extends HTMLElement {
+    constructor(tagName?: string);
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    get options(): HTMLOptionsCollection;
+    get selectedOptions(): NodeList<HTMLOptionElement>;
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    get value(): string;
+    set value(value: string);
+    add(option: HTMLOptionElement): void;
+    removeOption(index: number): void;
+}
+export declare class HTMLOptionsCollection implements Iterable<HTMLOptionElement> {
+    private readonly items;
+    constructor(items: HTMLOptionElement[]);
+    get length(): number;
+    item(index: number): HTMLOptionElement | null;
+    get value(): string;
+    get selectedIndex(): number;
+    toArray(): HTMLOptionElement[];
+    [Symbol.iterator](): Iterator<HTMLOptionElement>;
+}
+export declare class HTMLInputElement extends HTMLElement {
+    /** @internal */
+    private inputValue;
+    /** @internal */
+    private checkedValue;
+    constructor(tagName?: string);
+    get type(): string;
+    set type(value: string);
+    get name(): string;
+    set name(value: string);
+    get value(): string;
+    set value(value: string);
+    get defaultValue(): string;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @internal */
+    protected createClone(): Node;
+}
+export declare class HTMLTextAreaElement extends HTMLElement {
+    /** @internal */
+    private textareaValue;
+    constructor(tagName?: string);
+    get value(): string;
+    set value(value: string);
+}
+export declare class HTMLButtonElement extends HTMLElement {
+    constructor(tagName?: string);
+    get type(): string;
+}
+export declare class HTMLStyleElement extends HTMLElement {
+    constructor(tagName?: string);
+}
+export declare class HTMLAnchorElement extends HTMLElement {
+    constructor(tagName?: string);
+    get href(): string;
+    set href(value: string);
+}
+export declare class Text extends Node {
+    data: string;
+    constructor(data?: string);
+    get nodeValue(): string;
+    set nodeValue(value: string);
+    get textContent(): string;
+    set textContent(value: string);
+    get wholeText(): string;
+    /** @internal */
+    protected createClone(): Node;
+}
+export declare class Comment extends Node {
+    data: string;
+    constructor(data?: string);
+    get nodeValue(): string;
+    set nodeValue(value: string);
+    /** @internal */
+    protected createClone(): Node;
+}
+export declare class DocumentFragment extends Node {
+    constructor();
+}
+export declare class Document extends Node {
+    readonly defaultView: DomWindow | null;
+    constructor();
+    createElement(tagName: string): HTMLElement;
+    createElementNS(namespaceURI: string, tagName: string): HTMLElement;
+    createTextNode(data: string): Text;
+    createComment(data: string): Comment;
+    createDocumentFragment(): DocumentFragment;
+    createEvent(type: string): Event;
+    get documentElement(): HTMLElement;
+    get head(): HTMLElement;
+    get body(): HTMLElement;
+    get title(): string;
+    set title(value: string);
+    querySelector(selector: string): Element | null;
+    querySelectorAll(selector: string): NodeList<Element>;
+    getElementById(id: string): Element | null;
+    getElementsByTagName(tagName: string): NodeList<Element>;
+    /** @internal */
+    protected createClone(): Node;
+    private ensureDocumentChild;
+}
+/**
+ * History / Location / Storage 等浏览器环境对象。
+ */
+export declare class Location {
+    /** @internal */
+    private url;
+    constructor(url: string);
+    get href(): string;
+    set href(value: string);
+    get origin(): string;
+    get protocol(): string;
+    get host(): string;
+    get hostname(): string;
+    get port(): string;
+    get pathname(): string;
+    set pathname(value: string);
+    get search(): string;
+    set search(value: string);
+    get hash(): string;
+    set hash(value: string);
+    get username(): string;
+    get password(): string;
+    assign(value: string): void;
+    replace(value: string): void;
+    reload(): void;
+    toString(): string;
+    /** @internal */
+    getHashPath(): string;
+    /** @internal */
+    getHrefWithoutHash(): string;
+}
+export declare class History {
+    /** @internal */
+    private readonly windowRef;
+    /** @internal */
+    private entries;
+    /** @internal */
+    private index;
+    /** @internal */
+    scrollRestoration: 'auto' | 'manual';
+    constructor(windowRef: DomWindow);
+    get length(): number;
+    get state(): unknown;
+    pushState(state: unknown, _unusedTitle: string, url?: string): void;
+    replaceState(state: unknown, _unusedTitle: string, url?: string): void;
+    back(): void;
+    forward(): void;
+    go(delta?: number): void;
+}
+export declare class Storage {
+    private readonly store;
+    get length(): number;
+    key(index: number): string | null;
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+    clear(): void;
+}
+export declare class Navigator {
+    readonly userAgent = "TSone/0.2.1";
+    readonly platform = "TSone";
+    readonly language = "zh-CN";
+    readonly languages: string[];
+    readonly onLine = true;
+    readonly maxTouchPoints = 0;
+}
+export interface MediaQueryList {
+    readonly media: string;
+    readonly matches: boolean;
+    onchange: ((event: Event) => void) | null;
+    addEventListener(type: string, listener: EventListenerRecord): void;
+    removeEventListener(type: string, listener: EventListenerRecord): void;
+    addListener(listener: EventListenerRecord): void;
+    removeListener(listener: EventListenerRecord): void;
+    dispatchEvent(event: Event): boolean;
+}
+export declare function createMatchMedia(_windowRef: DomWindow, query: string): MediaQueryList;
+export declare class ResizeObserver {
+    observe(): void;
+    unobserve(): void;
+    disconnect(): void;
+}
+export declare const DOM_GLOBAL_KEYS: readonly string[];
+/**
+ * DomWindow：模拟的浏览器 window 环境。
+ */
+export declare class DomWindow extends EventTarget {
+    readonly window: DomWindow;
+    readonly document: Document;
+    readonly location: Location;
+    readonly history: History;
+    readonly localStorage: Storage;
+    readonly navigator: Navigator;
+    readonly Node: typeof Node;
+    readonly Text: typeof Text;
+    readonly Comment: typeof Comment;
+    readonly Element: typeof Element;
+    readonly HTMLElement: typeof HTMLElement;
+    readonly HTMLInputElement: typeof HTMLInputElement;
+    readonly HTMLTextAreaElement: typeof HTMLTextAreaElement;
+    readonly HTMLSelectElement: typeof HTMLSelectElement;
+    readonly HTMLButtonElement: typeof HTMLButtonElement;
+    readonly HTMLOptionElement: typeof HTMLOptionElement;
+    readonly HTMLStyleElement: typeof HTMLStyleElement;
+    readonly HTMLAnchorElement: typeof HTMLAnchorElement;
+    readonly DocumentFragment: typeof DocumentFragment;
+    readonly Document: typeof Document;
+    readonly Event: typeof Event;
+    readonly MouseEvent: typeof MouseEvent;
+    readonly KeyboardEvent: typeof KeyboardEvent;
+    readonly CustomEvent: typeof CustomEvent;
+    readonly EventTarget: typeof EventTarget;
+    readonly DOMException: typeof DOMException;
+    readonly NodeList: typeof NodeList;
+    constructor(options?: {
+        url?: string;
+    });
+    matchMedia(query: string): MediaQueryList;
+    getComputedStyle(element: Element): CSSStyleDeclaration;
+    requestAnimationFrame(callback: FrameRequestCallback): number;
+    cancelAnimationFrame(handle: number): void;
+    /** @internal */
+    setLocationUrl(url: string): void;
+    /** @internal 安装到目标对象上的全局属性名。 */
+    installKeys(): string[];
+}
+export interface DomWindowOptions {
+    url?: string;
+}
+/**
+ * 创建隔离的 DOM window 环境。
+ */
+export declare function createDomWindow(options?: DomWindowOptions): DomWindow;
+/**
+ * 将 DOM window 的全局属性安装到目标对象（默认 globalThis），
+ * 返回可恢复旧值的函数。
+ */
+export declare function installDomGlobals(windowRef: DomWindow, target?: Record<string, unknown>): () => void;
+/**
+ * 解析 HTML 片段为节点列表（innerHTML setter 用）。
+ */
+export declare function parseHtmlFragment(source: string, documentRef: Document | null): Node[];
+export {};