ice-lab / icestark Goto Github PK

背景

优化了 history 示例问题后，AppLink / Link 对 AppRouter update 的触发时机不一致，结论： Browser 路由对子应用Link触发的跳转不会有 double render 的问题；Hash 路由因为统一通过 popstate 劫持，跟浏览器默认前进后退同步处理，会引起 double render

• AppLink
  

• Link
  

为了更好的完善 icestark 微前端的应用场景，我们希望您能分享以下关于 icestark 项目的信息：

1. 公司信息
2. 基于什么样的诉求使用微前端
3. 项目集成多少个子应用，页面量级有多大
4. 如果项目是对外的，请分享链接

背景

• 子应用之间通信（补充具体 case）

• 子应用与框架应用通信（补充具体 case）

方案

提供统一的数据流转中心，事件监听，回调函数设置等基础逻辑的封装

import { store, event } from '@ice/stark-data';

// 初始化
store.set('status', '')

// 获取数据
const status = store.get('status')

// 更新数据
store.set('status', 'newStatus')

// 监听数据变化
store.on('status', data => {
  console.log(data);
}, true)


// 触发事件执行，可传递任意个参数
event.emit('event', 'test', 'test2')

const listener = (a, b) => {
    // do something
    console.log(a) // 'test'
    console.log(b) // 'test2'
}
// 监听事件
event.on('event', listener)

// 移除监听
event.off('event', listener)
// 移除该事件的所有监听器
event.off('event')

// 检查某个事件是否被监听
event.has('event')

场景分析

• 子应用页面切换参数流转

import { store, event } from '@ice/stark-data';

// 子应用A设置信息
store.set('from', 'A');
store.set('current', 0);

// 子应用B读取信息
const from  = store.get('from');
const current = store.get('current');

• 中英文切换，切换按钮在框架应用，监听事件在子应用
• 登录信息前端互通，子应用确认框架应用登录后，前端不再重复发起登录请求相关逻辑；登录用户信息保存在框架应用中，子应用获取用户数据
• 框架应用顶部有 ”消息“ 展示入口，子应用内有阅读消息的能力，阅读完消息后需要通知框架应用刷新“消息”展示信息

import { store, event } from '@ice/stark-data';

// 框架应用

store.set('language', 'CH'); // 设置语言
store.set('user', currentUser); // 设置登录后当前用户信息
event.on('message', () => { // 监听刷新信息事件
     // 调用刷新信息接口
});


// 子应用

// 监听语言变化
store.on('language', language => {
      console.log(language);
      // 切换成中文回调
      // ...
}, true);

// 获取当前用户
const currentUser = store.get('user');

// 触发刷新信息
event.emit('message');

新的基于icejs的主框架和子应用如何配置antd的按需加载？

在ice-stark的介绍中，何通过如下代码集成iframe:

<AppRoute
  path="/foo"
  render={() => {
    return <iframe src="" />;
  }}
  // 或者直接传入 component
  // component={CustomComponent}
/>

可是在新模板中，不会直接对AppRoute使用了。新模板中是通过配置来createAppp(config)来创建的。

需求：我现在在改造老的后台应用，因为老的没精力全部重构，所以打算把老的全部套进 iframe，icestark 为了和老的使用相同的 session 所以不单起域名了，需要把 icestark 先放入二级(子)目录先和老的共存

我的解决：我做了一个 config 配置，然后通过对 icestark-layout(父应用) 进行修改实现的这个需求

这个需求我也去群里提问了，群里大佬让我提个 issue，说官方会支持的，希望支持了以后@我一下，让我能知道进展

另一个建议：icestark-layout(父应用) 在 build 时，生成的 index.html 最好用绝对路径加载 js 和 css，这样我做 history 后端支持的时候，可以直接读这个 html，否则还要粘出来，手改成绝对路径

1、微前端在框架里面嵌入子框架，子框架的接口请求不了，
2、多个子框架在主框架切换，切换不成功
github地址：https://github.com/xqt888/micoDemo.git

背景

icestark 在针对 kissy、jQuery 等旧技术栈的兼容成本高，支持直接解析 html 能简化旧技术栈的成本，同时进一步简化 jsBundle 的配置成本。

方案

支持直接通过 htmlUrl 解析，获取 html 的 body 的具体内容，同时解析出外链的 js、css 配置到 url 中

icestark 框架项目
vue子项目（element 组件库）
从框架项目访问子项目时，子项目的下拉框中的 箭头图标变成方块，icon渲染冲突

背景

• icestark 将子应用作为 AppRouter/AppRoute 承接，其中 AppRouter 和 react-router 互相兼容，但官方建议框架应用保持足够轻量，希望独立部分作为不同子应用来承接；这类设计对用户造成一定理解成本和使用成本，结合后续 icestark 会推出官方 iframe 的子应用组件。计划在 AppRoute 层增加 render/component 的 props，能直接渲染 react 的基础组件，基本包含 react-router 的能力。

