nine-9 1.1.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -111
- package/dist/index.d.ts +114 -4
- package/dist/index.js +1 -4
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/dist/assets/index.d.ts +0 -1
- package/dist/assets/index.js +0 -2
- package/dist/assets/index.js.map +0 -1
- package/dist/channel/event-subcriber.d.ts +0 -12
- package/dist/channel/event-subcriber.js +0 -20
- package/dist/channel/event-subcriber.js.map +0 -1
- package/dist/channel/index.d.ts +0 -1
- package/dist/channel/index.js +0 -2
- package/dist/channel/index.js.map +0 -1
- package/dist/dom/component.d.ts +0 -16
- package/dist/dom/component.js +0 -41
- package/dist/dom/component.js.map +0 -1
- package/dist/dom/index.d.ts +0 -4
- package/dist/dom/index.js +0 -5
- package/dist/dom/index.js.map +0 -1
- package/dist/dom/reactive.d.ts +0 -16
- package/dist/dom/reactive.js +0 -110
- package/dist/dom/reactive.js.map +0 -1
- package/dist/dom/style.d.ts +0 -7
- package/dist/dom/style.js +0 -20
- package/dist/dom/style.js.map +0 -1
- package/dist/dom/tree.d.ts +0 -12
- package/dist/dom/tree.js +0 -79
- package/dist/dom/tree.js.map +0 -1
- package/dist/util/char.d.ts +0 -2
- package/dist/util/char.js +0 -7
- package/dist/util/char.js.map +0 -1
- package/dist/util/index.d.ts +0 -2
- package/dist/util/index.js +0 -3
- package/dist/util/index.js.map +0 -1
- package/dist/util/types.d.ts +0 -1
- package/dist/util/types.js +0 -2
- package/dist/util/types.js.map +0 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
一个轻量、高性能、类型安全的 Vanilla DOM 响应式 UI 框架。
|
|
4
4
|
|
|
5
|
-
融合了 Vue 模板指令和 React Hooks
|
|
5
|
+
融合了 Vue 模板指令和 React Hooks 的优点,取两者之长。同时运行及其轻量,甚至打包后可以用于 XXXMonkey UserScript。
|
|
6
6
|
|
|
7
7
|
## 特性
|
|
8
8
|
|
|
@@ -23,124 +23,46 @@ npm install nine-9
|
|
|
23
23
|
## 快速开始
|
|
24
24
|
|
|
25
25
|
```typescript
|
|
26
|
-
import { createComponent,
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
import { $, createArray, createComponent, styleSet, sync, tree, when, wrap } from "./nine";
|
|
27
|
+
|
|
28
|
+
const Counter = createComponent({ //创建组件
|
|
29
|
+
props: {
|
|
30
|
+
initial: { //参数名
|
|
31
|
+
validate: Number.isInteger, //验证器
|
|
32
|
+
transform: Number, //转换器
|
|
33
|
+
required: false, //是否必填
|
|
34
|
+
shadow: 0, //默认值
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}, (props) => {
|
|
38
|
+
const count = wrap(props.initial); //ref
|
|
39
|
+
const doubled = sync(() => count.get() * 2, [count]); //computed
|
|
32
40
|
return tree("div")
|
|
33
|
-
.use(styleSet()
|
|
34
|
-
.fontSize("20px")
|
|
35
|
-
.padding("10px")
|
|
36
|
-
)
|
|
41
|
+
.use(styleSet().fontSize("20px").padding("10px"))
|
|
37
42
|
.append(
|
|
43
|
+
"敲木鱼", tree("br"),
|
|
38
44
|
tree("button")
|
|
39
45
|
.on("click", () => count.set(count.get() + 1))
|
|
40
|
-
.
|
|
41
|
-
tree("
|
|
42
|
-
.
|
|
43
|
-
|
|
44
|
-
tree("
|
|
46
|
+
.textContent("点击加一"),
|
|
47
|
+
tree("button")
|
|
48
|
+
.on("click", () => count.set(count.get() - 1))
|
|
49
|
+
.textContent("点击减一"),
|
|
50
|
+
tree("br"),
|
|
51
|
+
"当前值:", $(count), //引用响应式的值,类似模板语法{{ count }}
|
|
52
|
+
"双倍值:", $(doubled),
|
|
53
|
+
sync(() => createArray(doubled.get(), () => tree("div").textContent("你点了一下")), [doubled]), //列表渲染v-for
|
|
54
|
+
when(() => count.get() > 10, () => tree("p").textContent("count > 10 时显示"), [count]), //条件渲染v-if
|
|
45
55
|
);
|
|
46
56
|
});
|
|
47
57
|
|
|
48
|
-
|
|
58
|
+
Counter({ initial: 0 }).mount("body");
|
|
49
59
|
```
|
|
50
60
|
|
|
51
61
|
## 与 Vue 对比
|
|
52
62
|
|
|
53
|
-
| nine-9 | Vue
|
|
54
|
-
|
|
55
|
-
| `wrap()` | `ref()`
|
|
56
|
-
| `sync()` | computed | 响应式计算值 |
|
|
57
|
-
| `when(condition, tree)` | `v-if`
|
|
58
|
-
| `sync(() => items.map(...))` | `v-for`
|
|
59
|
-
|
|
60
|
-
## API
|
|
61
|
-
|
|
62
|
-
### `wrap<T>(initialData: T)`
|
|
63
|
-
|
|
64
|
-
创建响应式数据包装器。类似 Vue 的 `ref()`。
|
|
65
|
-
|
|
66
|
-
```typescript
|
|
67
|
-
const data = wrap({ name: "nine-9" });
|
|
68
|
-
data.set({ name: "updated" });
|
|
69
|
-
data.event.subscribe((newVal, oldVal) => {
|
|
70
|
-
console.log("变化了:", oldVal, "->", newVal);
|
|
71
|
-
});
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### `sync<R>(effectRenderer: () => R, dependencies?: Wrapper[])`
|
|
75
|
-
|
|
76
|
-
创建计算值,当依赖变化时自动更新。类似 Vue 的 computed 或 React 的 useMemo。返回 `Wrapper<R>`,可以用 `.get()` 读取值或订阅变化。
|
|
77
|
-
|
|
78
|
-
```typescript
|
|
79
|
-
const doubled = sync(() => count.get() * 2, [count]);
|
|
80
|
-
// 直接在树中使用
|
|
81
|
-
tree("p").append(doubled);
|
|
82
|
-
|
|
83
|
-
// 或订阅变化
|
|
84
|
-
doubled.event.subscribe((newVal, oldVal) => {
|
|
85
|
-
console.log("doubled 变化了:", oldVal, "->", newVal);
|
|
86
|
-
});
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### `when(condition: Wrapper<boolean> | (() => boolean), tree: TreeResult, dependencies?: Wrapper[])`
|
|
90
|
-
|
|
91
|
-
条件渲染。类似 Vue 的 `v-if`。返回 `Wrapper<TreeResult>`,可以直接放在树中。
|
|
92
|
-
|
|
93
|
-
```typescript
|
|
94
|
-
// 使用 Wrapper<boolean>
|
|
95
|
-
const isVisible = wrap(true);
|
|
96
|
-
when(isVisible, tree("div").append("我可见!"));
|
|
97
|
-
|
|
98
|
-
// 使用函数
|
|
99
|
-
when(() => count.get() > 5, tree("p").append("count > 5"), [count]);
|
|
100
|
-
|
|
101
|
-
// 直接在树中使用
|
|
102
|
-
tree("div").append(
|
|
103
|
-
when(isVisible, tree("span").append("显示我!"))
|
|
104
|
-
);
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### `createComponent<T>(renderer)`
|
|
108
|
-
|
|
109
|
-
创建组件,返回带有 `mount` 方法的渲染结果。
|
|
110
|
-
|
|
111
|
-
```typescript
|
|
112
|
-
const MyComponent = createComponent((props: { title: string }) => {
|
|
113
|
-
return tree("div").append(props.title);
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
MyComponent({ title: "你好" }).mount("#app");
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### `tree(tagName)`
|
|
120
|
-
|
|
121
|
-
创建 DOM 元素,支持链式调用。
|
|
122
|
-
|
|
123
|
-
```typescript
|
|
124
|
-
tree("div")
|
|
125
|
-
.class("container")
|
|
126
|
-
.id("main")
|
|
127
|
-
.on("click", handler)
|
|
128
|
-
.append(child1, child2);
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
### `styleSet()`
|
|
132
|
-
|
|
133
|
-
创建链式样式对象。
|
|
134
|
-
|
|
135
|
-
```typescript
|
|
136
|
-
tree("div")
|
|
137
|
-
.use(styleSet()
|
|
138
|
-
.color("red")
|
|
139
|
-
.fontSize("16px")
|
|
140
|
-
.display("flex")
|
|
141
|
-
)
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
## License
|
|
145
|
-
|
|
146
|
-
MIT
|
|
63
|
+
| nine-9 | Vue | 说明 |
|
|
64
|
+
|------------------------------|--------------|----------------|
|
|
65
|
+
| `wrap()` | `ref()` | 创建响应式引用 |
|
|
66
|
+
| `sync()` | `computed()` | 响应式计算值 |
|
|
67
|
+
| `when(condition, tree)` | `v-if` | 条件渲染 |
|
|
68
|
+
| `sync(() => items.map(...))` | `v-for` | 列表渲染 |
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,114 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
interface SubcriberCallback<T extends unknown[]> {
|
|
2
|
+
(...data: T): void;
|
|
3
|
+
}
|
|
4
|
+
declare class EventSubcriber<T extends unknown[]> {
|
|
5
|
+
private subcribers;
|
|
6
|
+
subcribe(callback: SubcriberCallback<T>, once?: boolean): void;
|
|
7
|
+
once(): Promise<{
|
|
8
|
+
data: T;
|
|
9
|
+
}>;
|
|
10
|
+
emit(...data: T): void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
type EmptyValue = undefined | null | void | never;
|
|
14
|
+
type Normalize<T extends Record<string, unknown>> = T extends Record<infer K, infer R> ? Record<K, Required<R>> : never;
|
|
15
|
+
type Valueof<T> = T[keyof T];
|
|
16
|
+
|
|
17
|
+
declare const wrapperSymbol: unique symbol;
|
|
18
|
+
type Wrapper<T> = {
|
|
19
|
+
get(): T;
|
|
20
|
+
set(newData: T): void;
|
|
21
|
+
emitEvent(newData: T, oldData: T): void;
|
|
22
|
+
updateOnly(): void;
|
|
23
|
+
event: EventSubcriber<[T, T]>;
|
|
24
|
+
} & {
|
|
25
|
+
[K in typeof wrapperSymbol]: true;
|
|
26
|
+
};
|
|
27
|
+
declare function wrap<T>(initialData: T): Wrapper<T>;
|
|
28
|
+
declare function sync<R>(effectRenderer: () => R, dependencies?: unknown[]): Wrapper<R>;
|
|
29
|
+
declare function when(condition: Wrapper<boolean> | (() => boolean), tree: () => TreeResult, dependencies?: unknown[]): Wrapper<TreeResult[]>;
|
|
30
|
+
declare function isWrapper<T>(data: unknown): data is Wrapper<T>;
|
|
31
|
+
|
|
32
|
+
type StyleSet = {
|
|
33
|
+
[K in keyof CSSStyleDeclaration]: (data: string) => StyleSet;
|
|
34
|
+
} & {
|
|
35
|
+
rules: Record<keyof CSSStyleDeclaration, string>;
|
|
36
|
+
toString(): string;
|
|
37
|
+
};
|
|
38
|
+
declare function styleSet(): StyleSet;
|
|
39
|
+
|
|
40
|
+
type TreeContext<T extends HTMLElement = HTMLElement> = {
|
|
41
|
+
[K in keyof T as T[K] extends (...args: unknown[]) => unknown ? never : K]: (data: T[K] | Wrapper<T[K]>) => TreeContext<T>;
|
|
42
|
+
} & {
|
|
43
|
+
element: T;
|
|
44
|
+
append(...children: (TreeResult | TreeResult[] | Wrapper<TreeResult> | Wrapper<TreeResult[]> | Wrapper<TreeResult | TreeResult[]>)[]): TreeContext<T>;
|
|
45
|
+
use(styleSet: StyleSet | Wrapper<StyleSet>): TreeContext<T>;
|
|
46
|
+
on<E extends keyof HTMLElementEventMap>(key: E, handler: (data: HTMLElementEventMap[E]) => void, options?: AddEventListenerOptions): TreeContext<T>;
|
|
47
|
+
};
|
|
48
|
+
declare function tree<E extends keyof HTMLElementTagNameMap>(data: E | Node): TreeContext<HTMLElementTagNameMap[E]>;
|
|
49
|
+
|
|
50
|
+
type RawSlotInput = TreeResult | (() => TreeResult);
|
|
51
|
+
type SlotInput = RawSlotInput | Wrapper<RawSlotInput>;
|
|
52
|
+
type SlotOutput = Wrapper<TreeResult>;
|
|
53
|
+
|
|
54
|
+
type RenderResult = {
|
|
55
|
+
mount(to: string | HTMLElement): void;
|
|
56
|
+
$: TreeContext;
|
|
57
|
+
} & {
|
|
58
|
+
[K in typeof renderResultSymbol]: true;
|
|
59
|
+
};
|
|
60
|
+
type TreeResult = HTMLElement | TreeContext | string | number | EmptyValue | RenderResult;
|
|
61
|
+
interface ComponentRenderEntry<P extends ComponentPropertyStore> {
|
|
62
|
+
(props?: ComponentPropertyInputDict<P>, slot?: SlotInput): RenderResult;
|
|
63
|
+
}
|
|
64
|
+
type Component<P extends ComponentPropertyStore> = ComponentRenderEntry<P> & ComponentOption<P>;
|
|
65
|
+
interface ComponentPropertyDescriptor<I = unknown, O = unknown, R extends boolean = boolean> {
|
|
66
|
+
validate?: (data: I) => boolean;
|
|
67
|
+
transform: (data: I) => O;
|
|
68
|
+
shadow?: O;
|
|
69
|
+
required?: R;
|
|
70
|
+
}
|
|
71
|
+
type ComponentPropertyStore = Record<string, ComponentPropertyDescriptor>;
|
|
72
|
+
type ComponentPropertyInputDict<P extends ComponentPropertyStore> = {
|
|
73
|
+
[K in keyof P as P[K]["required"] extends true ? K : never]: P[K] extends ComponentPropertyDescriptor<unknown, infer R> ? R : never;
|
|
74
|
+
} & {
|
|
75
|
+
[K in keyof P as P[K]["required"] extends false | unknown ? K : never]?: P[K] extends ComponentPropertyDescriptor<unknown, infer R> ? R | (P[K]["shadow"] extends unknown ? EmptyValue : R) : never;
|
|
76
|
+
};
|
|
77
|
+
type ComponentPropertyOutputDict<P extends ComponentPropertyStore> = {
|
|
78
|
+
[K in keyof P]: P[K] extends ComponentPropertyDescriptor<unknown, infer R> ? R : never;
|
|
79
|
+
};
|
|
80
|
+
interface ComponentOption<P extends ComponentPropertyStore> {
|
|
81
|
+
props?: P;
|
|
82
|
+
}
|
|
83
|
+
declare const renderResultSymbol: unique symbol;
|
|
84
|
+
declare function isRenderResult(data: unknown): data is RenderResult;
|
|
85
|
+
declare function $<T>(data: Wrapper<T>): Wrapper<TreeResult>;
|
|
86
|
+
declare function render(nodeTree: TreeResult): TreeContext;
|
|
87
|
+
declare function createComponent<P extends ComponentPropertyStore>(options: ComponentOption<P>, internalRenderer: (options: ComponentPropertyOutputDict<P>, slot: SlotOutput) => TreeResult): Component<P>;
|
|
88
|
+
|
|
89
|
+
declare function camelToHyphen(str: string): string;
|
|
90
|
+
declare function hyphenToCamel(str: string): string;
|
|
91
|
+
|
|
92
|
+
declare function typedIsArray<T>(arr: unknown[]): arr is T[];
|
|
93
|
+
declare function putIn<T>(data: T): T extends (infer R)[] ? R[] : [T];
|
|
94
|
+
declare function createArray<T>(length: number, filler: () => T): T[];
|
|
95
|
+
|
|
96
|
+
declare namespace logo {
|
|
97
|
+
export { };
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
declare const index_logo: typeof logo;
|
|
101
|
+
declare namespace index {
|
|
102
|
+
export { index_logo as logo };
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
declare const _default: {
|
|
106
|
+
Counter: Component<{
|
|
107
|
+
initialValue: {
|
|
108
|
+
transform: NumberConstructor;
|
|
109
|
+
validate: (number: unknown) => boolean;
|
|
110
|
+
};
|
|
111
|
+
}>;
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
export { $, type Component, type ComponentOption, type ComponentPropertyDescriptor, type ComponentPropertyInputDict, type ComponentPropertyOutputDict, type ComponentPropertyStore, type ComponentRenderEntry, type EmptyValue, EventSubcriber, type Normalize, type RenderResult, type StyleSet, type TreeContext, type TreeResult, type Valueof, type Wrapper, index as assets, _default as builtins, camelToHyphen, createArray, createComponent, hyphenToCamel, isRenderResult, isWrapper, putIn, render, renderResultSymbol, styleSet, sync, tree, typedIsArray, when, wrap, wrapperSymbol };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export * from "./dom";
|
|
3
|
-
export * from "./util";
|
|
4
|
-
export * as assets from "./assets";
|
|
1
|
+
"use strict";var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},U=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of F(t))!B.call(e,r)&&r!==n&&v(e,r,{get:()=>t[r],enumerable:!(o=V(t,r))||o.enumerable});return e};var Z=e=>U(v({},"__esModule",{value:!0}),e);var te={};E(te,{$:()=>$,EventSubcriber:()=>R,assets:()=>A,builtins:()=>j,camelToHyphen:()=>k,createArray:()=>X,createComponent:()=>W,hyphenToCamel:()=>G,isRenderResult:()=>q,isWrapper:()=>f,putIn:()=>D,render:()=>S,renderResultSymbol:()=>w,styleSet:()=>Y,sync:()=>L,tree:()=>y,typedIsArray:()=>Q,when:()=>J,wrap:()=>d,wrapperSymbol:()=>g});module.exports=Z(te);var R=class{subcribers=[];subcribe(t,n=!1){this.subcribers.push({callback:t,once:n})}async once(){return new Promise(t=>{this.subcribe((...n)=>t({data:n}),!0)})}emit(...t){for(let n of this.subcribers)n.callback(...t)}};function k(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function G(e){return e.replace(/-([a-z])/g,t=>t[1].toUpperCase())}var g=Symbol("WrapperFlag");function d(e){let t=["push","pop","shift","unshift","splice","sort","reverse"],n=i=>{if(!Array.isArray(i))return i;let{proxy:l,revoke:x}=Proxy.revocable(i,{get(a,u,c){if(t.includes(u)){let T=Reflect.get(a,u,c);return typeof T=="function"?(...K)=>{let m=s.get();if(Array.isArray(m)){m=[...m];let h=T.call(a,...K);return s.emitEvent(s.get(),m),h}}:Reflect.get(a,u,c)}else return Reflect.get(a,u,c)},set(a,u,c,T){if(Reflect.get(a,u,T)!==c){let m=s.get();if(Array.isArray(m)){m=[...m];let h=Reflect.set(a,u,c,T);return s.emitEvent(s.get(),m),h}}return Reflect.set(a,u,c,T)}});return r=x,l},o=new R,r=null,p=n(e),s={get(){return p},set(i){if(p!==i){let l=p;Array.isArray(l)&&r?(r(),p=n(i)):p=i,this.emitEvent(i,l)}},emitEvent(i,l){o.emit(i,l)},updateOnly(){this.emitEvent(this.get(),this.get())},event:o,[g]:!0};return s}function L(e,t=[]){let n=d(e()),o=()=>{let r=e();n.get()!==r&&n.set(r)};for(let r of t)f(r)&&r.event.subcribe(o);return n}function J(e,t,n=[]){return L(()=>{let o;return typeof e=="function"?o=e():o=e.get(),[o?t():null]},[...n,...f(e)?[e]:[]])}function f(e){return!!e&&Object.hasOwn(e,g)&&e[g]===!0}function Q(e){return Array.isArray(e)}function D(e){return[...Array.isArray(e)?e:[e]]}function X(e,t){return new Array(e).fill(0).map(t)}function y(e){let t=typeof e=="string"?document.createElement(e):e,n=new Proxy({element:t,append(...o){for(let r of o)if(f(r)){let p=[],s=new Comment("Tree anchor");t.appendChild(s);let i=l=>{let x=[...Array.isArray(l)?l:[l]],a=[];for(let u of x){let c=S(u);a.push(c),t.insertBefore(c.element,s.nextSibling)}for(let u of p)u.element.remove();p=a};r.event.subcribe(i),i(r.get())}else{let p=r;for(let s of D(p))t.appendChild(S(s).element)}return n},use(o){if(t instanceof HTMLElement){let r=p=>{for(let[s,i]of Object.entries(p))t.style.setProperty(k(String(s)),i)};f(o)?(o.event.subcribe(p=>r(p.rules)),r(o.get().rules)):r(o.rules)}return n},on(o,r,p){return t instanceof HTMLElement&&t.addEventListener(o,r,p),n}},{get(o,r,p){return Reflect.has(o,r)?Reflect.get(o,r,p):s=>{if(f(s)){let i=l=>t[r]=l;s.event.subcribe(i),i(s.get())}else t[r]=s;return n}}});return n}var C=class extends Error{},b=class extends Error{},P=class extends Error{};function O(e){return Object.assign({validate:()=>!0,transform:t=>t,shadow:null,required:!1},e)}function H(e){for(let t in e){let n=e[t];if(n.shadow){if(n.required)throw new P(`The required property ${t} can't have a shadow.`);if(n.validate&&!n.validate(n.shadow))throw new C(`The shadow of ${t} can't pass the validation.`)}}}function N(e,t){e||(e={});let n={};for(let o in t){let r=O(t[o]);if(!Object.hasOwn(e,o)){if(r.required)throw new b(`Missing a required property ${o}.`);n[o]=r.shadow;continue}let p=e[o];if(!r.validate(p))throw new C(`The input value of ${o} can't pass the validation.`);n[o]=r.transform(p)}return n}function M(e){return typeof e=="function"?d(e()):f(e)?M(e):d(e)}var w=Symbol("RenderResultFlag");function q(e){return!!e&&Object.hasOwn(e,w)&&e[w]===!0}function $(e){return e}function S(e){let t;return e instanceof HTMLElement?t=y(e):typeof e=="string"||typeof e=="number"?t=y(new Text(String(e))):q(e)?t=e.$:e?t=e:t=y(new Comment("Empty tree context")),t}function W(e,t){H(e.props??{});let n=Object.fromEntries(Object.entries(e.props??{}).map(([r,p])=>[r,O(p)]));return Object.assign((r,p)=>{let s=t(N(r,n),M(p)),i=S(s);return{mount(l){let x=typeof l=="string"?[...document.querySelectorAll(l)]:[l];for(let a of x)a.appendChild(i.element)},$:i,[w]:!0}},{props:n})}function Y(){let e={},t=new Proxy({rules:e},{get(n,o,r){return Reflect.has(n,o)?Reflect.get(n,o,r):p=>(e[o]=String(p),t)}});return t}var A={};E(A,{logo:()=>I});var I={};E(I,{default:()=>ee});var ee='data:image/svg+xml,<?xml version="1.0" encoding="UTF-8"?>%0D%0A<svg fill="none" version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">%0D%0A <g transform="matrix(1,0,0,-1,0,80)">%0D%0A <g transform="matrix(1,0,0,-1,0,160)">%0D%0A <path%0D%0A d="m9.4332 86.067-1.7864-1.782c-4.6571 3.6624-7.6468 9.3405-7.6468 15.715 0 5.3448 2.1018 10.2 5.5258 13.788l1.7728-1.7684c-2.9708-3.1349-4.7924-7.365-4.7924-12.019 0-5.6848 2.7174-10.737 6.927-13.933zm2.7405 29.575-1.8541 1.8496c2.8814 1.5984 6.1991 2.5088 9.7299 2.5088 10.396 0 18.945-7.8934 19.95-18h-2.5205c-0.9949 8.7231-8.4191 15.5-17.43 15.5-2.8321 0-5.5075-0.6695-7.8758-1.8584zm19.256-28.96 1.6169-1.9102c-3.5-2.9753-8.0385-4.7712-12.997-4.7712-1.6482 0-3.2499 0.19838-4.7825 0.57251l2.1313 2.126c0.8646-0.13074 1.75-0.19853 2.6512-0.19853 4.3427 0 8.3169 1.574 11.38 4.1814z"%0D%0A fill="%2330D34B" fill-rule="evenodd" />%0D%0A <path%0D%0A d="m20.05 86.045v-0.045285c-6.0798 0-11.257 3.8564-13.207 9.2507-1.9631 5.3748-0.47868 11.63 4.1686 15.519 5.4162 4.5336 13.258 4.2889 18.375-0.2846l-0.0192-0.0161c2.4219-2.1464 4.0939-5.1163 4.5748-8.4695h-5.0945q-0.1527 0.6663-0.4092 1.3128-0.6879 1.7331-2.0091 3.0512-1.3213 1.318-3.0587 2.0041-1.6001 0.6319-3.3211 0.6319-1.7209 0-3.321-0.6319-1.7374-0.6861-3.0587-2.0041-1.3213-1.3181-2.0091-3.0512-0.63347-1.5961-0.63346-3.3128 0-1.5702 0.52996-3.0395 0.54154-1.4842 1.5643-2.7 1.1062-1.3151 2.62-2.1316 1.6437-0.8866 3.5051-1.049 1.8615-0.16246 3.6345 0.42595 1.633 0.54193 2.9513 1.6454l3.2219-3.8302c-2.6269-2.1988-5.8244-3.2736-9.0047-3.2757z"%0D%0A fill="%231E9F33" fill-rule="evenodd" />%0D%0A </g>%0D%0A </g>%0D%0A</svg>';var z=W({props:{initialValue:{transform:Number,validate:Number.isInteger}}},e=>{let t=d(e.initialValue);return y("div").append("\u5F53\u524D\u6570\u503C\uFF1A",t,y("button").textContent("\u70B9\u51FB\u52A0\u4E00").on("click",()=>t.set(t.get()+1)),y("button").textContent("\u70B9\u51FB\u51CF\u4E00").on("click",()=>t.set(t.get()-1)))});var j={Counter:z};0&&(module.exports={$,EventSubcriber,assets,builtins,camelToHyphen,createArray,createComponent,hyphenToCamel,isRenderResult,isWrapper,putIn,render,renderResultSymbol,styleSet,sync,tree,typedIsArray,when,wrap,wrapperSymbol});
|
|
5
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AAEvB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/channel/event-subcriber.ts","../src/util/char.ts","../src/dom/reactive.ts","../src/util/array.ts","../src/dom/tree.ts","../src/exceptions/index.ts","../src/dom/property.ts","../src/dom/slot.ts","../src/dom/component.ts","../src/dom/style.ts","../src/assets/index.ts","../src/builtins/Counter.ts","../src/builtins/index.ts"],"sourcesContent":["export * from \"./channel\";\r\nexport * from \"./dom\";\r\nexport * from \"./util\";\r\n\r\nexport * as assets from \"./assets\";\r\nexport { default as builtins } from \"./builtins\";\r\n","interface SubcriberCallback<T extends unknown[]> {\r\n (...data: T): void;\r\n}\r\ninterface Subcriber<T extends unknown[]> {\r\n callback: SubcriberCallback<T>;\r\n once: boolean;\r\n}\r\nexport class EventSubcriber<T extends unknown[]> {\r\n private subcribers: Subcriber<T>[] = [];\r\n\r\n subcribe(callback: SubcriberCallback<T>, once = false) {\r\n this.subcribers.push({\r\n callback,\r\n once,\r\n });\r\n }\r\n async once() {\r\n return new Promise<{ data: T }>((resolve) => {\r\n this.subcribe((...data) => resolve({ data }), true);\r\n });\r\n }\r\n emit(...data: T) {\r\n for (const subcriber of this.subcribers) {\r\n subcriber.callback(...data);\r\n }\r\n }\r\n}","export function camelToHyphen(str: string) {\r\n return str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);\r\n}\r\nexport function hyphenToCamel(str: string) {\r\n return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());\r\n}","import { EventSubcriber } from \"@/channel/event-subcriber\";\r\nimport { TreeResult } from \"./component\";\r\n\r\nexport const wrapperSymbol = Symbol(\"WrapperFlag\");\r\nexport type Wrapper<T> = {\r\n get(): T;\r\n set(newData: T): void;\r\n emitEvent(newData: T, oldData: T): void;\r\n updateOnly(): void;\r\n event: EventSubcriber<[T, T]>;\r\n} & { [K in typeof wrapperSymbol]: true; };\r\nexport function wrap<T>(initialData: T): Wrapper<T> {\r\n const arrayActions = [\"push\", \"pop\", \"shift\", \"unshift\", \"splice\", \"sort\", \"reverse\"];\r\n const patch = (data: T) => {\r\n if (!Array.isArray(data)) { return data; }\r\n const { proxy, revoke: newRevoke } = Proxy.revocable(data, {\r\n get(target, p: string, receiver) {\r\n if (arrayActions.includes(p)) {\r\n const originalMethod = Reflect.get(target, p, receiver) as (...args: unknown[]) => unknown;\r\n if (typeof originalMethod === \"function\") {\r\n return (...args: unknown[]) => {\r\n let oldData = wrapper.get();\r\n if (Array.isArray(oldData)) {\r\n oldData = [...oldData] as T;\r\n const result = originalMethod.call(target, ...args);\r\n wrapper.emitEvent(wrapper.get(), oldData);\r\n return result;\r\n }\r\n };\r\n } else return Reflect.get(target, p, receiver);\r\n } else {\r\n return Reflect.get(target, p, receiver);\r\n }\r\n },\r\n set(target, p, newValue, receiver) {\r\n const oldValue = Reflect.get(target, p, receiver);\r\n if (oldValue !== newValue) {\r\n let oldData = wrapper.get();\r\n if (Array.isArray(oldData)) {\r\n oldData = [...oldData] as T;\r\n const result = Reflect.set(target, p, newValue, receiver);\r\n wrapper.emitEvent(wrapper.get(), oldData);\r\n return result;\r\n }\r\n }\r\n return Reflect.set(target, p, newValue, receiver);\r\n },\r\n });\r\n oldRevoke = newRevoke;\r\n return proxy;\r\n };\r\n const event = new EventSubcriber<[T, T]>();\r\n let oldRevoke: (() => void) | null = null;\r\n let currentData = patch(initialData);\r\n const wrapper: Wrapper<T> = {\r\n get() { return currentData; },\r\n set(newData) {\r\n if (currentData !== newData) {\r\n const oldData = currentData;\r\n if (Array.isArray(oldData) && oldRevoke) {\r\n oldRevoke();\r\n currentData = patch(newData);\r\n } else {\r\n currentData = newData;\r\n };\r\n this.emitEvent(newData, oldData);\r\n }\r\n },\r\n emitEvent(newData, oldData) {\r\n event.emit(newData, oldData);\r\n },\r\n updateOnly() {\r\n this.emitEvent(this.get(), this.get());\r\n },\r\n event,\r\n [wrapperSymbol]: true\r\n };\r\n return wrapper;\r\n}\r\nexport function sync<R>(effectRenderer: () => R, dependencies: unknown[] = []): Wrapper<R> {\r\n const internalWrapper = wrap(effectRenderer());\r\n const update = () => {\r\n const newData = effectRenderer();\r\n const currentData = internalWrapper.get();\r\n const hasChanged = currentData !== newData;\r\n if (hasChanged) {\r\n internalWrapper.set(newData);\r\n }\r\n };\r\n for (const dependency of dependencies) {\r\n if (!isWrapper(dependency)) continue;\r\n dependency.event.subcribe(update);\r\n }\r\n return internalWrapper;\r\n}\r\nexport function when(condition: Wrapper<boolean> | (() => boolean), tree: () => TreeResult, dependencies: unknown[] = []) {\r\n return sync(() => {\r\n let result: boolean;\r\n if (typeof condition === \"function\") {\r\n result = condition();\r\n } else {\r\n result = condition.get();\r\n }\r\n return [result ? tree() : null];\r\n }, [...dependencies, ...(isWrapper(condition) ? [condition] : [])]);\r\n}\r\nexport function isWrapper<T>(data: unknown): data is Wrapper<T> {\r\n return !!data && Object.hasOwn(data, wrapperSymbol) && data[wrapperSymbol] === true;\r\n}\r\n","export function typedIsArray<T>(arr: unknown[]): arr is T[] {\r\n return Array.isArray(arr);\r\n}\r\nexport function putIn<T>(data: T) {\r\n return [...(Array.isArray(data) ? data : [data])] as T extends (infer R)[] ? R[] : [T];\r\n}\r\nexport function createArray<T>(length: number, filler: () => T): T[] {\r\n return new Array(length).fill(0).map(filler);\r\n}","import { camelToHyphen } from \"@/util/char\";\r\nimport { render, TreeResult } from \"./component\";\r\nimport { isWrapper, Wrapper } from \"./reactive\";\r\nimport { StyleSet } from \"./style\";\r\nimport { putIn } from \"@/util/array\";\r\n\r\nexport type TreeContext<T extends HTMLElement = HTMLElement> = {\r\n [K in keyof T as T[K] extends (...args: unknown[]) => unknown ? never : K]: (data: T[K] | Wrapper<T[K]>) => TreeContext<T>;\r\n} & {\r\n element: T;\r\n append(...children: (\r\n TreeResult |\r\n TreeResult[] |\r\n Wrapper<TreeResult> |\r\n Wrapper<TreeResult[]> |\r\n Wrapper<TreeResult | TreeResult[]>\r\n )[]): TreeContext<T>;\r\n use(styleSet: StyleSet | Wrapper<StyleSet>): TreeContext<T>;\r\n on<E extends keyof HTMLElementEventMap>(key: E, handler: (data: HTMLElementEventMap[E]) => void, options?: AddEventListenerOptions): TreeContext<T>;\r\n};\r\nexport function tree<E extends keyof HTMLElementTagNameMap>(data: E | Node) {\r\n const element: Node = typeof data === \"string\" ? document.createElement(data) : data;\r\n const context: TreeContext<HTMLElementTagNameMap[E]> = new Proxy({\r\n element,\r\n append(...children: (TreeResult | TreeResult[] | Wrapper<TreeResult | TreeResult[]>)[]) {\r\n for (const child of children) {\r\n if (isWrapper<TreeResult | TreeResult[]>(child)) {\r\n let oldChildren: TreeContext[] = [];\r\n const baseAnchor = new Comment(\"Tree anchor\");\r\n element.appendChild(baseAnchor);\r\n const update = (newTrees: TreeResult[] | TreeResult) => {\r\n const normalizedTrees = [...(Array.isArray(newTrees) ? newTrees : [newTrees])];\r\n const newChildren: TreeContext[] = [];\r\n for (const newTree of normalizedTrees) {\r\n const child = render(newTree);\r\n newChildren.push(child);\r\n element.insertBefore(child.element, baseAnchor.nextSibling);\r\n }\r\n for (const oldChild of oldChildren) {\r\n oldChild.element.remove();\r\n }\r\n oldChildren = newChildren;\r\n };\r\n child.event.subcribe(update);\r\n update(child.get());\r\n } else {\r\n const children = child;\r\n for (const child of putIn(children)) {\r\n element.appendChild(render(child).element);\r\n }\r\n }\r\n }\r\n return context;\r\n },\r\n use(styleSet: StyleSet | Wrapper<StyleSet>) {\r\n if (element instanceof HTMLElement) {\r\n const update = (rules: Record<string, string>) => {\r\n for (const [key, value] of Object.entries(rules)) {\r\n element.style.setProperty(camelToHyphen(String(key)), value);\r\n }\r\n };\r\n if (isWrapper<StyleSet>(styleSet)) {\r\n styleSet.event.subcribe((newData) => update(newData.rules));\r\n update(styleSet.get().rules);\r\n } else {\r\n update(styleSet.rules);\r\n }\r\n }\r\n return context;\r\n },\r\n on(key, handler, options) {\r\n if (element instanceof HTMLElement) {\r\n element.addEventListener(key, handler, options);\r\n }\r\n return context;\r\n },\r\n } as TreeContext<HTMLElementTagNameMap[E]>, {\r\n get<P extends keyof Node>(target: Record<string, unknown>, p: P, receiver: unknown) {\r\n if (Reflect.has(target, p)) {\r\n return Reflect.get(target, p, receiver);\r\n } else {\r\n return (data: HTMLElementTagNameMap[E][P] | Wrapper<HTMLElementTagNameMap[E][P]>) => {\r\n if (isWrapper<HTMLElementTagNameMap[E][P]>(data)) {\r\n const update = (newData: HTMLElementTagNameMap[E][P]) => element[p] = newData;\r\n data.event.subcribe(update);\r\n update(data.get());\r\n } else {\r\n element[p] = data;\r\n }\r\n return context;\r\n };\r\n }\r\n },\r\n });\r\n return context;\r\n}","export class ValidationFailed extends Error { }\r\nexport class MissingFieldError extends Error { }\r\nexport class ConflictionError extends Error { }","import { Normalize } from \"@/util\";\r\nimport { ComponentPropertyDescriptor, ComponentPropertyInputDict, ComponentPropertyOutputDict, ComponentPropertyStore } from \"./component\";\r\nimport { ConflictionError, MissingFieldError, ValidationFailed } from \"@/exceptions\";\r\n\r\nexport function normalizePropertyDescriptor\r\n <I, O, R extends boolean>(\r\n descriptor: ComponentPropertyDescriptor<I, O, R>\r\n ): Required<ComponentPropertyDescriptor<I, O, R>> {\r\n return Object.assign({\r\n validate: () => true,\r\n transform: x => x,\r\n shadow: null,\r\n required: false\r\n } satisfies Required<ComponentPropertyDescriptor>, descriptor);\r\n}\r\nexport function validateStore(store: ComponentPropertyStore) {\r\n for (const propertyKey in store) {\r\n const descriptor = store[propertyKey];\r\n if (descriptor.shadow) {\r\n if (descriptor.required) {\r\n throw new ConflictionError(`The required property ${propertyKey} can't have a shadow.`);\r\n }\r\n if (descriptor.validate && !descriptor.validate(descriptor.shadow)) {\r\n throw new ValidationFailed(`The shadow of ${propertyKey} can't pass the validation.`);\r\n }\r\n }\r\n }\r\n}\r\nexport function composeDict<T extends ComponentPropertyStore>(input?: ComponentPropertyInputDict<T>, store?: T) {\r\n if (!input) input = {} as ComponentPropertyInputDict<T>;\r\n const result: Record<string, unknown> = {};\r\n for (const propertyKey in store) {\r\n const descriptor = normalizePropertyDescriptor(store[propertyKey]);\r\n if (!Object.hasOwn(input, propertyKey)) {\r\n if (descriptor.required) {\r\n throw new MissingFieldError(`Missing a required property ${propertyKey}.`);\r\n }\r\n result[propertyKey] = descriptor.shadow;\r\n continue;\r\n }\r\n const value = input[propertyKey];\r\n if (!descriptor.validate(value)) {\r\n throw new ValidationFailed(`The input value of ${propertyKey} can't pass the validation.`);\r\n }\r\n result[propertyKey] = descriptor.transform(value);\r\n }\r\n return result as ComponentPropertyOutputDict<T>;\r\n}","import { TreeResult } from \"./component\";\r\nimport { isWrapper, wrap, Wrapper } from \"./reactive\";\r\n\r\nexport type RawSlotInput = TreeResult | (() => TreeResult);\r\nexport type SlotInput = RawSlotInput | Wrapper<RawSlotInput>;\r\nexport type SlotOutput = Wrapper<TreeResult>;\r\n\r\nexport function pipeExtract(input: SlotInput): SlotOutput {\r\n if (typeof input === \"function\") {\r\n return wrap(input());\r\n } else if (isWrapper<RawSlotInput>(input)) {\r\n return pipeExtract(input);\r\n } else return wrap(input);\r\n}","import { EmptyValue } from \"@/util/types\";\r\nimport { TreeContext, tree } from \"./tree\";\r\nimport { composeDict, normalizePropertyDescriptor, validateStore } from \"./property\";\r\nimport { Wrapper } from \"./reactive\";\r\nimport { SlotInput, SlotOutput, pipeExtract } from \"./slot\";\r\n\r\nexport type RenderResult = {\r\n mount(to: string | HTMLElement): void;\r\n $: TreeContext;\r\n} & { [K in typeof renderResultSymbol]: true; };\r\n\r\nexport type TreeResult = HTMLElement | TreeContext | string | number | EmptyValue | RenderResult;\r\nexport interface ComponentRenderEntry<P extends ComponentPropertyStore> {\r\n (props?: ComponentPropertyInputDict<P>, slot?: SlotInput): RenderResult;\r\n}\r\nexport type Component<P extends ComponentPropertyStore> =\r\n ComponentRenderEntry<P> & ComponentOption<P>;\r\nexport interface ComponentPropertyDescriptor<I = unknown, O = unknown, R extends boolean = boolean> {\r\n validate?: (data: I) => boolean;\r\n transform: (data: I) => O;\r\n shadow?: O;\r\n required?: R;\r\n}\r\nexport type ComponentPropertyStore = Record<string, ComponentPropertyDescriptor>;\r\nexport type ComponentPropertyInputDict<P extends ComponentPropertyStore> = {\r\n [K in keyof P as P[K][\"required\"] extends true ? K : never]:\r\n P[K] extends ComponentPropertyDescriptor<unknown, infer R>\r\n ? R : never;\r\n} & {\r\n [K in keyof P as P[K][\"required\"] extends false | unknown ? K : never]?:\r\n P[K] extends ComponentPropertyDescriptor<unknown, infer R>\r\n ? R | (P[K][\"shadow\"] extends unknown ? EmptyValue : R) : never;\r\n}\r\nexport type ComponentPropertyOutputDict<P extends ComponentPropertyStore> = {\r\n [K in keyof P]:\r\n P[K] extends ComponentPropertyDescriptor<unknown, infer R>\r\n ? R : never;\r\n};\r\nexport interface ComponentOption<P extends ComponentPropertyStore> {\r\n props?: P;\r\n}\r\nexport const renderResultSymbol = Symbol(\"RenderResultFlag\");\r\nexport function isRenderResult(data: unknown): data is RenderResult {\r\n return !!data && Object.hasOwn(data, renderResultSymbol) && data[renderResultSymbol] === true;\r\n}\r\nexport function $<T>(data: Wrapper<T>) {\r\n return data as unknown as Wrapper<TreeResult>;\r\n}\r\nexport function render(nodeTree: TreeResult) {\r\n let result: TreeContext;\r\n if (nodeTree instanceof HTMLElement) {\r\n result = tree(nodeTree);\r\n } else if (typeof nodeTree === \"string\" || typeof nodeTree === \"number\") {\r\n result = tree(new Text(String(nodeTree)));\r\n } else if (isRenderResult(nodeTree)) {\r\n result = nodeTree.$;\r\n } else if (!nodeTree) {\r\n result = tree(new Comment(\"Empty tree context\"));\r\n } else {\r\n result = nodeTree;\r\n }\r\n return result;\r\n}\r\nexport function createComponent<\r\n P extends ComponentPropertyStore\r\n>(\r\n options: ComponentOption<P>,\r\n internalRenderer: (options: ComponentPropertyOutputDict<P>, slot: SlotOutput) => TreeResult\r\n): Component<P> {\r\n validateStore(options.props ?? {});\r\n const propStore = Object.fromEntries(\r\n Object\r\n .entries(options.props ?? {})\r\n .map(([key, value]) => [\r\n key,\r\n normalizePropertyDescriptor(value),\r\n ])\r\n ) as P;\r\n const entryRenderer = (props?: ComponentPropertyInputDict<P>, slot?: SlotInput) => {\r\n const nodeTree = internalRenderer(composeDict(props, propStore), pipeExtract(slot));\r\n const result = render(nodeTree);\r\n return {\r\n mount(to: string | HTMLElement) {\r\n const targets = typeof to === \"string\" ? [...document.querySelectorAll<HTMLElement>(to)] : [to];\r\n for (const target of targets) {\r\n target.appendChild(result.element);\r\n }\r\n },\r\n $: result,\r\n [renderResultSymbol]: true as const\r\n };\r\n };\r\n return Object.assign(entryRenderer, {\r\n props: propStore\r\n } satisfies ComponentOption<P>);\r\n}","export type StyleSet = {\r\n [K in keyof CSSStyleDeclaration]: (data: string) => StyleSet;\r\n} & {\r\n rules: Record<keyof CSSStyleDeclaration, string>;\r\n toString(): string;\r\n};\r\nexport function styleSet() {\r\n const rules = {} as Record<keyof CSSStyleDeclaration, string>;\r\n const context: StyleSet = new Proxy({\r\n rules,\r\n } as StyleSet, {\r\n get<P extends string & keyof CSSStyleDeclaration>(target: Record<string, unknown>, p: P, receiver: unknown) {\r\n if (Reflect.has(target, p)) {\r\n return Reflect.get(target, p, receiver);\r\n } else {\r\n return (data: CSSStyleDeclaration[P]) => {\r\n rules[p] = String(data);\r\n return context;\r\n };\r\n }\r\n },\r\n });\r\n return context;\r\n}","export * as logo from \"./logo.svg\";\r\n","import { $, createComponent, tree, wrap } from \"@\";\r\n\r\nexport default createComponent({\r\n props: {\r\n initialValue: {\r\n transform: Number,\r\n validate: Number.isInteger,\r\n // shadow: 0,\r\n // required: false\r\n }\r\n }\r\n}, (props) => {\r\n const currentValue = wrap(props.initialValue);\r\n return tree(\"div\")\r\n .append(\r\n \"当前数值:\", $(currentValue),\r\n tree(\"button\")\r\n .textContent(\"点击加一\")\r\n .on(\"click\", () => currentValue.set(currentValue.get() + 1)),\r\n tree(\"button\")\r\n .textContent(\"点击减一\")\r\n .on(\"click\", () => currentValue.set(currentValue.get() - 1))\r\n );\r\n});","import Counter from \"./Counter\";\r\n\r\nexport default { Counter };"],"mappings":"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","names":["index_exports","__export","EventSubcriber","assets_exports","builtins_default","camelToHyphen","createArray","createComponent","hyphenToCamel","isRenderResult","isWrapper","putIn","render","renderResultSymbol","styleSet","sync","tree","typedIsArray","when","wrap","wrapperSymbol","__toCommonJS","EventSubcriber","callback","once","resolve","data","subcriber","camelToHyphen","str","letter","hyphenToCamel","g","wrapperSymbol","wrap","initialData","arrayActions","patch","data","proxy","newRevoke","target","p","receiver","originalMethod","args","oldData","wrapper","result","newValue","oldRevoke","event","EventSubcriber","currentData","newData","sync","effectRenderer","dependencies","internalWrapper","update","dependency","isWrapper","when","condition","tree","typedIsArray","arr","putIn","data","createArray","length","filler","tree","data","element","context","children","child","isWrapper","oldChildren","baseAnchor","update","newTrees","normalizedTrees","newChildren","newTree","render","oldChild","putIn","styleSet","rules","key","value","camelToHyphen","newData","handler","options","target","p","receiver","ValidationFailed","MissingFieldError","ConflictionError","normalizePropertyDescriptor","descriptor","x","validateStore","store","propertyKey","ConflictionError","ValidationFailed","composeDict","input","result","MissingFieldError","value","pipeExtract","input","wrap","isWrapper","renderResultSymbol","isRenderResult","data","render","nodeTree","result","tree","createComponent","options","internalRenderer","validateStore","propStore","key","value","normalizePropertyDescriptor","props","slot","composeDict","pipeExtract","to","targets","target","styleSet","rules","context","target","p","receiver","data","assets_exports","__export","logo_exports","Counter_default","createComponent","props","currentValue","wrap","tree","builtins_default","Counter_default"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nine-9",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "一个轻量、高性能、类型安全的 Vanilla DOM 响应式 UI 框架。",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"reactive"
|
|
21
21
|
],
|
|
22
22
|
"scripts": {
|
|
23
|
-
"dev": "
|
|
24
|
-
"build": "
|
|
23
|
+
"dev": "tsup --watch",
|
|
24
|
+
"build": "tsup",
|
|
25
25
|
"lint": "eslint .",
|
|
26
26
|
"lint:fix": "eslint . --fix",
|
|
27
27
|
"check-type": "tsc --noEmit"
|
package/dist/assets/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Logo } from "./logo.svg";
|
package/dist/assets/index.js
DELETED
package/dist/assets/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
interface SubcriberCallback<T extends unknown[]> {
|
|
2
|
-
(...data: T): void;
|
|
3
|
-
}
|
|
4
|
-
export declare class EventSubcriber<T extends unknown[]> {
|
|
5
|
-
private subcribers;
|
|
6
|
-
subcribe(callback: SubcriberCallback<T>, once?: boolean): void;
|
|
7
|
-
once(): Promise<{
|
|
8
|
-
data: T;
|
|
9
|
-
}>;
|
|
10
|
-
emit(...data: T): void;
|
|
11
|
-
}
|
|
12
|
-
export {};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export class EventSubcriber {
|
|
2
|
-
subcribers = [];
|
|
3
|
-
subcribe(callback, once = false) {
|
|
4
|
-
this.subcribers.push({
|
|
5
|
-
callback,
|
|
6
|
-
once,
|
|
7
|
-
});
|
|
8
|
-
}
|
|
9
|
-
async once() {
|
|
10
|
-
return new Promise((resolve) => {
|
|
11
|
-
this.subcribe((...data) => resolve({ data }), true);
|
|
12
|
-
});
|
|
13
|
-
}
|
|
14
|
-
emit(...data) {
|
|
15
|
-
for (const subcriber of this.subcribers) {
|
|
16
|
-
subcriber.callback(...data);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
//# sourceMappingURL=event-subcriber.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"event-subcriber.js","sourceRoot":"","sources":["../../src/channel/event-subcriber.ts"],"names":[],"mappings":"AAOA,MAAM,OAAO,cAAc;IACf,UAAU,GAAmB,EAAE,CAAC;IAExC,QAAQ,CAAC,QAA8B,EAAE,IAAI,GAAG,KAAK;QACjD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACjB,QAAQ;YACR,IAAI;SACP,CAAC,CAAC;IACP,CAAC;IACD,KAAK,CAAC,IAAI;QACN,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO,EAAE,EAAE;YACxC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;IACP,CAAC;IACD,IAAI,CAAC,GAAG,IAAO;QACX,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,SAAS,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;CACJ"}
|
package/dist/channel/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./event-subcriber";
|
package/dist/channel/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/channel/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
|
package/dist/dom/component.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Empty } from "@/util/types";
|
|
2
|
-
import { TreeContext } from "./tree";
|
|
3
|
-
export type RenderResult = {
|
|
4
|
-
mount(to: string | HTMLElement): void;
|
|
5
|
-
$: TreeContext;
|
|
6
|
-
} & {
|
|
7
|
-
[K in typeof renderResultSymbol]: true;
|
|
8
|
-
};
|
|
9
|
-
export type TreeResult = HTMLElement | TreeContext | string | number | Empty | RenderResult;
|
|
10
|
-
export interface Component<T> {
|
|
11
|
-
(props: T, slot?: () => TreeResult): RenderResult;
|
|
12
|
-
}
|
|
13
|
-
export declare const renderResultSymbol: unique symbol;
|
|
14
|
-
export declare function isRenderResult(data: unknown): data is RenderResult;
|
|
15
|
-
export declare function normalizeTree(nodeTree: TreeResult): TreeContext;
|
|
16
|
-
export declare function createComponent<T = void>(renderer: (options: T, slot: () => TreeResult) => TreeResult): Component<T>;
|
package/dist/dom/component.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { tree } from "./tree";
|
|
2
|
-
export const renderResultSymbol = Symbol("RenderResultFlag");
|
|
3
|
-
export function isRenderResult(data) {
|
|
4
|
-
return !!data && Object.hasOwn(data, renderResultSymbol) && data[renderResultSymbol] === true;
|
|
5
|
-
}
|
|
6
|
-
export function normalizeTree(nodeTree) {
|
|
7
|
-
let result;
|
|
8
|
-
if (nodeTree instanceof HTMLElement) {
|
|
9
|
-
result = tree(nodeTree);
|
|
10
|
-
}
|
|
11
|
-
else if (typeof nodeTree === "string" || typeof nodeTree === "number") {
|
|
12
|
-
result = tree(new Text(String(nodeTree)));
|
|
13
|
-
}
|
|
14
|
-
else if (isRenderResult(nodeTree)) {
|
|
15
|
-
result = nodeTree.$;
|
|
16
|
-
}
|
|
17
|
-
else if (!nodeTree) {
|
|
18
|
-
result = tree(new Comment("Empty tree context"));
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
result = nodeTree;
|
|
22
|
-
}
|
|
23
|
-
return result;
|
|
24
|
-
}
|
|
25
|
-
export function createComponent(renderer) {
|
|
26
|
-
return (props, slot) => {
|
|
27
|
-
const nodeTree = renderer(props, () => slot?.());
|
|
28
|
-
const result = normalizeTree(nodeTree);
|
|
29
|
-
return {
|
|
30
|
-
mount(to) {
|
|
31
|
-
const targets = typeof to === "string" ? [...document.querySelectorAll(to)] : [to];
|
|
32
|
-
for (const target of targets) {
|
|
33
|
-
target.appendChild(result.element);
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
$: result,
|
|
37
|
-
[renderResultSymbol]: true
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
//# sourceMappingURL=component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/dom/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,IAAI,EAAE,MAAM,QAAQ,CAAC;AAU3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAC7D,MAAM,UAAU,cAAc,CAAC,IAAa;IACxC,OAAO,CAAC,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,kBAAkB,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;AAClG,CAAC;AACD,MAAM,UAAU,aAAa,CAAC,QAAoB;IAC9C,IAAI,MAAmB,CAAC;IACxB,IAAI,QAAQ,YAAY,WAAW,EAAE,CAAC;QAClC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACtE,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,CAAC;SAAM,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QAClC,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC;IACxB,CAAC;SAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,MAAM,GAAG,IAAI,CAAC,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACrD,CAAC;SAAM,CAAC;QACJ,MAAM,GAAG,QAAQ,CAAC;IACtB,CAAC;IACD,OAAO,MAAM,CAAC;AAClB,CAAC;AACD,MAAM,UAAU,eAAe,CAAW,QAA4D;IAClG,OAAO,CAAC,KAAQ,EAAE,IAAuB,EAAE,EAAE;QACzC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjD,MAAM,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvC,OAAO;YACH,KAAK,CAAC,EAAwB;gBAC1B,MAAM,OAAO,GAAG,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAc,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBAChG,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;oBAC3B,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBACvC,CAAC;YACL,CAAC;YACD,CAAC,EAAE,MAAM;YACT,CAAC,kBAAkB,CAAC,EAAE,IAAI;SAC7B,CAAC;IACN,CAAC,CAAC;AACN,CAAC"}
|
package/dist/dom/index.d.ts
DELETED
package/dist/dom/index.js
DELETED
package/dist/dom/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dom/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
|
package/dist/dom/reactive.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { EventSubcriber } from "@/channel/event-subcriber";
|
|
2
|
-
import { TreeResult } from "./component";
|
|
3
|
-
export declare const wrapperSymbol: unique symbol;
|
|
4
|
-
export type Wrapper<T> = {
|
|
5
|
-
get(): T;
|
|
6
|
-
set(newData: T): void;
|
|
7
|
-
emitEvent(newData: T, oldData: T): void;
|
|
8
|
-
updateOnly(): void;
|
|
9
|
-
event: EventSubcriber<[T, T]>;
|
|
10
|
-
} & {
|
|
11
|
-
[K in typeof wrapperSymbol]: true;
|
|
12
|
-
};
|
|
13
|
-
export declare function wrap<T>(initialData: T): Wrapper<T>;
|
|
14
|
-
export declare function sync<R>(effectRenderer: () => R, dependencies?: unknown[]): Wrapper<R>;
|
|
15
|
-
export declare function when(condition: Wrapper<boolean> | (() => boolean), tree: TreeResult, dependencies?: unknown[]): Wrapper<TreeResult[]>;
|
|
16
|
-
export declare function isWrapper<T>(data: unknown): data is Wrapper<T>;
|
package/dist/dom/reactive.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { EventSubcriber } from "@/channel/event-subcriber";
|
|
2
|
-
export const wrapperSymbol = Symbol("WrapperFlag");
|
|
3
|
-
export function wrap(initialData) {
|
|
4
|
-
const arrayActions = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"];
|
|
5
|
-
const patch = (data) => {
|
|
6
|
-
if (!Array.isArray(data)) {
|
|
7
|
-
return data;
|
|
8
|
-
}
|
|
9
|
-
const { proxy, revoke: newRevoke } = Proxy.revocable(data, {
|
|
10
|
-
get(target, p, receiver) {
|
|
11
|
-
if (arrayActions.includes(p)) {
|
|
12
|
-
const originalMethod = Reflect.get(target, p, receiver);
|
|
13
|
-
if (typeof originalMethod === "function") {
|
|
14
|
-
return (...args) => {
|
|
15
|
-
let oldData = wrapper.get();
|
|
16
|
-
if (Array.isArray(oldData)) {
|
|
17
|
-
oldData = [...oldData];
|
|
18
|
-
const result = originalMethod.call(target, ...args);
|
|
19
|
-
wrapper.emitEvent(wrapper.get(), oldData);
|
|
20
|
-
return result;
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
else
|
|
25
|
-
return Reflect.get(target, p, receiver);
|
|
26
|
-
}
|
|
27
|
-
else {
|
|
28
|
-
return Reflect.get(target, p, receiver);
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
set(target, p, newValue, receiver) {
|
|
32
|
-
const oldValue = Reflect.get(target, p, receiver);
|
|
33
|
-
if (oldValue !== newValue) {
|
|
34
|
-
let oldData = wrapper.get();
|
|
35
|
-
if (Array.isArray(oldData)) {
|
|
36
|
-
oldData = [...oldData];
|
|
37
|
-
const result = Reflect.set(target, p, newValue, receiver);
|
|
38
|
-
wrapper.emitEvent(wrapper.get(), oldData);
|
|
39
|
-
return result;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
return Reflect.set(target, p, newValue, receiver);
|
|
43
|
-
},
|
|
44
|
-
});
|
|
45
|
-
oldRevoke = newRevoke;
|
|
46
|
-
return proxy;
|
|
47
|
-
};
|
|
48
|
-
const event = new EventSubcriber();
|
|
49
|
-
let oldRevoke = null;
|
|
50
|
-
let currentData = patch(initialData);
|
|
51
|
-
const wrapper = {
|
|
52
|
-
get() { return currentData; },
|
|
53
|
-
set(newData) {
|
|
54
|
-
if (currentData !== newData) {
|
|
55
|
-
const oldData = currentData;
|
|
56
|
-
if (Array.isArray(oldData) && oldRevoke) {
|
|
57
|
-
oldRevoke();
|
|
58
|
-
currentData = patch(newData);
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
currentData = newData;
|
|
62
|
-
}
|
|
63
|
-
;
|
|
64
|
-
this.emitEvent(newData, oldData);
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
|
-
emitEvent(newData, oldData) {
|
|
68
|
-
event.emit(newData, oldData);
|
|
69
|
-
},
|
|
70
|
-
updateOnly() {
|
|
71
|
-
this.emitEvent(this.get(), this.get());
|
|
72
|
-
},
|
|
73
|
-
event,
|
|
74
|
-
[wrapperSymbol]: true
|
|
75
|
-
};
|
|
76
|
-
return wrapper;
|
|
77
|
-
}
|
|
78
|
-
export function sync(effectRenderer, dependencies = []) {
|
|
79
|
-
const internalWrapper = wrap(effectRenderer());
|
|
80
|
-
const update = () => {
|
|
81
|
-
const newData = effectRenderer();
|
|
82
|
-
const currentData = internalWrapper.get();
|
|
83
|
-
const hasChanged = currentData !== newData;
|
|
84
|
-
if (hasChanged) {
|
|
85
|
-
internalWrapper.set(newData);
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
for (const dependency of dependencies) {
|
|
89
|
-
if (!isWrapper(dependency))
|
|
90
|
-
continue;
|
|
91
|
-
dependency.event.subcribe(update);
|
|
92
|
-
}
|
|
93
|
-
return internalWrapper;
|
|
94
|
-
}
|
|
95
|
-
export function when(condition, tree, dependencies = []) {
|
|
96
|
-
return sync(() => {
|
|
97
|
-
let result;
|
|
98
|
-
if (typeof condition === "function") {
|
|
99
|
-
result = condition();
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
result = condition.get();
|
|
103
|
-
}
|
|
104
|
-
return [result ? tree : null];
|
|
105
|
-
}, dependencies);
|
|
106
|
-
}
|
|
107
|
-
export function isWrapper(data) {
|
|
108
|
-
return Object.hasOwn(data, wrapperSymbol) && data[wrapperSymbol] === true;
|
|
109
|
-
}
|
|
110
|
-
//# sourceMappingURL=reactive.js.map
|
package/dist/dom/reactive.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"reactive.js","sourceRoot":"","sources":["../../src/dom/reactive.ts"],"names":[],"mappings":"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"}
|
package/dist/dom/style.d.ts
DELETED
package/dist/dom/style.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export function styleSet() {
|
|
2
|
-
const rules = {};
|
|
3
|
-
const context = new Proxy({
|
|
4
|
-
rules,
|
|
5
|
-
}, {
|
|
6
|
-
get(target, p, receiver) {
|
|
7
|
-
if (Reflect.has(target, p)) {
|
|
8
|
-
return Reflect.get(target, p, receiver);
|
|
9
|
-
}
|
|
10
|
-
else {
|
|
11
|
-
return (data) => {
|
|
12
|
-
rules[p] = String(data);
|
|
13
|
-
return context;
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
});
|
|
18
|
-
return context;
|
|
19
|
-
}
|
|
20
|
-
//# sourceMappingURL=style.js.map
|
package/dist/dom/style.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/dom/style.ts"],"names":[],"mappings":"AAMA,MAAM,UAAU,QAAQ;IACpB,MAAM,KAAK,GAAG,EAA+C,CAAC;IAC9D,MAAM,OAAO,GAAa,IAAI,KAAK,CAAC;QAChC,KAAK;KACI,EAAE;QACX,GAAG,CAA+C,MAA+B,EAAE,CAAI,EAAE,QAAiB;YACtG,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC;gBACzB,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACJ,OAAO,CAAC,IAA4B,EAAE,EAAE;oBACpC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;oBACxB,OAAO,OAAO,CAAC;gBACnB,CAAC,CAAC;YACN,CAAC;QACL,CAAC;KACJ,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACnB,CAAC"}
|
package/dist/dom/tree.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { TreeResult } from "./component";
|
|
2
|
-
import { Wrapper } from "./reactive";
|
|
3
|
-
import { StyleSet } from "./style";
|
|
4
|
-
export type TreeContext<T extends HTMLElement = HTMLElement> = {
|
|
5
|
-
[K in keyof T as T[K] extends (...args: unknown[]) => unknown ? never : K]: (data: T[K] | Wrapper<T[K]>) => TreeContext<T>;
|
|
6
|
-
} & {
|
|
7
|
-
element: T;
|
|
8
|
-
append(...children: (TreeResult | Wrapper<TreeResult[]>)[]): TreeContext<T>;
|
|
9
|
-
use(styleSet: StyleSet | Wrapper<StyleSet>): TreeContext<T>;
|
|
10
|
-
on<E extends keyof HTMLElementEventMap>(key: E, handler: (data: HTMLElementEventMap[E]) => void, options?: AddEventListenerOptions): TreeContext<T>;
|
|
11
|
-
};
|
|
12
|
-
export declare function tree<E extends keyof HTMLElementTagNameMap>(data: E | Node): TreeContext<HTMLElementTagNameMap[E]>;
|
package/dist/dom/tree.js
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { camelToHyphen } from "@/util/char";
|
|
2
|
-
import { normalizeTree } from "./component";
|
|
3
|
-
import { isWrapper } from "./reactive";
|
|
4
|
-
export function tree(data) {
|
|
5
|
-
const element = typeof data === "string" ? document.createElement(data) : data;
|
|
6
|
-
const context = new Proxy({
|
|
7
|
-
element,
|
|
8
|
-
append(...children) {
|
|
9
|
-
for (const child of children) {
|
|
10
|
-
if (!isWrapper(child)) { //插入的不是响应式,直接用
|
|
11
|
-
element.appendChild(normalizeTree(child).element);
|
|
12
|
-
continue;
|
|
13
|
-
}
|
|
14
|
-
let oldChildren = [];
|
|
15
|
-
const baseAnchor = new Comment("Just an anchor"); //把锚点存起来,树更新时把新节点加到这个锚点后面
|
|
16
|
-
element.appendChild(baseAnchor);
|
|
17
|
-
const update = (newTrees) => {
|
|
18
|
-
const newChildren = [];
|
|
19
|
-
for (const newTree of newTrees) {
|
|
20
|
-
const child = normalizeTree(newTree);
|
|
21
|
-
newChildren.push(child);
|
|
22
|
-
element.insertBefore(child.element, baseAnchor.nextSibling); //是要插在锚点的后面,不是前面
|
|
23
|
-
}
|
|
24
|
-
for (const oldChild of oldChildren) { //新节点创建后把旧的删掉
|
|
25
|
-
oldChild.element.remove();
|
|
26
|
-
}
|
|
27
|
-
oldChildren = newChildren; //下一次更新时,这一次更新的节点就成旧节点了
|
|
28
|
-
};
|
|
29
|
-
child.event.subcribe(update); //订阅响应式对象的事件
|
|
30
|
-
update(child.get());
|
|
31
|
-
}
|
|
32
|
-
return context;
|
|
33
|
-
},
|
|
34
|
-
use(styleSet) {
|
|
35
|
-
if (element instanceof HTMLElement) {
|
|
36
|
-
const update = (rules) => {
|
|
37
|
-
for (const [key, value] of Object.entries(rules)) {
|
|
38
|
-
element.style.setProperty(camelToHyphen(String(key)), value);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
if (isWrapper(styleSet)) {
|
|
42
|
-
styleSet.event.subcribe((newData) => update(newData.rules));
|
|
43
|
-
update(styleSet.get().rules);
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
update(styleSet.rules);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
return context;
|
|
50
|
-
},
|
|
51
|
-
on(key, handler, options) {
|
|
52
|
-
if (element instanceof HTMLElement) {
|
|
53
|
-
element.addEventListener(key, handler, options);
|
|
54
|
-
}
|
|
55
|
-
return context;
|
|
56
|
-
},
|
|
57
|
-
}, {
|
|
58
|
-
get(target, p, receiver) {
|
|
59
|
-
if (Reflect.has(target, p)) {
|
|
60
|
-
return Reflect.get(target, p, receiver);
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
return (data) => {
|
|
64
|
-
if (isWrapper(data)) {
|
|
65
|
-
const update = (newData) => element[p] = newData;
|
|
66
|
-
data.event.subcribe(update);
|
|
67
|
-
update(data.get());
|
|
68
|
-
}
|
|
69
|
-
else {
|
|
70
|
-
element[p] = data;
|
|
71
|
-
}
|
|
72
|
-
return context;
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
});
|
|
77
|
-
return context;
|
|
78
|
-
}
|
|
79
|
-
//# sourceMappingURL=tree.js.map
|
package/dist/dom/tree.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/dom/tree.ts"],"names":[],"mappings":"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"}
|
package/dist/util/char.d.ts
DELETED
package/dist/util/char.js
DELETED
package/dist/util/char.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"char.js","sourceRoot":"","sources":["../../src/util/char.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,aAAa,CAAC,GAAW;IACrC,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACvE,CAAC;AACD,MAAM,UAAU,aAAa,CAAC,GAAW;IACrC,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;AAC/D,CAAC"}
|
package/dist/util/index.d.ts
DELETED
package/dist/util/index.js
DELETED
package/dist/util/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
|
package/dist/util/types.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type Empty = undefined | null | void | never;
|
package/dist/util/types.js
DELETED
package/dist/util/types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/util/types.ts"],"names":[],"mappings":""}
|