@geektech/tsone 0.0.2 → 0.1.0

package/README.md

@@ -1,34 +1,44 @@
 # TSone
 
-轻量级纯 TypeScript 前端框架，提供响应式系统、类组件、策略化渲染和路由能力。
+English | [简体中文](./README-zh.md)
 
-## 特性
+A lightweight frontend framework written entirely in TypeScript, with
+reactivity, class-based components, strategy-driven rendering, and routing.
 
-- 纯 TypeScript 实现，TypeScript为第一公民，公开 API 提供类型定义
-- Bun 原生工具链：安装、测试、构建、示例服务和文档服务均由 Bun 驱动
-- 文档内容由 TSone 的 TypeScript typed content registry 提供
-- 响应式系统：`reactive`、`effect`、`computed`
-- 面向对象组件模型：`Component<Props, State>`、生命周期、事件、插槽
-- 策略模式渲染层：文本、元素、组件、插槽按 VNode 类型分发
-- 内置路由：`createRouter`、`RouterView`、`RouterLink`
-- 轻量级运行时，生产包无外部运行时依赖
+## Features
 
-## 仓库结构
+- TypeScript-first implementation with typed public APIs
+- Bun-native tooling for installation, testing, builds, playgrounds, and docs
+- Documentation backed by a TypeScript typed-content registry
+- Reactive primitives: `reactive`, `effect`, and `computed`
+- Object-oriented components with `Component<Props, State>`, lifecycle hooks,
+  events, and slots
+- Strategy-based rendering that dispatches text, elements, components, and
+  slots by VNode type
+- Built-in routing with `createRouter`, `RouterView`, and `RouterLink`
+- Lightweight runtime with no external production dependencies
 
-本仓库是 Bun workspace monorepo，当前发布包位于 `packages/tsone/`。
-根目录命令会代理到该包，包内仍保留自己的源码、测试、示例、文档和发布配置。
+## Repository Structure
 
-## 安装
+This repository is a Bun workspace monorepo with two published packages:
+`packages/tsone/` contains the browser framework `@geektech/tsone`, and
+`packages/tsone-cli/` contains the Bun-native development tooling
+`@geektech/tsone-cli`. Standalone example projects live in the root
+`playground/` directory.
+
+## Installation
 
 ```bash
-bun add @geektech/tsone
+bun add @geektech/tsone @geektech/tsone-cli
 ```
 
 ```bash
-pnpm add @geektech/tsone
+pnpm add @geektech/tsone @geektech/tsone-cli
 ```
 
-## 快速开始
+The framework and CLI require Bun `>=1.3.0` for the documented workflow.
+
+## Quick Start
 
 ```typescript
 import {
@@ -78,13 +88,73 @@ class App extends Component<Record<string, never>, AppState> {
 const state = reactive({ ready: true });
 const status = computed(() => (state.ready ? 'ready' : 'pending'));
 
-const app = createApp({ root: App, rootElement: '#app', state });
+const app = createApp({ root: App, state });
 app.mount();
 
 console.log(status.value);
 ```
 
-## 路由
+`createApp` uses `#app` as its default mount target, so an application can call
+`app.mount()` immediately after creation. If the target is not currently in the
+document, `mount()` safely skips that attempt. Pass `rootElement` only when you
+need to override the default target.
+
+## Development Tooling
+
+The separate `@geektech/tsone-cli` package provides `tsone dev` and
+`tsone build`. Its default entry is `src/main.ts`; that module must expose the
+application as `export const app`, and the value must provide
+`renderHtmlDocument()`.
+
+Create an optional `tsone.config.ts` at the project root:
+
+The config file supports only a plain-object default export; functional or
+function-valued config is not supported.
+
+```typescript
+import { defineConfig } from '@geektech/tsone-cli';
+
+export default defineConfig({
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+  build: { outDir: 'dist' },
+});
+```
+
+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`.
+
+```text
+tsone dev [--host <host>] [--port <port>]
+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.
+
+Programmatic tooling is imported from `@geektech/tsone-cli`, not from the
+framework root. It exports `defineConfig`, `resolveConfig`, `startDevServer`,
+and `build`. The dev server is owned by the caller, which must call
+`server.stop()`; `build()` returns absolute `root` and `outDir` values plus
+`assetsBuilt`.
+
+The development server serves HTTP only. Proxy targets may use HTTP or HTTPS.
+Rules use literal prefix matching with the longest match first, retain
+query/body/end-to-end headers, optionally apply `changeOrigin` and `rewrite`,
+and return `502 Bad Gateway` when the upstream is unreachable. CLI v1 has no
+config plugins, WebSocket, HMR, SSR, functional config, `public/` copying, or
+public minify/sourcemap settings.
+
+## Routing
 
 ```typescript
 import { Component, VNode, createApp } from '@geektech/tsone';
@@ -103,11 +173,11 @@ class Layout extends Component {
       children: [
         {
           component: RouterLink,
-          props: { to: '/', children: ['首页'] },
+          props: { to: '/', children: ['Home'] },
         },
         {
           component: RouterLink,
-          props: { to: '/users/42', children: ['用户'] },
+          props: { to: '/users/42', children: ['User'] },
         },
         { component: RouterView },
       ],
@@ -119,14 +189,18 @@ const router = createRouter({
   mode: 'history',
   routes: [
     { path: '/', component: HomePage },
-    { path: '/users/:id', component: UserPage, meta: { title: '用户详情' } },
+    {
+      path: '/users/:id',
+      component: UserPage,
+      meta: { title: 'User Details' },
+    },
   ],
 });
 
-createApp({ root: Layout, rootElement: '#app' }).use(router).mount();
+createApp({ root: Layout }).use(router).mount();
 ```
 
-## 开发命令
+## Development Commands
 
 ```bash
 bun install
@@ -137,18 +211,47 @@ bun run docs
 bun run docs:build
 ```
 
-文档站点内容维护在 `packages/tsone/docs/app/content/*.ts` 的 typed content registry 中。
+The root `playground/` directory contains two standalone projects:
 
-生成静态文档产物：
+```bash
+bun run dev
+bun run dev:site
+bun run dev:admin
+```
+
+- `playground/official-site`: product website example
+- `playground/admin-dashboard`: admin dashboard example
+
+Documentation content is maintained in the typed-content registry. Chinese
+content lives in `packages/tsone/docs/app/content/zh/`, while English content
+lives in `packages/tsone/docs/app/content/en/`. Every logical route must exist
+in both directories.
+
+Chinese and English catalogs each contain exactly 14 logical routes. Add or
+remove a route in both catalogs in the same change.
+
+Content links stay locale-neutral: never write `/en/` manually. Chinese public
+routes are unprefixed, while English routes use `/en/`. Browser-language
+detection runs only at `/`; manual selection takes precedence and persists for
+later visits.
+
+Build the static documentation site with:
 
 ```bash
 bun run docs:build
 ```
 
-基础 HTML 文档壳也可以由 TSone 生成，`body` 传入组件或 VNode，不传 HTML 字符串。该 API 会通过 TSone 渲染器挂载节点；在 Bun/Node 静态生成环境中，请先提供 DOM-like document：
+The build fails strictly for missing, extra, duplicate, empty, or
+mixed-language pages.
+
+The base HTML document shell can also be generated from `createApp`. It emits a
+`#app` mount node by default; pass `rootElement` only to use a different target.
+When a custom `body` is needed, pass a component or VNode rather than an HTML
+string. This API renders the mount node through TSone's renderer. In a Bun or
+Node static-generation environment, provide a DOM-like document first:
 
 ```typescript
-import { renderHtmlDocument, type StyleSheet } from '@geektech/tsone';
+import { createApp, type StyleSheet } from '@geektech/tsone';
 
 const styles: StyleSheet = [
   {
@@ -157,38 +260,55 @@ const styles: StyleSheet = [
   },
 ];
 
-const html = renderHtmlDocument({
-  lang: 'zh-CN',
-  title: 'TSone App',
-  body: { component: App, props: { message: 'Hello TSone' } },
-  styles,
+const app = createApp({
+  root: App,
+  document: {
+    lang: 'en',
+    title: 'TSone App',
+    styles,
+  },
+});
+
+const html = app.renderHtmlDocument({
   scripts: [{ type: 'module', src: '/assets/app.js' }],
 });
 ```
 
