├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug-report.md │ ├── en-bug-report.md │ ├── feature_request.md │ ├── suggestion.md │ └── xug-other.md └── workflows │ ├── close_inactive_issue.yml │ ├── deploy-gh-pages.yml │ └── issue-comment.yml ├── .gitignore ├── .travis.yml ├── Contact.md ├── DEVELOP.md ├── DEVELOP.zh-cn.md ├── LICENSE ├── README.md ├── README.zh-cn.md ├── commitlint.config.js ├── dev ├── children │ ├── angular11 │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── e2e │ │ │ ├── protractor.conf.js │ │ │ ├── src │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.less │ │ │ │ ├── app.component.spec.ts │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── first │ │ │ │ │ ├── dialog-elements-example-dialog.html │ │ │ │ │ ├── first.component.html │ │ │ │ │ ├── first.component.less │ │ │ │ │ ├── first.component.spec.ts │ │ │ │ │ └── first.component.ts │ │ │ │ └── second │ │ │ │ │ ├── second.component.html │ │ │ │ │ ├── second.component.less │ │ │ │ │ ├── second.component.spec.ts │ │ │ │ │ └── second.component.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── environments │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.less │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ ├── tslint.json │ │ └── yarn.lock │ ├── angular14 │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── karma.conf.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.scss │ │ │ │ ├── app.component.spec.ts │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── home │ │ │ │ │ ├── home.component.html │ │ │ │ │ ├── home.component.scss │ │ │ │ │ ├── home.component.spec.ts │ │ │ │ │ └── home.component.ts │ │ │ │ ├── material │ │ │ │ │ ├── material-routing.module.ts │ │ │ │ │ ├── material.component.html │ │ │ │ │ ├── material.component.scss │ │ │ │ │ ├── material.component.spec.ts │ │ │ │ │ ├── material.component.ts │ │ │ │ │ └── material.module.ts │ │ │ │ └── page3 │ │ │ │ │ ├── page3-routing.module.ts │ │ │ │ │ ├── page3.component.html │ │ │ │ │ ├── page3.component.scss │ │ │ │ │ ├── page3.component.spec.ts │ │ │ │ │ ├── page3.component.ts │ │ │ │ │ └── page3.module.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── environments │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── material.module.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.scss │ │ │ ├── test.ts │ │ │ └── theme.scss │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── yarn.lock │ ├── react16 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── config │ │ │ ├── env.js │ │ │ ├── getHttpsConfig.js │ │ │ ├── jest │ │ │ │ ├── cssTransform.js │ │ │ │ └── fileTransform.js │ │ │ ├── modules.js │ │ │ ├── paths.js │ │ │ ├── pnpTs.js │ │ │ ├── webpack.config.js │ │ │ └── webpackDevServer.config.js │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── scripts │ │ │ ├── build.js │ │ │ ├── start.js │ │ │ └── test.js │ │ ├── src │ │ │ ├── ant-custom.css │ │ │ ├── assets │ │ │ │ ├── big-img.jpeg │ │ │ │ ├── logo.svg │ │ │ │ └── micro-app-logo.jpeg │ │ │ ├── config.js │ │ │ ├── flexible.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── pages │ │ │ │ ├── nest │ │ │ │ │ ├── nest.js │ │ │ │ │ └── nest.less │ │ │ │ ├── page1 │ │ │ │ │ ├── leader-line.js │ │ │ │ │ ├── page1.css │ │ │ │ │ ├── page1.js │ │ │ │ │ └── save.js │ │ │ │ └── page2 │ │ │ │ │ ├── page2.css │ │ │ │ │ └── page2.js │ │ │ ├── public-path.js │ │ │ ├── reportWebVitals.js │ │ │ ├── router.js │ │ │ ├── setImmediate.js │ │ │ └── setupTests.js │ │ └── yarn.lock │ ├── react17 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── config │ │ │ ├── env.js │ │ │ ├── getHttpsConfig.js │ │ │ ├── jest │ │ │ │ ├── cssTransform.js │ │ │ │ └── fileTransform.js │ │ │ ├── modules.js │ │ │ ├── paths.js │ │ │ ├── pnpTs.js │ │ │ ├── webpack.config.js │ │ │ └── webpackDevServer.config.js │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── scripts │ │ │ ├── build.js │ │ │ ├── start.js │ │ │ └── test.js │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ ├── public-path.js │ │ │ ├── reportWebVitals.js │ │ │ └── setupTests.js │ │ └── yarn.lock │ ├── vite2 │ │ ├── .gitignore │ │ ├── auto-imports.d.ts │ │ ├── components.d.ts │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── favicon.ico │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ ├── logo.png │ │ │ │ └── micro-app-logo.jpeg │ │ │ ├── components │ │ │ │ └── HelloWorld.vue │ │ │ ├── main.js │ │ │ ├── pages │ │ │ │ ├── ant-design-vue.vue │ │ │ │ ├── element-plus.vue │ │ │ │ └── home.vue │ │ │ ├── router.js │ │ │ ├── styles │ │ │ │ └── element │ │ │ │ │ └── index.scss │ │ │ └── utils.js │ │ ├── vite.config.js │ │ └── yarn.lock │ ├── vite4 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── auto-imports.d.ts │ │ ├── components.d.ts │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ ├── logo.png │ │ │ │ └── micro-app-logo.jpeg │ │ │ ├── components │ │ │ │ └── HelloWorld.vue │ │ │ ├── main.js │ │ │ ├── pages │ │ │ │ ├── ant-design-vue.vue │ │ │ │ ├── element-plus.vue │ │ │ │ ├── home.vue │ │ │ │ └── inline.vue │ │ │ ├── router.js │ │ │ ├── styles │ │ │ │ └── element │ │ │ │ │ └── index.scss │ │ │ └── utils.js │ │ ├── uno.config.js │ │ ├── vite.config.js │ │ └── yarn.lock │ ├── vue2 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── layui │ │ │ │ ├── css │ │ │ │ ├── layui.css │ │ │ │ └── modules │ │ │ │ │ ├── code.css │ │ │ │ │ ├── laydate │ │ │ │ │ └── default │ │ │ │ │ │ └── laydate.css │ │ │ │ │ └── layer │ │ │ │ │ └── default │ │ │ │ │ ├── icon-ext.png │ │ │ │ │ ├── icon.png │ │ │ │ │ ├── layer.css │ │ │ │ │ ├── loading-0.gif │ │ │ │ │ ├── loading-1.gif │ │ │ │ │ └── loading-2.gif │ │ │ │ ├── font │ │ │ │ ├── iconfont.eot │ │ │ │ ├── iconfont.svg │ │ │ │ ├── iconfont.ttf │ │ │ │ ├── iconfont.woff │ │ │ │ └── iconfont.woff2 │ │ │ │ └── layui.js │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ ├── logo.png │ │ │ │ └── micro-app-logo.jpeg │ │ │ ├── components │ │ │ │ └── HelloWorld.vue │ │ │ ├── config.js │ │ │ ├── main.js │ │ │ ├── my-font │ │ │ │ ├── demo.css │ │ │ │ ├── demo_index.html │ │ │ │ ├── iconfont.css │ │ │ │ ├── iconfont.eot │ │ │ │ ├── iconfont.js │ │ │ │ ├── iconfont.json │ │ │ │ ├── iconfont.svg │ │ │ │ ├── iconfont.ttf │ │ │ │ ├── iconfont.woff │ │ │ │ └── iconfont.woff2 │ │ │ ├── pages │ │ │ │ ├── home.vue │ │ │ │ ├── nest.vue │ │ │ │ ├── page2.vue │ │ │ │ └── table.vue │ │ │ ├── public-path.js │ │ │ └── router.js │ │ ├── vue.config.js │ │ └── yarn.lock │ └── vue3 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── auto-imports.d.ts │ │ ├── babel.config.js │ │ ├── components.d.ts │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── logo.png │ │ │ └── micro-app-logo.jpeg │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── main.js │ │ ├── pages │ │ │ ├── ant-design-vue.vue │ │ │ ├── element-plus.vue │ │ │ └── home.vue │ │ ├── public-path.js │ │ ├── router.js │ │ └── utils.js │ │ ├── uno.config.ts │ │ ├── vue.config.js │ │ └── yarn.lock ├── main-react16 │ ├── .editorconfig │ ├── .eslintignore │ ├── .gitignore │ ├── .prettierignore │ ├── .prettierrc.js │ ├── .stylelintrc.js │ ├── README.md │ ├── config │ │ ├── config.dev.js │ │ ├── config.js │ │ ├── defaultSettings.js │ │ ├── proxy.js │ │ └── routes.js │ ├── jest.config.js │ ├── jsconfig.json │ ├── mock │ │ ├── listTableList.js │ │ ├── notices.js │ │ ├── route.js │ │ └── user.js │ ├── package.json │ ├── public │ │ ├── CNAME │ │ ├── favicon.ico │ │ ├── home_bg.png │ │ └── logo.svg │ ├── src │ │ ├── assets │ │ │ └── logo.svg │ │ ├── components │ │ │ ├── Authorized │ │ │ │ ├── Authorized.jsx │ │ │ │ ├── AuthorizedRoute.jsx │ │ │ │ ├── CheckPermissions.jsx │ │ │ │ ├── PromiseRender.jsx │ │ │ │ ├── Secured.jsx │ │ │ │ ├── index.jsx │ │ │ │ └── renderAuthorize.js │ │ │ ├── GlobalHeader │ │ │ │ ├── AvatarDropdown.jsx │ │ │ │ ├── NoticeIconView.jsx │ │ │ │ ├── RightContent.jsx │ │ │ │ └── index.less │ │ │ ├── HeaderDropdown │ │ │ │ ├── index.jsx │ │ │ │ └── index.less │ │ │ ├── HeaderSearch │ │ │ │ ├── index.jsx │ │ │ │ └── index.less │ │ │ ├── NoticeIcon │ │ │ │ ├── NoticeList.jsx │ │ │ │ ├── NoticeList.less │ │ │ │ ├── index.jsx │ │ │ │ └── index.less │ │ │ └── PageLoading │ │ │ │ └── index.jsx │ │ ├── config.js │ │ ├── e2e │ │ │ ├── __mocks__ │ │ │ │ └── antd-pro-merge-less.js │ │ │ └── baseLayout.e2e.js │ │ ├── global.jsx │ │ ├── global.less │ │ ├── layouts │ │ │ ├── BasicLayout.jsx │ │ │ ├── BlankLayout.jsx │ │ │ └── SecurityLayout.jsx │ │ ├── locales │ │ │ ├── en-US.js │ │ │ ├── en-US │ │ │ │ ├── component.js │ │ │ │ ├── globalHeader.js │ │ │ │ ├── menu.js │ │ │ │ ├── pages.js │ │ │ │ ├── pwa.js │ │ │ │ ├── settingDrawer.js │ │ │ │ └── settings.js │ │ │ ├── id-ID.js │ │ │ ├── id-ID │ │ │ │ ├── component.js │ │ │ │ ├── globalHeader.js │ │ │ │ ├── menu.js │ │ │ │ ├── pages.js │ │ │ │ ├── pwa.js │ │ │ │ ├── settingDrawer.js │ │ │ │ └── settings.js │ │ │ ├── ja-JP.js │ │ │ ├── ja-JP │ │ │ │ ├── component.js │ │ │ │ ├── globalHeader.js │ │ │ │ ├── menu.js │ │ │ │ ├── pages.js │ │ │ │ ├── pwa.js │ │ │ │ ├── settingDrawer.js │ │ │ │ └── settings.js │ │ │ ├── pt-BR.js │ │ │ ├── pt-BR │ │ │ │ ├── component.js │ │ │ │ ├── globalHeader.js │ │ │ │ ├── menu.js │ │ │ │ ├── pwa.js │ │ │ │ ├── settingDrawer.js │ │ │ │ └── settings.js │ │ │ ├── zh-CN.js │ │ │ ├── zh-CN │ │ │ │ ├── component.js │ │ │ │ ├── globalHeader.js │ │ │ │ ├── menu.js │ │ │ │ ├── pages.js │ │ │ │ ├── pwa.js │ │ │ │ ├── settingDrawer.js │ │ │ │ └── settings.js │ │ │ ├── zh-TW.js │ │ │ └── zh-TW │ │ │ │ ├── component.js │ │ │ │ ├── globalHeader.js │ │ │ │ ├── menu.js │ │ │ │ ├── pwa.js │ │ │ │ ├── settingDrawer.js │ │ │ │ └── settings.js │ │ ├── manifest.json │ │ ├── models │ │ │ ├── global.js │ │ │ ├── login.js │ │ │ ├── setting.js │ │ │ └── user.js │ │ ├── pages │ │ │ ├── 404.jsx │ │ │ ├── Admin.jsx │ │ │ ├── Welcome.jsx │ │ │ ├── Welcome.less │ │ │ ├── angular11 │ │ │ │ └── angular11.js │ │ │ ├── angular14 │ │ │ │ └── angular14.js │ │ │ ├── document.ejs │ │ │ ├── multiple │ │ │ │ ├── multiple.js │ │ │ │ └── multiple.less │ │ │ ├── react16 │ │ │ │ ├── react16.js │ │ │ │ └── react16.less │ │ │ ├── react17 │ │ │ │ └── react17.js │ │ │ ├── self │ │ │ │ ├── components │ │ │ │ │ └── UpdateForm.jsx │ │ │ │ └── index.jsx │ │ │ ├── vite2 │ │ │ │ ├── vite2.js │ │ │ │ └── vite2.less │ │ │ ├── vite4 │ │ │ │ ├── vite4.js │ │ │ │ └── vite4.less │ │ │ ├── vue2 │ │ │ │ ├── module.less │ │ │ │ ├── vue2.js │ │ │ │ └── vue2.less │ │ │ └── vue3 │ │ │ │ └── vue3.js │ │ ├── service-worker.js │ │ ├── services │ │ │ ├── login.js │ │ │ └── user.js │ │ └── utils │ │ │ ├── Authorized.js │ │ │ ├── authority.js │ │ │ ├── request.js │ │ │ ├── utils.js │ │ │ ├── utils.less │ │ │ └── utils.test.js │ ├── tests │ │ ├── PuppeteerEnvironment.js │ │ ├── beforeTest.js │ │ ├── getBrowser.js │ │ └── run-tests.js │ └── yarn.lock ├── main-vite │ ├── .gitignore │ ├── README.md │ ├── env.d.ts │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── main.ts │ │ ├── pages │ │ │ ├── angular11.vue │ │ │ ├── multiple.vue │ │ │ ├── react16.vue │ │ │ ├── react17.vue │ │ │ ├── self.vue │ │ │ ├── test.vue │ │ │ ├── vite.vue │ │ │ ├── vue2.vue │ │ │ └── vue3.vue │ │ ├── router │ │ │ └── index.ts │ │ ├── shims-vue.d.ts │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── main-vue2 │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── config.js │ ├── main.js │ ├── pages │ │ ├── angular11.vue │ │ ├── angular14.vue │ │ ├── multiple.vue │ │ ├── react16.vue │ │ ├── react17.vue │ │ ├── self.vue │ │ ├── test.vue │ │ ├── vite2.vue │ │ ├── vite4.vue │ │ ├── vue2.vue │ │ └── vue3.vue │ └── router.js │ ├── vue.config.js │ └── yarn.lock ├── docs ├── 0.x │ ├── README.md │ ├── docs.html │ ├── en-us │ │ ├── README.md │ │ ├── changelog.md │ │ ├── navbar.md │ │ └── sidebar.md │ ├── favicon.ico │ ├── home │ │ ├── assets │ │ │ ├── arrow-right.png │ │ │ ├── bangong.svg │ │ │ ├── banzhuan.png │ │ │ ├── github-logo.png │ │ │ ├── logo.png │ │ │ ├── one-line.png │ │ │ ├── react-code.png │ │ │ ├── react-logo.png │ │ │ ├── vue-code.png │ │ │ └── vue-logo.png │ │ ├── css │ │ │ ├── animation.css │ │ │ └── index.css │ │ └── js │ │ │ ├── iconfont.js │ │ │ ├── index.js │ │ │ ├── index.umd.js │ │ │ └── micro-app-loading.js │ ├── media │ │ ├── logo.png │ │ ├── logo.svg │ │ └── qq.jpeg │ ├── navbar.md │ ├── sidebar.md │ ├── static │ │ ├── docsify-copy-code.min.js │ │ ├── docsify-pagination.min.js │ │ ├── docsify-plugin-flexible-alerts.min.js │ │ ├── docsify-search.js │ │ ├── docsify-sidecar.v1.js │ │ ├── docsify-tabs.js │ │ ├── docsify-vue.css │ │ ├── docsify-zoom-image.js │ │ └── docsify.min.js │ └── zh-cn │ │ ├── README.md │ │ ├── advanced.md │ │ ├── api.md │ │ ├── changelog.md │ │ ├── chat.md │ │ ├── configure.md │ │ ├── data.md │ │ ├── deploy.md │ │ ├── dom-scope.md │ │ ├── env.md │ │ ├── framework │ │ ├── angular.md │ │ ├── introduce.md │ │ ├── nextjs.md │ │ ├── nuxtjs.md │ │ ├── react.md │ │ ├── vite.md │ │ └── vue.md │ │ ├── jump.md │ │ ├── keep-alive.md │ │ ├── life-cycles.md │ │ ├── nest.md │ │ ├── plugins.md │ │ ├── prefetch.md │ │ ├── questions.md │ │ ├── route.md │ │ ├── sandbox.md │ │ ├── scopecss.md │ │ ├── start.md │ │ └── static-source.md ├── README.md ├── docs.html ├── en-us │ ├── README.md │ ├── changelog.md │ ├── navbar.md │ └── sidebar.md ├── favicon.ico ├── home │ ├── assets │ │ ├── arrow-right.png │ │ ├── bangong.svg │ │ ├── banzhuan.png │ │ ├── github-logo.png │ │ ├── logo.png │ │ ├── one-line.png │ │ ├── react-code.png │ │ ├── react-logo.png │ │ ├── vue-code.png │ │ └── vue-logo.png │ ├── css │ │ ├── animation.css │ │ └── index.css │ └── js │ │ ├── iconfont.js │ │ ├── index.js │ │ ├── index.umd.js │ │ └── micro-app-loading.js ├── index.html ├── media │ ├── logo.png │ ├── logo.svg │ └── qq.jpeg ├── navbar.md ├── sidebar.md ├── static │ ├── docsify-copy-code.min.js │ ├── docsify-pagination.min.js │ ├── docsify-plugin-flexible-alerts.min.js │ ├── docsify-search.js │ ├── docsify-sidecar.v1.js │ ├── docsify-tabs.js │ ├── docsify-vue.css │ ├── docsify-zoom-image.js │ └── docsify.min.js └── zh-cn │ ├── README.md │ ├── advanced.md │ ├── api │ ├── base-app.md │ └── child-app.md │ ├── changelog.md │ ├── chat.md │ ├── configure.md │ ├── data.md │ ├── deploy.md │ ├── dom-scope.md │ ├── env.md │ ├── framework │ ├── angular.md │ ├── introduce.md │ ├── nextjs.md │ ├── nuxtjs.md │ ├── react.md │ ├── vite.md │ └── vue.md │ ├── jump.md │ ├── keep-alive.md │ ├── life-cycles.md │ ├── micro-app-devtools.md │ ├── native-mode.md │ ├── nest.md │ ├── plugins.md │ ├── prefetch.md │ ├── questions.md │ ├── router.md │ ├── sandbox.md │ ├── scopecss.md │ ├── start.md │ ├── static-source.md │ ├── transfer.md │ └── umd.md ├── jest.config.js ├── package.json ├── rollup.config.js ├── scripts ├── after_build.js ├── create_type.js └── test_server.js ├── src ├── __tests__ │ ├── common │ │ ├── initial.ts │ │ ├── set_ssr_env.ts │ │ └── util.ts │ ├── create_app.test.ts │ ├── demos │ │ ├── common │ │ │ ├── async.js │ │ │ ├── defer.js │ │ │ ├── global.js │ │ │ ├── index.html │ │ │ ├── large.css │ │ │ ├── large.scoped.css │ │ │ ├── link1.css │ │ │ ├── link2.css │ │ │ ├── module.js │ │ │ ├── nesting-css.css │ │ │ ├── nesting-css.scoped.css │ │ │ ├── nomodule.js │ │ │ ├── script1.js │ │ │ ├── script2.js │ │ │ └── script3.js │ │ ├── dynamic │ │ │ ├── empty.css │ │ │ ├── empty.js │ │ │ ├── errorjs.html │ │ │ ├── index.html │ │ │ ├── link1.css │ │ │ ├── script1.js │ │ │ └── throw-error.js │ │ ├── element-config │ │ │ ├── index.html │ │ │ ├── index.txt │ │ │ ├── link1.css │ │ │ ├── link2.css │ │ │ ├── link3.css │ │ │ ├── link4.css │ │ │ ├── script1.js │ │ │ ├── script2.js │ │ │ ├── script3.js │ │ │ └── script4.js │ │ ├── special-html │ │ │ ├── disablesandbox.html │ │ │ ├── empty.html │ │ │ ├── error-deferjs.html │ │ │ ├── nobody.html │ │ │ ├── nohead.html │ │ │ ├── notexist-css.html │ │ │ ├── notexist-js.html │ │ │ ├── notexistdefer.html │ │ │ ├── onlydefer.html │ │ │ └── process-html.html │ │ ├── ssr-render │ │ │ ├── index.html │ │ │ ├── link1.css │ │ │ ├── link2.css │ │ │ ├── script1.js │ │ │ └── script2.js │ │ ├── umd1 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── script2.js │ │ ├── umd2 │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── umd3 │ │ │ ├── index.html │ │ │ └── index.js │ │ └── umd4 │ │ │ ├── index.html │ │ │ └── index.js │ ├── interact │ │ ├── index.test.ts │ │ └── lifecycles_event.test.ts │ ├── main.test.ts │ ├── micro_app.test.ts │ ├── micro_app_element.test.ts │ ├── prefetch.test.ts │ ├── sandbox │ │ ├── customProxyDocumentProps.test.ts │ │ ├── effect.test.ts │ │ ├── effect2.test.ts │ │ └── index.test.ts │ ├── source │ │ ├── index.test.ts │ │ ├── links.test.ts │ │ ├── load_event.test.ts │ │ ├── patch.test.ts │ │ ├── scoped_css.test.ts │ │ ├── scripts.test.ts │ │ ├── scripts2.test.ts │ │ └── support_module.ts │ ├── ssr_env.test.ts │ └── unit │ │ ├── additional_util.test.ts │ │ ├── event_center.test.ts │ │ ├── lifecycles_event.test.ts │ │ ├── mocks │ │ ├── app.ts │ │ ├── event.ts │ │ ├── fetch.ts │ │ └── html.ts │ │ ├── source │ │ └── loader │ │ │ └── html.test.ts │ │ └── utils.test.ts ├── app_manager.ts ├── constants.ts ├── create_app.ts ├── index.ts ├── interact │ ├── event_center.ts │ ├── index.ts │ └── lifecycles_event.ts ├── libs │ ├── global_env.ts │ ├── nest_app.ts │ └── utils.ts ├── micro_app.ts ├── micro_app_element.ts ├── polyfill │ └── jsx-custom-event.ts ├── prefetch.ts ├── proxies │ └── worker.ts ├── sandbox │ ├── adapter.ts │ ├── bind_function.ts │ ├── iframe │ │ ├── document.ts │ │ ├── element.ts │ │ ├── index.ts │ │ ├── router.ts │ │ ├── special_key.ts │ │ └── window.ts │ ├── request.ts │ ├── router │ │ ├── api.ts │ │ ├── core.ts │ │ ├── event.ts │ │ ├── history.ts │ │ ├── index.ts │ │ └── location.ts │ ├── scoped_css.ts │ └── with │ │ ├── document.ts │ │ ├── index.ts │ │ └── window.ts └── source │ ├── fetch.ts │ ├── index.ts │ ├── links.ts │ ├── load_event.ts │ ├── loader │ └── html.ts │ ├── patch.ts │ ├── scripts.ts │ └── source_center.ts ├── tsconfig.json ├── typings └── global.d.ts └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | iOS >= 10.3 9 | Android >= 5 10 | Chrome >= 54 11 | Safari >= 10.1 12 | Edge >= 79 13 | Firefox >= 63 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | end_of_line = lf 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /lib 3 | /examples 4 | /dev 5 | /polyfill 6 | /docs 7 | /plugins 8 | /src/__tests__/demos 9 | /src/__tests__ 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F41E BUG反馈" 3 | about: 反馈问题以帮助我们进行改进 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## 问题描述 11 | > 问题的具体描述 12 | 13 | ## 复现步骤 14 | 1. 15 | 2. 16 | 17 | ## 上传截图 18 | > 请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。 19 | 20 | ## 复现仓库 21 | > 请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。 22 | 23 | ## 环境信息 24 | - micro-app版本： 25 | - 主应用前端框架&版本： 26 | - 子应用前端框架&版本： 27 | - 构建工具&版本： 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/en-bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F41E Bug report" 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Describe the bug 11 | > A clear and concise description of what the bug is. 12 | 13 | ## To Reproduce 14 | 1. 15 | 2. 16 | 17 | ## Screenshots 18 | > If possible, please upload screenshots of the code, console, terminal, etc. to help us understand your problem. 19 | 20 | ## Reproduce repository 21 | > Please provide a condensed code repository and upload it to your own github to help us reproduce your problem. 22 | 23 | ## Environment 24 | - micro-app version: 25 | - framework of base app & version: 26 | - framework of sub app & version: 27 | - Build tools & version: 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/suggestion.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 改进建议 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## 背景 11 | > 描述您希望改进的问题。 12 | 13 | ## 期望的效果 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/xug-other.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 其它问题 3 | about: Other issues 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/workflows/deploy-gh-pages.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Docs to gh-pages 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | deploy-gh-pages: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Check out Git repository 11 | uses: actions/checkout@v2 12 | - name: Deploy 13 | uses: peaceiris/actions-gh-pages@v3 14 | with: 15 | github_token: ${{ secrets.GITHUB_TOKEN }} 16 | publish_dir: ./docs 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | dist/ 4 | lib/ 5 | es/ 6 | ## 忽略根目录的polyfill 7 | /polyfill/ 8 | 9 | # editor config 10 | .vscode/ 11 | .idea 12 | *.iml 13 | *.swp 14 | *.swo 15 | 16 | # istanbul 17 | coverage 18 | 19 | # Logs 20 | logs 21 | *.log 22 | # eslint 23 | .eslintcache 24 | .history 25 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | 4 | node_js: 5 | - 12 6 | 7 | cache: 8 | directories: 9 | - node_modules 10 | 11 | before_install: 12 | - export CHROME_BIN=chromium-browser 13 | - export DISPLAY=:99.0 14 | 15 | install: 16 | - npm install -g yarn 17 | - yarn 18 | 19 | script: 20 | - npm run test:coverage 21 | - ./node_modules/coveralls/bin/coveralls.js < ./coverage/lcov.info 22 | 23 | -------------------------------------------------------------------------------- /Contact.md: -------------------------------------------------------------------------------- 1 | 2 | 欢迎小伙伴们加入micro-app微信群交流^ ^ 3 | ![765508de7c39288bb3efecf17ff871ef](https://github.com/user-attachments/assets/1e22af8c-9ac2-40fc-9dba-e211040a0996) 4 | 5 | 6 | 7 | 8 | 9 | 10 | 欢迎小伙伴们加入micro-app-DevTools开发交流群^ ^ 11 | ![3bab9a7a38e1a9f74a16ac5fc0ec02f9](https://github.com/user-attachments/assets/6d79ff3c-b626-4cda-8b52-f7c790b8c4d4) 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /DEVELOP.md: -------------------------------------------------------------------------------- 1 | # develop 2 | 3 | ### clone & run project 4 | ```bash 5 | git clone https://github.com/jd-opensource/micro-app.git 6 | 7 | cd micro-app 8 | 9 | // install dependencies 10 | yarn bootstrap 11 | 12 | // run project 13 | yarn start 14 | ``` 15 | 16 | The base application `main-react16` is started by default, the sub applications started are: react16, react17, vue2, vue3, angular11, vite. 17 | 18 | If you want to start the `main-vue2` base application, you can run: 19 | 20 | ```bash 21 | yarn start:main-vue2 22 | ``` 23 | 24 | ### run alone 25 | `yarn start` will start 8 applications at the same time by default, which may cause the system to get stuck. It is recommended to run some applications separately to get a better development experience. 26 | 27 | 1、run main program 28 | ``` 29 | yarn build:watch 30 | ``` 31 | 32 | 2、enter the base application and start 33 | ``` 34 | cd dev/main-react16/ 35 | 36 | yarn start 37 | ``` 38 | 39 | 3、enter a sub application and start it 40 | ``` 41 | cd dev/children/react16 42 | 43 | yarn start 44 | ``` 45 | 46 | If you want to start more sub applications, you can continue to enter their directory and start. 47 | -------------------------------------------------------------------------------- /DEVELOP.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 开发指南 2 | 3 | ### 下载并运行 4 | ```bash 5 | git clone https://github.com/jd-opensource/micro-app.git 6 | 7 | cd micro-app 8 | 9 | // 安装项目以及demo的依赖 10 | yarn bootstrap 11 | 12 | // 运行 13 | yarn start 14 | ``` 15 | 16 | 默认基座应用是`main-react16`，启动的子应用为：react16、react17、vue2、vue3、angular11、vite。 17 | 18 | 如果要切换到基座应用`main-vue2`，运行命令： 19 | 20 | ```bash 21 | yarn start:main-vue2 22 | ``` 23 | 24 | ### 单独运行 25 | `yarn start`默认会同时启动8个应用，这可能会导致系统卡顿，建议单独运行某些应用，以获取更好的开发体验。 26 | 27 | 1、启动主程序 28 | ``` 29 | yarn build:watch 30 | ``` 31 | 32 | 2、进入基座应用并启动 33 | ``` 34 | cd dev/main-react16/ 35 | 36 | yarn start 37 | ``` 38 | 39 | 3、进入某个子应用并启动 40 | ``` 41 | cd dev/children/react16 42 | 43 | yarn start 44 | ``` 45 | 46 | 如果要启动更多的子应用，可以继续进入它们的目录并启动。 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 JD.com, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | // https://github.com/conventional-changelog/commitlint 2 | module.exports = { 3 | extends: ['@commitlint/config-conventional'], 4 | rules: { 5 | 'type-enum': [2, 'always', [ 6 | 'feat', 7 | 'fix', 8 | 'docs', 9 | 'style', 10 | 'refactor', 11 | 'test', 12 | 'chore', 13 | ]], 14 | 'subject-full-stop': [0, 'never'], // 不允许有结束符号 . 15 | 'subject-case': [0, 'never'] // 必须以小写开头 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /dev/children/angular11/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /dev/children/angular11/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /dev/children/angular11/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | /angular11 10 | 11 | # dependencies 12 | /node_modules 13 | 14 | # profiling files 15 | chrome-profiler-events*.json 16 | speed-measure-plugin*.json 17 | 18 | # IDEs and editors 19 | /.idea 20 | .project 21 | .classpath 22 | .c9/ 23 | *.launch 24 | .settings/ 25 | *.sublime-workspace 26 | 27 | # IDE - VSCode 28 | .vscode/* 29 | !.vscode/settings.json 30 | !.vscode/tasks.json 31 | !.vscode/launch.json 32 | !.vscode/extensions.json 33 | .history/* 34 | 35 | # misc 36 | /.sass-cache 37 | /connect.lock 38 | /coverage 39 | /libpeerconnection.log 40 | npm-debug.log 41 | yarn-error.log 42 | testem.log 43 | /typings 44 | 45 | # System Files 46 | .DS_Store 47 | Thumbs.db 48 | -------------------------------------------------------------------------------- /dev/children/angular11/README.md: -------------------------------------------------------------------------------- 1 | # MainAngular11 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.4. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /dev/children/angular11/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | SELENIUM_PROMISE_MANAGER: false, 20 | baseUrl: 'http://localhost:4200/', 21 | framework: 'jasmine', 22 | jasmineNodeOpts: { 23 | showColors: true, 24 | defaultTimeoutInterval: 30000, 25 | print: function() {} 26 | }, 27 | onPrepare() { 28 | require('ts-node').register({ 29 | project: require('path').join(__dirname, './tsconfig.json') 30 | }); 31 | jasmine.getEnv().addReporter(new SpecReporter({ 32 | spec: { 33 | displayStacktrace: StacktraceOption.PRETTY 34 | } 35 | })); 36 | } 37 | }; -------------------------------------------------------------------------------- /dev/children/angular11/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { browser, logging } from 'protractor'; 2 | import { AppPage } from './app.po'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', async () => { 12 | await page.navigateTo(); 13 | expect(await page.getTitleText()).toEqual('main-angular11 app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /dev/children/angular11/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | async navigateTo(): Promise { 5 | return browser.get(browser.baseUrl); 6 | } 7 | 8 | async getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /dev/children/angular11/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../out-tsc/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { FirstComponent } from './first/first.component'; 4 | import { SecondComponent } from './second/second.component'; 5 | import { APP_BASE_HREF } from '@angular/common'; 6 | 7 | const routes: Routes = [ 8 | { path: '', component: FirstComponent }, 9 | { path: 'page2', component: SecondComponent }, 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forRoot(routes)], 14 | exports: [RouterModule], 15 | // @ts-ignore 16 | providers: [{ provide: APP_BASE_HREF, useValue: window.__MICRO_APP_BASE_ROUTE__ || '/micro-app/angular11/'}] 17 | }) 18 | export class AppRoutingModule { } 19 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/app.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular11/src/app/app.component.less -------------------------------------------------------------------------------- /dev/children/angular11/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.less'] 8 | }) 9 | export class AppComponent { 10 | constructor(private router: Router, private ngZone: NgZone) { 11 | // 解决点击浏览器前进、返回按钮，上一个页面不卸载的问题 12 | if (window.__MICRO_APP_ENVIRONMENT__) { 13 | window.addEventListener('popstate', () => { 14 | const fullPath = location.pathname.replace('/micro-app/angular11', '') + location.search + location.hash 15 | this.ngZone.run(() => { 16 | this.router.navigateByUrl(fullPath) 17 | }) 18 | }) 19 | } 20 | } 21 | title = 'child-angular11'; 22 | } 23 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { FirstComponent } from './first/first.component'; 7 | import { SecondComponent } from './second/second.component'; 8 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 9 | import { MatSliderModule } from '@angular/material/slider'; 10 | import { MatDialogModule } from '@angular/material/dialog'; 11 | 12 | @NgModule({ 13 | declarations: [ 14 | AppComponent, 15 | FirstComponent, 16 | SecondComponent 17 | ], 18 | imports: [ 19 | BrowserModule, 20 | AppRoutingModule, 21 | BrowserAnimationsModule, 22 | MatSliderModule, 23 | MatDialogModule, 24 | ], 25 | providers: [], 26 | bootstrap: [AppComponent] 27 | }) 28 | export class AppModule { } 29 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/first/dialog-elements-example-dialog.html: -------------------------------------------------------------------------------- 1 |

