fix: 修复使用twind切换应用样式丢失的问题 (#131)

close #116 * chore: 修改打包脚本 * fix: 修复使用twind切换应用样式丢失的问题
Tencent · Sep 5, 2022 · 71d81b7 · 71d81b7
1 parent fa3fc00
commit 71d81b7
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 41 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -28,8 +28,8 @@ jobs:
 
       - name: publish to npm
         run: |
-          ../node_modules/.bin/lerna run prepack
-          ../node_modules/.bin/lerna publish from-package --no-verify-access --ignore-scripts -y
+          ./node_modules/.bin/lerna run prepack
+          ./node_modules/.bin/lerna publish from-package --no-verify-access --ignore-scripts -y
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
 
diff --git a/docs/wujie/components/wujie-connect.vue b/docs/wujie/components/wujie-connect.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 const emit = defineEmits(["changeUrl"]);
-const url = ref("https://wujicode.cn/xy/app/prod/official/home");
+const url = ref("https://wujicode.cn/xy/app/prod/official/index");
 const flag = ref(false);
 function preventDefault(event) {
   event.preventDefault;

diff --git a/docs/wujie/components/wujie-online.vue b/docs/wujie/components/wujie-online.vue
@@ -12,7 +12,7 @@ const props = withDefaults(
   }>(),
   {}
 );
-const wujieUrl = ref<string>("https://wujicode.cn/xy/app/prod/official/home");
+const wujieUrl = ref<string>("https://wujicode.cn/xy/app/prod/official/index");
 
 watch(
   () => props.flag,
@@ -37,6 +37,8 @@ loading.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height
 </rect>
 </svg>`;
 
+const attrs = process.env.NODE_ENV === "production" ? { src: "//wujie-micro.github.io/doc" } : {};
+
 function changeWujieUrl(item) {
   wujieUrl.value = item.url;
   emit("update:url", item.url);
@@ -51,6 +53,7 @@ function changeWujieUrl(item) {
         :key="wujieUrl"
         v-if="wujieUrl"
         :name="wujieUrl"
+        :attrs="attrs"
         alive
         :url="wujieUrl"
         :loading="loading"

diff --git a/examples/main-react/src/hostMap.js b/examples/main-react/src/hostMap.js
@@ -5,6 +5,8 @@ const map = {
   "//localhost:7400/": "//wujie-micro.github.io/demo-angular12/",
   "//localhost:7500/": "//wujie-micro.github.io/demo-vite/",
   "//localhost:7600/": "//wujie-micro.github.io/demo-react16/",
+  "//localhost:7700/": "//wujie-micro.github.io/demo-main-react/",
+  "//localhost:8000/": "//wujie-micro.github.io/demo-main-vue/",
 };
 
 export default function hostMap(host) {

diff --git a/examples/main-react/src/index.js b/examples/main-react/src/index.js
@@ -17,12 +17,20 @@ const isProduction = process.env.NODE_ENV === "production";
 bus.$on("click", (msg) => window.alert(msg));
 
 const degrade = window.localStorage.getItem("degrade") === "true" || !window.Proxy || !window.CustomElementRegistry;
-// 创建应用，主要是设置配置，preloadApp、startApp的配置基于这个配置做覆盖
+/**
+ * 大部分业务无需设置 attrs
+ * 此处修正 iframe 的 src，是防止github pages csp报错
+ * 因为默认是只有 host+port，没有携带路径
+ */
+const attrs = isProduction ? { src: hostMap("//localhost:7700/") } : {};
+/**
+ * 配置应用，主要是设置默认配置
+ * preloadApp、startApp的配置会基于这个配置做覆盖
+ */
 setupApp({
   name: "react16",
   url: hostMap("//localhost:7600/"),
-  // 修正iframe的url，防止github pages csp报错，大部分业务无需使用
-  attrs: isProduction ? { src: hostMap("//localhost:7600/") } : {},
+  attrs,
   exec: true,
   fetch: credentialsFetch,
   plugins,
@@ -34,7 +42,7 @@ setupApp({
 setupApp({
   name: "react17",
   url: hostMap("//localhost:7100/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7100/") } : {},
+  attrs,
   exec: true,
   alive: true,
   fetch: credentialsFetch,
@@ -45,7 +53,7 @@ setupApp({
 setupApp({
   name: "vue2",
   url: hostMap("//localhost:7200/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7200/") } : {},
+  attrs,
   exec: true,
   fetch: credentialsFetch,
   degrade,
@@ -55,7 +63,7 @@ setupApp({
 setupApp({
   name: "vue3",
   url: hostMap("//localhost:7300/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7300/") } : {},
+  attrs,
   exec: true,
   alive: true,
   plugins: [{ cssExcludes: ["https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"] }],
@@ -69,7 +77,7 @@ setupApp({
 setupApp({
   name: "angular12",
   url: hostMap("//localhost:7400/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7400/") } : {},
+  attrs,
   exec: true,
   fetch: credentialsFetch,
   degrade,
@@ -79,7 +87,7 @@ setupApp({
 setupApp({
   name: "vite",
   url: hostMap("//localhost:7500/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7500/") } : {},
+  attrs,
   exec: true,
   fetch: credentialsFetch,
   degrade,

diff --git a/examples/main-vue/src/hostMap.js b/examples/main-vue/src/hostMap.js
@@ -5,6 +5,8 @@ const map = {
   "//localhost:7400/": "//wujie-micro.github.io/demo-angular12/",
   "//localhost:7500/": "//wujie-micro.github.io/demo-vite/",
   "//localhost:7600/": "//wujie-micro.github.io/demo-react16/",
+  "//localhost:7700/": "//wujie-micro.github.io/demo-main-react/",
+  "//localhost:8000/": "//wujie-micro.github.io/demo-main-vue/",
 };
 
 export default function hostMap(host) {

diff --git a/examples/main-vue/src/main.js b/examples/main-vue/src/main.js
@@ -26,7 +26,6 @@ bus.$on("click", (msg) => window.alert(msg));
 
 // 在 xxx-sub 路由下子应用将激活路由同步给主应用，主应用跳转对应路由高亮菜单栏
 bus.$on("sub-route-change", (name, path) => {
-  debugger;
   const mainName = `${name}-sub`;
   const mainPath = `/${name}-sub${path}`;
   const currentName = router.currentRoute.name;
@@ -42,26 +41,33 @@ const props = {
     router.push({ name });
   },
 };
-// 创建应用，主要是设置配置，preloadApp、startApp的配置基于这个配置做覆盖
+/**
+ * 大部分业务无需设置 attrs
+ * 此处修正 iframe 的 src，是防止github pages csp报错
+ * 因为默认是只有 host+port，没有携带路径
+ */
+const attrs = isProduction ? { src: hostMap("//localhost:8000/") } : {};
+/**
+ * 配置应用，主要是设置默认配置
+ * preloadApp、startApp的配置会基于这个配置做覆盖
+ */
 setupApp({
   name: "react16",
   url: hostMap("//localhost:7600/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7600/") } : {},
+  attrs,
   exec: true,
   props,
   fetch: credentialsFetch,
   plugins,
   prefix: { "prefix-dialog": "/dialog", "prefix-location": "/location" },
   degrade,
-  // 修正iframe的url，防止github pages csp报错
-  react16Attrs: process.env.NODE_ENV === "production" ? { src: hostMap("//localhost:7600/") } : {},
   ...lifecycles,
 });
 
 setupApp({
   name: "react17",
   url: hostMap("//localhost:7100/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7100/") } : {},
+  attrs,
   exec: true,
   alive: true,
   props,
@@ -73,7 +79,7 @@ setupApp({
 setupApp({
   name: "vue2",
   url: hostMap("//localhost:7200/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7200/") } : {},
+  attrs,
   exec: true,
   props,
   fetch: credentialsFetch,
@@ -84,7 +90,7 @@ setupApp({
 setupApp({
   name: "vue3",
   url: hostMap("//localhost:7300/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7300/") } : {},
+  attrs,
   exec: true,
   alive: true,
   plugins: [{ cssExcludes: ["https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"] }],
@@ -99,7 +105,7 @@ setupApp({
 setupApp({
   name: "angular12",
   url: hostMap("//localhost:7400/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7400/") } : {},
+  attrs,
   exec: true,
   props,
   fetch: credentialsFetch,
@@ -110,7 +116,7 @@ setupApp({
 setupApp({
   name: "vite",
   url: hostMap("//localhost:7500/"),
-  attrs: isProduction ? { src: hostMap("//localhost:7500/") } : {},
+  attrs,
   exec: true,
   props,
   fetch: credentialsFetch,

diff --git a/packages/wujie-core/__test__/integration/font.test.ts b/packages/wujie-core/__test__/integration/font.test.ts
@@ -1,4 +1,4 @@
-import { awaitConsoleLogMessage, triggerClickByJsSelector } from "./utils";
+import { awaitConsoleLogMessage, triggerClickByJsSelector, sleep } from "./utils";
 import { reactMainAppInfoMap, vueMainAppInfoMap } from "./common";
 
 describe("main react startApp", () => {
@@ -23,7 +23,7 @@ describe("main react startApp", () => {
     // 等待字体加载
     await page.waitForResponse((response) => response.url().includes("https://tdesign.gtimg.com/icon/"));
     // 等待字体装载
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await sleep(1000);
     // 检查字体是否生效
     expect(await page.evaluate(() => document.fonts.check("12px t", "E07F"))).toBe(true);
   });
@@ -50,7 +50,7 @@ describe("main vue startApp", () => {
     // 等待字体加载
     await page.waitForResponse((response) => response.url().includes("https://tdesign.gtimg.com/icon/"));
     // 等待字体装载
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await sleep(1000);
     // 检查字体是否生效
     expect(await page.evaluate(() => document.fonts.check("12px t", "E07F"))).toBe(true);
   });

diff --git a/packages/wujie-core/__test__/integration/host.test.ts b/packages/wujie-core/__test__/integration/host.test.ts
@@ -1,4 +1,4 @@
-import { awaitConsoleLogMessage, triggerClickByJsSelector } from "./utils";
+import { awaitConsoleLogMessage, triggerClickByJsSelector, sleep } from "./utils";
 import { reactMainAppInfoMap, vueMainAppInfoMap } from "./common";
 
 const generateTest = (AppInfoMap: typeof reactMainAppInfoMap | typeof vueMainAppInfoMap) => {
@@ -8,13 +8,15 @@ const generateTest = (AppInfoMap: typeof reactMainAppInfoMap | typeof vueMainApp
     await page.click(AppInfoMap.vue2.linkSelector);
     await vue2MountedPromise;
     let vue2HomeTitle = await page.evaluateHandle(AppInfoMap.vue2.titleJsSelector);
+    await sleep(100);
     expect(await vue2HomeTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe(
       "rgb(241, 107, 95)"
     );
     const vue2DialogMountedPromise = awaitConsoleLogMessage(page, AppInfoMap.vue2.dialogMountedMessage);
     await triggerClickByJsSelector(page, AppInfoMap.vue2.dialogNavSelector);
     await vue2DialogMountedPromise;
     const vue2DialogTitle = await page.evaluateHandle(AppInfoMap.vue2.titleJsSelector);
+    await sleep(100);
     expect(await vue2DialogTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe(
       "rgb(2, 57, 208)"
     );
@@ -23,13 +25,15 @@ const generateTest = (AppInfoMap: typeof reactMainAppInfoMap | typeof vueMainApp
     await page.click(AppInfoMap.vue3.linkSelector);
     await vue3MountedPromise;
     let vue3HomeTitle = await page.evaluateHandle(AppInfoMap.vue3.titleJsSelector);
+    await sleep(100);
     expect(await vue3HomeTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe(
       "rgb(241, 107, 95)"
     );
     let vue3DialogMountedPromise = awaitConsoleLogMessage(page, AppInfoMap.vue3.dialogMountedMessage);
     await triggerClickByJsSelector(page, AppInfoMap.vue3.dialogNavSelector);
     await vue3DialogMountedPromise;
     let vue3DialogTitle = await page.evaluateHandle(AppInfoMap.vue3.titleJsSelector);
+    await sleep(100);
     expect(await vue3DialogTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe(
       "rgb(2, 57, 208)"
     );
@@ -38,13 +42,15 @@ const generateTest = (AppInfoMap: typeof reactMainAppInfoMap | typeof vueMainApp
     await page.click(AppInfoMap.vite.linkSelector);
     await viteMountedPromise;
     let viteHomeTitle = await page.evaluateHandle(AppInfoMap.vite.titleJsSelector);
+    await sleep(100);
     expect(await viteHomeTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe(
       "rgb(241, 107, 95)"
     );
     let viteDialogMountedPromise = awaitConsoleLogMessage(page, AppInfoMap.vite.dialogMountedMessage);
     await triggerClickByJsSelector(page, AppInfoMap.vite.dialogNavSelector);
     await viteDialogMountedPromise;
     let viteDialogTitle = await page.evaluateHandle(AppInfoMap.vite.titleJsSelector);
+    await sleep(100);
     expect(await viteDialogTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe(
       "rgb(2, 57, 208)"
     );
@@ -53,12 +59,14 @@ const generateTest = (AppInfoMap: typeof reactMainAppInfoMap | typeof vueMainApp
     await page.click(AppInfoMap.vue2.linkSelector);
     await vue2HomeMountPromise;
     vue2HomeTitle = await page.evaluateHandle(AppInfoMap.vue2.titleJsSelector);
+    await sleep(100);
     expect(await vue2HomeTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe("rgb(2, 57, 208)");
     // back to vue3
     vue3MountedPromise = awaitConsoleLogMessage(page, AppInfoMap.vue3.mountedMessage);
     await page.click(AppInfoMap.vue3.linkSelector);
     await vue3MountedPromise;
     vue3DialogTitle = await page.evaluateHandle(AppInfoMap.vue3.titleJsSelector);
+    await sleep(100);
     expect(await vue3DialogTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe(
       "rgb(2, 57, 208)"
     );
@@ -67,6 +75,7 @@ const generateTest = (AppInfoMap: typeof reactMainAppInfoMap | typeof vueMainApp
     await page.click(AppInfoMap.vite.linkSelector);
     await viteMountedPromise;
     viteDialogTitle = await page.evaluateHandle(AppInfoMap.vite.titleJsSelector);
+    await sleep(100);
     expect(await viteDialogTitle.asElement().evaluate((el) => window.getComputedStyle(el).color)).toBe(
       "rgb(2, 57, 208)"
     );

diff --git a/packages/wujie-core/__test__/integration/utils.ts b/packages/wujie-core/__test__/integration/utils.ts
@@ -3,6 +3,9 @@ const path = require("path");
 const http = require("http");
 let server = null;
 type Page = typeof page;
+export function sleep(time) {
+  return new Promise((resolve) => setTimeout(resolve, time));
+}
 
 export function initEnv() {
   server = http.createServer((_req, res) => {