// dom的api
// 外界無法訪問 shadow dom
let shadowDOM = document.getElementById('x').attachShadow({mode: 'closed'}); 
let pElm = document.createElement('p');
pElm.innerHTML = 'hello';
let styleElm = document.createElement('style');
styleElm.textContent = `
 p{color: red}
`
shadowDOM.appendchild(styleElm);
shadowDOM.appendchild(pElm);

let sandbox = new SnapshotSandbox();

class SnapshotSandbox{
 constructor(){
   this.proxy = window; // window屬性
    this.modifyPropsmap = {}; // 記錄在window上的修改
    this.active();
  }
  active() { // 激活
   this.windowSnapshot = {}; //拍照
    for(const prop in window) {
     if(window.hasOwnProperty(prop)){
       this.windowsnapshot[prop] = window[prop];
      }
    }
    object.keys(this.modifyPropsMap).forEach(p=>{
     window[p] = this.modifyPropsMap[p];
    })
  }
  
  inactive(){ // 失活
   for(const prop in window){
     if(window.hasOwnProperty(prop)){
       if(window[prop] !== this.windowsnapshot[prop]){
         this.modifyPropsMap[prop] = window[prop];
          window[prop] = this.windowsnapshot[prop]
        }
      }
    }
  }
}

// 應用的運行 從開始到結束， 切換后不會影響全局
((window)=> {
 window.a = 1;
  window.b = 2;
  console.log(window.a,window.b);
  sandbox.inactive();
  console.log(window.a,window.b);
  sandbox.active();
  console.log(window.a,window.b);
})(sandbox.proxy); // sandbox.proxy 就是window
// 如果是多個子應用就不能使用這種方式了，es6的proxy
// 代理沙箱可以實現多應用沙箱。把不同的應用用不同的代理來處理

import {BrowserRouter as Router,Link} from 'react-router-dom'
function App() {
  return (
    <div className="App">
        <Router>
          <Link to="/vue">vue應用</Link>
        </Router>
         {/* 切換導航， 將微應用渲染container容器中 */}

        <div id="container"></div>
    </div>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './registerApps'

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

yarn add qiankun 或者 npm i qiankun

// ------ Step1 引入 qiankun
import { registerMicroApps, start } from 'qiankun'; // 底層是基于single-spa

// ----- Step2 注冊子應用
registerMicroApps([{
        name: 'm-vue',
        entry: '//localhost:20000',
        container: '#container',
        activeRule: '/vue',
    },
], {
    beforeLoad: () => {
        console.log('加載前')
    },
    beforeMount: () => {
        console.log('掛在前')
    },
    afterMount: () => {
        console.log('掛載后')
    },
    beforeUnmount: () => {
        console.log('銷毀前')
    },
    afterUnmount: () => {
        console.log('銷毀后')
    },
})

// ----- Step3 啟動應用
start();

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// Vue.config.productionTip = false

let instance = null
function render(props) {
    instance = new Vue({
        router,
        render: h => h(App)
    }).$mount('#app'); // 這里是掛載到自己的html中  基座會拿到這個掛載后的html 將其插入進去
}

if (window.__POWERED_BY_QIANKUN__) { // 動態添加publicPath
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默認獨立運行
    render();
}

// 需要暴露接入協議
export async function bootstrap(props) {
  console.log('[vue] vue app bootstraped');
};
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount(props) {
   instance.$destroy();
    instance.$el.innerHTML = '';
    instance = null;
    router = null;
}

/**
 * bootstrap 只會在微應用初始化的時候調用一次，下次微應用重新進入時會直接調用 mount 鉤子，不會再重復觸發 bootstrap。
 * 通常我們可以在這里做一些全局變量的初始化，比如不會在 unmount 階段被銷毀的應用級別的緩存等。
 */
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

/**
 * (重要）應用每次進入都會調用 mount 方法，通常我們在這里觸發應用的渲染方法
 */
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  storeTest(props);
  render(props);
}

/**
 * 應用每次 切出/卸載 會調用的方法，通常在這里我們會卸載微應用的應用實例
 */
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

/**
 * 可選生命周期鉤子，僅使用 loadMicroApp 方式加載微應用時生效
 */
export async function update(props) {
  console.log('update props', props);
}

module.exports = {
    devServer:{
        port:10000,
        headers:{ 
           // 解決跨域
            'Access-Control-Allow-Origin':'*'
        }
    },
    configureWebpack:{
        output:{
           // 把子應用打包成 umd 庫格式
          library: `${name}-[name]`,
          libraryTarget: 'umd',
          jsonpFunction: `webpackJsonp_${name}`,
        }
    }
}