Full Code of F-loat/vue-cli-plugin-qiankun for AI

Repository: F-loat/vue-cli-plugin-qiankun
Branch: master
Commit: cb0626ae1d6e
Files: 54
Total size: 28.5 KB

Directory structure:
gitextract_qsbuelvj/

├── .editorconfig
├── .github/
│   └── workflows/
│       └── ci.yml
├── .gitignore
├── LICENSE
├── README.md
├── examples/
│   ├── README.md
│   ├── bar-app/
│   │   ├── .browserslistrc
│   │   ├── .editorconfig
│   │   ├── .eslintrc.js
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── babel.config.js
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── index.html
│   │   ├── src/
│   │   │   ├── App.vue
│   │   │   ├── components/
│   │   │   │   └── HelloWorld.vue
│   │   │   └── main.js
│   │   └── vue.config.js
│   ├── foo-app/
│   │   ├── .browserslistrc
│   │   ├── .editorconfig
│   │   ├── .eslintrc.js
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── babel.config.js
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── index.html
│   │   ├── src/
│   │   │   ├── App.vue
│   │   │   ├── components/
│   │   │   │   └── HelloWorld.vue
│   │   │   ├── main.js
│   │   │   ├── router/
│   │   │   │   └── index.js
│   │   │   └── views/
│   │   │       ├── About.vue
│   │   │       └── Home.vue
│   │   └── vue.config.js
│   ├── master/
│   │   ├── .browserslistrc
│   │   ├── .editorconfig
│   │   ├── .eslintrc.js
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── babel.config.js
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── index.html
│   │   ├── src/
│   │   │   ├── App.vue
│   │   │   └── main.js
│   │   └── vue.config.js
│   └── package.json
├── generator/
│   ├── index.js
│   ├── master.js
│   ├── slave.js
│   └── template/
│       ├── master/
│       │   └── src/
│       │       └── App.vue
│       └── slave/
│           └── main.js
├── index.js
├── package.json
├── prompts.js
└── public-path.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true


================================================
FILE: .github/workflows/ci.yml
================================================
name: GitHub Actions Build and Deploy Demo
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v1

    - name: Install and Build
      run: |
        cd examples
        yarn
        yarn install:all
        yarn build:all

    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: examples/master/dist
        CLEAN: true


================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Lock file
yarn.lock
package-lock.json


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2020 徒言

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
## vue-cli-plugin-qiankun

> qiankun plugin for vue-cli

