@nativescript/vite 8.0.0-alpha.6 → 8.0.0-alpha.61

package/hmr/frameworks/vue/client/index.js

@@ -1,6 +1,11 @@
-import { deriveHttpOrigin, getCore, getCurrentApp, getGraphVersion, getHMRWsUrl, getHttpOriginForVite, normalizeSpec, safeDynImport, safeReadDefault, setCurrentApp } from '../../../client/utils.js';
+import { deriveHttpOrigin, getCore, getCurrentApp, getHMRWsUrl, getHttpOriginForVite, graph, invalidateModulesByUrls, normalizeSpec, safeDynImport, safeReadDefault, setCurrentApp } from '../../../client/utils.js';
+import { getGlobalScope } from '../../../shared/runtime/global-scope.js';
+import { findSfcAncestors } from './dep-propagation.js';
 const APP_VIRTUAL_WITH_SLASH = (() => {
-    const root = typeof __NS_APP_ROOT_VIRTUAL__ === 'string' && __NS_APP_ROOT_VIRTUAL__ ? __NS_APP_ROOT_VIRTUAL__ : '/src';
+    // Define substitution does not reach this raw-served file; prefer the
+    // globalThis seed from the entry's defines-seed module ('app/'-rooted
+    // projects would otherwise get the wrong '/src' default).
+    const root = (typeof __NS_APP_ROOT_VIRTUAL__ === 'string' && __NS_APP_ROOT_VIRTUAL__) || (typeof getGlobalScope().__NS_APP_ROOT_VIRTUAL__ === 'string' && getGlobalScope().__NS_APP_ROOT_VIRTUAL__) || '/src';
     return root.replace(/\/+$/, '') + '/';
 })();
 // Optional runtime knob: allow disabling assembler path in favor of variant-only flow
