@nativescript/vite 0.0.1-alpha.1 → 0.0.1-alpha.2

package/dist/hmr/nsv-hooks.js

@@ -0,0 +1,481 @@
+// NativeScript-Vue integration hooks for HMR in non-DOM/runtime-light environments
+// - Monkey-patches nativescript-vue createApp to add a global mixin that tracks component instances
+// - Captures the app and root instance for debugging and fallbacks
+import componentTracker from './component-tracker';
+const VERBOSE = true;
+// Apply hooks immediately when this module loads
+let hooksAttempted = false;
+let hookRetryCount = 0;
+const MAX_HOOK_RETRIES = 3; // Reduced from 10
+let lastRetryTime = 0;
+const RETRY_COOLDOWN = 1000; // 1 second cooldown between retries
+// Function to attempt hook setup with smart retries
+function attemptHookSetup() {
+    const now = Date.now();
+    const g = globalThis;
+    // Already applied successfully
+    if (g.__NS_VUE_HOOKS_APPLIED__)
+        return;
+    // Respect cooldown period
+    if (now - lastRetryTime < RETRY_COOLDOWN)
+        return;
+    // Max retries reached
+    if (hookRetryCount >= MAX_HOOK_RETRIES) {
+        if (VERBOSE && hookRetryCount === MAX_HOOK_RETRIES) {
+            console.info('[ns-hmr][nsv-hooks] Max retry attempts reached, switching to passive mode');
+            hookRetryCount++; // Prevent this message from repeating
+        }
+        return;
+    }
+    hookRetryCount++;
+    lastRetryTime = now;
+    if (VERBOSE && hookRetryCount > 1) {
+        console.info('[ns-hmr][nsv-hooks] Retrying hook setup...', { attempt: hookRetryCount });
+    }
+    setupNativeScriptVueHooks();
+}
+export function setupNativeScriptVueHooks() {
+    try {
+        const g = globalThis;
+        if (g.__NS_VUE_HOOKS_APPLIED__)
+            return;
+        hooksAttempted = true;
+        // Check if app is already created (common in Vite/ES module environments)
+        const existingApp = g.__NS_VUE_APP__;
+        const existingRoot = g.__NS_VUE_ROOT_INSTANCE__;
+        if (existingApp) {
+            if (VERBOSE)
+                console.info('[ns-hmr][nsv-hooks] Found existing app, applying hooks retroactively');
+            retrofitExistingApp(existingApp);
+            g.__NS_VUE_HOOKS_APPLIED__ = true;
+            if (existingRoot) {
+                if (VERBOSE)
+                    console.info('[ns-hmr][nsv-hooks] Found existing root instance, registering');
+                setTimeout(() => registerExistingInstancesWithRuntime(), 0);
+            }
+            return;
+        }
+        // Debug: Let's see what's actually available
+        if (VERBOSE) {
+            console.info('[ns-hmr][nsv-hooks] Debug - Available globals:', {
+                hasRequire: !!(g.require),
+                hasGlobalRequire: !!globalThis.__require,
+                hasModuleRequire: typeof require !== 'undefined',
+                hasNSVueGlobal: !!(g.nativescriptVue || g.NativeScriptVue),
+                hasVueGlobal: !!g.Vue,
+                requireType: typeof g.require,
+                hasExistingApp: !!existingApp,
+                hasExistingRoot: !!existingRoot
+            });
+        }
+        // Try multiple ways to get the module (for proactive hook setup)
+        let nsv = null;
+        // Method 1: Check global objects first (ES modules often expose via globals)
+        nsv = g.nativescriptVue || g.NativeScriptVue || g.Vue || g.__VUE__;
+        if (VERBOSE && nsv) {
+            console.info('[ns-hmr][nsv-hooks] Found Vue via global object');
+        }
+        // Method 2: Try require as fallback (may return empty object in ES modules)
+        if (!nsv) {
+            const req = g.require || globalThis.__require || (typeof require !== 'undefined' ? require : null);
+            if (req) {
+                const nsvModule = safeRequire('nativescript-vue');
+                const vueModule = safeRequire('vue');
+                // In ES modules mode, modules might be available but empty - check if they have real content
+                if (nsvModule && Object.keys(nsvModule).length > 0) {
+                    nsv = nsvModule;
+                    if (VERBOSE)
+                        console.info('[ns-hmr][nsv-hooks] Found nativescript-vue via require with content');
+                }
+                else if (vueModule && Object.keys(vueModule).length > 0) {
+                    nsv = vueModule;
+                    if (VERBOSE)
+                        console.info('[ns-hmr][nsv-hooks] Found vue via require with content');
+                }
+                else if (VERBOSE) {
+                    console.info('[ns-hmr][nsv-hooks] require() available but modules empty (ES modules mode detected)');
+                }
+            }
+        }
+        if (!nsv) {
+            if (VERBOSE && hookRetryCount === 1) {
+                console.info('[ns-hmr][nsv-hooks] No nativescript-vue module available via any method - app likely uses ES imports');
+                console.info('[ns-hmr][nsv-hooks] Will wait for app to be created and then apply hooks retroactively');
+            }
+            return;
+        }
+        if (VERBOSE) {
+            console.info('[ns-hmr][nsv-hooks] Found Vue module:', {
+                hasCreateApp: !!nsv.createApp,
+                hasSetRootApp: !!nsv.setRootApp,
+                moduleKeys: Object.keys(nsv).slice(0, 10)
+            });
+        }
+        // In ES modules mode, Vue APIs might be distributed differently
+        let createAppFn = nsv.createApp;
+        if (!createAppFn) {
+            // Try to find createApp in various Vue-related globals
+            const vueGlobals = [g.Vue, g.__VUE__, g.nativescriptVue, g.NativeScriptVue];
+            for (const vueRef of vueGlobals) {
+                if (vueRef && vueRef.createApp) {
+                    createAppFn = vueRef.createApp;
+                    nsv = vueRef; // Use the Vue reference that has createApp
+                    if (VERBOSE)
+                        console.info('[ns-hmr][nsv-hooks] Found createApp in Vue global reference');
+                    break;
+                }
+            }
+        }
+        if (!createAppFn) {
+            if (VERBOSE)
+                console.info('[ns-hmr][nsv-hooks] No createApp function found in any Vue reference');
+            // In ES modules mode, we might need to wait for the app to be created
+            // Set up a fallback mechanism to apply hooks later
+            if (!g.__nsv_esModulesFallback) {
+                g.__nsv_esModulesFallback = true;
+                if (VERBOSE)
+                    console.info('[ns-hmr][nsv-hooks] Setting up ES modules fallback for later hook application');
+            }
+            return;
+        }
+        hookCreateApp(nsv);
+    }
+    catch (e) {
+        if (VERBOSE)
+            console.info('[ns-hmr][nsv-hooks] Setup failed:', e?.message || String(e));
+    }
+}
+function hookCreateApp(nsv) {
+    try {
+        const g = globalThis;
+        if (g.__NS_VUE_HOOKS_APPLIED__)
+            return;
+        // Check if app already exists - if so, retrofit the hooks
+        const existingApp = g.__NS_VUE_APP__;
+        if (existingApp) {
+            if (VERBOSE)
+                console.info('[ns-hmr][nsv-hooks] Found existing app, retrofitting hooks');
+            retrofitExistingApp(existingApp);
+        }
+        // Also check for root instance and register it
+        const existingRoot = g.__NS_VUE_ROOT_INSTANCE__;
+        if (existingRoot) {
+            if (VERBOSE)
+                console.info('[ns-hmr][nsv-hooks] Found existing root instance, registering');
+            try {
+                registerExistingInstancesWithRuntime();
+            }
+            catch (e) {
+                if (VERBOSE)
+                    console.warn('[ns-hmr][nsv-hooks] Failed to register existing instances:', e?.message);
+            }
+        }
+        const originalCreateApp = nsv.createApp.bind(nsv);
+        const originalSetRootApp = typeof nsv.setRootApp === 'function' ? nsv.setRootApp.bind(nsv) : null;
+        // Capture setRootApp invocations for app access
+        if (originalSetRootApp) {
+            try {
+                nsv.setRootApp = (app) => {
+                    try {
+                        g.__NS_VUE_APP__ = app;
+                        if (VERBOSE)
+                            console.info('[ns-hmr][nsv-hooks] setRootApp called');
+                        // Apply mixin to existing app if not already done
+                        if (!app.__nsHmrMixinApplied) {
+                            applyHmrMixin(app);
+                        }
+                    }
+                    catch { }
+                    return originalSetRootApp(app);
+                };
+            }
+            catch { }
+        }
+        nsv.createApp = (...args) => {
+            const app = originalCreateApp(...args);
+            try {
+                g.__NS_VUE_APP__ = app;
+                if (VERBOSE)
+                    console.info('[ns-hmr][nsv-hooks] Stored __NS_VUE_APP__');
+            }
+            catch { }
+            // Apply HMR mixin
+            applyHmrMixin(app);
+            // Capture the root instance on start
+            if (typeof app.start === 'function') {
+                const originalStart = app.start.bind(app);
+                app.start = (...sArgs) => {
+                    const instance = originalStart(...sArgs);
+                    try {
+                        g.__NS_VUE_ROOT_INSTANCE__ = instance;
+                        if (VERBOSE)
+                            console.info('[ns-hmr][nsv-hooks] Root instance captured from start()');
+                        // Register this instance and any children with HMR runtime
+                        setTimeout(() => {
+                            try {
+                                registerExistingInstancesWithRuntime();
+                            }
+                            catch { }
+                        }, 0);
+                    }
+                    catch { }
+                    return instance;
+                };
+            }
+            return app;
+        };
+        g.__NS_VUE_HOOKS_APPLIED__ = true;
+        if (VERBOSE)
+            console.info('[ns-hmr][nsv-hooks] Applied NativeScript-Vue hooks');
+    }
+    catch (e) {
+        if (VERBOSE)
+            console.info('[ns-hmr][nsv-hooks] Setup failed:', e?.message || String(e));
+    }
+}
+// Function to retrofit an existing app with HMR capabilities
+function retrofitExistingApp(app) {
+    try {
+        if (app.__nsHmrMixinApplied)
+            return;
+        // Apply the HMR mixin to the existing app
+        applyHmrMixin(app);
+        if (VERBOSE)
+            console.info('[ns-hmr][nsv-hooks] Retrofitted existing app with HMR mixin');
+    }
+    catch (e) {
+        if (VERBOSE)
+            console.warn('[ns-hmr][nsv-hooks] Failed to retrofit existing app:', e?.message);
+    }
+}
+// Function to apply the HMR tracking mixin
+function applyHmrMixin(app) {
+    try {
+        if (app.__nsHmrMixinApplied)
+            return;
+        // Register a global mixin to track component instances
+        app.mixin({
+            mounted() {
+                try {
+                    const id = this?.$?.type?.__file || this?.type?.__file || (this?.$?.uid ? String(this.$.uid) : undefined);
+                    const key = id || (this?.$?.type?.name) || 'unknown';
+                    componentTracker.registerComponent(key, this);
+                    if (VERBOSE)
+                        console.info('[ns-hmr][nsv-hooks] Component mounted:', {
+                            key,
+                            hasType: !!(this?.$?.type || this?.type),
+                            hasFile: !!(this?.$?.type?.__file || this?.type?.__file),
+                            typeName: (this?.$?.type?.name || this?.type?.name)
+                        });
+                    // Also attempt to register this instance with Vue's HMR runtime so rerenders reach it
+                    try {
+                        const rt = globalThis.__VUE_HMR_RUNTIME__;
+                        if (rt && typeof rt.registerInstance === 'function') {
+                            const variants = computeIdVariants(key);
+                            for (const vid of variants) {
+                                try {
+                                    if (!rt.isRecorded || !rt.isRecorded(vid)) {
+                                        if (typeof rt.createRecord === 'function')
+                                            rt.createRecord(vid, (this?.$?.type || this?.type || {}));
+                                    }
+                                }
+                                catch { }
+                                try {
+                                    rt.registerInstance(vid, this);
+                                }
+                                catch { }
+                            }
+                            if (VERBOSE)
+                                console.info('[ns-hmr][nsv-hooks] registered instance with HMR runtime', { file: key, ids: Array.from(variants) });
+                        }
+                    }
+                    catch { }
+                }
+                catch { }
+            },
+            unmounted() {
+                try {
+                    const id = this?.$?.type?.__file || this?.type?.__file || (this?.$?.uid ? String(this.$.uid) : undefined);
+                    const key = id || (this?.$?.type?.name) || 'unknown';
+                    componentTracker.unregisterComponent(key, this);
+                    if (VERBOSE)
+                        console.info('[ns-hmr][nsv-hooks] Component unmounted:', key);
+                }
+                catch { }
+            }
+        });
+        app.__nsHmrMixinApplied = true;
+    }
+    catch (e) {
+        if (VERBOSE)
+            console.info('[ns-hmr][nsv-hooks] Failed to apply HMR mixin:', e?.message || String(e));
+    }
+}
+function safeRequire(name) {
+    try {
+        // Try global require first
+        const globalReq = globalThis.require;
+        if (globalReq) {
+            try {
+                const result = globalReq(name);
+                if (VERBOSE)
+                    console.info(`[ns-hmr][nsv-hooks] Successfully required '${name}' via global.require`);
+                return result;
+            }
+            catch (e) {
+                if (VERBOSE)
+                    console.info(`[ns-hmr][nsv-hooks] Failed to require '${name}' via global.require:`, e?.message);
+            }
+        }
+        // Try standard require if available
+        if (typeof require !== 'undefined') {
+            try {
+                const result = require(name);
+                if (VERBOSE)
+                    console.info(`[ns-hmr][nsv-hooks] Successfully required '${name}' via standard require`);
+                return result;
+            }
+            catch (e) {
+                if (VERBOSE)
+                    console.info(`[ns-hmr][nsv-hooks] Failed to require '${name}' via standard require:`, e?.message);
+            }
+        }
+        // Try alternative require locations
+        const altReq = globalThis.__require || globalThis.global?.require;
+        if (altReq) {
+            try {
+                const result = altReq(name);
+                if (VERBOSE)
+                    console.info(`[ns-hmr][nsv-hooks] Successfully required '${name}' via alternative require`);
+                return result;
+            }
+            catch (e) {
+                if (VERBOSE)
+                    console.info(`[ns-hmr][nsv-hooks] Failed to require '${name}' via alternative require:`, e?.message);
+            }
+        }
+    }
+    catch (e) {
+        if (VERBOSE)
+            console.info(`[ns-hmr][nsv-hooks] safeRequire('${name}') failed completely:`, e?.message);
+    }
+    return null;
+}
+// Attempt to apply hooks immediately when this module loads
+// This ensures hooks are applied before createApp is called
+try {
+    setupNativeScriptVueHooks();
+}
+catch (e) {
+    if (VERBOSE)
+        console.info('[ns-hmr][nsv-hooks] Initial hook setup failed:', e?.message);
+}
+export default setupNativeScriptVueHooks;
+// Helpers
+function computeIdVariants(raw) {
+    const out = new Set();
+    try {
+        if (!raw)
+            return out;
+        let s = String(raw);
+        // prefer source file path if available on component type
+        // normalize slashes and strip query
+        s = s.replace(/\\/g, '/');
+        const noQuery = s.split('?')[0];
+        const withVueQ = noQuery + (noQuery.endsWith('?vue') ? '' : '?vue');
+        const relFromSrc = noQuery.replace(/^.*?\/src\//, '/src/');
+        const relNoLead = relFromSrc.replace(/^\//, '');
+        out.add(s);
+        out.add(noQuery);
+        out.add(withVueQ);
+        out.add(relFromSrc);
+        out.add(relNoLead);
+        if (!relNoLead.endsWith('?vue'))
+            out.add(relNoLead + '?vue');
+    }
+    catch { }
+    return out;
+}
+function registerExistingInstancesWithRuntime() {
+    try {
+        const g = globalThis;
+        const rt = g.__VUE_HMR_RUNTIME__;
+        if (!rt || (typeof rt.registerInstance !== 'function'))
+            return;
+        const root = g.__NS_VUE_ROOT_INSTANCE__;
+        if (!root)
+            return;
+        let count = 0;
+        const seen = new Set();
+        const queue = [root];
+        const enqueueChildren = (node) => {
+            try {
+                if (!node || seen.has(node))
+                    return;
+                seen.add(node);
+                const internal = (node.$ ? node.$ : node);
+                if (internal?.subTree)
+                    queue.push(internal.subTree);
+                if (node && typeof node === 'object') {
+                    if (node.component)
+                        queue.push(node.component);
+                    const ch = node.children || node.child || null;
+                    if (Array.isArray(ch))
+                        ch.forEach((c) => { if (c && typeof c === 'object')
+                            queue.push(c); });
+                    else if (ch && typeof ch === 'object')
+                        queue.push(ch);
+                }
+            }
+            catch { }
+        };
+        const handle = (ins) => {
+            try {
+                const type = (ins?.$?.type) || ins?.type || null;
+                const file = (type && type.__file) ? String(type.__file) : undefined;
+                const name = (type && (type.__name || type.name)) ? String(type.__name || type.name) : undefined;
+                const key = file || name;
+                if (!key)
+                    return;
+                const variants = computeIdVariants(key);
+                variants.forEach((vid) => {
+                    try {
+                        if (!rt.isRecorded || !rt.isRecorded(vid)) {
+                            if (typeof rt.createRecord === 'function')
+                                rt.createRecord(vid, type || {});
+                        }
+                    }
+                    catch { }
+                    try {
+                        rt.registerInstance(vid, ins);
+                    }
+                    catch { }
+                });
+                count++;
+            }
+            catch { }
+        };
+        while (queue.length) {
+            const cur = queue.shift();
+            try {
+                handle(cur);
+            }
+            catch { }
+            try {
+                enqueueChildren(cur);
+            }
+            catch { }
+        }
+        try {
+            if (VERBOSE)
+                console.info('[ns-hmr][nsv-hooks] registered existing instances with HMR runtime', { count });
+        }
+        catch { }
+    }
+    catch { }
+}
+// Actually execute the hooks setup as early as possible
+console.info('[ns-hmr][nsv-hooks] Initializing hooks...');
+attemptHookSetup();
+// Export to global for external triggers
+globalThis.__ns_attemptHookSetup = attemptHookSetup;

package/dist/hmr/plugin-vue.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "vite";
+export declare function hmrPluginVue(platform: string): Plugin;

package/dist/hmr/plugin-vue.js

@@ -0,0 +1,38 @@
+import { createRequire } from "node:module";
+const require = createRequire(import.meta.url);
+const VIRTUAL_ID = "virtual:pure-vue-hmr";
+const RESOLVED_ID = "\0" + VIRTUAL_ID;
+// TODO: make switch statement on flavors to load different flavor clients
+export function hmrPluginVue(platform) {
+    let config;
+    return {
+        name: "nativescript-pure-vue-hmr",
+        configResolved(c) {
+            config = c;
+        },
+        resolveId(id) {
+            if (id === VIRTUAL_ID)
+                return RESOLVED_ID;
+            return null;
+        },
+        load(id) {
+            if (id !== RESOLVED_ID)
+                return null;
+            const clientPath = require.resolve("@nativescript/vite/dist/hmr/client-vue.js");
+            // Build ws url from Vite server info
+            const host = process.env.NS_HMR_HOST ||
+                config?.server?.host ||
+                (platform === 'android' ? "10.0.2.2" : "localhost");
+            const port = Number(config?.server?.port || 5173);
+            const secure = !!config?.server?.https;
+            const protocol = secure ? "wss" : "ws";
+            const wsUrl = `${protocol}://${host}:${port}/ns-hmr`;
+            // Import client and start it with explicit ws URL
+            return `
+import startViteHMR from "${clientPath}";
+console.log('[hmr-plugin-vue] starting client -> ${wsUrl}');
+startViteHMR({ wsUrl: ${JSON.stringify(wsUrl)} });
+`;
+        },
+    };
+}

package/dist/hmr/plugins/index.d.ts

@@ -0,0 +1 @@
+export declare function getHMRPlugins(platform: string, flavor: string, verboseLogs: boolean): import("vite").Plugin<any>[];

package/dist/hmr/plugins/index.js

@@ -0,0 +1,16 @@
+import { hmrPluginVue } from "./plugin-vue.js";
+import { hmrWebSocketVue } from "./websocket-vue.js";
+export function getHMRPlugins(platform, flavor, verboseLogs) {
+    switch (flavor) {
+        case "vue":
+            return [hmrPluginVue(platform, verboseLogs), hmrWebSocketVue()];
+        case "react":
+            return []; // TODO: add React HMR plugins
+        case "angular":
+            return []; // TODO: add Angular HMR plugins
+        case "solid":
+            return []; // TODO: add Solid HMR plugins
+        default:
+            return [];
+    }
+}

package/dist/hmr/plugins/plugin-vue.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "vite";
+export declare function hmrPluginVue(platform: string, verboseLogs?: boolean): Plugin;

package/dist/hmr/plugins/plugin-vue.js

@@ -0,0 +1,41 @@
+import { createRequire } from "node:module";
+const require = createRequire(import.meta.url);
+const VIRTUAL_ID = "virtual:hmr-vue";
+const RESOLVED_ID = "\0" + VIRTUAL_ID;
+// TODO: make switch statement on flavors to load different flavor clients
+export function hmrPluginVue(platform, verboseLogs = false) {
+    let config;
+    return {
+        name: "nativescript-hmr-vue",
+        configResolved(c) {
+            config = c;
+        },
+        resolveId(id) {
+            if (id === VIRTUAL_ID)
+                return RESOLVED_ID;
+            return null;
+        },
+        load(id) {
+            if (id !== RESOLVED_ID)
+                return null;
+            const clientPath = require.resolve("@nativescript/vite/dist/hmr/client-vue.js");
+            // Build ws url from Vite server info
+            const host = process.env.NS_HMR_HOST ||
+                config?.server?.host ||
+                (platform === 'android' ? "10.0.2.2" : "localhost");
+            const port = Number(config?.server?.port || 5173);
+            const secure = !!config?.server?.https;
+            const protocol = secure ? "wss" : "ws";
+            const wsUrl = `${protocol}://${host}:${port}/ns-hmr`;
+            // Import client and start it with explicit ws URL
+            const banner = verboseLogs
+                ? `console.log('[hmr-plugin-vue] starting client -> ${wsUrl}');`
+                : "";
+            return `
+import startViteHMR from "${clientPath}";
+${banner}
+startViteHMR({ wsUrl: ${JSON.stringify(wsUrl)} });
+`;
+        },
+    };
+}

package/dist/hmr/plugins/websocket-vue.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "vite";
+export declare function hmrWebSocketVue(verboseLogs?: boolean): Plugin;