@nativescript/vite 8.0.0-alpha.6 → 8.0.0-alpha.61

package/helpers/main-entry.js

@@ -2,11 +2,16 @@ import { getPackageJson, getProjectFilePath, getProjectRootPath } from './projec
 import fs from 'fs';
 import path from 'path';
 import { preprocessCSS } from 'vite';
+import { parse as parseCssToAst } from 'css';
 import { getProjectFlavor } from './flavor.js';
-import { getProjectAppPath, getProjectAppRelativePath, getProjectAppVirtualPath } from './utils.js';
+import { getProjectAppPath, getProjectAppRelativePath, getProjectAppVirtualPath, resolveProjectGlobalCssPath } from './utils.js';
 import { getResolvedAppComponents } from './app-components.js';
 import { toStaticImportSpecifier } from './import-specifier.js';
 import { buildCoreUrl } from './ns-core-url.js';
+import { resolveDeviceReachableOrigin } from './dev-host.js';
+import { setAppCssState } from './app-css-state.js';
+import { rewritePlatformCssImports } from './css-platform-plugin.js';
+import { buildGlobalSeedStatements, getRuntimeSeedValues } from './global-defines.js';
 // Switched to runtime modules to avoid fragile string injection and enable TS checks
 const projectRoot = getProjectRootPath();
 const appRootDir = getProjectAppPath();
@@ -46,26 +51,205 @@ const VIRTUAL_ID = 'virtual:entry-with-polyfills';
 const RESOLVED = '\0' + VIRTUAL_ID;
 const APP_CSS_VIRTUAL_ID = 'virtual:ns-app-css';
 const APP_CSS_RESOLVED = '\0' + APP_CSS_VIRTUAL_ID;
+// Build-only applier for SFC `<style>` + JS/TS-imported `.css`/`.scss` that Vite
+// extracts into a CSS asset. NativeScript has no DOM to `<link>` it, so the
+// `--no-hmr` build would otherwise drop those styles (HMR applies them at
+// runtime). `load` emits the apply with a sentinel; `generateBundle` rewrites it
+// to the collected rework-CSS AST (the form `app.css` uses). Replaces the per-app
+// `nsSfcStylesPlugin` workaround — apps no longer need their own.
+const BUNDLE_CSS_VIRTUAL_ID = 'virtual:ns-bundle-css';
+const BUNDLE_CSS_RESOLVED = '\0' + BUNDLE_CSS_VIRTUAL_ID;
+const BUNDLE_CSS_AST_SENTINEL = '__NS_BUNDLE_CSS_AST__';
 // Virtual module that installs the XHR polyfill from @nativescript/core/xhr.
 // Rolldown tree-shakes the polyfill-xhr.ts side-effect import from @nativescript/core/globals,
 // so XMLHttpRequest never gets registered as a global. This dedicated module ensures the XHR
 // polyfill is installed during module evaluation (before zone.js patches run).
 const XHR_POLYFILL_VIRTUAL_ID = 'virtual:ns-xhr-polyfill';
 const XHR_POLYFILL_RESOLVED = '\0' + XHR_POLYFILL_VIRTUAL_ID;
