feat: vite improvements

Author: NathanWalker

packages/vite/README.md

@@ -12,6 +12,43 @@ Vite bundler integration for NativeScript apps. Provides a minimal setup for fas
 npm i @nativescript/vite -D
 ```
 
+## Quick start (`init`)
+
+To bootstrap an existing NativeScript app for Vite, run from your app root:
+
+```bash
+npx nativescript-vite init
+```
+
+This will:
+
+- Generate a `vite.config.ts` using the detected project flavor (Angular, Vue, React, Solid, TypeScript, or JavaScript) and the corresponding helper from `@nativescript/vite`.
+- Add (or update) the following npm scripts in your app `package.json`:
+	- `dev:ios`
+	- `dev:android`
+	- `dev:server:ios`
+	- `dev:server:android`
+	- `ios`
+	- `android`
+- Add the devDependencies `concurrently` and `wait-on`.
+- Add the dependency `@valor/nativescript-websockets`.
+- Append `.ns-vite-build` to `.gitignore` if it is not already present.
+
+After running `init`, you now have two ways to work with Vite:
+
+1. HMR workflow
+
+```bash
+npm run dev:ios
+```
+
+2. Standard dev workflow (non-HMR)
+
+```bash
+ns debug ios --no-hmr
+ns debug android --no-hmr
+```
+
 ## Usage
 
 1) Create `vite.config.ts`:

packages/vite/bin/cli.cjs

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+// Small CommonJS launcher that forwards to the ESM library's init helper.
+// This allows `npx @nativescript/vite init` to work reliably across npm versions.
+
+(async () => {
+  try {
+    const mod = await import('../dist/index.cjs').catch(async () => import('../index.js'));
+    if (process.argv[2] === 'init') {
+      if (typeof mod.runInit === 'function') {
+        await mod.runInit();
+      } else if (mod && mod.helpers && typeof mod.helpers.runInit === 'function') {
+        await mod.helpers.runInit();
+      } else if (mod && mod.default && typeof mod.default.runInit === 'function') {
+        await mod.default.runInit();
+      } else {
+        const initMod = await import('../helpers/init.js');
+        if (typeof initMod.runInit === 'function') {
+          await initMod.runInit();
+        } else {
+          console.error('[@nativescript/vite] `runInit` not found in helpers.');
+          process.exitCode = 1;
+        }
+      }
+    } else {
+      console.log('Usage: npx @nativescript/vite init');
+    }
+  } catch (err) {
+    console.error('[@nativescript/vite] CLI failed:', err && err.message ? err.message : err);
+    process.exitCode = 1;
+  }
+})();

packages/vite/configuration/angular.ts

@@ -2,8 +2,11 @@ import { mergeConfig, type UserConfig, type Plugin } from 'vite';
 import path from 'path';
 import { createRequire } from 'node:module';
 import angular from '@analogjs/vite-plugin-angular';
-import { angularLinkerVitePlugin, angularLinkerVitePluginPost } from '../helpers/angular-linker.js';
+import { angularLinkerVitePlugin, angularLinkerVitePluginPost } from '../helpers/angular/angular-linker.js';
+import { ensureSharedAngularLinker } from '../helpers/angular/shared-linker.js';
+import { containsRealNgDeclare } from '../helpers/angular/util.js';
 import { baseConfig } from './base.js';
+import { getCliFlags } from '../helpers/cli-flags.js';
 
 // Rollup-level linker to guarantee Angular libraries are linked when included in the bundle graph.
 function angularRollupLinker(projectRoot?: string): Plugin {
@@ -101,6 +104,10 @@ function angularRollupLinker(projectRoot?: string): Plugin {
 	};
 }
 
+const cliFlags = getCliFlags();
+const isDevEnv = process.env.NODE_ENV !== 'production';
+const hmrActive = isDevEnv && !!cliFlags.hmr;
+
 const plugins = [
 	// Allow external html template changes to trigger hot reload: Make .ts files depend on their .html templates
 	{
@@ -151,6 +158,17 @@ const plugins = [
 				},
 			} as any;
 		},
+		configResolved(resolved) {
+			const deps = (resolved.optimizeDeps ||= {} as any);
+			deps.noDiscovery = true;
+			deps.entries = [];
+			deps.include = [];
+			const exclude = new Set<string>(Array.isArray(deps.exclude) ? deps.exclude : []);
+			['@nativescript/core', 'rxjs', '@valor/nativescript-websockets', 'set-value', 'react', 'react-reconciler', 'react-nativescript'].forEach((x) => exclude.add(x));
+			deps.exclude = Array.from(exclude);
+			const esbuildOptions = (deps.esbuildOptions ||= {});
+			esbuildOptions.plugins = [];
+		},
 	},
 ];
 
@@ -166,86 +184,12 @@ export const angularConfig = ({ mode }): UserConfig => {
 		apply: 'build' as const,
 		enforce: 'post' as const,
 		async generateBundle(_options, bundle) {
-			function containsRealNgDeclare(src: string): boolean {
-				// scan while skipping strings and comments; detect ɵɵngDeclare outside them
-				let inStr = false,
-					strCh = '',
-					esc = false,
-					inBlk = false,
-					inLine = false;
-				for (let i = 0; i < src.length; i++) {
-					const ch = src[i];
-					const next = src[i + 1];
-					if (inLine) {
-						if (ch === '\n') inLine = false;
-						continue;
-					}
-					if (inBlk) {
-						if (ch === '*' && next === '/') {
-							inBlk = false;
-							i++;
-						}
-						continue;
-					}
-					if (inStr) {
-						if (esc) {
-							esc = false;
-							continue;
-						}
-						if (ch === '\\') {
-							esc = true;
-							continue;
-						}
-						if (ch === strCh) {
-							inStr = false;
-							strCh = '';
-						}
-						continue;
-					}
-					if (ch === '/' && next === '/') {
-						inLine = true;
-						i++;
-						continue;
-					}
-					if (ch === '/' && next === '*') {
-						inBlk = true;
-						i++;
-						continue;
-					}
-					if (ch === '"' || ch === "'" || ch === '`') {
-						inStr = true;
-						strCh = ch;
-						continue;
-					}
-					// fast path for ɵ + call-like ngDeclare pattern (e.g., ɵɵngDeclareDirective(...))
-					if (ch === 'ɵ' && next === 'ɵ' && src.startsWith('ɵɵngDeclare', i)) {
-						let j = i + 'ɵɵngDeclare'.length;
-						// consume identifier tail (e.g., ClassMetadata, Directive, Component, Factory, Injectable, etc.)
-						while (j < src.length) {
-							const cj = src.charCodeAt(j);
-							// [A-Za-z0-9_$]
-							if ((cj >= 65 && cj <= 90) || (cj >= 97 && cj <= 122) || (cj >= 48 && cj <= 57) || cj === 95 || cj === 36) j++;
-							else break;
-						}
-						// skip whitespace
-						while (j < src.length && /\s/.test(src[j])) j++;
-						if (src[j] === '(') return true; // it's a call site
-					}
-				}
-				return false;
-			}
-			// Lazy load linker deps to avoid hard coupling
-			let babel: any = null;
-			let createLinker: any = null;
-			try {
-				babel = await import('@babel/core');
-				const linkerMod: any = await import('@angular/compiler-cli/linker/babel');
-				createLinker = linkerMod.createLinkerPlugin || linkerMod.createEs2015LinkerPlugin;
-			} catch {
-				return; // no linker available
+			function isNsAngularPolyfillsChunk(chunk: any): boolean {
+				if (!chunk || !(chunk as any).modules) return false;
+				return Object.keys((chunk as any).modules).some((m) => m.includes('node_modules/@nativescript/angular/fesm2022/nativescript-angular-polyfills.mjs'));
 			}
-			if (!babel || !createLinker) return;
-			const plugin = createLinker({ sourceMapping: false });
+			const { babel, linkerPlugin } = await ensureSharedAngularLinker(process.cwd());
+			if (!babel || !linkerPlugin) return;
 			const strict = process.env.NS_STRICT_NG_LINK === '1' || process.env.NS_STRICT_NG_LINK === 'true';
 			const enforceStrict = process.env.NS_STRICT_NG_LINK_ENFORCE === '1' || process.env.NS_STRICT_NG_LINK_ENFORCE === 'true';
 			const debug = process.env.VITE_DEBUG_LOGS === '1' || process.env.VITE_DEBUG_LOGS === 'true';
@@ -255,36 +199,34 @@ export const angularConfig = ({ mode }): UserConfig => {
 				if (chunk && (chunk as any).type === 'chunk') {
 					const code = (chunk as any).code as string;
 					if (!code) continue;
+					const isNsPolyfills = isNsAngularPolyfillsChunk(chunk);
 					try {
 						const res = await (babel as any).transformAsync(code, {
 							filename: fileName,
 							configFile: false,
 							babelrc: false,
 							sourceMaps: false,
 							compact: false,
-							plugins: [plugin],
+							plugins: [linkerPlugin],
 						});
-						if (res?.code && res.code !== code) {
-							(chunk as any).code = res.code;
+						const finalCode = res?.code && res.code !== code ? res.code : code;
+						if (finalCode !== code) {
+							(chunk as any).code = finalCode;
 							if (debug) {
 								try {
-									console.log('[ns-angular-linker][post] linked', fileName);
+									console.log('[ns-angular-linker][post] linked', fileName, isNsPolyfills ? '(polyfills)' : '');
 								} catch {}
 							}
-						} else if (strict) {
-							// Only flag if we still detect actual Ivy partial declarations (ɵɵngDeclare*) outside strings/comments
-							if (containsRealNgDeclare(code)) {
-								unlinked.push(fileName);
-							}
+						}
+						if (strict && !isNsPolyfills && containsRealNgDeclare(finalCode)) {
+							unlinked.push(fileName);
 						}
 					} catch {
-						// best effort; keep original code
 						if (strict) unlinked.push(fileName);
 					}
 				}
 			}
 			if (strict && unlinked.length) {
-				// Provide extra diagnostics: list a few module ids from bundle to locate offending sources
 				const details: string[] = [];
 				for (const fname of unlinked) {
 					const chunk: any = (bundle as any)[fname];
@@ -293,7 +235,8 @@ export const angularConfig = ({ mode }): UserConfig => {
 								.filter((m) => /node_modules\/(?:@angular|@nativescript\/angular)\//.test(m))
 								.slice(0, 8)
 						: [];
-					// Add a small code excerpt around the first occurrence for easier inspection
+					const isOnlyPolyfills = modIds.length > 0 && modIds.every((m) => m.includes('node_modules/@nativescript/angular/fesm2022/nativescript-angular-polyfills.mjs'));
+					if (isOnlyPolyfills) continue;
 					let snippet = '';
 					try {
 						const code = (chunk as any).code as string;
@@ -306,6 +249,7 @@ export const angularConfig = ({ mode }): UserConfig => {
 					} catch {}
 					details.push(` - ${fname}${modIds.length ? `\n    from: ${modIds.join('\n           ')}` : ''}${snippet}`);
 				}
+				if (!details.length) return;
 				const message = `Angular linker strict mode: found unlinked partial declarations in emitted chunks: \n` + details.join('\n') + `\nSet NS_STRICT_NG_LINK=0 to disable this check. Set NS_STRICT_NG_LINK_ENFORCE=1 to make this a hard error.`;
 				if (enforceStrict) {
 					throw new Error(message);
@@ -326,93 +270,40 @@ export const angularConfig = ({ mode }): UserConfig => {
 		async renderChunk(code: string, chunk: any) {
 			try {
 				if (!code) return null;
-				// quick guard: look for real ɵɵngDeclare call outside strings/comments
-				const hasReal = (() => {
-					let inStr = false,
-						strCh = '',
-						esc = false,
-						inBlk = false,
-						inLine = false;
-					for (let i = 0; i < code.length; i++) {
-						const ch = code[i],
-							n = code[i + 1];
-						if (inLine) {
-							if (ch === '\n') inLine = false;
-							continue;
-						}
-						if (inBlk) {
-							if (ch === '*' && n === '/') {
-								inBlk = false;
-								i++;
-							}
-							continue;
-						}
-						if (inStr) {
-							if (esc) {
-								esc = false;
-								continue;
-							}
-							if (ch === '\\') {
-								esc = true;
-								continue;
-							}
-							if (ch === strCh) {
-								inStr = false;
-								strCh = '';
-							}
-							continue;
-						}
-						if (ch === '/' && n === '/') {
-							inLine = true;
-							i++;
-							continue;
-						}
-						if (ch === '/' && n === '*') {
-							inBlk = true;
-							i++;
-							continue;
-						}
-						if (ch === '"' || ch === "'" || ch === '`') {
-							inStr = true;
-							strCh = ch;
-							continue;
-						}
-						if (ch === 'ɵ' && n === 'ɵ' && code.startsWith('ɵɵngDeclare', i)) {
-							let j = i + 'ɵɵngDeclare'.length;
-							while (j < code.length) {
-								const cj = code.charCodeAt(j);
-								if ((cj >= 65 && cj <= 90) || (cj >= 97 && cj <= 122) || (cj >= 48 && cj <= 57) || cj === 95 || cj === 36) j++;
-								else break;
-							}
-							while (j < code.length && /\s/.test(code[j])) j++;
-							if (code[j] === '(') return true;
-						}
+				if (!containsRealNgDeclare(code)) return null;
+				const { babel, linkerPlugin } = await ensureSharedAngularLinker(process.cwd());
+				if (!babel || !linkerPlugin) return null;
+				const filename = chunk.fileName || chunk.name || 'chunk.mjs';
+				const debug = process.env.VITE_DEBUG_LOGS === '1' || process.env.VITE_DEBUG_LOGS === 'true';
+				const runLink = async (input: string) => {
+					const result = await (babel as any).transformAsync(input, {
+						filename,
+						configFile: false,
+						babelrc: false,
+						sourceMaps: false,
+						compact: false,
+						plugins: [linkerPlugin],
+					});
+					return result?.code ?? input;
+				};
+				let transformed = await runLink(code);
+				if (containsRealNgDeclare(transformed)) {
+					transformed = await runLink(transformed);
+				}
+				if (transformed !== code) {
+					if (debug) {
+						try {
+							console.log('[ns-angular-linker][render] linked', filename);
+						} catch {}
 					}
-					return false;
-				})();
-				if (!hasReal) return null;
-				const babel: any = await import('@babel/core');
-				const linkerMod: any = await import('@angular/compiler-cli/linker/babel');
-				const createLinker = linkerMod.createLinkerPlugin || linkerMod.createEs2015LinkerPlugin;
-				if (!babel || !createLinker) return null;
-				const plugin = createLinker({ sourceMapping: false });
-				const result = await (babel as any).transformAsync(code, {
-					filename: chunk.fileName || chunk.name || 'chunk.mjs',
-					configFile: false,
-					babelrc: false,
-					sourceMaps: false,
-					compact: false,
-					plugins: [plugin],
-				});
-				if (result?.code && result.code !== code) {
-					return { code: result.code, map: null };
+					return { code: transformed, map: null };
 				}
 			} catch {}
 			return null;
 		},
 	};
 
-	const enableRollupLinker = process.env.NS_ENABLE_ROLLUP_LINKER === '1' || process.env.NS_ENABLE_ROLLUP_LINKER === 'true';
+	const enableRollupLinker = process.env.NS_ENABLE_ROLLUP_LINKER === '1' || process.env.NS_ENABLE_ROLLUP_LINKER === 'true' || hmrActive;
 
 	return mergeConfig(baseConfig({ mode }), {
 		plugins: [...plugins, ...(enableRollupLinker ? [angularRollupLinker(process.cwd())] : []), renderChunkLinker, postLinker],