init.js
准备好 window.jsx
与 globalThis._brk_,
之后的每一页都只是一个普通的 ES 模块。
<script src="/static/init.js"></script>
<script>brk.render({ load: "/dist/app/page.mjs" })</script>
用 esbuild 编译,format: 'esm'。
框架运行时早已在 init.js 中就绪,页面产物里没有 loader、没有 diff。
import { brk } from '@/brk';
const vino = () => (
<div css="padding: 4px">
<brk.card>
<h1>Hello World</h1>
<div cls="bge" css="height: 1px; margin: 4px 0 8px"/>
</brk.card>
</div>
);
export const page = { vino };
import { brk } from '@/brk';
// format: 'esm' · jsxFactory: jsx
const vino = () => jsx("div", { css: "padding: 4px" },
jsx(brk.card, {},
jsx("h1", {}, "Hello World"),
jsx("div", {
cls: "bge",
css: "height: 1px; margin: 4px 0 8px"
})
)
);
export const page = { vino };
下面四条不是特性,而是决定。它们解释了为什么 brk 能做到这么小,也解释了它会让你在哪些地方需要多写一点。
组件函数只执行一次,DOM 只生成一次。没有 hooks,没有重渲染,UI = f(state) 由你自己维持。
更新交给 replaceChildren 和 textContent,刷新粒度由你决定。框架不介入状态到 DOM 的同步。
init.js 把 jsx 与 globalThis._brk_ 一次性注入,页面产物里只有你的应用代码。
init.js 是源码不是黑盒。你可以覆盖 brk.opens,甚至重写整套运行时。
骨架已经就位,下面每一块都会独立成页,逐步补齐。
从 init.js 到第一个页面。讲清 JSX 语法、页面契约、渲染与更新、父子通信。
即将到来brk 命名空间的完整说明:card、icon、opens、_load、_json、v、weak 等。
即将到来init.js 如何注入运行时、服务端引导、页面模块协议,以及为什么没有虚拟 DOM。
即将到来微前端外壳、多页切换、锚点刷新、用你自己的 init/brk.js 完全替换框架。
即将到来以插件形式加载的组件库与 WebComponent 生态,同功能全局只加载一次。
即将到来brk 与 React、Vue、qiankun 等方案的差异,以及各自适合的取舍。
即将到来