-## 公开 API
+## Public API
 
-主入口 `@geektech/tsone`：
+The main `@geektech/tsone` entry point exports:
 
 - `createApp(options)`
+- `createApp({ root, rootProps })`
 - `Component<Props, State>`
+- `TransitionGroup` / `TransitionGroupProps` / `TransitionAnimationType`
 - `VNode`
 - `h()` / `createComponent()` / `slot()` / `each()`
+- `Tag(tag, options)` for arbitrary HTML elements
 - `Div()` / `Span()` / `P()` / `Button()` / `Input()`
+- `Section()` / `Main()` / `Header()` / `Footer()` / `Nav()` / `Article()` /
+  `Aside()`
+- `H1()` through `H6()` / `Strong()` / `Em()` / `Small()` / `Pre()` /
+  `Code()` / `Blockquote()`
+- `Ul()` / `Ol()` / `Li()` / `A()` / `Img()`
+- `Form()` / `Label()` / `Textarea()` / `Select()` / `Option()`
+- `Table()` / `Thead()` / `Tbody()` / `Tr()` / `Th()` / `Td()`
 - `Directions` / `ModelBinding`
-- `InjectionKey`、组件和应用的 `provide()` / `inject()`
+- `InjectionKey` and component/application `provide()` / `inject()`
 - `createForm()` / `required()` / `minLength()` / `validate()`
+- `createApp(options).renderHtmlDocument(options)`
 - `renderHtmlDocument(options)`
 - `StyleSheet` / `renderStyleSheet(styles)`
 - `reactive()` / `readonly()`
 - `effect()` / `stop()`
 - `computed()`
 - `ref()` / `isRef()` / `unref()`
-- `version`，当前为 `0.0.2`
+- `version`, currently `0.0.2`
 
-## 渲染、通信与表单
+## Rendering, Communication, and Forms
 
-`directions.if` 可以控制元素、组件或插槽的挂载；不满足条件时会卸载节点：
+`directions.if` controls whether an element, component, or slot is mounted. The
+node is unmounted when the condition is false:
 
 ```typescript
 {
@@ -197,7 +317,8 @@ const html = renderHtmlDocument({
 }
 ```
 
-`each()` 为列表产生稳定 key，供渲染器在排序、插入和删除时复用节点：
+`each()` creates stable keys for list items so the renderer can reuse nodes
+during reordering, insertion, and removal:
 
 ```typescript
 const items = each(
@@ -207,7 +328,30 @@ const items = each(
 );
 ```
 
-组件事件可订阅并用返回的函数取消订阅；组件 VNode 可通过 `emitters` 声明父级监听器。
+`TransitionGroup` animates the enter and exit of direct keyed children:
+
+```typescript
+{
+  component: TransitionGroup,
+  props: { tag: 'ul', type: 'fade', duration: 300 },
+  children: each(
+    this.state.items,
+    (item) => Li({ children: [item.label] }),
+    (item) => item.id
+  ),
+}
+```
+
+The animation types are `fade`, `slide-up`, `slide-down`, `slide-left`,
+`slide-right`, and `scale`. The defaults are a `div` wrapper, `fade`, and
+`300` ms with `ease` easing. Every direct child must have a unique key. Initial
+children animate in, and removed children stay mounted until their exit ends.
+TSone automatically disables these animations for
+`prefers-reduced-motion: reduce` or when Web Animations is unavailable.
+Reordering reuses and moves existing nodes without a reorder or FLIP animation.
+
+Component events return an unsubscribe function, while component VNodes can
+declare parent listeners through `emitters`:
 
 ```typescript
 const stopListening = child.on('saved', (payload) => console.log(payload));
@@ -215,7 +359,8 @@ stopListening();
 // { component: Editor, emitters: { saved: (payload) => this.save(payload) } }
 ```
 
