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

package/dist/hmr/message-handler.js

@@ -0,0 +1,590 @@
+// Message handling and routing
+import { handleCssUpdates, handleCustomCss } from './css-handler';
+import { ensureVueHMRRuntimeEnhanced } from './runtime-vue';
+import { setupNativeScriptVueHooks } from './nsv-hooks';
+const VERBOSE = !!globalThis.__NS_ENV_VERBOSE__;
+export function handleMessage(data, httpOrigin) {
+    let message;
+    try {
+        message = JSON.parse(data);
+    }
+    catch {
+        return;
+    }
+    if (VERBOSE) {
+        console.info('[ns-hmr] Received message:', {
+            type: message.type,
+            event: message.event,
+            hasData: !!message.data,
+            hasUpdates: !!message.updates,
+            dataKeys: message.data ? Object.keys(message.data) : []
+        });
+    }
+    // Handle custom CSS events for live apply
+    if (message.type === 'custom' && message.event === 'ns:css' && message.data) {
+        try {
+            const cssText = message.data.css;
+            handleCustomCss(cssText);
+        }
+        catch (e) {
+            console.warn('[ns-hmr] Custom CSS apply failed:', e?.message || String(e));
+        }
+        return;
+    }
+    // Handle Vue SFC template rerender payloads from the server
+    if (message.type === 'custom' && message.event === 'ns:vue-template' && message.data) {
+        try {
+            const payload = message.data;
+            if (!payload?.src)
+                return;
+            // Proactively ensure NS-Vue hooks are applied so instances are registered
+            try {
+                const g = globalThis;
+                if (!g.__NS_VUE_HOOKS_APPLIED__) {
+                    if (VERBOSE)
+                        console.info('[ns-hmr] NS-Vue hooks not applied before vue-template; applying now');
+                    setupNativeScriptVueHooks();
+                    try {
+                        if (VERBOSE)
+                            console.info('[ns-hmr] Applied NS-Vue hooks on-demand for vue-template; flag now:', !!g.__NS_VUE_HOOKS_APPLIED__);
+                    }
+                    catch { }
+                }
+            }
+            catch { }
+            try {
+                const idsPreview = Array.isArray(payload.ids) ? payload.ids.join(', ') : (payload.id || '(none)');
+                console.info('[ns-hmr] ns:vue-template received; ids:', idsPreview);
+            }
+            catch { }
+            applyVueTemplateRerender(payload);
+        }
+        catch (e) {
+            console.warn('[ns-hmr] Vue template apply failed:', e?.message || String(e));
+        }
+        return;
+    }
+    // Disable ad-hoc Vue code delivery to favor Vite ModuleRunner path
+    if (message.type === 'custom' && message.event === 'ns:vue-component' && message.data) {
+        if (VERBOSE)
+            console.info('[ns-hmr] Ignoring ns:vue-component (prefer standard Vite update)');
+        return;
+    }
+    // Ignore custom file-changed for Vue and rely on standard Vite update payloads
+    if (message.type === 'custom' && message.event === 'file-changed' && message.data && message.data.file) {
+        const filePath = String(message.data.file || '');
+        if (/\.vue(\?|$)/.test(filePath)) {
+            if (VERBOSE)
+                console.info('[ns-hmr] Ignoring custom file-changed for .vue; waiting for Vite update');
+            return;
+        }
+        // For non-vue, nothing to do here
+        return;
+    }
+    // Handle Vite update events
+    if (message.type === 'update' && Array.isArray(message.updates)) {
+        // Handle CSS updates
+        const cssUpdates = message.updates.filter((u) => u && u.type === 'css-update');
+        if (cssUpdates.length) {
+            handleCssUpdates(cssUpdates, httpOrigin);
+        }
+        // Handle Vue updates by delegating to the ModuleRunner-based client.
+        handleUpdateEvents(message.updates);
+    }
+}
+function handleUpdateEvents(updates) {
+    let handledVueUpdates = 0;
+    if (VERBOSE)
+        console.info('[ns-hmr] Processing updates:', updates.length);
+    for (const update of updates) {
+        const path = update.path || update.acceptedPath || '';
+        if (VERBOSE)
+            console.info('[ns-hmr] Checking update:', { path, type: update.type });
+        // Enhanced Vue update detection
+        if (isVueUpdate(path, update)) {
+            if (VERBOSE)
+                console.info('[ns-hmr] Identified as Vue update:', path);
+            // Defer to Vite ModuleRunner-based client (built into dist runtime) to apply .vue HMR
+            // Avoid triggering our manual fallback which can cause restart.
+            handledVueUpdates++;
+            if (VERBOSE)
+                console.info('[ns-hmr] Delegating .vue update to ModuleRunner pipeline');
+        }
+        else {
+            if (VERBOSE)
+                console.info('[ns-hmr] Not a Vue update:', path);
+        }
+    }
+    if (VERBOSE)
+        console.info(`[ns-hmr] Handled ${handledVueUpdates} Vue update(s)`);
+}
+function isVueUpdate(path, update) {
+    // Check for .vue files
+    if (/\.vue(\?|$)/.test(path)) {
+        return true;
+    }
+    // Check for Vue-related query parameters that indicate Vue SFC parts
+    if (path.includes('vue&type=')) {
+        return true;
+    }
+    // Check update type for Vue-specific updates
+    if (update.type === 'vue-reload' || update.type === 'vue-rerender') {
+        return true;
+    }
+    return false;
+}
+// Note: Custom Vue update helpers removed. We intentionally rely on Vite's
+// standard 'update' flow handled by the ModuleRunner in the full runtime client.
+function applyVueTemplateRerender(payload) {
+    const g = globalThis;
+    // Try to ensure Vue HMR runtime is present/enhanced before we proceed
+    const runtime = ensureVueHMRRuntimeEnhanced() || g.__VUE_HMR_RUNTIME__;
+    const hasRuntime = !!(runtime && typeof runtime.rerender === 'function');
+    if (!hasRuntime) {
+        console.info('[ns-hmr] Vue HMR runtime not ready; will attempt direct instance patch and retry later');
+        // Cache and retry a few times in case runtime appears after startup
+        try {
+            g.__NS_LAST_VUE_TEMPLATE__ = payload;
+            scheduleVueTemplateRetry(payload, 5);
+        }
+        catch { }
+    }
+    try {
+        // Build a function in a sandbox with helpers bound to NS-Vue/Vue exports
+        const vueBase = safeRequire('vue') || {};
+        const nsvBase = safeRequire('nativescript-vue') || {};
+        // Merge to prefer NS-Vue overrides but fill missing helpers from Vue
+        const nsVue = Object.assign({}, vueBase, nsvBase);
+        // Ensure common helper aliases exist on the object (underscore vs non-underscore and synonyms)
+        const aliasPairs = [
+            // underscore <-> plain
+            ['_resolveComponent', 'resolveComponent'],
+            ['_openBlock', 'openBlock'],
+            ['_createBlock', 'createBlock'],
+            ['_createElementBlock', 'createElementBlock'],
+            ['_createVNode', 'createVNode'],
+            ['_createElementVNode', 'createElementVNode'],
+            ['_toDisplayString', 'toDisplayString'],
+            ['_withCtx', 'withCtx'],
+            ['_unref', 'unref'],
+            ['_Fragment', 'Fragment'],
+            ['_createTextVNode', 'createTextVNode'],
+        ];
+        const synonymPairs = [
+            // createElementBlock <-> createBlock
+            ['createElementBlock', 'createBlock'],
+            ['createElementVNode', 'createVNode'],
+        ];
+        const appliedShims = [];
+        const ensureAlias = (to, from) => {
+            try {
+                if (typeof nsVue[to] === 'undefined' && typeof nsVue[from] !== 'undefined') {
+                    nsVue[to] = nsVue[from];
+                    appliedShims.push({ to, from });
+                }
+            }
+            catch { }
+        };
+        // 1) Fill underscore/plain in both directions
+        for (const [a, b] of aliasPairs) {
+            ensureAlias(a, b);
+            ensureAlias(b, a);
+        }
+        // 2) Fill synonyms
+        for (const [a, b] of synonymPairs) {
+            ensureAlias(a, b);
+            ensureAlias(b, a);
+            // Also cover underscore variants for synonyms
+            ensureAlias(`_${a}`, `_${b}`);
+            ensureAlias(`_${b}`, `_${a}`);
+        }
+        if (VERBOSE && appliedShims.length) {
+            try {
+                console.info('[ns-hmr] Applied helper shims:', appliedShims);
+            }
+            catch { }
+        }
+        // As a last resort, provide a shim for resolveComponent from the running app context
+        const getAppComponent = (n) => {
+            try {
+                const app = globalThis.__NS_VUE_APP__;
+                // Vue 3 app context registry
+                const c1 = app && app._context && app._context.components && app._context.components[n];
+                if (c1)
+                    return c1;
+                // Some runtimes might store registered components under app.component registry
+                const c2 = app && app.component && app.component(n);
+                if (c2)
+                    return c2;
+                // Try via root instance appContext
+                const root = globalThis.__NS_VUE_ROOT_INSTANCE__;
+                const internal = root && (root.$ || root);
+                const appCtx = internal && (internal.appContext || internal.app?._context);
+                const c3 = appCtx && appCtx.components && appCtx.components[n];
+                if (c3)
+                    return c3;
+            }
+            catch { }
+            return null;
+        };
+        const shimResolve = (name) => {
+            const comp = getAppComponent(name);
+            if (VERBOSE) {
+                try {
+                    console.info('[ns-hmr] shim resolveComponent', { name, found: !!comp, type: comp ? typeof comp : 'null' });
+                }
+                catch { }
+            }
+            // Return component if found, otherwise fall back to name (some renderers handle string types)
+            return comp || name;
+        };
+        if (typeof nsVue.resolveComponent !== 'function' && typeof nsVue._resolveComponent !== 'function') {
+            nsVue.resolveComponent = shimResolve;
+            nsVue._resolveComponent = shimResolve;
+        }
+        else if (typeof nsVue.resolveComponent !== 'function' && typeof nsVue._resolveComponent === 'function') {
+            nsVue.resolveComponent = nsVue._resolveComponent;
+        }
+        else if (typeof nsVue._resolveComponent !== 'function' && typeof nsVue.resolveComponent === 'function') {
+            nsVue._resolveComponent = nsVue.resolveComponent;
+        }
+        // Minimal safe fallbacks for helpers to prevent runtime aborts
+        const appliedFallbacks = [];
+        const ensureFunc = (key, fn) => {
+            try {
+                if (typeof nsVue[key] !== 'function') {
+                    nsVue[key] = fn;
+                    appliedFallbacks.push(key);
+                }
+            }
+            catch { }
+        };
+        // Base creators using either Vue's createVNode or h
+        const baseCreateVNode = nsVue.createVNode || nsVue._createVNode || nsVue.h || null;
+        const createVNodeLike = (type, props, children) => {
+            try {
+                if (typeof nsVue.createVNode === 'function')
+                    return nsVue.createVNode(type, props, children);
+                if (typeof nsVue._createVNode === 'function')
+                    return nsVue._createVNode(type, props, children);
+                if (typeof nsVue.h === 'function')
+                    return nsVue.h(type, props, children);
+            }
+            catch { }
+            return { type, props: props || null, children };
+        };
+        const createTextVNodeLike = (text) => {
+            try {
+                if (typeof nsVue.createTextVNode === 'function')
+                    return nsVue.createTextVNode(text);
+                if (typeof nsVue._createTextVNode === 'function')
+                    return nsVue._createTextVNode(text);
+                // Fallback: wrap string children; many renderers accept plain strings as children
+            }
+            catch { }
+            return String(text);
+        };
+        ensureFunc('_openBlock', () => { });
+        ensureFunc('openBlock', () => { });
+        ensureFunc('_withCtx', (fn) => fn);
+        ensureFunc('withCtx', (fn) => fn);
+        ensureFunc('_createVNode', createVNodeLike);
+        ensureFunc('createVNode', createVNodeLike);
+        ensureFunc('_createElementVNode', createVNodeLike);
+        ensureFunc('createElementVNode', createVNodeLike);
+        ensureFunc('_createBlock', createVNodeLike);
+        ensureFunc('createBlock', createVNodeLike);
+        ensureFunc('_createElementBlock', createVNodeLike);
+        ensureFunc('createElementBlock', createVNodeLike);
+        ensureFunc('_createTextVNode', createTextVNodeLike);
+        ensureFunc('createTextVNode', createTextVNodeLike);
+        ensureFunc('_toDisplayString', (v) => {
+            try {
+                return nsVue.toDisplayString ? nsVue.toDisplayString(v) : String(v);
+            }
+            catch {
+                return String(v);
+            }
+        });
+        ensureFunc('toDisplayString', (v) => {
+            try {
+                return nsVue.toDisplayString ? nsVue.toDisplayString(v) : String(v);
+            }
+            catch {
+                return String(v);
+            }
+        });
+        ensureFunc('_unref', (v) => (v && typeof v === 'object' && 'value' in v ? v.value : v));
+        ensureFunc('unref', (v) => (v && typeof v === 'object' && 'value' in v ? v.value : v));
+        if (appliedFallbacks.length) {
+            try {
+                console.info('[ns-hmr] Applied helper fallbacks:', appliedFallbacks);
+            }
+            catch { }
+        }
+        // Log helper presence/types for critical helpers
+        try {
+            const keys = ['_resolveComponent', 'resolveComponent', '_openBlock', 'openBlock', '_createBlock', 'createBlock', '_createElementBlock', 'createElementBlock', '_createVNode', 'createVNode', '_createElementVNode', 'createElementVNode', '_withCtx', 'withCtx', '_unref', 'unref', '_createTextVNode', 'createTextVNode'];
+            const status = {};
+            for (const k of keys) {
+                const v = nsVue[k];
+                status[k] = typeof v;
+            }
+            console.info('[ns-hmr] Helper status:', status);
+        }
+        catch { }
+        // Enumerate available helper function names so we see clearly what's in scope
+        try {
+            const allKeys = Object.keys(nsVue).sort();
+            const funcKeys = allKeys.filter((k) => typeof nsVue[k] === 'function');
+            const underscoredCount = funcKeys.filter((k) => k.startsWith('_')).length;
+            const sample = funcKeys.slice(0, 80);
+            console.info('[ns-hmr] NSVUE function keys (sample):', { count: funcKeys.length, underscoredCount, sample });
+        }
+        catch { }
+        const helperNames = Array.isArray(payload.helpers) ? payload.helpers : [];
+        const localNames = Array.isArray(payload.locals) && payload.locals.length === helperNames.length ? payload.locals : helperNames;
+        try {
+            console.info('[ns-hmr] Payload expected helpers:', helperNames);
+        }
+        catch { }
+        // Generate declarations for each helper alias to avoid using dynamic argument names
+        const decls = [];
+        const missing = [];
+        const presentDiag = [];
+        for (let i = 0; i < helperNames.length; i++) {
+            const orig = helperNames[i];
+            const local = localNames[i] || orig;
+            // Declare all locals to avoid ReferenceError during eval
+            // We bind to NSVUE[orig] at runtime; if missing, value will be undefined
+            decls.push(`const ${local} = NSVUE && Object.prototype.hasOwnProperty.call(NSVUE, ${JSON.stringify(orig)}) ? NSVUE[${JSON.stringify(orig)}] : undefined;`);
+            if (!(orig in nsVue))
+                missing.push(`${orig} as ${local}`);
+            else {
+                try {
+                    presentDiag.push({ name: orig, local, typeof: typeof nsVue[orig] });
+                }
+                catch { }
+            }
+            // Also add an alias declaration for underscore/non-underscore variant if not the same
+            const altLocal = local.startsWith('_') ? local.slice(1) : ('_' + local);
+            if (altLocal !== local) {
+                decls.push(`const ${altLocal} = (typeof ${local} !== 'undefined') ? ${local} : (NSVUE && (NSVUE[${JSON.stringify(orig)}] ?? NSVUE[${JSON.stringify(altLocal.replace(/^_/, ''))}]));`);
+            }
+        }
+        if (missing.length) {
+            if (VERBOSE)
+                console.info('[ns-hmr] Missing helpers in nativescript-vue:', missing.join(', '));
+        }
+        if (VERBOSE) {
+            try {
+                console.info('[ns-hmr] Helper bindings:', presentDiag);
+            }
+            catch { }
+        }
+        // Determine if payload.src already includes a full 'function render' or 'const render =' declaration
+        const hasFullRender = /\bfunction\s+render\s*\(|\bconst\s+render\s*=/.test(payload.src);
+        const lines = [
+            `'use strict';`,
+            ...decls,
+        ];
+        if (hasFullRender) {
+            lines.push(payload.src);
+        }
+        else {
+            lines.push(payload.src);
+        }
+        lines.push(`return render;`);
+        const body = lines.join('\n');
+        // Inspect tokens present in the body to know which helpers the render expects
+        try {
+            const tokenReport = {
+                hasResolveComponent: /\b_?resolveComponent\b/.test(body),
+                hasOpenBlock: /\b_?openBlock\b/.test(body),
+                hasCreateBlock: /\b_?create(Block|ElementBlock)\b/.test(body),
+                hasCreateVNode: /\b_?create(VNode|ElementVNode)\b/.test(body),
+                hasWithCtx: /\b_?withCtx\b/.test(body),
+                hasToDisplayString: /\b_?toDisplayString\b/.test(body),
+            };
+            console.info('[ns-hmr] Render token usage:', tokenReport);
+        }
+        catch { }
+        // Ensure critical helpers like resolveComponent exist
+        try {
+            if (typeof nsVue._resolveComponent === 'undefined' && typeof nsVue.resolveComponent === 'function') {
+                nsVue._resolveComponent = nsVue.resolveComponent.bind(nsVue);
+            }
+            if (typeof nsVue.resolveComponent === 'undefined' && typeof nsVue._resolveComponent === 'function') {
+                nsVue.resolveComponent = nsVue._resolveComponent.bind(nsVue);
+            }
+        }
+        catch { }
+        const factory = new Function('NSVUE', body);
+        let newRender = factory(nsVue);
+        // If compile emitted a render that expects global helpers under different names, shim them
+        if (typeof newRender !== 'function') {
+            if (VERBOSE)
+                console.info('[ns-hmr] Evaluated render is not a function; aborting');
+            return;
+        }
+        // Introspect the compiled render to confirm which helpers it will call
+        try {
+            const srcStr = Function.prototype.toString.call(newRender);
+            console.info('[ns-hmr] New render tokens:', {
+                len: srcStr.length,
+                openBlock: /\b_?openBlock\b/.test(srcStr),
+                createBlock: /\b_?create(Block|ElementBlock)\b/.test(srcStr),
+                resolveComponent: /\b_?resolveComponent\b/.test(srcStr),
+                withCtx: /\b_?withCtx\b/.test(srcStr),
+            });
+        }
+        catch { }
+        // If runtime is unavailable, cache and retry later to avoid direct instance patch side-effects
+        if (!hasRuntime && typeof newRender === 'function') {
+            try {
+                g.__NS_LAST_VUE_TEMPLATE__ = payload;
+                scheduleVueTemplateRetry(payload, 5);
+            }
+            catch { }
+            return;
+        }
+        // Build candidate ids with useful variations (with/without query, absolute/relative, with/without ?vue)
+        const baseIds = Array.isArray(payload.ids) && payload.ids.length ? payload.ids.slice() : (payload.id ? [payload.id] : []);
+        const candidatesSet = new Set();
+        const addVariants = (id) => {
+            if (!id)
+                return;
+            const norm = String(id).replace(/\\/g, '/');
+            const noQuery = norm.split('?')[0];
+            const withVueQ = noQuery + '?vue';
+            const relFromSrc = noQuery.replace(/^.*?\/src\//, '/src/');
+            const relNoLead = relFromSrc.replace(/^\//, '');
+            [norm, noQuery, withVueQ, relFromSrc, relNoLead, relNoLead + '?vue'].forEach((v) => v && candidatesSet.add(v));
+        };
+        baseIds.forEach(addVariants);
+        const candidates = Array.from(candidatesSet);
+        try {
+            console.info('[ns-hmr] id candidates ->', candidates);
+        }
+        catch { }
+        if (typeof newRender === 'function' && candidates.length) {
+            let applied = false;
+            // Use a more conservative approach: add delay and readiness checks
+            // This prevents the "entry.create" errors by ensuring native views are ready
+            const req = globalThis.require;
+            const vueMod = req && (() => { try {
+                return req('vue');
+            }
+            catch {
+                return null;
+            } })();
+            const nextTick = vueMod && vueMod.nextTick;
+            const doRerender = () => {
+                // Rerender-only for template changes; avoid partial reloads that can break component state
+                for (const id of candidates) {
+                    try {
+                        console.info('[ns-hmr] Attempting Vue template rerender for', id);
+                        globalThis.__NS_LAST_RERENDER_ID__ = id;
+                        runtime.rerender(id, newRender);
+                        applied = true;
+                        console.info('[ns-hmr] Applied Vue template rerender for', id);
+                        break;
+                    }
+                    catch (e) {
+                        console.info('[ns-hmr] Rerender attempt failed for', id, e?.message || String(e));
+                    }
+                }
+                if (!applied) {
+                    console.info('[ns-hmr] No matching Vue HMR record for ids:', candidates.join(', '));
+                    // Fuzzy match: try to find a record id by suffix match against path
+                    try {
+                        const path = String(payload.path || '');
+                        const base = path.split('?')[0].replace(/\\/g, '/');
+                        const baseRel = base.replace(/^.*?\/src\//, '/src/');
+                        const suffixes = Array.from(new Set([
+                            baseRel,
+                            baseRel + '?vue',
+                            (baseRel || '').replace(/^\//, ''),
+                            (baseRel || '').replace(/^\//, '') + '?vue',
+                            (base.split('/').pop() || ''),
+                            (base.split('/').pop() || '') + '?vue'
+                        ].filter(Boolean)));
+                        const map = runtime.map || runtime.records || {};
+                        const keys = map && typeof map.keys === 'function'
+                            ? Array.from(map.keys())
+                            : (map && typeof map === 'object' ? Object.keys(map) : []);
+                        try {
+                            console.info('[ns-hmr] Vue HMR record keys:', keys);
+                        }
+                        catch { }
+                        for (const key of keys) {
+                            const k = String(key);
+                            if (suffixes.some((s) => k.endsWith(s))) {
+                                try {
+                                    console.info('[ns-hmr] Fuzzy match rerender for', k);
+                                    runtime.rerender(k, newRender);
+                                    applied = true;
+                                    console.info('[ns-hmr] Applied Vue template rerender for', k);
+                                    break;
+                                }
+                                catch (e) {
+                                    console.info('[ns-hmr] Fuzzy rerender failed for', k, e?.message || String(e));
+                                }
+                            }
+                        }
+                    }
+                    catch { }
+                    if (!applied) {
+                        console.info('[ns-hmr] Could not find a matching Vue HMR record by fuzzy path; skipping direct instance patch (avoid double update)');
+                    }
+                }
+            };
+            // Use nextTick if available to ensure proper timing
+            if (typeof nextTick === 'function') {
+                nextTick(() => {
+                    // Add a small additional delay to let any pending native view operations complete
+                    setTimeout(doRerender, 16);
+                });
+            }
+            else {
+                // Fallback with delay
+                setTimeout(doRerender, 32);
+            }
+        }
+    }
+    catch (e) {
+        console.warn('[ns-hmr] Failed to eval Vue template render:', e?.message || String(e));
+    }
+}
+function scheduleVueTemplateRetry(payload, attempts) {
+    const g = globalThis;
+    if (attempts <= 0)
+        return;
+    setTimeout(() => {
+        const rt = ensureVueHMRRuntimeEnhanced() || g.__VUE_HMR_RUNTIME__;
+        if (!rt || typeof rt.rerender !== 'function') {
+            console.info('[ns-hmr] Vue HMR runtime still not ready; attempts left:', attempts - 1);
+            scheduleVueTemplateRetry(payload, attempts - 1);
+            return;
+        }
+        try {
+            console.info('[ns-hmr] Retrying Vue template apply');
+            applyVueTemplateRerender(payload);
+        }
+        catch (e) {
+            console.info('[ns-hmr] Retry failed:', e?.message || String(e));
+            scheduleVueTemplateRetry(payload, attempts - 1);
+        }
+    }, 250);
+}
+// Direct instance patch removed to avoid interfering with Vue HMR scheduler
+function safeRequire(name) {
+    try {
+        // In NativeScript runtime, require is available globally
+        const req = globalThis.require || null;
+        if (req)
+            return req(name);
+    }
+    catch { }
+    return null;
+}

package/dist/hmr/nsv-hooks.d.ts

@@ -0,0 +1,2 @@
+export declare function setupNativeScriptVueHooks(): void;
+export default setupNativeScriptVueHooks;