方案

icestark AppRoute 增加 render/component ，支持直接渲染 react 基础组件，涵盖 react-router 基本功能

问题描述

点击「简体中文」是去到了官网文档，有点懵逼的感觉，不符合 GitHub 上常见 README 的组织方式，而下面也还有个 Website docs 的链接。

个人建议

「English | 简体中文」 中的「简体中文」应该对应的是当前 README 英文的中文翻译

是否支持ie？能否与umijs集成？

问题描述

如下图，核心代码分为了 packages/icestark-app 和根目录下的源代码两块，分为对应 @ice/stark-app 和 @ice/stark 两个包，从目录组织和包命名看着有些奇怪，不知是怎么考虑的。

个人建议

1. 既然是单独的包，可以按照 lerna 的方式进行组织都在 packages 下；
2. @ice/stark-app 和 @ice/stark 两个包从命名上看很难区分其含义，感觉不是很直观，看了下文档，建议考虑将 @ice/stark-app 命名为 @ice/stark-child-app，或者其他更符合语义的包名

Do you want to request a feature or report a bug?

What is the current behavior?

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

需求：怎么在 icestark-layout 里做登录页面，改怎么路由

这个需求很常见吧，能否提供一个这种路由的例子

现在情况：都被 AppRouter 路由了

是否应该拿 react-router 再套一层，然后把 path: '*' 交给 AppRouter

Refused to apply style from 'http://localhost:4444/static/css/4.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Issue is uniformly managed in alibaba/ice. The issues not in alibaba/ice will be closed directly.

Issue 统一在 alibaba/ice 仓库管理，不在 alibaba/ice 的 issue 会被直接关闭。

Do you want to request a feature or report a bug?

bug

What is the current behavior?

在同一 path 下切换不同 url，render 内容不会重新渲染。
比如 path 统一设置成 /route，匹配到这个 path 后将会 render 对应的内容
在 /route?type=a 和 /route?type=b 来回切换并不会重新触发 render

What is the expected behavior?

不同 url 切换，应该重新触发 render

请问：这个框架支持ie9, ie10和IE11浏览器吗？

Do you want to request a feature or report a bug?

feature

What is the current behavior?

not support

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

import { getMountNode, registerAppLeave, registerAppEnter, isInIcestark } from '@ice/stark-app';

if (isInIcestark()) {
  registerAppEnter(() => {
    ReactDOM.render(router(), getMountNode());
  });
  registerAppLeave(() => {
    ReactDOM.unmountComponentAtNode(getMountNode());
  });
} else {
  ReactDOM.render(router(), document.getElementById('ice-container'));
}

Do you want to request a feature or report a bug?

feature

What is the current behavior?

框架应用必须用 browserhistory

What is the expected behavior?

框架应用和微应用全部使用 hash

Do you want to request a feature or report a bug?

What is the current behavior?
快速切换导航，导致崩溃
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
快速切换导航，具体栗子见内网aone
What is the expected behavior?
不报错

代码上可以在这里加try catch可以防止这个问题，具体优化可以再看

使用 entry 方式来加载子应用，子应用内有 inline script，假设是以下内容，那么在主应用中加载子应用时将无法预期输出

<script>
    console.log('1 < 2');
</script>

初步看上去和 https://github.com/ice-lab/icestark/blob/master/src/util/handleAssets.ts#L9 有关

const SCRIPT_REGEX = /<script\b[^>]*>([^<]*)<\/script>/gi;

Do you want to request a feature or report a bug?

bug

What is the current behavior?

通过 entry 加载子应用，js 正常执行，css 样式丢失

What is the expected behavior?

css 样式正常显示

Do you want to request a feature or report a bug?
feature
What is the current behavior?
按照ts的推荐规范 所有的interface 应该以 大写的 I + 驼峰命名 进行

期望按照这个来

Do you want to request a feature or report a bug?

feature

What is the current behavior?

• 进入 A 应用
• 切换到 B 应用
• 再切换到 A 应用，此时加载 A 应用资源后需要再次执行，在低性能的设备上 js 解析执行时间可能会比较久

What is the expected behavior?

• 进入 A 应用
• 切换到 B 应用
• 再切换到 A 应用，此时 A 应用资源无需再次加载 -> 解析 -> 执行

方案?

• 子应用上加对应标识，加上标识后从该子应用被切换时，只执行 registerAppLeave，不卸载资源
• 再次切换回来的时候，只需要从缓存里找到子应用信息并执行对应的 registerAppEnter 即可

因为加了标识的子应用资源不会被卸载，所以可能存在的问题：

1. 内存占用
2. 与其他子应用样式冲突

改造的成本：