-依赖注入从当前组件向父级再到应用实例查找：
+Dependency injection resolves values from the current component, then its
+parents, and finally the application instance:
 
 ```typescript
 const THEME: InjectionKey<{ mode: string }> = Symbol('theme');
@@ -223,7 +368,8 @@ app.provide(THEME, { mode: 'dark' });
 const theme = this.inject(THEME, { mode: 'light' });
 ```
 
-`directions.model` 支持点分隔路径和转换函数，原生 input、textarea、checkbox、radio 与 select 会同步：
+`directions.model` supports dot-separated paths and conversion functions.
+Native input, textarea, checkbox, radio, and select controls stay synchronized:
 
 ```typescript
 Input({
@@ -238,13 +384,13 @@ Input({
 });
 ```
 
-校验是纯函数，不负责错误 UI 或提交：
+Validation uses pure functions and does not own error UI or submission:
 
 ```typescript
 const form = createForm(this.state, {
-  'profile.name': [required('请输入姓名'), minLength(2)],
+  'profile.name': [required('Name is required'), minLength(2)],
   'profile.age': [
-    validate((value) => Number(value) >= 18 || '年龄须不小于 18'),
+    validate((value) => Number(value) >= 18 || 'Age must be at least 18'),
   ],
 });
 
@@ -252,7 +398,7 @@ const result = form.validate();
 form.resetErrors();
 ```
 
-路由入口 `@geektech/tsone/router`：
+The `@geektech/tsone/router` entry point exports:
 
 - `createRouter({ routes, mode, base })`
 - `Router`
@@ -262,12 +408,12 @@ form.resetErrors();
 - `RouteRecord`
 - `RouteLocation`
 
-样式入口 `@geektech/tsone/style`：
+The `@geektech/tsone/style` entry point exports:
 
 - `StyleManager`
 - `StyleSheet` / `renderStyleSheet(styles)`
 
-## 发布前检查
+## Pre-Publish Checklist
 
 ```bash
 bun test
@@ -276,10 +422,11 @@ bun run build
 bun pm pack --cwd packages/tsone --dry-run
 ```
 
-## 贡献
+## Contributing
 
-欢迎提交 Issue 和 Pull Request。开源发布前请确保测试、类型检查和构建均通过。
+Issues and pull requests are welcome. Before publishing an open-source release,
+make sure the tests, type checks, and build all pass.
 
-## 许可证
+## License
 
 [MIT](LICENSE)

package/dist/core/animation/TransitionGroup.d.ts

@@ -0,0 +1,7 @@
+import { Component } from '../component';
+import { type TransitionGroupNode, type TransitionGroupProps } from './types';
+export declare class TransitionGroup extends Component<TransitionGroupProps> {
+    protected initState(): object;
+    protected initStyles(): void;
+    protected render(): TransitionGroupNode;
+}

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

@@ -0,0 +1,2 @@
+export { TransitionGroup } from './TransitionGroup';
+export type { TransitionAnimationType, TransitionGroupProps } from './types';

package/dist/core/animation/list-animation-controller.d.ts

