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

package/dist/hmr/component-tracker.js

@@ -0,0 +1,193 @@
+// Component tracking utility for Vue HMR
+// Helps track and manage Vue component instances in the NativeScript visual tree
+const VERBOSE = false;
+class NativeScriptVueComponentTracker {
+    constructor() {
+        this.instanceMap = new Map();
+        this.fileToIdMap = new Map();
+    }
+    registerComponent(id, instance) {
+        if (!this.instanceMap.has(id)) {
+            this.instanceMap.set(id, new Set());
+        }
+        this.instanceMap.get(id).add(instance);
+        // Track file-to-ID mapping
+        const file = this.extractFileFromInstance(instance);
+        if (file) {
+            if (!this.fileToIdMap.has(file)) {
+                this.fileToIdMap.set(file, new Set());
+            }
+            this.fileToIdMap.get(file).add(id);
+        }
+        if (VERBOSE) {
+            console.info('[ns-hmr][tracker] Registered component:', { id, file, instanceCount: this.instanceMap.get(id).size });
+        }
+    }
+    unregisterComponent(id, instance) {
+        const instances = this.instanceMap.get(id);
+        if (instances) {
+            instances.delete(instance);
+            if (instances.size === 0) {
+                this.instanceMap.delete(id);
+                // Clean up file mapping
+                const file = this.extractFileFromInstance(instance);
+                if (file) {
+                    const ids = this.fileToIdMap.get(file);
+                    if (ids) {
+                        ids.delete(id);
+                        if (ids.size === 0) {
+                            this.fileToIdMap.delete(file);
+                        }
+                    }
+                }
+            }
+        }
+        if (VERBOSE) {
+            console.info('[ns-hmr][tracker] Unregistered component:', { id, remainingCount: instances?.size || 0 });
+        }
+    }
+    getInstances(id) {
+        const instances = this.instanceMap.get(id);
+        return instances ? Array.from(instances) : [];
+    }
+    getAllInstances() {
+        const result = new Map();
+        for (const [id, instances] of this.instanceMap) {
+            result.set(id, Array.from(instances));
+        }
+        return result;
+    }
+    findInstancesByFile(file) {
+        const instances = [];
+        const normalizedFile = this.normalizeFilePath(file);
+        // Direct file lookup
+        const ids = this.fileToIdMap.get(normalizedFile);
+        if (ids) {
+            for (const id of ids) {
+                instances.push(...this.getInstances(id));
+            }
+        }
+        // Fallback: search through all instances
+        if (instances.length === 0) {
+            for (const [id, instanceSet] of this.instanceMap) {
+                for (const instance of instanceSet) {
+                    const instanceFile = this.extractFileFromInstance(instance);
+                    if (instanceFile && this.filesMatch(instanceFile, normalizedFile)) {
+                        instances.push(instance);
+                    }
+                }
+            }
+        }
+        if (VERBOSE && instances.length > 0) {
+            console.info('[ns-hmr][tracker] Found instances by file:', { file: normalizedFile, count: instances.length });
+        }
+        return instances;
+    }
+    extractFileFromInstance(instance) {
+        // Try different ways to extract the file path from a Vue instance
+        try {
+            // Method 1: Check instance type
+            if (instance.type && instance.type.__file) {
+                return this.normalizeFilePath(instance.type.__file);
+            }
+            // Method 2: Check internal instance
+            if (instance.$ && instance.$.type && instance.$.type.__file) {
+                return this.normalizeFilePath(instance.$.type.__file);
+            }
+            // Method 3: Check component options
+            if (instance.__file) {
+                return this.normalizeFilePath(instance.__file);
+            }
+            // Method 4: Check parent component
+            if (instance.parent && instance.parent.type && instance.parent.type.__file) {
+                return this.normalizeFilePath(instance.parent.type.__file);
+            }
+        }
+        catch (error) {
+            if (VERBOSE) {
+                console.warn('[ns-hmr][tracker] Failed to extract file from instance:', error?.message);
+            }
+        }
+        return null;
+    }
+    normalizeFilePath(file) {
+        // Remove query parameters and fragments
+        let normalized = file.split('?')[0].split('#')[0];
+        // Normalize path separators
+        normalized = normalized.replace(/\\/g, '/');
+        // Remove leading slash if present
+        if (normalized.startsWith('/')) {
+            normalized = normalized.slice(1);
+        }
+        return normalized;
+    }
+    filesMatch(file1, file2) {
+        const norm1 = this.normalizeFilePath(file1);
+        const norm2 = this.normalizeFilePath(file2);
+        // Exact match
+        if (norm1 === norm2) {
+            return true;
+        }
+        // Check if one is a suffix of the other (for different path prefixes)
+        if (norm1.endsWith(norm2) || norm2.endsWith(norm1)) {
+            return true;
+        }
+        // Check basename match for simple cases
+        const base1 = norm1.split('/').pop() || '';
+        const base2 = norm2.split('/').pop() || '';
+        return base1 === base2 && base1.length > 0;
+    }
+}
+// Global component tracker instance
+const componentTracker = new NativeScriptVueComponentTracker();
+// Expose tracker globally for debugging
+globalThis.__NS_VUE_COMPONENT_TRACKER__ = componentTracker;
+// Hook into Vue component lifecycle
+export function setupComponentTracking() {
+    try {
+        const gAny = globalThis;
+        // Try to hook into Vue's component creation
+        if (gAny.__VUE_HMR_RUNTIME__) {
+            const originalCreateRecord = gAny.__VUE_HMR_RUNTIME__.createRecord;
+            gAny.__VUE_HMR_RUNTIME__.createRecord = function (id, initialDef) {
+                const result = originalCreateRecord.call(this, id, initialDef);
+                // Track this component definition
+                if (VERBOSE) {
+                    console.info('[ns-hmr][tracker] Vue component record created:', id);
+                }
+                return result;
+            };
+        }
+        //   // Try to hook into nativescript-vue's component mounting
+        // Instead of modifying the module, we'll use Vue's global API hooks
+        // and listen for component registrations through the Vue HMR runtime
+        if (VERBOSE) {
+            console.info('[ns-hmr][tracker] Using Vue HMR runtime hooks for component tracking');
+        }
+    }
+    catch (error) {
+        console.warn('[ns-hmr][tracker] Failed to setup component tracking:', error?.message);
+    }
+}
+function extractComponentId(instance) {
+    try {
+        // Extract ID from instance, similar to extractFileFromInstance
+        if (instance.type && instance.type.__file) {
+            return instance.type.__file;
+        }
+        if (instance.$ && instance.$.type && instance.$.type.__file) {
+            return instance.$.type.__file;
+        }
+        if (instance.__file) {
+            return instance.__file;
+        }
+    }
+    catch (error) {
+        // Ignore extraction errors
+    }
+    return null;
+}
+// Auto-setup component tracking
+setupComponentTracking();
+export { componentTracker };
+export default componentTracker;

