diff --git a/.github/workflows/issue-comment.yml b/.github/workflows/issue-comment.yml index 4214af706..26be43ac5 100644 --- a/.github/workflows/issue-comment.yml +++ b/.github/workflows/issue-comment.yml @@ -17,6 +17,7 @@ jobs: body: | Hello @${{ github.event.issue.user.login }}. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please be sure to submit compliant commit message, provide changelog/documentation/test cases, we will review it soon. We appreciate your effort in advance and looking forward to your contribution! 您好 @${{ github.event.issue.user.login }},我们完全同意您的提议/反馈,欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请务必填写符合规范的commit message,提供改动所需相应的 changelog、测试用例、文档等,我们会尽快进行 Review,提前感谢和期待您的贡献。 + - name: pls use issue template if: github.event.label.name == 'pls use issue template' uses: actions-cool/issues-helper@v2.0.0 @@ -26,6 +27,7 @@ jobs: body: | Hello @${{ github.event.issue.user.login }}. Please use the issue template to report. This issue will be closed. 您好 @${{ github.event.issue.user.login }},请使用 issue 模板反馈问题。该 issue 将要被关闭。 + - name: Need Reproduction if: github.event.label.name == 'Need Reproduction' uses: actions-cool/issues-helper@v2.0.0 @@ -35,3 +37,13 @@ jobs: body: | Hello @${{ github.event.issue.user.login }}. In order to facilitate location and troubleshooting, we need you to provide a realistic GitHub repository. 您好 @${{ github.event.issue.user.login }}, 为了方便定位和排查问题,我们需要您提供一个重现实例,请提供一个尽可能精简的 GitHub 仓库地址。 + + - name: fixed + if: github.event.label.name == 'fixed' + uses: actions-cool/issues-helper@v2.0.0 + with: + actions: 'create-comment, close-issue' + issue-number: ${{ github.event.issue.number }} + body: | + Hello @${{ github.event.issue.user.login }}. The issue you reported has been fixed. This issue will be closed. Thank you for your feedback. + 您好 @${{ github.event.issue.user.login }},您反馈的问题已修复,该 issue 将要被关闭,感谢反馈。 diff --git a/Contact.md b/Contact.md index 2f8c154a6..72332fee6 100644 --- a/Contact.md +++ b/Contact.md @@ -1,7 +1,15 @@ 欢迎小伙伴们加入micro-app微信群交流^ ^ -![IMG_8085](https://github.com/micro-zoe/micro-app/assets/14011130/f3447ec5-61dd-4c9c-a590-72478b608377) +![IMG_9187](https://github.com/user-attachments/assets/64d16edc-311a-46ea-8ce7-c6fcbe0651d3) + + + + + + + + diff --git a/README.md b/README.md index 2d9f4ddc8..84d760615 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@
diff --git a/dev/children/react16/public/index.html b/dev/children/react16/public/index.html index 6a553b2f9..42f30cb22 100644 --- a/dev/children/react16/public/index.html +++ b/dev/children/react16/public/index.html @@ -40,7 +40,6 @@ color:#fff; } - diff --git a/dev/children/react16/src/index.css b/dev/children/react16/src/index.css index 337743648..193c4f4b2 100644 --- a/dev/children/react16/src/index.css +++ b/dev/children/react16/src/index.css @@ -56,5 +56,46 @@ code { } .test-back-var { - background-color: rgb(255 255 255 / var(--opacity)); + background-color: rgb(255 255 255 / var(--opacity));;;; +} + +/* @layer规则 */ +@layer theme, layout, utilities; + +.test-layer { + background-color: red; +} + +@layer utilities { + .padding-sm { + padding: 0.5rem; + } + + .padding-lg { + padding: 0.8rem; + } +} + +@layer framework { + @layer layout { + .test-layer { + .test-layer-nest { + color: red; + } + } + } +} + +// 错误1 +.basic-layout-side-menu{.ant-menu-item-group{&:last-child{border-bottom:none!important}}} + +// 错误2 +.chat-message-markdown-wrap{table{width:100%!important;border:1px solid #ccc}table td,table th{border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding:5px 10px}table th{text-align:center;background:#dee8ee}table th:last-child{border-right:none}table td:last-child{border-right:none}table tr:last-child td{border-bottom:none}tr:nth-child(2n){background:#eff3f5}blockquote{display:block;border-left:8px solid #d0e5f2;padding:5px 10px;margin:10px 0;line-height:1.4;font-size:100%;background-color:#f1f1f1}ul,ol{margin:10px 0 10px 20px}} + +.nest-a { + .nest-b { + .nest-c { + color: red; + } + } } diff --git a/dev/children/react16/src/index.js b/dev/children/react16/src/index.js index 84f7f0413..b3c759871 100644 --- a/dev/children/react16/src/index.js +++ b/dev/children/react16/src/index.js @@ -8,20 +8,27 @@ import './ant-custom.css'; // 自定义antd class前缀 import './index.css'; import Router from './router'; import { Modal, notification, ConfigProvider } from 'antd'; -import subMicroApp from '@micro-zoe/micro-app'; +import microApp from '@micro-zoe/micro-app'; // import './flexible'; // import '@alifd/next/dist/next.css'; // import { atan2 } from 'mathjs' // 卡死 +// import './setImmediate.js' // 循环内嵌 -subMicroApp.start({ - tagName: 'micro-app-sub' +microApp.start({ + tagName: 'micro-app-react16' }) ConfigProvider.config({ prefixCls: 'react16', }) +console.log('react16 通过 window.microApp.getData 获取的初始化数据:', window.microApp?.getData()) + +// window.setImmediate(function () { +// alert(11111111) +// }) + // 数据监听 window.microApp?.addDataListener((data) => { console.log('react16 来自基座应用的数据', data) @@ -71,6 +78,7 @@ window.addEventListener('appstate-change', function (e) { // // 注册unmount函数,卸载时会自动执行 // window.unmount = () => { // ReactDOM.unmountComponentAtNode(document.getElementById('root')); +// // window.microApp. // console.log('微应用react16卸载了 -- 默认模式'); // } @@ -124,10 +132,10 @@ window.onunmount = () => { // // console.log(this) // }, false) -// document.onclick = function () { -// console.log(`子应用${window.__MICRO_APP_NAME__}内部的document.onclick绑定`) -// // console.log(this) -// } +document.onclick = function () { + console.log(`子应用${window.__MICRO_APP_NAME__}内部的document.onclick绑定`) + // console.log(this) +} // window.addEventListener('click', function () { // console.log(`子应用${window.__MICRO_APP_NAME__}内部的window.addEventListener绑定`) @@ -373,8 +381,8 @@ if (window.__MICRO_APP_ENVIRONMENT__) { // Vue是系统默认绑定变量 console.assert(window.Vue === undefined, 'window.Vue 应该为false') console.assert(('Vue' in window) === false, 'Vue in window 应该为false') - window.Vue = '自定义Vue' - console.assert(window.Vue === '自定义Vue', 'window.Vue 应该为自定义Vue') + window.Vue = '子应用内部自定义Vue' + console.assert(window.Vue === '子应用内部自定义Vue', 'window.Vue 应该为子应用内部自定义Vue') // ----------------------- scope相关---------------------结束 @@ -393,27 +401,28 @@ if (window.__MICRO_APP_ENVIRONMENT__) { } /* ---------------------- pureCreateElement & removeDomScope --------------------- */ -if (window.__MICRO_APP_ENVIRONMENT__) { - // const unBoundDom1 = window.microApp.pureCreateElement('div') - // unBoundDom1.innerHTML = 'unBoundDom1' - // document.body.appendChild(unBoundDom1) - - // /** - // * !!!! 注意removeDomScope(true)是异步清空的,这里会导致一个问题 - // * 执行removeDomScope(true)后再执行window.mount方法,会导致子应用初始化失败 - // */ - // window.microApp.removeDomScope(true) - // const unBoundDom2 = window.document.createElement('div') - // unBoundDom2.innerHTML = 'unBoundDom2' - // document.body.appendChild(unBoundDom2) - - // const unBoundDom3 = window.rawDocument.createElement('div') - // unBoundDom3.innerHTML = 'unBoundDom3' - // document.body.appendChild(unBoundDom3) - - // const dynamicSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') - // document.body.appendChild(dynamicSvg) -} +// if (window.__MICRO_APP_ENVIRONMENT__) { +// // pureCreateElement创建的元素无法拦截,插入到主应用body中 +// const unBoundDom1 = window.microApp.pureCreateElement('div') +// unBoundDom1.innerHTML = 'unBoundDom1' +// document.body.appendChild(unBoundDom1) + +// // 解除元素绑定,unBoundDom2插入到主应用body中 +// window.microApp.removeDomScope(true) // 解除元素绑定 +// const unBoundDom2 = window.document.createElement('div') +// unBoundDom2.innerHTML = 'unBoundDom2' +// document.body.appendChild(unBoundDom2) +// window.microApp.removeDomScope(false) // 恢复元素绑定 + +// // 元素绑定已经恢复,unBoundDom3插入到子应用 micro-app-body中 +// const unBoundDom3 = window.rawDocument.createElement('div') +// unBoundDom3.innerHTML = 'unBoundDom3' +// document.body.appendChild(unBoundDom3) + +// // 插入子应用 micro-app-body中 +// const dynamicSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') +// document.body.appendChild(dynamicSvg) +// } /* ---------------------- 获取原生window 和 document --------------------- */ @@ -429,15 +438,15 @@ if (window.__MICRO_APP_ENVIRONMENT__) { /* ---------------------- location 相关 --------------------- */ // 获取location信息 if (window.__MICRO_APP_ENVIRONMENT__) { - console.log(`${window.__MICRO_APP_NAME__} location.href`, location.href, window.rawWindow.location.href) - console.log(`${window.__MICRO_APP_NAME__} location.origin`, location.origin, window.rawWindow.location.origin) - console.log(`${window.__MICRO_APP_NAME__} location.host`, location.host, window.rawWindow.location.host) - console.log(`${window.__MICRO_APP_NAME__} location.hostname`, location.hostname, window.rawWindow.location.hostname) - console.log(`${window.__MICRO_APP_NAME__} location.port`, location.port, window.rawWindow.location.port) - console.log(`${window.__MICRO_APP_NAME__} location.protocol`, location.protocol, window.rawWindow.location.protocol) - console.log(`${window.__MICRO_APP_NAME__} location.pathname`, location.pathname, window.rawWindow.location.pathname) - console.log(`${window.__MICRO_APP_NAME__} location.hash`, location.hash, window.rawWindow.location.hash) - console.log(`${window.__MICRO_APP_NAME__} location.search`, location.search, window.rawWindow.location.search) + // console.log(`${window.__MICRO_APP_NAME__} location.href`, location.href, window.rawWindow.location.href) + // console.log(`${window.__MICRO_APP_NAME__} location.origin`, location.origin, window.rawWindow.location.origin) + // console.log(`${window.__MICRO_APP_NAME__} location.host`, location.host, window.rawWindow.location.host) + // console.log(`${window.__MICRO_APP_NAME__} location.hostname`, location.hostname, window.rawWindow.location.hostname) + // console.log(`${window.__MICRO_APP_NAME__} location.port`, location.port, window.rawWindow.location.port) + // console.log(`${window.__MICRO_APP_NAME__} location.protocol`, location.protocol, window.rawWindow.location.protocol) + // console.log(`${window.__MICRO_APP_NAME__} location.pathname`, location.pathname, window.rawWindow.location.pathname) + // console.log(`${window.__MICRO_APP_NAME__} location.hash`, location.hash, window.rawWindow.location.hash) + // console.log(`${window.__MICRO_APP_NAME__} location.search`, location.search, window.rawWindow.location.search) // 依次放开每个注释来,尽可能覆盖所有场景 setTimeout(() => { @@ -560,3 +569,49 @@ console.log('micro-app容器元素document.microAppElement', document.microAppEl // new Promise((resolve, reject) => { // throw 'promise 逃逸的错误' // }) + +/* ---------------------- 测试iframe document.body/head 获取元素 --------------------- */ +// if (window.__MICRO_APP_ENVIRONMENT__) { +// setTimeout(() => { +// // 场景1 querySelector: 不设置appName导致查询元素无法被拦截到子应用内部 +// console.log(`document.body.querySelector('#root') ==>`, document.body.querySelector('#root')) +// // console.log(`获取子应用root元素 -- document.querySelector`, document.querySelector('body').querySelector('#root')) +// console.log(`document.body.querySelector('script') ==>`, document.body.querySelector('script')) +// console.log(`document.head.querySelector('script') ==>`, document.head.querySelector('script')) + +// // 场景2 querySelectorAll: 不设置appName导致查询元素无法被拦截到子应用内部 +// console.log(`document.body.querySelectorAll('#root') ==>`, document.body.querySelectorAll('#root')) +// // console.log(`document.querySelector('body').querySelectorAll('#root') ==>`, document.querySelector('body').querySelectorAll('#root')) +// console.log(`document.body.querySelectorAll('script') ==>`, document.body.querySelectorAll('script')) +// console.log(`document.head.querySelectorAll('script') ==>`, document.head.querySelectorAll('script')) + +// console.log(`document.querySelector('script') ==>`, document.querySelector('script')) +// console.log(`document.querySelectorAll('script') ==>`, document.querySelectorAll('script')) + +// console.log(`document.getElementsByTagName('head')[0].querySelector('script') ==>`, document.getElementsByTagName('head')[0].querySelector('script')) +// console.log(`document.querySelector('body').querySelectorAll('script') ==>`, document.querySelector('body').querySelectorAll('script')) + + +// // 场景2:设置appName导致基座元素插入子应用 +// // window.microApp.removeDomScope(true) +// window.rawWindow.insertNodeFromBaseApp() // 调用主应用方法插入元素 +// // window.microApp.removeDomScope(false) +// }, 1000); +// } + +/* ---------------------- 测试 DocumentFragment --------------------- */ +// if (window.__MICRO_APP_ENVIRONMENT__) { +// setTimeout(() => { +// // window.microApp.removeDomScope(true) +// const a = document.createDocumentFragment() +// const b = document.createElement('script') +// // const b = window.microApp.pureCreateElement('script') +// b.src = 'http://127.0.0.1:8080/js/test.js' +// // a.appendChild(b) +// // a.append(b) +// a.prepend(b) +// // Element.prototype.appendChild.call(a, b) +// document.body.prepend(a) +// // window.microApp.removeDomScope(false) +// }, 1000); +// } diff --git a/dev/children/react16/src/pages/nest/nest.js b/dev/children/react16/src/pages/nest/nest.js index 063e7babd..4be8d71b9 100644 --- a/dev/children/react16/src/pages/nest/nest.js +++ b/dev/children/react16/src/pages/nest/nest.js @@ -27,10 +27,11 @@ function Vue2 () { { showLoading &&)?\[!(\w*)((?:\|[\w*:[\s\w\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF-]*)*?)\]([\s\S]*?)(?:<\/p>)?<\s*\/\s*blockquote>/g,(function(e,a,o,n){!r[a.toLowerCase()]&&r.typeMappings[a.toLowerCase()]&&(a=r.typeMappings[a.toLowerCase()]);var c=r[a.toLowerCase()];if(!c)return e;var d=i(o,"style",r.style),s=i(o,"iconVisibility","visible",(function(t){return"hidden"!==t})),g=i(o,"labelVisibility","visible",(function(t){return"hidden"!==t})),m=i(o,"label",c.label),u=i(o,"icon",c.icon),f=i(o,"className",c.className);if("object"===t(m)){var p=Object.keys(m).filter((function(t){return l.route.path.indexOf(t)>-1}));p&&p.length>0?m=m[p[0]]:(g=!1,s=!1)}var w=''),h='
'.concat(s?w:"").concat(g?m:"","
");return'").concat(n,"
\n"+e.content+"
\n\n"}),t.classList.add("show"),a.classList.add("show"),t.innerHTML=r||''+c+"
",s.hideOtherSidebarContent&&(i&&i.classList.add("hide"),n&&n.classList.add("hide"))}function l(e){s=e}function h(e,n){var t,a,i=n.router.parse().query.s;l(e),Docsify.dom.style("\n.sidebar {\n padding-top: 0;\n}\n\n.search {\n margin-bottom: 20px;\n padding: 6px;\n border-bottom: 1px solid #eee;\n}\n\n.search .input-wrap {\n display: flex;\n align-items: center;\n}\n\n.search .results-panel {\n display: none;\n}\n\n.search .results-panel.show {\n display: block;\n}\n\n.search input {\n outline: none;\n border: none;\n width: 100%;\n padding: 0.6em 7px;\n font-size: inherit;\n border: 1px solid transparent;\n}\n\n.search input:focus {\n box-shadow: 0 0 5px var(--theme-color, #42b983);\n border: 1px solid var(--theme-color, #42b983);\n}\n\n.search input::-webkit-search-decoration,\n.search input::-webkit-search-cancel-button,\n.search input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.search input::-ms-clear {\n display: none;\n height: 0;\n width: 0;\n}\n\n.search .clear-button {\n cursor: pointer;\n width: 36px;\n text-align: right;\n display: none;\n}\n\n.search .clear-button.show {\n display: block;\n}\n\n.search .clear-button svg {\n transform: scale(.5);\n}\n\n.search h2 {\n font-size: 17px;\n margin: 10px 0;\n}\n\n.search a {\n text-decoration: none;\n color: inherit;\n}\n\n.search .matching-post {\n border-bottom: 1px solid #eee;\n}\n\n.search .matching-post:last-child {\n border-bottom: 0;\n}\n\n.search p {\n font-size: 14px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n.search p.empty {\n text-align: center;\n}\n\n.app-name.hide, .sidebar-nav.hide {\n display: none;\n}"),function(e){void 0===e&&(e="");var n=Docsify.dom.create("div",''+(i?e:gn(e,!0))+"
\n":""+(i?e:gn(e,!0))+"
\n"},e.prototype.blockquote=function(e){return"\n"+e+"\n"},e.prototype.html=function(e){return e},e.prototype.heading=function(e,n,i,o){return this.options.headerIds?"
"+e+"
\n"},e.prototype.table=function(e,n){return""+e+"
"},e.prototype.br=function(){return this.options.xhtml?""+wn(e.message+"",!0)+"";throw e}}xn.options=xn.setOptions=function(e){return bn(xn.defaults,e),yn(xn.defaults),xn},xn.getDefaults=Me,xn.defaults=we,xn.use=function(a){var n,e=bn({},a);if(a.renderer){var i,r=xn.defaults.renderer||new sn;for(i in a.renderer)!function(o){var t=r[o];r[o]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var i=a.renderer[o].apply(r,e);return i=!1===i?t.apply(r,e):i}}(i);e.renderer=r}if(a.tokenizer){var t,c=xn.defaults.tokenizer||new nn;for(t in a.tokenizer)!function(){var o=c[t];c[t]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var i=a.tokenizer[t].apply(c,e);return i=!1===i?o.apply(c,e):i}}();e.tokenizer=c}a.walkTokens&&(n=xn.defaults.walkTokens,e.walkTokens=function(e){a.walkTokens(e),n&&n(e)}),xn.setOptions(e)},xn.walkTokens=function(e,n){for(var i=0,o=e;i
"+wn(e.message+"",!0)+"";throw e}},xn.Parser=mn,xn.parser=mn.parse,xn.Renderer=sn,xn.TextRenderer=ln,xn.Lexer=fn,xn.lexer=fn.lex,xn.Tokenizer=nn,xn.Slugger=vn;var Sn=xn.parse=xn;function An(e,i){if(void 0===i&&(i=' '),!e||!e.length)return"";var o="";return e.forEach(function(e){var n=e.title.replace(/(<([^>]+)>)/g,"");o+='
'+n.slice(5).trim()+"
"}function zn(e,o){var t=[],a={};return e.forEach(function(e){var n=e.level||1,i=n-1;o'+Pn.highlight(e.replace(/@DOCSIFY_QM@/g,"`"),i,n)+"
"},t.link=(i=(n={renderer:e,router:a,linkTarget:n,linkRel:i,compilerClass:g}).renderer,c=n.router,u=n.linkTarget,n.linkRel,f=n.compilerClass,i.link=function(e,n,i){var o=[],t=Ln(n=void 0===n?"":n),a=t.str,t=t.config;return u=t.target||u,r="_blank"===u?f.config.externalLinkRel||"noopener":"",n=a,R(e)||f._matchNotCompileLink(e)||t.ignore?(R(e)||"./"!==e.slice(0,2)||(e=document.URL.replace(/\/(?!.*\/).*/,"/").replace("#/./","")+e),o.push(0===e.indexOf("mailto:")?"":'target="'+u+'"'),o.push(0!==e.indexOf("mailto:")&&""!==r?' rel="'+r+'"':"")):(e===f.config.homepage&&(e="README"),e=c.toURL(e,null,c.getCurrentPath())),t.disabled&&(o.push("disabled"),e="javascript:void(0)"),t.class&&o.push('class="'+t.class+'"'),t.id&&o.push('id="'+t.id+'"'),n&&o.push('title="'+n+'"'),'"+i+""}),t.paragraph={renderer:e}.renderer.paragraph=function(e){e=/^!>/.test(e)?$n("tip",e):/^\?>/.test(e)?$n("warn",e):""+e+"
";return e},t.image=(o=(i={renderer:e,contentBase:o,router:a}).renderer,p=i.contentBase,d=i.router,o.image=function(e,n,i){var o=e,t=[],a=Ln(n),r=a.str,a=a.config;return n=r,a["no-zoom"]&&t.push("data-no-zoom"),n&&t.push('title="'+n+'"'),a.size&&(n=(r=a.size.split("x"))[0],(r=r[1])?t.push('width="'+n+'" height="'+r+'"'):t.push('width="'+n+'"')),a.class&&t.push('class="'+a.class+'"'),a.id&&t.push('id="'+a.id+'"'),R(e)||(o=q(p,C(d.getCurrentPath()),e)),0'+(i?e:gn(e,!0))+"
\n":""+(i?e:gn(e,!0))+"
\n"},e.prototype.blockquote=function(e){return"\n"+e+"\n"},e.prototype.html=function(e){return e},e.prototype.heading=function(e,n,i,o){return this.options.headerIds?"
"+e+"
\n"},e.prototype.table=function(e,n){return""+e+"
"},e.prototype.br=function(){return this.options.xhtml?""+wn(e.message+"",!0)+"";throw e}}xn.options=xn.setOptions=function(e){return bn(xn.defaults,e),yn(xn.defaults),xn},xn.getDefaults=Me,xn.defaults=we,xn.use=function(a){var n,e=bn({},a);if(a.renderer){var i,r=xn.defaults.renderer||new sn;for(i in a.renderer)!function(o){var t=r[o];r[o]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var i=a.renderer[o].apply(r,e);return i=!1===i?t.apply(r,e):i}}(i);e.renderer=r}if(a.tokenizer){var t,c=xn.defaults.tokenizer||new nn;for(t in a.tokenizer)!function(){var o=c[t];c[t]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var i=a.tokenizer[t].apply(c,e);return i=!1===i?o.apply(c,e):i}}();e.tokenizer=c}a.walkTokens&&(n=xn.defaults.walkTokens,e.walkTokens=function(e){a.walkTokens(e),n&&n(e)}),xn.setOptions(e)},xn.walkTokens=function(e,n){for(var i=0,o=e;i
"+wn(e.message+"",!0)+"";throw e}},xn.Parser=mn,xn.parser=mn.parse,xn.Renderer=sn,xn.TextRenderer=ln,xn.Lexer=fn,xn.lexer=fn.lex,xn.Tokenizer=nn,xn.Slugger=vn;var Sn=xn.parse=xn;function An(e,i){if(void 0===i&&(i=' '),!e||!e.length)return"";var o="";return e.forEach(function(e){var n=e.title.replace(/(<([^>]+)>)/g,"");o+='
'+n.slice(5).trim()+"
"}function zn(e,o){var t=[],a={};return e.forEach(function(e){var n=e.level||1,i=n-1;o'+Pn.highlight(e.replace(/@DOCSIFY_QM@/g,"`"),i,n)+"
"},t.link=(i=(n={renderer:e,router:a,linkTarget:n,linkRel:i,compilerClass:g}).renderer,c=n.router,u=n.linkTarget,n.linkRel,f=n.compilerClass,i.link=function(e,n,i){var o=[],t=Ln(n=void 0===n?"":n),a=t.str,t=t.config;return u=t.target||u,r="_blank"===u?f.config.externalLinkRel||"noopener":"",n=a,R(e)||f._matchNotCompileLink(e)||t.ignore?(R(e)||"./"!==e.slice(0,2)||(e=document.URL.replace(/\/(?!.*\/).*/,"/").replace("#/./","")+e),o.push(0===e.indexOf("mailto:")?"":'target="'+u+'"'),o.push(0!==e.indexOf("mailto:")&&""!==r?' rel="'+r+'"':"")):(e===f.config.homepage&&(e="README"),e=c.toURL(e,null,c.getCurrentPath())),t.disabled&&(o.push("disabled"),e="javascript:void(0)"),t.class&&o.push('class="'+t.class+'"'),t.id&&o.push('id="'+t.id+'"'),n&&o.push('title="'+n+'"'),'"+i+""}),t.paragraph={renderer:e}.renderer.paragraph=function(e){e=/^!>/.test(e)?$n("tip",e):/^\?>/.test(e)?$n("warn",e):""+e+"
";return e},t.image=(o=(i={renderer:e,contentBase:o,router:a}).renderer,p=i.contentBase,d=i.router,o.image=function(e,n,i){var o=e,t=[],a=Ln(n),r=a.str,a=a.config;return n=r,a["no-zoom"]&&t.push("data-no-zoom"),n&&t.push('title="'+n+'"'),a.size&&(n=(r=a.size.split("x"))[0],(r=r[1])?t.push('width="'+n+'" height="'+r+'"'):t.push('width="'+n+'"')),a.class&&t.push('class="'+a.class+'"'),a.id&&t.push('id="'+a.id+'"'),R(e)||(o=q(p,C(d.getCurrentPath()),e)),0" + NO_DATA_TEXT + "
"); - if (options.hideOtherSidebarContent) { - $sidebarNav.classList.add('hide'); - $appName.classList.add('hide'); - } - } - - function bindEvents() { - var $search = Docsify.dom.find('div.search'); - var $input = Docsify.dom.find($search, 'input'); - var $inputWrap = Docsify.dom.find($search, '.input-wrap'); - - var timeId; - - /** - Prevent to Fold sidebar. - - When searching on the mobile end, - the sidebar is collapsed when you click the INPUT box, - making it impossible to search. - */ - Docsify.dom.on( - $search, - 'click', - function (e) { return ['A', 'H2', 'P', 'EM'].indexOf(e.target.tagName) === -1 && - e.stopPropagation(); } - ); - Docsify.dom.on($input, 'input', function (e) { - clearTimeout(timeId); - timeId = setTimeout(function (_) { return doSearch(e.target.value.trim()); }, 100); - }); - Docsify.dom.on($inputWrap, 'click', function (e) { - // Click input outside - if (e.target.tagName !== 'INPUT') { - $input.value = ''; - doSearch(); - } - }); - } - - function updatePlaceholder(text, path) { - var $input = Docsify.dom.getNode('.search input[type="search"]'); - - if (!$input) { - return; - } - - if (typeof text === 'string') { - $input.placeholder = text; - } else { - var match = Object.keys(text).filter(function (key) { return path.indexOf(key) > -1; })[0]; - $input.placeholder = text[match]; - } - } - - function updateNoData(text, path) { - if (typeof text === 'string') { - NO_DATA_TEXT = text; - } else { - var match = Object.keys(text).filter(function (key) { return path.indexOf(key) > -1; })[0]; - NO_DATA_TEXT = text[match]; - } - } - - function updateOptions(opts) { - options = opts; - } - - function init$1(opts, vm) { - var keywords = vm.router.parse().query.s; - - updateOptions(opts); - style(); - tpl(keywords); - bindEvents(); - keywords && setTimeout(function (_) { return doSearch(keywords); }, 500); - } - - function update(opts, vm) { - updateOptions(opts); - updatePlaceholder(opts.placeholder, vm.route.path); - updateNoData(opts.noData, vm.route.path); - } - - /* eslint-disable no-unused-vars */ - - var CONFIG = { - placeholder: 'Type to search', - noData: 'No Results!', - paths: 'auto', - depth: 2, - maxAge: 86400000, // 1 day - hideOtherSidebarContent: false, - namespace: undefined, - pathNamespaces: undefined, - }; - - var install = function(hook, vm) { - var util = Docsify.util; - var opts = vm.config.search || CONFIG; - - if (Array.isArray(opts)) { - CONFIG.paths = opts; - } else if (typeof opts === 'object') { - CONFIG.paths = Array.isArray(opts.paths) ? opts.paths : 'auto'; - CONFIG.maxAge = util.isPrimitive(opts.maxAge) ? opts.maxAge : CONFIG.maxAge; - CONFIG.placeholder = opts.placeholder || CONFIG.placeholder; - CONFIG.noData = opts.noData || CONFIG.noData; - CONFIG.depth = opts.depth || CONFIG.depth; - CONFIG.hideOtherSidebarContent = - opts.hideOtherSidebarContent || CONFIG.hideOtherSidebarContent; - CONFIG.namespace = opts.namespace || CONFIG.namespace; - CONFIG.pathNamespaces = opts.pathNamespaces || CONFIG.pathNamespaces; - } - - var isAuto = CONFIG.paths === 'auto'; - - hook.mounted(function (_) { - init$1(CONFIG, vm); - !isAuto && init(CONFIG, vm); - }); - hook.doneEach(function (_) { - update(CONFIG, vm); - isAuto && init(CONFIG, vm); - }); - }; - - $docsify.plugins = [].concat(install, $docsify.plugins); - -}()); diff --git a/docs/static/zoom-image.js b/docs/static/zoom-image.js deleted file mode 100644 index 3166f92e9..000000000 --- a/docs/static/zoom-image.js +++ /dev/null @@ -1,659 +0,0 @@ -(function () { - /*! medium-zoom 1.0.6 | MIT License | https://github.com/francoischalifour/medium-zoom */ - var _extends = Object.assign || function (target) { - var arguments$1 = arguments; - - for (var i = 1; i < arguments.length; i++) { - var source = arguments$1[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var isSupported = function isSupported(node) { - return node.tagName === 'IMG'; - }; - - /* eslint-disable-next-line no-prototype-builtins */ - var isNodeList = function isNodeList(selector) { - return NodeList.prototype.isPrototypeOf(selector); - }; - - var isNode = function isNode(selector) { - return selector && selector.nodeType === 1; - }; - - var isSvg = function isSvg(image) { - var source = image.currentSrc || image.src; - return source.substr(-4).toLowerCase() === '.svg'; - }; - - var getImagesFromSelector = function getImagesFromSelector(selector) { - try { - if (Array.isArray(selector)) { - return selector.filter(isSupported); - } - - if (isNodeList(selector)) { - // Do not use spread operator or Array.from() for IE support - return [].slice.call(selector).filter(isSupported); - } - - if (isNode(selector)) { - return [selector].filter(isSupported); - } - - if (typeof selector === 'string') { - // Do not use spread operator or Array.from() for IE support - return [].slice.call(document.querySelectorAll(selector)).filter(isSupported); - } - - return []; - } catch (err) { - throw new TypeError('The provided selector is invalid.\n' + 'Expects a CSS selector, a Node element, a NodeList or an array.\n' + 'See: https://github.com/francoischalifour/medium-zoom'); - } - }; - - var createOverlay = function createOverlay(background) { - var overlay = document.createElement('div'); - overlay.classList.add('medium-zoom-overlay'); - overlay.style.background = background; - - return overlay; - }; - - var cloneTarget = function cloneTarget(template) { - var _template$getBounding = template.getBoundingClientRect(), - top = _template$getBounding.top, - left = _template$getBounding.left, - width = _template$getBounding.width, - height = _template$getBounding.height; - - var clone = template.cloneNode(); - var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; - var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; - - clone.removeAttribute('id'); - clone.style.position = 'absolute'; - clone.style.top = top + scrollTop + 'px'; - clone.style.left = left + scrollLeft + 'px'; - clone.style.width = width + 'px'; - clone.style.height = height + 'px'; - clone.style.transform = ''; - - return clone; - }; - - var createCustomEvent = function createCustomEvent(type, params) { - var eventParams = _extends({ - bubbles: false, - cancelable: false, - detail: undefined - }, params); - - if (typeof window.CustomEvent === 'function') { - return new CustomEvent(type, eventParams); - } - - var customEvent = document.createEvent('CustomEvent'); - customEvent.initCustomEvent(type, eventParams.bubbles, eventParams.cancelable, eventParams.detail); - - return customEvent; - }; - - var mediumZoom = function mediumZoom(selector) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - /** - * Ensure the compatibility with IE11 if no Promise polyfill are used. - */ - var Promise = window.Promise || function Promise(fn) { - function noop() {} - fn(noop, noop); - }; - - var _handleClick = function _handleClick(event) { - var target = event.target; - - - if (target === overlay) { - close(); - return; - } - - if (images.indexOf(target) === -1) { - return; - } - - toggle({ target: target }); - }; - - var _handleScroll = function _handleScroll() { - if (isAnimating || !active.original) { - return; - } - - var currentScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; - - if (Math.abs(scrollTop - currentScroll) > zoomOptions.scrollOffset) { - setTimeout(close, 150); - } - }; - - var _handleKeyUp = function _handleKeyUp(event) { - var key = event.key || event.keyCode; - - // Close if escape key is pressed - if (key === 'Escape' || key === 'Esc' || key === 27) { - close(); - } - }; - - var update = function update() { - var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; - - var newOptions = options; - - if (options.background) { - overlay.style.background = options.background; - } - - if (options.container && options.container instanceof Object) { - newOptions.container = _extends({}, zoomOptions.container, options.container); - } - - if (options.template) { - var template = isNode(options.template) ? options.template : document.querySelector(options.template); - - newOptions.template = template; - } - - zoomOptions = _extends({}, zoomOptions, newOptions); - - images.forEach(function (image) { - image.dispatchEvent(createCustomEvent('medium-zoom:update', { - detail: { zoom: zoom } - })); - }); - - return zoom; - }; - - var clone = function clone() { - var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; - return mediumZoom(_extends({}, zoomOptions, options)); - }; - - var attach = function attach() { - var arguments$1 = arguments; - - for (var _len = arguments.length, selectors = Array(_len), _key = 0; _key < _len; _key++) { - selectors[_key] = arguments$1[_key]; - } - - var newImages = selectors.reduce(function (imagesAccumulator, currentSelector) { - return [].concat(imagesAccumulator, getImagesFromSelector(currentSelector)); - }, []); - - newImages.filter(function (newImage) { - return images.indexOf(newImage) === -1; - }).forEach(function (newImage) { - images.push(newImage); - newImage.classList.add('medium-zoom-image'); - }); - - eventListeners.forEach(function (_ref) { - var type = _ref.type, - listener = _ref.listener, - options = _ref.options; - - newImages.forEach(function (image) { - image.addEventListener(type, listener, options); - }); - }); - - return zoom; - }; - - var detach = function detach() { - var arguments$1 = arguments; - - for (var _len2 = arguments.length, selectors = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - selectors[_key2] = arguments$1[_key2]; - } - - if (active.zoomed) { - close(); - } - - var imagesToDetach = selectors.length > 0 ? selectors.reduce(function (imagesAccumulator, currentSelector) { - return [].concat(imagesAccumulator, getImagesFromSelector(currentSelector)); - }, []) : images; - - imagesToDetach.forEach(function (image) { - image.classList.remove('medium-zoom-image'); - image.dispatchEvent(createCustomEvent('medium-zoom:detach', { - detail: { zoom: zoom } - })); - }); - - images = images.filter(function (image) { - return imagesToDetach.indexOf(image) === -1; - }); - - return zoom; - }; - - var on = function on(type, listener) { - var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - - images.forEach(function (image) { - image.addEventListener('medium-zoom:' + type, listener, options); - }); - - eventListeners.push({ type: 'medium-zoom:' + type, listener: listener, options: options }); - - return zoom; - }; - - var off = function off(type, listener) { - var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - - images.forEach(function (image) { - image.removeEventListener('medium-zoom:' + type, listener, options); - }); - - eventListeners = eventListeners.filter(function (eventListener) { - return !(eventListener.type === 'medium-zoom:' + type && eventListener.listener.toString() === listener.toString()); - }); - - return zoom; - }; - - var open = function open() { - var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - target = _ref2.target; - - var _animate = function _animate() { - var container = { - width: document.documentElement.clientWidth, - height: document.documentElement.clientHeight, - left: 0, - top: 0, - right: 0, - bottom: 0 - }; - var viewportWidth = void 0; - var viewportHeight = void 0; - - if (zoomOptions.container) { - if (zoomOptions.container instanceof Object) { - // The container is given as an object with properties like width, height, left, top - container = _extends({}, container, zoomOptions.container); - - // We need to adjust custom options like container.right or container.bottom - viewportWidth = container.width - container.left - container.right - zoomOptions.margin * 2; - viewportHeight = container.height - container.top - container.bottom - zoomOptions.margin * 2; - } else { - // The container is given as an element - var zoomContainer = isNode(zoomOptions.container) ? zoomOptions.container : document.querySelector(zoomOptions.container); - - var _zoomContainer$getBou = zoomContainer.getBoundingClientRect(), - _width = _zoomContainer$getBou.width, - _height = _zoomContainer$getBou.height, - _left = _zoomContainer$getBou.left, - _top = _zoomContainer$getBou.top; - - container = _extends({}, container, { - width: _width, - height: _height, - left: _left, - top: _top - }); - } - } - - viewportWidth = viewportWidth || container.width - zoomOptions.margin * 2; - viewportHeight = viewportHeight || container.height - zoomOptions.margin * 2; - - var zoomTarget = active.zoomedHd || active.original; - var naturalWidth = isSvg(zoomTarget) ? viewportWidth : zoomTarget.naturalWidth || viewportWidth; - var naturalHeight = isSvg(zoomTarget) ? viewportHeight : zoomTarget.naturalHeight || viewportHeight; - - var _zoomTarget$getBoundi = zoomTarget.getBoundingClientRect(), - top = _zoomTarget$getBoundi.top, - left = _zoomTarget$getBoundi.left, - width = _zoomTarget$getBoundi.width, - height = _zoomTarget$getBoundi.height; - - var scaleX = Math.min(naturalWidth, viewportWidth) / width; - var scaleY = Math.min(naturalHeight, viewportHeight) / height; - var scale = Math.min(scaleX, scaleY); - var translateX = (-left + (viewportWidth - width) / 2 + zoomOptions.margin + container.left) / scale; - var translateY = (-top + (viewportHeight - height) / 2 + zoomOptions.margin + container.top) / scale; - var transform = 'scale(' + scale + ') translate3d(' + translateX + 'px, ' + translateY + 'px, 0)'; - - active.zoomed.style.transform = transform; - - if (active.zoomedHd) { - active.zoomedHd.style.transform = transform; - } - }; - - return new Promise(function (resolve) { - if (target && images.indexOf(target) === -1) { - resolve(zoom); - return; - } - - var _handleOpenEnd = function _handleOpenEnd() { - isAnimating = false; - active.zoomed.removeEventListener('transitionend', _handleOpenEnd); - active.original.dispatchEvent(createCustomEvent('medium-zoom:opened', { - detail: { zoom: zoom } - })); - - resolve(zoom); - }; - - if (active.zoomed) { - resolve(zoom); - return; - } - - if (target) { - // The zoom was triggered manually via a click - active.original = target; - } else if (images.length > 0) { - var _images = images; - active.original = _images[0]; - } else { - resolve(zoom); - return; - } - - active.original.dispatchEvent(createCustomEvent('medium-zoom:open', { - detail: { zoom: zoom } - })); - - scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; - isAnimating = true; - active.zoomed = cloneTarget(active.original); - - document.body.appendChild(overlay); - - if (zoomOptions.template) { - var template = isNode(zoomOptions.template) ? zoomOptions.template : document.querySelector(zoomOptions.template); - active.template = document.createElement('div'); - active.template.appendChild(template.content.cloneNode(true)); - - document.body.appendChild(active.template); - } - - document.body.appendChild(active.zoomed); - - window.requestAnimationFrame(function () { - document.body.classList.add('medium-zoom--opened'); - }); - - active.original.classList.add('medium-zoom-image--hidden'); - active.zoomed.classList.add('medium-zoom-image--opened'); - - active.zoomed.addEventListener('click', close); - active.zoomed.addEventListener('transitionend', _handleOpenEnd); - - if (active.original.getAttribute('data-zoom-src')) { - active.zoomedHd = active.zoomed.cloneNode(); - - // Reset the `scrset` property or the HD image won't load. - active.zoomedHd.removeAttribute('srcset'); - active.zoomedHd.removeAttribute('sizes'); - - active.zoomedHd.src = active.zoomed.getAttribute('data-zoom-src'); - - active.zoomedHd.onerror = function () { - clearInterval(getZoomTargetSize); - console.warn('Unable to reach the zoom image target ' + active.zoomedHd.src); - active.zoomedHd = null; - _animate(); - }; - - // We need to access the natural size of the full HD - // target as fast as possible to compute the animation. - var getZoomTargetSize = setInterval(function () { - if ( active.zoomedHd.complete) { - clearInterval(getZoomTargetSize); - active.zoomedHd.classList.add('medium-zoom-image--opened'); - active.zoomedHd.addEventListener('click', close); - document.body.appendChild(active.zoomedHd); - _animate(); - } - }, 10); - } else if (active.original.hasAttribute('srcset')) { - // If an image has a `srcset` attribuet, we don't know the dimensions of the - // zoomed (HD) image (like when `data-zoom-src` is specified). - // Therefore the approach is quite similar. - active.zoomedHd = active.zoomed.cloneNode(); - - // Resetting the sizes attribute tells the browser to load the - // image best fitting the current viewport size, respecting the `srcset`. - active.zoomedHd.removeAttribute('sizes'); - - // In Firefox, the `loading` attribute needs to be set to `eager` (default - // value) for the load event to be fired. - active.zoomedHd.removeAttribute('loading'); - - // Wait for the load event of the hd image. This will fire if the image - // is already cached. - var loadEventListener = active.zoomedHd.addEventListener('load', function () { - active.zoomedHd.removeEventListener('load', loadEventListener); - active.zoomedHd.classList.add('medium-zoom-image--opened'); - active.zoomedHd.addEventListener('click', close); - document.body.appendChild(active.zoomedHd); - _animate(); - }); - } else { - _animate(); - } - }); - }; - - var close = function close() { - return new Promise(function (resolve) { - if (isAnimating || !active.original) { - resolve(zoom); - return; - } - - var _handleCloseEnd = function _handleCloseEnd() { - active.original.classList.remove('medium-zoom-image--hidden'); - document.body.removeChild(active.zoomed); - if (active.zoomedHd) { - document.body.removeChild(active.zoomedHd); - } - document.body.removeChild(overlay); - active.zoomed.classList.remove('medium-zoom-image--opened'); - if (active.template) { - document.body.removeChild(active.template); - } - - isAnimating = false; - active.zoomed.removeEventListener('transitionend', _handleCloseEnd); - - active.original.dispatchEvent(createCustomEvent('medium-zoom:closed', { - detail: { zoom: zoom } - })); - - active.original = null; - active.zoomed = null; - active.zoomedHd = null; - active.template = null; - - resolve(zoom); - }; - - isAnimating = true; - document.body.classList.remove('medium-zoom--opened'); - active.zoomed.style.transform = ''; - - if (active.zoomedHd) { - active.zoomedHd.style.transform = ''; - } - - // Fade out the template so it's not too abrupt - if (active.template) { - active.template.style.transition = 'opacity 150ms'; - active.template.style.opacity = 0; - } - - active.original.dispatchEvent(createCustomEvent('medium-zoom:close', { - detail: { zoom: zoom } - })); - - active.zoomed.addEventListener('transitionend', _handleCloseEnd); - }); - }; - - var toggle = function toggle() { - var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - target = _ref3.target; - - if (active.original) { - return close(); - } - - return open({ target: target }); - }; - - var getOptions = function getOptions() { - return zoomOptions; - }; - - var getImages = function getImages() { - return images; - }; - - var getZoomedImage = function getZoomedImage() { - return active.original; - }; - - var images = []; - var eventListeners = []; - var isAnimating = false; - var scrollTop = 0; - var zoomOptions = options; - var active = { - original: null, - zoomed: null, - zoomedHd: null, - template: null - - // If the selector is omitted, it's replaced by the options - };if (Object.prototype.toString.call(selector) === '[object Object]') { - zoomOptions = selector; - } else if (selector || typeof selector === 'string' // to process empty string as a selector - ) { - attach(selector); - } - - // Apply the default option values - zoomOptions = _extends({ - margin: 0, - background: '#fff', - scrollOffset: 40, - container: null, - template: null - }, zoomOptions); - - var overlay = createOverlay(zoomOptions.background); - - document.addEventListener('click', _handleClick); - document.addEventListener('keyup', _handleKeyUp); - document.addEventListener('scroll', _handleScroll); - window.addEventListener('resize', close); - - var zoom = { - open: open, - close: close, - toggle: toggle, - update: update, - clone: clone, - attach: attach, - detach: detach, - on: on, - off: off, - getOptions: getOptions, - getImages: getImages, - getZoomedImage: getZoomedImage - }; - - return zoom; - }; - - function styleInject(css, ref) { - if ( ref === void 0 ) { ref = {}; } - var insertAt = ref.insertAt; - - if (!css || typeof document === 'undefined') { return; } - - var head = document.head || document.getElementsByTagName('head')[0]; - var style = document.createElement('style'); - style.type = 'text/css'; - - if (insertAt === 'top') { - if (head.firstChild) { - head.insertBefore(style, head.firstChild); - } else { - head.appendChild(style); - } - } else { - head.appendChild(style); - } - - if (style.styleSheet) { - style.styleSheet.cssText = css; - } else { - style.appendChild(document.createTextNode(css)); - } - } - - var css = ".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}"; - styleInject(css); - - /* eslint-disable no-unused-vars */ - - var matchesSelector = - Element.prototype.matches || - Element.prototype.webkitMatchesSelector || - Element.prototype.msMatchesSelector; - - function install(hook) { - var zoom; - - hook.doneEach(function (_) { - var elms = Array.apply( - null, - document.querySelectorAll( - '.markdown-section img:not(.emoji):not([data-no-zoom])' - ) - ); - - elms = elms.filter(function (elm) { return matchesSelector.call(elm, 'a img') === false; }); - - if (zoom) { - zoom.detach(); - } - - zoom = mediumZoom(elms); - }); - } - - $docsify.plugins = [].concat(install, $docsify.plugins); - -}()); diff --git a/docs/zh-cn/api.md b/docs/zh-cn/API/base-app.md similarity index 80% rename from docs/zh-cn/api.md rename to docs/zh-cn/API/base-app.md index ed1789470..fe27686ff 100644 --- a/docs/zh-cn/api.md +++ b/docs/zh-cn/API/base-app.md @@ -1,6 +1,3 @@ - - -# ** 主应用API ** ## start **描述:**micro-app注册函数,全局执行一次 @@ -230,11 +227,14 @@ function removeDomScope(force?: boolean): void ```js import { removeDomScope } from '@micro-zoe/micro-app' -// 解除元素绑定 -removeDomScope() - -// 解除元素绑定,并且一定时间内阻止再次绑定(一个微任务Promise时间) -removeDomScope(true) +removeDomScope(true) // 解除元素绑定 +/** + * 中间区域的元素操作都指向主应用 + * 例如: + * document.body.appendChild(document.createElement('div')) + * div元素将插入到主应用body中 + */ +removeDomScope(false) // 恢复元素绑定 ``` @@ -384,7 +384,7 @@ interface RenderAppOptions { 'keep-alive'?: boolean, // 开启keep-alive模式,可选 destroy?: boolean, // 卸载时强制删除缓存资源,可选 fiber?: boolean, // 开启fiber模式,可选 - baseroute?: string, // 设置子应用的基础路由,可选 + baseroute?: string, // 设置子应用路由系统的基础路径,可选 ssr?: boolean, // 开启ssr模式,可选 // shadowDOM?: boolean, // 开启shadowDOM,可选 data?: Object, // 传递给子应用的数据,可选 @@ -612,196 +612,3 @@ import microApp from '@micro-zoe/micro-app' // setGlobalData只接受对象作为参数 microApp.setGlobalData({type: '全局数据'}) ``` - - - - -# ** 子应用API ** - -## pureCreateElement -**描述:**创建无绑定的纯净元素,该元素可以逃离元素隔离的边界,不受子应用沙箱的控制 - -**版本限制:** 0.8.2及以上版本 - -**使用方式:** -```js -const pureDiv = window.microApp.pureCreateElement('div') - -document.body.appendChild(pureDiv) -``` - - -## removeDomScope -**描述:**解除元素绑定,通常用于受子应用元素绑定影响,导致主应用元素错误绑定到子应用的情况 - -**版本限制:** 0.8.2及以上版本 - -**介绍:** -```js -/** - * @param force 解除元素绑定,并且一定时间内(一个微任务Promise时间)阻止再次绑定。 - */ -function removeDomScope(force?: boolean): void -``` - -**使用方式:** -```js -// 解除元素绑定 -window.microApp.removeDomScope() - -// 解除元素绑定,并且一定时间内阻止再次绑定(一个微任务Promise时间) -window.microApp.removeDomScope(true) -``` - -## rawWindow -**描述:**获取真实的window - -**使用方式:** -```js -window.rawWindow -``` - -## rawDocument -**描述:**获取真实的document - -**使用方式:** -```js -window.rawDocument -``` - - -## getData -**描述:**获取主应用下发的data数据 - -**使用方式:** -```js -const data = window.microApp.getData() // 返回主应用下发的data数据 -``` - -## addDataListener -**描述:**绑定数据监听函数 - -**介绍:** -```js -/** - * 绑定监听函数,监听函数只有在数据变化时才会触发 - * dataListener: 绑定函数 - * autoTrigger: 在初次绑定监听函数时如果有缓存数据,是否需要主动触发一次,默认为false - * !!!重要说明: 因为子应用是异步渲染的,而主应用发送数据是同步的, - * 如果在子应用渲染结束前主应用发送数据,则在绑定监听函数前数据已经发送,在初始化后不会触发绑定函数, - * 但这个数据会放入缓存中,此时可以设置autoTrigger为true主动触发一次监听函数来获取数据。 - */ -window.microApp.addDataListener(dataListener: Function, autoTrigger?: boolean) -``` - -**使用方式:** -```js -function dataListener (data) { - console.log('来自主应用的数据', data) -} - -window.microApp.addDataListener(dataListener) -``` - -## removeDataListener -**描述:**解绑数据监听函数 - -**使用方式:** - -```js -function dataListener (data) { - console.log('来自主应用的数据', data) -} - -window.microApp.removeDataListener(dataListener) -``` - -## clearDataListener -**描述:**清空当前子应用的所有数据监听函数(全局数据函数除外) - -**使用方式:** - -```js -window.microApp.clearDataListener() -``` - -## dispatch -**描述:**向主应用发送数据 - -**使用方式:** - -```js -// dispatch只接受对象作为参数 -window.microApp.dispatch({type: '子应用发送的数据'}) -``` - - -## getGlobalData -**描述:**获取全局数据 - -**使用方式:** -```js -const globalData = window.microApp.getGlobalData() // 返回全局数据 -``` - - -## addGlobalDataListener -**描述:**绑定数据监听函数 - -**介绍:** -```js -/** - * 绑定监听函数 - * dataListener: 绑定函数 - * autoTrigger: 在初次绑定监听函数时如果有缓存数据,是否需要主动触发一次,默认为false - */ -window.microApp.addGlobalDataListener(dataListener: Function, autoTrigger?: boolean) - -``` - -**使用方式:** -```js -function dataListener (data) { - console.log('全局数据', data) -} - -window.microApp.addGlobalDataListener(dataListener) -``` - -## removeGlobalDataListener -**描述:**解绑全局数据监听函数 - -**使用方式:** - -```js -function dataListener (data) { - console.log('全局数据', data) -} - -window.microApp.removeGlobalDataListener(dataListener) -``` - -## clearGlobalDataListener -**描述:**清空当前子应用绑定的所有全局数据监听函数 - -**使用方式:** - -```js -window.microApp.clearGlobalDataListener() -``` - -## setGlobalData -**描述:**发送全局数据 - -**使用方式:** - -```js -// setGlobalData只接受对象作为参数 -window.microApp.setGlobalData({type: '全局数据'}) -``` - - diff --git a/docs/zh-cn/API/child-app.md b/docs/zh-cn/API/child-app.md new file mode 100644 index 000000000..5ed9a0565 --- /dev/null +++ b/docs/zh-cn/API/child-app.md @@ -0,0 +1,184 @@ +## pureCreateElement +**描述:**创建无绑定的纯净元素,该元素可以逃离元素隔离的边界,不受子应用沙箱的控制 + +**版本限制:** 0.8.2及以上版本 + +**使用方式:** +```js +const pureDiv = window.microApp.pureCreateElement('div') + +document.body.appendChild(pureDiv) +``` + + +## removeDomScope +**描述:**解除元素绑定,通常用于受子应用元素绑定影响,导致主应用元素错误绑定到子应用的情况 + +**版本限制:** 0.8.2及以上版本 + +**介绍:** +```js +/** + * @param force 解除元素绑定,并且一定时间内(一个微任务Promise时间)阻止再次绑定。 + */ +function removeDomScope(force?: boolean): void +``` + +**使用方式:** +```js +window.microApp.removeDomScope(true) // 解除元素绑定 +/** + * 中间区域的元素操作都指向主应用 + * 例如: + * document.body.appendChild(document.createElement('div')) + * div元素将插入到主应用body中 + */ +window.microApp.removeDomScope(false) // 恢复元素绑定 +``` + +## rawWindow +**描述:**获取真实的window + +**使用方式:** +```js +window.rawWindow +``` + +## rawDocument +**描述:**获取真实的document + +**使用方式:** +```js +window.rawDocument +``` + + +## getData +**描述:**获取主应用下发的data数据 + +**使用方式:** +```js +const data = window.microApp.getData() // 返回主应用下发的data数据 +``` + +## addDataListener +**描述:**绑定数据监听函数 + +**介绍:** +```js +/** + * 绑定监听函数,监听函数只有在数据变化时才会触发 + * dataListener: 绑定函数 + * autoTrigger: 在初次绑定监听函数时如果有缓存数据,是否需要主动触发一次,默认为false + * !!!重要说明: 因为子应用是异步渲染的,而主应用发送数据是同步的, + * 如果在子应用渲染结束前主应用发送数据,则在绑定监听函数前数据已经发送,在初始化后不会触发绑定函数, + * 但这个数据会放入缓存中,此时可以设置autoTrigger为true主动触发一次监听函数来获取数据。 + */ +window.microApp.addDataListener(dataListener: Function, autoTrigger?: boolean) +``` + +**使用方式:** +```js +function dataListener (data) { + console.log('来自主应用的数据', data) +} + +window.microApp.addDataListener(dataListener) +``` + +## removeDataListener +**描述:**解绑数据监听函数 + +**使用方式:** + +```js +function dataListener (data) { + console.log('来自主应用的数据', data) +} + +window.microApp.removeDataListener(dataListener) +``` + +## clearDataListener +**描述:**清空当前子应用的所有数据监听函数(全局数据函数除外) + +**使用方式:** + +```js +window.microApp.clearDataListener() +``` + +## dispatch +**描述:**向主应用发送数据 + +**使用方式:** + +```js +// dispatch只接受对象作为参数 +window.microApp.dispatch({type: '子应用发送的数据'}) +``` + + +## getGlobalData +**描述:**获取全局数据 + +**使用方式:** +```js +const globalData = window.microApp.getGlobalData() // 返回全局数据 +``` + + +## addGlobalDataListener +**描述:**绑定数据监听函数 + +**介绍:** +```js +/** + * 绑定监听函数 + * dataListener: 绑定函数 + * autoTrigger: 在初次绑定监听函数时如果有缓存数据,是否需要主动触发一次,默认为false + */ +window.microApp.addGlobalDataListener(dataListener: Function, autoTrigger?: boolean) + +``` + +**使用方式:** +```js +function dataListener (data) { + console.log('全局数据', data) +} + +window.microApp.addGlobalDataListener(dataListener) +``` + +## removeGlobalDataListener +**描述:**解绑全局数据监听函数 + +**使用方式:** + +```js +function dataListener (data) { + console.log('全局数据', data) +} + +window.microApp.removeGlobalDataListener(dataListener) +``` + +## clearGlobalDataListener +**描述:**清空当前子应用绑定的所有全局数据监听函数 + +**使用方式:** + +```js +window.microApp.clearGlobalDataListener() +``` + +## setGlobalData +**描述:**发送全局数据 + +**使用方式:** + +```js +// setGlobalData只接受对象作为参数 +window.microApp.setGlobalData({type: '全局数据'}) +``` diff --git a/docs/zh-cn/changelog.md b/docs/zh-cn/changelog.md index 5009394a7..6368a801f 100644 --- a/docs/zh-cn/changelog.md +++ b/docs/zh-cn/changelog.md @@ -8,6 +8,47 @@ --- +### 1.0.0-rc.6 + +`2024-7-29` + +- **Bug Fix** + + - 🐞 修复 iframe沙箱下history.go传入的是非0数字时iframe被重置导致异常的问题,[PR 1112](https://github.com/micro-zoe/micro-app/pull/1112) by [keuby](https://github.com/keuby)。 + - 🐞 修复 iframe沙箱下子应用事件类型判断异常的问题,[issue 975](https://github.com/micro-zoe/micro-app/issues/975),[issue 1120](https://github.com/micro-zoe/micro-app/issues/1120),[PR 985](https://github.com/micro-zoe/micro-app/pull/985) by [keuby](https://github.com/keuby)。 + - 🐞 修复 UnoCSS等异步注册mount、unmount场景下导致umd模式加载失败的问题,[issue 881](https://github.com/micro-zoe/micro-app/issues/881)、[issue 1047](https://github.com/micro-zoe/micro-app/issues/1047)、[issue 1179](https://github.com/micro-zoe/micro-app/issues/1179)、[issue 1218](https://github.com/micro-zoe/micro-app/issues/1218)。 + - 🐞 修复 类型声明jsx.IntrinsicElements导致vue-ts部分元素lint异常的问题。 + - 🐞 修复 state路由模式下子应用为vue3时刷新浏览器路由状态丢失的问题。 + - 🐞 修复 iframe沙箱在默认模式下二次渲染时初始化沙箱过程中卸载子应用导致异常的问题。 + - 🐞 修复 当子应用的`window.unmount`非空且不为函数时卸载子应用报错的问题。 + - 🐞 修复 当子应用在开启预渲染后,加载资源过程中被卸载表现异常的问题。 + - 🐞 修复 fiber子应用在初始化过程中被卸载导致渲染异常的问题。 + - 🐞 修复 主应用和子应用都是vue-router@4.x时,跳转子应用后点击返回按钮浏览器地址错误的问题,[issue 1234](https://github.com/micro-zoe/micro-app/issues/1234)。 + - 🐞 修复 子应用beforeunload事件无法正常挂载的问题,[issue 1233](https://github.com/micro-zoe/micro-app/issues/1233)。 + - 🐞 修复 当官网文档页面内容含有tab时,跳转或刷新后标题锚点定为不准确的问题。 + - 🐞 修复 循环嵌套时,中间层子应用为iframe沙箱时通过data属性传递初始化数据失败的问题。 + - 🐞 修复 native路由模式下vue3按需加载页面在部分场景下点击浏览器前进后退按钮时浏览器地址错误。 + - 🐞 修复 svg中图片路径无法自动补全的问题,[issue 1222](https://github.com/micro-zoe/micro-app/issues/1222)。 + - 🐞 修复 Firefox浏览器下子应用`favicon.ico`将主应用图标替换的问题,[issue 1262](https://github.com/micro-zoe/micro-app/issues/1262)。 + - 🐞 修复 Firefox浏览器下子应用元素的`ownerDocument`指向异常导致React16子应用渲染失败的问题。 + - 🐞 修复 Firefox浏览器下子应用元素的原型链被重置导致子应用渲染异常的的问题,[1089](https://github.com/micro-zoe/micro-app/issues/1089)、[913](https://github.com/micro-zoe/micro-app/issues/913)。 + - 🐞 修复 iframe沙箱下`message`事件无法被触发的问题。 + - 🐞 修复 iframe沙箱下window和document通过`dispatchEvent`主动发送某些特殊事件时无法正常触发事件的问题。 + - 🐞 修复 iframe沙箱下`DOMParser`解析失败导致`AntV X6`, `docx-preview`等库运行异常的问题[1292](https://github.com/micro-zoe/micro-app/issues/1292)。 + - 🐞 修复 iframe沙箱下主应用元素被错误插入到子应用中的情况[1260](https://github.com/micro-zoe/micro-app/issues/1260)。 + - 🐞 修复 iframe沙箱下富文本编辑器表现异常的问题[1031](https://github.com/micro-zoe/micro-app/issues/1031)、[1231](https://github.com/micro-zoe/micro-app/issues/1231)、[1023](https://github.com/micro-zoe/micro-app/issues/1203)。 + - 🐞 修复 Fragment内部link、script等元素无法拦截和处理的问题。 + - 🐞 修复 iframe沙箱下通过`document.querySelector`、`document.querySelectorAll`获取script元素异常的问题。 + - 🐞 修复 样式隔离对CSS规则`@layer`的支持,[PR 1303](https://github.com/micro-zoe/micro-app/pull/1303) by [alexgofreight](https://github.com/alexgofreight)。 + - 🐞 修复 子应用存在多层CSS嵌套时样式隔离解析失败的问题,[PR 1300](https://github.com/micro-zoe/micro-app/pull/1300)、[PR 1298](https://github.com/micro-zoe/micro-app/pull/1298) by [alexgofreight](https://github.com/alexgofreight)。 + +- **Update** + - 🚀 优化 `removeDomScope`方法,支持解除元素绑定的开关操作。 + - 🚀 优化 沙箱架构设计。 + - 🚀 优化 子应用卸载行为逻辑。 + - 🚀 优化 路由相关文档。 + + ### 1.0.0-rc.5 `2024-4-29` @@ -584,7 +625,7 @@ - **Bug Fix** - - 🐞 修复了在火狐浏览器80及以上版本中,样式隔离执行速度过慢的问题。 + - 🐞 修复了在Firefox浏览器80及以上版本中,样式隔离执行速度过慢的问题。 ### 0.8.3 diff --git a/docs/zh-cn/configure.md b/docs/zh-cn/configure.md index 71227ac0f..f21ed7099 100644 --- a/docs/zh-cn/configure.md +++ b/docs/zh-cn/configure.md @@ -38,21 +38,10 @@ MicroApp有两种沙箱方案:`with沙箱`和`iframe沙箱`。 - Default: `false` - 使用方式: `