@moluoxixi/create-app 2.0.402 → 2.0.403

package/dist/types/features.d.ts

@@ -20,6 +20,6 @@ export declare const VUE_FEATURES: readonly ["router", "pinia", "eslint", "i18n"
 /**
  * React 特性 ID
  */
-export declare const REACT_FEATURES: readonly ["router", "zustand", "eslint", "i18n", "sentry", "ant-design"];
+export declare const REACT_FEATURES: readonly ["router", "zustand", "eslint", "i18n", "sentry", "qiankun", "ant-design"];
 export type VueFeatureId = typeof VUE_FEATURES[number];
 export type ReactFeatureId = typeof REACT_FEATURES[number];

package/dist/types/features.js

@@ -36,5 +36,6 @@ export const REACT_FEATURES = [
     'eslint',
     'i18n',
     'sentry',
+    'qiankun',
     'ant-design',
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moluoxixi/create-app",
-  "version": "2.0.402",
+  "version": "2.0.403",
   "type": "module",
   "description": "Create Vue/React projects with atomic layered architecture",
   "main": "dist/index.js",

package/templates/react/base/src/main.tsx.ejs

@@ -3,6 +3,9 @@
  * 初始化 React 应用并挂载到 DOM
  */
 
+<% if (qiankun) { -%>
+import { qiankunWindow, renderWithQiankun } from 'vite-plugin-qiankun/dist/helper'
+<% } -%>
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
@@ -29,11 +32,53 @@ initSentry({
 })
 
 <% } -%>
-const router = createRouter()
+let root: ReturnType<typeof ReactDOM.createRoot> | null = null
+
+/**
+ * 渲染应用
+ * @param props 渲染属性
+ */
+async function render(props: Record<string, unknown> = {}): Promise<void> {
+  const { container } = props as { container?: Element }
+<% if (qiankun) { -%>
+  const basename = qiankunWindow.__POWERED_BY_QIANKUN__
+    ? (qiankunWindow as { __INJECTED_PUBLIC_PATH_BY_QIANKUN__?: string }).__INJECTED_PUBLIC_PATH_BY_QIANKUN__?.split('/')[1]
+    : undefined
+  const router = createRouter({ basename })
+<% } else { -%>
+  const router = createRouter()
+<% } -%>
+
+  const containerElement = container
+    ? container.querySelector('#root') || container
+    : document.getElementById('root')!
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-  </React.StrictMode>,
-)
+  root = ReactDOM.createRoot(containerElement)
+  root.render(
+    <React.StrictMode>
+      <RouterProvider router={router} />
+    </React.StrictMode>,
+  )
+}
+
+<% if (qiankun) { -%>
+if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
+  render({})
+}
+else {
+  renderWithQiankun({
+    async mount(props: Record<string, unknown>) {
+      await render(props)
+    },
+    bootstrap() {},
+    unmount() {
+      root?.unmount()
+      root = null
+    },
+    update() {},
+  })
+}
+<% } else { -%>
+render({})
+<% } -%>
 

package/templates/react/features/qiankun/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "vite-plugin-qiankun": "^1.0.15"
+  }
+}
+

package/templates/react/features/qiankun/src/qiankun/index.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react'
+import type { Router } from '@remix-run/router'
+import {
+  renderWithQiankun,
+  qiankunWindow,
+} from 'vite-plugin-qiankun/dist/helper'
+
+let root: ReturnType<typeof import('react-dom/client').createRoot> | null = null
+let router: Router | null = null
+
+/**
+ * Qiankun 微前端 Props 接口
+ */
+interface QiankunProps {
+  /** 容器元素（可选） */
+  container?: Element
+  /** 其他自定义属性 */
+  [key: string]: unknown
+}
+
+/**
+ * Qiankun 渲染选项接口
+ */
+interface RenderOptions {
+  /** 创建 React 根节点的函数 */
+  createRoot: (container: Element | DocumentFragment) => ReturnType<typeof import('react-dom/client').createRoot>
+  /** 创建 React Router 实例的函数 */
+  createRouter: (basename?: string) => Router
+  /** 创建应用组件的函数 */
+  createApp: (router: Router) => ReactNode
+  /** 容器选择器或元素 */
+  container?: string | Element
+}
+
+/**
+ * 设置 Qiankun 微前端
+ * @param options 渲染选项
+ */
+export function setupQiankun(options: RenderOptions): void {
+  const { createRoot, createRouter, createApp, container = '#root' } = options
+
+  renderWithQiankun({
+    mount(props: QiankunProps) {
+      const containerElement = props.container
+        ? props.container.querySelector('#root') || props.container
+        : typeof container === 'string'
+          ? document.querySelector(container)!
+          : container
+
+      root = createRoot(containerElement)
+      const basename = qiankunWindow.__POWERED_BY_QIANKUN__
+        ? (qiankunWindow as { __INJECTED_PUBLIC_PATH_BY_QIANKUN__?: string }).__INJECTED_PUBLIC_PATH_BY_QIANKUN__?.split('/')[1]
+        : undefined
+      router = createRouter(basename)
+      root.render(createApp(router))
+    },
+    bootstrap() {
+      console.log('[Qiankun] bootstrap')
+    },
+    unmount() {
+      if (root) {
+        root.unmount()
+        root = null
+        router = null
+      }
+    },
+    update() {
+      console.log('[Qiankun] update')
+    },
+  })
+}
+
+/**
+ * 判断是否运行在 Qiankun 微前端环境中
+ * @returns 是否在 Qiankun 环境中
+ */
+export function isQiankun(): boolean {
+  return qiankunWindow.__POWERED_BY_QIANKUN__ || false
+}
+