Dialog with elements

2 |
This dialog showcases the title, close, content and actions elements.
3 |
4 | 5 |
6 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/first/first.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular11/src/app/first/first.component.less -------------------------------------------------------------------------------- /dev/children/angular11/src/app/first/first.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FirstComponent } from './first.component'; 4 | 5 | describe('FirstComponent', () => { 6 | let component: FirstComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ FirstComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FirstComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/first/first.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatDialog } from '@angular/material/dialog'; 3 | 4 | @Component({ 5 | selector: 'app-first', 6 | templateUrl: './first.component.html', 7 | styleUrls: ['./first.component.less'], 8 | }) 9 | export class FirstComponent implements OnInit { 10 | title = 'child-angular11'; 11 | constructor(public dialog: MatDialog) { } 12 | 13 | ngOnInit(): void { 14 | } 15 | 16 | openDialog() { 17 | this.dialog.open(DialogElementsExampleDialog); 18 | } 19 | } 20 | 21 | @Component({ 22 | selector: 'dialog-elements-example-dialog', 23 | templateUrl: 'dialog-elements-example-dialog.html', 24 | }) 25 | export class DialogElementsExampleDialog { 26 | constructor(public dialog: MatDialog) { } 27 | 28 | closeDialog() { 29 | this.dialog.closeAll() 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/second/second.component.html: -------------------------------------------------------------------------------- 1 |

page2 works!

2 |
test
3 | 返回home 4 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/second/second.component.less: -------------------------------------------------------------------------------- 1 | .test-btn { 2 | height: 50px; 3 | width: 100px; 4 | background-color: red; 5 | border-radius: 10px; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | color: #fff; 10 | font-size: 20px; 11 | font-weight: bolder; 12 | } 13 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/second/second.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SecondComponent } from './second.component'; 4 | 5 | describe('SecondComponent', () => { 6 | let component: SecondComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ SecondComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SecondComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /dev/children/angular11/src/app/second/second.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-second', 5 | templateUrl: './second.component.html', 6 | styleUrls: ['./second.component.less'] 7 | }) 8 | export class SecondComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /dev/children/angular11/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular11/src/assets/.gitkeep -------------------------------------------------------------------------------- /dev/children/angular11/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /dev/children/angular11/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /dev/children/angular11/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular11/src/favicon.ico -------------------------------------------------------------------------------- /dev/children/angular11/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | child-angular11 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /dev/children/angular11/src/styles.less: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html, body { height: 100%; } 4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 5 | -------------------------------------------------------------------------------- /dev/children/angular11/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /dev/children/angular11/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /dev/children/angular11/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "sourceMap": true, 8 | "declaration": false, 9 | "downlevelIteration": true, 10 | "experimentalDecorators": true, 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "module": "es2020", 15 | "lib": [ 16 | "es2018", 17 | "dom" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "enableI18nLegacyMessageIdFormat": false 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /dev/children/angular11/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /dev/children/angular14/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /dev/children/angular14/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /dev/children/angular14/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | /angular14 9 | 10 | # Node 11 | /node_modules 12 | npm-debug.log 13 | yarn-error.log 14 | 15 | # IDEs and editors 16 | .idea/ 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # Visual Studio Code 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | .history/* 31 | 32 | # Miscellaneous 33 | /.angular 34 | .sass-cache/ 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | testem.log 39 | /typings 40 | 41 | # System files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /dev/children/angular14/README.md: -------------------------------------------------------------------------------- 1 | # Angular142 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { HomeComponent } from './home/home.component'; 4 | import { APP_BASE_HREF } from '@angular/common'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: HomeComponent 10 | }, 11 | { 12 | path: 'material', 13 | loadChildren: () => import('./material/material.module').then(m => m.MaterialModule) 14 | }, 15 | { 16 | path: 'page3', 17 | loadChildren: () => import('./page3/page3.module').then(m => m.Page3Module) 18 | }, 19 | ]; 20 | 21 | @NgModule({ 22 | imports: [RouterModule.forRoot(routes)], 23 | exports: [RouterModule], 24 | // @ts-ignore 25 | providers: [{ provide: APP_BASE_HREF, useValue: window.__MICRO_APP_BASE_ROUTE__ || '/micro-app/angular14/'}] 26 | }) 27 | export class AppRoutingModule { } 28 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular14/src/app/app.component.scss -------------------------------------------------------------------------------- /dev/children/angular14/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.scss'] 8 | }) 9 | export class AppComponent { 10 | constructor(private router: Router, private ngZone: NgZone) { 11 | if (window.__MICRO_APP_ENVIRONMENT__) { 12 | window.addEventListener('popstate', () => { 13 | const fullPath = location.pathname.replace('/micro-app/angular14', '') + location.search + location.hash 14 | this.ngZone.run(() => { 15 | this.router.navigateByUrl(fullPath) 16 | }) 17 | }) 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 5 | import { MatNativeDateModule } from '@angular/material/core'; 6 | import { HttpClientModule } from '@angular/common/http'; 7 | 8 | import { AppRoutingModule } from './app-routing.module'; 9 | import { AppComponent } from './app.component'; 10 | import { HomeComponent } from './home/home.component'; 11 | 12 | @NgModule({ 13 | declarations: [ 14 | AppComponent, 15 | HomeComponent, 16 | ], 17 | imports: [ 18 | BrowserModule, 19 | AppRoutingModule, 20 | BrowserAnimationsModule, 21 | MatNativeDateModule, 22 | HttpClientModule, 23 | ], 24 | providers: [], 25 | bootstrap: [ 26 | AppComponent, 27 | ] 28 | }) 29 | export class AppModule { } 30 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/home/home.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular14/src/app/home/home.component.scss -------------------------------------------------------------------------------- /dev/children/angular14/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(HomeComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.scss'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | title = 'angular14'; 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/material/material-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { MaterialComponent } from './material.component'; 4 | 5 | const routes: Routes = [{ path: '', component: MaterialComponent }]; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forChild(routes)], 9 | exports: [RouterModule], 10 | }) 11 | export class MaterialRoutingModule { } 12 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/material/material.component.scss: -------------------------------------------------------------------------------- 1 | .example-form-field { 2 | margin: 0 8px 16px 0; 3 | } 4 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/material/material.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MaterialComponent } from './material.component'; 4 | 5 | describe('MaterialComponent', () => { 6 | let component: MaterialComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ MaterialComponent ] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(MaterialComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/material/material.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormGroup, FormControl } from '@angular/forms'; 3 | 4 | const today = new Date(); 5 | const month = today.getMonth(); 6 | const year = today.getFullYear(); 7 | 8 | @Component({ 9 | selector: 'app-material', 10 | templateUrl: './material.component.html', 11 | styleUrls: ['./material.component.scss'] 12 | }) 13 | export class MaterialComponent implements OnInit { 14 | 15 | constructor() { } 16 | 17 | ngOnInit(): void { 18 | } 19 | 20 | campaignOne = new FormGroup({ 21 | start: new FormControl(new Date(year, month, 13)), 22 | end: new FormControl(new Date(year, month, 16)), 23 | }); 24 | campaignTwo = new FormGroup({ 25 | start: new FormControl(new Date(year, month, 15)), 26 | end: new FormControl(new Date(year, month, 19)), 27 | }); 28 | } 29 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/material/material.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { MaterialRoutingModule } from './material-routing.module'; 5 | import { MaterialComponent } from './material.component'; 6 | 7 | import { MaterialExampleModule } from '../../material.module'; 8 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 9 | 10 | @NgModule({ 11 | declarations: [ 12 | MaterialComponent 13 | ], 14 | imports: [ 15 | CommonModule, 16 | MaterialRoutingModule, 17 | MaterialExampleModule, 18 | FormsModule, 19 | ReactiveFormsModule, 20 | ], 21 | }) 22 | export class MaterialModule { } 23 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/page3/page3-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { Page3Component } from './page3.component'; 4 | 5 | const routes: Routes = [{ path: '', component: Page3Component }]; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forChild(routes)], 9 | exports: [RouterModule] 10 | }) 11 | export class Page3RoutingModule { } 12 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/page3/page3.component.html: -------------------------------------------------------------------------------- 1 |

page3 works!

2 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/page3/page3.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular14/src/app/page3/page3.component.scss -------------------------------------------------------------------------------- /dev/children/angular14/src/app/page3/page3.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Page3Component } from './page3.component'; 4 | 5 | describe('Page3Component', () => { 6 | let component: Page3Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ Page3Component ] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Page3Component); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/page3/page3.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-page3', 5 | templateUrl: './page3.component.html', 6 | styleUrls: ['./page3.component.scss'] 7 | }) 8 | export class Page3Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /dev/children/angular14/src/app/page3/page3.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { Page3RoutingModule } from './page3-routing.module'; 5 | import { Page3Component } from './page3.component'; 6 | 7 | 8 | @NgModule({ 9 | declarations: [ 10 | Page3Component 11 | ], 12 | imports: [ 13 | CommonModule, 14 | Page3RoutingModule 15 | ] 16 | }) 17 | export class Page3Module { } 18 | -------------------------------------------------------------------------------- /dev/children/angular14/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular14/src/assets/.gitkeep -------------------------------------------------------------------------------- /dev/children/angular14/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /dev/children/angular14/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /dev/children/angular14/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/angular14/src/favicon.ico -------------------------------------------------------------------------------- /dev/children/angular14/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular14 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /dev/children/angular14/src/styles.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Roboto, "Helvetica Neue", sans-serif; 3 | margin: 0; 4 | padding: 30px; 5 | } 6 | 7 | html, body { 8 | height: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /dev/children/angular14/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().forEach(context); 27 | -------------------------------------------------------------------------------- /dev/children/angular14/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /dev/children/angular14/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "downlevelIteration": true, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "node", 18 | "importHelpers": true, 19 | "target": "es2020", 20 | "module": "es2020", 21 | "lib": [ 22 | "es2020", 23 | "dom" 24 | ] 25 | }, 26 | "angularCompilerOptions": { 27 | "enableI18nLegacyMessageIdFormat": false, 28 | "strictInjectionParameters": true, 29 | "strictInputAccessModifiers": true, 30 | "strictTemplates": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /dev/children/angular14/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /dev/children/react16/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /react16 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /dev/children/react16/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [] 3 | } 4 | -------------------------------------------------------------------------------- /dev/children/react16/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/en/webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /dev/children/react16/config/pnpTs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const { resolveModuleName } = require('ts-pnp'); 4 | 5 | exports.resolveModuleName = ( 6 | typescript, 7 | moduleName, 8 | containingFile, 9 | compilerOptions, 10 | resolutionHost 11 | ) => { 12 | return resolveModuleName( 13 | moduleName, 14 | containingFile, 15 | compilerOptions, 16 | resolutionHost, 17 | typescript.resolveModuleName 18 | ); 19 | }; 20 | 21 | exports.resolveTypeReferenceDirective = ( 22 | typescript, 23 | moduleName, 24 | containingFile, 25 | compilerOptions, 26 | resolutionHost 27 | ) => { 28 | return resolveModuleName( 29 | moduleName, 30 | containingFile, 31 | compilerOptions, 32 | resolutionHost, 33 | typescript.resolveTypeReferenceDirective 34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /dev/children/react16/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/react16/public/favicon.ico -------------------------------------------------------------------------------- /dev/children/react16/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/react16/public/logo192.png -------------------------------------------------------------------------------- /dev/children/react16/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/react16/public/logo512.png -------------------------------------------------------------------------------- /dev/children/react16/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /dev/children/react16/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /dev/children/react16/src/assets/big-img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/react16/src/assets/big-img.jpeg -------------------------------------------------------------------------------- /dev/children/react16/src/assets/micro-app-logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/react16/src/assets/micro-app-logo.jpeg -------------------------------------------------------------------------------- /dev/children/react16/src/config.js: -------------------------------------------------------------------------------- 1 | 2 | let config = { 3 | react16: 'http://localhost:3001/', 4 | react17: 'http://localhost:3002/', 5 | vue2: 'http://localhost:4001/', 6 | vue3: 'http://localhost:4002/', 7 | angular11: 'http://localhost:6001/', 8 | } 9 | const isEnvPro = process.env.NODE_ENV === 'production' 10 | 11 | if (isEnvPro) { 12 | const baseUrl = `${window.location.origin}/` 13 | config = { 14 | react16: baseUrl, 15 | react17: baseUrl, 16 | vue2: baseUrl, 17 | vue3: baseUrl, 18 | angular11: baseUrl, 19 | } 20 | } 21 | 22 | export default config 23 | -------------------------------------------------------------------------------- /dev/children/react16/src/pages/nest/nest.less: -------------------------------------------------------------------------------- 1 | .vue-iframe { 2 | border: none; 3 | width: 100%; 4 | // height: 300px; 5 | } 6 | -------------------------------------------------------------------------------- /dev/children/react16/src/pages/page2/page2.css: -------------------------------------------------------------------------------- 1 | .page2 { 2 | color: red; 3 | } 4 | 5 | .test-btn { 6 | height: 40px; 7 | width: 100px; 8 | background-color: red; 9 | border-radius: 10px; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | color: #fff; 14 | font-size: 20px; 15 | font-weight: bolder; 16 | margin-bottom: 20px; 17 | margin-top: 20px; 18 | cursor: pointer; 19 | user-select: none; 20 | } 21 | 22 | .demo-list { 23 | text-align: center; 24 | } 25 | -------------------------------------------------------------------------------- /dev/children/react16/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__MICRO_APP_ENVIRONMENT__) { 2 | // eslint-disable-next-line 3 | __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ 4 | } 5 | -------------------------------------------------------------------------------- /dev/children/react16/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /dev/children/react16/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /dev/children/react17/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /react17 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /dev/children/react17/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/en/webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /dev/children/react17/config/pnpTs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const { resolveModuleName } = require('ts-pnp'); 4 | 5 | exports.resolveModuleName = ( 6 | typescript, 7 | moduleName, 8 | containingFile, 9 | compilerOptions, 10 | resolutionHost 11 | ) => { 12 | return resolveModuleName( 13 | moduleName, 14 | containingFile, 15 | compilerOptions, 16 | resolutionHost, 17 | typescript.resolveModuleName 18 | ); 19 | }; 20 | 21 | exports.resolveTypeReferenceDirective = ( 22 | typescript, 23 | moduleName, 24 | containingFile, 25 | compilerOptions, 26 | resolutionHost 27 | ) => { 28 | return resolveModuleName( 29 | moduleName, 30 | containingFile, 31 | compilerOptions, 32 | resolutionHost, 33 | typescript.resolveTypeReferenceDirective 34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /dev/children/react17/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/react17/public/favicon.ico -------------------------------------------------------------------------------- /dev/children/react17/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/react17/public/logo192.png -------------------------------------------------------------------------------- /dev/children/react17/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/react17/public/logo512.png -------------------------------------------------------------------------------- /dev/children/react17/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /dev/children/react17/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /dev/children/react17/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 200px; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | height: 100%; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | font-size: calc(10px + 2vmin); 23 | color: #333; 24 | /* test about @container */ 25 | container-type: inline-size; 26 | } 27 | 28 | @container (max-width: 1000px) { 29 | .App-header .App-link{ 30 | background-color: red; 31 | } 32 | } 33 | 34 | .App-link { 35 | color: #57b5f9; 36 | } 37 | 38 | @keyframes App-logo-spin { 39 | from { 40 | transform: rotate(0deg); 41 | } 42 | to { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /dev/children/react17/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /dev/children/react17/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | body, micro-app-body, #root, .App { 16 | height: 100%; 17 | } 18 | -------------------------------------------------------------------------------- /dev/children/react17/src/index.js: -------------------------------------------------------------------------------- 1 | // import './public-path'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import './index.css'; 5 | import App from './App'; 6 | import reportWebVitals from './reportWebVitals'; 7 | // import 'antd/dist/antd.css'; 8 | 9 | // 发送数据 10 | window.microApp?.dispatch({'from': '来自微应用react17的数据' + (+new Date())}) 11 | 12 | // 👇 将渲染操作放入 mount 函数，子应用初始化时会自动执行 13 | window.mount = () => { 14 | ReactDOM.render( 15 | 16 | 17 | , 18 | document.getElementById('root') 19 | ); 20 | 21 | console.log("微应用react17渲染来了 -- UMD模式"); 22 | } 23 | 24 | // 👇 将卸载操作放入 unmount 函数 25 | window.unmount = () => { 26 | ReactDOM.unmountComponentAtNode(document.getElementById("root")); 27 | console.log("微应用react17卸载了 -- UMD模式"); 28 | } 29 | 30 | // 如果不在微前端环境，则直接执行mount渲染 31 | if (!window.__MICRO_APP_ENVIRONMENT__) { 32 | window.mount() 33 | } 34 | 35 | // If you want to start measuring performance in your app, pass a function 36 | // to log results (for example: reportWebVitals(console.log)) 37 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 38 | reportWebVitals(); 39 | -------------------------------------------------------------------------------- /dev/children/react17/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__MICRO_APP_ENVIRONMENT__) { 2 | // eslint-disable-next-line 3 | __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ 4 | } 5 | -------------------------------------------------------------------------------- /dev/children/react17/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /dev/children/react17/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /dev/children/vite2/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | vite2 5 | dist-ssr 6 | *.local 7 | /vite 8 | -------------------------------------------------------------------------------- /dev/children/vite2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 11 | 14 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /dev/children/vite2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "child-vite2", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "start": "vite", 6 | "build": "vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "ant-design-vue": "^3.2.15", 11 | "element-plus": "^2.3.0", 12 | "naive-ui": "^2.34.3", 13 | "vue": "^3.1.4", 14 | "vue-router": "^4.0.10" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-legacy": "^1.4.3", 18 | "@vitejs/plugin-vue": "^1.2.4", 19 | "@vue/compiler-sfc": "^3.1.4", 20 | "sass": "^1.60.0", 21 | "unplugin-auto-import": "^0.15.1", 22 | "unplugin-element-plus": "^0.7.0", 23 | "unplugin-vue-components": "^0.24.1", 24 | "vite": "^2.6.13" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /dev/children/vite2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vite2/public/favicon.ico -------------------------------------------------------------------------------- /dev/children/vite2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vite2/src/assets/logo.png -------------------------------------------------------------------------------- /dev/children/vite2/src/assets/micro-app-logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vite2/src/assets/micro-app-logo.jpeg -------------------------------------------------------------------------------- /dev/children/vite2/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 25 | 26 | 31 | -------------------------------------------------------------------------------- /dev/children/vite2/src/router.js: -------------------------------------------------------------------------------- 1 | import Home from './pages/home.vue' 2 | 3 | const routes = [ 4 | { 5 | path: '/', 6 | name: 'Home', 7 | component: Home 8 | }, 9 | { 10 | path: '/element-plus', 11 | name: 'element-plus', 12 | component: () => import('./pages/element-plus.vue') 13 | }, 14 | { 15 | path: '/ant-design-vue', 16 | name: 'ant-design-vue', 17 | component: () => import('./pages/ant-design-vue.vue') 18 | } 19 | ] 20 | 21 | export default routes 22 | -------------------------------------------------------------------------------- /dev/children/vite2/src/styles/element/index.scss: -------------------------------------------------------------------------------- 1 | // styles/element/index.scss 2 | // we can add this to custom namespace, default is 'el' 3 | @forward 'element-plus/theme-chalk/src/mixins/config.scss' with ( 4 | $namespace: 'ep' 5 | ); 6 | -------------------------------------------------------------------------------- /dev/children/vite2/src/utils.js: -------------------------------------------------------------------------------- 1 | export const submitForm = (formEl) => { 2 | if (!formEl) return 3 | formEl.validate((valid) => { 4 | if (valid) { 5 | console.log('submit!') 6 | } else { 7 | console.log('error submit!') 8 | return false 9 | } 10 | }) 11 | } 12 | 13 | export const resetForm = (formEl) => { 14 | if (!formEl) return 15 | formEl.resetFields() 16 | } 17 | -------------------------------------------------------------------------------- /dev/children/vite4/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | vite4 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /dev/children/vite4/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /dev/children/vite4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite4", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@arco-design/web-vue": "^2.54.4", 13 | "ant-design-vue": "^3.2.16", 14 | "element-plus": "^2.3.1", 15 | "naive-ui": "^2.34.3", 16 | "vue": "^3.2.47", 17 | "vue-router": "^4.1.6" 18 | }, 19 | "devDependencies": { 20 | "@vitejs/plugin-vue": "^4.1.0", 21 | "sass": "^1.60.0", 22 | "unocss": "^0.58.4", 23 | "unplugin-auto-import": "^0.15.2", 24 | "unplugin-element-plus": "^0.7.0", 25 | "unplugin-vue-components": "^0.24.1", 26 | "vite": "^4.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /dev/children/vite4/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vite4/src/assets/logo.png -------------------------------------------------------------------------------- /dev/children/vite4/src/assets/micro-app-logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vite4/src/assets/micro-app-logo.jpeg -------------------------------------------------------------------------------- /dev/children/vite4/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 25 | 26 | 31 | -------------------------------------------------------------------------------- /dev/children/vite4/src/pages/inline.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 18 | 20 | -------------------------------------------------------------------------------- /dev/children/vite4/src/router.js: -------------------------------------------------------------------------------- 1 | import Home from './pages/home.vue' 2 | 3 | const routes = [ 4 | { 5 | path: '/', 6 | name: 'Home', 7 | component: Home 8 | }, 9 | { 10 | path: '/element-plus', 11 | name: 'element-plus', 12 | component: () => import('./pages/element-plus.vue') 13 | }, 14 | { 15 | path: '/ant-design-vue', 16 | name: 'ant-design-vue', 17 | component: () => import('./pages/ant-design-vue.vue') 18 | }, 19 | { 20 | path: '/inline', 21 | name: 'inline', 22 | component: () => import('./pages/inline.vue') 23 | } 24 | ] 25 | 26 | export default routes 27 | -------------------------------------------------------------------------------- /dev/children/vite4/src/styles/element/index.scss: -------------------------------------------------------------------------------- 1 | // styles/element/index.scss 2 | // we can add this to custom namespace, default is 'el' 3 | @forward 'element-plus/theme-chalk/src/mixins/config.scss' with ( 4 | $namespace: 'ep' 5 | ); 6 | -------------------------------------------------------------------------------- /dev/children/vite4/src/utils.js: -------------------------------------------------------------------------------- 1 | export const submitForm = (formEl) => { 2 | if (!formEl) return 3 | formEl.validate((valid) => { 4 | if (valid) { 5 | console.log('submit!') 6 | } else { 7 | console.log('error submit!') 8 | return false 9 | } 10 | }) 11 | } 12 | 13 | export const resetForm = (formEl) => { 14 | if (!formEl) return 15 | formEl.resetFields() 16 | } 17 | -------------------------------------------------------------------------------- /dev/children/vite4/uno.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'unocss' 2 | 3 | export default defineConfig({ 4 | // ...UnoCSS options 5 | }) 6 | -------------------------------------------------------------------------------- /dev/children/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /vue2 5 | 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /dev/children/vue2/README.md: -------------------------------------------------------------------------------- 1 | # vue2 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /dev/children/vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dev/children/vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "child-vue2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "element-ui": "2.15.8", 13 | "vue": "^2.6.11", 14 | "vue-pdf": "^4.3.0", 15 | "vue-router": "~3.5.1", 16 | "vuedraggable": "^2.24.3" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "~4.5.0", 20 | "@vue/cli-plugin-eslint": "~4.5.0", 21 | "@vue/cli-service": "~4.5.0", 22 | "babel-eslint": "^10.1.0", 23 | "eslint": "^6.7.2", 24 | "eslint-plugin-vue": "^6.2.2", 25 | "vue-template-compiler": "^2.6.11" 26 | }, 27 | "eslintConfig": { 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/essential", 34 | "eslint:recommended" 35 | ], 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | }, 39 | "rules": {} 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not dead" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /dev/children/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/favicon.ico -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/css/modules/layer/default/icon-ext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/css/modules/layer/default/icon-ext.png -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/css/modules/layer/default/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/css/modules/layer/default/icon.png -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/css/modules/layer/default/loading-0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/css/modules/layer/default/loading-0.gif -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/css/modules/layer/default/loading-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/css/modules/layer/default/loading-1.gif -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/css/modules/layer/default/loading-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/css/modules/layer/default/loading-2.gif -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/font/iconfont.eot -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/font/iconfont.ttf -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/font/iconfont.woff -------------------------------------------------------------------------------- /dev/children/vue2/public/layui/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/public/layui/font/iconfont.woff2 -------------------------------------------------------------------------------- /dev/children/vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/src/assets/logo.png -------------------------------------------------------------------------------- /dev/children/vue2/src/assets/micro-app-logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/src/assets/micro-app-logo.jpeg -------------------------------------------------------------------------------- /dev/children/vue2/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 17 | 33 | -------------------------------------------------------------------------------- /dev/children/vue2/src/config.js: -------------------------------------------------------------------------------- 1 | 2 | let config = { 3 | react16: 'http://localhost:3001/', 4 | react17: 'http://localhost:3002/', 5 | vue2: 'http://localhost:4001/', 6 | vue3: 'http://localhost:4002/', 7 | angular11: 'http://localhost:6001/', 8 | } 9 | const isEnvPro = process.env.NODE_ENV === 'production' 10 | 11 | if (isEnvPro) { 12 | const baseUrl = `${window.location.origin}/` 13 | config = { 14 | react16: baseUrl, 15 | react17: baseUrl, 16 | vue2: baseUrl, 17 | vue3: baseUrl, 18 | angular11: baseUrl, 19 | } 20 | } 21 | 22 | export default config 23 | -------------------------------------------------------------------------------- /dev/children/vue2/src/my-font/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1614759044907'); /* IE9 */ 4 | src: url('./iconfont.woff?t=1614759044907') format('woff'), 5 | url('iconfont.ttf?t=1614759044907') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 6 | url('iconfont.svg?t=1614759044907#iconfont') format('svg'); /* iOS 4.1- */ 7 | } 8 | 9 | .iconfont { 10 | font-family: "iconfont" !important; 11 | font-size: 16px; 12 | font-style: normal; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | .zoe-ui-ico:before { 18 | content: "\e603"; 19 | } 20 | 21 | .zoe-ui-up-fill:before { 22 | content: "\e601"; 23 | } 24 | 25 | .zoe-ui-home:before { 26 | content: "\e600"; 27 | } 28 | 29 | .zoe-ui-right:before { 30 | content: "\e649"; 31 | } 32 | 33 | .zoe-ui-arrow-fill:before { 34 | content: "\e940"; 35 | } 36 | 37 | .zoe-ui-logo:before { 38 | content: "\e66a"; 39 | } 40 | 41 | -------------------------------------------------------------------------------- /dev/children/vue2/src/my-font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/src/my-font/iconfont.eot -------------------------------------------------------------------------------- /dev/children/vue2/src/my-font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/src/my-font/iconfont.ttf -------------------------------------------------------------------------------- /dev/children/vue2/src/my-font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/src/my-font/iconfont.woff -------------------------------------------------------------------------------- /dev/children/vue2/src/my-font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue2/src/my-font/iconfont.woff2 -------------------------------------------------------------------------------- /dev/children/vue2/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__MICRO_APP_ENVIRONMENT__) { 2 | // eslint-disable-next-line 3 | __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ 4 | } 5 | -------------------------------------------------------------------------------- /dev/children/vue2/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import Home from './pages/home.vue'; 4 | 5 | Vue.use(VueRouter); 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'home', 11 | component: Home, 12 | }, 13 | { 14 | path: '/page2', 15 | name: 'page2', 16 | component: () => import(/* webpackChunkName: "page2" */ './pages/page2.vue'), 17 | }, 18 | { 19 | path: '/table', 20 | name: 'table', 21 | component: () => import(/* webpackChunkName: "table" */ './pages/table.vue'), 22 | }, 23 | { 24 | path: '/nest', 25 | name: 'nest', 26 | component: () => import(/* webpackChunkName: "nest" */ './pages/nest.vue'), 27 | }, 28 | ]; 29 | 30 | export default routes; 31 | -------------------------------------------------------------------------------- /dev/children/vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | publicPath: '/micro-app/vue2/', 5 | outputDir: 'vue2', 6 | productionSourceMap: false, 7 | devServer: { 8 | hot: true, 9 | disableHostCheck: true, 10 | port: 4001, 11 | overlay: { 12 | warnings: false, 13 | errors: true, 14 | }, 15 | headers: { 16 | 'Access-Control-Allow-Origin': '*', 17 | }, 18 | }, 19 | lintOnSave: false, 20 | 21 | // 自定义webpack配置 22 | configureWebpack: { 23 | output: { 24 | jsonpFunction: `webpackJsonp-chile-vue2`, 25 | // globalObject: 'window', 26 | } 27 | }, 28 | chainWebpack: config => { 29 | config.resolve.alias 30 | .set("@micro-zoe/micro-app", path.join(__dirname, '../../../lib/index.esm.js')) 31 | }, 32 | } 33 | -------------------------------------------------------------------------------- /dev/children/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /vue3 5 | 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /dev/children/vue3/README.md: -------------------------------------------------------------------------------- 1 | # vue3 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /dev/children/vue3/auto-imports.d.ts: -------------------------------------------------------------------------------- 1 | // Generated by 'unplugin-auto-import' 2 | export {} 3 | declare global { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /dev/children/vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ], 5 | plugins: [ 6 | '@babel/plugin-proposal-optional-chaining', 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /dev/children/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue3/public/favicon.ico -------------------------------------------------------------------------------- /dev/children/vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /dev/children/vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /dev/children/vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue3/src/assets/logo.png -------------------------------------------------------------------------------- /dev/children/vue3/src/assets/micro-app-logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/children/vue3/src/assets/micro-app-logo.jpeg -------------------------------------------------------------------------------- /dev/children/vue3/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 17 | 33 | -------------------------------------------------------------------------------- /dev/children/vue3/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__MICRO_APP_ENVIRONMENT__) { 2 | // eslint-disable-next-line 3 | __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ 4 | } 5 | -------------------------------------------------------------------------------- /dev/children/vue3/src/router.js: -------------------------------------------------------------------------------- 1 | import Home from './pages/home.vue' 2 | 3 | const routes = [ 4 | { 5 | path: '/', 6 | name: 'home', 7 | component: Home, 8 | }, 9 | { 10 | path: '/element-plus', 11 | name: 'element-plus', 12 | component: () => import(/* webpackChunkName: "element-plus" */ './pages/element-plus.vue'), 13 | }, 14 | { 15 | path: '/ant-design-vue', 16 | name: 'ant-design-vue', 17 | component: () => import(/* webpackChunkName: "ant-design-vue" */ './pages/ant-design-vue.vue'), 18 | }, 19 | ] 20 | 21 | export default routes 22 | -------------------------------------------------------------------------------- /dev/children/vue3/src/utils.js: -------------------------------------------------------------------------------- 1 | export const submitForm = (formEl) => { 2 | if (!formEl) return 3 | formEl.validate((valid) => { 4 | if (valid) { 5 | console.log('submit!') 6 | } else { 7 | console.log('error submit!') 8 | return false 9 | } 10 | }) 11 | } 12 | 13 | export const resetForm = (formEl) => { 14 | if (!formEl) return 15 | formEl.resetFields() 16 | } 17 | -------------------------------------------------------------------------------- /dev/children/vue3/uno.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, presetTypography, presetUno } from 'unocss'; 2 | 3 | export default defineConfig({ 4 | presets: [presetUno(), presetTypography()], 5 | }); 6 | -------------------------------------------------------------------------------- /dev/children/vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const AutoImport = require('unplugin-auto-import/webpack') 2 | const Components = require('unplugin-vue-components/webpack') 3 | const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') 4 | 5 | module.exports = { 6 | publicPath: '/micro-app/vue3/', 7 | outputDir: 'vue3', 8 | productionSourceMap: false, 9 | devServer: { 10 | hot: true, 11 | disableHostCheck: true, 12 | port: 4002, 13 | overlay: { 14 | warnings: false, 15 | errors: true, 16 | }, 17 | headers: { 18 | 'Access-Control-Allow-Origin': '*', 19 | }, 20 | }, 21 | lintOnSave: false, 22 | // 自定义webpack配置 23 | configureWebpack: { 24 | output: { 25 | jsonpFunction: `webpackJsonp-chile-vue3`, 26 | }, 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.mjs$/, 31 | include: /node_modules/, 32 | type: "javascript/auto" 33 | } 34 | ] 35 | }, 36 | plugins: [ 37 | AutoImport({ 38 | resolvers: [ElementPlusResolver({ 39 | importStyle: false, 40 | })], 41 | }), 42 | Components({ 43 | resolvers: [ElementPlusResolver()], 44 | }), 45 | ], 46 | }, 47 | } 48 | -------------------------------------------------------------------------------- /dev/main-react16/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /dev/main-react16/.eslintignore: -------------------------------------------------------------------------------- 1 | /lambda/ 2 | /scripts 3 | /config 4 | .history 5 | public 6 | dist 7 | .umi 8 | mock 9 | -------------------------------------------------------------------------------- /dev/main-react16/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | **/node_modules 5 | # roadhog-api-doc ignore 6 | /src/utils/request-temp.js 7 | _roadhog-api-doc 8 | 9 | # production 10 | /dist 11 | /.vscode 12 | /demo 13 | 14 | # misc 15 | .DS_Store 16 | npm-debug.log* 17 | yarn-error.log 18 | 19 | /coverage 20 | .idea 21 | *bak 22 | .vscode 23 | 24 | # visual studio code 25 | .history 26 | *.log 27 | functions/* 28 | .temp/** 29 | 30 | # umi 31 | .umi 32 | .umi-production 33 | 34 | # screenshot 35 | screenshot 36 | .firebase 37 | .eslintcache 38 | 39 | build 40 | -------------------------------------------------------------------------------- /dev/main-react16/.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.svg 2 | package.json 3 | .umi 4 | .umi-production 5 | /dist 6 | .dockerignore 7 | .DS_Store 8 | .eslintignore 9 | *.png 10 | *.toml 11 | docker 12 | .editorconfig 13 | Dockerfile* 14 | .gitignore 15 | .prettierignore 16 | LICENSE 17 | .eslintcache 18 | *.lock 19 | yarn-error.log 20 | .history 21 | CNAME 22 | /build 23 | /public -------------------------------------------------------------------------------- /dev/main-react16/.prettierrc.js: -------------------------------------------------------------------------------- 1 | const fabric = require('@umijs/fabric'); 2 | 3 | module.exports = { 4 | ...fabric.prettier, 5 | }; 6 | -------------------------------------------------------------------------------- /dev/main-react16/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | const fabric = require('@umijs/fabric'); 2 | 3 | module.exports = { 4 | ...fabric.stylelint, 5 | }; 6 | -------------------------------------------------------------------------------- /dev/main-react16/README.md: -------------------------------------------------------------------------------- 1 | # Ant Design Pro 2 | 3 | This project is initialized with [Ant Design Pro](https://pro.ant.design). Follow is the quick guide for how to use. 4 | 5 | ## Environment Prepare 6 | 7 | Install `node_modules`: 8 | 9 | ```bash 10 | npm install 11 | ``` 12 | 13 | or 14 | 15 | ```bash 16 | yarn 17 | ``` 18 | 19 | ## Provided Scripts 20 | 21 | Ant Design Pro provides some useful script to help you quick start and build with web project, code style check and test. 22 | 23 | Scripts provided in `package.json`. It's safe to modify or add additional script: 24 | 25 | ### Start project 26 | 27 | ```bash 28 | npm start 29 | ``` 30 | 31 | ### Build project 32 | 33 | ```bash 34 | npm run build 35 | ``` 36 | 37 | ### Check code style 38 | 39 | ```bash 40 | npm run lint 41 | ``` 42 | 43 | You can also use script to auto fix some lint error: 44 | 45 | ```bash 46 | npm run lint:fix 47 | ``` 48 | 49 | ### Test code 50 | 51 | ```bash 52 | npm test 53 | ``` 54 | 55 | ## More 56 | 57 | You can view full document on our [official website](https://pro.ant.design). And welcome any feedback in our [github](https://github.com/ant-design/ant-design-pro). 58 | -------------------------------------------------------------------------------- /dev/main-react16/config/config.dev.js: -------------------------------------------------------------------------------- 1 | // https://umijs.org/config/ 2 | import { defineConfig } from 'umi'; 3 | const port = 3000 4 | export default defineConfig({ 5 | plugins: [ 6 | // https://github.com/zthxxx/react-dev-inspector 7 | 'react-dev-inspector/plugins/umi/react-inspector', 8 | ], 9 | // https://github.com/zthxxx/react-dev-inspector#inspector-loader-props 10 | inspectorConfig: { 11 | exclude: [], 12 | babelPlugins: [], 13 | babelOptions: {}, 14 | }, 15 | devServer: { 16 | port, 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /dev/main-react16/config/defaultSettings.js: -------------------------------------------------------------------------------- 1 | const proSettings = { 2 | navTheme: 'dark', 3 | // 拂晓蓝 4 | primaryColor: '#1890ff', 5 | layout: 'side', 6 | contentWidth: 'Fluid', 7 | fixedHeader: false, 8 | fixSiderbar: true, 9 | colorWeak: false, 10 | title: 'Micro App', 11 | pwa: false, 12 | iconfontUrl: '', 13 | }; 14 | export default proSettings; 15 | -------------------------------------------------------------------------------- /dev/main-react16/config/proxy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置 3 | * The agent cannot take effect in the production environment 4 | * so there is no configuration of the production environment 5 | * For details, please see 6 | * https://pro.ant.design/docs/deploy 7 | */ 8 | export default { 9 | dev: { 10 | '/sugrec': { 11 | target: 'https://www.baidu.com', 12 | secure: false, 13 | changeOrigin: true, 14 | } 15 | } 16 | // dev: { 17 | // '/api/': { 18 | // target: 'https://preview.pro.ant.design', 19 | // changeOrigin: true, 20 | // pathRewrite: { 21 | // '^': '', 22 | // }, 23 | // }, 24 | // }, 25 | // test: { 26 | // '/api/': { 27 | // target: 'https://preview.pro.ant.design', 28 | // changeOrigin: true, 29 | // pathRewrite: { 30 | // '^': '', 31 | // }, 32 | // }, 33 | // }, 34 | // pre: { 35 | // '/api/': { 36 | // target: 'your pre url', 37 | // changeOrigin: true, 38 | // pathRewrite: { 39 | // '^': '', 40 | // }, 41 | // }, 42 | // }, 43 | }; 44 | -------------------------------------------------------------------------------- /dev/main-react16/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testURL: 'http://localhost:8000', 3 | testEnvironment: './tests/PuppeteerEnvironment', 4 | verbose: false, 5 | globals: { 6 | ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: false, 7 | localStorage: null, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /dev/main-react16/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "emitDecoratorMetadata": true, 4 | "experimentalDecorators": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["./src/*"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /dev/main-react16/mock/route.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '/api/auth_routes': { 3 | '/form/advanced-form': { 4 | authority: ['admin', 'user'], 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /dev/main-react16/public/CNAME: -------------------------------------------------------------------------------- 1 | preview.pro.ant.design -------------------------------------------------------------------------------- /dev/main-react16/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/main-react16/public/favicon.ico -------------------------------------------------------------------------------- /dev/main-react16/public/home_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/main-react16/public/home_bg.png -------------------------------------------------------------------------------- /dev/main-react16/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dev/main-react16/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/Authorized/Authorized.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Result } from 'antd'; 3 | import check from './CheckPermissions'; 4 | 5 | const Authorized = ({ 6 | children, 7 | authority, 8 | noMatch = ( 9 | 14 | ), 15 | }) => { 16 | const childrenRender = typeof children === 'undefined' ? null : children; 17 | const dom = check(authority, childrenRender, noMatch); 18 | return <>{dom}; 19 | }; 20 | 21 | export default Authorized; 22 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/Authorized/AuthorizedRoute.jsx: -------------------------------------------------------------------------------- 1 | import { Redirect, Route } from 'umi'; 2 | import React from 'react'; 3 | import Authorized from './Authorized'; 4 | 5 | const AuthorizedRoute = ({ component: Component, render, authority, redirectPath, ...rest }) => ( 6 | ( 12 | 17 | )} 18 | /> 19 | } 20 | > 21 | (Component ? : render(props))} /> 22 | 23 | ); 24 | 25 | export default AuthorizedRoute; 26 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/Authorized/index.jsx: -------------------------------------------------------------------------------- 1 | import Authorized from './Authorized'; 2 | import Secured from './Secured'; 3 | import check from './CheckPermissions'; 4 | import renderAuthorize from './renderAuthorize'; 5 | Authorized.Secured = Secured; 6 | Authorized.check = check; 7 | const RenderAuthorize = renderAuthorize(Authorized); 8 | export default RenderAuthorize; 9 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/Authorized/renderAuthorize.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable eslint-comments/disable-enable-pair */ 2 | 3 | /* eslint-disable import/no-mutable-exports */ 4 | let CURRENT = 'NULL'; 5 | 6 | /** 7 | * Use authority or getAuthority 8 | * 9 | * @param {string|()=>String} currentAuthority 10 | */ 11 | const renderAuthorize = (Authorized) => (currentAuthority) => { 12 | if (currentAuthority) { 13 | if (typeof currentAuthority === 'function') { 14 | CURRENT = currentAuthority(); 15 | } 16 | 17 | if ( 18 | Object.prototype.toString.call(currentAuthority) === '[object String]' || 19 | Array.isArray(currentAuthority) 20 | ) { 21 | CURRENT = currentAuthority; 22 | } 23 | } else { 24 | CURRENT = 'NULL'; 25 | } 26 | 27 | return Authorized; 28 | }; 29 | 30 | export { CURRENT }; 31 | export default (Authorized) => renderAuthorize(Authorized); 32 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/HeaderDropdown/index.jsx: -------------------------------------------------------------------------------- 1 | import { Dropdown } from 'antd'; 2 | import React from 'react'; 3 | import classNames from 'classnames'; 4 | import styles from './index.less'; 5 | 6 | const HeaderDropdown = ({ overlayClassName: cls, ...restProps }) => ( 7 | 8 | ); 9 | 10 | export default HeaderDropdown; 11 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/HeaderDropdown/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .container > * { 4 | background-color: @popover-bg; 5 | border-radius: 4px; 6 | box-shadow: @shadow-1-down; 7 | } 8 | 9 | @media screen and (max-width: @screen-xs) { 10 | .container { 11 | width: 100% !important; 12 | } 13 | .container > * { 14 | border-radius: 0 !important; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/HeaderSearch/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .headerSearch { 4 | .input { 5 | width: 0; 6 | min-width: 0; 7 | overflow: hidden; 8 | background: transparent; 9 | border-radius: 0; 10 | transition: width 0.3s, margin-left 0.3s; 11 | :global(.ant-select-selection) { 12 | background: transparent; 13 | } 14 | input { 15 | padding-right: 0; 16 | padding-left: 0; 17 | border: 0; 18 | box-shadow: none !important; 19 | } 20 | &, 21 | &:hover, 22 | &:focus { 23 | border-bottom: 1px solid @border-color-base; 24 | } 25 | &.show { 26 | width: 210px; 27 | margin-left: 8px; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/NoticeIcon/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .popover { 4 | position: relative; 5 | width: 336px; 6 | } 7 | 8 | .noticeButton { 9 | display: inline-block; 10 | cursor: pointer; 11 | transition: all 0.3s; 12 | } 13 | .icon { 14 | padding: 4px; 15 | vertical-align: middle; 16 | } 17 | 18 | .badge { 19 | font-size: 16px; 20 | } 21 | 22 | .tabs { 23 | :global { 24 | .ant-tabs-nav-list { 25 | margin: auto; 26 | } 27 | 28 | .ant-tabs-nav-scroll { 29 | text-align: center; 30 | } 31 | .ant-tabs-bar { 32 | margin-bottom: 0; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /dev/main-react16/src/components/PageLoading/index.jsx: -------------------------------------------------------------------------------- 1 | import { PageLoading } from '@ant-design/pro-layout'; // loading components from code split 2 | // https://umijs.org/plugin/umi-plugin-react.html#dynamicimport 3 | 4 | export default PageLoading; 5 | -------------------------------------------------------------------------------- /dev/main-react16/src/config.js: -------------------------------------------------------------------------------- 1 | 2 | let config = { 3 | react16: 'http://localhost:3001/', 4 | react17: 'http://localhost:3002/', 5 | vue2: 'http://localhost:4001/', 6 | vue3: 'http://localhost:4002/', 7 | vite2: 'http://localhost:7001/', 8 | vite4: 'http://localhost:7002/', 9 | angular11: 'http://localhost:6001/', 10 | angular14: 'http://localhost:6002/', 11 | } 12 | const isEnvPro = process.env.NODE_ENV === 'production' 13 | 14 | if (isEnvPro) { 15 | const locationOrigin = `${location.origin}/` 16 | config = { 17 | react16: locationOrigin, 18 | react17: locationOrigin, 19 | vue2: locationOrigin, 20 | vue3: locationOrigin, 21 | angular11: locationOrigin, 22 | angular14: locationOrigin, 23 | vite2: locationOrigin, 24 | vite4: locationOrigin, 25 | } 26 | } 27 | 28 | export default config 29 | -------------------------------------------------------------------------------- /dev/main-react16/src/e2e/__mocks__/antd-pro-merge-less.js: -------------------------------------------------------------------------------- 1 | export default undefined; 2 | -------------------------------------------------------------------------------- /dev/main-react16/src/layouts/BlankLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Inspector } from 'react-dev-inspector'; 3 | const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : React.Fragment; 4 | 5 | const Layout = ({ children }) => { 6 | return {children}; 7 | }; 8 | 9 | export default Layout; 10 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/en-US.js: -------------------------------------------------------------------------------- 1 | import component from './en-US/component'; 2 | import globalHeader from './en-US/globalHeader'; 3 | import menu from './en-US/menu'; 4 | import pwa from './en-US/pwa'; 5 | import settingDrawer from './en-US/settingDrawer'; 6 | import settings from './en-US/settings'; 7 | import pages from './en-US/pages'; 8 | export default { 9 | 'navBar.lang': 'Languages', 10 | 'layout.user.link.help': 'Help', 11 | 'layout.user.link.privacy': 'Privacy', 12 | 'layout.user.link.terms': 'Terms', 13 | 'app.preview.down.block': 'Download this page to your local project', 14 | 'app.welcome.link.fetch-blocks': 'Get all block', 15 | 'app.welcome.link.block-list': 'Quickly build standard, pages based on `block` development', 16 | ...globalHeader, 17 | ...menu, 18 | ...settingDrawer, 19 | ...settings, 20 | ...pwa, 21 | ...component, 22 | ...pages, 23 | }; 24 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/en-US/component.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.tagSelect.expand': 'Expand', 3 | 'component.tagSelect.collapse': 'Collapse', 4 | 'component.tagSelect.all': 'All', 5 | }; 6 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/en-US/globalHeader.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.globalHeader.search': 'Search', 3 | 'component.globalHeader.search.example1': 'Search example 1', 4 | 'component.globalHeader.search.example2': 'Search example 2', 5 | 'component.globalHeader.search.example3': 'Search example 3', 6 | 'component.globalHeader.help': 'Help', 7 | 'component.globalHeader.notification': 'Notification', 8 | 'component.globalHeader.notification.empty': 'You have viewed all notifications.', 9 | 'component.globalHeader.message': 'Message', 10 | 'component.globalHeader.message.empty': 'You have viewed all messsages.', 11 | 'component.globalHeader.event': 'Event', 12 | 'component.globalHeader.event.empty': 'You have viewed all events.', 13 | 'component.noticeIcon.clear': 'Clear', 14 | 'component.noticeIcon.cleared': 'Cleared', 15 | 'component.noticeIcon.empty': 'No notifications', 16 | 'component.noticeIcon.view-more': 'View more', 17 | }; 18 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/en-US/pwa.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'app.pwa.offline': 'You are offline now', 3 | 'app.pwa.serviceworker.updated': 'New content is available', 4 | 'app.pwa.serviceworker.updated.hint': 'Please press the "Refresh" button to reload current page', 5 | 'app.pwa.serviceworker.updated.ok': 'Refresh', 6 | }; 7 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/id-ID.js: -------------------------------------------------------------------------------- 1 | import component from './id-ID/component'; 2 | import globalHeader from './id-ID/globalHeader'; 3 | import menu from './id-ID/menu'; 4 | import pwa from './id-ID/pwa'; 5 | import settingDrawer from './id-ID/settingDrawer'; 6 | import settings from './id-ID/settings'; 7 | import pages from './id-ID/pages'; 8 | export default { 9 | 'navbar.lang': 'Bahasa', 10 | 'layout.user.link.help': 'Bantuan', 11 | 'layout.user.link.privacy': 'Privasi', 12 | 'layout.user.link.terms': 'Ketentuan', 13 | 'app.preview.down.block': 'Unduh halaman ini dalam projek lokal anda', 14 | 'app.welcome.link.fetch-blocks': 'Dapatkan semua blok', 15 | 'app.welcome.link.block-list': 16 | 'Buat standar dengan cepat, halaman-halaman berdasarkan pengembangan `block`', 17 | ...globalHeader, 18 | ...menu, 19 | ...settingDrawer, 20 | ...settings, 21 | ...pwa, 22 | ...component, 23 | ...pages, 24 | }; 25 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/id-ID/component.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.tagSelect.expand': 'Perluas', 3 | 'component.tagSelect.collapse': 'Lipat', 4 | 'component.tagSelect.all': 'Semua', 5 | }; 6 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/id-ID/globalHeader.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.globalHeader.search': 'Pencarian', 3 | 'component.globalHeader.search.example1': 'Contoh 1 Pencarian', 4 | 'component.globalHeader.search.example2': 'Contoh 2 Pencarian', 5 | 'component.globalHeader.search.example3': 'Contoh 3 Pencarian', 6 | 'component.globalHeader.help': 'Bantuan', 7 | 'component.globalHeader.notification': 'Notifikasi', 8 | 'component.globalHeader.notification.empty': 'Anda telah membaca semua notifikasi', 9 | 'component.globalHeader.message': 'Pesan', 10 | 'component.globalHeader.message.empty': 'Anda telah membaca semua pesan.', 11 | 'component.globalHeader.event': 'Acara', 12 | 'component.globalHeader.event.empty': 'Anda telah melihat semua acara.', 13 | 'component.noticeIcon.clear': 'Kosongkan', 14 | 'component.noticeIcon.cleared': 'Berhasil dikosongkan', 15 | 'component.noticeIcon.empty': 'Tidak ada pemberitahuan', 16 | 'component.noticeIcon.view-more': 'Melihat lebih', 17 | }; 18 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/id-ID/pwa.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'app.pwa.offline': 'Koneksi anda terputus', 3 | 'app.pwa.serviceworker.updated': 'Konten baru sudah tersedia', 4 | 'app.pwa.serviceworker.updated.hint': 5 | 'Silahkan klik tombol "Refresh" untuk memuat ulang halaman ini', 6 | 'app.pwa.serviceworker.updated.ok': 'Memuat ulang', 7 | }; 8 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/ja-JP.js: -------------------------------------------------------------------------------- 1 | import globalHeader from './ja-JP/globalHeader'; 2 | import menu from './ja-JP/menu'; 3 | import settingDrawer from './ja-JP/settingDrawer'; 4 | import settings from './ja-JP/settings'; 5 | import pwa from './ja-JP/pwa'; 6 | import component from './ja-JP/component'; 7 | import pages from './ja-JP/pages'; 8 | export default { 9 | 'navBar.lang': '言語', 10 | 'layout.user.link.help': 'ヘルプ', 11 | 'layout.user.link.privacy': 'プライバシー', 12 | 'layout.user.link.terms': '利用規約', 13 | 'app.preview.down.block': 'このページをローカルプロジェクトにダウンロードしてください', 14 | 'app.welcome.link.fetch-blocks': '', 15 | 'app.welcome.link.block-list': '', 16 | ...globalHeader, 17 | ...menu, 18 | ...settingDrawer, 19 | ...settings, 20 | ...pwa, 21 | ...component, 22 | ...pages, 23 | }; 24 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/ja-JP/component.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.tagSelect.expand': '展開', 3 | 'component.tagSelect.collapse': '折りたたむ', 4 | 'component.tagSelect.all': 'すべて', 5 | }; 6 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/ja-JP/globalHeader.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.globalHeader.search': '検索', 3 | 'component.globalHeader.search.example1': '検索例1', 4 | 'component.globalHeader.search.example2': '検索例2', 5 | 'component.globalHeader.search.example3': '検索例3', 6 | 'component.globalHeader.help': 'ヘルプ', 7 | 'component.globalHeader.notification': '通知', 8 | 'component.globalHeader.notification.empty': 'すべての通知を表示しました。', 9 | 'component.globalHeader.message': 'メッセージ', 10 | 'component.globalHeader.message.empty': 'すべてのメッセージを表示しました。', 11 | 'component.globalHeader.event': 'イベント', 12 | 'component.globalHeader.event.empty': 'すべてのイベントを表示しました。', 13 | 'component.noticeIcon.clear': 'クリア', 14 | 'component.noticeIcon.cleared': 'クリア済み', 15 | 'component.noticeIcon.empty': '通知なし', 16 | 'component.noticeIcon.view-more': 'もっと見る', 17 | }; 18 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/ja-JP/pwa.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'app.pwa.offline': 'あなたは今オフラインです', 3 | 'app.pwa.serviceworker.updated': '新しいコンテンツが利用可能です', 4 | 'app.pwa.serviceworker.updated.hint': 5 | '現在のページをリロードするには、「更新」ボタンを押してください', 6 | 'app.pwa.serviceworker.updated.ok': 'リフレッシュ', 7 | }; 8 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/pt-BR.js: -------------------------------------------------------------------------------- 1 | import component from './pt-BR/component'; 2 | import globalHeader from './pt-BR/globalHeader'; 3 | import menu from './pt-BR/menu'; 4 | import pwa from './pt-BR/pwa'; 5 | import settingDrawer from './pt-BR/settingDrawer'; 6 | import settings from './pt-BR/settings'; 7 | export default { 8 | 'navBar.lang': 'Idiomas', 9 | 'layout.user.link.help': 'ajuda', 10 | 'layout.user.link.privacy': 'política de privacidade', 11 | 'layout.user.link.terms': 'termos de serviços', 12 | 'app.preview.down.block': 'Download this page to your local project', 13 | ...globalHeader, 14 | ...menu, 15 | ...settingDrawer, 16 | ...settings, 17 | ...pwa, 18 | ...component, 19 | }; 20 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/pt-BR/component.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.tagSelect.expand': 'Expandir', 3 | 'component.tagSelect.collapse': 'Diminuir', 4 | 'component.tagSelect.all': 'Todas', 5 | }; 6 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/pt-BR/globalHeader.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.globalHeader.search': 'Busca', 3 | 'component.globalHeader.search.example1': 'Exemplo de busca 1', 4 | 'component.globalHeader.search.example2': 'Exemplo de busca 2', 5 | 'component.globalHeader.search.example3': 'Exemplo de busca 3', 6 | 'component.globalHeader.help': 'Ajuda', 7 | 'component.globalHeader.notification': 'Notificação', 8 | 'component.globalHeader.notification.empty': 'Você visualizou todas as notificações.', 9 | 'component.globalHeader.message': 'Mensagem', 10 | 'component.globalHeader.message.empty': 'Você visualizou todas as mensagens.', 11 | 'component.globalHeader.event': 'Evento', 12 | 'component.globalHeader.event.empty': 'Você visualizou todos os eventos.', 13 | 'component.noticeIcon.clear': 'Limpar', 14 | 'component.noticeIcon.cleared': 'Limpo', 15 | 'component.noticeIcon.empty': 'Sem notificações', 16 | 'component.noticeIcon.loaded': 'Carregado', 17 | 'component.noticeIcon.view-more': 'Veja mais', 18 | }; 19 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/pt-BR/pwa.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'app.pwa.offline': 'Você está offline agora', 3 | 'app.pwa.serviceworker.updated': 'Novo conteúdo está disponível', 4 | 'app.pwa.serviceworker.updated.hint': 5 | 'Por favor, pressione o botão "Atualizar" para recarregar a página atual', 6 | 'app.pwa.serviceworker.updated.ok': 'Atualizar', 7 | }; 8 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-CN.js: -------------------------------------------------------------------------------- 1 | import component from './zh-CN/component'; 2 | import globalHeader from './zh-CN/globalHeader'; 3 | import menu from './zh-CN/menu'; 4 | import pwa from './zh-CN/pwa'; 5 | import settingDrawer from './zh-CN/settingDrawer'; 6 | import settings from './zh-CN/settings'; 7 | import pages from './zh-CN/pages'; 8 | export default { 9 | 'navBar.lang': '语言', 10 | 'layout.user.link.help': '帮助', 11 | 'layout.user.link.privacy': '隐私', 12 | 'layout.user.link.terms': '条款', 13 | 'app.preview.down.block': '下载此页面到本地项目', 14 | 'app.welcome.link.fetch-blocks': '获取全部区块', 15 | 'app.welcome.link.block-list': '基于 block 开发，快速构建标准页面', 16 | ...pages, 17 | ...globalHeader, 18 | ...menu, 19 | ...settingDrawer, 20 | ...settings, 21 | ...pwa, 22 | ...component, 23 | }; 24 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-CN/component.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.tagSelect.expand': '展开', 3 | 'component.tagSelect.collapse': '收起', 4 | 'component.tagSelect.all': '全部', 5 | }; 6 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-CN/globalHeader.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.globalHeader.search': '站内搜索', 3 | 'component.globalHeader.search.example1': '搜索提示一', 4 | 'component.globalHeader.search.example2': '搜索提示二', 5 | 'component.globalHeader.search.example3': '搜索提示三', 6 | 'component.globalHeader.help': '使用文档', 7 | 'component.globalHeader.notification': '通知', 8 | 'component.globalHeader.notification.empty': '你已查看所有通知', 9 | 'component.globalHeader.message': '消息', 10 | 'component.globalHeader.message.empty': '您已读完所有消息', 11 | 'component.globalHeader.event': '待办', 12 | 'component.globalHeader.event.empty': '你已完成所有待办', 13 | 'component.noticeIcon.clear': '清空', 14 | 'component.noticeIcon.cleared': '清空了', 15 | 'component.noticeIcon.empty': '暂无数据', 16 | 'component.noticeIcon.view-more': '查看更多', 17 | }; 18 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-CN/menu.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'menu.react16': 'react16应用', 3 | 'menu.react17': 'react17应用', 4 | 'menu.vue2': 'vue2应用', 5 | 'menu.vue3': 'vue3应用', 6 | 'menu.angular11': 'angular11应用', 7 | 'menu.angular14': 'angular14应用', 8 | 'menu.multiple': '多个应用', 9 | 'menu.self': '自带页面', 10 | 'menu.vite2': 'vite2应用', 11 | 'menu.vite4': 'vite4应用', 12 | }; 13 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-CN/pwa.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'app.pwa.offline': '当前处于离线状态', 3 | 'app.pwa.serviceworker.updated': '有新内容', 4 | 'app.pwa.serviceworker.updated.hint': '请点击“刷新”按钮或者手动刷新页面', 5 | 'app.pwa.serviceworker.updated.ok': '刷新', 6 | }; 7 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-TW.js: -------------------------------------------------------------------------------- 1 | import component from './zh-TW/component'; 2 | import globalHeader from './zh-TW/globalHeader'; 3 | import menu from './zh-TW/menu'; 4 | import pwa from './zh-TW/pwa'; 5 | import settingDrawer from './zh-TW/settingDrawer'; 6 | import settings from './zh-TW/settings'; 7 | export default { 8 | 'navBar.lang': '語言', 9 | 'layout.user.link.help': '幫助', 10 | 'layout.user.link.privacy': '隱私', 11 | 'layout.user.link.terms': '條款', 12 | 'app.preview.down.block': '下載此頁面到本地項目', 13 | ...globalHeader, 14 | ...menu, 15 | ...settingDrawer, 16 | ...settings, 17 | ...pwa, 18 | ...component, 19 | }; 20 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-TW/component.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.tagSelect.expand': '展開', 3 | 'component.tagSelect.collapse': '收起', 4 | 'component.tagSelect.all': '全部', 5 | }; 6 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-TW/globalHeader.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'component.globalHeader.search': '站內搜索', 3 | 'component.globalHeader.search.example1': '搜索提示壹', 4 | 'component.globalHeader.search.example2': '搜索提示二', 5 | 'component.globalHeader.search.example3': '搜索提示三', 6 | 'component.globalHeader.help': '使用手冊', 7 | 'component.globalHeader.notification': '通知', 8 | 'component.globalHeader.notification.empty': '妳已查看所有通知', 9 | 'component.globalHeader.message': '消息', 10 | 'component.globalHeader.message.empty': '您已讀完所有消息', 11 | 'component.globalHeader.event': '待辦', 12 | 'component.globalHeader.event.empty': '妳已完成所有待辦', 13 | 'component.noticeIcon.clear': '清空', 14 | 'component.noticeIcon.cleared': '清空了', 15 | 'component.noticeIcon.empty': '暫無資料', 16 | 'component.noticeIcon.view-more': '查看更多', 17 | }; 18 | -------------------------------------------------------------------------------- /dev/main-react16/src/locales/zh-TW/pwa.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'app.pwa.offline': '當前處於離線狀態', 3 | 'app.pwa.serviceworker.updated': '有新內容', 4 | 'app.pwa.serviceworker.updated.hint': '請點擊“刷新”按鈕或者手動刷新頁面', 5 | 'app.pwa.serviceworker.updated.ok': '刷新', 6 | }; 7 | -------------------------------------------------------------------------------- /dev/main-react16/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ant Design Pro", 3 | "short_name": "Ant Design Pro", 4 | "display": "standalone", 5 | "start_url": "./?utm_source=homescreen", 6 | "theme_color": "#002140", 7 | "background_color": "#001529", 8 | "icons": [ 9 | { 10 | "src": "icons/icon-192x192.png", 11 | "sizes": "192x192" 12 | }, 13 | { 14 | "src": "icons/icon-128x128.png", 15 | "sizes": "128x128" 16 | }, 17 | { 18 | "src": "icons/icon-512x512.png", 19 | "sizes": "512x512" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /dev/main-react16/src/models/setting.js: -------------------------------------------------------------------------------- 1 | import defaultSettings from '../../config/defaultSettings'; 2 | 3 | const updateColorWeak = (colorWeak) => { 4 | const root = document.getElementById('root'); 5 | 6 | if (root) { 7 | root.className = colorWeak ? 'colorWeak' : ''; 8 | } 9 | }; 10 | 11 | const SettingModel = { 12 | namespace: 'settings', 13 | state: defaultSettings, 14 | reducers: { 15 | changeSetting(state = defaultSettings, { payload }) { 16 | const { colorWeak, contentWidth } = payload; 17 | 18 | if (state.contentWidth !== contentWidth && window.dispatchEvent) { 19 | window.dispatchEvent(new Event('resize')); 20 | } 21 | 22 | updateColorWeak(!!colorWeak); 23 | return { ...state, ...payload }; 24 | }, 25 | }, 26 | }; 27 | export default SettingModel; 28 | -------------------------------------------------------------------------------- /dev/main-react16/src/models/user.js: -------------------------------------------------------------------------------- 1 | import { queryCurrent, query as queryUsers } from '@/services/user'; 2 | const UserModel = { 3 | namespace: 'user', 4 | state: { 5 | currentUser: {}, 6 | }, 7 | effects: { 8 | *fetch(_, { call, put }) { 9 | const response = yield call(queryUsers); 10 | yield put({ 11 | type: 'save', 12 | payload: response, 13 | }); 14 | }, 15 | 16 | *fetchCurrent(_, { call, put }) { 17 | const response = yield call(queryCurrent); 18 | yield put({ 19 | type: 'saveCurrentUser', 20 | payload: response, 21 | }); 22 | }, 23 | }, 24 | reducers: { 25 | saveCurrentUser(state, action) { 26 | return { ...state, currentUser: action.payload || {} }; 27 | }, 28 | 29 | changeNotifyCount( 30 | state = { 31 | currentUser: {}, 32 | }, 33 | action, 34 | ) { 35 | return { 36 | ...state, 37 | currentUser: { 38 | ...state.currentUser, 39 | notifyCount: action.payload.totalCount, 40 | unreadCount: action.payload.unreadCount, 41 | }, 42 | }; 43 | }, 44 | }, 45 | }; 46 | export default UserModel; 47 | -------------------------------------------------------------------------------- /dev/main-react16/src/pages/404.jsx: -------------------------------------------------------------------------------- 1 | import { Button, Result } from 'antd'; 2 | import React from 'react'; 3 | import { history } from 'umi'; 4 | 5 | const NoFoundPage = () => ( 6 | history.push('/')}> 12 | Back Home 13 | 14 | } 15 | /> 16 | ); 17 | 18 | export default NoFoundPage; 19 | -------------------------------------------------------------------------------- /dev/main-react16/src/pages/Welcome.less: -------------------------------------------------------------------------------- 1 | @import '~antd/lib/style/themes/default.less'; 2 | 3 | .pre { 4 | margin: 12px 0; 5 | padding: 12px 20px; 6 | background: @input-bg; 7 | box-shadow: @card-shadow; 8 | } 9 | -------------------------------------------------------------------------------- /dev/main-react16/src/pages/multiple/multiple.less: -------------------------------------------------------------------------------- 1 | .multiple-btn-con { 2 | display: flex; 3 | margin-bottom: 20px; 4 | } 5 | 6 | .multiple-con { 7 | display: flex; 8 | width: 100%; 9 | } 10 | 11 | .multiple-micro-app { 12 | display: block; 13 | flex: 1; 14 | min-width: 200px; 15 | margin: 0 5px; 16 | } 17 | -------------------------------------------------------------------------------- /dev/main-react16/src/pages/react16/react16.less: -------------------------------------------------------------------------------- 1 | 2 | .app-con-react16 { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | -------------------------------------------------------------------------------- /dev/main-react16/src/pages/vite2/vite2.less: -------------------------------------------------------------------------------- 1 | .test-vite2 { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /dev/main-react16/src/pages/vite4/vite4.less: -------------------------------------------------------------------------------- 1 | .test-vite4 { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /dev/main-react16/src/pages/vue2/module.less: -------------------------------------------------------------------------------- 1 | .testModule { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /dev/main-react16/src/pages/vue2/vue2.less: -------------------------------------------------------------------------------- 1 | .vue-iframe { 2 | border: none; 3 | } 4 | -------------------------------------------------------------------------------- /dev/main-react16/src/services/login.js: -------------------------------------------------------------------------------- 1 | import request from '@/utils/request'; 2 | export async function fakeAccountLogin(params) { 3 | return request('/api/login/account', { 4 | method: 'POST', 5 | data: params, 6 | }); 7 | } 8 | export async function getFakeCaptcha(mobile) { 9 | return request(`/api/login/captcha?mobile=${mobile}`); 10 | } 11 | -------------------------------------------------------------------------------- /dev/main-react16/src/utils/Authorized.js: -------------------------------------------------------------------------------- 1 | import RenderAuthorize from '@/components/Authorized'; 2 | import { getAuthority } from './authority'; 3 | /* eslint-disable eslint-comments/disable-enable-pair */ 4 | 5 | /* eslint-disable import/no-mutable-exports */ 6 | 7 | let Authorized = RenderAuthorize(getAuthority()); // Reload the rights component 8 | 9 | const reloadAuthorized = () => { 10 | Authorized = RenderAuthorize(getAuthority()); 11 | }; 12 | /** Hard code block need it。 */ 13 | 14 | window.reloadAuthorized = reloadAuthorized; 15 | export { reloadAuthorized }; 16 | export default Authorized; 17 | -------------------------------------------------------------------------------- /dev/main-react16/src/utils/utils.js: -------------------------------------------------------------------------------- 1 | import { parse } from 'querystring'; 2 | /* eslint no-useless-escape:0 import/prefer-default-export:0 */ 3 | 4 | const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/; 5 | export const isUrl = (path) => reg.test(path); 6 | export const isAntDesignPro = () => { 7 | if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') { 8 | return true; 9 | } 10 | 11 | return window.location.hostname === 'preview.pro.ant.design'; 12 | }; // 给官方演示站点用，用于关闭真实开发环境不需要使用的特性 13 | 14 | export const isAntDesignProOrDev = () => { 15 | const { NODE_ENV } = process.env; 16 | 17 | if (NODE_ENV === 'development') { 18 | return true; 19 | } 20 | 21 | return isAntDesignPro(); 22 | }; 23 | export const getPageQuery = () => parse(window.location.href.split('?')[1]); 24 | -------------------------------------------------------------------------------- /dev/main-react16/src/utils/utils.less: -------------------------------------------------------------------------------- 1 | // mixins for clearfix 2 | // ------------------------ 3 | .clearfix() { 4 | zoom: 1; 5 | &::before, 6 | &::after { 7 | display: table; 8 | content: ' '; 9 | } 10 | &::after { 11 | clear: both; 12 | height: 0; 13 | font-size: 0; 14 | visibility: hidden; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /dev/main-vite/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /dev/main-vite/README.md: -------------------------------------------------------------------------------- 1 | # test1 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). 8 | 9 | ## Type Support for `.vue` Imports in TS 10 | 11 | TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. 12 | 13 | ## Customize configuration 14 | 15 | See [Vite Configuration Reference](https://vitejs.dev/config/). 16 | 17 | ## Project Setup 18 | 19 | ```sh 20 | pnpm install 21 | ``` 22 | 23 | ### Compile and Hot-Reload for Development 24 | 25 | ```sh 26 | pnpm dev 27 | ``` 28 | 29 | ### Type-Check, Compile and Minify for Production 30 | 31 | ```sh 32 | pnpm build 33 | ``` 34 | -------------------------------------------------------------------------------- /dev/main-vite/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /dev/main-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /dev/main-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test1", 3 | "version": "0.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite", 8 | "build": "run-p type-check \"build-only {@}\" --", 9 | "preview": "vite preview", 10 | "build-only": "vite build", 11 | "type-check": "vue-tsc --build --force" 12 | }, 13 | "dependencies": { 14 | "element-plus": "^2.6.2", 15 | "vue": "^3.4.21", 16 | "vue-router": "^4.3.0" 17 | }, 18 | "devDependencies": { 19 | "@tsconfig/node20": "^20.1.2", 20 | "@types/node": "^20.11.28", 21 | "@vitejs/plugin-vue": "^5.0.4", 22 | "@vue/tsconfig": "^0.5.1", 23 | "npm-run-all2": "^6.1.2", 24 | "typescript": "~5.4.0", 25 | "vite": "^5.1.6", 26 | "vue-tsc": "^2.0.6" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /dev/main-vite/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/main-vite/public/favicon.ico -------------------------------------------------------------------------------- /dev/main-vite/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/main-vite/src/assets/logo.png -------------------------------------------------------------------------------- /dev/main-vite/src/pages/angular11.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /dev/main-vite/src/pages/multiple.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 32 | 33 | 47 | -------------------------------------------------------------------------------- /dev/main-vite/src/pages/react17.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /dev/main-vite/src/pages/test.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /dev/main-vite/src/pages/vite.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /dev/main-vite/src/pages/vue2.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /dev/main-vite/src/pages/vue3.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /dev/main-vite/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue' 3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /dev/main-vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /dev/main-vite/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "exclude": ["src/**/__tests__/*"], 5 | "compilerOptions": { 6 | "composite": true, 7 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 8 | 9 | "baseUrl": ".", 10 | "paths": { 11 | "@/*": ["./src/*"] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /dev/main-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.node.json" 6 | }, 7 | { 8 | "path": "./tsconfig.app.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /dev/main-vite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node20/tsconfig.json", 3 | "include": [ 4 | "vite.config.*", 5 | "vitest.config.*", 6 | "cypress.config.*", 7 | "nightwatch.conf.*", 8 | "playwright.config.*" 9 | ], 10 | "compilerOptions": { 11 | "composite": true, 12 | "noEmit": true, 13 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 14 | 15 | "module": "ESNext", 16 | "moduleResolution": "Bundler", 17 | "types": ["node"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /dev/main-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import {resolve} from 'path' 2 | import { fileURLToPath, URL } from 'node:url' 3 | 4 | import { defineConfig } from 'vite' 5 | import vue from '@vitejs/plugin-vue' 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | vue(), 11 | ], 12 | server: { 13 | port: 5000, 14 | fs: { 15 | strict: false 16 | }, 17 | open: true, 18 | }, 19 | resolve: { 20 | alias: { 21 | '@': fileURLToPath(new URL('./src', import.meta.url)), 22 | '@micro-zoe/micro-app': resolve(__dirname, '../../lib/index.esm.js') 23 | } 24 | } 25 | }) 26 | -------------------------------------------------------------------------------- /dev/main-vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /dev/main-vue2/README.md: -------------------------------------------------------------------------------- 1 | # main-vue 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /dev/main-vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dev/main-vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main-vue2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "~3.6.5", 12 | "element-ui": "~2.15.1", 13 | "vue": "~2.6.11", 14 | "vue-pdf": "^4.3.0", 15 | "vue-router": "~3.5.1" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "~4.5.0", 19 | "@vue/cli-plugin-eslint": "~4.5.0", 20 | "@vue/cli-service": "~4.5.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^6.2.2", 24 | "vue-template-compiler": "^2.6.11", 25 | "zone.js": "~0.11.4" 26 | }, 27 | "eslintConfig": { 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/essential", 34 | "eslint:recommended" 35 | ], 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | }, 39 | "rules": {} 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not dead" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /dev/main-vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/main-vue2/public/favicon.ico -------------------------------------------------------------------------------- /dev/main-vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 13 | 14 | 15 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /dev/main-vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/dev/main-vue2/src/assets/logo.png -------------------------------------------------------------------------------- /dev/main-vue2/src/config.js: -------------------------------------------------------------------------------- 1 | let config = { 2 | react16: 'http://localhost:3001/', 3 | react17: 'http://localhost:3002/', 4 | vue2: 'http://localhost:4001/', 5 | vue3: 'http://localhost:4002/', 6 | angular11: 'http://localhost:6001/', 7 | vite: 'http://localhost:7001/', 8 | } 9 | const isEnvPro = process.env.NODE_ENV === 'production' 10 | 11 | if (isEnvPro) { 12 | const locationOrigin = `${location.origin}/` 13 | config = { 14 | react16: locationOrigin, 15 | react17: locationOrigin, 16 | vue2: locationOrigin, 17 | vue3: locationOrigin, 18 | angular11: locationOrigin, 19 | vite: locationOrigin, 20 | } 21 | } 22 | 23 | export default config 24 | -------------------------------------------------------------------------------- /dev/main-vue2/src/pages/angular11.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /dev/main-vue2/src/pages/angular14.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /dev/main-vue2/src/pages/react17.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /dev/main-vue2/src/pages/test.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /dev/main-vue2/src/pages/vite2.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /dev/main-vue2/src/pages/vite4.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /dev/main-vue2/src/pages/vue2.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 32 | 33 | 36 | -------------------------------------------------------------------------------- /dev/main-vue2/src/pages/vue3.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /dev/main-vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | devServer: { 5 | hot: true, 6 | disableHostCheck: true, 7 | port: 4000, 8 | open: true, 9 | overlay: { 10 | warnings: false, 11 | errors: true, 12 | }, 13 | headers: { 14 | 'Access-Control-Allow-Origin': '*', 15 | }, 16 | }, 17 | lintOnSave: false, 18 | // 自定义webpack配置 19 | configureWebpack: { 20 | 21 | }, 22 | chainWebpack: config => { 23 | config.resolve.alias 24 | .set("@micro-zoe/micro-app", path.join(__dirname, '../../lib/index.esm.js')) 25 | }, 26 | } 27 | -------------------------------------------------------------------------------- /docs/0.x/README.md: -------------------------------------------------------------------------------- 1 | ### 微前端 2 | 微前端的概念是由ThoughtWorks在2016年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。 3 | 4 | 它主要解决了两个问题： 5 | 6 | - 1、随着项目迭代应用越来越庞大，难以维护。 7 | - 2、跨团队或跨部门协作开发项目导致效率低下的问题。 8 | 9 | ![microfroentend](https://img13.360buyimg.com/imagetools/jfs/t1/182098/24/20562/94562/6123569cE7a4b5bc3/f135ab0912746bd6.png ':size=750') 10 | 11 | ### 关于micro-app 12 | `micro-app`包含`js`沙箱、样式隔离、元素隔离等特性，并借鉴了`WebComponent`的思想，通过`CustomElement`将`micro-app`封装成一个类`WebComponent`组件，从而实现了微前端的组件化渲染。 13 | 14 | ##### 概念图 15 | ![image](https://img10.360buyimg.com/imagetools/jfs/t1/168885/23/20790/54203/6084d445E0c9ec00e/d879637b4bb34253.png ':size=750') 16 | 17 | 18 | ### micro-app的优势 19 | #### 1、使用简单 20 | 我们将所有功能都封装到一个类WebComponent组件中，从而实现在基座应用中嵌入一行代码即可渲染一个微前端应用。 21 | 22 | 同时`micro-app`还提供了`js沙箱`、`样式隔离`、`元素隔离`、`预加载`、`数据通信`、`静态资源补全`等一系列完善的功能。 23 | 24 | #### 2、零依赖 25 | `micro-app`没有任何依赖，这赋予它小巧的体积和更高的扩展性。 26 | 27 | #### 3、兼容所有框架 28 | 为了保证各个业务之间独立开发、独立部署的能力，`micro-app`做了诸多兼容，在任何技术框架中都可以正常运行。 29 | -------------------------------------------------------------------------------- /docs/0.x/en-us/README.md: -------------------------------------------------------------------------------- 1 | Coming soon -------------------------------------------------------------------------------- /docs/0.x/en-us/navbar.md: -------------------------------------------------------------------------------- 1 | - [Home](/) 2 | - Translations 3 | - [:cn: 中文](/zh-cn/) 4 | - [:uk: English](/en-us/) -------------------------------------------------------------------------------- /docs/0.x/en-us/sidebar.md: -------------------------------------------------------------------------------- 1 | - overview 2 | * [Home](en-us/) -------------------------------------------------------------------------------- /docs/0.x/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/favicon.ico -------------------------------------------------------------------------------- /docs/0.x/home/assets/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/arrow-right.png -------------------------------------------------------------------------------- /docs/0.x/home/assets/banzhuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/banzhuan.png -------------------------------------------------------------------------------- /docs/0.x/home/assets/github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/github-logo.png -------------------------------------------------------------------------------- /docs/0.x/home/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/logo.png -------------------------------------------------------------------------------- /docs/0.x/home/assets/one-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/one-line.png -------------------------------------------------------------------------------- /docs/0.x/home/assets/react-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/react-code.png -------------------------------------------------------------------------------- /docs/0.x/home/assets/react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/react-logo.png -------------------------------------------------------------------------------- /docs/0.x/home/assets/vue-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/vue-code.png -------------------------------------------------------------------------------- /docs/0.x/home/assets/vue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/home/assets/vue-logo.png -------------------------------------------------------------------------------- /docs/0.x/media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/media/logo.png -------------------------------------------------------------------------------- /docs/0.x/media/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/0.x/media/qq.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/0.x/media/qq.jpeg -------------------------------------------------------------------------------- /docs/0.x/navbar.md: -------------------------------------------------------------------------------- 1 | - [API](zh-cn/api) 2 | - [常见问题](zh-cn/questions) 3 | - Translations 4 | - [:cn: 中文](/zh-cn/) 5 | - [:uk: English](/en-us/) 6 | -------------------------------------------------------------------------------- /docs/0.x/sidebar.md: -------------------------------------------------------------------------------- 1 | - 指南 2 | - [介绍](/) 3 | - [快速开始](zh-cn/start) 4 | 5 | - 功能 6 | - [配置项](zh-cn/configure) 7 | - [生命周期](zh-cn/life-cycles) 8 | - [环境变量](zh-cn/env) 9 | - [JS沙箱](zh-cn/sandbox) 10 | - [样式隔离](zh-cn/scopecss) 11 | - [元素隔离](zh-cn/dom-scope) 12 | - [数据通信](zh-cn/data) 13 | - [静态资源](zh-cn/static-source) 14 | - [预加载](zh-cn/prefetch) 15 | - [插件系统](zh-cn/plugins) 16 | - [多层嵌套](zh-cn/nest) 17 | - [keep-alive](zh-cn/keep-alive) 18 | - [高级功能](zh-cn/advanced) 19 | - [路由](zh-cn/route) 20 | - [应用之间跳转](zh-cn/jump) 21 | 22 | - 手把手 23 | - [说明](zh-cn/framework/introduce) 24 | - [React](zh-cn/framework/react) 25 | - [Vue](zh-cn/framework/vue) 26 | - [Vite](zh-cn/framework/vite) 27 | - [Angular](zh-cn/framework/angular) 28 | - [Nextjs](zh-cn/framework/nextjs) 29 | - [Nuxtjs](zh-cn/framework/nuxtjs) 30 | 31 | - 其他 32 | - [API](zh-cn/api) 33 | - [部署](zh-cn/deploy) 34 | - [常见问题](zh-cn/questions) 35 | - [更新日志](zh-cn/changelog) 36 | -------------------------------------------------------------------------------- /docs/0.x/zh-cn/README.md: -------------------------------------------------------------------------------- 1 | ## cn首页 -------------------------------------------------------------------------------- /docs/0.x/zh-cn/chat.md: -------------------------------------------------------------------------------- 1 | - [Gitter群聊](https://gitter.im/microzoe/micro-app) 2 | - [GitHub讨论组](https://github.com/jd-opensource/micro-app/discussions) 3 | - [BUG反馈](https://github.com/jd-opensource/micro-app/issues) 4 | -------------------------------------------------------------------------------- /docs/0.x/zh-cn/env.md: -------------------------------------------------------------------------------- 1 | ### `__MICRO_APP_ENVIRONMENT__` 2 | 3 | **描述：判断应用是否在微前端环境中** 4 | 5 | 在子应用中通过 `window.__MICRO_APP_ENVIRONMENT__` 判断是否在微前端环境中。 6 | 7 | ```js 8 | if (window.__MICRO_APP_ENVIRONMENT__) { 9 | console.log('我在微前端环境中') 10 | } 11 | ``` 12 | 13 | ### `__MICRO_APP_NAME__` 14 | 15 | **描述：应用名称** 16 | 17 | 在子应用中通过 `window.__MICRO_APP_NAME__` 获取应用的name值，即``标签的name值。 18 | 19 | ### `__MICRO_APP_PUBLIC_PATH__` 20 | 21 | **描述：子应用的静态资源前缀** 22 | 23 | 用于设置webpack动态[public-path](https://webpack.docschina.org/guides/public-path/#on-the-fly)，将子应用的静态资源补全为 http 开头的绝对地址。 24 | 25 | **步骤1:** 在`子应用`src目录下创建名称为`public-path.js`的文件，并添加如下内容 26 | ```js 27 | if (window.__MICRO_APP_ENVIRONMENT__) { 28 | __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ 29 | } 30 | ``` 31 | 32 | **步骤2:** 在子应用的入口文件的`最顶部`引入`public-path.js` 33 | ```js 34 | import './public-path' 35 | ``` 36 | 37 | ### `__MICRO_APP_BASE_ROUTE__` 38 | 39 | **描述：子应用的基础路由** 40 | 41 | 详情见[路由-基础路由](/zh-cn/route?id=基础路由)一章。 42 | 43 | ### `__MICRO_APP_BASE_APPLICATION__` 44 | 45 | **描述：判断应用是否是基座应用** 46 | 47 | 在执行`microApp.start()`后此值才会生效 48 | 49 | ```js 50 | if (window.__MICRO_APP_BASE_APPLICATION__) { 51 | console.log('我是基座应用') 52 | } 53 | ``` 54 | -------------------------------------------------------------------------------- /docs/0.x/zh-cn/framework/introduce.md: -------------------------------------------------------------------------------- 1 | 上面的文档中，我们从功能的角度介绍如何接入微前端，这导致整体的逻辑不连贯。 2 | 3 | 在手把手系列中，*我们会侧重于前端框架本身*，详细介绍它们作为基座应用和子应用如何接入微前端。 4 | 5 | 我们列举比较流行的前端框架，指出各框架的注意事项，规避各种可能出现的问题。 6 | 7 | **目前有：** 8 | - react (version 16, 17) 9 | - vue (version 2, 3) 10 | - vite (version 2) 11 | - angular (version 11) 12 | - nextjs (version 11) 13 | - nuxtjs (version 2) 14 | 15 | > [!TIP] 16 | > 以上框架可以任意组合，换句话说任何一个框架都可以作为基座嵌入其它类型的子应用，任何一个框架也可以作为子应用被其它框架嵌入，包括上面没有列举出的其它库，如 svelte、umi ... 17 | > 18 | > 我们只列举了部分框架，如果有其它框架需求，请在github上提issue告知我们。 19 | -------------------------------------------------------------------------------- /docs/0.x/zh-cn/nest.md: -------------------------------------------------------------------------------- 1 | `micro-app`支持多层嵌套，即子应用可以嵌入其它子应用，但为了防止标签名冲突，子应用中需要做一些修改。 2 | 3 | 在`子应用`中设置`tagName`： 4 | 5 | ```js 6 | microApp.start({ 7 | tagName: 'micro-app-xxx', // 标签名称必须以 `micro-app-` 开头 8 | }) 9 | ``` 10 | 11 | 在子应用中使用新定义的标签进行渲染，如： 12 | ```html 13 | 14 | ``` 15 | 16 | > [!WARNING] 17 | > 无论嵌套多少层，name都要保证全局唯一。 18 | -------------------------------------------------------------------------------- /docs/0.x/zh-cn/prefetch.md: -------------------------------------------------------------------------------- 1 | 预加载是指在应用尚未渲染时提前加载资源并缓存，从而提升首屏渲染速度。 2 | 3 | 预加载并不是同步执行的，它会在浏览器空闲时间，依照开发者传入的顺序，依次加载每个应用的静态资源，以确保不会影响基座应用的性能。 4 | 5 | ### microApp.preFetch(Array\ | Function => Array\) 6 | preFetch接受app数组或一个返回app数组的函数，app的值如下： 7 | 8 | ```js 9 | app: { 10 | name: string, // 应用名称，必传 11 | url: string, // 应用地址，必传 12 | disableScopecss?: boolean // 是否关闭样式隔离，非必传 13 | disableSandbox?: boolean // 是否关闭沙盒，非必传 14 | } 15 | ``` 16 | 17 | ### 使用方式 18 | ```js 19 | import microApp from '@micro-zoe/micro-app' 20 | 21 | // 方式一 22 | microApp.preFetch([ 23 | { name: 'my-app', url: 'xxx' } 24 | ]) 25 | 26 | // 方式二 27 | microApp.preFetch(() => [ 28 | { name: 'my-app', url: 'xxx' } 29 | ]) 30 | 31 | // 方式三 32 | microApp.start({ 33 | preFetchApps: [ 34 | { name: 'my-app', url: 'xxx' } 35 | ], 36 | // 函数类型 37 | // preFetchApps: () => [ 38 | // { name: 'my-app', url: 'xxx' } 39 | // ], 40 | }) 41 | ``` 42 | 43 | > [!NOTE] 44 | > 1、预加载入参：`disableScopecss`、`disableSandbox` 必须和 ``[配置项](/zh-cn/configure)保持一致。如果产生冲突，以先执行的一方为准。 45 | > 46 | > 2、如果子应用开启了shadowDOM，则预加载中的`disableScopecss`需要设置为true 47 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ### 微前端 2 | 微前端的概念是由ThoughtWorks在2016年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。 3 | 4 | 它主要解决了两个问题： 5 | 6 | - 1、随着项目迭代应用越来越庞大，难以维护。 7 | - 2、跨团队或跨部门协作开发项目导致效率低下的问题。 8 | 9 | ![microfroentend](https://img12.360buyimg.com/imagetools/jfs/t1/16487/16/31677/95933/6523ce90F10951212/78b3cee6ce36845b.png ':size=800') 10 | 11 | ### 关于micro-app 12 | `micro-app`是由京东前端团队推出的一款微前端框架，它借鉴了WebComponent的思想，通过`js沙箱`、`样式隔离`、`元素隔离`、`路由隔离`模拟实现了ShadowDom的隔离特性，并结合CustomElement将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染，旨在降低上手难度、提升工作效率。 13 | 14 | `micro-app`和技术栈无关，也不和业务绑定，可以用于任何前端框架。 15 | 16 | ##### 概念图 17 | ![image](https://img10.360buyimg.com/imagetools/jfs/t1/168885/23/20790/54203/6084d445E0c9ec00e/d879637b4bb34253.png ':size=750') 18 | 19 | 20 | ### micro-app的优势 21 | #### 1、使用简单 22 | 我们将所有功能都封装到一个类WebComponent组件中，从而实现在基座应用中嵌入一行代码即可渲染一个微前端应用。 23 | 24 | #### 2、功能强大 25 | `micro-app`提供了`js沙箱`、`样式隔离`、`元素隔离`、`路由隔离`、`预加载`、`数据通信`等一系列完善的功能。 26 | 27 | #### 3、兼容所有框架 28 | 为了保证各个业务之间独立开发、独立部署的能力，`micro-app`做了诸多兼容，在任何前端框架中都可以正常运行。 29 | -------------------------------------------------------------------------------- /docs/en-us/README.md: -------------------------------------------------------------------------------- 1 | Coming soon -------------------------------------------------------------------------------- /docs/en-us/navbar.md: -------------------------------------------------------------------------------- 1 | - [Home](/) 2 | - Translations 3 | - [:cn: 中文](/zh-cn/) 4 | - [:uk: English](/en-us/) -------------------------------------------------------------------------------- /docs/en-us/sidebar.md: -------------------------------------------------------------------------------- 1 | - overview 2 | * [Home](en-us/) -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/favicon.ico -------------------------------------------------------------------------------- /docs/home/assets/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/arrow-right.png -------------------------------------------------------------------------------- /docs/home/assets/banzhuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/banzhuan.png -------------------------------------------------------------------------------- /docs/home/assets/github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/github-logo.png -------------------------------------------------------------------------------- /docs/home/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/logo.png -------------------------------------------------------------------------------- /docs/home/assets/one-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/one-line.png -------------------------------------------------------------------------------- /docs/home/assets/react-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/react-code.png -------------------------------------------------------------------------------- /docs/home/assets/react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/react-logo.png -------------------------------------------------------------------------------- /docs/home/assets/vue-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/vue-code.png -------------------------------------------------------------------------------- /docs/home/assets/vue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/home/assets/vue-logo.png -------------------------------------------------------------------------------- /docs/media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/media/logo.png -------------------------------------------------------------------------------- /docs/media/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/media/qq.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/docs/media/qq.jpeg -------------------------------------------------------------------------------- /docs/navbar.md: -------------------------------------------------------------------------------- 1 | - [API](zh-cn/api/base-app) 2 | - [Micro-App-DevTools](zh-cn/micro-app-devtools) 3 | - [常见问题](zh-cn/questions) 4 | - API 5 | - [主应用API](zh-cn/api/base-app) 6 | - [子应用API](zh-cn/api/child-app) 7 | - Translations 8 | - [:cn: 中文](/zh-cn/) 9 | - [:uk: English](/en-us/) 10 | -------------------------------------------------------------------------------- /docs/sidebar.md: -------------------------------------------------------------------------------- 1 | - 指南 2 | - [介绍](/) 3 | - [快速开始](zh-cn/start) 4 | - [0.x迁移到1.0](zh-cn/transfer) 5 | 6 | - 功能 7 | - [配置项](zh-cn/configure) 8 | - [生命周期](zh-cn/life-cycles) 9 | - [环境变量](zh-cn/env) 10 | - [JS沙箱](zh-cn/sandbox) 11 | - [虚拟路由系统](zh-cn/router) 12 | - [样式隔离](zh-cn/scopecss) 13 | - [元素隔离](zh-cn/dom-scope) 14 | - [数据通信](zh-cn/data) 15 | - [资源系统](zh-cn/static-source) 16 | - [预加载](zh-cn/prefetch) 17 | - [umd模式](zh-cn/umd) 18 | - [keep-alive](zh-cn/keep-alive) 19 | - [多层嵌套](zh-cn/nest) 20 | - [插件系统](zh-cn/plugins) 21 | - [高级功能](zh-cn/advanced) 22 | 23 | - 手把手 24 | - [说明](zh-cn/framework/introduce) 25 | - [React](zh-cn/framework/react) 26 | - [Vue](zh-cn/framework/vue) 27 | - [Vite](zh-cn/framework/vite) 28 | - [Angular](zh-cn/framework/angular) 29 | - [Nextjs](zh-cn/framework/nextjs) 30 | - [Nuxtjs](zh-cn/framework/nuxtjs) 31 | 32 | - API 33 | - [主应用API](zh-cn/api/base-app) 34 | - [子应用API](zh-cn/api/child-app) 35 | 36 | - 其他 37 | - [常见问题](zh-cn/questions) 38 | - [Micro-App-DevTools](zh-cn/micro-app-devtools) 39 | - [部署](zh-cn/deploy) 40 | - [更新日志](zh-cn/changelog) 41 | -------------------------------------------------------------------------------- /docs/zh-cn/README.md: -------------------------------------------------------------------------------- 1 | ## cn首页 -------------------------------------------------------------------------------- /docs/zh-cn/chat.md: -------------------------------------------------------------------------------- 1 | - [Gitter群聊](https://gitter.im/microzoe/micro-app) 2 | - [GitHub讨论组](https://github.com/jd-opensource/micro-app/discussions) 3 | - [BUG反馈](https://github.com/jd-opensource/micro-app/issues) 4 | -------------------------------------------------------------------------------- /docs/zh-cn/dom-scope.md: -------------------------------------------------------------------------------- 1 | 元素隔离的概念来自ShadowDom，即ShadowDom中的元素可以和外部的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离``元素边界，子应用只能对自身的元素进行增、删、改、查的操作。 2 | 3 | **举个栗子🌰 :** 4 | 5 | 主应用和子应用都有一个元素`
`，此时子应用通过`document.querySelector('#root')`获取到的是自己内部的`#root`元素，而不是主应用的。 6 | 7 | **主应用可以获取子应用的元素吗？** 8 | 9 | 可以的！ 10 | 11 | 这一点和ShadowDom不同，在微前端下主应用拥有统筹全局的作用，所以我们没有对主应用操作子应用元素的行为进行限制。 12 | 13 | ### 解除元素绑定 14 | 默认情况下，当子应用操作元素时会绑定元素作用域，而解绑过程是异步的，这可能会导致操作元素异常。 15 | 16 | **常见问题：**主应用元素错误插入到子应用``元素内部。 17 | 18 | **解决方法：**使用`removeDomScope`方法解除元素绑定。 19 | 20 | 具体方式如下： 21 | 22 | #### ** 主应用 ** 23 | ```js 24 | import { removeDomScope } from '@micro-zoe/micro-app' 25 | 26 | removeDomScope(true) // 解除元素绑定 27 | /** 28 | * 中间区域的元素操作都指向主应用 29 | * 例如： 30 | * document.body.appendChild(document.createElement('div')) 31 | * div元素将插入到主应用body中 32 | */ 33 | removeDomScope(false) // 恢复元素绑定 34 | ``` 35 | 36 | #### ** 子应用 ** 37 | ```js 38 | window.microApp.removeDomScope(true) // 解除元素绑定 39 | /** 40 | * 中间区域的元素操作都指向主应用 41 | * 例如： 42 | * document.body.appendChild(document.createElement('div')) 43 | * div元素将插入到主应用body中 44 | */ 45 | window.microApp.removeDomScope(false) // 恢复元素绑定 46 | ``` 47 | 48 | -------------------------------------------------------------------------------- /docs/zh-cn/framework/introduce.md: -------------------------------------------------------------------------------- 1 | 上面的文档中，我们从功能点的角度介绍如何接入微前端，整体逻辑不连贯。 2 | 3 | 在手把手系列中，**我们会侧重于前端框架本身**，详细介绍它们作为主应用和子应用如何接入微前端。 4 | 5 | 我们列举了比较流行的前端框架，列出各框架的接入细节，规避各种可能出现的问题。 6 | 7 | **目前有：** 8 | - [react](/zh-cn/framework/react) 9 | - [vue](/zh-cn/framework/vue) 10 | - [vite](/zh-cn/framework/vite) 11 | - [angular](/zh-cn/framework/angular) 12 | - [nextjs](/zh-cn/framework/nextjs) 13 | - [nuxtjs](/zh-cn/framework/nuxtjs) 14 | 15 | > [!TIP] 16 | > 以上框架可以任意组合，换句话说任何一个框架都可以作为主应用嵌入其它类型的子应用，任何一个框架也可以作为子应用被其它框架嵌入，包括上面没有列举出的其它库，如 svelte、umi ... 17 | -------------------------------------------------------------------------------- /docs/zh-cn/framework/vite.md: -------------------------------------------------------------------------------- 1 | 本篇介绍了`vite`的接入方式，如果在使用时出现问题，请在github上联系我们。 2 | 3 | ## 作为主应用 :id=base 4 | vite作为主应用时没有特殊之处，具体方式参考各框架接入文档。 5 | 6 | ## 作为子应用 :id=child 7 | vite作为子应用只需`切换到iframe沙箱`，其它操作参考各框架接入文档。 8 | 9 | ##### 切换到iframe沙箱 :id=iframe 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | ## 常见问题 16 | 17 | ### 1、子应用中操作location异常 :id=question-1 18 | 19 | **原因：**vite构建script的type为module，导致无法拦截location操作。 20 | 21 | **解决方式：** 使用MicroApp提供的location进行操作 22 | 23 | 如： 24 | ```js 25 | window.microApp.location.host 26 | window.microApp.location.origin 27 | window.microApp.location.href = 'xxx' 28 | window.microApp.location.pathname = 'xxx' 29 | window.microApp.location.reload() 30 | ... 31 | ``` 32 | 33 | ### 2、iframe沙箱加载了主应用的资源 :id=question-2 34 | 参考[JS沙箱常见问题-5](/zh-cn/sandbox?id=iframe-source) 35 | -------------------------------------------------------------------------------- /docs/zh-cn/nest.md: -------------------------------------------------------------------------------- 1 | `micro-app`支持多层嵌套，即子应用可以嵌入其它子应用，但需要做一些修改。 2 | 3 | 例如：A嵌套B，B嵌套C，B作为中间层应用需要做出如下修改： 4 | 5 | #### 步骤1： 6 | 7 | 为了防止标签名冲突，在B应用中自定义`tagName`。 8 | 9 | ```js 10 | import microApp from '@micro-zoe/micro-app'; 11 | 12 | microApp.start({ 13 | // 必须是以`micro-app-`开头的小写字母，例如：micro-app-b、micro-app-b-c 14 | tagName: 'micro-app-xxx', 15 | }) 16 | ``` 17 | 18 | 在B中使用新定义的标签加载C： 19 | ```html 20 | 21 | ``` 22 | 23 | #### 步骤2： 24 | 25 | 将B应用切换为umd模式，详情参考[umd](/zh-cn/umd)。 26 | 27 | 28 | > [!NOTE] 29 | > 30 | > 1、无论嵌套多少层，name都要保证全局唯一。 31 | > 32 | > 2、确保micro-app的版本一致，不同版本可能会导致冲突。 33 | -------------------------------------------------------------------------------- /scripts/after_build.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | const path = require('path') 3 | const fs = require('fs') 4 | const gzipSize = require('gzip-size') 5 | const prettyBytes = require('pretty-bytes') 6 | const chalk = require('chalk') 7 | 8 | const minifile = path.join(__dirname, '../lib/index.min.js') 9 | 10 | console.log(chalk.bold('lib/index.min.js:')) 11 | console.log( 12 | chalk.bold( 13 | '文件体积: ' + prettyBytes(fs.statSync(minifile).size) 14 | ) 15 | ) 16 | 17 | console.log( 18 | chalk.bold( 19 | 'gzip体积: ' + prettyBytes(gzipSize.fileSync(minifile)) 20 | ) 21 | ) 22 | -------------------------------------------------------------------------------- /scripts/test_server.js: -------------------------------------------------------------------------------- 1 | const liveServer = require('live-server') 2 | const path = require('path') 3 | 4 | const params = { 5 | port: 9000, 6 | root: path.join(process.cwd(), '/src/__tests__/demos'), 7 | open: false, 8 | file: 'index.html', 9 | wait: 1000, 10 | logLevel: 0, 11 | quiet: true, 12 | cors: true, 13 | } 14 | 15 | if (process.argv[2] === '--start') { 16 | liveServer.start(params) 17 | } 18 | 19 | module.exports = liveServer 20 | module.exports.params = params 21 | -------------------------------------------------------------------------------- /src/__tests__/common/set_ssr_env.ts: -------------------------------------------------------------------------------- 1 | Object.defineProperty(global, 'window', { 2 | value: undefined, 3 | }) 4 | -------------------------------------------------------------------------------- /src/__tests__/common/util.ts: -------------------------------------------------------------------------------- 1 | export async function waitFor (cb: CallableFunction): Promise { 2 | return new Promise(resolve => { 3 | setTimeout(() => { 4 | resolve(cb()) 5 | }, 0) 6 | }) 7 | } 8 | -------------------------------------------------------------------------------- /src/__tests__/demos/common/async.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/common/async.js -------------------------------------------------------------------------------- /src/__tests__/demos/common/defer.js: -------------------------------------------------------------------------------- 1 | console.log('my defer') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/common/global.js: -------------------------------------------------------------------------------- 1 | console.log(`global-common-app ${window.__MICRO_APP_NAME__}`) 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/common/link1.css: -------------------------------------------------------------------------------- 1 | .test-color { 2 | color: yellow; 3 | } 4 | 5 | :root { 6 | --testfontsize: 30px; 7 | } -------------------------------------------------------------------------------- /src/__tests__/demos/common/link2.css: -------------------------------------------------------------------------------- 1 | .test-font { 2 | font-size: var(--testfontsize); 3 | } -------------------------------------------------------------------------------- /src/__tests__/demos/common/module.js: -------------------------------------------------------------------------------- 1 | console.warn('module') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/common/nomodule.js: -------------------------------------------------------------------------------- 1 | console.warn('nomodule') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/common/script2.js: -------------------------------------------------------------------------------- 1 | 2 | const pdom = document.createElement('p') 3 | pdom.innerText = '22222' 4 | document.querySelectorAll('body')[0].append('11111', pdom) 5 | 6 | // 动态创建的 ignore 类型script保留原有特性，不会被处理 7 | const dynamicIgnoreScript = document.createElement('script') 8 | dynamicIgnoreScript.setAttribute('ignore', 'true') 9 | dynamicIgnoreScript.textContent = 'window.ignoreInjectData = 1' 10 | document.body.appendChild(dynamicIgnoreScript) 11 | window.expect && expect(((0, eval)('window')).ignoreInjectData).toBe(1) 12 | -------------------------------------------------------------------------------- /src/__tests__/demos/common/script3.js: -------------------------------------------------------------------------------- 1 | console.warn('warn in /common/script3') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/dynamic/empty.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/dynamic/empty.css -------------------------------------------------------------------------------- /src/__tests__/demos/dynamic/empty.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/dynamic/empty.js -------------------------------------------------------------------------------- /src/__tests__/demos/dynamic/errorjs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | dynamic 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/dynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | dynamic 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/__tests__/demos/dynamic/link1.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/dynamic/link1.css -------------------------------------------------------------------------------- /src/__tests__/demos/dynamic/script1.js: -------------------------------------------------------------------------------- 1 | console.warn('dynamic script1') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/dynamic/throw-error.js: -------------------------------------------------------------------------------- 1 | throw new Error('dynamic script') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/index.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | 14 | app4 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/link1.css: -------------------------------------------------------------------------------- 1 | .test { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/link2.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/element-config/link2.css -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/link3.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/element-config/link3.css -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/link4.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/element-config/link4.css -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/script1.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/element-config/script1.js -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/script2.js: -------------------------------------------------------------------------------- 1 | console.log('element-config script2') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/script3.js: -------------------------------------------------------------------------------- 1 | console.log('element-config script3') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/element-config/script4.js: -------------------------------------------------------------------------------- 1 | console.log('element-config script4') 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/disablesandbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/empty.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/micro-app/9d71baffbf44095c33dd1532a9cd0e75cb969fe1/src/__tests__/demos/special-html/empty.html -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/error-deferjs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/nobody.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/nohead.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/notexist-css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/notexist-js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/notexistdefer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/onlydefer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/special-html/process-html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | process-html 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/__tests__/demos/ssr-render/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | ssr-render 14 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/__tests__/demos/ssr-render/link1.css: -------------------------------------------------------------------------------- 1 | .test-color { 2 | color: yellow; 3 | } 4 | 5 | :root { 6 | --testfontsize: 30px; 7 | } -------------------------------------------------------------------------------- /src/__tests__/demos/ssr-render/link2.css: -------------------------------------------------------------------------------- 1 | .test-font { 2 | font-size: var(--testfontsize); 3 | } -------------------------------------------------------------------------------- /src/__tests__/demos/ssr-render/script1.js: -------------------------------------------------------------------------------- 1 | // 初始化页面内容 2 | const root = document.querySelector('#root') 3 | root.innerHTML = ` 4 |
5 | text1 6 | text2 7 |
8 | ` 9 | 10 | const dynamicLink = document.createElement('link') 11 | dynamicLink.setAttribute('rel', 'stylesheet') 12 | dynamicLink.setAttribute('href', '/common/link2.css') 13 | document.head.appendChild(dynamicLink) 14 | 15 | const dynamicScript = document.createElement('script') 16 | dynamicScript.setAttribute('src', './script2.js') 17 | document.body.appendChild(dynamicScript) 18 | 19 | // 主动卸载的document click 20 | function handleDocClick () { 21 | console.log('document click1') 22 | } 23 | document.addEventListener('click', handleDocClick, false) 24 | document.removeEventListener('click', handleDocClick) 25 | 26 | // 主动卸载的window scroll 27 | function handleWinEvent () { 28 | console.log('window scroll1') 29 | } 30 | window.addEventListener('scroll', handleWinEvent, false) 31 | window.removeEventListener('scroll', handleWinEvent) 32 | -------------------------------------------------------------------------------- /src/__tests__/demos/ssr-render/script2.js: -------------------------------------------------------------------------------- 1 | 2 | const pdom = document.createElement('p') 3 | pdom.innerText = '22222' 4 | document.querySelectorAll('body')[0].append('11111', pdom) 5 | -------------------------------------------------------------------------------- /src/__tests__/demos/umd1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | umd 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/__tests__/demos/umd1/script2.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/__tests__/demos/umd2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | umd 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/umd2/index.js: -------------------------------------------------------------------------------- 1 | function handleWindowLoad () {} 2 | window.addEventListener('load', handleWindowLoad, false) 3 | window.removeEventListener('load', handleWindowLoad) 4 | 5 | // coverage brach of effect listener?.__MICRO_MARK_OPTIONS__ 6 | let supportsPassive = false 7 | try { 8 | const opts = Object.defineProperty({}, 'passive', { 9 | get: function () { 10 | supportsPassive = true 11 | } 12 | }) 13 | window.addEventListener('test', null, opts) 14 | } catch (e) {} 15 | 16 | // 不要加document事件监听 --- 单测分支覆盖！！！ 17 | 18 | function mount () { 19 | const root = document.querySelector('#umd-root2') 20 | root.innerHTML = ` 21 |
22 | text1 23 | text2 24 |
25 | ` 26 | } 27 | 28 | function unmount () { 29 | const root = document.querySelector('#umd-root2') 30 | root && (root.innerHTML = '') 31 | } 32 | 33 | window['umd-app2'] = { mount, unmount } 34 | -------------------------------------------------------------------------------- /src/__tests__/demos/umd3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | umd3 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/umd3/index.js: -------------------------------------------------------------------------------- 1 | 2 | let mount, unmount 3 | 4 | //抛出错误的 mount 和 unmount 函数 5 | if (window.specialUmdMode === 'error-hook') { 6 | mount = function () { 7 | throw new Error('mount2') 8 | } 9 | 10 | unmount = function () { 11 | throw new Error('unmount2') 12 | } 13 | 14 | // 抛出错误Promise的 mount 和 unmount 函数 15 | } else if (window.specialUmdMode === 'error-promise-hook') { 16 | mount = function () { 17 | return Promise.reject('mount1') 18 | } 19 | 20 | unmount = function () { 21 | return Promise.reject('unmount1') 22 | } 23 | } else { 24 | mount = function () { 25 | return Promise.resolve('mount1') 26 | } 27 | 28 | unmount = function () { 29 | return Promise.resolve('unmount1') 30 | } 31 | 32 | } 33 | 34 | window['umd-app3'] = { mount, unmount } 35 | -------------------------------------------------------------------------------- /src/__tests__/demos/umd4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | umd4 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/__tests__/demos/umd4/index.js: -------------------------------------------------------------------------------- 1 | function mount () { 2 | const root = document.querySelector('#umd-root4') 3 | const doc = root.ownerDocument; 4 | const container = doc.createElement('div'); 5 | container.className = 'container'; 6 | root.appendChild(container); 7 | } 8 | 9 | function unmount () { 10 | const root = document.querySelector('#umd-root4') 11 | root && (root.innerHTML = '') 12 | } 13 | 14 | window['umd-app4'] = { mount, unmount } 15 | -------------------------------------------------------------------------------- /src/__tests__/interact/lifecycles_event.test.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable promise/param-names */ 2 | import { commonStartEffect, releaseAllEffect, ports } from '../common/initial' 3 | import microApp from '../..' 4 | 5 | describe('lifecycles_event', () => { 6 | let appCon: Element 7 | beforeAll(() => { 8 | commonStartEffect(ports.lifecycles_event) 9 | appCon = document.querySelector('#app-container')! 10 | 11 | microApp.start() 12 | }) 13 | 14 | afterAll(() => { 15 | return releaseAllEffect() 16 | }) 17 | 18 | // 生命周期函数测试覆盖 19 | test('render common app', async () => { 20 | const microAppElement = document.createElement('micro-app') 21 | microAppElement.setAttribute('name', 'test-app') 22 | microAppElement.setAttribute('url', `http://127.0.0.1:${ports.lifecycles_event}/common/`) 23 | 24 | appCon.appendChild(microAppElement) 25 | 26 | await new Promise((resolve) => { 27 | microAppElement.addEventListener('mounted', (e) => { 28 | expect(e.currentTarget).toBe(microAppElement) 29 | expect(e.target).toBe(microAppElement) 30 | resolve(true) 31 | }, false) 32 | }) 33 | }) 34 | }) 35 | -------------------------------------------------------------------------------- /src/__tests__/source/support_module.ts: -------------------------------------------------------------------------------- 1 | // jest默认不支持module类型，所以模拟支持module的环境 2 | export const rawDocumentCreateElement = Document.prototype.createElement 3 | Document.prototype.createElement = function (tagName: string, options?: ElementCreationOptions): HTMLElement { 4 | const element = rawDocumentCreateElement.call(document, tagName, options) 5 | // @ts-ignore 6 | if (tagName === 'script') element.noModule = false 7 | return element 8 | } 9 | 10 | export const rawSetAttribute = Element.prototype.setAttribute 11 | Element.prototype.setAttribute = function setAttribute (key: string, value: string): void { 12 | if (/^script$/i.test(this.tagName)) { 13 | if (key === 'noModule') { 14 | // @ts-ignore 15 | this.noModule = true 16 | } else if (key === 'module') { 17 | // @ts-ignore 18 | this.type = 'module' 19 | } 20 | } 21 | 22 | rawSetAttribute.call(this, key, value) 23 | } 24 | -------------------------------------------------------------------------------- /src/__tests__/ssr_env.test.ts: -------------------------------------------------------------------------------- 1 | import './common/set_ssr_env' 2 | import preFetch from '../prefetch' 3 | import { initGlobalEnv } from '../libs/global_env' 4 | import microApp from '../micro_app' 5 | 6 | describe('test ssr environment', () => { 7 | beforeAll(() => { 8 | global.console.error = jest.fn() 9 | }) 10 | // 在非浏览器环境使用prefetch 11 | test('run prefetch in non browser environment', () => { 12 | preFetch([]) 13 | expect(console.error).toBeCalledWith('[micro-app] preFetch is only supported in browser environment') 14 | }) 15 | 16 | // 在非浏览器环境执行start 17 | test('run start in non browser environment', () => { 18 | microApp.start() 19 | initGlobalEnv() 20 | expect(console.error).toBeCalledWith('[micro-app] micro-app is not supported in this environment') 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /src/__tests__/unit/mocks/app.ts: -------------------------------------------------------------------------------- 1 | export const MOCK_APP_URL = 'http://localhost:6666/' 2 | 3 | export const MOCK_APP_URL_UMD = 'https://storage.360buyimg.com/launch/zeromock/umd-module.js' 4 | 5 | export const MOCK_APP_URL_UMD_OTHER = 'https://storage.360buyimg.com/launch/zeromock/umd-module-cpoy.js' 6 | -------------------------------------------------------------------------------- /src/__tests__/unit/mocks/event.ts: -------------------------------------------------------------------------------- 1 | export const MOCK_EVENT_NAME = 'micro-app-event' 2 | 3 | export const MOCK_EVENT_DATA = { data: 'event data' } 4 | -------------------------------------------------------------------------------- /src/__tests__/unit/mocks/fetch.ts: -------------------------------------------------------------------------------- 1 | export function setupMockFetch (data: string, error?: boolean): CallableFunction { 2 | return function fetchStub () { 3 | return error 4 | ? Promise.reject(new Error('network error')) 5 | : Promise.resolve({ 6 | text: () => data, 7 | }) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/app_manager.ts: -------------------------------------------------------------------------------- 1 | import { appInstanceMap } from './create_app' 2 | import { AppInterface } from '@micro-app/types' 3 | 4 | export interface IAppManager { 5 | get(appName: string): AppInterface | void 6 | set(appName: string, app: AppInterface): void 7 | getAll(): AppInterface[] 8 | clear(): void 9 | } 10 | 11 | // 管理 app 的单例 12 | export class AppManager implements IAppManager { 13 | private static instance: AppManager; 14 | // TODO: appInstanceMap 由 AppManager 来创建，不再由 create_app 管理 15 | private appInstanceMap = appInstanceMap; 16 | 17 | public static getInstance (): AppManager { 18 | if (!this.instance) { 19 | this.instance = new AppManager() 20 | } 21 | return this.instance 22 | } 23 | 24 | public get (appName: string): AppInterface | void { 25 | return this.appInstanceMap.get(appName) 26 | } 27 | 28 | public set (appName: string, app: AppInterface): void { 29 | this.appInstanceMap.set(appName, app) 30 | } 31 | 32 | public getAll (): AppInterface[] { 33 | return Array.from(this.appInstanceMap.values()) 34 | } 35 | 36 | public clear (): void { 37 | this.appInstanceMap.clear() 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | default, 3 | MicroApp, 4 | getActiveApps, 5 | getAllApps, 6 | unmountApp, 7 | unmountAllApps, 8 | reload, 9 | renderApp, 10 | } from './micro_app' 11 | export { 12 | default as preFetch, 13 | } from './prefetch' 14 | export { 15 | removeDomScope, 16 | pureCreateElement, 17 | version, 18 | } from './libs/utils' 19 | export { 20 | EventCenterForMicroApp, 21 | } from './interact' 22 | -------------------------------------------------------------------------------- /src/libs/nest_app.ts: -------------------------------------------------------------------------------- 1 | import { AppManager } from '../app_manager' 2 | import { getRootContainer } from '../libs/utils' 3 | 4 | function unmountNestedApp (): void { 5 | releaseUnmountOfNestedApp() 6 | 7 | AppManager.getInstance().getAll().forEach(app => { 8 | // @ts-ignore 9 | app.container && getRootContainer(app.container).disconnectedCallback() 10 | }) 11 | 12 | !window.__MICRO_APP_UMD_MODE__ && AppManager.getInstance().clear() 13 | } 14 | 15 | // release listener 16 | function releaseUnmountOfNestedApp (): void { 17 | if (window.__MICRO_APP_ENVIRONMENT__) { 18 | window.removeEventListener('unmount', unmountNestedApp, false) 19 | } 20 | } 21 | 22 | // if micro-app run in micro application, delete all next generation application when unmount event received 23 | // unmount event will auto release by sandbox 24 | export function initEnvOfNestedApp (): void { 25 | if (window.__MICRO_APP_ENVIRONMENT__) { 26 | releaseUnmountOfNestedApp() 27 | window.addEventListener('unmount', unmountNestedApp, false) 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/source/fetch.ts: -------------------------------------------------------------------------------- 1 | import { isFunction, removeDomScope } from '../libs/utils' 2 | import microApp from '../micro_app' 3 | 4 | /** 5 | * fetch source of html, js, css 6 | * @param url source path 7 | * @param appName app name 8 | * @param config fetch options 9 | */ 10 | export function fetchSource (url: string, appName: string | null = null, options = {}): Promise { 11 | /** 12 | * When child navigate to new async page, click event will scope dom to child and then fetch new source 13 | * this may cause error when fetch rewrite by baseApp 14 | * e.g. 15 | * baseApp: 16 | */ 17 | removeDomScope() 18 | if (isFunction(microApp.options.fetch)) { 19 | return microApp.options.fetch(url, options, appName) 20 | } 21 | // Don’t use globalEnv.rawWindow.fetch, will cause sgm-2.8.0.js throw error in nest app 22 | return window.fetch(url, options).then((res: Response) => { 23 | return res.text() 24 | }) 25 | } 26 | -------------------------------------------------------------------------------- /src/source/load_event.ts: -------------------------------------------------------------------------------- 1 | import { isFunction } from '../libs/utils' 2 | 3 | function eventHandler (event: Event, element: HTMLLinkElement | HTMLScriptElement): void { 4 | Object.defineProperties(event, { 5 | currentTarget: { 6 | get () { 7 | return element 8 | } 9 | }, 10 | srcElement: { 11 | get () { 12 | return element 13 | } 14 | }, 15 | target: { 16 | get () { 17 | return element 18 | } 19 | }, 20 | }) 21 | } 22 | 23 | export function dispatchOnLoadEvent (element: HTMLLinkElement | HTMLScriptElement): void { 24 | const event = new CustomEvent('load') 25 | eventHandler(event, element) 26 | if (isFunction(element.onload)) { 27 | element.onload!(event) 28 | } else { 29 | element.dispatchEvent(event) 30 | } 31 | } 32 | 33 | export function dispatchOnErrorEvent (element: HTMLLinkElement | HTMLScriptElement): void { 34 | const event = new CustomEvent('error') 35 | eventHandler(event, element) 36 | if (isFunction(element.onerror)) { 37 | element.onerror!(event) 38 | } else { 39 | element.dispatchEvent(event) 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "esnext", 5 | "lib": ["esnext", "dom"], 6 | "declaration": true, 7 | "outDir": "lib", 8 | "rootDir": "src", 9 | "importHelpers": true, 10 | "downlevelIteration": true, 11 | "strict": true, 12 | "noImplicitAny": true, 13 | "strictNullChecks": true, 14 | "resolveJsonModule": true, 15 | "strictFunctionTypes": true, 16 | "strictPropertyInitialization": true, 17 | "noImplicitThis": true, 18 | "alwaysStrict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noImplicitReturns": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "moduleResolution": "node", 24 | "allowSyntheticDefaultImports": true, 25 | "esModuleInterop": true, 26 | "experimentalDecorators": true 27 | }, 28 | "include": [ 29 | "src", 30 | "typings" 31 | ], 32 | "exclude": [ 33 | "node_modules", 34 | "dev", 35 | "src/__tests__" 36 | ], 37 | "compileOnSave": false 38 | } 39 | --------------------------------------------------------------------------------