目前子应用的运行时信息没有放在队列里，因此实际只会缓存当前子应用的信息，这块需要统一放到队列里，这样才不会被 replace 丢失。

RT...

当AppRoute是以unmount/mount的方式重新渲染时，onAppLeave钩子不会生效，就会导致leave事件失效

建议：以队列的方式实现leave事件

Do you want to request a feature or report a bug?
bug
What is the current behavior?
Nav 的 triggerType 写 click 无法弹出下拉（官网例子写的是 hover，在我这是能弹出下拉的，改成 click 后不行了，删掉 triggerType 同样，点击后无法弹出下拉）

使用
"@alifd/next": "^1.x",
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

      <Nav className="basic-nav" direction="hoz" type="normal" header={header} footer={footer} defaultSelectedKeys={['home']} triggerType="click">
        <Item key="home">Home</Item>
        <SubNav label="Component" selectable>
          <Item key="next">Next</Item>
          <Item key="mext">Mext</Item>
        </SubNav>
        <Item key="document">Document</Item>
      </Nav>

What is the expected behavior?
当然是能正常弹出下拉

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
Is there any angular examples of ice-stark?

I have a problem with my project.

I am seeking some ways to solve this.
Except using iframe, although it can solve my problem.
I just want to know is there any elegant way.

What is the expected behavior?

Do you want to request a feature or report a bug?

feature

What is the current behavior?

目前 icestark 可以通过 onRouteChange 方法监听路由变化，但是不支持拦截

What is the expected behavior?

希望路由发生变化时，可以进行拦截，这样就可以再框架层面上做一些统一的路由鉴权

Do you want to request a feature or report a bug?

What is the current behavior?

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

Do you want to request a feature or report a bug?
bug
What is the current behavior?
环境：
"name": "@icedesign/stark-layout-scaffold",
"version": "3.0.7",

我刚安装了新版，然后再url输入一个没有的地址，一直显示主页，我去 routes.ts 加了 exact

const routes = [{
  path: '/about',
  component: About,
},{
  path: '/login',
  component: About,
}, {
  path: '/',
  exact: true,
  component: Home,
}];

产生了一些变化，不再显示主页，main-contents 区域变成了白页，而不是预期的404 NotFoundComponent 组件里的内容
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
如上
What is the expected behavior?
正常显示 NotFoundComponent 组件

背景

• 当前浏览器环境下，完善的 js 间隔离的方案还没有。worker进程、iframe都有各自的缺陷
• icestark 作为不同应用的容器承载，应当具备基本的隔离能力，也是多方的共同需求

方案

插件机制支持快照功能

1. hijack window.addEventListener/window.removeEventListener
2. hijack window.setInterval/window.setTimeout
3. hijack window.history.listen

背景

目前每个微应用的路由定义用的都是自己的 history 实例，导致跨应用跳转必须依赖 appHistory/AppLink，如果是从 A 应用跳转到 B 应用，这样是符合逻辑的。

但是这里有两个问题：

1. 当框架应用自身包含一些路由时（基于 react-router），菜单上的链接应该用 AppLink 还是 Link？AppLink 无法跳转到框架自身的页面，Link 无法跳转到微应用的页面，业务上必须得动态判断区分使用，比较繁琐。
2. 假设框架应用有 A&B 两个菜单（通过 AppLink）指向同一个微应用的两个页面，先点击 A 加载 A 页面，再点击 B，此时因为使用了 AppLink（history 实例的问题不得不使用）因此会强制触发微应用的资源重新加载一次，体验上有损。

方案

1. 对于框架应用包含路由的情况，支持 AppRouter 跟应用自身的 react-router 共用 history 实例
2. 提供机制让所有应用使用同一个 history 实例，业务可按需使用优化体验

子站点使用了类似的代码 会导致加载不了拆分的包
import React, { Suspense } from "react";

<Suspense fallback={}>

{children.map((routeChild, idx) => {
const {
redirect,
path: childPath,
component
} = routeChild;
return RouteItem({
key: ${id}-${idx},
redirect,
path: childPath && path.join(route.path, childPath),
component
});
})}

执行完之后安装不了

背景

目前 icestark 主要 API 设计偏向 react 体系，虽然子应用不受限制，但限制框架应用使用 react 体系；但考虑社区 vue 占比很高，考虑针对不同体系对出对应的设计方案

解决方案

@ice/stark-vue、@ice/stark-angular

如题，把现成的一个 Vue 项目改造后（独立运行和构建均正常），接入主框架时提示：
Uncaught ReferenceError：webpackJsonp is not defined at app.js:1
在 webpack.prod.conf.js 中添加 chunks: ['manifest', 'vendor', 'app'] 后问题依然，特来请教如何解决

