feat: ie11 compatibility (#248)

* feat: ie11 compatibility (#185) * feat: 去除多余代码 * feat: ie11 compatibility (#185) feat: 去除多余代码 * chore: 去除多余代码 Co-authored-by: squall <[email protected]> Co-authored-by: xuzhidan <[email protected]>
Tencent · Nov 10, 2022 · f6fd307 · f6fd307
1 parent 2492737
commit f6fd307
Show file tree

Hide file tree

Showing 39 changed files with 560 additions and 489 deletions.
diff --git a/examples/angular12/.browserslistrc b/examples/angular12/.browserslistrc
@@ -14,4 +14,4 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
+IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/examples/angular12/tsconfig.json b/examples/angular12/tsconfig.json
@@ -14,7 +14,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "es5",
     "module": "es2020",
     "lib": [
       "es2018",
@@ -27,4 +27,4 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
-}
+}
diff --git a/examples/main-react/package.json b/examples/main-react/package.json
@@ -86,14 +86,14 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      ">1%",
+      "last 2 versions",
+      "ie >= 11"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      ">1%",
+      "last 2 versions",
+      "ie >= 11"
     ]
   },
   "jest": {
@@ -152,4 +152,4 @@
       "react-app"
     ]
   }
-}
+}
diff --git a/examples/main-react/public/favicon.ico b/examples/main-react/public/favicon.ico
diff --git a/examples/main-react/public/index.html b/examples/main-react/public/index.html
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <script>if(window.parent !== window){window.stop()}</script>
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -25,12 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>无界react-demo展示</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>无界react-demo展示</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -40,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/examples/main-react/src/App.js b/examples/main-react/src/App.js
@@ -30,6 +30,7 @@ function Nav() {
   const [vue2Flag, setVue2Flag] = useState(location.pathname.includes("vue2-sub"));
   const [vue3Flag, setVue3Flag] = useState(location.pathname.includes("vue3-sub"));
   const [viteFlag, setViteFlag] = useState(location.pathname.includes("vite-sub"));
+  const degrade = window.Proxy
 
   // 在 xxx-sub 路由下子应用将激活路由同步给主应用，主应用跳转对应路由高亮菜单栏
   bus.$on("sub-route-change", (name, path) => {
@@ -107,21 +108,21 @@ function Nav() {
           </NavLink>
         ))}
       </div>
-      <NavLink to="/vue3" className={({ isActive }) => (isActive ? "active" : "inactive")}>
+      {degrade && <NavLink to="/vue3" className={({ isActive }) => (isActive ? "active" : "inactive")}>
         vue3<span className="alive">保活</span>
         <CaretUpOutlined className={vue3Flag ? "main-icon active" : "main-icon"} onClick={() => handleFlag("vue3")} />
-      </NavLink>
+      </NavLink>}
       <div className="sub-menu" style={{display: vue3Flag ? "block" : "none"}}>
         {subMap.vue3.map((item) => (
           <NavLink to={`/vue3-sub/${item}`} key={item} className={({ isActive }) => (isActive ? "active" : "inactive")}>
             {item}
           </NavLink>
         ))}
       </div>
-      <NavLink to="/vite" className={({ isActive }) => (isActive ? "active" : "inactive")}>
+       {degrade && <NavLink to="/vite" className={({ isActive }) => (isActive ? "active" : "inactive")}>
         vite
         <CaretUpOutlined className={viteFlag ? "main-icon active" : "main-icon"} onClick={() => handleFlag("vite")} />
-      </NavLink>
+      </NavLink>}
       <div className="sub-menu" style={{display: viteFlag ? "block" : "none"}}>
         {subMap.vite.map((item) => (
           <NavLink to={`/vite-sub/${item}`} key={item} className={({ isActive }) => (isActive ? "active" : "inactive")}>

diff --git a/examples/main-react/src/index.css b/examples/main-react/src/index.css
@@ -38,7 +38,7 @@ body {
 .nav .menu-icon {
   display: none;
   border: none;
-  background: var(--theme) !important;
+  background: rgb(241, 107, 95) !important;
 }
 
 .main-icon {
@@ -107,18 +107,18 @@ h3 {
 }
 
 .nav a:hover {
-  color: var(--theme);
+  color: rgb(241, 107, 95);
 }
 
 .nav a.active {
-  color: var(--theme);
+  color: rgb(241, 107, 95);
   background: rgba(0, 0, 0, 0.05);
 }
 
 .alive {
   display: inline-block;
   white-space: nowrap;
-  background-color: var(--theme);
+  background-color: rgb(241, 107, 95);
   border-radius: 8px;
   margin-left: 4px;
   font-size: 10px;
@@ -152,7 +152,7 @@ h3 {
 
 .title {
   font-size: 30px;
-  color: var(--theme);
+  color: rgb(241, 107, 95);
   text-align: center;
 }
 
@@ -171,6 +171,12 @@ h3 {
   height: 40px;
 }
 
+.ant-switch-disabled {
+  height: 40px;
+  padding: 5px;
+  margin-top: -5px;
+}
+
 .switch.ant-switch::after {
   top: 6px;
   width: 25px;
@@ -190,8 +196,8 @@ h3 {
   transition: all 0.1s linear;
 }
 .docs:hover {
-  color: var(--theme);
-  border: 1px solid var(--theme)
+  color: rgb(241, 107, 95);
+  border: 1px solid rgb(241, 107, 95)
 }
 
 
@@ -213,7 +219,7 @@ h3 {
 .home .ant-switch-checked {
   border: 1px solid rgb(217, 217, 217);
   box-shadow: 0 2px #00000004;
-  background: var(--theme);
+  background: rgb(241, 107, 95);
   color: rgb(44, 62, 80); 
 }
 

diff --git a/examples/main-react/src/index.js b/examples/main-react/src/index.js
@@ -1,3 +1,6 @@
+import "react-app-polyfill/stable";
+import "react-app-polyfill/ie11";
+
 import React from "react";
 import ReactDOM from "react-dom";
 import WujieReact from "wujie-react";
@@ -104,15 +107,17 @@ if (window.localStorage.getItem("preload") !== "false") {
   preloadApp({
     name: "vue2",
   });
-  preloadApp({
-    name: "vue3",
-  });
   preloadApp({
     name: "angular12",
   });
-  preloadApp({
-    name: "vite",
-  });
+  if (window.Proxy) {
+    preloadApp({
+      name: "vue3",
+    });
+    preloadApp({
+      name: "vite",
+    });
+  }
 }
 
 ReactDOM.render(<App />, document.getElementById("root"));

diff --git a/examples/main-react/src/pages/All.js b/examples/main-react/src/pages/All.js
@@ -11,6 +11,7 @@ export default function React16() {
   const vue3Url = hostMap("//localhost:7300/");
   const vite = hostMap("//localhost:7500/");
   const angular12Url = hostMap("//localhost:7400/");
+  const degrade = window.Proxy
   // 修正iframe的url，防止github pages csp报错
   const props = {
     jump: (name) => {
@@ -50,7 +51,7 @@ export default function React16() {
           props={props}
         ></WujieReact>
       </div>
-      <div className="all-item">
+      {degrade && <div className="all-item">
         <WujieReact
           height="100%"
           width="100%"
@@ -60,8 +61,8 @@ export default function React16() {
           props={props}
           alive={true}
         ></WujieReact>
-      </div>
-      <div className="all-item">
+      </div>}
+      {degrade && <div className="all-item">
         <WujieReact
           height="100%"
           width="100%"
@@ -70,7 +71,7 @@ export default function React16() {
           sync={true}
           props={props}
         ></WujieReact>
-      </div>
+      </div>}
       <div className="all-item">
         <WujieReact
           height="100%"

diff --git a/examples/main-vue/.browserslistrc b/examples/main-vue/.browserslistrc
@@ -1,3 +1,3 @@
 > 1%
 last 2 versions
-not dead
+ie >= 11
diff --git a/examples/main-vue/package.json b/examples/main-vue/package.json
@@ -10,8 +10,10 @@
   "dependencies": {
     "ant-design-vue": "^1.7.8",
     "core-js": "^3.6.5",
+    "custom-event-polyfill": "^1.0.7",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "whatwg-fetch": "^3.6.2",
     "wujie": "workspace:^1.0.0-rc.25",
     "wujie-vue2": "workspace:^1.0.0-rc.25"
   },
@@ -28,4 +30,4 @@
     "prettier": "^2.2.1",
     "vue-template-compiler": "^2.6.11"
   }
-}
+}
diff --git a/examples/main-vue/public/index.html b/examples/main-vue/public/index.html
@@ -1,18 +1,20 @@
 <!DOCTYPE html>
 <html lang="">
-  <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>无界vue-demo展示</title>
-    <script>if(window.parent !== window){window.stop()}</script>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
+
+<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>无界vue-demo展示</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>