berialjs / berial Goto Github PK

I had a problem while running the "child-fre" example.

when I install deps and run yarn start, I get the following error in the browser

index.js?41f5:16 Uncaught TypeError: undefined is not a function

Idk the exact reason, can u help me?

1.没有等子应用unmonut完就开始mount
2.劫持的子应用路由处理函数没有在应用切换后执行

micro-front-end/berial/src/index.ts(3,10): semantic error TS2305: Module '"./proxy"' has no exported member 'produce'.

像模态框组件通常是插入到 body下。
子应用模态框如果插入到parent body下，样式会被shadowDOM隔离

如题，这些会直接操作document.head.appendChild这个能做到沙箱隔离吗？

大佬，这个demo，运行起来，点击按钮没法正常切换应用。但是单独访问子应用是ok的。

第一部分

• 忽略 proxy.ts 文件中的类型, 将它当作一个 js 文件
• 尽可能不使用可选类型, 这样做可以减轻负担, 将开发时体验移到下个阶段开始做
• 优先规定函数输入输出类型, 放弃内部
• 将复杂类型统一抽象
• 减少花里胡哨的编程方式, 尽量不要使用高阶函数, 过度重载, 两层以上的箭头函数, 此处必须 @yisar

第二部分

• 增强开发时体验, 完成第一部分后再补

1. 排除 webapck-dev-server 的干扰

devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' }, // 支持跨域
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3002,
    historyApiFallback: true, // history 路由
    hot: true,
    inline: false // inline false 的意思是不将 dev server 的逻辑打包到业务文件中
  }

2. 排除 babel 的干扰

babel 的很多 polyfill 都改了原型，所以尽量不要装 babel 的兼容性插件，因为 berial 现在的目标不是兼容旧版本 IE

目前已知问题：

1. 不支持 @babel/preset-env，这个插件的作用是根据浏览器版本而编译出不同的结果，berial 沙箱是不支持的

如果确实需要支持旧版本的浏览器，需要使用全局 polyfill

3. polyfill

https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs
https://github.com/GoogleChrome/proxy-polyfill

这两个 polyfill 可以兼容到 ie11，但是注意，polyfill 要加到「父应用的头部」，不能放到子应用，因为子应用是泡在沙箱里的

不建议兼容 ie5（ie9），因为 web component 本身是需要继承 HTMLElement 的，这种 ES6 的全局对象很难被模拟，即便模拟，行为也会不一致

4. 沙雕 dom 太硬

如果出现 css 样式无法穿透的问题，比如全局弹窗，需要将对应的 css 通过 js 插入到头部，或者说给每一个子应用都拼接上一段 css，这块目前需要主动处理

当一个路由下存在多个实例的时候，因为 berial 这部分是抄的 single-spa，所以是串行的

https://github.com/berialjs/berial/blob/master/src/app.ts#L90

一个实例 then 了再走下一个实例，这样的缺点就是 promise 太多太绕，作为作者本人我都快晕了…………性能也不咋地

新思路

我们将多实例的结构改造成一棵树（根据路由），然后使用 react fiber 的调度思路去安排生命周期的调度过程

就是当页面中有多个实例的时候，我们不走串行异步队列，而是走并发异步渲染

然后每个沙箱自己有一条自己的渲染管线，无论管线内部怎么去执行，我们保证整体的生命周期执行顺序是正确的

<slot name="a"> 
    <slot name="b"></slot> 
</slot> 

a mount
b mount

b unmout
a unmout

我们想要的顺序是，自上而下执行 mount，自下而上执行 unmount，但是这一切都是异步并行的

调度器说变了就是让一个并发地东西具有正确的顺序

实现

为了能更好的利用这个调度思路，我们需要改造我们的路由系统，让它变成树状的

const routes = {
    path: '/parent',
    tag: 'parent-entity',
    url: 'http://localhost: 3000',
    children: [{
        path: '/parent',
        tag: 'child-entity',
        url: 'http://localhost: 3000'
    }]
}

如上，有了父子关系，我们走类似 fiber 的调度思路就会轻松许多

具体的实现，我会回复这条 issue 下面

p.s

我想 berial 和 qiankun 不同的是，berial 不依赖任何库，它拥有更底层的控制权，所以我们可以做更多尝试

当然 qiankun 对 html-loader 等的发明也是非常赞的思路了

缺点

新的调度会使得整个框架的调度复杂度大大提升，实际上会增加接入成本

尤其是需要照顾 vue 等框架的路由系统，还是有心智负担的

但是不要慌，反正没人用！

run(code, null) 相当于调用了 null.allowList 而报错

如上图，当子应用生命周期方法有调用全局对象，直接访问的也是全局的对象