@@ -0,0 +1,16 @@
+import type { TransitionGroupOptions } from './types';
+export interface ListAnimationRun {
+    animation: Animation;
+    token: symbol;
+    keyframes: Keyframe[];
+    options: KeyframeAnimationOptions;
+    finished: Promise<'finished' | 'cancelled'>;
+}
+export declare class ListAnimationController {
+    private readonly runs;
+    playEnter(element: HTMLElement, options: TransitionGroupOptions): ListAnimationRun | null;
+    playExit(element: HTMLElement, options: TransitionGroupOptions): ListAnimationRun | null;
+    cancel(element: HTMLElement): void;
+    private play;
+    private canAnimate;
+}

package/dist/core/animation/transition-group-strategy.d.ts

@@ -0,0 +1,15 @@
+import { ElementRenderStrategy } from '../renderer/element-strategy';
+import type { RenderRuntimeContext, Renderable } from '../renderer/types';
+import { type TransitionGroupNode } from './types';
+export declare class TransitionGroupRenderStrategy extends ElementRenderStrategy<TransitionGroupNode> {
+    private readonly entries;
+    private readonly animations;
+    matches(vnode: Renderable): vnode is TransitionGroupNode;
+    protected mountChildren(element: HTMLElement, groupVNode: TransitionGroupNode, context: RenderRuntimeContext): void;
+    protected updateChildren(element: HTMLElement, _oldVNode: TransitionGroupNode, newVNode: TransitionGroupNode, context: RenderRuntimeContext): void;
+    protected unmountChildren(element: HTMLElement, vnode: TransitionGroupNode, context: RenderRuntimeContext): void;
+    private playEnter;
+    private startExit;
+    private finishExit;
+    private placeActiveEntries;
+}

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

@@ -0,0 +1,25 @@
+import { type EventListeners, type HTMLNode, type HTMLProps, type VNode } from '../vnode';
+export declare const TRANSITION_ANIMATION_TYPES: readonly ["fade", "slide-up", "slide-down", "slide-left", "slide-right", "scale"];
+export type TransitionAnimationType = (typeof TRANSITION_ANIMATION_TYPES)[number];
+export interface TransitionGroupOptions {
+    type: TransitionAnimationType;
+    duration: number;
+}
+export interface TransitionGroupProps {
+    tag?: string;
+    type?: TransitionAnimationType;
+    duration?: number;
+    elementProps?: HTMLProps;
+    listeners?: EventListeners;
+    children?: VNode[];
+}
+export interface TransitionGroupNode extends HTMLNode {
+    transitionGroup: TransitionGroupOptions;
+    children?: VNode[];
+}
+export type KeyedTransitionChild = VNode & {
+    key: string | number;
+};
+export declare function normalizeTransitionGroupProps(props: TransitionGroupProps): Required<Pick<TransitionGroupProps, 'tag' | 'type' | 'duration'>>;
+export declare function validateTransitionGroupChildren(children: Array<VNode | string>): KeyedTransitionChild[];
+export declare function isTransitionGroupNode(vnode: unknown): vnode is TransitionGroupNode;

package/dist/core/app.d.ts

