Easy.ts

一个简易的TypeScript框架

本人不太会写README.md

How to use

1. 在package.json中：

• 加入依赖：@helloworl1926/easy-ts和vite
• 添加：

 "scripts": {
   "dev": "vite",
   "build": "vite build"
 }

2. 复制src/main.ts （如果你是在npmjs上看的README，请去代码仓库）
3. 在同一目录新建“App.ts”，写代码
4. 运行：

npm install
npm run dev

5. 浏览器打开http://localhost:5173

⚠️ 内测警告：JSX 支持目前处于内测阶段，仍不稳定。
生产环境推荐使用 createNode API。

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

Functions

createNode(tag: keyof HTMLElementTagNameMap | Component, props?: object, children?: (ElNode | string | Ref<any>) | string)

内部实现是复杂函数签名，这里先简化^^^^

创建节点

例如：

createNode("div", {style: { backgroundColor: "gray" }}, [
    "test",
    createNode("h6", {}, "test")
])

框架专有props：

• text: 文本内容，支持ref
• on+事件名: 事件绑定，不支持ref
• class: 可以是数组、string、或其他支持toString的对象。不支持传ref
• style: 传对象而不是字符串，支持ref

createRef<T>(initial: T)

创建响应式变量

例如：

const count = createRef<number>(0) 

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

Ref.toString() - 相当于Ref.value.toString()，会触发getter

computed<T>(fn: () => T): Ref<T>

派生，在fn中的值变化时重新计算并更新ref

例如：

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变化时，自动调用

例如：

const ref = createRef("")

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

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

Null

占位符组件

例子在条件渲染里面

condition(condition: boolean | Ref<boolean>, trueNode: ElNode, falseNode: ElNode = createNode(Null))

条件渲染

支持普通boolean

例如：

const ref = createRef(true)

createNode("h3", {}, [
    condition(ref, 
        createNode("p", {}, "content")
    )
])

falseNode默认值是Null组件

官方推荐文件夹结构

project src App.ts // 或tsx main.ts index.html tsconfig.json package.json package-lock.json // 其他……

Example

最小可用App.ts模板：

import { ElNode, createRef, createNode } from "@helloworl1926/easy-ts"

function App(): ElNode {
    const count = createRef(0)

    return createNode("div", {}, [
        createNode("h2", {}, "Hello, Easy.ts!"),
        createNode("h2", {onclick() {count.value++}}, [
            "Count is ",
            count
        ])
    ])
}

协议

MIT © helloworl1926