@nativescript/vite 8.0.0-alpha.5 → 8.0.0-alpha.50

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

@@ -1,6 +1,10 @@
 import { deriveHttpOrigin, getCore, getCurrentApp, getGraphVersion, getHMRWsUrl, getHttpOriginForVite, normalizeSpec, safeDynImport, safeReadDefault, setCurrentApp } from '../../../client/utils.js';
+import { getGlobalScope } from '../../../shared/runtime/global-scope.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 +20,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 +52,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 +91,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 +323,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 +440,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 +521,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 = {});
@@ -688,6 +690,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;
@@ -730,7 +742,7 @@ function resolveSfcVariantSpec(id, type, cacheBustTag) {
         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}`;
+    const url = origin + `/ns/sfc/${ver}` + safePath + `?vue&type=${type}`;
     return url;
 }
 // Resolve deterministic SFC assembler ESM module
@@ -750,48 +762,12 @@ function resolveSfcAssemblerSpec(id, cacheBustTag) {
     catch { }
     return url;
 }
-// Resolve metadata endpoint for an SFC
-function resolveSfcMetaSpec(id, cacheBustTag) {
-    const origin = getHttpOriginForVite() || deriveHttpOrigin(getHMRWsUrl());
-    const base = id.split('?')[0];
-    if (!origin)
-        return base;
-    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;
-}
-async function fetchSfcMeta(id, tag) {
-    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;
-    }
-    catch {
-        return null;
-    }
-}
 // Safely load a component for a .vue SFC. Prefer deterministic assembler first to avoid
 // any variant-compile or TDZ flakiness; only fall back to variant assembly if needed.
 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 { }
-    }
     // Prefer deterministic assembler first so AST normalization (including nav helpers) always applies.
     try {
         if (!DISABLE_ASM) {
@@ -817,22 +793,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 +845,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 +873,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 +895,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 +938,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 +1121,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 +1174,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 +1210,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 +1244,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 = () => {