@fulgurjs/federation 5.8.0 → 5.9.0

package/examples/templates/showcase/vue-remote/src/pages/Locked.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/**
+ * examples/templates/showcase/vue-remote/src/pages/Locked.vue — 锁定页（守卫放行后才可见）。
+ * 前往本页的导航会被宿主守卫（Vue：异步 beforeEach；React：useBlocker）拦截，等待「继续/取消」。
+ */
+import { useRouter } from 'vue-router'
+import { reportNav } from '../child-bus'
+
+const router = useRouter()
+
+const handleBack = (): void => {
+  reportNav('子应用 Link', 'push', '/orders')
+  void router.push('/orders')
+}
+</script>
+
+<template>
+  <section class="demo-page">
+    <h3 class="demo-page-title">锁定页（子应用路由 /locked）</h3>
+    <p>你能看到本页，说明宿主守卫选择了「继续」。</p>
+    <p><button @click="handleBack">回工单列表</button></p>
+  </section>
+</template>
+
+<style scoped>
+.demo-page { padding: 8px 0; }
+.demo-page-title { margin: 4px 0; }
+</style>

package/examples/templates/showcase/vue-remote/src/pages/OrderDetail.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * examples/templates/showcase/vue-remote/src/pages/OrderDetail.vue — 工单详情页（路径参数 /orders/:id）。
+ * 「返回列表」走 go(-1)（委托宿主浏览器历史）；「回列表」走 push（经通道写宿主 URL）。
+ */
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { reportNav } from '../child-bus'
+
+const route = useRoute()
+const router = useRouter()
+
+const id = computed(() => String(route.params.id ?? ''))
+const queryEcho = computed(() => {
+  const rest = route.fullPath.slice(route.path.length)
+  return rest === '' ? '（无）' : rest
+})
+
+const handleBack = (): void => {
+  reportNav('子应用 go', 'go', '-1')
+  router.back()
+}
+
+const handleLinkBack = (): void => {
+  reportNav('子应用 Link', 'push', '/orders')
+  void router.push('/orders')
+}
+</script>
+
+<template>
+  <section class="demo-page">
+    <h3 class="demo-page-title">工单详情（子应用路由 /orders/:id）</h3>
+    <p>工单 ID：<code>{{ id }}</code>；query 回显：<code>{{ queryEcho }}</code></p>
+    <div class="demo-row">
+      <button @click="handleBack">返回列表（go(-1)）</button>
+      <button @click="handleLinkBack">回列表（push /orders）</button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.demo-page { padding: 8px 0; }
+.demo-page-title { margin: 4px 0; }
+.demo-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
+.demo-row button { cursor: pointer; }
+</style>

