👻 Fast 1kb JavaScript library reactive and no combile.
Clone or download
Latest commit a3aafd4 Jan 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 日常提交 Jan 10, 2019
docs Create CNAME Dec 23, 2018
examples/counter 日常提交 Jan 13, 2019
packages 终于实现了,下一步实现diff Jan 13, 2019
.babelrc 终于实现了,下一步实现diff Jan 13, 2019
.gitignore 日常提交 Jan 10, 2019
README.md hooks初步搞定啦 Jan 10, 2019
package-lock.json 终于实现了,下一步实现diff Jan 13, 2019
package.json 终于实现了,下一步实现diff Jan 13, 2019
style.css 日常提交 Dec 24, 2018

README.md

fre logo

Fre

Fast 1kb JavaScript reactive library and can run directly in brower without compile.

npm-v npm-d

Feature

  • 🎉 hooks style makes function run anywhere
  • 🎊 tagged template turn to JSX-like
  • 📣 Reactive because Proxy
  • 🔭 All in one , just 1 KB

Introduction

Fre (pronounced /fri:/, like free) is a tiny and perfect javascript library, It means freedom ~

其实,free 是一部动漫名,也是我最喜欢的番没有之一,haru 是我儿子! 参见 c 站

Install

yarn add fre -S

Use

import { render, h, useState } from '../../packages/core'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

render(<Counter />, document.body)

hooks API

其实这里应该叫做functionalCompoent比较合适,一种新的组件化方案

非常感谢 react 发明了 hooks API 这一神作,和 render propsHOCmixin 不同,它的“状态共享”不借助类

它是真真 ♂ 的 function 自己维护状态

这使得 fre 的组件化得以实现,在此之前,这是 fre 最大的坑,之前的 Proxy 劫持方案,无法记录是状态来自哪里

所以,这次重构,真正使得 fre 成为一个完整的框架了,接下来就是优化 diff 等√

import { render, h, useState } from '../../packages/core'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>{count}</h1>
      <Sex sex='boy' />
      <button onClick={() => sex === 'boy' ? setSex('girl') : setSex('boy')}>x</button>
    </div>
  )
}

function Sex(props){
  const [sex, setSex] = useState(props.sex)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

render(<Counter />, document.body)

tagged template

fre 提供 JSX-like 的 tagged template 语法,浏览器原生支持,无需编译

建议根据场景选择,webpack 下 JSX 比较合适,浏览器环境肯定要 tagged template(如后端语言的模板引擎)

html`
  <div>
    <h1>${count}</h1>
    <button onclick=${() => setCount(count+1)>+</button>
  </div>
`

和 jsx 一样,最终会被转换成 h 函数,进而生成 vdom tree

性能不会差,可以粗略理解为 vue 的 compile 过程,如果使用 jsx ,将直接省略这个过程

JSX

默认也对外暴露了 h 函数,可以选用 JSX

import { h } from 'fre'

webpack 需配置:

{
  "plugins": [
    ["transform-react-jsx", { "pragma":"Fre.h" }]
  ]
}

keyed-diff-patch

fre 使用的是 preact 的 diff 方案,vdom 直接和 dom 比对,然后操作 dom,同时 children 还会根据 key 进行重复利用

Article

《Fre:又一个小而美的前端 MVVM 框架》:知乎掘金

《fre 揭秘系列:Function.caller 替代方案》:github

License

MIT Inspirated by vue & react & htm & hyperapp