🎉 qiankun 3.0 init (#2473)

umijs · Apr 26, 2023 · d5eec4a · d5eec4a
1 parent a4007c8
commit d5eec4a
Show file tree

Hide file tree

Showing 61 changed files with 3,934 additions and 3,408 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -11,6 +11,8 @@ module.exports = defineConfig({
     semi: ['error', 'always'],
     'no-confusing-arrow': 0,
     'no-console': 0,
+    'func-style': ["error", "declaration", { "allowArrowFunctions": true }],
+    'no-shadow': 0,
     'max-len': ['error', { code: 120, ignoreComments: true, ignoreStrings: true }],
     // see https://github.com/prettier/prettier/issues/3847
     'space-before-function-paren': ['error', { anonymous: 'never', named: 'never', asyncArrow: 'always' }],

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpx lint-stage
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm run test
diff --git a/examples/main/index.html b/examples/main/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>QianKun Example</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "/@react-refresh": "http://localhost:5173/@react-refresh"
+      }
+    }
+  </script>
+</head>
+
+<body>
+  <div class="mainapp">
+    <!-- 标题栏 -->
+    <header class="mainapp-header">
+      <h1>QianKun</h1>
+    </header>
+    <div class="mainapp-main">
+      <!-- 侧边栏 -->
+      <ul class="mainapp-sidemenu">
+        <li onclick="push('/react16')">React16</li>
+        <li onclick="push('/react15')">React15</li>
+        <li onclick="push('/vue')">Vue</li>
+        <li onclick="push('/vue3')">Vue3</li>
+        <li onclick="push('/angular9')">Angular9</li>
+        <li onclick="push('/purehtml')">Purehtml</li>
+      </ul>
+      <!-- 子应用  -->
+      <main id="subapp-container"></main>
+    </div>
+  </div>
+
+  <script>
+    function push(subapp) { history.pushState(null, subapp, subapp) }
+  </script>
+</body>
+
+</html>
diff --git a/examples/main/index.js b/examples/main/index.js
@@ -0,0 +1,11 @@
+import { loadMicroApp } from '../../packages/qiankun/dist/esm';
+import './index.less';
+
+loadMicroApp(
+  {
+    name: 'vite',
+    entry: '//localhost:5173',
+    container: document.getElementById('subapp-container'),
+  },
+  { sandbox: false },
+);
diff --git a/examples/main/index.less b/examples/main/index.less
@@ -0,0 +1,63 @@
+// 主应用慎用 reset 样式
+body {
+  margin: 0;
+}
+
+.mainapp {
+  // 防止被子应用的样式覆盖
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  line-height: 1;
+}
+
+.mainapp-header {
+  >h1 {
+    color: #333;
+    font-size: 36px;
+    font-weight: 700;
+    margin: 0;
+    padding: 36px;
+  }
+}
+
+.mainapp-main {
+  display: flex;
+
+  .mainapp-sidemenu {
+    width: 130px;
+    list-style: none;
+    margin: 0;
+    margin-left: 40px;
+    padding: 0;
+    border-right: 2px solid #aaa;
+
+    >li {
+      color: #aaa;
+      margin: 20px 0;
+      font-size: 18px;
+      font-weight: 400;
+      cursor: pointer;
+
+      &:hover {
+        color: #444;
+      }
+
+      &:first-child {
+        margin-top: 5px;
+      }
+    }
+  }
+}
+
+// 子应用区域
+#subapp-container {
+  flex-grow: 1;
+  position: relative;
+  margin: 0 40px;
+
+  .subapp-loading {
+    color: #444;
+    font-size: 28px;
+    font-weight: 600;
+    text-align: center;
+  }
+}
diff --git a/examples/main/multiple.html b/examples/main/multiple.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>qiankun multiple demo</title>
+  <style>
+    body {
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+  </style>
+</head>
+<body>
+<button id="unmount">unmount</button>
+<button id="mount">mount</button>
+
+
+<div id="react15">react loading...</div>
+<div id="vue">vue loading...</div>
+
+</body>
+</html>
diff --git a/examples/main/multiple.js b/examples/main/multiple.js
@@ -0,0 +1,19 @@
+import { loadMicroApp } from '../../es';
+
+let app;
+
+function mount() {
+  app = loadMicroApp(
+    { name: 'react15', entry: '//localhost:7102', container: '#react15' },
+    { sandbox: { experimentalStyleIsolation: true } },
+  );
+}
+
+function unmount() {
+  app.unmount();
+}
+
+document.querySelector('#mount').addEventListener('click', mount);
+document.querySelector('#unmount').addEventListener('click', unmount);
+
+loadMicroApp({ name: 'vue', entry: '//localhost:7101', container: '#vue' });
diff --git a/examples/main/package.json b/examples/main/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "main",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "start:multiple": "cross-env MODE=multiple webpack-dev-server",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "devDependencies": {
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-transform-react-jsx": "^7.7.0",
+    "@babel/preset-env": "^7.7.1",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "less-loader": "^6.2.0",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0",
+    "cross-env": "^7.0.2"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "vue": "^2.6.11",
+    "zone.js": "^0.10.2"
+  }
+}
diff --git a/examples/main/webpack.config.js b/examples/main/webpack.config.js
@@ -0,0 +1,55 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { name } = require('./package');
+
+module.exports = {
+  entry: process.env.MODE === 'multiple' ? './multiple.js' : './index.js',
+  devtool: 'source-map',
+  devServer: {
+    open: true,
+    port: '7099',
+    clientLogLevel: 'warning',
+    disableHostCheck: true,
+    compress: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    historyApiFallback: true,
+    overlay: { warnings: false, errors: true },
+  },
+  output: {
+    publicPath: '/',
+  },
+  mode: 'development',
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-transform-react-jsx'],
+          },
+        },
+      },
+      {
+        test: /\.(le|c)ss$/,
+        use: ['style-loader', 'css-loader', 'less-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: process.env.MODE === 'multiple' ? './multiple.html' : './index.html',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+      },
+    }),
+  ],
+};
diff --git a/examples/react15/App.jsx b/examples/react15/App.jsx
@@ -0,0 +1,19 @@
+import React, { version as reactVersion } from 'react';
+import { version as antdVersion } from 'antd';
+
+import Logo from './components/Logo'
+import HelloModal from './components/HelloModal'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <div className="react15-main">
+        <Logo />
+        <p className="react15-lib">
+          React version: {reactVersion}, AntD version: {antdVersion}
+        </p>
+        <HelloModal />
+      </div>
+    );
+  }
+}
diff --git a/examples/react15/components/HelloModal.jsx b/examples/react15/components/HelloModal.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, Modal } from 'antd';
+
+export default class HelloModal extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      visible: false,
+    };
+    this.setVisible = visible => this.setState({ visible });
+  }
+
+  render() {
+    const { visible } = this.state;
+
+    return (
+      <div>
+        <Button onClick={() => this.setVisible(true)}>
+          CLICK ME
+        </Button>
+        <Modal
+          visible={visible}
+          closable={false}
+          onOk={() => this.setVisible(false)}
+          onCancel={() => this.setVisible(false)}
+          title="Install"
+        >
+          <code>$ yarn add qiankun  # or npm i qiankun -S</code>
+        </Modal>
+      </div>
+    );
+  }
+}
diff --git a/examples/react15/components/Logo.jsx b/examples/react15/components/Logo.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default class ReactLogo extends React.Component {
+  render() {
+    return (
+      <img
+        className="react15-icon"
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K"
+      />
+    )
+  }
+}
diff --git a/examples/react15/dynamic.css b/examples/react15/dynamic.css
@@ -0,0 +1,5 @@
+/* 动态加载的样式 */
+
+.react15-lib {
+  color: #818ff7;
+}
diff --git a/examples/react15/index.css b/examples/react15/index.css
@@ -0,0 +1,15 @@
+.react15-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.react15-icon {
+  width: 140px;
+}
+
+.react15-lib {
+  margin: 32px 0 24px;
+  font-size: 16px;
+  color: #2c3e50;
+}
diff --git a/examples/react15/index.html b/examples/react15/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+
+<body>
+  <div id="react15Root"></div>
+</body>
+
+</html>