package/examples/templates/showcase/vue-remote/src/pages/OrderList.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+/**
+ * examples/templates/showcase/vue-remote/src/pages/OrderList.vue — 工单列表页（筛选 + 分页）。
+ * 筛选关键词与页码写入子应用路由 query（q=xxx&page=n，中文可输入），
+ * 经桥接通道同步到宿主 URL；跳详情再返回时组件重建、状态从 query 还原。
+ */
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { reportNav } from '../child-bus'
+
+interface OrderItem {
+  id: number
+  title: string
+}
+
+const ORDERS: OrderItem[] = [
+  { id: 1, title: '登录异常排查' },
+  { id: 2, title: '网络抖动投诉' },
+  { id: 3, title: '权限配置变更' },
+  { id: 4, title: '数据导出失败' },
+  { id: 5, title: '消息推送延迟' },
+  { id: 6, title: '账单核对差异' },
+  { id: 7, title: '接口超时告警' },
+  { id: 8, title: '存储扩容申请' },
+]
+const PAGE_SIZE = 3
+
+const route = useRoute()
+const router = useRouter()
+
+const queryText = computed(() => (typeof route.query.q === 'string' ? route.query.q : ''))
+const page = computed(() => {
+  const raw = typeof route.query.page === 'string' ? Number.parseInt(route.query.page, 10) : 1
+  return Number.isFinite(raw) && raw > 0 ? raw : 1
+})
+// 输入框初值跟随当前 q：详情返回后组件重建，仍能还原筛选
+const qInput = ref(queryText.value)
+
+const filtered = computed(() =>
+  queryText.value === '' ? ORDERS : ORDERS.filter((item) => item.title.includes(queryText.value)),
+)
+const totalPages = computed(() => Math.max(1, Math.ceil(filtered.value.length / PAGE_SIZE)))
+const pageItems = computed(() => filtered.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE))
+
+const buildTarget = (qValue: string, pageValue: number): string =>
+  `/orders?page=${pageValue}${qValue === '' ? '' : `&q=${encodeURIComponent(qValue)}`}`
+
+const handleSearch = (): void => {
+  const target = buildTarget(qInput.value.trim(), 1)
+  reportNav('子应用 push/replace', 'push', target)
+  void router.push(target)
+}
+
+const handlePageStep = (delta: number): void => {
+  const next = Math.min(totalPages.value, Math.max(1, page.value + delta))
+  if (next === page.value) return
+  const target = buildTarget(queryText.value, next)
+  reportNav('子应用 push/replace', 'push', target)
+  void router.push(target)
+}
+
+const handleOpenDetail = (item: OrderItem): void => {
+  reportNav('子应用 Link', 'push', `/orders/${item.id}?src=row`)
+  void router.push(`/orders/${item.id}?src=row`)
+}
+
+const handleGoSettings = (): void => {
+  reportNav('子应用 Link', 'push', '/settings')
+  void router.push('/settings')
+}
+
+const handleGoLocked = (): void => {
+  reportNav('子应用 Link', 'push', '/locked')
+  void router.push('/locked')
+}
+</script>
+
+<template>
+  <section class="demo-page">
+    <h3 class="demo-page-title">工单列表（子应用路由 /orders）</h3>
+    <p class="demo-muted">
+      当前筛选：q={{ queryText === '' ? '（空）' : queryText }}，页码：{{ page }}/{{ totalPages }}（来自子应用路由 query）
+    </p>
+    <div class="demo-row">
+      <input v-model="qInput" placeholder="输入筛选关键词（支持中文，如：网络）" aria-label="筛选关键词" />
+      <button @click="handleSearch">筛选（push ?q=&amp;page=1）</button>
+    </div>
+    <ul class="demo-order-list">
+      <li v-for="item in pageItems" :key="item.id">
+        <span>#{{ item.id }} {{ item.title }}</span>
+        <button @click="handleOpenDetail(item)">查看详情</button>
+      </li>
+      <li v-if="pageItems.length === 0" class="demo-muted">无匹配工单</li>
+    </ul>
+    <div class="demo-row">
+      <button :disabled="page <= 1" @click="handlePageStep(-1)">上一页</button>
+      <span>第 {{ page }} / {{ totalPages }} 页</span>
+      <button :disabled="page >= totalPages" @click="handlePageStep(1)">下一页</button>
+    </div>
+    <div class="demo-row">
+      <button @click="handleGoSettings">前往设置页</button>
+      <button @click="handleGoLocked">锁定页（触发宿主守卫）</button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.demo-page { padding: 8px 0; }
+.demo-page-title { margin: 4px 0; }
+.demo-muted { color: #666; font-size: 13px; margin: 4px 0; }
+.demo-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
+.demo-row button { cursor: pointer; }
+.demo-order-list { list-style: none; padding: 0; margin: 8px 0; }
+.demo-order-list li { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
+.demo-order-list button { cursor: pointer; }
+</style>

package/examples/templates/showcase/vue-remote/src/pages/Settings.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * examples/templates/showcase/vue-remote/src/pages/Settings.vue — 设置页（本地状态表单，状态刻意不进 URL）。
+ * v-model 直写模块级 settings-store：路由往返后仍保留 → 佐证子应用 store 未重建。
+ */
+import { settingsState } from '../settings-store'
+</script>
+
+<template>
+  <section class="demo-page">
+    <h3 class="demo-page-title">设置（子应用路由 /settings，本地状态）</h3>
+    <div class="demo-form">
+      <label>昵称：<input v-model="settingsState.nickname" /></label>
+      <label><input v-model="settingsState.notifyEnabled" type="checkbox" /> 接收通知</label>
+      <label>
+        主题：
+        <select v-model="settingsState.theme">
+          <option value="light">浅色</option>
+          <option value="dark">深色</option>
+        </select>
+      </label>
+    </div>
+    <p class="demo-muted">
+      本表单为子应用本地状态（不在 URL 中）。路由往返后设置仍在 → 子应用未重挂、store 未重建。
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.demo-page { padding: 8px 0; }
+.demo-page-title { margin: 4px 0; }
+.demo-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; max-width: 320px; }
+.demo-muted { color: #666; font-size: 13px; margin: 4px 0; }
+</style>

package/examples/templates/showcase/vue-remote/src/settings-store.ts

@@ -0,0 +1,13 @@
+/**
+ * examples/templates/showcase/vue-remote/src/settings-store.ts — 设置页本地状态（模块级 reactive，刻意不写入 URL）。
+ * 子应用 root 不重挂 → 模块不重建：路由往返后设置仍保留，佐证「内部状态跨路由保留」。
+ */
+import { reactive } from 'vue'
+
+export interface SettingsState {
+  nickname: string
+  notifyEnabled: boolean
+  theme: 'light' | 'dark'
+}
+
+export const settingsState = reactive<SettingsState>({ nickname: '张三', notifyEnabled: true, theme: 'light' })

package/examples/templates/showcase/vue-remote/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "fulgurjs.config.ts", "vite.config.ts"]
+}