@@ -16,7 +21,7 @@ export const sfcArtifactMap = new Map();
 // Install dev shims for nativescript-vue navigation to observe and (optionally) rescue
 export function installNsVueDevShims() {
     try {
-        const g = globalThis;
+        const g = getGlobalScope();
         const reg = g.__nsVendorRegistry;
         const req = reg?.get ? g.__nsVendorRequire || g.__nsRequire || g.require : g.__nsRequire || g.require;
         const getMod = (id) => {
@@ -48,13 +53,11 @@ export function installNsVueDevShims() {
                             paramKeys: Object.keys(params || {}),
                         });
                     }
+                    // eslint-disable-next-line prefer-rest-params -- forwards all args verbatim to the patched original (arity-preserving)
                     return orig.apply(this, arguments);
                 }
                 catch (e) {
-                    try {
-                        console.warn('[diag][nv][navigateTo][error]', (e && e.message) || e);
-                    }
-                    catch { }
+                    console.warn('[diag][nv][navigateTo][error]', (e && e.message) || e);
                     try {
                         // Rescue path: attempt navigation via authoritative app Frame
                         return globalThis.__nsNavigateUsingApp?.(component, params);
@@ -89,13 +92,13 @@ export function installNsVueDevShims() {
     catch { }
 }
 // initial root component for back fallback
-let ORIG_ROOT_COMPONENT = null;
+const ORIG_ROOT_COMPONENT = null;
 // Ensure Vue runtime global functions exist before evaluating SFC artifacts that rely on globalThis.* indirections.
 export function ensureVueGlobals() {
     try {
         const g = globalThis;
         const vueAlready = g.defineComponent && g.resolveComponent && g.createVNode;
-        const req = globalThis.__nsVendorRegistry?.get ? globalThis.__nsVendorRequire || globalThis.__nsRequire || globalThis.require : globalThis.__nsRequire || globalThis.require;
+        const req = getGlobalScope().__nsVendorRegistry?.get ? getGlobalScope().__nsVendorRequire || getGlobalScope().__nsRequire || getGlobalScope().require : getGlobalScope().__nsRequire || getGlobalScope().require;
         const registry = globalThis.__nsVendorRegistry;
         let nvMod = null;
         let vueMod = null;
@@ -321,7 +324,7 @@ export function ensurePiniaOnApp(app) {
     try {
         if (!app || typeof app.use !== 'function')
             return;
-        const g = globalThis;
+        const g = getGlobalScope();
         // If this app already has a Pinia provide, skip
         try {
             const prov = app?._context?.provides;
@@ -438,7 +441,7 @@ function installBuiltInComponentsOnApp(app) {
     try {
         if (!app || typeof app.component !== 'function')
             return;
-        const g = globalThis;
+        const g = getGlobalScope();
         const reg = g.__nsVendorRegistry;
         const req = reg?.get ? g.__nsVendorRequire || g.__nsRequire || g.require : g.__nsRequire || g.require;
         if (typeof req !== 'function')
@@ -519,7 +522,7 @@ async function syncPiniaAcrossEsm(app) {
 }
 function bridgePiniaProvides(app, existingApp) {
     try {
-        const g = globalThis;
+        const g = getGlobalScope();
         if (!app || !app._context)
             return;
         const newProv = app._context.provides || (app._context.provides = {});
@@ -633,6 +636,131 @@ export function handleVueSfcRegistry(msg) {
         console.warn('[hmr-client][sfc-registry] install failed', e);
     }
 }
+/**
+ * A component that declares required props can't be mounted as a standalone HMR
+ * root — nothing supplies them, so its render throws (white screen). Detects the
+ * object-form `props` Vue itself reads for the "Missing required prop" warning.
+ */
+function hmrComponentHasRequiredProps(comp) {
+    try {
+        const props = comp && comp.props;
+        if (!props || typeof props !== 'object' || Array.isArray(props))
+            return false;
+        for (const key of Object.keys(props)) {
+            const def = props[key];
+            if (def && typeof def === 'object' && def.required === true)
+                return true;
+        }
+    }
+    catch { }
+    return false;
+}
+// ── HMR replace-navigation window ────────────────────────────────────────────
+// An in-place SFC reload (`__VUE_HMR_RUNTIME__.reload`) unmounts the old
+// component subtree and mounts the fresh one. When the component's root is a
+// `<Page>` hosted by a `<Frame>`, nativescript-vue's Frame nodeOps `insert`
+// calls `frame.navigate({ create })` — a forward navigation that PUSHES a new
+// backstack entry. Every HMR apply would grow the backstack and surface a Back
+// button in the ActionBar (tapping it walks back through stale pre-edit
+// renders). While a reload flush is in flight, convert those page navigations
+// into `replacePage` (core's replace-navigation, the same primitive LiveSync
+// uses) so the fresh Page takes the current entry's place and the user's real
+// backstack is preserved untouched.
+let hmrReplaceNavInstalled = false;
+let hmrReplaceNavWindowDepth = 0;
+function installHmrFrameReplaceNavigation() {
+    if (hmrReplaceNavInstalled)
+        return true;
+    try {
+        const FrameCtor = getCore('Frame');
+        const proto = FrameCtor?.prototype;
+        if (!proto || typeof proto.navigate !== 'function' || typeof proto.replacePage !== 'function')
+            return false;
+        const originalNavigate = proto.navigate;
+        proto.navigate = function (entry) {
+            // Only page-entry navigations on a frame that is already showing a
+            // page are rewritten — first mounts and user-driven navigations
+            // (outside the window) flow through untouched.
+            if (hmrReplaceNavWindowDepth > 0 && entry && typeof entry === 'object' && typeof entry.create === 'function' && this.currentPage) {
+                try {
+                    if (__NS_ENV_VERBOSE__)
+                        console.log('[hmr][vue] reload window: replacePage instead of forward navigate');
+                    this.replacePage({ create: entry.create, animated: false });
+                    return;
+                }
+                catch (e) {
+                    console.warn('[hmr][vue] replacePage during reload failed; falling back to navigate', e);
+                }
+            }
+            // eslint-disable-next-line prefer-rest-params -- forwards all args verbatim to the patched original (arity-preserving)
+            return originalNavigate.apply(this, arguments);
+        };
+        hmrReplaceNavInstalled = true;
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function openHmrReplaceNavWindow() {
+    if (!installHmrFrameReplaceNavigation())
+        return () => { };
+    hmrReplaceNavWindowDepth++;
+    let closed = false;
+    return () => {
+        if (closed)
+            return;
+        closed = true;
+        hmrReplaceNavWindowDepth = Math.max(0, hmrReplaceNavWindowDepth - 1);
+    };
+}
+/**
+ * In-place Vue HMR. The assembled SFC stamps a stable `comp.__hmrId`, so Vue's
+ * registerHMR has a record for every mounted instance. Calling the real
+ * `__VUE_HMR_RUNTIME__.reload(id, newComp)` re-renders just those instances in
+ * place — preserving the App.vue shell (drawer, nav, router), current route, and
+ * scroll — instead of a whole-tree resetRootView. Returns false (→ resetRoot
+ * fallback) when the real runtime is absent (stub/prod build), the component has
+ * no id, or reload throws. A reload that matches no live instances is a no-op
+ * (component not currently displayed); the caller treats that as handled.
+ */
+function tryInPlaceVueReload(comp) {
+    try {
+        const rt = getGlobalScope().__VUE_HMR_RUNTIME__;
+        const id = comp && comp.__hmrId;
+        if (!rt || typeof rt.reload !== 'function' || !id)
+            return false;
+        // Vue queues the remount on its scheduler (microtask flush) — the
+        // Frame navigation happens inside that flush, not synchronously in
+        // reload(). Hold the replace-navigation window through the flush:
+        // nextTick resolves after the job queue drains; the timeout is a
+        // safety net when nextTick is unavailable.
+        const closeWindow = openHmrReplaceNavWindow();
+        try {
+            rt.reload(id, comp);
+        }
+        catch (e) {
+            closeWindow();
+            throw e;
+        }
+        try {
+            const nextTick = getGlobalScope().nextTick;
+            if (typeof nextTick === 'function') {
+                nextTick(() => closeWindow());
+            }
+        }
+        catch { }
+        setTimeout(closeWindow, 500);
+        if (__NS_ENV_VERBOSE__)
+            console.log('[hmr][vue] in-place reload', id);
+        return true;
+    }
+    catch (e) {
+        if (__NS_ENV_VERBOSE__)
+            console.warn('[hmr][vue] in-place reload failed; resetRoot fallback', e);
+        return false;
+    }
+}
 export async function handleVueSfcRegistryUpdate(msg, graphVersion) {
     try {
         if (typeof msg.path === 'string' && /\.vue$/i.test(msg.path)) {
@@ -659,11 +787,33 @@ export async function handleVueSfcRegistryUpdate(msg, graphVersion) {
             try {
                 ensureVueGlobals();
                 const changedPath = String(msg.path);
-                // Prefer remounting the SFC that actually changed so you immediately see it
-                // (e.g., editing Details.vue should remount Details.vue even if Home.vue is currently displayed).
-                // This keeps existing behavior intact when the changed file is already the root.
-                const targetPath = changedPath;
-                const comp = await loadSfcComponent(targetPath, 'sfc_update');
+                // Default: remount the SFC that changed, so editing a page reflects
+                // immediately even if a different page is displayed.
+                let comp = await loadSfcComponent(changedPath, 'sfc_update');
+                // Preferred path: patch the changed component's mounted instances in
+                // place (App.vue shell, route, scroll all survive). Returning null tells
+                // the overlay no resetRootView is needed.
+                if (tryInPlaceVueReload(comp)) {
+                    return null;
+                }
+                // Fallback (real Vue HMR runtime unavailable): a child SFC with required
+                // props cannot be a standalone root — mounting it bare crashes (missing
+                // props → white screen). Walk up to the nearest mountable ancestor (its
+                // hosting page) and remount that; the child's artifact set was evicted
+                // above, so the ancestor's re-assembly links the edited child and it
+                // re-renders with props.
+                if (comp && hmrComponentHasRequiredProps(comp)) {
+                    const ancestors = findSfcAncestors(changedPath, graph);
+                    for (const ancestor of ancestors) {
+                        const ancestorComp = await loadSfcComponent(ancestor, 'sfc_update_ancestor');
+                        if (ancestorComp && !hmrComponentHasRequiredProps(ancestorComp)) {
+                            if (__NS_ENV_VERBOSE__)
+                                console.log('[hmr][vue] child SFC needs props; remounting nearest mountable ancestor', { changed: changedPath, ancestor });
+                            comp = ancestorComp;
+                            break;
+                        }
+                    }
+                }
                 return comp;
             }
             catch (e) {
@@ -688,6 +838,16 @@ export function recordVuePayloadChanges(changed, graphVersion) {
     if (sawVue)
         sfcChangedVersion = graphVersion;
 }
+/**
+ * True when the delta for `version` included a `.vue` change. The dep-change
+ * propagation in `refreshAfterBatch` uses this to stand down for mixed batches:
+ * the SFC registry-update path will already remount with a freshly assembled
+ * artifact at this version, which links against the re-imported deps — a second
+ * resetRoot from propagation would just double the work (and the flash).
+ */
+export function sfcChangedInVersion(version) {
+    return sfcChangedVersion != null && sfcChangedVersion === version && sfcChangedIds.size > 0;
+}
 async function waitForSfcMapping(id, timeoutMs = 350) {
     if (!/\.vue$/i.test(id))
         return true;
@@ -722,26 +882,25 @@ export function addSfcMapping(originalPath, fileName) {
     }
     catch { }
 }
-// Build explicit SFC variant URL (script/template). Always preserves the variant query.
+// Build explicit SFC variant URL (script/template). Always preserves the
+// variant query. CANONICAL (unversioned): module identity is the URL;
+// freshness comes from the eviction in `evictSfcArtifacts` below.
 function resolveSfcVariantSpec(id, type, cacheBustTag) {
     const origin = getHttpOriginForVite() || deriveHttpOrigin(getHMRWsUrl());
     const base = id.split('?')[0];
     if (!origin)
         return base + `?vue&type=${type}`;
     const safePath = base.startsWith('/') ? base : '/' + base;
-    const ver = typeof getGraphVersion() === 'number' && getGraphVersion() > 0 ? String(getGraphVersion()) : '0';
-    let url = origin + `/ns/sfc/${ver}` + safePath + `?vue&type=${type}`;
-    return url;
+    return origin + '/ns/sfc' + safePath + `?vue&type=${type}`;
 }
-// Resolve deterministic SFC assembler ESM module
+// Resolve deterministic SFC assembler ESM module (canonical, unversioned).
 function resolveSfcAssemblerSpec(id, cacheBustTag) {
     const origin = getHttpOriginForVite() || deriveHttpOrigin(getHMRWsUrl());
     const base = id.split('?')[0];
     if (!origin)
         return base; // fallback: device will likely fail; origin should be available in dev
     const safePath = base.startsWith('/') ? base : '/' + base;
-    const ver = typeof getGraphVersion() === 'number' && getGraphVersion() > 0 ? String(getGraphVersion()) : '0';
-    let url = origin + `/ns/asm/${ver}` + `?path=${encodeURIComponent(safePath)}`;
+    let url = origin + '/ns/asm' + `?path=${encodeURIComponent(safePath)}`;
     try {
         if (globalThis.__NS_HMR_ASM_DIAG__) {
             url += '&diag=1';
@@ -750,28 +909,42 @@ function resolveSfcAssemblerSpec(id, cacheBustTag) {
     catch { }
     return url;
 }
-// Resolve metadata endpoint for an SFC
-function resolveSfcMetaSpec(id, cacheBustTag) {
+// The full SFC artifact URL set for one `.vue` path — every URL shape the
+// device may hold a module record under for this component:
+//   - the assembler module (dynamic loads + full-SFC delegation target)
+//   - the assembler's `mode=inline` twin (static child imports inside a
+//     parent's assembled module)
+//   - the script/template variants (variant assembly + asm fallbacks)
+//   - the full `/ns/sfc<path>` delegation module (static `.vue` imports
+//     rewritten by the server inside `/ns/m` modules)
+export function buildSfcEvictionUrls(id) {
     const origin = getHttpOriginForVite() || deriveHttpOrigin(getHMRWsUrl());
-    const base = id.split('?')[0];
     if (!origin)
-        return base;
+        return [];
+    const base = id.split('?')[0];
     const safePath = base.startsWith('/') ? base : '/' + base;
-    const ver = typeof getGraphVersion() === 'number' && getGraphVersion() > 0 ? String(getGraphVersion()) : '0';
-    let url = origin + `/ns/sfc-meta/${ver}` + `?path=${encodeURIComponent(safePath)}`;
-    return url;
+    const asmUrl = origin + '/ns/asm' + `?path=${encodeURIComponent(safePath)}`;
+    return [asmUrl, asmUrl + '&mode=inline', origin + '/ns/sfc' + safePath + '?vue&type=script', origin + '/ns/sfc' + safePath + '?vue&type=template', origin + '/ns/sfc' + safePath];
 }
-async function fetchSfcMeta(id, tag) {
+// Evict every module record for this SFC's artifact set so the re-imports in
+// `loadSfcComponent` fetch fresh content. `__NS_DEV__.invalidateModules` drops the
+// V8 registry entries + the runtime's prewarm cache AND arms the
+// bust-next-fetch nonce that defeats the OS HTTP cache — the same freshness
+// protocol `/ns/m` modules use (URLs never vary; eviction drives updates).
+// Soft-fail: on runtimes without the eviction primitive we still re-import
+// (worst case the device serves the cached artifact — same as any other
+// module type on such a runtime).
+function evictSfcArtifacts(id) {
     try {
-        const url = resolveSfcMetaSpec(id, tag + '_meta');
-        const res = await fetch(url, { method: 'GET' });
-        if (!res.ok)
-            return null;
-        const json = await res.json();
-        return json;
+        const urls = buildSfcEvictionUrls(id);
+        if (urls.length)
+            invalidateModulesByUrls(urls);
     }
-    catch {
-        return null;
+    catch (e) {
+        try {
+            console.warn('[hmr][vue] SFC artifact eviction failed for', id, e);
+        }
+        catch { }
     }
 }
 // Safely load a component for a .vue SFC. Prefer deterministic assembler first to avoid
@@ -780,18 +953,12 @@ export async function loadSfcComponent(targetVuePath, tag) {
     // Minimal mode removed: always go through deterministic assembler + device reset
     // Ensure Vue globals exist BEFORE evaluating variant modules; their top-level aliasing reads globalThis.* once.
     ensureVueGlobals();
-    // Consult metadata to choose optimal path
-    let meta = null;
-    try {
-        meta = await fetchSfcMeta(targetVuePath, tag);
-    }
-    catch { }
-    if (__NS_ENV_VERBOSE__ && meta) {
-        try {
-            console.log('[hmr][vue-reset][meta]', targetVuePath, meta);
-        }
-        catch { }
-    }
+    // Evict this SFC's artifact URL set BEFORE any import below. Every load
+    // through here happens because fresh content is wanted (a `.vue` edit, an
+    // ancestor remount, or a dep-change boundary re-assembly), and the URLs
+    // are stable across saves — without the eviction, `import()` would return
+    // the cached (pre-edit) module records.
+    evictSfcArtifacts(targetVuePath);
     // Prefer deterministic assembler first so AST normalization (including nav helpers) always applies.
     try {
         if (!DISABLE_ASM) {
@@ -817,22 +984,13 @@ export async function loadSfcComponent(targetVuePath, tag) {
         // Now import the template render implementation
         const templateMod = await safeDynImport(resolveSfcVariantSpec(targetVuePath, 'template', tag + '_template'));
         if (__NS_ENV_VERBOSE__) {
-            try {
-                const sKeys = scriptMod ? Object.keys(scriptMod).join(',') : '<none>';
-                const tKeys = templateMod ? Object.keys(templateMod).join(',') : '<none>';
-                console.log('[hmr][vue-reset][diag] variant-imports', targetVuePath, 'script.keys=', sKeys, 'template.keys=', tKeys);
-                try {
-                    console.log('[hmr][vue-reset][diag] scriptMod:', scriptMod);
-                }
-                catch { }
-                try {
-                    console.log('[hmr][vue-reset][diag] templateMod:', {
-                        render: typeof templateMod?.render,
-                    });
-                }
-                catch { }
-            }
-            catch { }
+            const sKeys = scriptMod ? Object.keys(scriptMod).join(',') : '<none>';
+            const tKeys = templateMod ? Object.keys(templateMod).join(',') : '<none>';
+            console.log('[hmr][vue-reset][diag] variant-imports', targetVuePath, 'script.keys=', sKeys, 'template.keys=', tKeys);
+            console.log('[hmr][vue-reset][diag] scriptMod:', scriptMod);
+            console.log('[hmr][vue-reset][diag] templateMod:', {
+                render: typeof templateMod?.render,
+            });
         }
         // Only use variant assembly when the script provides a real component options object.
         const render = templateMod?.render;
@@ -878,10 +1036,7 @@ export async function loadSfcComponent(targetVuePath, tag) {
                 catch { }
             }
             if (__NS_ENV_VERBOSE__) {
-                try {
-                    console.log('[hmr][vue-reset][diag] assembled.component (from script default) keys=', Object.keys(base).join(','), 'has.render=', !!base.render, 'components=', Object.keys(base.components || {}).join(','));
-                }
-                catch { }
+                console.log('[hmr][vue-reset][diag] assembled.component (from script default) keys=', Object.keys(base).join(','), 'has.render=', !!base.render, 'components=', Object.keys(base.components || {}).join(','));
             }
             return base;
         }
@@ -909,8 +1064,8 @@ export async function loadSfcComponent(targetVuePath, tag) {
             // Synthesize a minimal component and attach named exports as local components so template resolveComponent works.
             try {
                 ensureVueGlobals();
-                const comp = globalThis.defineComponent
-                    ? globalThis.defineComponent({
+                const comp = getGlobalScope().defineComponent
+                    ? getGlobalScope().defineComponent({
                         name: targetVuePath.split('/').pop() || 'AnonymousSFC',
                         render,
                     })
@@ -931,10 +1086,7 @@ export async function loadSfcComponent(targetVuePath, tag) {
                     catch { }
                 }
                 if (__NS_ENV_VERBOSE__) {
-                    try {
-                        console.log('[hmr][vue-reset][diag] synthesized.component keys=', Object.keys(comp).join(','), 'components=', Object.keys(comp.components || {}).join(','));
-                    }
-                    catch { }
+                    console.log('[hmr][vue-reset][diag] synthesized.component keys=', Object.keys(comp).join(','), 'components=', Object.keys(comp.components || {}).join(','));
                 }
                 return comp;
             }
@@ -977,7 +1129,7 @@ export function getRootForVue(newComponent, state) {
     if (__NS_ENV_VERBOSE__)
         console.log('[hmr-client] [createRoot] begin');
     ensureVueGlobals();
-    const g = globalThis;
+    const g = getGlobalScope();
     const AppFactory = g.createApp;
     let RootCtor = g.NSVRoot;
     // Hygiene: unmount any existing app instance to avoid duplicate lifecycle hooks
@@ -1160,16 +1312,13 @@ export function getRootForVue(newComponent, state) {
     const vm = typeof app.runWithContext === 'function' ? app.runWithContext(() => app.mount(root)) : app.mount(root);
     setCurrentApp(app);
     if (__NS_ENV_VERBOSE__) {
-        try {
-            console.log('[hmr-client] [createRoot] mount result', {
-                hasEl: !!vm?.$el,
-                elType: vm?.$el?.constructor?.name,
-                hasNativeView: !!vm?.$el?.nativeView,
-                nativeViewType: vm?.$el?.nativeView?.constructor?.name,
-                elapsedMs: Date.now() - t0,
-            });
-        }
-        catch { }
+        console.log('[hmr-client] [createRoot] mount result', {
+            hasEl: !!vm?.$el,
+            elType: vm?.$el?.constructor?.name,
+            hasNativeView: !!vm?.$el?.nativeView,
+            nativeViewType: vm?.$el?.nativeView?.constructor?.name,
+            elapsedMs: Date.now() - t0,
+        });
     }
     const findNativeView = (element) => {
         if (element?.nativeView)
@@ -1216,9 +1365,18 @@ export function getRootForVue(newComponent, state) {
         }
         return null;
     };
-    // Prefer adopting a Frame if the component produced one. This avoids nesting a Frame inside
-    // the placeholder Frame and ensures a single authoritative Frame for app navigation.
-    const nativeView = findFrameNativeView(vm?.$el) || findPageNativeView(vm?.$el) || findNativeView(vm?.$el);
+    // Resolve the top-level native view from the component output. The previous logic
+    // preferred ANY Frame found anywhere in the tree via depth-first recursion, which
+    // is wrong when the component root is a Page that contains nested Frames (e.g.
+    // a TabView whose TabViewItems each wrap their content in a <Frame>). That picked
+    // the FIRST nested Frame and set it as the app root via resetRootView, severing
+    // it from its TabViewItem parent and leaving a white screen on HMR reload.
+    // Only fall back to the deep Frame/Page lookups when the top-level view is neither
+    // (e.g., a raw Layout that the user intends to host an inner Frame for navigation).
+    const topLevelNativeView = findNativeView(vm?.$el);
+    const topCtorName = topLevelNativeView ? String(topLevelNativeView?.constructor?.name || '').replace(/^_+/, '') : '';
+    const topIsPageOrFrame = /^(Page|Frame)(\$\d+)?$/.test(topCtorName);
+    const nativeView = topIsPageOrFrame ? topLevelNativeView : findFrameNativeView(vm?.$el) || findPageNativeView(vm?.$el) || topLevelNativeView;
     const GPage = getCore('Page');
     // Decide root type and cache it
     if (nativeView) {
@@ -1243,160 +1401,6 @@ export function getRootForVue(newComponent, state) {
             state.setCachedRoot(nativeView);
             return state.getCachedRoot();
         }
-        // Treat Frame$N as Frame as well
-        if (ctorName === 'Frame_OLD_NEVER_REACHED') {
-            // If a Frame is produced, prefer adopting the Frame as the new root to ensure a single authoritative Frame.
-            // Extracting the Page and navigating a placeholder Frame can split realms and break app-controlled navigation.
-            let pageCandidate = undefined;
-            try {
-                pageCandidate = nativeView.currentPage || nativeView._currentEntry?.resolvedPage;
-            }
-            catch { }
-            if (pageCandidate) {
-                if (__NS_ENV_VERBOSE__)
-                    console.log('[hmr-client] [createRoot] Frame root with currentPage detected; adopting Frame as root');
-                state.setRootKind('frame');
-                state.setCachedRoot(nativeView);
-                return state.getCachedRoot();
-            }
-            // No currentPage yet; construct a Page wrapper and mount the component inside it
-            try {
-                if (__NS_ENV_VERBOSE__)
-                    console.log('[hmr-client] [createRoot] no currentPage; creating Page wrapper for navigation-first');
-                const registry = globalThis.__nsVendorRegistry;
-                const req = registry?.get ? globalThis.__nsVendorRequire || globalThis.__nsRequire || globalThis.require : globalThis.__nsRequire || globalThis.require;
-                let vueMod = null;
-                if (registry && registry.has('vue'))
-                    vueMod = registry.get('vue');
-                if (!vueMod && typeof req === 'function') {
-                    try {
-                        vueMod = req('vue');
-                    }
-                    catch { }
-                }
-                const h = vueMod?.h;
-                const WrappedRoot = h
-                    ? {
-                        name: 'HMRPageWrapper',
-                        setup() {
-                            return () => h('Page', null, [h(newComponent)]);
-                        },
-                    }
-                    : null;
-                if (WrappedRoot) {
-                    const g = globalThis;
-                    const AppFactory = g.createApp;
-                    let app2 = AppFactory(WrappedRoot);
-                    try {
-                        const reg2 = g.__nsVendorRegistry;
-                        const req2 = reg2?.get ? g.__nsVendorRequire || g.__nsRequire || g.require : g.__nsRequire || g.require;
-                        let rh2 = null;
-                        if (reg2 && reg2.has('nativescript-vue/dist/runtimeHelpers'))
-                            rh2 = reg2.get('nativescript-vue/dist/runtimeHelpers');
-                        if (!rh2 && typeof req2 === 'function') {
-                            try {
-                                rh2 = req2('nativescript-vue/dist/runtimeHelpers');
-                            }
-                            catch { }
-                        }
-                        const setRootApp2a = rh2 && (rh2.setRootApp || rh2.default?.setRootApp);
-                        if (typeof setRootApp2a === 'function')
-                            setRootApp2a(app2);
-                        try {
-                            let nv2 = null;
-                            if (reg2 && reg2.has('nativescript-vue'))
-                                nv2 = reg2.get('nativescript-vue');
-                            if (!nv2 && typeof req2 === 'function') {
-                                try {
-                                    nv2 = req2('nativescript-vue');
-                                }
-                                catch { }
-                            }
-                            const setRootApp2b = nv2 && (nv2.setRootApp || nv2.default?.setRootApp);
-                            if (typeof setRootApp2b === 'function')
-                                setRootApp2b(app2);
-                        }
-                        catch { }
-                    }
-                    catch { }
-                    try {
-                        const hook = globalThis.__NS_HMR_INSTALL_PLUGINS__;
-                        if (typeof hook === 'function')
-                            hook(app2);
-                    }
-                    catch { }
-                    try {
-                        ensurePiniaOnApp(app2);
-                    }
-                    catch { }
-                    try {
-                        bridgePiniaProvides(app2, getCurrentApp() || globalThis.__NS_VUE_APP__);
-                    }
-                    catch { }
-                    try {
-                        installBuiltInComponentsOnApp(app2);
-                    }
-                    catch { }
-                    const RootCtor2 = globalThis.NSVRoot || RootCtor;
-                    const root2 = new RootCtor2();
-                    const vm2 = typeof app2.runWithContext === 'function' ? app2.runWithContext(() => app2.mount(root2)) : app2.mount(root2);
-                    setCurrentApp(app2);
-                    const findNativeView2 = (element) => {
-                        if (element?.nativeView)
-                            return element.nativeView;
-                        const kids = element?.childNodes || element?.children || [];
-                        for (const c of kids) {
-                            const r = findNativeView2(c);
-                            if (r)
-                                return r;
-                        }
-                        return null;
-                    };
-                    const findPageNativeView2 = (element) => {
-                        if (!element)
-                            return null;
-                        const nv = element.nativeView;
-                        if (nv) {
-                            const ctorName = String(nv?.constructor?.name || '').replace(/^_+/, '');
-                            if (ctorName === 'Page' || /^Page(\$\d+)?$/.test(ctorName))
-                                return nv;
-                        }
-                        const kids = element?.childNodes || element?.children || [];
-                        for (const k of kids) {
-                            const r = findPageNativeView2(k);
-                            if (r)
-                                return r;
-                        }
-                        return null;
-                    };
-                    const nv2 = findPageNativeView2(vm2?.$el) || findNativeView2(vm2?.$el);
-                    const ctor2 = String(nv2?.constructor?.name || '').replace(/^_+/, '');
-                    if (ctor2 === 'Page' || /^Page(\$\d+)?$/.test(ctor2)) {
-                        // Hide wrapper ActionBar to avoid double bars when a Frame is nested inside
-                        try {
-                            nv2.actionBarHidden = true;
-                        }
-                        catch { }
-                        if (__NS_ENV_VERBOSE__)
-                            console.log('[hmr-client] [createRoot] Page wrapper created successfully');
-                        state.setRootKind('page');
-                        state.setCachedRoot(nv2);
-                        return state.getCachedRoot();
-                    }
-                    if (__NS_ENV_VERBOSE__)
-                        console.warn('[hmr-client] [createRoot] Page wrapper did not yield Page; got', ctor2);
-                }
-            }
-            catch (e) {
-                if (__NS_ENV_VERBOSE__)
-                    console.warn('[hmr-client] [createRoot] Page wrapper attempt failed', e);
-            }
-            if (__NS_ENV_VERBOSE__)
-                console.log('[hmr-client] [createRoot] root kind=frame (no currentPage)');
-            state.setRootKind('frame');
-            state.setCachedRoot(nativeView);
-            return state.getCachedRoot();
-        }
         if (GPage) {
             const page = new GPage();
             page.content = nativeView;
@@ -1431,7 +1435,7 @@ export function getRootForVue(newComponent, state) {
  */
 export function ensureBackWrapperInstalled(performResetRoot, getCore) {
     try {
-        const g = globalThis;
+        const g = getGlobalScope();
         // Provide global back-remount hooks for bridges to call
         if (!g.__nsAttemptBackRemount) {
             g.__nsAttemptBackRemount = () => {