console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>This is single-spa demo</p>
    <div id="app"></div>
    <button class="btn1">/</button>
    <button class="btn2">/vue</button>
    <button class="btn3">/react</button>
    
    <script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mini-single-spa@latest/dist/mini-single-spa.iife.js"></script>
    <script>
        function $(selector) {
            return document.querySelector(selector)
        }

        $('.btn1').onclick = () => {
            location.hash = '/'
        }

        $('.btn2').onclick = () => {
            location.hash = '/vue'
        }

        $('.btn3').onclick = () => {
            location.hash = '/react'
        }

        let vueApp
        MiniSingleSPA.registerApplication({
            name: 'vue',
            loadApp() {
                return Promise.resolve({
                    async bootstrap() {
                        console.log('vue bootstrap')
                    },
                    async mount() {
                        console.log('vue mount')
                        vueApp = Vue.createApp({
                            data() {
                                return {
                                    text: 'Vue App'
                                }
                            },
                            render() {
                                return Vue.h(
                                    'div',           // 标签名称
                                    this.text  // 标签内容
                                )
                            },
                        })
                        
                        vueApp.mount('#app')
                    },
                    async unmount() {
                        console.log('vue unmount')
                        vueApp.unmount()
                    },
                })
            },
            activeRule:(location) => location.hash === '#/vue',
            customProps: {
                container: $('#app')
            }
        })

        class LikeButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = { liked: false };
            }

            render() {
                if (this.state.liked) {
                    return 'You liked this.';
                }

                return React.createElement(
                    'button',
                    { onClick: () => this.setState({ liked: true }) },
                    'Like'
                );
            }
        }

        MiniSingleSPA.registerApplication({
            name: 'react',
            loadApp() { 
                return Promise.resolve({
                    async bootstrap() {
                        console.log('react bootstrap')
                    },
                    async mount() {
                        console.log('react mount')
                        ReactDOM.render(
                            React.createElement(LikeButton),
                            $('#app')
                        );
                    },
                    async unmount() {
                        console.log('react unmount')
                        ReactDOM.unmountComponentAtNode($('#app'));
                    },
                })
            },
            activeRule: (location) => location.hash === '#/react'
        })

        MiniSingleSPA.start()
    </script>
</body>
</html>