package/examples/templates/showcase/vue-remote/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { federation } from '@fulgurjs/federation'
+import fulgurjsConfig from './fulgurjs.config.ts'
+
+export default defineConfig(({ command }) => ({
+  base: command === 'build' ? '/vue-remote/' : undefined,
+  // vue-router 双实例防护（同 fixtures/remote-a）：dedupe 强制单实例；vue-router 不进
+  // 预构建——预构建副本会内联本地 vue，与 shared singleton 协商出的 vue 形成双实例，
+  // 路由 provide/inject 断链。exclude 后走源码，其 vue 导入被插件 dev 改写到 shared 门面。
+  resolve: { dedupe: ['vue', 'vue-router'] },
+  optimizeDeps: { exclude: ['vue-router'] },
+  plugins: [vue(), federation(fulgurjsConfig)],
+}))

package/examples/templates/vue-host-react-remote/README.md

@@ -0,0 +1,18 @@
+# vue-host-react-remote：完整子应用桥接模板
+
+`vue-host/` 是宿主，`react-remote/` 是子应用。复制整个模板目录，在根目录运行：
+
+```bash
+pnpm install --frozen-lockfile
+pnpm dev
+# http://localhost:5314
+```
+
+宿主展示远程应用、上下文传递与会话切换；切换用户或登出会卸载旧代次。远程独立运行与被嵌入时使用不同路由接线。
+
+- 单独启动：`pnpm dev:remote`、`pnpm dev:host`。
+- 生产构建：`pnpm build`，按各子应用配置的 base 部署 dist；远程入口与宿主的 prod 地址必须一致。各子应用 README 提供配置与部署细节。
+- 本模板展示挂载、卸载与会话，不开启宿主/子应用 URL 同步；需要深链、刷新和前进后退，使用 [showcase](../showcase/)。
+- 无 JS 沙箱或自动 CSS 隔离，子应用全局样式和 body 副作用需要自行管理。
+
+环境要求见[模板指南](../README.md)。所有依赖来自 registry，不需要本仓库源码或其他模板。

package/examples/templates/vue-host-react-remote/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "fulgurjs-template-vue-host-react-remote",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev:remote": "pnpm --dir react-remote dev",
+    "dev:host": "pnpm --dir vue-host dev",
+    "dev": "node scripts/dev.mjs",
+    "build": "pnpm --dir react-remote build && pnpm --dir vue-host build"
+  }
+}