ice-lab / icestark Goto Github PK
View Code? Open in Web Editor NEW:tiger: Micro Frontends solution for large application(面向大型应用的微前端解决方案),站点国内镜像:https://icestark.gitee.io
Home Page: https://micro-frontends.ice.work
License: MIT License
:tiger: Micro Frontends solution for large application(面向大型应用的微前端解决方案),站点国内镜像:https://icestark.gitee.io
Home Page: https://micro-frontends.ice.work
License: MIT License
有这样场景,需要外挂widgets的模式,比如各种问答机器人的组件。跟当前主应用本身无关的内容。
使用这些外挂的组件的时候,外挂组件也存在构造js/css进行动态添加的能力,添加的资源可能比icestark的标记时机要慢,这样导致的结果是当发生切换时候,外挂的部分资源可能会被清理掉而导致外挂组件无法work.
支持以『白名单』的模式设置部分资源持久化,不需要进行清理。
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 组件
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?
子应用之间通信(补充具体 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');
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.
插件机制支持快照功能
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
目前每个微应用的路由定义用的都是自己的 history 实例,导致跨应用跳转必须依赖 appHistory/AppLink,如果是从 A 应用跳转到 B 应用,这样是符合逻辑的。
但是这里有两个问题:
icestark 在针对 kissy、jQuery 等旧技术栈的兼容成本高,支持直接解析 html 能简化旧技术栈的成本,同时进一步简化 jsBundle 的配置成本。
支持直接通过 htmlUrl 解析,获取 html 的 body 的具体内容,同时解析出外链的 js、css 配置到 url 中
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?
在ice-stark的介绍中,何通过如下代码集成iframe:
<AppRoute
path="/foo"
render={() => {
return <iframe src="" />;
}}
// 或者直接传入 component
// component={CustomComponent}
/>
可是在新模板中,不会直接对AppRoute使用了。新模板中是通过配置来createAppp(config)
来创建的。
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?
当然是能正常弹出下拉
新的基于icejs的主框架和子应用如何配置antd的按需加载?
RT...
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?
What is the expected behavior?
方案?
registerAppLeave
,不卸载资源registerAppEnter
即可因为加了标识的子应用资源不会被卸载,所以可能存在的问题:
改造的成本:
目前子应用的运行时信息没有放在队列里,因此实际只会缓存当前子应用的信息,这块需要统一放到队列里,这样才不会被 replace 丢失。
目前 icestark 主要 API 设计偏向 react 体系,虽然子应用不受限制,但限制框架应用使用 react 体系;但考虑社区 vue 占比很高,考虑针对不同体系对出对应的设计方案
@ice/stark-vue、@ice/stark-angular
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?
feature
What is the current behavior?
目前 icestark 可以通过 onRouteChange 方法监听路由变化,但是不支持拦截
What is the expected behavior?
希望路由发生变化时,可以进行拦截,这样就可以再框架层面上做一些统一的路由鉴权
是否支持ie?能否与umijs集成?
使用 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;
Issue is uniformly managed in alibaba/ice. The issues not in alibaba/ice will be closed directly.
Issue 统一在 alibaba/ice 仓库管理,不在 alibaba/ice 的 issue 会被直接关闭。
如题,把现成的一个 Vue 项目改造后(独立运行和构建均正常),接入主框架时提示:
Uncaught ReferenceError:webpackJsonp is not defined at app.js:1
在 webpack.prod.conf.js 中添加 chunks: ['manifest', 'vendor', 'app'] 后问题依然,特来请教如何解决
用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);
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'));
}
为了更好的完善 icestark 微前端的应用场景,我们希望您能分享以下关于 icestark 项目的信息:
需求:怎么在 icestark-layout 里做登录页面,改怎么路由
这个需求很常见吧,能否提供一个这种路由的例子
现在情况:都被 AppRouter 路由了
是否应该拿 react-router 再套一层,然后把 path: '*' 交给 AppRouter
Do you want to request a feature or report a bug?
feature
What is the current behavior?
框架应用必须用 browserhistory
What is the expected behavior?
框架应用和微应用全部使用 hash
1、微前端在框架里面嵌入子框架,子框架的接口请求不了,
2、多个子框架在主框架切换,切换不成功
github地址:https://github.com/xqt888/micoDemo.git
子站点使用了类似的代码 会导致加载不了拆分的包
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
});
})}
需求:我现在在改造老的后台应用,因为老的没精力全部重构,所以打算把老的全部套进 iframe,icestark 为了和老的使用相同的 session 所以不单起域名了,需要把 icestark 先放入二级(子)目录先和老的共存
我的解决:我做了一个 config 配置,然后通过对 icestark-layout(父应用) 进行修改实现的这个需求
这个需求我也去群里提问了,群里大佬让我提个 issue,说官方会支持的,希望支持了以后@我一下,让我能知道进展
另一个建议:icestark-layout(父应用) 在 build 时,生成的 index.html 最好用绝对路径加载 js 和 css,这样我做 history 后端支持的时候,可以直接读这个 html,否则还要粘出来,手改成绝对路径
Do you want to request a feature or report a bug?
bug
What is the current behavior?
addEventListener.popstate
的劫持时机问题,导致无法触发框架应用中 react-router 监听 popstate 的回调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有啥区别
icestark AppRoute 增加 render/component ,支持直接渲染 react 基础组件,涵盖 react-router 基本功能
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可以防止这个问题,具体优化可以再看
新模板中关于icestark使用文档说明太少了。
现模板是能过createApp(config)来配置注册子应用,关于config.icestark说明太少,只有下面两篇说明
icejs介绍如下:https://ice.work/docs/guide/advance/icestark
icestark介绍如下:https://ice.work/docs/icestark/reference/api
参考了上两外链接说明,如下图:在appRouter中这样配置了,但是并没有起作用。
请问如何设置监听?还有,什么时候可以完善一下icestark在icejs上的配置说明。
请问:这个框架支持ie9, ie10和IE11浏览器吗?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.