@ng-native/nx 0.17.1 → 0.18.1

package/application/index.cjs

@@ -29,7 +29,7 @@ const {
   addDependenciesToPackageJson,
 } = require('@nx/devkit');
 const native = require('../native-app.cjs');
-const { init, workspaceNxVersion } = require('../init/index.cjs');
+const { init } = require('../init/index.cjs');
 const { usesWorkspaces, includeInWorkspaces } = require('./workspaces.cjs');
 const { asSaved } = require('../save-exact.cjs');
 const { registerSyncGenerator } = require('../sync/index.cjs');
@@ -42,9 +42,14 @@ function names(tree, options) {
   // A workspace package is named for the workspace's scope, as Nx names its own.
   const projectName = workspaces && scope ? `${scope}/${name}` : name;
   const bundleIdentifier = options.bundleIdentifier ?? native.bundleIdentifier(name, scope);
-  return { directory, name, projectName, workspaces, bundleIdentifier };
+  const lint = options.linter === 'eslint';
+  return { directory, name, projectName, workspaces, bundleIdentifier, lint };
 }
 
+/** The app's dev dependencies: with `--linter=eslint`, ESLint and the plugin as well. */
+const devDependencies = (lint) =>
+  lint ? { ...native.devDependencies, ...native.lintDevDependencies } : native.devDependencies;
+
 /**
  * Whether the workspace's `tsconfig.base.json` is where its libraries' path aliases live, or will.
  * With package-manager workspaces, only when it has a `paths` list, as the `angular-monorepo`
@@ -125,7 +130,7 @@ function metroPort(tree) {
   return port;
 }
 
-function targets(directory, port, oneCopy) {
+function targets(directory, port, oneCopy, lint) {
   const run = (command) => ({ executor: 'nx:run-commands', options: { cwd: directory, command } });
   const own = port === DEFAULT_PORT ? '' : ` --port ${port}`;
   // `expo run:ios` and `expo run:android` build the port into the app, so a later app's has to be
@@ -143,6 +148,7 @@ function targets(directory, port, oneCopy) {
       outputs: ['{projectRoot}/.angular-native'],
     },
     test: { ...run('vitest run'), cache: true, inputs: ['default', '^production'] },
+    ...(lint && { lint: { ...run('eslint .'), cache: true, inputs: ['default', '^production'] } }),
     start: { ...run(`expo start${own}`), continuous: true },
     serve: { ...run(`expo start${own}`), continuous: true },
     ...runs,
@@ -150,13 +156,14 @@ function targets(directory, port, oneCopy) {
 }
 
 /** The Commands section of the app's `AGENTS.md`, as this workspace runs them. */
