feat: add RouterViewDepth component and improve import map handling (#206)

lzxb · web-flow · commit 76331afe4734 · 2025-10-31T15:32:38.000+08:00
- Add RouterViewDepth component to router-vue package
- Remove fixNestedScopesResolution usage in core package
- Update rspack dependencies to latest versions
- Update module federation dependencies
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -22,7 +22,7 @@ import {
 import type { ImportmapMode } from './render-context';
 import type { RenderContext, RenderContextOptions } from './render-context';
 import { type CacheHandle, createCache } from './utils/cache';
-import { fixNestedScopesResolution, getImportMap } from './utils/import-map';
+import { getImportMap } from './utils/import-map';
 import type { Middleware } from './utils/middleware';
 import { type ProjectPath, resolvePath } from './utils/resolve-path';
 import { getImportPreloadInfo as getStaticImportPaths } from './utils/static-import-lexer';
@@ -854,17 +854,15 @@ export class Esmx {
             let json: ImportMap = {};
             switch (env) {
                 case 'client': {
-                    json = fixNestedScopesResolution(
-                        getImportMap({
-                            manifests,
-                            getScope(name, scope) {
-                                return `/${name}${scope}`;
-                            },
-                            getFile(name, file) {
-                                return `/${name}/${file}`;
-                            }
-                        })
-                    );
+                    json = getImportMap({
+                        manifests,
+                        getScope(name, scope) {
+                            return `/${name}${scope}`;
+                        },
+                        getFile(name, file) {
+                            return `/${name}/${file}`;
+                        }
+                    });
                     break;
                 }
                 case 'server':
diff --git a/packages/router-vue/src/index.test.ts b/packages/router-vue/src/index.test.ts
@@ -79,6 +79,7 @@ describe('index.ts - Package Entry Point', () => {
                 // Components
                 'RouterLink',
                 'RouterView',
+                'RouterViewDepth',
                 // Plugin
                 'RouterPlugin'
             ];
@@ -102,6 +103,7 @@ describe('index.ts - Package Entry Point', () => {
                 'getRoute',
                 'RouterLink',
                 'RouterView',
+                'RouterViewDepth',
                 'RouterPlugin'
             ];
 
diff --git a/packages/router-vue/src/index.ts b/packages/router-vue/src/index.ts
@@ -11,6 +11,6 @@ export {
 } from './use';
 
 export { RouterLink } from './router-link';
-export { RouterView } from './router-view';
+export { RouterView, RouterViewDepth } from './router-view';
 
 export { RouterPlugin } from './plugin';
diff --git a/packages/router-vue/src/router-view.test.ts b/packages/router-vue/src/router-view.test.ts
@@ -231,13 +231,13 @@ describe('router-view.ts - RouterView Component', () => {
             let injectedDepth: number | undefined;
 
             // Use the same symbol key that RouterView uses internally
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             // Create a custom RouterView component that can capture the injected depth
             const TestRouterView = defineComponent({
                 name: 'TestRouterView',
                 setup() {
-                    injectedDepth = inject(RouterViewDepthKey, -1);
+                    injectedDepth = inject(RouterViewDepth, -1);
                     return () => h(RouterView);
                 }
             });
@@ -263,13 +263,13 @@ describe('router-view.ts - RouterView Component', () => {
             let parentDepth: number | undefined;
             let childDepth: number | undefined;
 
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             const ParentTestComponent = defineComponent({
                 name: 'ParentTestComponent',
                 setup() {
-                    parentDepth = inject(RouterViewDepthKey, -1);
-                    provide(RouterViewDepthKey, 0); // Simulate parent RouterView
+                    parentDepth = inject(RouterViewDepth, -1);
+                    provide(RouterViewDepth, 0); // Simulate parent RouterView
                     return () =>
                         h('div', [h('span', 'Parent'), h(ChildTestComponent)]);
                 }
@@ -278,7 +278,7 @@ describe('router-view.ts - RouterView Component', () => {
             const ChildTestComponent = defineComponent({
                 name: 'ChildTestComponent',
                 setup() {
-                    childDepth = inject(RouterViewDepthKey, -1);
+                    childDepth = inject(RouterViewDepth, -1);
                     return () => h('div', 'Child');
                 }
             });
@@ -362,14 +362,14 @@ describe('router-view.ts - RouterView Component', () => {
 
     describe('Edge Cases and Error Handling', () => {
         it('should render null when no route matches at current depth', async () => {
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             const DeepRouterView = defineComponent({
                 name: 'DeepRouterView',
                 setup() {
                     // Inject depth 0 from parent RouterView and provide depth 1
-                    const currentDepth = inject(RouterViewDepthKey, 0);
-                    provide(RouterViewDepthKey, currentDepth + 1);
+                    const currentDepth = inject(RouterViewDepth, 0);
+                    provide(RouterViewDepth, currentDepth + 1);
                     return () => h(RouterView);
                 }
             });
diff --git a/packages/router-vue/src/router-view.ts b/packages/router-vue/src/router-view.ts
@@ -2,7 +2,7 @@ import { defineComponent, h, inject, provide } from 'vue';
 import { useRoute } from './use';
 import { resolveComponent } from './util';
 
-const RouterViewDepthKey = Symbol('RouterViewDepth');
+export const RouterViewDepth = Symbol('RouterViewDepth');
 
 /**
  * RouterView component for rendering matched route components.
@@ -39,11 +39,11 @@ export const RouterView = defineComponent({
 
         // Get current RouterView depth from parent RouterView (if any)
         // This enables proper nested routing by tracking how deep we are in the component tree
-        const depth = inject(RouterViewDepthKey, 0);
+        const depth = inject(RouterViewDepth, 0);
 
         // Provide depth + 1 to child RouterView components
         // This ensures each nested RouterView renders the correct route component
-        provide(RouterViewDepthKey, depth + 1);
+        provide(RouterViewDepth, depth + 1);
 
         return () => {
             // Get the matched route configuration at current depth
diff --git a/packages/rspack-module-link-plugin/package.json b/packages/rspack-module-link-plugin/package.json
@@ -34,7 +34,7 @@
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
         "@esmx/core": "workspace:*",
-        "@rspack/core": "1.6.0-beta.1",
+        "@rspack/core": "1.6.0",
         "@types/node": "^24.0.0",
         "@vitest/coverage-v8": "3.2.4",
         "typescript": "5.9.2",
diff --git a/packages/rspack/package.json b/packages/rspack/package.json
@@ -66,7 +66,7 @@
         "@esmx/import": "workspace:*",
         "@esmx/rspack-module-link-plugin": "workspace:*",
         "@npmcli/arborist": "^9.0.1",
-        "@rspack/core": "1.6.0-beta.1",
+        "@rspack/core": "1.6.0",
         "css-loader": "^7.1.2",
         "less-loader": "^12.2.0",
         "node-polyfill-webpack-plugin": "^4.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
