@geektech/tsone 0.0.1 → 0.0.2

package/README.md

@@ -4,14 +4,20 @@
 
 ## 特性
 
-- 纯 TypeScript 实现，公开 API 提供类型定义
+- 纯 TypeScript 实现，TypeScript为第一公民，公开 API 提供类型定义
 - Bun 原生工具链：安装、测试、构建、示例服务和文档服务均由 Bun 驱动
+- 文档内容由 TSone 的 TypeScript typed content registry 提供
 - 响应式系统：`reactive`、`effect`、`computed`
 - 面向对象组件模型：`Component<Props, State>`、生命周期、事件、插槽
 - 策略模式渲染层：文本、元素、组件、插槽按 VNode 类型分发
 - 内置路由：`createRouter`、`RouterView`、`RouterLink`
 - 轻量级运行时，生产包无外部运行时依赖
 
+## 仓库结构
+
+本仓库是 Bun workspace monorepo，当前发布包位于 `packages/tsone/`。
+根目录命令会代理到该包，包内仍保留自己的源码、测试、示例、文档和发布配置。
+
 ## 安装
 
 ```bash
@@ -42,7 +48,7 @@ class App extends Component<Record<string, never>, AppState> {
   protected initState(): AppState {
     return {
       count: 0,
-      version: '0.0.1',
+      version: '0.0.2',
     };
   }
 
@@ -128,6 +134,36 @@ bun test
 bun run build
 bun run dev
 bun run docs
+bun run docs:build
+```
+
+文档站点内容维护在 `packages/tsone/docs/app/content/*.ts` 的 typed content registry 中。
+
+生成静态文档产物：
+
+```bash
+bun run docs:build
+```
+
+基础 HTML 文档壳也可以由 TSone 生成，`body` 传入组件或 VNode，不传 HTML 字符串。该 API 会通过 TSone 渲染器挂载节点；在 Bun/Node 静态生成环境中，请先提供 DOM-like document：
+
+```typescript
+import { renderHtmlDocument, type StyleSheet } from '@geektech/tsone';
+
+const styles: StyleSheet = [
+  {
+    selector: '.app',
+    properties: { maxWidth: '72rem' },
+  },
+];
+
+const html = renderHtmlDocument({
+  lang: 'zh-CN',
+  title: 'TSone App',
+  body: { component: App, props: { message: 'Hello TSone' } },
+  styles,
+  scripts: [{ type: 'module', src: '/assets/app.js' }],
+});
 ```
 
 ## 公开 API
@@ -137,12 +173,84 @@ bun run docs
 - `createApp(options)`
 - `Component<Props, State>`
 - `VNode`
-- `h()` / `createComponent()` / `slot()`
+- `h()` / `createComponent()` / `slot()` / `each()`
+- `Div()` / `Span()` / `P()` / `Button()` / `Input()`
+- `Directions` / `ModelBinding`
+- `InjectionKey`、组件和应用的 `provide()` / `inject()`
+- `createForm()` / `required()` / `minLength()` / `validate()`
+- `renderHtmlDocument(options)`
+- `StyleSheet` / `renderStyleSheet(styles)`
 - `reactive()` / `readonly()`
 - `effect()` / `stop()`
 - `computed()`
 - `ref()` / `isRef()` / `unref()`