新模板中关于icestark使用文档说明太少了。
现模板是能过createApp(config)来配置注册子应用，关于config.icestark说明太少，只有下面两篇说明
icejs介绍如下：https://ice.work/docs/guide/advance/icestark
icestark介绍如下：https://ice.work/docs/icestark/reference/api

参考了上两外链接说明，如下图：在appRouter中这样配置了，但是并没有起作用。

请问如何设置监听？还有，什么时候可以完善一下icestark在icejs上的配置说明。

配置如下图

（注：以下的图都需要点开看，不支持直接上图，只好添加link了）
新的基于icejs的主框架 + 旧的飞冰项目改造而成的子应用，联合开发的问题，报错信息如下：
报错信息图
主框架注册子应用的代码，如下如：
注册代码图
旧的飞冰项目参照官方文档进行了子应用改造，如下两图：
1. 应用入口适配
2. 定义基准路由
以上，按照文档说的方式来改造了，不知道改造代码是否有错？求解如何解决这个问题

Do you want to request a feature or report a bug?
bug
What is the current behavior?

• 框架应用通过 react-router 定义了一些路由
• 子应用通过 window.history 跳转到框架应用的路由，此时会出现 404 的情况，初步判断是对 addEventListener.popstate 的劫持时机问题，导致无法触发框架应用中 react-router 监听 popstate 的回调
  **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

文档示例

// Framework
import { store } from "@ice/startk-data";

const userInfo = { name: "Tom", age: 18 };
store.set("user", userInfo);
store.set("language", "CH");
// Sub-application A
import { store } from "@ice/stark-data";
const userInfo = store.get("user");

不同工程引入的store实例是同一份吗，这和vuex，redux有啥区别

背景

有这样场景，需要外挂widgets的模式，比如各种问答机器人的组件。跟当前主应用本身无关的内容。
使用这些外挂的组件的时候，外挂组件也存在构造js/css进行动态添加的能力，添加的资源可能比icestark的标记时机要慢，这样导致的结果是当发生切换时候，外挂的部分资源可能会被清理掉而导致外挂组件无法work.

需求

支持以『白名单』的模式设置部分资源持久化，不需要进行清理。

 用icestark-layout模板进行开发。
但是我们有这么一个需求，是根据用户登录后，从后端获取该用户下的（子）应用服务。
所以工程的第1个入口可能是先登录，登录完了之后再注册子应用。

模板中代码大致如下：

// src/app.tsx
....

const appConfig = {
  ...
  icestark: {
    ...
  }
};

createApp(appConfig);

问题来了，在用户正常登录后，获取到子应数据，我如何重新刷新appConfig？
有没有类似updateApp(newAppConfig);的操作api？

我尝试过重新执行createApp(newAppConfig);，但是会有React的警告。如图：

最后贴上src/app.tsx的完整代码：

import * as React from 'react';
import { createApp } from 'ice'
import { ConfigProvider } from '@alifd/next';
import PageLoading from '@/components/PageLoading';
import BasicLayout from '@/layouts/BasicLayout';

const appConfig = {
  app: {
    rootId: 'icestark-container',
    addProvider: ({ children }) => (
      <ConfigProvider prefix="next-icestark-">{children}</ConfigProvider>
    ),
  },
  router: {
    type: 'browser',
  }
};

setTimeout(() => {
  const appConfig2 = {
    app: {
      rootId: 'icestark-container',
      addProvider: ({ children }) => (
        <ConfigProvider prefix="next-icestark-">{children}</ConfigProvider>
      ),
    },
    router: {
      type: 'browser',
    },
    icestark: {
      type: 'framework',
      Layout: BasicLayout,
      getApps: async () => {
        const apps = [{
          path: '/seller',
          title: '商家平台',
          // React app demo: https://github.com/ice-lab/icestark-child-apps/tree/master/child-seller-react-16
          url: [
            '//ice.alicdn.com/icestark/child-seller-react/index.js',
            '//ice.alicdn.com/icestark/child-seller-react/index.css',
          ],
        }, {
          path: '/waiter',
          title: '小二平台',
          url: [
            // Vue app demo: https://github.com/ice-lab/icestark-child-apps/tree/master/child-waiter-vue-2
            '//ice.alicdn.com/icestark/child-waiter-vue/app.js',
            '//ice.alicdn.com/icestark/child-waiter-vue/app.css'
          ],
        }, {
          path: '/angular',
          title: 'Angular',
          // Angular app demo: https://github.com/ice-lab/icestark-child-apps/tree/master/child-common-angular-9 
          entry: '//ice.alicdn.com/icestark/child-common-angular/index.html',
        }];
        return apps;
      },
      appRouter: {
        LoadingComponent: PageLoading,
      },
    },
  };
  console.log('before appConfig2');
  createApp(appConfig2);
  console.log('after appConfig2');
}, 4000);

createApp(appConfig);