+// Virtual module that seeds compile-time defines (`__APPLE__`, `__IOS__`,
+// `__DEV__`, etc.) on `globalThis` BEFORE any other module evaluates.
+//
+// Why this exists. The per-module shim that `processCodeForDevice` injects
+// at the top of every served module reads these values from `globalThis`:
+//   const __APPLE__ = globalThis.__APPLE__ !== undefined
+//     ? globalThis.__APPLE__
+//     : (__IOS__ || __VISIONOS__);
+// `const` evaluates ONCE at module instantiation. So every module needs
+// `globalThis.__APPLE__` to already be set when it instantiates — otherwise
+// it locks in `false` for the lifetime of the module.
+//
+// In ESM, all `import` statements hoist to the top of the module's
+// evaluation phase: imports run in DFS post-order BEFORE the importing
+// module's body. If we put the seed assignments inline in the entry's
+// body (e.g. `globalThis.__APPLE__ = true`), they run AFTER every module
+// transitively imported via `bundle-entry-points` (which reaches the
+// user's `main.ts` → `app.module.ts` → services → util files). Those
+// utility modules then snapshot `globalThis.__APPLE__ = undefined` and
+// fall through to the `false` branch — landing iOS code in the
+// `else { /* Android */ }` branch and crashing on `Utils.android.*`.
+//
+// The fix is to import this virtual module FIRST in the entry. As a leaf
+// in the dependency graph it evaluates before every sibling import, so
+// its body assignments happen before any user module instantiates and
+// reads `globalThis.__*`. This is the architecturally-correct way to
+// make values available to other modules across the import graph in ESM.
+const DEFINES_SEED_VIRTUAL_ID = 'virtual:ns-defines-seed';
+const DEFINES_SEED_RESOLVED = '\0' + DEFINES_SEED_VIRTUAL_ID;
 export function mainEntryPlugin(opts) {
     let resolvedConfig;
+    // Prefer the flavor the active config DECLARES (threaded from baseConfig)
+    // over deps-based detection: in workspaces whose app package.json doesn't
+    // list the framework package (hoisted to the root), detection falls through
+    // to 'typescript' — which previously emitted the ts-only
+    // `virtual:ns-ui-registration` import into an Angular entry with no
+    // resolver registered, and seeded the wrong `__NS_TARGET_FLAVOR__`.
+    const effectiveFlavor = opts.flavor || flavor;
     return {
         name: 'main-entry',
         configResolved(config) {
             resolvedConfig = config;
         },
+        // Fill the `virtual:ns-bundle-css` sentinel with the extracted CSS and drop
+        // the orphan asset (non-HMR builds only; HMR delivers this CSS at runtime).
+        generateBundle(_outputOptions, bundle) {
+            if (opts.hmrActive)
+                return;
+            try {
+                const cssAssets = Object.values(bundle).filter((f) => f && f.type === 'asset' && typeof f.fileName === 'string' && f.fileName.endsWith('.css'));
+                let cssText = '';
+                for (const a of cssAssets) {
+                    const src = a.source;
+                    cssText += (typeof src === 'string' ? src : new TextDecoder().decode(src)) + '\n';
+                }
+                // Rework AST, position-stripped (the form app.css uses; ~halves size).
+                const ast = parseCssToAst(cssText, { silent: true });
+                const astJson = JSON.stringify(ast, (key, value) => (key === 'position' ? undefined : value));
+                // Rewrite the sentinel in whichever chunk carries the applier.
+                const sentinelRe = new RegExp(`(['"])${BUNDLE_CSS_AST_SENTINEL}\\1`);
+                let replaced = false;
+                for (const file of Object.values(bundle)) {
+                    if (file && file.type === 'chunk' && typeof file.code === 'string' && sentinelRe.test(file.code)) {
+                        file.code = file.code.replace(sentinelRe, () => astJson);
+                        replaced = true;
+                        break;
+                    }
+                }
+                // Drop the orphan asset only after its rules are applied above.
+                if (replaced) {
+                    for (const a of cssAssets)
+                        delete bundle[a.fileName];
+                }
+                if (opts.verbose) {
+                    console.info(`[ns-entry] bundle CSS: ${cssAssets.length} asset(s), ${cssText.length} bytes, applied=${replaced}`);
+                }
+            }
+            catch (e) {
+                if (opts.verbose)
+                    console.warn('[ns-entry] bundle CSS injection failed:', e?.message || e);
+            }
+        },
+        // Warm chokidar with `app.css`'s @import dependency tree at
+        // server startup. Without this, the FIRST save to a workspace
+        // `@import` dep (e.g. `<repo>/libs/.../index.css`) is silently
+        // dropped: nothing in the cold-boot path causes the dev server
+        // to transform `app.css`, so `vite:css` never registers
+        // `@import`-resolved deps with the watcher. Eagerly resolving
+        // them here breaks the chicken-and-egg.
+        //
+        // We ALSO stash the resolved dep set on the server itself so
+        // the HMR websocket handler can recognize when a non-CSS edit
+        // (e.g. a `.html` template or `.ts` file scanned by Tailwind's
+        // content config) should trigger a fresh `app.css` fetch. The
+        // `preprocessCSS` deps include every file PostCSS reported as
+        // a `dependency` message — for Tailwind 3 with content globs,
+        // Vite's `compileCSS` expands the `dir-dependency` glob into
+        // the individual file paths, so we get the full content set.
+        //
+        // `app.css` is NEVER a real Vite module in NS HMR (the virtual
+        // `:ns-app-css` module re-runs `preprocessCSS` in its load
+        // hook), so the standard moduleGraph `addWatchFile` →
+        // `_addedImports` → file-only-entry-importer chain doesn't
+        // populate, and `ctx.modules` for a content-file edit never
+        // links back to a CSS module. The dep set fills that gap.
+        configureServer(server) {
+            if (server.config.command !== 'serve')
+                return;
+            // Prefer `app.css`, fall back to `styles.css` (common in web projects).
+            const appCssPath = resolveProjectGlobalCssPath(projectRoot);
+            if (!appCssPath)
+                return;
+            const normalizeFsPath = (p) => path.resolve(p).replace(/\\/g, '/');
+            const normalizedAppCssPath = normalizeFsPath(appCssPath);
+            const watchedDeps = new Set([normalizedAppCssPath]);
+            const refreshDeps = async () => {
+                try {
+                    const rawCode = fs.readFileSync(appCssPath, 'utf-8');
+                    // Same platform @import rewrite as the virtual:ns-app-css load hook —
+                    // this raw read also bypasses the ns-css-platform transform.
+                    const code = rewritePlatformCssImports(rawCode, path.dirname(appCssPath), opts.platform) ?? rawCode;
+                    const result = await preprocessCSS(code, appCssPath, server.config);
+                    server.watcher.add(appCssPath);
+                    const next = new Set([normalizedAppCssPath]);
+                    for (const dep of result?.deps ?? []) {
+                        if (typeof dep === 'string' && dep) {
+                            server.watcher.add(dep);
+                            next.add(normalizeFsPath(dep));
+                        }
+                    }
+                    // Atomic-ish replace: clear + repopulate the existing
+                    // Set so any concurrent reader sees a consistent view
+                    // when iterating with `.has()`.
+                    watchedDeps.clear();
+                    for (const f of next)
+                        watchedDeps.add(f);
+                }
+                catch { }
+            };
+            setAppCssState(server, { path: normalizedAppCssPath, deps: watchedDeps });
+            refreshDeps();
+            // Re-scan when `app.css` itself or a Tailwind config file
+            // changes — Tailwind's content list and utility definitions
+            // can both shift, so the dep set has to follow. Debounced
+            // because watcher events for the same edit can fire in
+            // quick succession (chokidar's atomic save handling).
+            let pendingRefresh = null;
+            const scheduleRefresh = () => {
+                if (pendingRefresh)
+                    clearTimeout(pendingRefresh);
+                pendingRefresh = setTimeout(() => {
+                    pendingRefresh = null;
+                    refreshDeps();
+                }, 50);
+            };
+            const isAppCssOrTailwindConfig = (file) => {
+                const normalized = normalizeFsPath(file);
+                if (normalized === normalizedAppCssPath)
+                    return true;
+                return /\/tailwind\.config\.[mc]?[jt]s$/.test(normalized);
+            };
+            server.watcher.on('change', (file) => {
+                if (isAppCssOrTailwindConfig(file))
+                    scheduleRefresh();
+            });
+            // `add`/`unlink` cover Tailwind's content set growing or
+            // shrinking — new template files, deleted partials, etc.
+            // Re-running `preprocessCSS` is the safest way to keep the
+            // glob expansion accurate without re-implementing the
+            // match.
+            server.watcher.on('add', scheduleRefresh);
+            server.watcher.on('unlink', scheduleRefresh);
+        },
         resolveId(id) {
             if (id === VIRTUAL_ID)
                 return RESOLVED;
             if (id === APP_CSS_VIRTUAL_ID)
                 return APP_CSS_RESOLVED;
+            if (id === BUNDLE_CSS_VIRTUAL_ID)
+                return BUNDLE_CSS_RESOLVED;
             if (id === XHR_POLYFILL_VIRTUAL_ID)
                 return XHR_POLYFILL_RESOLVED;
+            if (id === DEFINES_SEED_VIRTUAL_ID)
+                return DEFINES_SEED_RESOLVED;
             return null;
         },
         async load(id) {
@@ -75,15 +259,24 @@ export function mainEntryPlugin(opts) {
             // the import map isn't installed yet at that phase. For non-HMR
             // builds, we keep bare specifiers so production bundlers inline core
             // the normal way.
+            //
+            // Routes through `resolveDeviceReachableOrigin` so the URL baked
+            // into the bundle is something the DEVICE can reach: wildcard
+            // binds (`0.0.0.0`) and Android loopback get remapped to a real
+            // LAN IP (preferred) or the platform's reachable fallback
+            // (`10.0.2.2` for the Android emulator). Without this, Android
+            // crashes at boot trying to fetch `http://0.0.0.0:5173/ns/core/xhr`.
             const getBootOrigin = () => {
                 if (!opts.hmrActive)
                     return null;
                 try {
-                    const configuredHost = typeof resolvedConfig.server.host === 'string' && resolvedConfig.server.host ? resolvedConfig.server.host : 'localhost';
-                    const bootHost = (process.env.NS_HMR_HOST || '') || configuredHost;
-                    const bootProtocol = resolvedConfig.server.https || opts.useHttps ? 'https' : 'http';
-                    const bootPort = Number(resolvedConfig.server.port || 5173);
-                    return `${bootProtocol}://${bootHost}:${bootPort}`;
+                    const { origin } = resolveDeviceReachableOrigin({
+                        host: resolvedConfig.server.host,
+                        platform: opts.platform,
+                        protocol: resolvedConfig.server.https || opts.useHttps ? 'https' : 'http',
+                        port: Number(resolvedConfig.server.port || 5173),
+                    });
+                    return origin;
                 }
                 catch {
                     return null;
@@ -96,10 +289,10 @@ export function mainEntryPlugin(opts) {
             // the bundler to handle.
             //
             // Under HMR, delegates to buildCoreUrl() — the ONE canonical URL
-            // generator (see Invariant A, HMR_CORE_REALM_DETERMINISTIC_PLAN.md).
-            // Every URL emitter in the build/runtime pipeline (this function,
-            // ns-core-external-urls, rewriteSpec, runtime import map) uses the
-            // same function so iOS's HTTP ESM cache sees byte-identical URLs.
+            // generator. Every URL emitter in the build/runtime pipeline (this
+            // function, ns-core-external-urls, rewriteSpec, runtime import map)
+            // uses the same function so iOS's HTTP ESM cache sees byte-identical
+            // URLs.
             const coreSpec = (subpath) => {
                 const origin = getBootOrigin();
                 if (origin) {
@@ -108,16 +301,82 @@ export function mainEntryPlugin(opts) {
                 const sub = subpath ? String(subpath).replace(/^\/+/, '') : '';
                 return sub ? `@nativescript/core/${sub}` : '@nativescript/core';
             };
-            // Virtual module that processes app.css through PostCSS/Tailwind and returns as a JS string.
-            // This avoids using ?inline which conflicts with @analogjs/vite-plugin-angular's CSS
-            // interception in Vite 8 — the Angular plugin converts ?inline CSS to JS via its load hook
-            // but doesn't set moduleType:'js', so vite:css still tries to run PostCSS on the JS output.
+            // Virtual module that processes app.css through PostCSS/Tailwind and emits a
+            // JS module that BOTH applies the CSS as a side-effect AND exports the raw
+            // CSS string as default.
+            //
+            // Background: Vite's default `?inline` CSS handling collides with
+            // @analogjs/vite-plugin-angular's load hook in Vite 8 (it converts ?inline
+            // CSS to JS without setting moduleType:'js', so vite:css still tries to run
+            // PostCSS on the JS output). This virtual module sidesteps that.
+            //
+            // We still export the raw CSS string as default so the entry can seed
+            // `globalThis.__NS_HMR_APP_CSS__` for HMR's HTTP-core-realm replay path.
+            //
+            // We always pre-parse with rework `css` and either:
+            //   - non-HMR: call `addTaggedAdditionalCSS(astJson, 'app.css')` directly
+            //     so the bundled `style-scope` realm gets the styles before any view
+            //     is created.
+            //   - HMR: stash the AST on `globalThis.__NS_HMR_APP_CSS_AST__` so
+            //     `installHttpCoreCssSupport` can apply it via the SAME AST path
+            //     in the HTTP-core realm. Without this, the HTTP path would fall
+            //     back to applying the raw text via `cssTreeParse` at runtime,
+            //     which has produced subtle behavioral mismatches with the rework
+            //     AST (e.g. `.text-sm { line-height: 20 }` rendering with extra
+            //     line spacing under HMR but not under the no-HMR rolldown
+            //     bundle, even though both bundles serialize the identical
+            //     declaration). Pre-parsing once at build time and shipping the
+            //     AST to BOTH paths keeps cold-boot rendering identical between
+            //     the two modes. Live HMR edits still arrive as raw text via the
+            //     dev-server WebSocket, so `installHttpCoreCssSupport` keeps the
+            //     raw-text fallback for that case.
             if (id === APP_CSS_RESOLVED) {
-                const appCssPath = path.resolve(projectRoot, getProjectAppRelativePath('app.css'));
-                const code = fs.readFileSync(appCssPath, 'utf-8');
+                // Same resolver as the entry generator (app.css → styles.css fallback)
+                // so both always pick the same file. Only reached when a global
+                // stylesheet exists, but guard defensively against a mid-session delete.
+                const appCssPath = resolveProjectGlobalCssPath(projectRoot);
+                if (!appCssPath) {
+                    return { code: 'export default "";', moduleType: 'js' };
+                }
+                const rawCode = fs.readFileSync(appCssPath, 'utf-8');
+                // Rewrite platform-suffixed @imports (foo.css -> foo.ios.css) BEFORE
+                // preprocessCSS: this raw read bypasses the plugin transform chain, so
+                // the ns-css-platform plugin never sees this content, and Vite's
+                // internal postcss-import (which runs ahead of any user postcss
+                // plugins) can't resolve the generic specifier on its own.
+                const code = rewritePlatformCssImports(rawCode, path.dirname(appCssPath), opts.platform) ?? rawCode;
                 const result = await preprocessCSS(code, appCssPath, resolvedConfig);
+                const ast = parseCssToAst(result.code, { silent: true });
+                // `css` emits `position` metadata on every AST node. NS doesn't
+                // use it, and stripping it ~halves the inlined JSON size — same
+                // thing webpack's css2json-loader does.
+                const astJson = JSON.stringify(ast, (key, value) => (key === 'position' ? undefined : value));
+                const lines = [];
+                if (opts.hmrActive) {
+                    // Stash AST on globalThis BEFORE the entry seeds
+                    // `__NS_HMR_APP_CSS__` from this module's default export, so
+                    // `installHttpCoreCssSupport` can prefer the AST and match
+                    // the no-HMR application path exactly.
+                    lines.push(`try { (globalThis).__NS_HMR_APP_CSS_AST__ = ${astJson}; } catch {}`);
+                }
+                else {
+                    lines.push(`import { addTaggedAdditionalCSS } from ${JSON.stringify(coreSpec('ui/styling/style-scope'))};`, `addTaggedAdditionalCSS(${astJson}, 'app.css');`);
+                }
+                lines.push(`export default ${JSON.stringify(result.code)};`);
                 return {
-                    code: `export default ${JSON.stringify(result.code)};`,
+                    code: lines.join('\n'),
+                    moduleType: 'js',
+                };
+            }
+            // Emit the bundle-CSS apply with a sentinel that generateBundle fills in
+            // (the CSS isn't known until then). No-op under HMR (dev server applies
+            // it at runtime, and the entry skips this import in HMR mode).
+            if (id === BUNDLE_CSS_RESOLVED) {
+                if (opts.hmrActive) {
+                    return { code: 'export default "";', moduleType: 'js' };
+                }
+                return {
+                    code: [`import { addTaggedAdditionalCSS } from ${JSON.stringify(coreSpec('ui/styling/style-scope'))};`, `try { addTaggedAdditionalCSS(${JSON.stringify(BUNDLE_CSS_AST_SENTINEL)}, 'ns-bundle-css'); } catch (e) {}`, `export default "";`].join('\n'),
                     moduleType: 'js',
                 };
             }
@@ -129,10 +388,41 @@ export function mainEntryPlugin(opts) {
                     moduleType: 'js',
                 };
             }
+            // Virtual module that seeds compile-time defines on globalThis.
+            // Imported FIRST in the entry so it evaluates as a leaf before
+            // any other module — including the `bundle-entry-points` chain
+            // that transitively reaches the user's app code. See the
+            // DEFINES_SEED_VIRTUAL_ID comment at the top of this file.
+            if (id === DEFINES_SEED_RESOLVED) {
+                // The FULL seed map: canonical platform defines (shared with Vite's
+                // `define` config and the dev server's per-module shims) PLUS every
+                // `__NS_*__` value raw-served client files consume (runtime flavor,
+                // app-root paths, overlay/kickstart knobs). Vite's define substitution
+                // never reaches those raw-served files, so anything they read must be
+                // planted on globalThis here — see getRuntimeSeedValues for the rule.
+                const seedLines = buildGlobalSeedStatements(getRuntimeSeedValues({ platform: opts.platform, isDevMode: opts.isDevMode, verbose: opts.verbose, flavor: effectiveFlavor, isCI: !!process.env.CI }));
+                return {
+                    code: seedLines.join('\n') + '\n',
+                    moduleType: 'js',
+                };
+            }
             if (id !== RESOLVED)
                 return null;
+            let imports = '';
+            // Under HMR: import the defines-seed virtual module FIRST so its
+            // body — which sets `globalThis.__APPLE__`, `__IOS__`, `__DEV__`,
+            // etc. — evaluates as a leaf in the dependency graph BEFORE any
+            // other module instantiates. Per-module shims injected by
+            // `processCodeForDevice` read these from globalThis and snapshot
+            // them at instantiation time, so they MUST be set first.
+            //
+            // Under non-HMR: Vite's `define` config handles substitution
+            // statically at build time — no runtime seeding needed.
+            if (opts.hmrActive) {
+                imports += `import '${DEFINES_SEED_VIRTUAL_ID}';\n`;
+            }
             // consistent verbose flag to easily reference below
-            let imports = "const __nsVerboseLog = typeof __NS_ENV_VERBOSE__ !== 'undefined' && __NS_ENV_VERBOSE__;\n";
+            imports += "const __nsVerboseLog = typeof __NS_ENV_VERBOSE__ !== 'undefined' && __NS_ENV_VERBOSE__;\n";
             // Ensure any CommonJS-style tooling requires (e.g. from Babel or
             // other build-time libraries that may be accidentally bundled) do
             // not attempt to resolve Node built-ins like 'fs' or 'path' on
@@ -158,8 +448,7 @@ export function mainEntryPlugin(opts) {
             //     which routes `@nativescript/core*` through the HTTP bridge
             //     or, for already-HTTP-loaded modules, through the
             //     `globalThis.__NS_CORE_MODULES__` registry populated by the
-            //     `/ns/core` bridge preamble (see Invariant C in
-            //     HMR_CORE_REALM_DETERMINISTIC_PLAN.md).
+            //     `/ns/core` bridge preamble.
             imports += "try { if (typeof globalThis !== 'undefined') {\n";
             imports += "  var __nsOrigRequire = typeof globalThis.require === 'function' ? globalThis.require : null;\n";
             imports += '  var __nsNodeBuiltins = { fs: 1, path: 1, os: 1, url: 1, crypto: 1, util: 1, stream: 1, events: 1, buffer: 1, http: 1, https: 1, net: 1, tls: 1, dns: 1, child_process: 1, module: 1, zlib: 1, querystring: 1, assert: 1, constants: 1, vm: 1 };\n';
@@ -256,23 +545,13 @@ export function mainEntryPlugin(opts) {
                 imports += `console.info('[ns-entry] begin', { platform: ${JSON.stringify(opts.platform)}, dev: ${JSON.stringify(opts.isDevMode)}, hmr: ${JSON.stringify(opts.hmrActive)}, verbose: ${JSON.stringify(opts.verbose)}, mainEntry: ${JSON.stringify(mainEntry)}, mainRel: ${JSON.stringify(mainEntryRelPosix)}, time: new Date().toISOString() });\n`;
             }
             if (opts.hmrActive) {
-                // Seed ALL compile-time defines on globalThis so that every execution
-                // context — the primary bundle, HTTP ESM modules, and cross-realm
-                // calls — can reliably access them. The per-module injection in
-                // processCodeForDevice() reads from globalThis as the source of truth;
-                // these seeds ensure the values are always available.
-                imports += `globalThis.__DEV__ = ${opts.isDevMode ? 'true' : 'false'};\n`;
-                imports += `globalThis.__ANDROID__ = ${opts.platform === 'android' ? 'true' : 'false'};\n`;
-                imports += `globalThis.__IOS__ = ${opts.platform === 'ios' ? 'true' : 'false'};\n`;
-                imports += `globalThis.__VISIONOS__ = ${opts.platform === 'visionos' ? 'true' : 'false'};\n`;
-                imports += `globalThis.__APPLE__ = ${opts.platform === 'ios' || opts.platform === 'visionos' ? 'true' : 'false'};\n`;
-                imports += `globalThis.__COMMONJS__ = false;\n`;
-                imports += `globalThis.__NS_WEBPACK__ = false;\n`;
-                imports += `globalThis.__NS_ENV_VERBOSE__ = ${opts.verbose ? 'true' : 'false'};\n`;
-                imports += `globalThis.__UI_USE_XML_PARSER__ = true;\n`;
-                imports += `globalThis.__UI_USE_EXTERNAL_RENDERER__ = false;\n`;
-                imports += `globalThis.__CSS_PARSER__ = 'css-tree';\n`;
-                imports += `globalThis.__TEST__ = false;\n`;
+                // NOTE: globalThis defines (`__APPLE__`, `__IOS__`, `__DEV__`,
+                // etc.) are seeded by the `virtual:ns-defines-seed` import at
+                // the very top of this entry — see the import on line ~192.
+                // They MUST run as a leaf module ahead of any other graph
+                // node, so we can't seed them inline here (ESM imports hoist
+                // past inline body code, so any module reachable through
+                // `bundle-entry-points` would otherwise see undefined).
                 imports += "import { installModuleProvenanceRecorder } from '@nativescript/vite/hmr/shared/runtime/module-provenance.js';\n";
                 imports += 'installModuleProvenanceRecorder(__nsVerboseLog);\n';
             }
@@ -298,7 +577,7 @@ export function mainEntryPlugin(opts) {
             // With experimentalDecorators:true, TypeScript emits __decorate patterns.
             // On watch-mode rebuilds the Angular compiler may not re-emit ɵfac for
             // cached files, so the JIT compiler must be available as a fallback.
-            if (opts.isDevMode && flavor === 'angular') {
+            if (opts.isDevMode && effectiveFlavor === 'angular') {
                 imports += "import { publishFacade as __nsPublishAngularCompilerFacade } from '@angular/compiler';\n";
                 imports += '__nsPublishAngularCompilerFacade(globalThis);\n';
                 if (opts.verbose) {
@@ -329,7 +608,18 @@ export function mainEntryPlugin(opts) {
             if (opts.verbose) {
                 imports += `console.info('[ns-entry] bundle-entry-points loaded');\n`;
             }
-            if (flavor === 'typescript') {
+            // XML-driven flavors: register @nativescript/core/ui + element nicknames
+            // with the bundler module registry, import the bundler context, and apply
+            // View prototype guards. Provided as a virtual module by
+            // createUiRegistrationPlugin (wired in typescript.ts / javascript.ts) —
+            // imported HERE, right after bundle-entry-points, instead of being
+            // string-injected into this generated entry by a marker-matching
+            // transform (the marker drifted once and silently broke all XML builds
+            // with "Module 'Frame' not found").
+            if (effectiveFlavor === 'typescript' || effectiveFlavor === 'javascript') {
+                imports += "import 'virtual:ns-ui-registration';\n";
+            }
+            if (effectiveFlavor === 'typescript') {
                 // Statically import bundler context synchronously before app code
                 imports += "import 'virtual:ns-bundler-context';\n";
                 if (opts.hmrActive) {
@@ -387,24 +677,41 @@ export function mainEntryPlugin(opts) {
                 }
             }
             // ---- Global CSS injection (always-needed if file exists) ----
-            const appCssPath = path.resolve(projectRoot, getProjectAppRelativePath('app.css'));
-            const hasAppCss = fs.existsSync(appCssPath);
+            // Prefer `app.css`, fall back to `styles.css` (common in web projects).
+            const appCssPath = resolveProjectGlobalCssPath(projectRoot);
+            const hasAppCss = !!appCssPath;
             // Import Application statically if needed for CSS or Android activity defer
             if (hasAppCss || needsAndroidActivityDefer) {
                 if (hasAppCss) {
-                    imports += `// Import and apply global CSS before app bootstrap\n`;
+                    // The virtual module's body either:
+                    //   - non-HMR: calls `addTaggedAdditionalCSS(ast, 'app.css')`
+                    //     as an import-time side-effect, landing CSS in NS's
+                    //     selector tables before any view is created.
+                    //   - HMR: stashes the rework AST on
+                    //     `globalThis.__NS_HMR_APP_CSS_AST__` so
+                    //     `installHttpCoreCssSupport` can apply it via the SAME
+                    //     AST path in the HTTP-core realm. The default export
+                    //     is the raw CSS string, also seeded onto
+                    //     `globalThis.__NS_HMR_APP_CSS__` here as a
+                    //     raw-text fallback (used for live HMR edits via the
+                    //     dev-server WebSocket).
+                    imports += `// Apply global CSS before app bootstrap (AST under non-HMR; AST stashed for HMR cold boot)\n`;
                     imports += `import appCssContent from '${APP_CSS_VIRTUAL_ID}';\n`;
                     if (opts.hmrActive) {
                         imports += `try { globalThis.__NS_HMR_APP_CSS__ = appCssContent; } catch {}\n`;
                     }
-                }
-                imports += `import { Application } from ${JSON.stringify(coreSpec())};\n`;
-                if (hasAppCss) {
-                    imports += `if (appCssContent) { try { Application.addCss(appCssContent); } catch (error) { console.error('Error applying CSS:', error); } }\n`;
                     if (opts.verbose) {
-                        imports += `console.info('[ns-entry] app.css applied');\n`;
+                        imports += `console.info('[ns-entry] app.css applied as AST');\n`;
                     }
                 }
+                if (needsAndroidActivityDefer) {
+                    imports += `import { Application } from ${JSON.stringify(coreSpec())};\n`;
+                }
+            }
+            // SFC/imported CSS (non-HMR build). After app.css so component rules win
+            // specificity ties. generateBundle fills it in; HMR applies at runtime.
+            if (!opts.hmrActive) {
+                imports += `import '${BUNDLE_CSS_VIRTUAL_ID}';\n`;
             }
             // ---- Deferred Android activity import (non-HMR only) ----
             // Uses the statically imported Application to avoid mixing dynamic and static imports
@@ -432,15 +739,23 @@ export function mainEntryPlugin(opts) {
                 if (opts.verbose) {
                     imports += `console.info('[ns-entry] including deterministic dev session bootstrap', { platform: ${JSON.stringify(opts.platform)}, mainRel: ${JSON.stringify(mainEntryRelPosix)} });\n`;
                 }
-                const configuredHost = typeof resolvedConfig.server.host === 'string' && resolvedConfig.server.host ? resolvedConfig.server.host : 'localhost';
-                const bootHost = (process.env.NS_HMR_HOST || '') || configuredHost;
-                const bootProtocol = resolvedConfig.server.https || opts.useHttps ? 'https' : 'http';
-                const bootPort = Number(resolvedConfig.server.port || 5173);
-                const sessionUrl = bootProtocol + '://' + bootHost + ':' + String(bootPort) + '/__ns_dev__/session';
+                // Same device-reachable origin as `getBootOrigin()` so the
+                // session-descriptor URL and every `/ns/core/*` URL baked
+                // into bundle.mjs come from one canonical source. Without
+                // this, Android's `bundle.mjs` would hit `0.0.0.0:5173` for
+                // both endpoints (server.host's wildcard bind) and fail at
+                // boot before any user code runs.
+                const { origin: bootOrigin } = resolveDeviceReachableOrigin({
+                    host: resolvedConfig.server.host,
+                    platform: opts.platform,
+                    protocol: resolvedConfig.server.https || opts.useHttps ? 'https' : 'http',
+                    port: Number(resolvedConfig.server.port || 5173),
+                });
+                const sessionUrl = bootOrigin + '/__ns_dev__/session';
                 imports += "import { startBrowserRuntimeSession } from '@nativescript/vite/hmr/shared/runtime/session-bootstrap.js';\n";
                 imports += `startBrowserRuntimeSession(${JSON.stringify(sessionUrl)}, __nsVerboseLog).catch((error) => {\n`;
                 imports += `  try { globalThis.__NS_ENTRY_ERROR__ = { phase: 'deterministic-dev-session', message: String(error && (error.message || error)), stack: error && error.stack ? String(error.stack) : '' }; } catch {}\n`;
-                imports += `  try { console.error('[ns-entry] deterministic dev session bootstrap failed', error && error.stack ? error.stack : error); } catch {}\n`;
+                imports += `  console.error('[ns-entry] deterministic dev session bootstrap failed', error && error.stack ? error.stack : error);\n`;
                 imports += `});\n`;
                 if (opts.verbose) {
                     imports += `console.info('[ns-entry] deterministic dev session bootstrap appended');\n`;