feat: wujie demo add css isolation

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 dist
-# build dir
+# Build dir
 micro-app-demos
 node_modules
 .history

README.md

@@ -125,7 +125,7 @@ pnpm run wujie-demo:start
 
 - [x] 应用间通信
 - [x] 多个子应用共存
-- [ ] CSS隔离
+- [x] CSS隔离
 - [ ] 主子应用间跳转
 - [ ] 嵌套子应用
 - [ ] 资源预加载

packages/wujie-demo/vite-child/src/router.tsx

@@ -3,6 +3,7 @@ import { createHashRouter, Outlet, RouteObject } from 'react-router-dom'
 
 const CommunicationTest = lazy(() => import('@/views/CommunicationTest'))
 const NavigateView = lazy(() => import('@/views/NavigateView'))
+const CssIsolation = lazy(() => import('@/views/CssIsolation'))
 
 const basename = window.__POWERED_BY_WUJIE__ ? '/viteApp' : '/'
 
@@ -20,6 +21,10 @@ const routes: RouteObject[] = [
         path: 'navigate-view',
         element: <NavigateView />,
       },
+      {
+        path: 'css-isolation',
+        element: <CssIsolation />
+      }
     ]
   }
 ]

packages/wujie-demo/vite-child/src/views/CssIsolation/index.module.less

@@ -0,0 +1,11 @@
+.first-col {
+  color: #ffffff;
+  background-color: brown;
+  font-size: 16px;
+}
+
+.second-col {
+  color: #ffffff;
+  background-color: blueviolet;
+  font-size: 16px;
+}

packages/wujie-demo/vite-child/src/views/CssIsolation/index.tsx

@@ -0,0 +1,18 @@
+import { Col, Row, Typography } from 'antd'
+import styles from './index.module.less'
+
+export default function CssIsolation() {
+  return (
+    <>
+      <Row>
+        <Col>
+          <Typography.Title>vite子应用(CSS Module)</Typography.Title>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={12} className={styles.firstCol}>class="first-col"<br />background-color: brown;<br />font-size: 16px;</Col>
+        <Col span={12} className={styles.secondCol}>class="second-col"<br />background-color: blueviolet;<br />font-size: 16px;</Col>
+      </Row>
+    </>
+  )
+}

packages/wujie-demo/vite-child/vite.config.ts

@@ -29,6 +29,9 @@ export default defineConfig(({ mode }) => ({
     }),
   ],
   css: {
+    modules: {
+      localsConvention: 'camelCaseOnly',
+    },
     preprocessorOptions: {
       less: {
         modifyVars: {

packages/wujie-demo/vue3-main/src/views/CoexistMicroApp.vue

@@ -79,7 +79,7 @@ export default {
 import { useAppStore } from '@/stores/app'
 import { storeToRefs } from 'pinia'
 import WujieVue from 'wujie-vue3'
-import { computed, ref, toRaw, watch } from 'vue'
+import { ref, toRaw, watch } from 'vue'
 import type { MicroApp } from '@/data/appData'
 import { useUserStore } from '@/stores/user'
 

packages/wujie-demo/vue3-main/src/views/CssIsolation.vue

@@ -8,6 +8,24 @@
     <a-col :span="12" class="first-col">class="first-col"<br />background-color: red;<br />font-size: 50px;</a-col>
     <a-col :span="12" class="second-col">class="second-col"<br />background-color: green;<br />font-size: 50px;</a-col>
   </a-row>
+  <wujie-vue
+    v-if="vue2App"
+    class="app"
+    :name="vue2App.name"
+    :url="vue2App.url"
+  />
+  <wujie-vue
+    v-if="reactApp"
+    class="app"
+    :name="reactApp.name"
+    :url="reactApp.url"
+  />
+  <wujie-vue
+    v-if="viteApp"
+    class="app"
+    :name="viteApp.name"
+    :url="viteApp.url"
+  />
 </template>
 
 <script lang="ts">
@@ -17,6 +35,44 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { useAppStore } from '@/stores/app'
+import WujieVue from 'wujie-vue3'
+import { watch, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import type { MicroApp } from '@/data/appData'
+
+const { apps } = storeToRefs(useAppStore())
+
+const vue2App = ref<MicroApp | null>(null)
+const reactApp = ref<MicroApp | null>(null)
+const viteApp = ref<MicroApp | null>(null)
+
+watch(
+  apps.value,
+  (newApp) => {
+    newApp.forEach((item) => {
+      if (item.name === 'vue2App') {
+        vue2App.value = {
+          ...item,
+          url: `${item.url}#/vue2App/css-isolation`
+        }
+      } else if (item.name === 'reactApp') {
+        reactApp.value = {
+          ...item,
+          url: `${item.url}#/reactApp/css-isolation`
+        }
+      } else if (item.name === 'viteApp') {
+        viteApp.value = {
+          ...item,
+          url: `${item.url}#/viteApp/css-isolation`
+        }
+      }
+    })
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <style lang="less" scoped>
@@ -31,4 +87,8 @@ export default {
   background-color: green;
   font-size: 50px;
 }
+
+.app {
+  margin-top: 20px;
+}
 </style>