[![npm version](https://img.shields.io/npm/v/vue-cli-plugin-qiankun.svg?style=flat-square)](https://www.npmjs.com/package/vue-cli-plugin-qiankun) [![npm downloads](https://img.shields.io/npm/dt/vue-cli-plugin-qiankun.svg?style=flat-square)](https://www.npmjs.com/package/vue-cli-plugin-qiankun)

### 使用步骤 (Use setup)

1. 创建主应用 (Create master project)

``` sh
$ vue create master
$ cd master
$ vue add vue-cli-plugin-qiankun --type master
```

2. 创建子应用 (Create slave project)

``` sh
$ vue create foo-app
$ cd foo-app
$ vue add vue-cli-plugin-qiankun --type slave --port 8081
```

3. 配置主应用 (Config master project)

> master/src/App.vue

``` vue
<script>
export default {
  name: 'master',
  data () {
    return {
      // ...
      apps: [
        { name: 'foo-app', entry: '//localhost:8081', container: '#appContainer', activeRule: '/foo-app' }
      ]
    }
  },
  // ...
  methods: {
    // ...
    initQiankun () {
      // ...
      setDefaultMountApp('/foo-app')
      // ...
    }
  }
}
</script>
```

4. 运行各项目 (Run each project)

``` sh
$ cd master
$ yarn serve
```

``` sh
$ cd foo-app
$ yarn serve
```

### 示例 (Examples)

> [DEMO](https://f-loat.github.io/vue-cli-plugin-qiankun)

``` sh
$ cd examples
$ yarn
$ yarn install:all
$ yarn serve:all
```

### 功能 (Features)

- 修改项目文件引入 qiankun 框架

- 注入 qiankun 框架要求的构建配置

- 自动配置 `publicPath` 处理资源路径

### 致谢 (Acknowledgements)

- [vue-cli](https://github.com/vuejs/vue-cli) Standard Tooling for Vue.js Development.

- [qiankun](https://github.com/umijs/qiankun) Blazing fast, simple and completed solution for micro frontends.

- [single-spa](https://github.com/CanopyTax/single-spa) What an awesome meta-framework for micro-frontends!


================================================
FILE: examples/README.md
================================================
## Examples

``` sh
$ yarn
$ yarn install:all
$ yarn serve:all
```


================================================
FILE: examples/bar-app/.browserslistrc
================================================
> 1%
last 2 versions


================================================
FILE: examples/bar-app/.editorconfig
================================================
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true


================================================
FILE: examples/bar-app/.eslintrc.js
================================================
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}


================================================
FILE: examples/bar-app/.gitignore
================================================
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


================================================
FILE: examples/bar-app/README.md
================================================
# bar-app

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


================================================
FILE: examples/bar-app/babel.config.js
================================================
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}


================================================
FILE: examples/bar-app/package.json
================================================
{
  "name": "bar-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8082",
    "build": "vue-cli-service build",
    "postbuild": "cp-cli dist ../master/dist/bar-app",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "cp-cli": "^2.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-qiankun": "../../",
    "vue-template-compiler": "^2.6.10"
  }
}


================================================
FILE: examples/bar-app/public/index.html
================================================
<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>bar-app</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but bar-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


================================================
FILE: examples/bar-app/src/App.vue
================================================
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Bar Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


================================================
FILE: examples/bar-app/src/components/HelloWorld.vue
================================================
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


================================================
FILE: examples/bar-app/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

let instance = null

function render () {
  instance = new Vue({
    render: h => h(App)
  }).$mount('#app')
}

if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap () {
  // eslint-disable-next-line no-console
  console.log('vue app bootstraped')
}

export async function mount (props) {
  // eslint-disable-next-line no-console
  console.log('props from main framework', props)
  render()
}

export async function unmount () {
  instance.$destroy()
  instance = null
}


================================================
FILE: examples/bar-app/vue.config.js
================================================
module.exports = {
  productionSourceMap: false,
  indexPath: process.env.NODE_ENV === 'production'
    ? 'source.html'
    : 'index.html',
  publicPath: process.env.VUE_APP_BASE_PATH
}


================================================
FILE: examples/foo-app/.browserslistrc
================================================
> 1%
last 2 versions


================================================
FILE: examples/foo-app/.editorconfig
================================================
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true


================================================
FILE: examples/foo-app/.eslintrc.js
================================================
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}


================================================
FILE: examples/foo-app/.gitignore
================================================
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


================================================
FILE: examples/foo-app/README.md
================================================
# foo-app

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


================================================
FILE: examples/foo-app/babel.config.js
================================================
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}


================================================
FILE: examples/foo-app/package.json
================================================
{
  "name": "foo-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8081",
    "build": "vue-cli-service build",
    "postbuild": "cp-cli dist ../master/dist/foo-app",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "cp-cli": "^2.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-qiankun": "../../",
    "vue-template-compiler": "^2.6.10"
  }
}


================================================
FILE: examples/foo-app/public/index.html
================================================
<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>foo-app</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but foo-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


================================================
FILE: examples/foo-app/src/App.vue
================================================
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>


================================================
FILE: examples/foo-app/src/components/HelloWorld.vue
================================================
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


================================================
FILE: examples/foo-app/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

let instance = null

function render () {
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')
}

if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap () {
  // eslint-disable-next-line no-console
  console.log('vue app bootstraped')
}

export async function mount (props) {
  // eslint-disable-next-line no-console
  console.log('props from main framework', props)
  render()
}

export async function unmount () {
  instance.$destroy()
  instance = null
}


================================================
FILE: examples/foo-app/src/router/index.js
================================================
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__
    ? process.env.VUE_APP_BASE_PATH || '/foo-app/'
    : '/',
  routes
})

export default router


================================================
FILE: examples/foo-app/src/views/About.vue
================================================
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>


================================================
FILE: examples/foo-app/src/views/Home.vue
================================================
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Foo Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>


================================================
FILE: examples/foo-app/vue.config.js
================================================
module.exports = {
  productionSourceMap: false,
  indexPath: process.env.NODE_ENV === 'production'
    ? 'source.html'
    : 'index.html',
  publicPath: process.env.VUE_APP_BASE_PATH
}


================================================
FILE: examples/master/.browserslistrc
================================================
> 1%
last 2 versions


================================================
FILE: examples/master/.editorconfig
================================================
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true


================================================
FILE: examples/master/.eslintrc.js
================================================
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}


================================================
FILE: examples/master/.gitignore
================================================
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


================================================
FILE: examples/master/README.md
================================================
# master

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


================================================
FILE: examples/master/babel.config.js
================================================
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}


================================================
FILE: examples/master/package.json
================================================
{
  "name": "master",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "postbuild": "cp-cli dist/index.html dist/404.html",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "qiankun": "^2.0.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "cp-cli": "^2.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-qiankun": "../../",
    "vue-template-compiler": "^2.6.10"
  }
}


================================================
FILE: examples/master/public/index.html
================================================
<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>master</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but master doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