-- `version`，当前为 `0.0.1`
+- `version`，当前为 `0.0.2`
+
+## 渲染、通信与表单
+
+`directions.if` 可以控制元素、组件或插槽的挂载；不满足条件时会卸载节点：
+
+```typescript
+{
+  component: ProfilePanel,
+  directions: { if: this.state.visible },
+}
+```
+
+`each()` 为列表产生稳定 key，供渲染器在排序、插入和删除时复用节点：
+
+```typescript
+const items = each(
+  this.state.users,
+  (user) => ({ tag: 'li', children: [user.name] }),
+  (user) => user.id
+);
+```
+
+组件事件可订阅并用返回的函数取消订阅；组件 VNode 可通过 `emitters` 声明父级监听器。
+
+```typescript
+const stopListening = child.on('saved', (payload) => console.log(payload));
+stopListening();
+// { component: Editor, emitters: { saved: (payload) => this.save(payload) } }
+```
+
+依赖注入从当前组件向父级再到应用实例查找：
+
+```typescript
+const THEME: InjectionKey<{ mode: string }> = Symbol('theme');
+app.provide(THEME, { mode: 'dark' });
+const theme = this.inject(THEME, { mode: 'light' });
+```
+
+`directions.model` 支持点分隔路径和转换函数，原生 input、textarea、checkbox、radio 与 select 会同步：
+
+```typescript
+Input({
+  props: { type: 'number' },
+  directions: {
+    model: {
+      path: 'profile.age',
+      parse: (value) => Number(value),
+      format: (value) => String(value ?? ''),
+    },
+  },
+});
+```
+
+校验是纯函数，不负责错误 UI 或提交：
+
+```typescript
+const form = createForm(this.state, {
+  'profile.name': [required('请输入姓名'), minLength(2)],
+  'profile.age': [
+    validate((value) => Number(value) >= 18 || '年龄须不小于 18'),
+  ],
+});
+
+const result = form.validate();
+form.resetErrors();
+```
 
 路由入口 `@geektech/tsone/router`：
 
@@ -157,6 +265,7 @@ bun run docs
 样式入口 `@geektech/tsone/style`：
 
 - `StyleManager`
+- `StyleSheet` / `renderStyleSheet(styles)`
 
 ## 发布前检查
 
@@ -164,7 +273,7 @@ bun run docs
 bun test
 bunx tsc --noEmit
 bun run build