-function commands(name) {
+function commands(name, lint) {
   const rows = [
     [`nx start ${name}`, 'Metro; press i or a for a simulator, or scan the QR code with Expo Go'],
     [`nx run ${name}:run-ios`, 'the iOS simulator'],
     [`nx run ${name}:run-android`, 'the Android emulator'],
     [`nx test ${name}`, 'Vitest, in Node against a fake native layer: no simulator needed'],
     [`nx typecheck ${name}`, 'TypeScript, without emitting'],
+    ...(lint ? [[`nx lint ${name}`, 'ESLint: what compiles but does nothing on a device']] : []),
   ];
   const width = Math.max(...rows.map(([command]) => command.length)) + 2;
   return [
@@ -165,7 +172,10 @@ function commands(name) {
     '```',
     '',
     '`src/main.ts` mounts the root component, `src/app/app.ts`. ' +
-      `Run \`nx test ${name}\` and \`nx typecheck ${name}\` after a change; both are fast.`,
+      (lint
+        ? `Run \`nx test ${name}\`, \`nx typecheck ${name}\` and \`nx lint ${name}\` after a change; ` +
+          'all three are fast.'
+        : `Run \`nx test ${name}\` and \`nx typecheck ${name}\` after a change; both are fast.`),
   ].join('\n');
 }
 
@@ -186,14 +196,15 @@ function listed(manifest) {
   return Object.keys({ ...manifest.dependencies, ...manifest.devDependencies });
 }
 
-async function writeFiles(tree, { directory, projectName, workspaces, bundleIdentifier }) {
+async function writeFiles(tree, { directory, projectName, workspaces, bundleIdentifier, lint }) {
   const file = (name, content) => tree.write(joinPathFragments(directory, name), content);
   for (const name of native.SOURCE_FILES) file(name, native.sourceFile(name));
   file('app.json', native.appJson(projectName, bundleIdentifier));
-  file('AGENTS.md', native.agentsFile(commands(projectName)));
+  file('AGENTS.md', native.agentsFile(commands(projectName, lint)));
   file('CLAUDE.md', '@AGENTS.md\n');
   file('metro.config.js', native.METRO_CONFIG);
   file('.gitignore', native.GITIGNORE);
+  if (lint) file('eslint.config.mjs', native.ESLINT_CONFIG);
 
   const base = hasPathAliases(tree, workspaces);
   const workspaceBase = base ? `${offsetFromRoot(directory)}tsconfig.base.json` : undefined;
@@ -210,7 +221,7 @@ async function writeFiles(tree, { directory, projectName, workspaces, bundleIden
     const root = readJson(tree, 'package.json');
     Object.assign(manifest, {
       dependencies: await appDependencies(tree, root, native.dependencies),
-      devDependencies: await appDependencies(tree, root, native.devDependencies),
+      devDependencies: await appDependencies(tree, root, devDependencies(lint)),
     });
   } else {
     manifest.dependencies = native.prebuildPins(root);
@@ -228,11 +239,11 @@ function ignoreExpo(tree) {
 
 /**
  * @param {import('@nx/devkit').Tree} tree
- * @param {{ directory: string, name?: string, bundleIdentifier?: string, tags?: string, skipInstall?: boolean, skipFormat?: boolean }} options
+ * @param {{ directory: string, name?: string, bundleIdentifier?: string, tags?: string, linter?: 'eslint' | 'none', skipInstall?: boolean, skipFormat?: boolean }} options
  */
 async function application(tree, options) {
   const resolved = names(tree, options);
-  const { directory, projectName, workspaces } = resolved;
+  const { directory, projectName, workspaces, lint } = resolved;
   const problem = native.bundleIdentifierProblem(resolved.bundleIdentifier);
   if (problem) throw new Error(problem);
   if (tree.exists(joinPathFragments(directory, 'package.json'))) {
@@ -244,22 +255,24 @@ async function application(tree, options) {
   if (workspaces) {
     includeInWorkspaces(tree, directory);
   } else {
-    for (const problem of native.conflicts(readJson(tree, 'package.json'))) logger.warn(problem);
+    const linter = options.linter;
+    for (const problem of native.conflicts(readJson(tree, 'package.json'), { linter })) {
+      logger.warn(problem);
+    }
     const existing = listed(readJson(tree, 'package.json'));
     addDependenciesToPackageJson(
       tree,
       await asSaved(tree, native.dependencies, existing),
-      await asSaved(tree, native.devDependencies, existing),
+      await asSaved(tree, devDependencies(lint), existing),
       'package.json',
       true,
     );
   }
-  // `nxViteTsPaths()`, which the app's Vitest config uses to reach the workspace's libraries.
+  // `tsconfigPaths()`, which the app's Vitest config uses to reach the workspace's libraries.
   // Added now rather than only when present, because a library generated later is the ordinary
   // case and nothing would come back to add it then.
   if (hasPathAliases(tree, workspaces)) {
-    const vite = { '@nx/vite': workspaceNxVersion(tree) };
-    addDependenciesToPackageJson(tree, {}, vite, 'package.json', true);
+    addDependenciesToPackageJson(tree, {}, native.vitestPathsDependencies, 'package.json', true);
   }
   await writeFiles(tree, resolved);
   addProjectConfiguration(tree, projectName, {
@@ -270,7 +283,7 @@ async function application(tree, options) {
       .split(',')
       .map((tag) => tag.trim())
       .filter(Boolean),
-    targets: targets(directory, port, linksLibraries(tree, workspaces)),
+    targets: targets(directory, port, linksLibraries(tree, workspaces), lint),
   });
 
   ignoreExpo(tree);
@@ -279,7 +292,9 @@ async function application(tree, options) {
   if (!options.skipFormat) await formatFiles(tree);
   logger.info(
     `Created ${directory}. nx start ${projectName} runs Metro; nx run ${projectName}:run-ios, ` +
-      `nx test ${projectName}, nx typecheck ${projectName}, nx export ${projectName}.`,
+      `nx test ${projectName}, nx typecheck ${projectName}, ` +
+      (lint ? `nx lint ${projectName}, ` : '') +
+      `nx export ${projectName}.`,
   );
   if (options.skipInstall) return initTask;
   return runTasksInSerial(initTask, () => installPackagesTask(tree, true));

package/application/schema.json

@@ -8,7 +8,10 @@
     "directory": {
       "type": "string",
       "description": "Where the app goes, relative to the workspace root: apps/mobile.",
-      "$default": { "$source": "argv", "index": 0 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "Which directory should the app be created in?"
     },
     "name": {
@@ -24,6 +27,12 @@
       "type": "string",
       "description": "Comma-separated tags for the project."
     },
+    "linter": {
+      "type": "string",
+      "description": "eslint adds an eslint.config.mjs with @ng-native/eslint-plugin's recommended rules, its dependencies and a lint target.",
+      "enum": ["eslint", "none"],
+      "default": "none"
+    },
     "skipInstall": {
       "type": "boolean",
       "description": "Write the files without installing.",

package/files/AGENTS.md

@@ -83,3 +83,7 @@ change; both are fast.
 `getByText` or `getByTestId` (which matches `nativeID` and `testID`), and act with
 `userEvent.setup().press(...)` or `.type(...)`, all from `@ng-native/testing`. Tests run in Node
 with no simulator, so write one alongside a change.
+
+A service that depends on the platform injects `OS` and `OS_VERSION` from `@ng-native/device`
+rather than importing `Platform` from `react-native`, which a test cannot load. A test provides
+the values it wants: `{ provide: OS, useValue: 'android' }`.

package/files/src/main.ts

@@ -10,7 +10,7 @@ import { App } from './app/app.ts';
 
 registerPlatformComponents(Platform.OS);
 
-AppRegistry.registerRunnable('main', ({ rootTag }: { rootTag: number | string }) => {
+AppRegistry.registerRunnable('main', ({ rootTag }) => {
   const app = mount(Number(rootTag), App, getFabricUIManager(), {
     // Colours, as the integers the platform wants.
     processColor,
@@ -26,6 +26,8 @@ AppRegistry.registerRunnable('main', ({ rootTag }: { rootTag: number | string })
 
   // Re-resolves the conditions when the device rotates or the theme changes. A rotation dirties
   // no component and no binding, so without this nothing re-renders and `dark:` stops following
-  // the system switch.
-  watchConditions(app.engine);
+  // the system switch. It stops with the app, which Android destroys when it recreates the
+  // activity, so the app mounted in its place is the only one still watching.
+  const stopWatching = watchConditions(app.engine);
+  app.applicationRef.onDestroy(stopWatching);
 });

package/library/index.cjs

@@ -328,10 +328,9 @@ async function library(tree, options) {
   });
 
   await addImports(tree, directory, angular ? {} : typecheckDependencies);
-  // `nxViteTsPaths()`, which the Vitest config uses to reach the workspace's other libraries.
+  // `tsconfigPaths()`, which the Vitest config uses to reach the workspace's other libraries.
   if (aliases) {
-    const vite = { '@nx/vite': workspaceNxVersion(tree) };
-    addDependenciesToPackageJson(tree, {}, vite, 'package.json', true);
+    addDependenciesToPackageJson(tree, {}, native.vitestPathsDependencies, 'package.json', true);
   }
 
   if (!options.skipFormat) await formatFiles(tree);

package/migrations.json

@@ -1,7 +1,7 @@
 {
   "generators": {
     "sync-app-versions": {
-      "version": "0.17.1",
+      "version": "0.18.1",
       "description": "Move the @ng-native packages each project's own package.json lists to the new version.",
       "implementation": "./migrations/run.cjs#sync-app-versions"
     },
@@ -39,6 +39,16 @@
       "version": "0.17.1",
       "description": "Give each Angular Native project in angular.json a typecheck target, run by ngc.",
       "implementation": "./migrations/run.cjs#native-typecheck-target"
+    },
+    "stop-watching-conditions": {
+      "version": "0.17.2",
+      "description": "Keep what watchConditions returns in each app's entry point and stop it as the app is destroyed.",
+      "implementation": "./migrations/run.cjs#stop-watching-conditions"
+    },
+    "vitest-tsconfig-paths": {
+      "version": "0.18.1",
+      "description": "Resolve the workspace's path aliases in Nx Vitest configs with vite-tsconfig-paths, as nxViteTsPaths does nothing from Nx 24.",
+      "implementation": "./migrations/run.cjs#vitest-tsconfig-paths"
     }
   }
 }

package/native-app.cjs

@@ -13,8 +13,9 @@
  *   import a library at all: Metro reports `Cannot resolve @org/ui`.
  * - `tsconfig.json` also extends the workspace's `tsconfig.base.json` when there is one, which is
  *   where those aliases live, and puts back the Expo settings the workspace's base overrides.
- * - `vitest.config.mts` adds `nxViteTsPaths` when the workspace has `@nx/vite`, for the same
- *   aliases, which Vitest does not read from tsconfig either.
+ * - `vitest.config.mts` adds `vite-tsconfig-paths` when the workspace has path aliases, for the
+ *   same aliases, which Vitest does not read from tsconfig either. It is what Nx 24 writes in its
+ *   own Vite configs: `nxViteTsPaths` from `@nx/vite` is an inert stub there.
  *
  * What does not depend on Nx, the dependencies, `app.json` and bundle identifier among them, is
  * `@ng-native/migrate/native-app.cjs`, which `@ng-native/schematics` builds its apps from too.
@@ -33,10 +34,10 @@ const { dependencies, devDependencies, accepted } = shared;
  */
 const expoCompanions = {
   'react-dom': dependencies.react,
-  '@expo/cli': '^57.0.27',
+  '@expo/cli': '^58.1.14',
   '@babel/runtime': '^7.20.0',
   '@babel/core': devDependencies['@babel/core'],
-  '@expo/metro': '~56.0.2',
+  '@expo/metro': '~58.0.0',
 };
 
 /**
@@ -98,13 +99,13 @@ function tsconfig(workspaceBase, conditions = []) {
   const customConditions = ['react-native', ...conditions.filter((c) => c !== 'react-native')];
   if (!workspaceBase) {
     if (customConditions.length > 1) compilerOptions.customConditions = customConditions;
-    return { extends: 'expo/tsconfig.base', compilerOptions, angularCompilerOptions };
+    return { extends: 'expo/tsconfig.base.json', compilerOptions, angularCompilerOptions };
   }
   // The workspace's base is written for a web build or for emitting declarations, and wins over
   // Expo's where they overlap. These are Expo's, restored: without `DOM` and `ESNext` the framework
   // packages' own source, which the app compiles, fails to typecheck.
   return {
-    extends: ['expo/tsconfig.base', workspaceBase],
+    extends: ['expo/tsconfig.base.json', workspaceBase],
     compilerOptions: {
       ...compilerOptions,
       noEmit: true,
@@ -122,7 +123,7 @@ function tsconfig(workspaceBase, conditions = []) {
 }
 
 /** The `@ng-native` packages with entry points beside their main one, each published in `dist`. */
-const WITH_ENTRY_POINTS = ['components', 'expo', 'platform', 'web'];
+const WITH_ENTRY_POINTS = ['components', 'expo', 'platform', 'web', 'web-compat'];
 
 /** `nx typecheck` in a workspace whose libraries are the package manager's links. */
 const TYPECHECK_ONE_COPY = TYPECHECK.replace('tsconfig.json', 'tsconfig.typecheck.json');
@@ -153,12 +154,22 @@ function vitestConfig(withPaths) {
   return template
     .replace(
       "import { defineConfig } from 'vitest/config';",
-      "import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';\n" +
+      "import tsconfigPaths from 'vite-tsconfig-paths';\n" +
         "import { defineConfig } from 'vitest/config';",
     )
-    .replace('plugins: [ngNative()],', 'plugins: [nxViteTsPaths(), ngNative()],');
+    .replace('plugins: [ngNative()],', 'plugins: [tsconfigPaths(), ngNative()],');
 }
 
+/**
+ * What `vitestConfig(true)` imports, at the range Nx 24 adds for its own Vite configs, and Vite at
+ * the range `@ng-native/testing` peers on. Both peer on Vite optionally, so npm installs it for
+ * neither, and an integrated workspace from the `angular-monorepo` preset may have none at its root.
+ */
+const vitestPathsDependencies = {
+  'vite-tsconfig-paths': '^5.1.4',
+  vite: '^6.0.0 || ^7.0.0 || ^8.0.0',
+};
+
 /**
  * The ranges a workspace package's `package.json` lists: the root's own where everything it can
  * resolve to is a version Angular Native accepts, so that pnpm does not install a second Vitest
@@ -195,6 +206,7 @@ module.exports = {
   tsconfig,
   typecheckTsconfig,
   vitestConfig,
+  vitestPathsDependencies,
   reuseRootRanges,
   expoCompanions,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/nx",
-  "version": "0.17.1",
+  "version": "0.18.1",
   "description": "Nx generators for Angular Native: nx add, an Expo app project whose targets run it, and native libraries and components.",
   "keywords": [
     "angular",
@@ -23,6 +23,7 @@
       "@ng-native/analog",
       "@ng-native/components",
       "@ng-native/device",
+      "@ng-native/eslint-plugin",
       "@ng-native/expo",
       "@ng-native/fabric",
       "@ng-native/icons",
@@ -39,13 +40,13 @@
     ]
   },
   "dependencies": {
-    "@ng-native/migrate": "0.17.1",
-    "@nx/devkit": "^23.0.0",
+    "@ng-native/migrate": "0.18.1",
+    "@nx/devkit": "^23.0.0 || ^24.0.0",
     "minimatch": "^10.0.0",
     "semver": "^7.7.0"
   },
   "peerDependencies": {
-    "nx": "^23.0.0"
+    "nx": "^23.0.0 || ^24.0.0"
   },
   "devDependencies": {
     "@types/semver": "^7.7.0",