================================================
FILE: examples/master/src/App.vue
================================================
<template>
  <div id="container">
    <header>
      <nav>
        <ol>
          <li v-for="app of apps" :key="app.name">
            <a @click="goto(app.name, app.activeRule)">{{app.name}}</a>
          </li>
        </ol>
      </nav>
    </header>
    <div id="appContainer" />
  </div>
</template>

<script>
import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start } from 'qiankun'

const apps = process.env.NODE_ENV === 'production'
  ? [
    { name: 'foo-app', entry: '/vue-cli-plugin-qiankun/foo-app/source.html', container: '#appContainer', activeRule: '/vue-cli-plugin-qiankun/foo-app' },
    { name: 'bar-app', entry: '/vue-cli-plugin-qiankun/bar-app/source.html', container: '#appContainer', activeRule: '/vue-cli-plugin-qiankun/bar-app' }
  ]
  : [
    { name: 'foo-app', entry: '//localhost:8081', container: '#appContainer', activeRule: '/foo-app' },
    { name: 'bar-app', entry: '//localhost:8082', container: '#appContainer', activeRule: '/bar-app' }
  ]

export default {
  name: 'master',
  data () {
    return {
      apps
    }
  },
  created () {
    if (!window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__) {
      this.initQiankun()
    } else {
      location.reload()
    }
  },
  methods: {
    goto (title, href) {
      window.history.pushState({}, title, href)
    },
    initQiankun () {
      registerMicroApps(
        apps,
        {
          beforeLoad: [
            app => {
              // eslint-disable-next-line no-console
              console.log('before load', app)
            }
          ],
          beforeMount: [
            app => {
              // eslint-disable-next-line no-console
              console.log('before mount', app)
            }
          ],
          afterUnmount: [
            app => {
              // eslint-disable-next-line no-console
              console.log('after unload', app)
            }
          ]
        }
      )

      const defaultApp = apps[0] || {}
      setDefaultMountApp(defaultApp.activeRule)

      runAfterFirstMounted(() => {
        // eslint-disable-next-line no-console
        console.info('first app mounted')
      })

      start({ prefetch: true })
    }
  }
}
</script>

<style scoped>
a {
  color: #42b983;
  cursor: pointer;
}
.appContainer {
  margin-top: 50px;
}
</style>


================================================
FILE: examples/master/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')


================================================
FILE: examples/master/vue.config.js
================================================
module.exports = {
  productionSourceMap: false,
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-cli-plugin-qiankun/'
    : '/'
}


================================================
FILE: examples/package.json
================================================
{
  "name": "examples",
  "license": "MIT",
  "scripts": {
    "install:all": "yarn install:master && yarn install:foo && yarn install:bar",
    "install:master": "cd master && yarn",
    "install:foo": "cd foo-app && yarn",
    "install:bar": "cd bar-app && yarn",
    "serve:all": "concurrently \"yarn serve:master\" \"yarn serve:foo\" \"yarn serve:bar\"",
    "serve:master": "cd master && yarn serve",
    "serve:foo": "cd foo-app && yarn serve",
    "serve:bar": "cd bar-app && yarn serve",
    "build:all": "concurrently \"yarn build:master\" \"yarn build:foo\" \"yarn build:bar\"",
    "build:master": "cd master && yarn build",
    "build:foo": "cd foo-app && yarn build",
    "build:bar": "cd bar-app && yarn build"
  },
  "devDependencies": {
    "concurrently": "^5.0.2"
  }
}


================================================
FILE: generator/index.js
================================================
module.exports = (api, { type }) => {
  require(`./${type}`)(api)

  if (api.hasPlugin('eslint')) {
    api.onCreateComplete(() => {
      require('@vue/cli-plugin-eslint/lint')({}, api)
    })
  }
}


================================================
FILE: generator/master.js
================================================
module.exports = (api) => {
  api.extendPackage({
    dependencies: {
      "qiankun": "^2.0.0"
    }
  })

  api.render('./template/master')
}


================================================
FILE: generator/slave.js
================================================
const slaveMain = require('./template/slave/main')