package/templates/vue/base/src/main.ts.ejs

@@ -4,7 +4,6 @@
  */
 
 <% if (qiankun) { -%>
-import type { QiankunProps } from 'vite-plugin-qiankun/dist/helper'
 import { qiankunWindow, renderWithQiankun } from 'vite-plugin-qiankun/dist/helper'
 <% } -%>
 import { createApp } from 'vue'
@@ -26,11 +25,14 @@ import '@/assets/styles/element/index.scss'
 import '@/assets/styles/main.scss'
 import '@/assets/fonts/index.css'
 
-<% if (qiankun) { -%>
 let app: ReturnType<typeof createApp> | null = null
 
-async function render(props: QiankunProps = {}): Promise<void> {
-  const { container } = props
+/**
+ * 渲染应用
+ * @param props 渲染属性
+ */
+async function render(props: Record<string, unknown> = {}): Promise<void> {
+  const { container } = props as { container?: Element }
   app = createApp(App)
 
   directives(app)
@@ -59,12 +61,13 @@ async function render(props: QiankunProps = {}): Promise<void> {
   }
 }
 
+<% if (qiankun) { -%>
 if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
   render({})
 }
 else {
   renderWithQiankun({
-    async mount(props: QiankunProps) {
+    async mount(props: Record<string, unknown>) {
       await render(props)
     },
     bootstrap() {},
@@ -76,25 +79,6 @@ else {
   })
 }
 <% } else { -%>
-const app = createApp(App)
-
-directives(app)
-const router = getRouter({})
-
-<% if (sentry) { -%>
-initSentry(app, router, {
-  dsn: import.meta.env.VITE_SENTRY_DSN,
-  environment: import.meta.env.MODE,
-})
-
-<% } -%>
-app.use(store)
-<% if (i18n) { -%>
-app.use(i18n)
-<% } -%>
-app.use(router)
-app.config.warnHandler = () => null
-
-app.mount('#app')
+render({})
 <% } -%>
 

package/templates/vue/base/src/router/index.ts.ejs

@@ -3,7 +3,6 @@
  */
 
 <% if (qiankun) { -%>
-import type { QiankunProps } from 'vite-plugin-qiankun/dist/helper'
 import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
 <% } -%>
 import { createRouter, createWebHistory } from 'vue-router'
@@ -13,27 +12,25 @@ import routes from '~pages'
 import { routes } from './routes'
 <% } -%>
 
-<% if (qiankun) { -%>
-export default function getRouter(props: QiankunProps = {}) {
+/**
+ * 获取路由实例
+ * @param props 路由属性
+ * @returns 路由实例
+ */
+export default function getRouter(props: Record<string, unknown> = {}) {
   const router = createRouter({
     history: createWebHistory(
+<% if (qiankun) { -%>
       qiankunWindow.__POWERED_BY_QIANKUN__
         ? '/sub-app/'
         : import.meta.env.BASE_URL,
-    ),
-    routes,
-  })
-
-  return router
-}
 <% } else { -%>
-export default function getRouter(_props: Record<string, unknown> = {}) {
-  const router = createRouter({
-    history: createWebHistory(import.meta.env.BASE_URL),
+      import.meta.env.BASE_URL,
+<% } -%>
+    ),
     routes,
   })
 
   return router
 }
-<% } -%>