# Easy.ts

**Repository Path**: helloworl1926/easy.ts

## Basic Information

- **Project Name**: Easy.ts
- **Description**: 一个非常简单的TypeScript前端框架，不怎么完善
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-12
- **Last Updated**: 2026-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript

## README

# Easy.ts
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 一个简易的TypeScript框架
###### 本人不太会写README.md（虽然写的比Solid还好）

## How to use

1. 运行下面代码：
``` cmd 
git clone https://gitee.com/helloworl1926/easy.ts.git
cd easy.ts
npm i
npm run build:ts
npm link
npm link @helloworl1926/easy-ts
npm run dev
```
2. 浏览器打开`http://localhost:5173`
3. 编辑App.tsx

### 注：如果您要用Easy.ts，请必须使用Vite来运行，否则您请另寻其他框架

## Functions

### `createNode(tag: keyof HTMLElementTagNameMap | Component, props?: object, children?: (ElNode | string | Ref<any>) | string)`
###### 内部实现是复杂函数签名，这里先简化^^^^
#### 创建虚拟DOM节点（ElNode）
#### 例如：
``` typescript
createNode("div", {style: { backgroundColor: "gray" }}, [
    "test",
    createNode("h6", {}, "test")
])
```
#### 框架专有props：
 - `text`: 文本内容，支持ref
 - `ref`: 在组件挂载时调用，传入组件的真实DOM作为参数
 - `on+事件名`: 事件绑定，不支持ref
 - `class`: 可以是数组、string、或其他支持toString的对象。现不支持传ref。
 - `style`: 传对象而不是字符串，支持ref

### `createRef<T>(initial: T)`
#### 创建响应式变量
#### 例如：
``` typescript
const count = createRef<number>(0) 

createNode("h3", {onclick() {count.value++}}, [
    "Count is ",
    count
])
```
#### `Ref.toString()` - 相当于`Ref.value.toString()`，会触发getter
#### children数组里要直接传ref，别问我为什么，要问就问React

### `computed<T>(fn: () => T): Ref<T>`
#### 派生，在fn中的值变化时重新计算并更新ref
#### 例如：
```typescript
const count1 = createRef(0)
const count2 = createRef(0)
const total = computed(() => count1.value + count2.value) 

createNode("h3", {onclick() {count1.value++}}, [
    "Count 1 is ",
    count1
])

createNode("h3", {onclick() {count2.value++}}, [
    "Count is ",
    count2
])

createNode("h3", {}, [
    "Total: ",
    total
])
```

### `effect(fn: () => void)`
#### 创建ref监听器，先调用一次fn，之后fn内部使用的ref变化时，自动调用
#### 例如：
``` typescript
const ref = createRef("")

effect(() => {
    console.log("ref 变了：", ref.value)
})
```

#### 如果内部没有使用到ref，在组件或App挂载时执行一次

### `Null`
#### 占位符组件
#### 例子在条件渲染里面

### `condition(condition: boolean | Ref<boolean>, trueNode: ElNode, falseNode: ElNode = createNode(Null))`
#### 条件渲染
#### 支持普通boolean
#### 例如：
```typescript
const ref = createRef(true)

createNode("h3", {}, [
    condition(ref, 
        createNode("p", {}, "content")
    )
])
```
#### falseNode默认值是Null组件

### `createGlobalData< T extends Record<string, any> >(data: T): Ref<T>`
#### 全局数据（类似Context），其实返回的是Ref
#### 例如：
```typescript
const data = createGlobalData({data: "My Data"}) 

function Component1() {
    return createNode("div", {}, [
        "Component1's Data: ",
        data.value.data
    ])
}

function Component2() {
    return createNode("div", {}, [
        "Component2's Data: ",
        data.value.data
    ])
}

createNode("div", {}, [
    createNode(Component1),
    createNode(Component2)
])
```

### `createAsyncComponent(loader: () => Promise<ElNode>, callbacks: AsyncComponentCallbacks, fallbacks: AsyncComponentFallbacks)`
#### 把异步组件变成普通组件
#### 那两个内置类型导出了，可以导入
#### 例如：
```typescript
async function TestAsyncComponent() {
    return fetch("/api/user").then(data => data.json()).then(data => (
        createNode("div", {}, ["Data: ", data])
    ))
}

createNode("div", {}, [
    createAsyncComponent(TestAsyncComponent)
])
```


# 协议
MIT © helloworl1926