module.exports = (api) => {
  const { port } = api.options
  const { projectName } = api.rootOptions

  api.extendPackage({
    scripts: {
      serve: `vue-cli-service serve --port ${port}`
    }
  })

  api.postProcessFiles((files) => {
    const routerConfigPath = 'src/router/index.js'

    if (files[routerConfigPath]) {
      files[routerConfigPath] = files[routerConfigPath].replace(
        /base: process.env.BASE_URL,/,
        `base: window.__POWERED_BY_QIANKUN__ ? '/${projectName}' : '/',`
      )
    }

    if (!files[api.entryFile].match(/\nnew Vue\(/)) {
      files['src/slave-main.js'] = slaveMain.standard.replace(
        /(new Vue\([\s\S]*)/,
        slaveMain.replacement
      )
      console.info('\n暂无法自动转换该项目的 main.js 文件，请参考 src/slave-main.js 手动修改\n')
    } else {
      files[api.entryFile] = files[api.entryFile].replace(
        /(new Vue\([\s\S]*)/,
        slaveMain.replacement
      )
    }
  })
}


================================================
FILE: generator/template/master/src/App.vue
================================================
<template>
  <div id="container">
    <header>
      <nav>
        <ol>
          <li v-for="app of apps" :key="app.name">
            <a @click="goto(app.name, `${app.activeRule}`)">{{app.name}}</a>
          </li>
        </ol>
      </nav>
    </header>
    <div id="appContainer" />
  </div>
</template>

<script>
  import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start } from 'qiankun'

	export default {
    name: 'master',
		data () {
      return {
        apps: [
          { name: 'slave', entry: '//localhost:8081', container: '#appContainer', activeRule: '/slave' }
        ]
      }
    },
    created () {
      if (!window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__) {
        this.initQiankun()
      } else {
        // fix hot-reload
        location.reload()
      }
    },
		methods: {
			goto (title, href) {
				window.history.pushState({}, title, href)
      },
      initQiankun () {
        registerMicroApps(
          this.apps,
          {
            beforeLoad: [
              app => {
                // eslint-disable-next-line no-console
                console.log('before load', app)
              }
            ],
            beforeMount: [
              app => {
                // eslint-disable-next-line no-console
                console.log('before mount', app)
              }
            ],
            afterUnmount: [
              app => {
                // eslint-disable-next-line no-console
                console.log('after unload', app)
              }
            ]
          }
        )

        setDefaultMountApp('/slave')

        runAfterFirstMounted(() => {
          // eslint-disable-next-line no-console
          console.info('first app mounted')
        })

        start({ prefetch: true })
      }
		}
	}
</script>

<style scoped>
  a {
    color: #42b983;
    cursor: pointer;
  }
  .appContainer {
    margin-top: 50px;
  }
</style>


================================================
FILE: generator/template/slave/main.js
================================================
exports.standard = `import Vue from 'vue'
  import App from './App.vue'

  Vue.config.productionTip = false

  new Vue({
    render: h => h(App)
  }).$mount('#app')
`

exports.replacement = `let instance = null

  function render () {
    instance = $1
  }

  if (!window.__POWERED_BY_QIANKUN__) {
    render()
  }

  export async function bootstrap () {
    // eslint-disable-next-line no-console
    console.log('vue app bootstraped')
  }

  export async function mount (props) {
    // eslint-disable-next-line no-console
    console.log('props from main framework', props)
    render()
  }

  export async function unmount () {
    instance.$destroy()
    instance = null
  }
`


================================================
FILE: index.js
================================================
const path = require('path')

module.exports = (api) => {
  const { name, dependencies = {} } = api.service.pkg
  const isMaster = !!dependencies.qiankun

  if (isMaster) return

  api.chainWebpack((config) => {
    config.devServer
      .headers({
        'Access-Control-Allow-Origin': '*'
      })

    config.merge({
      entry: {
        main: [
          path.resolve(__dirname, './public-path.js'),
          path.resolve(api.service.context, 'src/main.js')
        ]
      }
    })

    config.output
      .library(`${name}-[name]`)
      .libraryTarget('umd')
      .jsonpFunction(`webpackJsonp_${name}`)
  })
}


================================================
FILE: package.json
================================================
{
  "name": "vue-cli-plugin-qiankun",
  "version": "1.0.1",
  "description": "qiankun plugin for vue-cli",
  "main": "index.js",
  "files": [
    "generator",
    "index.js",
    "public-path.js",
    "prompts.js"
  ],
  "repository": "https://github.com/F-loat/vue-cli-plugin-qiankun",
  "keywords": [
    "vue-cli",
    "plugin",
    "qiankun",
    "micro-frontend"
  ],
  "author": "F-loat <chaimaoyuan@foxmail.com>",
  "license": "MIT",
  "private": false
}


================================================
FILE: prompts.js
================================================
module.exports = [
  {
    name: 'type',
    type: 'list',
    message: 'Pick a project type:',
    choices: [
      {
        name: 'master',
        value: 'master'
      },
      {
        name: 'slave',
        value: 'slave'
      }
    ]
  },
  {
    name: 'port',
    type: 'input',
    default: 8080,
    message: 'Input a slave project port:',
    when: answers => answers.type === 'slave'
  }
]


================================================
FILE: public-path.js
================================================
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}