-bun pm pack --dry-run
+bun pm pack --cwd packages/tsone --dry-run
 ```
 
 ## 贡献

package/dist/core/app.d.ts

@@ -1,4 +1,4 @@
-import { ComponentConstructor } from './component';
+import { ComponentConstructor, InjectionKey, InjectionResult } from './component';
 import type { Router } from '../router';
 export interface Plugin {
     install: (app: OneApp, ...args: unknown[]) => void;
@@ -29,6 +29,7 @@ export declare class OneApp<TState extends object = Record<string, unknown>, TCo
     private mounted;
     private templateEngine;
     private readonly appContext;
+    private readonly providers;
     private plugins;
     private unmountedCallback?;
     router?: Router;
@@ -66,6 +67,10 @@ export declare class OneApp<TState extends object = Record<string, unknown>, TCo
      * 获取应用上下文
      */
     getContext(): AppContext<TConfig>;
+    provide<T>(key: InjectionKey<T>, value: T): this;
+    inject<T>(key: InjectionKey<T>): T | undefined;
+    inject<T>(key: InjectionKey<T>, fallback: T): T;
+    resolveInjection<T>(key: InjectionKey<T>): InjectionResult<T>;
     /**
      * 获取应用状态
      */

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

@@ -4,6 +4,13 @@ import type { VNode } from '../vnode';
 export type ComponentProps = object;
 export type ComponentState = object;
 export type ComponentEventListener = (...args: unknown[]) => void;
+export type InjectionKey<T> = (string | symbol) & {
+    readonly __injectionType?: T;
+};
+export interface InjectionResult<T> {
+    found: boolean;
+    value: T | undefined;
+}
 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 {
@@ -14,8 +21,11 @@ export declare abstract class Component<TProps extends ComponentProps = Componen
     private readonly templateEngine;
     private readonly childComponents;
     private readonly eventListeners;
+    private readonly providers;
     private readonly updateEffect;
     private appContext;
+    private parentComponent;
+    private elementChangeListener;
     protected styleManager: StyleManager;
     state: TState;
     mounted: boolean;
@@ -30,6 +40,12 @@ export declare abstract class Component<TProps extends ComponentProps = Componen
     setProps(props: Partial<TProps>): void;
     setState(state: Partial<TState>): void;
     setAppContext(context: unknown): void;
+    setParentComponent(parent: ComponentInstance | null): void;
+    setElementChangeListener(listener: (previousElement: Node, nextElement: Node) => void): void;
+    provide<T>(key: InjectionKey<T>, value: T): void;
+    inject<T>(key: InjectionKey<T>): T | undefined;
+    inject<T>(key: InjectionKey<T>, fallback: T): T;
+    resolveInjection<T>(key: InjectionKey<T>): InjectionResult<T>;
     getElement(): Node | null;
     protected beforeMount(): void;
     protected onMounted(): void;
@@ -40,7 +56,7 @@ export declare abstract class Component<TProps extends ComponentProps = Componen
     protected getContext(): unknown;
     protected get router(): unknown;
     protected emit(eventName: string, ...args: unknown[]): void;
-    on(eventName: string, listener: ComponentEventListener): void;
+    on(eventName: string, listener: ComponentEventListener): () => void;
     off(eventName: string, listener: ComponentEventListener): void;
     private createRenderContext;
     private collectSlots;
@@ -49,5 +65,6 @@ export declare abstract class Component<TProps extends ComponentProps = Componen
     private trackStateProperties;
     private getRouterFrom;
     private getRouterFromGlobalApp;
+    private resolveAppInjection;
     private trackReactiveValue;
 }

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

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

package/dist/core/document.d.ts

@@ -0,0 +1,32 @@
+import type { Renderable } from './renderer/types';
+import { type StyleSheet } from '../style/sheet';
+export { renderStyleSheet, type StyleAtRule, type StyleProperties, type StyleRule, type StyleSheet, type StyleSheetEntry, type StyleValue, } from '../style/sheet';
+export type HtmlAttributeValue = string | number | boolean | null | undefined;
+export type HtmlAttributes = Record<string, HtmlAttributeValue>;
+export type HtmlDocumentBody = Renderable | Renderable[];
+export interface HtmlHeadElement {
+    tag: string;
+    attributes?: HtmlAttributes;
+    text?: string;
+}
+export interface HtmlScript {
+    src: string;
+    type?: string;
+    async?: boolean;
+    defer?: boolean;
+    attributes?: HtmlAttributes;
+}
+export interface HtmlDocumentOptions {
+    title: string;
+    body: HtmlDocumentBody;
+    lang?: string;
+    charset?: string;
+    viewport?: string;
+    description?: string;
+    htmlAttributes?: HtmlAttributes;
+    bodyAttributes?: HtmlAttributes;
+    head?: HtmlHeadElement[];
+    styles?: StyleSheet;
+    scripts?: HtmlScript[];
+}
+export declare function renderHtmlDocument(options: HtmlDocumentOptions): string;

package/dist/core/form.d.ts

@@ -0,0 +1,24 @@
+export type ValidationResult = boolean | string;
+export type ValidationRule<T = unknown> = (value: T, model: object) => ValidationResult;
+export type ValidationRules<TModel extends object> = {
+    [TPath in keyof TModel & string]?: readonly ValidationRule[];
+} & Record<string, readonly ValidationRule[] | undefined>;
+export interface FieldValidationResult {
+    valid: boolean;
+    errors: string[];
+}
+export interface FormValidationResult {
+    valid: boolean;
+    errors: Record<string, string[]>;
+}
+export interface FormController<TModel extends object> {
+    readonly model: TModel;
+    readonly errors: Record<string, string[]>;
+    validate(): FormValidationResult;
+    validateField(path: string): FieldValidationResult;
+    resetErrors(): void;
+}
+export declare function required(message?: string): ValidationRule;
+export declare function minLength(length: number, message?: string): ValidationRule;
+export declare function validate(rule: ValidationRule): ValidationRule;
+export declare function createForm<TModel extends object>(model: TModel, rules: ValidationRules<TModel>): FormController<TModel>;

package/dist/core/index.d.ts

@@ -4,3 +4,6 @@ export * from './reactive';
 export * from './vnode';
 export * from './template';
 export * from './renderer';
+export * from './document';
+export * from './model';
+export * from './form';

package/dist/core/model.d.ts

@@ -0,0 +1,18 @@
+export interface ModelBindingOptions {
+    path: string;
+    parse?: (value: unknown) => unknown;
+    format?: (value: unknown) => string;
+}
+export type ModelBinding = string | ModelBindingOptions;
+type ModelState = Record<string, unknown>;
+export declare function modelPath(binding: ModelBinding): string;
+export declare function getModelValue(state: ModelState, path: string): unknown;
+export declare function setModelValue(state: ModelState, path: string, value: unknown): void;
+export declare class ModelBindingController {
+    private readonly bindings;
+    bind(element: HTMLElement, binding: ModelBinding, state: ModelState): void;
+    cleanup(element: HTMLElement): void;
+    private isSupportedControl;
+    private sameBinding;
+}
+export {};

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

@@ -8,12 +8,17 @@ export interface ReactiveEffect<T = unknown> {
 export interface ReactiveEffectOptions {
     lazy?: boolean;
     scheduler?: (effect: ReactiveEffect) => void;
+    throwOnError?: boolean;
 }
 export interface ComputedRef<T> {
     readonly value: T;
 }
 export declare const IS_REACTIVE: unique symbol;
 export declare const IS_READONLY: unique symbol;
+export declare const IS_REF: unique symbol;
+export interface Ref<T = unknown> {
+    value: T;
+}
 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

@@ -1,5 +1,5 @@
-import { ComputedRef, ReactiveEffect, ReactiveEffectOptions } from './reactive/types';
-export type { ComputedRef, ReactiveEffect, ReactiveEffectOptions, } from './reactive/types';
+import { ComputedRef, Ref, ReactiveEffect, ReactiveEffectOptions } from './reactive/types';
+export type { ComputedRef, Ref, ReactiveEffect, ReactiveEffectOptions, } from './reactive/types';
 export declare class ReactiveSystem {
     private static instance;
     private activeEffect;
@@ -26,6 +26,9 @@ 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 ref<T>(value: T): Ref<T>;
+export declare function isRef(value: unknown): value is Ref<unknown>;
+export declare function unref<T>(value: T | Ref<T>): 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/types.d.ts

@@ -1,5 +1,6 @@
 import type { TemplateEngine } from '../template';
 import type { ComponentEventListener, ComponentProps } from '../component';
+import type { InjectionKey, InjectionResult } from '../component';
 import type { VNode } from '../vnode';
 export interface ComponentInstance {
     mountToNode(): Node;
@@ -7,8 +8,11 @@ export interface ComponentInstance {
     unmount(): void;
     setProps(props: Partial<ComponentProps>): void;
     setAppContext?(context: unknown): void;
+    setParentComponent?(parent: ComponentInstance | null): void;
+    setElementChangeListener?(listener: (previousElement: Node, nextElement: Node) => void): void;
+    resolveInjection?<T>(key: InjectionKey<T>): InjectionResult<T>;
     getElement(): Node | null;
-    on(eventName: string, listener: ComponentEventListener): void;
+    on(eventName: string, listener: ComponentEventListener): () => void;
 }
 export type Renderable = VNode | string;
 export interface RendererHost {
@@ -22,6 +26,7 @@ export interface RenderRuntimeContext {
     renderer: RendererHost;
     slots: Record<string, Array<VNode | string>>;
     registerChild(component: ComponentInstance): void;
+    unregisterChild(component: ComponentInstance): void;
 }
 export interface RenderStrategy<T extends Renderable = Renderable> {
     matches(vnode: Renderable): vnode is T;

package/dist/core/renderer.d.ts

@@ -17,11 +17,17 @@ export declare class TextRenderStrategy implements RenderStrategy<string> {
 }
 export declare class ComponentRenderStrategy implements RenderStrategy<ComponentNode> {
     private readonly instances;
+    private readonly instanceNodes;
+    private readonly emitterUnsubscribers;
     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;
+    unmount(_vnode: ComponentNode, currentNode: Node, context: RenderRuntimeContext): void;
     private createProps;
+    private syncEmitters;
+    private clearEmitters;
+    private trackInstanceNode;
+    private clearInstanceNodes;
 }
 export declare class SlotRenderStrategy implements RenderStrategy<SlotProvider> {
     private readonly renderedChildren;
@@ -46,12 +52,11 @@ export declare class ElementRenderStrategy implements RenderStrategy<HTMLNode> {
     private applyDirections;
     private updateChildren;
     private updateKeyedChildren;
-    private hasKeyedChildren;
+    private hasOnlyKeyedChildren;
+    private assertNoDuplicateKeys;
     private getVNodeKey;
     private collectListeners;
     private updateListeners;
     private setupReactiveAttribute;
-    private setupTwoWayBinding;
-    private getStateValue;
     private trackEffect;
 }

package/dist/core/vnode.d.ts

@@ -1,8 +1,9 @@
 import type { AnyComponentConstructor, ComponentConstructor, ComponentEventListener, ComponentProps } from './component';
+import type { ModelBinding } from './model';
 export interface ComponentType {
     mount(container: HTMLElement): void;
     unmount(): void;
-    on(eventName: string, listener: ComponentEventListener): void;
+    on(eventName: string, listener: ComponentEventListener): () => void;
 }
 type VNodeComponentProps = ComponentProps;
 export type VNodeComponentConstructor<P extends VNodeComponentProps = VNodeComponentProps> = ComponentConstructor<P> | AnyComponentConstructor;
@@ -17,48 +18,51 @@ export interface EventListeners {
     [eventName: string]: (event: Event) => void;
 }
 export interface Directions {
-    model?: string;
+    model?: ModelBinding;
     if?: boolean;
     show?: boolean;
 }
-export interface HTMLNode {
+export interface VNodeBase {
+    key?: string | number;
+    slot?: string;
+    directions?: Directions;
+}
+export interface HTMLNode extends VNodeBase {
     tag: string;
     props?: HTMLProps;
     children?: Array<VNode | string>;
     listeners?: EventListeners;
-    key?: string | number;
-    slot?: string;
-    directions?: Directions;
 }
-export interface ComponentNode<P extends VNodeComponentProps = VNodeComponentProps> {
+export interface ComponentNode<P extends VNodeComponentProps = VNodeComponentProps> extends VNodeBase {
     component: VNodeComponentConstructor<P>;
     props?: P;
     children?: Array<VNode | string>;
     emitters?: Record<string, ComponentEventListener>;
-    key?: string | number;
-    slot?: string;
-    directions?: Directions;
 }
-export interface SlotProvider {
+export interface SlotProvider extends VNodeBase {
     tag: 'slot';
     props: {
         name: string;
     };
     children?: Array<VNode | string>;
-    key?: string | number;
-    directions?: Directions;
 }
-export interface SlotInjector {
+export interface SlotInjector extends VNodeBase {
     tag: string;
     slot: string;
-    key?: string | number;
-    directions?: Directions;
 }
 export type VNode = HTMLNode | ComponentNode | SlotProvider | SlotInjector;
+export type ElementShortcutOptions = Omit<HTMLNode, 'tag'>;
+export type ElementShortcut = (options?: ElementShortcutOptions) => HTMLNode;
 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 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 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[];
 export {};

package/dist/{index-dgv88dz4.js → index-8wjswsye.js}

@@ -18,6 +18,10 @@ class StyleManager {
     this.styles.clear();
     this.styleElement.textContent = "";
   }
+  destroy() {
+    this.clearStyles();
+    this.styleElement.remove();
+  }
   convertToCSS(properties) {
     return Object.entries(properties).map(([key, value]) => {
       const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -55,5 +59,5 @@ ${this.convertToCSS(properties)}
 
 export { StyleManager };
 
-//# debugId=16D14DDEF181BE5A64756E2164756E21
-//# sourceMappingURL=index-dgv88dz4.js.map
+//# debugId=401A1B62728D384364756E2164756E21
+//# sourceMappingURL=index-8wjswsye.js.map

package/dist/index-8wjswsye.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../lib/style/StyleManager.ts"],
+  "sourcesContent": [
+    "export interface StyleOptions {\n  selector: string;\n  properties: Record<string, string | number>;\n  hover?: Record<string, string | number>;\n  media?: Record<string, Record<string, string | number>>;\n}\n\nexport class StyleManager {\n  public styleElement: HTMLStyleElement;\n  public styles: Map<string, StyleOptions> = new Map();\n\n  constructor() {\n    this.styleElement = document.createElement('style');\n    document.head.appendChild(this.styleElement);\n  }\n\n  public addStyle(name: string, options: StyleOptions): void {\n    this.styles.set(name, options);\n    this.updateStyles();\n  }\n\n  public removeStyle(name: string): void {\n    this.styles.delete(name);\n    this.updateStyles();\n  }\n\n  public clearStyles(): void {\n    this.styles.clear();\n    this.styleElement.textContent = '';\n  }\n\n  public destroy(): void {\n    this.clearStyles();\n    this.styleElement.remove();\n  }\n\n  private convertToCSS(properties: Record<string, string | number>): string {\n    return Object.entries(properties)\n      .map(([key, value]) => {\n        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();\n        return `${cssKey}: ${value};`;\n      })\n      .join('\\n');\n  }\n\n  private updateStyles(): void {\n    let cssText = '';\n\n    this.styles.forEach((style) => {\n      // 基础样式\n      cssText += `${style.selector} {\\n${this.convertToCSS(style.properties)}\\n}\\n`;\n\n      // hover 样式\n      if (style.hover) {\n        cssText += `${style.selector}:hover {\\n${this.convertToCSS(style.hover)}\\n}\\n`;\n      }\n\n      // media 查询\n      if (style.media) {\n        Object.entries(style.media).forEach(([query, properties]) => {\n          cssText += `@media ${query} {\\n${style.selector} {\\n${this.convertToCSS(properties)}\\n}\\n}\\n`;\n        });\n      }\n    });\n\n    this.styleElement.textContent = cssText;\n  }\n}\n"
+  ],
+  "mappings": ";AAOO,MAAM,aAAa;AAAA,EACjB;AAAA,EACA,SAAoC,IAAI;AAAA,EAE/C,WAAW,GAAG;AAAA,IACZ,KAAK,eAAe,SAAS,cAAc,OAAO;AAAA,IAClD,SAAS,KAAK,YAAY,KAAK,YAAY;AAAA;AAAA,EAGtC,QAAQ,CAAC,MAAc,SAA6B;AAAA,IACzD,KAAK,OAAO,IAAI,MAAM,OAAO;AAAA,IAC7B,KAAK,aAAa;AAAA;AAAA,EAGb,WAAW,CAAC,MAAoB;AAAA,IACrC,KAAK,OAAO,OAAO,IAAI;AAAA,IACvB,KAAK,aAAa;AAAA;AAAA,EAGb,WAAW,GAAS;AAAA,IACzB,KAAK,OAAO,MAAM;AAAA,IAClB,KAAK,aAAa,cAAc;AAAA;AAAA,EAG3B,OAAO,GAAS;AAAA,IACrB,KAAK,YAAY;AAAA,IACjB,KAAK,aAAa,OAAO;AAAA;AAAA,EAGnB,YAAY,CAAC,YAAqD;AAAA,IACxE,OAAO,OAAO,QAAQ,UAAU,EAC7B,IAAI,EAAE,KAAK,WAAW;AAAA,MACrB,MAAM,SAAS,IAAI,QAAQ,YAAY,KAAK,EAAE,YAAY;AAAA,MAC1D,OAAO,GAAG,WAAW;AAAA,KACtB,EACA,KAAK;AAAA,CAAI;AAAA;AAAA,EAGN,YAAY,GAAS;AAAA,IAC3B,IAAI,UAAU;AAAA,IAEd,KAAK,OAAO,QAAQ,CAAC,UAAU;AAAA,MAE7B,WAAW,GAAG,MAAM;AAAA,EAAe,KAAK,aAAa,MAAM,UAAU;AAAA;AAAA;AAAA,MAGrE,IAAI,MAAM,OAAO;AAAA,QACf,WAAW,GAAG,MAAM;AAAA,EAAqB,KAAK,aAAa,MAAM,KAAK;AAAA;AAAA;AAAA,MACxE;AAAA,MAGA,IAAI,MAAM,OAAO;AAAA,QACf,OAAO,QAAQ,MAAM,KAAK,EAAE,QAAQ,EAAE,OAAO,gBAAgB;AAAA,UAC3D,WAAW,UAAU;AAAA,EAAY,MAAM;AAAA,EAAe,KAAK,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,SACnF;AAAA,MACH;AAAA,KACD;AAAA,IAED,KAAK,aAAa,cAAc;AAAA;AAEpC;",
+  "debugId": "401A1B62728D384364756E2164756E21",
+  "names": []
+}

package/dist/index-vpx80nq5.js

@@ -0,0 +1,32 @@
+// lib/style/sheet.ts
+function renderStyleSheet(styles) {
+  return styles.map((entry) => renderStyleEntry(entry)).join(`
+
+`);
+}
+function renderStyleEntry(entry, indent = "") {
+  if ("atRule" in entry) {
+    const rules = entry.rules.map((rule) => renderStyleEntry(rule, `${indent}  `)).join(`
+
+`);
+    return `${indent}${entry.atRule} {
+${rules}
+${indent}}`;
+  }
+  const declarations = Object.entries(entry.properties).map(([property, value]) => `${indent}  ${toCssProperty(property)}: ${String(value)};`).join(`
+`);
+  return `${indent}${entry.selector} {
+${declarations}
+${indent}}`;
+}
+function toCssProperty(property) {
+  if (property.startsWith("--") || property.includes("-")) {
+    return property;
+  }
+  return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+export { renderStyleSheet };
+
+//# debugId=61B1187B7ADC17DB64756E2164756E21
+//# sourceMappingURL=index-vpx80nq5.js.map

package/dist/index-vpx80nq5.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../lib/style/sheet.ts"],
+  "sourcesContent": [
+    "export type StyleValue = string | number;\n\nexport type StyleProperties = Record<string, StyleValue>;\n\nexport interface StyleRule {\n  selector: string;\n  properties: StyleProperties;\n}\n\nexport interface StyleAtRule {\n  atRule: string;\n  rules: StyleRule[];\n}\n\nexport type StyleSheetEntry = StyleRule | StyleAtRule;\n\nexport type StyleSheet = StyleSheetEntry[];\n\nexport function renderStyleSheet(styles: StyleSheet): string {\n  return styles.map((entry) => renderStyleEntry(entry)).join('\\n\\n');\n}\n\nfunction renderStyleEntry(entry: StyleSheetEntry, indent = ''): string {\n  if ('atRule' in entry) {\n    const rules = entry.rules\n      .map((rule) => renderStyleEntry(rule, `${indent}  `))\n      .join('\\n\\n');\n\n    return `${indent}${entry.atRule} {\\n${rules}\\n${indent}}`;\n  }\n\n  const declarations = Object.entries(entry.properties)\n    .map(\n      ([property, value]) =>\n        `${indent}  ${toCssProperty(property)}: ${String(value)};`\n    )\n    .join('\\n');\n\n  return `${indent}${entry.selector} {\\n${declarations}\\n${indent}}`;\n}\n\nfunction toCssProperty(property: string): string {\n  if (property.startsWith('--') || property.includes('-')) {\n    return property;\n  }\n\n  return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);\n}\n"
+  ],
+  "mappings": ";AAkBO,SAAS,gBAAgB,CAAC,QAA4B;AAAA,EAC3D,OAAO,OAAO,IAAI,CAAC,UAAU,iBAAiB,KAAK,CAAC,EAAE,KAAK;AAAA;AAAA,CAAM;AAAA;AAGnE,SAAS,gBAAgB,CAAC,OAAwB,SAAS,IAAY;AAAA,EACrE,IAAI,YAAY,OAAO;AAAA,IACrB,MAAM,QAAQ,MAAM,MACjB,IAAI,CAAC,SAAS,iBAAiB,MAAM,GAAG,UAAU,CAAC,EACnD,KAAK;AAAA;AAAA,CAAM;AAAA,IAEd,OAAO,GAAG,SAAS,MAAM;AAAA,EAAa;AAAA,EAAU;AAAA,EAClD;AAAA,EAEA,MAAM,eAAe,OAAO,QAAQ,MAAM,UAAU,EACjD,IACC,EAAE,UAAU,WACV,GAAG,WAAW,cAAc,QAAQ,MAAM,OAAO,KAAK,IAC1D,EACC,KAAK;AAAA,CAAI;AAAA,EAEZ,OAAO,GAAG,SAAS,MAAM;AAAA,EAAe;AAAA,EAAiB;AAAA;AAG3D,SAAS,aAAa,CAAC,UAA0B;AAAA,EAC/C,IAAI,SAAS,WAAW,IAAI,KAAK,SAAS,SAAS,GAAG,GAAG;AAAA,IACvD,OAAO;AAAA,EACT;AAAA,EAEA,OAAO,SAAS,QAAQ,UAAU,CAAC,UAAU,IAAI,MAAM,YAAY,GAAG;AAAA;",
+  "debugId": "61B1187B7ADC17DB64756E2164756E21",
+  "names": []
+}