@@ -1,4 +1,5 @@
-import { ComponentConstructor, InjectionKey, InjectionResult } from './component';
+import { ComponentConstructor, ComponentProps, InjectionKey, InjectionResult } from './component';
+import { type HtmlDocumentBody, type HtmlDocumentOptions } from './document';
 import type { Router } from '../router';
 export interface Plugin {
     install: (app: OneApp, ...args: unknown[]) => void;
@@ -6,15 +7,23 @@ export interface Plugin {
     onUpdated?: (app: OneApp) => void;
     onBeforeUnmount?: (app: OneApp) => void;
 }
-export interface AppOptions<TState = Record<string, unknown>, TConfig = Record<string, unknown>> {
+export type AppDocumentOptions = Partial<Omit<HtmlDocumentOptions, 'body'>> & {
+    body?: HtmlDocumentBody;
+};
+export type AppDocumentRenderOptions = AppDocumentOptions;
+export interface AppOptions<TState = Record<string, unknown>, TConfig = Record<string, unknown>, TRootProps extends ComponentProps = ComponentProps> {
     /** 根组件构造函数 */
-    root?: ComponentConstructor;
-    /** 应用挂载点 */
+    root?: ComponentConstructor<TRootProps>;
+    /** 根组件 props */
+    rootProps?: TRootProps;
+    /** 应用挂载点，默认 #app */
     rootElement?: string | Element;
     /** 全局状态 */
     state?: TState;
     /** 全局配置 */
     config?: TConfig;
+    /** HTML 文档壳配置，用于 dev/build 生成入口页面 */
+    document?: AppDocumentOptions;
 }
 export interface AppContext<TConfig = Record<string, unknown>> {
     app: OneApp;
@@ -22,7 +31,7 @@ export interface AppContext<TConfig = Record<string, unknown>> {
     config: TConfig;
     router?: Router;
 }
-export declare class OneApp<TState extends object = Record<string, unknown>, TConfig extends object = Record<string, unknown>> {
+export declare class OneApp<TState extends object = Record<string, unknown>, TConfig extends object = Record<string, unknown>, TRootProps extends ComponentProps = ComponentProps> {
     private options;
     private container;
     private rootInstance;
@@ -33,7 +42,7 @@ export declare class OneApp<TState extends object = Record<string, unknown>, TCo
     private plugins;
     private unmountedCallback?;
     router?: Router;
-    constructor(options?: AppOptions<TState, TConfig>);
+    constructor(options?: AppOptions<TState, TConfig, TRootProps>);
     private handleError;
     /**
      * 渲染错误UI
@@ -58,7 +67,7 @@ export declare class OneApp<TState extends object = Record<string, unknown>, TCo
     /**
      * 更新根组件
      */
-    updateRootComponent(component: ComponentConstructor): void;
+    updateRootComponent(component: ComponentConstructor<TRootProps>): void;
     /**
      * 更新应用状态
      */
@@ -83,10 +92,18 @@ export declare class OneApp<TState extends object = Record<string, unknown>, TCo
      * 监听应用卸载
      */
     onUnmounted(callback: () => void): this;
+    /**
+     * 生成应用入口 HTML 文档
+     */
+    renderHtmlDocument(options?: AppDocumentRenderOptions): string;
     /**
      * 解析根元素
      */
     private resolveRootElement;
+    private resolveMountContainer;
+    private createMountDocumentBody;
+    private createMountElementFromSelector;
+    private mergeDocumentScripts;
     private onMounted;
     private onUpdated;
     private onBeforeUnmount;
@@ -94,4 +111,4 @@ export declare class OneApp<TState extends object = Record<string, unknown>, TCo
 /**
  * 创建应用实例
  */
-export declare function createApp<TState extends object = Record<string, unknown>, TConfig extends object = Record<string, unknown>>(options?: AppOptions<TState, TConfig>): OneApp<TState, TConfig>;
+export declare function createApp<TState extends object = Record<string, unknown>, TConfig extends object = Record<string, unknown>, TRootProps extends ComponentProps = ComponentProps>(options?: AppOptions<TState, TConfig, TRootProps>): OneApp<TState, TConfig, TRootProps>;

package/dist/core/index.d.ts

@@ -7,3 +7,4 @@ export * from './renderer';
 export * from './document';
 export * from './model';
 export * from './form';
+export * from './animation';

package/dist/core/renderer/element-strategy.d.ts

@@ -0,0 +1,25 @@
+import { HTMLNode } from '../vnode';
+import type { RenderRuntimeContext, RenderStrategy, Renderable } from './types';
+export declare class ElementRenderStrategy<TNode extends HTMLNode = HTMLNode> implements RenderStrategy<TNode> {
+    private readonly listeners;
+    private readonly effects;
+    private readonly modelBindings;
+    matches(vnode: Renderable): vnode is TNode;
+    mount(vnode: TNode, context: RenderRuntimeContext): Node;
+    patch(oldVNode: TNode, newVNode: TNode, currentNode: Node, context: RenderRuntimeContext): Node;
+    unmount(vnode: TNode, currentNode: Node, context: RenderRuntimeContext): void;
+    protected mountChildren(element: HTMLElement, vnode: TNode, context: RenderRuntimeContext): void;
+    protected updateChildren(element: HTMLElement, oldVNode: TNode, newVNode: TNode, context: RenderRuntimeContext): void;
+    protected unmountChildren(element: HTMLElement, vnode: TNode, context: RenderRuntimeContext): void;
+    private applyProps;
+    private applyDirections;
+    private updateOrdinaryChildren;
+    private updateKeyedChildren;
+    private hasOnlyKeyedChildren;
+    private assertNoDuplicateKeys;
+    private getVNodeKey;
+    private collectListeners;
+    private updateListeners;
+    private setupReactiveAttribute;
+    private trackEffect;
+}

package/dist/core/renderer.d.ts

@@ -1,4 +1,5 @@
-import { ComponentNode, HTMLNode, SlotProvider } from './vnode';
+import { ComponentNode, SlotProvider } from './vnode';
+export { ElementRenderStrategy } from './renderer/element-strategy';
 export type { ComponentInstance, RenderRuntimeContext, RenderStrategy, Renderable, RendererHost, } from './renderer/types';
 import type { RenderRuntimeContext, RenderStrategy, Renderable } from './renderer/types';
 export declare class RendererContext {
@@ -40,23 +41,3 @@ export declare class SlotRenderStrategy implements RenderStrategy<SlotProvider>
     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 hasOnlyKeyedChildren;
-    private assertNoDuplicateKeys;
-    private getVNodeKey;
-    private collectListeners;
-    private updateListeners;
-    private setupReactiveAttribute;
-    private trackEffect;
-}

package/dist/core/vnode.d.ts

@@ -57,11 +57,47 @@ 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 Tag(tag: string, options?: ElementShortcutOptions): HTMLNode;
 export declare const Div: ElementShortcut;
 export declare const Span: ElementShortcut;
 export declare const P: ElementShortcut;
 export declare const Button: ElementShortcut;
 export declare const Input: ElementShortcut;
+export declare const Section: ElementShortcut;
+export declare const Main: ElementShortcut;
+export declare const Header: ElementShortcut;
+export declare const Footer: ElementShortcut;
+export declare const Nav: ElementShortcut;
+export declare const Article: ElementShortcut;
+export declare const Aside: ElementShortcut;
+export declare const H1: ElementShortcut;
+export declare const H2: ElementShortcut;
+export declare const H3: ElementShortcut;
+export declare const H4: ElementShortcut;
+export declare const H5: ElementShortcut;
+export declare const H6: ElementShortcut;
+export declare const Strong: ElementShortcut;
+export declare const Em: ElementShortcut;
+export declare const Small: ElementShortcut;
+export declare const Pre: ElementShortcut;
+export declare const Code: ElementShortcut;
+export declare const Blockquote: ElementShortcut;
+export declare const Ul: ElementShortcut;
+export declare const Ol: ElementShortcut;
+export declare const Li: ElementShortcut;
+export declare const A: ElementShortcut;
+export declare const Img: ElementShortcut;
+export declare const Form: ElementShortcut;
+export declare const Label: ElementShortcut;
+export declare const Textarea: ElementShortcut;
+export declare const Select: ElementShortcut;
+export declare const Option: ElementShortcut;
+export declare const Table: ElementShortcut;
+export declare const Thead: ElementShortcut;
+export declare const Tbody: ElementShortcut;
+export declare const Tr: ElementShortcut;
+export declare const Th: ElementShortcut;
+export declare const Td: ElementShortcut;
 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 declare function each<T>(items: readonly T[], render: (item: T, index: number) => VNode | string, key: (item: T, index: number) => string | number): VNode[];