8

fre 和 wean 更新：我还没放弃

 3 years ago
source link: https://zhuanlan.zhihu.com/p/366457831
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

fre 和 wean 更新：我还没放弃

俺，只想跪在床上娇喘，不想隔着网线叫唤

大家好，我是 132，最近心情很糟糕，血液指标有恶化呜呜呜，真的很无奈了

fre 支持 boundaries component

事情的起因是 html-webpack-plugin 作者的提议：

https://github.com/yisar/fre/issues/257

我就更新了 fre，支持了 Suspense 和 ErrorBoundary

Suspense：

import { lazy, Suspense } from 'fre'

const Lazy = lazy(() => {
  return new Promise(resolve =>
    setTimeout(
      () =>
        resolve({
          default: () => <div>Hello</div>
        }),
      1000
    )
  )
})

function App() {
  return <Suspense fallback={'loading'}>
    <Lazy/>
    <div>111</div>
    <Lazy/>
  </Suspense>
}

ErrorBoundary：

import { ErrorBoundary } from 'fre'

function errorFn(error){
  console.error(error)
  return <div>hello</div>
}

function App() {
  return <ErrorBoundary fallback={errorFn}>
    <A/>
  </ErrorBoundary>
}

function A(){
  throw 111
}

这类组件我们称之为边界组件，包括 Fragment 也算，这类组件的特点是没有逻辑，仅仅是提供一个标记，然后 reconcile 的过程中，赋予他们魔法

每个边界组件都有自己的魔法

至此，fre 已经具备了 react 最优秀的特性，hooks API，Suspense，ErrorBoundary，Fragment

提问，context 怎么办？

context，memo，lazy 这类 api 都和 fre 的核心没有什么关系，比如 lazy，完全可以外置实现：

export function lazy(loader) {
  let p
  let comp
  let err
  return function Lazy(props) {
    if (!p) {
      p = loader()
      p.then(
        exports => (comp = exports.default || exports),
        e => (err = e)
      )
    }
    if (err) throw err
    if (!comp) throw p
    return h(comp, props)
  }
}

context 也完全可以外置实现：

export const createContext = defaultValue => {
  const context = {
    value: defaultValue,
    subs: new Set(),
    Provider: function Provider({ value, children }) {
      useLayout(() => {
        context.subs.forEach(fn => fn(value))
        context.value = value
      })
      return children
    }
  }
  return context
}

export const useContext = (context, selector) => {
  const subs = context.subs
  const [, forceUpdate] = useReducer(c => c + 1, 0)
  const selected = selector ? selector(context.value) : context.value
  const ref = useRef(null)
  useLayout(() => {
    ref.current = selected
  })
  useLayout(() => {
    const fn = nextValue => {
      if (ref.current === selector(nextValue)) return
      forceUpdate()
    }
    subs.add(fn)
    return () => subs.delete(fn)
  }, [subs])
  return selected
}

这种可以外置实现的 api，我个人是不乐意内置在 fre 中的，不只是占用了代码尺寸，关键是会影响框架架构的稳定性

但是！你以为这是我的任性？不，我肯定会给你加上的！

fre fizz 和 fre kit

可能现在知乎已经不关心前端框架了，其实 react 今年是有大动作的，那就是 react fizz

react fizz 是新的 ssr 架构，基于流式的并发渲染，可以说非常赞了

有人说，2021 年是 sssr 的一年

fre 也会实现 fizz 架构，对 sssr 提供一手支持，而且我会写一个基于 vite 的 fre ssr 框架，取名为 frekit

从一开始，fre 的目标就不是兼容 react 的生态，因为 fre 没有生态，所以 frekit 就是 fre 的官方全家桶

SSR
router
Keppalive
Context api
lazy
useFetch

曾经 fre 没有的，frekit 全都会有！

另外说一下 vite，frekit 我会基于 vite 封装，其实我一直觉得 vue 团队很努力，虽然从框架作者的角度来说，我们在框架设计的某些方面有分歧

但从使用者来说，vite 还是靠谱的——尤其是针对现代 web 项目

我希望 frekit 能尽可能开箱即用，所以 vite-fre-plugin 我也会放到 frekit 中维护

以上，2021 年，对 fre 来说，重点是 fizz 和 frekit

wean

除了 fre，我的第二儿子是 wean，啊哈哈，我之前对 wean 的架构设计还挺满意的

fre 因为 fiber 的链表结构，导致过于抽象，而 wean 则是一个敲到好处的封装

对于 wean，我最近会有一次大的重构，使用 rollup 的思路去打包 js asset

旧版本 wean 的主要工作是构建一棵树，import 的内容，会成为这个文件的孩子，最终形成一棵树

rollup 是后置导入，它会构建一个 module graph 和 scope chain，分析作用域的依赖，然后后置导入，最终是一个图，而不是树

我觉得 rollup 的设计更好一点，所以我准备把它搞到 wean 里

wean 的结构我重构好几次了，每次设计都有一种儿子变精致的感觉，但它还差得远，希望可以一点点变好吧

总结

总之，fre 和 wean 俺都没有放弃，只是感叹人间悲凉，我的身体不知道还能撑多久，希望下次复查指标不要继续恶化了

唉，其实我心态很不好，但我不想因为这个连累别人，因为现在也不是最坏情况不是吗？


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK