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

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

@@ -0,0 +1,882 @@
+import { WebSocketServer } from "ws";
+import path from "path";
+import { readFileSync, readdirSync, statSync } from "fs";
+import { createHash } from "node:crypto";
+// Helper: remove balanced `if (import.meta.hot) { ... }` blocks to avoid orphan fragments
+function stripImportMetaHotBlocks(input) {
+    let out = input;
+    const re = /if\s*\(\s*import\.meta\.hot\s*\)\s*\{/g;
+    let m;
+    while ((m = re.exec(out)) !== null) {
+        let start = m.index;
+        let i = start + m[0].length;
+        let depth = 1;
+        while (i < out.length && depth > 0) {
+            const ch = out[i++];
+            if (ch === "{")
+                depth++;
+            else if (ch === "}")
+                depth--;
+        }
+        // Replace the whole balanced block with a comment
+        out =
+            out.slice(0, start) + "// Removed import.meta.hot block\n" + out.slice(i);
+        re.lastIndex = start; // reset search after modification
+    }
+    return out;
+}
+// Helper: remove common Vue HMR runtime statements and orphan else blocks
+function stripVueHmrRuntimeNoise(input) {
+    let out = input;
+    // Remove standalone createRecord/reload/rerender calls
+    out = out.replace(/__VUE_HMR_RUNTIME__\.(?:createRecord|reload|rerender)\s*\([\s\S]*?\);\s*/g, "");
+    // Remove patterns like `} else { __VUE_HMR_RUNTIME__.reload(...); }`
+    out = out.replace(/\}\s*else\s*\{\s*__VUE_HMR_RUNTIME__\.(?:reload|rerender)\s*\([\s\S]*?\);\s*\}\s*/g, "");
+    // Remove orphan `else { __VUE_HMR_RUNTIME__... }` if the preceding `if (import.meta.hot) {}` was stripped
+    out = out.replace(/(?:^|\n)\s*else\s*\{\s*__VUE_HMR_RUNTIME__\.(?:reload|rerender)\s*\([\s\S]*?\);\s*\}\s*/g, "\n");
+    // Collapse any now-empty `else {}` blocks
+    out = out.replace(/\}\s*else\s*\{\s*\}\s*/g, "}\n");
+    return out;
+}
+// Helper: Strip anything between the compiled HMR id assignment and the export default
+// This nukes any remaining HMR scaffolding the compiler injects and avoids syntax drift
+function stripVueHmrTail(input) {
+    let out = input;
+    // Match from a line containing `.__hmrId = "...";` up to but not including the `export default` line
+    out = out.replace(/\n[^\n]*__hmrId\s*=\s*['\"][^'\"]+['\"];[\s\S]*?(?=\n\s*export\s+default)/g, (match) => {
+        // Keep just a single newline to preserve spacing before export
+        return "\n";
+    });
+    // Also guard against any stray `typeof __VUE_HMR_RUNTIME__ !== "undefined" && ...` lines left over
+    out = out.replace(/^[^\n]*typeof\s+__VUE_HMR_RUNTIME__[^\n]*$/gm, "");
+    return out;
+}
+// Helper: remove named specifiers from import curly lists; drop import if empty
+function removeNamedImports(code, namesToRemove) {
+    const re = /^(\s*import\s*\{)([^}]*)(\}\s*from\s*['"][^'"]+['"];?)/gm;
+    return code.replace(re, (_m, p1, specList, p3) => {
+        const remaining = specList
+            .split(",")
+            .map((s) => s.trim())
+            .filter(Boolean)
+            .filter((entry) => {
+            // entry like: name OR name as alias
+            const base = entry.split(/\s+as\s+/i)[0].trim();
+            return !namesToRemove.includes(base);
+        });
+        if (!remaining.length)
+            return "";
+        return `${p1} ${remaining.join(", ")} ${p3}`;
+    });
+}
+// Helper: inject const bindings from globals for the given names
+function injectGlobalsBindings(code, names) {
+    if (!names.length)
+        return code;
+    const lines = names.map((n) => `const ${n} = globalThis.${n};`);
+    return lines.join("\n") + "\n" + code;
+}
+export function hmrWebSocketVue(verboseLogs = false) {
+    let wss = null;
+    // Map of project-relative vue path -> device-local hashed filename (e.g., sfc-<hash>.mjs)
+    const sfcFileMap = new Map();
+    let registrySent = false;
+    return {
+        name: "pure-vue-websocket",
+        apply: "serve",
+        configureServer(server) {
+            const httpServer = server.httpServer;
+            if (!httpServer)
+                return;
+            wss = new WebSocketServer({ noServer: true, path: "/ns-hmr" });
+            if (verboseLogs)
+                console.log("[pure-vue-ws] WebSocket server configured on /ns-hmr");
+            httpServer.on("upgrade", (request, socket, head) => {
+                const pathname = new URL(request.url || "", "http://localhost")
+                    .pathname;
+                if (pathname === "/ns-hmr") {
+                    wss?.handleUpgrade(request, socket, head, (ws) => {
+                        wss?.emit("connection", ws, request);
+                    });
+                }
+            });
+            wss.on("connection", async (ws) => {
+                if (verboseLogs)
+                    console.log("[pure-vue-ws] Client connected to /ns-hmr");
+                ws.on("close", () => verboseLogs && console.log("[pure-vue-ws] Client disconnected"));
+                // Send SFC registry once on first client connection
+                try {
+                    if (!registrySent) {
+                        await buildAndSendSfcRegistry(server, sfcFileMap, wss);
+                        registrySent = true;
+                    }
+                }
+                catch (e) {
+                    console.warn("[pure-vue-ws] Failed to send SFC registry:", e?.message || e);
+                }
+            });
+            // console.log("[pure-vue-ws] WebSocket server configured on /ns-hmr");
+        },
+        async handleHotUpdate(ctx) {
+            const { file, server } = ctx;
+            if (!wss)
+                return;
+            // Fast-path: handle plain CSS updates via our single socket with a dedicated message
+            if (file.endsWith(".css")) {
+                try {
+                    const root = server.config.root || process.cwd();
+                    let rel = path.posix.join("/", path.posix
+                        .normalize(path.relative(root, file))
+                        .split(path.sep)
+                        .join("/"));
+                    if (!rel.startsWith("/"))
+                        rel = "/" + rel;
+                    const ts = Date.now();
+                    const isHttps = !!server.config.server?.https;
+                    let origin = null;
+                    const urls = server.resolvedUrls;
+                    if (urls?.local?.length) {
+                        origin = String(urls.local[0]).replace(/\/$/, "");
+                    }
+                    else {
+                        const httpServer = server.httpServer;
+                        const addr = httpServer?.address?.();
+                        const port = Number(server.config.server?.port || addr?.port || 5173);
+                        const hostCfg = server.config.server?.host;
+                        const host = typeof hostCfg === "string" && hostCfg !== "0.0.0.0" ? hostCfg : "127.0.0.1";
+                        origin = `${isHttps ? "https" : "http"}://${host}:${port}`;
+                    }
+                    const update = { type: "css-update", path: rel, acceptedPath: rel, timestamp: ts };
+                    const cssMsg = { type: "ns:css-updates", origin: origin || undefined, updates: [update] };
+                    wss.clients.forEach((client) => {
+                        if (client.readyState === client.OPEN)
+                            client.send(JSON.stringify(cssMsg));
+                    });
+                    return;
+                }
+                catch (e) {
+                    console.warn("[pure-vue-ws] Failed to process CSS HMR for", file, e?.message || e);
+                    return;
+                }
+            }
+            if (!file.endsWith(".vue"))
+                return;
+            try {
+                // Build a project-root relative path that matches Vite dev served path
+                const root = server.config.root || process.cwd();
+                let rel = path.posix.join("/", path.posix
+                    .normalize(path.relative(root, file))
+                    .split(path.sep)
+                    .join("/"));
+                // Ensure leading slash
+                if (!rel.startsWith("/"))
+                    rel = "/" + rel;
+                // Construct template path the client can request from the dev server
+                const templatePath = `${rel}?vue&type=template`;
+                const id = path
+                    .basename(file)
+                    .replace(/\.vue$/i, "")
+                    .toLowerCase();
+                // Compute a stable hashed HMR id similar to webpack/vue plugin behavior
+                const hmrId = createHash("md5").update(rel).digest("hex").slice(0, 8);
+                // Get absolute file path for reference (simulator can't access but useful for debugging)
+                const absolutePath = `file://${path.resolve(file)}`;
+                const ts = Date.now(); // Compute absolute origin for the dev server
+                const isHttps = !!server.config.server?.https;
+                // Prefer resolvedUrls from Vite when available
+                let origin = null;
+                const urls = server.resolvedUrls;
+                if (urls?.local?.length) {
+                    // A local URL is like http://127.0.0.1:5173/
+                    origin = String(urls.local[0]).replace(/\/$/, "");
+                }
+                else {
+                    const httpServer = server.httpServer;
+                    const addr = httpServer?.address?.();
+                    const port = Number(server.config.server?.port || addr?.port || 5173);
+                    const hostCfg = server.config.server?.host;
+                    // Default to 127.0.0.1 for iOS simulator reliability
+                    const host = typeof hostCfg === "string" && hostCfg !== "0.0.0.0"
+                        ? hostCfg
+                        : "127.0.0.1";
+                    origin = `${isHttps ? "https" : "http"}://${host}:${port}`;
+                }
+                // Try to get transformed code to avoid HTTP fetch when possible
+                let templateCode;
+                try {
+                    const transformed = await server.transformRequest(templatePath);
+                    if (transformed?.code)
+                        templateCode = transformed.code;
+                }
+                catch (e) {
+                    // non-fatal
+                }
+                // Helper to embed minimal HMR runtime polyfills and rewrite imports to on-device vendor.mjs
+                // Also rewrites any `.vue` sub-imports to local hashed SFC module filenames (./sfc-<hash>.mjs)
+                function embedHmrRuntimeInModule(code, importerRel) {
+                    const vendorMjs = "~/vendor.mjs"; // NativeScript app-root alias
+                    const hmrPrelude = `
+// Embedded HMR Runtime for NativeScript Simulator (minimal)
+const createHotContext = (id) => ({
+  on: (event, handler) => {
+    if (!globalThis.__NS_HMR_HANDLERS__) globalThis.__NS_HMR_HANDLERS__ = new Map();
+    if (!globalThis.__NS_HMR_HANDLERS__.has(id)) globalThis.__NS_HMR_HANDLERS__.set(id, []);
+    globalThis.__NS_HMR_HANDLERS__.get(id).push({ event, handler });
+  },
+  accept: (handler) => {
+    if (!globalThis.__NS_HMR_ACCEPTS__) globalThis.__NS_HMR_ACCEPTS__ = new Map();
+    globalThis.__NS_HMR_ACCEPTS__.set(id, handler);
+  }
+});
+
+if (typeof import.meta === 'undefined') {
+  // Basic meta polyfill; hot is not used directly after rewrite
+  // @ts-ignore
+  globalThis.importMeta = { hot: null };
+} else if (!import.meta.hot) {
+  // @ts-ignore
+  import.meta.hot = null;
+}
+
+// Expose Vite-like hot context factory
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __vite__createHotContext = createHotContext;
+
+// Ensure __VUE_HMR_RUNTIME__ exists (client installs a real one)
+if (typeof __VUE_HMR_RUNTIME__ === 'undefined') {
+  // @ts-ignore
+  globalThis.__VUE_HMR_RUNTIME__ = {
+    createRecord: () => true,
+    reload: () => {},
+    rerender: () => {},
+  };
+}
+
+// Local copy of _export_sfc helper used by Vue SFCs
+function _export_sfc(sfc, props) {
+  if (props && Array.isArray(props)) {
+    for (const [key, value] of props) {
+      if (key === 'render') sfc.render = value;
+      else sfc[key] = value;
+    }
+  }
+  return sfc;
+}
+
+// Ensure _defineComponent is available by binding from globalThis (set by the HMR client)
+// Fallback to identity to keep runtime working even if not provided
+const _defineComponent = globalThis._defineComponent || globalThis.defineComponent || ((o) => o);
+`;
+                    let enhanced = String(code);
+                    // Remove any @vite/client imports
+                    enhanced = enhanced.replace(/^.*import.*@vite\/client.*$/gm, "// Removed @vite/client import for simulator compatibility");
+                    // Remove import.meta.hot assignments and handlers (we supply our own minimal polyfill)
+                    enhanced = enhanced.replace(/import\.meta\.hot\s*=\s*__vite__createHotContext\([^)]*\);?/g, "// Removed import.meta.hot assignment - using embedded polyfill");
+                    // Remove entire if (import.meta.hot) { ... } blocks to avoid trailing braces (balanced)
+                    enhanced = stripImportMetaHotBlocks(enhanced);
+                    // Remove direct handler registrations like: import.meta.hot.on(..., () => { ... }) and accept((mod) => {...})
+                    // Robustly strip the entire call including nested arrow function bodies until the matching ');'
+                    enhanced = enhanced.replace(/import\.meta\.hot\.(?:on|accept)\s*\([\s\S]*?\);\s*/g, "");
+                    // Remove common Vue HMR runtime statements and orphan else tails
+                    enhanced = stripVueHmrRuntimeNoise(enhanced);
+                    // Aggressively strip compiler HMR tail between __hmrId and export default
+                    enhanced = stripVueHmrTail(enhanced);
+                    // Drop virtual sub-imports (template/style blocks)
+                    enhanced = enhanced.replace(/import\s+[^"']*\s*from\s*["'][^"']*[?&]vue&type=[^"']*["'];?/g, "// Removed virtual vue sub-import for simulator compatibility");
+                    enhanced = enhanced.replace(/import\s*["'][^"']*[?&]vue&type=style[^"']*["'];?/g, "// Removed CSS virtual import");
+                    // Use the already-loaded on-device vendor bundle for framework imports
+                    enhanced = enhanced.replace(/from\s*["']@vue\/runtime-core["']/g, `from "${vendorMjs}"`);
+                    enhanced = enhanced.replace(/from\s*["']vue["']/g, `from "${vendorMjs}"`);
+                    enhanced = enhanced.replace(/from\s*["']nativescript-vue["']/g, `from "${vendorMjs}"`);
+                    // Also handle Vite-deps resolved paths just in case
+                    enhanced = enhanced.replace(/from\s*["']\/node_modules\/\.vite\/deps\/nativescript-vue.*?["']/g, `from "${vendorMjs}"`);
+                    // Remove export helper import (we provide _export_sfc above)
+                    enhanced = enhanced.replace(/^.*import\s+\{\s*?_export_sfc\s*?\}.*$/gm, "// Removed _export_sfc import - using embedded helper");
+                    // Remove remaining virtual id imports
+                    enhanced = enhanced.replace(/^.*import.*\/@id\/__x00__.*$/gm, "// Removed virtual import id");
+                    // Rewrite .vue sub-component imports to device-local hashed SFC files (strip query if present)
+                    enhanced = enhanced.replace(/(import\s+[^;]*?from\s*["'])([^"'?]*\.vue)(?:\?[^"']*)?(["'])/g, (_m, p1, spec, p3) => {
+                        const importerDir = path.posix.dirname(importerRel);
+                        let key = spec;
+                        if (!key.startsWith("/")) {
+                            // Resolve relative spec to project-absolute (leading slash)
+                            key = path.posix.normalize(path.posix.join(importerDir, spec));
+                            if (!key.startsWith("/"))
+                                key = "/" + key;
+                        }
+                        const fileName = sfcFileMap.get(key);
+                        if (!fileName)
+                            return `${p1}${spec}${p3}`;
+                        return `${p1}./${fileName}${p3}`;
+                    });
+                    // Remove imports of core runtime helpers (we'll map to globals) and inject underscore aliases
+                    const coreFns = [
+                        "resolveComponent",
+                        "createVNode",
+                        "createTextVNode",
+                        "withCtx",
+                        "openBlock",
+                        "createBlock",
+                        "createElementVNode",
+                        "createElementBlock",
+                    ];
+                    enhanced = removeNamedImports(enhanced, coreFns);
+                    const usesUnderscoreHelpers = /\b_(resolveComponent|createVNode|createTextVNode|withCtx|openBlock|createBlock|createElementVNode|createElementBlock)\b/.test(enhanced);
+                    if (usesUnderscoreHelpers) {
+                        const globalsPrelude = [
+                            "const _resolveComponent = globalThis._resolveComponent || globalThis.resolveComponent;",
+                            "const _createVNode = globalThis._createVNode || globalThis.createVNode;",
+                            "const _createTextVNode = globalThis._createTextVNode || globalThis.createTextVNode;",
+                            "const _withCtx = globalThis._withCtx || globalThis.withCtx;",
+                            "const _openBlock = globalThis._openBlock || globalThis.openBlock;",
+                            "const _createBlock = globalThis._createBlock || globalThis.createBlock;",
+                            "const _createElementVNode = globalThis._createElementVNode || globalThis.createElementVNode || globalThis.createVNode;",
+                            "const _createElementBlock = globalThis._createElementBlock || globalThis.createElementBlock || globalThis.createBlock;",
+                        ].join("\n");
+                        enhanced = globalsPrelude + "\n" + enhanced;
+                    }
+                    // Remove lingering imports of reactive helpers and bind from globals if used
+                    const reactiveFns = ["ref", "computed", "onMounted", "onUnmounted"];
+                    enhanced = removeNamedImports(enhanced, reactiveFns);
+                    // Remove any residual import lines for these names
+                    enhanced = enhanced.replace(/^.*import\s*\{[^}]*\b(ref|computed|onMounted|onUnmounted)\b[^}]*\}\s*from\s*["'][^"']+["'];?\s*$/gm, "");
+                    const reactiveToBind = [];
+                    if (/\bref\b/.test(enhanced))
+                        reactiveToBind.push("ref");
+                    if (/\bcomputed\b/.test(enhanced))
+                        reactiveToBind.push("computed");
+                    if (/\bonMounted\b/.test(enhanced))
+                        reactiveToBind.push("onMounted");
+                    if (/\bonUnmounted\b/.test(enhanced))
+                        reactiveToBind.push("onUnmounted");
+                    if (reactiveToBind.length) {
+                        enhanced = injectGlobalsBindings(enhanced, reactiveToBind);
+                    }
+                    // If code uses $navigate helpers, import only missing ones from vendor to avoid duplicates
+                    const usesNavTo = /\$navigateTo\b/.test(enhanced);
+                    const usesNavBack = /\$navigateBack\b/.test(enhanced);
+                    // Remove any named imports of these helpers from any source to avoid missing exports
+                    if (usesNavTo || usesNavBack) {
+                        const names = [];
+                        if (usesNavTo)
+                            names.push("$navigateTo");
+                        if (usesNavBack)
+                            names.push("$navigateBack");
+                        enhanced = removeNamedImports(enhanced, names);
+                        // Inject globals-based bindings
+                        enhanced = injectGlobalsBindings(enhanced, names);
+                    }
+                    // Finally, prepend the minimal HMR prelude
+                    return hmrPrelude + "\n" + enhanced;
+                }
+                const msg = {
+                    type: "ns:vue-template-url",
+                    id,
+                    hmrId,
+                    path: rel,
+                    absolutePath,
+                    templatePath,
+                    templateUrl: origin ? `${origin}${templatePath}` : undefined,
+                    origin: origin || undefined,
+                    code: templateCode,
+                    ts,
+                };
+                // APPROACH: Generate new .mjs module for dynamic import (preserves context, uses proper module system)
+                try {
+                    const source = readFileSync(file, "utf8");
+                    // Transform the entire Vue SFC to a module via Vite's pipeline
+                    const transformResult = await server.transformRequest(rel);
+                    if (transformResult?.code) {
+                        // Before sending dynamic module, ensure any newly imported .vue deps are registered
+                        try {
+                            const importerDir = path.posix.dirname(rel);
+                            const depSpecs = [];
+                            const depRe = /(import\s+[^;]*?from\s*["'])([^"'?]*\.vue)(?:\?[^"']*)?["']/g;
+                            let mm;
+                            while ((mm = depRe.exec(transformResult.code)) !== null) {
+                                const spec = mm[2];
+                                let key = spec;
+                                if (!key.startsWith("/")) {
+                                    key = path.posix.normalize(path.posix.join(importerDir, spec));
+                                    if (!key.startsWith("/"))
+                                        key = "/" + key;
+                                }
+                                depSpecs.push(key);
+                            }
+                            for (const depRel of depSpecs) {
+                                if (!sfcFileMap.has(depRel)) {
+                                    const depResult = await server.transformRequest(depRel);
+                                    if (depResult?.code) {
+                                        const sfcHash = createHash("md5").update(depRel).digest("hex").slice(0, 8);
+                                        const depFileName = `sfc-${sfcHash}.mjs`;
+                                        sfcFileMap.set(depRel, depFileName);
+                                        // Clean and rewrite similar to registry path
+                                        let depCode = depResult.code
+                                            .replace(/^.*import.*@vite\/client.*$/gm, "")
+                                            .replace(/import\.meta\.hot\s*=\s*__vite__createHotContext\([^)]*\);?/g, "");
+                                        depCode = stripImportMetaHotBlocks(depCode);
+                                        depCode = depCode.replace(/import\.meta\.hot\.(?:on|accept)\s*\([\s\S]*?\);\s*/g, "");
+                                        depCode = depCode
+                                            .replace(/import\s+[^"']*\s*from\s*["'][^"']*[?&]vue&type=[^"']*["'];?/g, "")
+                                            .replace(/import\s*["'][^"']*[?&]vue&type=style[^"']*["'];?/g, "")
+                                            .replace(/from\s*["']@vue\/runtime-core["']/g, 'from "~/vendor.mjs"')
+                                            .replace(/from\s*["']vue["']/g, 'from "~/vendor.mjs"')
+                                            .replace(/from\s*["']nativescript-vue["']/g, 'from "~/vendor.mjs"')
+                                            .replace(/from\s*["']\/node_modules\/\.vite\/deps\/nativescript-vue.*?["']/g, 'from "~/vendor.mjs"')
+                                            .replace(/^.*import\s+\{\s*?_export_sfc\s*?\}.*$/gm, "")
+                                            .replace(/^.*import.*\/@id\/__x00__.*$/gm, "");
+                                        depCode = stripVueHmrRuntimeNoise(depCode);
+                                        depCode = stripVueHmrTail(depCode);
+                                        // Export helper and _defineComponent binding
+                                        const exportHelperPrelude = `function _export_sfc(sfc, props){if(props&&Array.isArray(props)){for(const [k,v] of props){if(k==='render')sfc.render=v;else sfc[k]=v;}}return sfc;}`;
+                                        if (/\b_defineComponent\b/.test(depCode) && !/\bconst\s+_defineComponent\b/.test(depCode)) {
+                                            depCode = `const _defineComponent = globalThis._defineComponent || globalThis.defineComponent || ((o) => o);\n` + depCode;
+                                        }
+                                        // Remove helper imports and inject globals like registry path
+                                        const coreFns = [
+                                            "resolveComponent",
+                                            "createVNode",
+                                            "createTextVNode",
+                                            "withCtx",
+                                            "openBlock",
+                                            "createBlock",
+                                            "createElementVNode",
+                                            "createElementBlock",
+                                        ];
+                                        depCode = removeNamedImports(depCode, coreFns);
+                                        if (/\b_(resolveComponent|createVNode|createTextVNode|withCtx|openBlock|createBlock|createElementVNode|createElementBlock)\b/.test(depCode)) {
+                                            const globalsPrelude = [
+                                                "const _resolveComponent = globalThis._resolveComponent || globalThis.resolveComponent;",
+                                                "const _createVNode = globalThis._createVNode || globalThis.createVNode;",
+                                                "const _createTextVNode = globalThis._createTextVNode || globalThis.createTextVNode;",
+                                                "const _withCtx = globalThis._withCtx || globalThis.withCtx;",
+                                                "const _openBlock = globalThis._openBlock || globalThis.openBlock;",
+                                                "const _createBlock = globalThis._createBlock || globalThis.createBlock;",
+                                                "const _createElementVNode = globalThis._createElementVNode || globalThis.createElementVNode || globalThis.createVNode;",
+                                                "const _createElementBlock = globalThis._createElementBlock || globalThis.createElementBlock || globalThis.createBlock;",
+                                            ].join("\n");
+                                            depCode = globalsPrelude + "\n" + depCode;
+                                        }
+                                        const reactiveFns = ["ref", "computed", "onMounted", "onUnmounted"];
+                                        depCode = removeNamedImports(depCode, reactiveFns);
+                                        depCode = depCode.replace(/^.*import\s*\{[^}]*\b(ref|computed|onMounted|onUnmounted)\b[^}]*\}\s*from\s*["'][^"']+["'];?\s*$/gm, "");
+                                        const reactiveToBind = [];
+                                        if (/\bref\b/.test(depCode))
+                                            reactiveToBind.push("ref");
+                                        if (/\bcomputed\b/.test(depCode))
+                                            reactiveToBind.push("computed");
+                                        if (/\bonMounted\b/.test(depCode))
+                                            reactiveToBind.push("onMounted");
+                                        if (/\bonUnmounted\b/.test(depCode))
+                                            reactiveToBind.push("onUnmounted");
+                                        if (reactiveToBind.length)
+                                            depCode = injectGlobalsBindings(depCode, reactiveToBind);
+                                        // Nav helpers
+                                        if (/\$navigate(To|Back)\b/.test(depCode)) {
+                                            depCode = removeNamedImports(depCode, ["$navigateTo", "$navigateBack"]);
+                                            depCode = injectGlobalsBindings(depCode, ["$navigateTo", "$navigateBack"]);
+                                        }
+                                        depCode = exportHelperPrelude + "\n" + depCode;
+                                        const depUpdateMsg = {
+                                            type: "ns:vue-sfc-registry-update",
+                                            path: depRel,
+                                            fileName: depFileName,
+                                            code: depCode,
+                                            ts,
+                                        };
+                                        wss.clients.forEach((client) => {
+                                            if (client.readyState === client.OPEN)
+                                                client.send(JSON.stringify(depUpdateMsg));
+                                        });
+                                        console.log(`[pure-vue-websocket] Registered new SFC dep ${depRel} -> ${depFileName}`);
+                                    }
+                                }
+                            }
+                        }
+                        catch (e) {
+                            console.warn("[pure-vue-websocket] Failed ensuring SFC deps:", e?.message || e);
+                        }
+                        // Generate unique module name for this HMR update
+                        const moduleId = `hmr-${id}-${ts}`;
+                        const modulePath = `/${rel}?hmr=${ts}`;
+                        // Send dynamic module reload instruction with embedded HMR runtime
+                        const moduleMsg = {
+                            type: "ns:vue-dynamic-module",
+                            id,
+                            hmrId,
+                            path: rel,
+                            absolutePath,
+                            moduleId,
+                            modulePath,
+                            moduleCode: embedHmrRuntimeInModule(transformResult.code, rel), // Apply HMR runtime embedding here!
+                            originalSource: source,
+                            ts,
+                        };
+                        wss.clients.forEach((client) => {
+                            if (client.readyState === client.OPEN)
+                                client.send(JSON.stringify(moduleMsg));
+                        });
+                        console.log(`[pure-vue-websocket] Sent dynamic module for ${rel}: ${modulePath}`);
+                        // Additionally, if app-level CSS exists (e.g., /src/app.css), emit CSS update so Tailwind class changes apply
+                        try {
+                            const appCssFs = path.resolve(root, "src/app.css");
+                            let cssExists = false;
+                            try {
+                                const st = statSync(appCssFs);
+                                cssExists = st?.isFile?.() || false;
+                            }
+                            catch { }
+                            if (cssExists) {
+                                const cssRel = "/src/app.css";
+                                const update = {
+                                    type: "css-update",
+                                    path: cssRel,
+                                    acceptedPath: cssRel,
+                                    timestamp: ts,
+                                };
+                                const cssMsg = {
+                                    type: "ns:css-updates",
+                                    origin: origin || undefined,
+                                    updates: [update],
+                                };
+                                wss.clients.forEach((client) => {
+                                    if (client.readyState === client.OPEN)
+                                        client.send(JSON.stringify(cssMsg));
+                                });
+                            }
+                        }
+                        catch (e) {
+                            console.warn("[pure-vue-websocket] Failed emitting Tailwind CSS update:", e?.message || e);
+                        }
+                        // Also set the transformed code for template URL fallback
+                        templateCode = transformResult.code;
+                        // Additionally, update (or add) the corresponding registry SFC module on device
+                        try {
+                            const sfcHash = createHash("md5")
+                                .update(rel)
+                                .digest("hex")
+                                .slice(0, 8);
+                            const fileName = sfcFileMap.get(rel) || `sfc-${sfcHash}.mjs`;
+                            sfcFileMap.set(rel, fileName);
+                            // Apply similar transforms as in buildAndSendSfcRegistry
+                            let sfcCode = transformResult.code
+                                // Remove @vite/client
+                                .replace(/^.*import.*@vite\/client.*$/gm, "")
+                                // Remove import.meta.hot assignment
+                                .replace(/import\.meta\.hot\s*=\s*__vite__createHotContext\([^)]*\);?/g, "");
+                            sfcCode = stripImportMetaHotBlocks(sfcCode);
+                            sfcCode = sfcCode.replace(/import\.meta\.hot\.(?:on|accept)\s*\([\s\S]*?\);\s*/g, "");
+                            // Remove virtual blocks
+                            sfcCode = sfcCode
+                                .replace(/import\s+[^"']*\s*from\s*["'][^"']*[?&]vue&type=[^"']*["'];?/g, "")
+                                .replace(/import\s*["'][^"']*[?&]vue&type=style[^"']*["'];?/g, "")
+                                // Vendor rewrites
+                                .replace(/from\s*["']@vue\/runtime-core["']/g, 'from "~/vendor.mjs"')
+                                .replace(/from\s*["']vue["']/g, 'from "~/vendor.mjs"')
+                                .replace(/from\s*["']nativescript-vue["']/g, 'from "~/vendor.mjs"')
+                                .replace(/from\s*["']\/node_modules\/\.vite\/deps\/nativescript-vue.*?["']/g, 'from "~/vendor.mjs"')
+                                // Remove export helper import (we inject our own)
+                                .replace(/^.*import\s+\{\s*?_export_sfc\s*?\}.*$/gm, "")
+                                // Remove remaining virtual id imports
+                                .replace(/^.*import.*\/@id\/__x00__.*$/gm, "");
+                            // Remove Vue HMR runtime noise and orphan else
+                            sfcCode = stripVueHmrRuntimeNoise(sfcCode);
+                            sfcCode = stripVueHmrTail(sfcCode);
+                            // Rewrite internal .vue imports to hashed files (strip any query)
+                            const importerDir = path.posix.dirname(rel);
+                            sfcCode = sfcCode.replace(/(import\s+[^;]*?from\s*["'])([^"'?]*\.vue)(?:\?[^"']*)?(["'])/g, (_m, p1, spec, p3) => {
+                                let key = spec;
+                                if (!key.startsWith("/")) {
+                                    key = path.posix.normalize(path.posix.join(importerDir, spec));
+                                    if (!key.startsWith("/"))
+                                        key = "/" + key;
+                                }
+                                const depFile = sfcFileMap.get(key);
+                                if (!depFile)
+                                    return `${p1}${spec}${p3}`;
+                                return `${p1}./${depFile}${p3}`;
+                            });
+                            const exportHelperPrelude = `function _export_sfc(sfc, props){if(props&&Array.isArray(props)){for(const [k,v] of props){if(k==='render')sfc.render=v;else sfc[k]=v;}}return sfc;}`;
+                            // Ensure _defineComponent available via globals
+                            if (/\b_defineComponent\b/.test(sfcCode) &&
+                                !/\bconst\s+_defineComponent\b/.test(sfcCode)) {
+                                sfcCode =
+                                    `const _defineComponent = globalThis._defineComponent || globalThis.defineComponent || ((o) => o);\n` +
+                                        sfcCode;
+                            }
+                            // Remove core runtime helper imports and map to globals
+                            const coreFns = [
+                                "resolveComponent",
+                                "createVNode",
+                                "createTextVNode",
+                                "withCtx",
+                                "openBlock",
+                                "createBlock",
+                                "createElementVNode",
+                                "createElementBlock",
+                            ];
+                            sfcCode = removeNamedImports(sfcCode, coreFns);
+                            if (/\b_(resolveComponent|createVNode|createTextVNode|withCtx|openBlock|createBlock|createElementVNode|createElementBlock)\b/.test(sfcCode)) {
+                                const globalsPrelude = [
+                                    "const _resolveComponent = globalThis._resolveComponent || globalThis.resolveComponent;",
+                                    "const _createVNode = globalThis._createVNode || globalThis.createVNode;",
+                                    "const _createTextVNode = globalThis._createTextVNode || globalThis.createTextVNode;",
+                                    "const _withCtx = globalThis._withCtx || globalThis.withCtx;",
+                                    "const _openBlock = globalThis._openBlock || globalThis.openBlock;",
+                                    "const _createBlock = globalThis._createBlock || globalThis.createBlock;",
+                                    "const _createElementVNode = globalThis._createElementVNode || globalThis.createElementVNode || globalThis.createVNode;",
+                                    "const _createElementBlock = globalThis._createElementBlock || globalThis.createElementBlock || globalThis.createBlock;",
+                                ].join("\n");
+                                sfcCode = globalsPrelude + "\n" + sfcCode;
+                            }
+                            // Remove lingering reactive helper imports and bind from globals if used
+                            const reactiveFns = ["ref", "computed", "onMounted", "onUnmounted"];
+                            sfcCode = removeNamedImports(sfcCode, reactiveFns);
+                            sfcCode = sfcCode.replace(/^.*import\s*\{[^}]*\b(ref|computed|onMounted|onUnmounted)\b[^}]*\}\s*from\s*["'][^"']+["'];?\s*$/gm, "");
+                            const reactiveToBind = [];
+                            if (/\bref\b/.test(sfcCode))
+                                reactiveToBind.push("ref");
+                            if (/\bcomputed\b/.test(sfcCode))
+                                reactiveToBind.push("computed");
+                            if (/\bonMounted\b/.test(sfcCode))
+                                reactiveToBind.push("onMounted");
+                            if (/\bonUnmounted\b/.test(sfcCode))
+                                reactiveToBind.push("onUnmounted");
+                            if (reactiveToBind.length) {
+                                sfcCode = injectGlobalsBindings(sfcCode, reactiveToBind);
+                            }
+                            // Handle navigation helpers via globals
+                            const usesNavTo = /\$navigateTo\b/.test(sfcCode);
+                            const usesNavBack = /\$navigateBack\b/.test(sfcCode);
+                            if (usesNavTo || usesNavBack) {
+                                const names = [];
+                                if (usesNavTo)
+                                    names.push("$navigateTo");
+                                if (usesNavBack)
+                                    names.push("$navigateBack");
+                                sfcCode = removeNamedImports(sfcCode, names);
+                                sfcCode = injectGlobalsBindings(sfcCode, names);
+                            }
+                            sfcCode = exportHelperPrelude + "\n" + sfcCode;
+                            const updateMsg = {
+                                type: "ns:vue-sfc-registry-update",
+                                path: rel,
+                                fileName,
+                                code: sfcCode,
+                                ts,
+                            };
+                            wss.clients.forEach((client) => {
+                                if (client.readyState === client.OPEN)
+                                    client.send(JSON.stringify(updateMsg));
+                            });
+                        }
+                        catch (e) {
+                            console.warn("[pure-vue-websocket] Failed to send SFC registry update for", rel, e);
+                        }
+                    }
+                    // FALLBACK: Send raw SFC source for on-device compilation if needed
+                    const sfcMsg = {
+                        type: "ns:vue-sfc-source",
+                        id,
+                        hmrId,
+                        path: rel,
+                        absolutePath,
+                        source,
+                        ts,
+                    };
+                    wss.clients.forEach((client) => {
+                        if (client.readyState === client.OPEN)
+                            client.send(JSON.stringify(sfcMsg));
+                    });
+                }
+                catch (e) {
+                    console.warn("[pure-vue-websocket] Failed to generate dynamic module:", e);
+                }
+                // SECOND: Send transformed template as fallback
+                console.log("[pure-vue-ws] template-url (fallback)", {
+                    path: rel,
+                    hmrId,
+                    templateUrl: msg.templateUrl,
+                    hasCode: !!templateCode,
+                });
+                wss.clients.forEach((client) => {
+                    if (client.readyState === client.OPEN)
+                        client.send(JSON.stringify(msg));
+                });
+                // Note: keeping template-url as fallback for debugging/alternative paths
+            }
+            catch (e) {
+                console.warn("[pure-vue-ws] Failed to process HMR for", file, e?.message || e);
+            }
+            return ctx.modules;
+        },
+    };
+}
+// Recursively walk directories to find .vue files (excluding common large/irrelevant folders)
+// TODO: improve this to walk from base src directory (need to think about workspaces)
+function walkVueFiles(dir, acc, root) {
+    for (const name of readdirSync(dir)) {
+        const full = path.join(dir, name);
+        const rel = path.relative(root, full);
+        // skip
+        if (name === "node_modules" ||
+            name === ".git" ||
+            name === "dist" ||
+            name === '.ns-vite-build' ||
+            name === "hooks" ||
+            name === "platform" ||
+            name === "platforms" ||
+            name === "App_Resources") {
+            continue;
+        }
+        const st = statSync(full);
+        if (st.isDirectory()) {
+            walkVueFiles(full, acc, root);
+        }
+        else if (st.isFile() && name.endsWith(".vue")) {
+            acc.push("/" + rel.split(path.sep).join("/"));
+        }
+    }
+}
+async function buildAndSendSfcRegistry(server, sfcFileMap, wss) {
+    const root = server.config.root || process.cwd();
+    const vueFiles = [];
+    walkVueFiles(root, vueFiles, root);
+    if (!vueFiles.length)
+        return;
+    // Prepare entries
+    const entries = [];
+    for (const rel of vueFiles) {
+        // Generate stable hashed filename for device-local storage
+        const hash = createHash("md5").update(rel).digest("hex").slice(0, 8);
+        const fileName = `sfc-${hash}.mjs`;
+        sfcFileMap.set(rel, fileName);
+    }
+    // Transform all and rewrite their own .vue imports to hashed names and vendor path
+    for (const rel of vueFiles) {
+        try {
+            const result = await server.transformRequest(rel);
+            if (!result?.code)
+                continue;
+            let code = result.code;
+            // Apply same vendor/virtual/remove-hot rewrites as dynamic modules, but no HMR prelude
+            code = code
+                // Remove @vite/client
+                .replace(/^.*import.*@vite\/client.*$/gm, "// Removed @vite/client import")
+                // Remove import.meta.hot assignment and blocks
+                .replace(/import\.meta\.hot\s*=\s*__vite__createHotContext\([^)]*\);?/g, "");
+            code = stripImportMetaHotBlocks(code);
+            code = code.replace(/import\.meta\.hot\.(?:on|accept)\s*\([\s\S]*?\);\s*/g, "");
+            code = code
+                // Remove virtual blocks
+                .replace(/import\s+[^"']*\s*from\s*["'][^"']*[?&]vue&type=[^"']*["'];?/g, "// Removed virtual vue import")
+                .replace(/import\s*["'][^"']*[?&]vue&type=style[^"']*["'];?/g, "// Removed CSS virtual import")
+                // Vendor rewrites
+                .replace(/from\s*["']@vue\/runtime-core["']/g, 'from "~/vendor.mjs"')
+                .replace(/from\s*["']vue["']/g, 'from "~/vendor.mjs"')
+                .replace(/from\s*["']nativescript-vue["']/g, 'from "~/vendor.mjs"')
+                .replace(/from\s*["']\/node_modules\/\.vite\/deps\/nativescript-vue.*?["']/g, 'from "~/vendor.mjs"')
+                // Remove export helper import (we provide one in registry output below)
+                .replace(/^.*import\s+\{\s*?_export_sfc\s*?\}.*$/gm, "")
+                // Remove remaining virtual id imports
+                .replace(/^.*import.*\/@id\/__x00__.*$/gm, "");
+            code = stripVueHmrRuntimeNoise(code);
+            code = stripVueHmrTail(code);
+            // Inject a minimal _export_sfc helper at top to satisfy compiled SFC default export pattern
+            const exportHelperPrelude = `function _export_sfc(sfc, props){if(props&&Array.isArray(props)){for(const [k,v] of props){if(k==='render')sfc.render=v;else sfc[k]=v;}}return sfc;}`;
+            code = exportHelperPrelude + "\n" + code;
+            // Rewrite its own .vue imports to hashed SFC local files, resolving relative paths against importer (strip any query)
+            const importerDir = path.posix.dirname(rel);
+            code = code.replace(/(import\s+[^;]*?from\s*["'])([^"'?]*\.vue)(?:\?[^"']*)?(["'])/g, (_m, p1, importPath, p3) => {
+                let key = importPath;
+                if (!key.startsWith("/")) {
+                    key = path.posix.normalize(path.posix.join(importerDir, importPath));
+                    if (!key.startsWith("/"))
+                        key = "/" + key;
+                }
+                const fileName = sfcFileMap.get(key);
+                if (!fileName)
+                    return `${p1}${importPath}${p3}`;
+                return `${p1}./${fileName}${p3}`;
+            });
+            // Ensure _defineComponent is available via globals if referenced
+            if (/\b_defineComponent\b/.test(code) &&
+                !/\bconst\s+_defineComponent\b/.test(code)) {
+                code =
+                    `const _defineComponent = globalThis._defineComponent || globalThis.defineComponent || ((o) => o);\n` +
+                        code;
+            }
+            // Remove imports for core runtime helper functions and map to globals
+            const coreFns = [
+                "resolveComponent",
+                "createVNode",
+                "createTextVNode",
+                "withCtx",
+                "openBlock",
+                "createBlock",
+                "createElementVNode",
+                "createElementBlock",
+            ];
+            code = removeNamedImports(code, coreFns);
+            if (/\b_(resolveComponent|createVNode|createTextVNode|withCtx|openBlock|createBlock|createElementVNode|createElementBlock)\b/.test(code)) {
+                const globalsPrelude = [
+                    "const _resolveComponent = globalThis._resolveComponent || globalThis.resolveComponent;",
+                    "const _createVNode = globalThis._createVNode || globalThis.createVNode;",
+                    "const _createTextVNode = globalThis._createTextVNode || globalThis.createTextVNode;",
+                    "const _withCtx = globalThis._withCtx || globalThis.withCtx;",
+                    "const _openBlock = globalThis._openBlock || globalThis.openBlock;",
+                    "const _createBlock = globalThis._createBlock || globalThis.createBlock;",
+                    "const _createElementVNode = globalThis._createElementVNode || globalThis.createElementVNode || globalThis.createVNode;",
+                    "const _createElementBlock = globalThis._createElementBlock || globalThis.createElementBlock || globalThis.createBlock;",
+                ].join("\n");
+                code = globalsPrelude + "\n" + code;
+            }
+            // Remove lingering imports of reactive helpers and bind from globals if used
+            const reactiveFns = ["ref", "computed", "onMounted", "onUnmounted"];
+            code = removeNamedImports(code, reactiveFns);
+            code = code.replace(/^.*import\s*\{[^}]*\b(ref|computed|onMounted|onUnmounted)\b[^}]*\}\s*from\s*["'][^"']+["'];?\s*$/gm, "");
+            const reactiveToBind = [];
+            if (/\bref\b/.test(code))
+                reactiveToBind.push("ref");
+            if (/\bcomputed\b/.test(code))
+                reactiveToBind.push("computed");
+            if (/\bonMounted\b/.test(code))
+                reactiveToBind.push("onMounted");
+            if (/\bonUnmounted\b/.test(code))
+                reactiveToBind.push("onUnmounted");
+            if (reactiveToBind.length) {
+                code = injectGlobalsBindings(code, reactiveToBind);
+            }
+            // Handle navigation helpers using globals instead of vendor exports
+            const usesNavTo = /\$navigateTo\b/.test(code);
+            const usesNavBack = /\$navigateBack\b/.test(code);
+            if (usesNavTo || usesNavBack) {
+                const names = [];
+                if (usesNavTo)
+                    names.push("$navigateTo");
+                if (usesNavBack)
+                    names.push("$navigateBack");
+                code = removeNamedImports(code, names);
+                code = injectGlobalsBindings(code, names);
+            }
+            const hmrId = createHash("md5").update(rel).digest("hex").slice(0, 8);
+            const fileName = sfcFileMap.get(rel);
+            entries.push({ path: rel, fileName, hmrId, code });
+        }
+        catch (e) {
+            console.warn("[pure-vue-ws] Failed transforming", rel, e?.message || e);
+        }
+    }
+    if (!entries.length)
+        return;
+    const msg = {
+        type: "ns:vue-sfc-registry",
+        entries,
+        ts: Date.now(),
+    };
+    wss.clients.forEach((client) => {
+        if (client.readyState === client.OPEN)
+            client.send(JSON.stringify(msg));
+    });
+    console.log(`[pure-vue-websocket] Sent SFC registry with ${entries.length} entries`);
+}