package/dist/hmr/css-handler.d.ts

@@ -0,0 +1,4 @@
+export declare function applyCssText(cssText: string): void;
+export declare function fetchText(url: string): Promise<string>;
+export declare function handleCssUpdates(cssUpdates: any[], httpOrigin: string): Promise<void>;
+export declare function handleCustomCss(cssText: string): void;

package/dist/hmr/css-handler.js

@@ -0,0 +1,77 @@
+import { Application, Frame } from "@nativescript/core";
+const VERBOSE = !!globalThis.__NS_ENV_VERBOSE__;
+// CSS helper function
+export function applyCssText(cssText) {
+    if (typeof cssText !== "string" || !cssText.length)
+        return;
+    try {
+        if (Application.addCss) {
+            Application.addCss(cssText);
+            if (VERBOSE)
+                console.info("[ns-hmr] Applied app CSS");
+        }
+        else {
+            const topFrame = Frame.topmost?.();
+            const curPage = topFrame?.currentPage;
+            curPage.addCss(cssText);
+            if (VERBOSE)
+                console.info("[ns-hmr] Applied page CSS");
+        }
+    }
+    catch (e) {
+        console.warn("[ns-hmr] CSS apply failed:", e?.message || String(e));
+    }
+}
+// Fetch helper
+export async function fetchText(url) {
+    try {
+        const g = globalThis;
+        if (typeof g.fetch === "function") {
+            const res = await g.fetch(url);
+            return await res.text();
+        }
+        // Fallback to NativeScript Http if available
+        const Http = g.Http;
+        if (Http && Http.getString) {
+            return await Http.getString(url);
+        }
+        if (VERBOSE)
+            console.warn("[ns-hmr] No fetch method available");
+        return "";
+    }
+    catch (e) {
+        console.warn("[ns-hmr] Fetch failed:", e?.message || String(e));
+        return "";
+    }
+}
+// Handle CSS updates from Vite
+export async function handleCssUpdates(cssUpdates, httpOrigin) {
+    for (const update of cssUpdates) {
+        try {
+            const path = update.path || update.acceptedPath || "";
+            if (!path || !httpOrigin)
+                continue;
+            // Compose URL like the Vite client (ensure raw content and cache-bust)
+            const hasQuery = path.includes("?");
+            const tParam = `t=${encodeURIComponent(String(update.timestamp || Date.now()))}`;
+            const directParam = hasQuery ? "&direct=1" : "?direct=1";
+            const tSuffix = (hasQuery ? "&" : "?") + tParam;
+            const url = httpOrigin + path + directParam + tSuffix;
+            if (VERBOSE)
+                console.info("[ns-hmr] Fetching CSS:", url);
+            const cssText = await fetchText(url);
+            if (cssText) {
+                applyCssText(cssText);
+            }
+        }
+        catch (e) {
+            console.warn("[ns-hmr] CSS update fetch/apply failed:", e?.message || String(e));
+        }
+    }
+}
+// Handle custom CSS events
+export function handleCustomCss(cssText) {
+    if (typeof cssText === "string" && cssText.length) {
+        applyCssText(cssText);
+    }
+}

package/dist/hmr/message-handler.d.ts

@@ -0,0 +1 @@
+export declare function handleMessage(data: string, httpOrigin: string): void;