@ng-native/nx 0.17.0 → 0.18.0

package/application/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,12 +255,15 @@ 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,
     );
@@ -270,7 +284,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 +293,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/app/app.ts

@@ -3,8 +3,8 @@ import { Pressable, SafeAreaProvider, SafeAreaView, Text, View } from '@ng-nativ
 import { StatusBar } from '@ng-native/device';
 
 /**
- * Element names are lowercase, and that is load-bearing rather than style: an uppercase name is
- * read as an unknown Angular component and commits as a plain view with nothing in it.
+ * Element names are lowercase, and that is load-bearing rather than style: an uppercase name such
+ * as <View> matches no component's selector, and the Metro transform fails the build on it.
  */
 @Component({
   imports: [Pressable, SafeAreaProvider, SafeAreaView, Text, View],

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

@@ -200,13 +200,19 @@ const TYPECHECK_CONFIG = 'tsconfig.typecheck.json';
  * infers a `typecheck` that runs `tsc`, which reads no template: a misspelled input passes.
  *
  * `tsconfig.lib.json` itself will not do: `ngc` refuses `emitDeclarationOnly`, and a project that
- * is `composite` has to emit. The Angular options are the generated app's: a native view has no
- * DOM to check a host binding or an event against.
+ * is `composite` has to emit. Without `composite`, a `declarationMap` the preset's base sets is an
+ * error (TS5069), since nothing emits declarations. The Angular options are the generated app's: a
+ * native view has no DOM to check a host binding or an event against.
  */
 function writeTypecheckConfig(tree, root) {
   writeJson(tree, joinPathFragments(root, TYPECHECK_CONFIG), {
     extends: './tsconfig.lib.json',
-    compilerOptions: { noEmit: true, composite: false, emitDeclarationOnly: false },
+    compilerOptions: {
+      noEmit: true,
+      composite: false,
+      emitDeclarationOnly: false,
+      declarationMap: false,
+    },
     angularCompilerOptions: {
       strictTemplates: true,
       typeCheckHostBindings: false,

package/migrations.json

@@ -1,7 +1,7 @@
 {
   "generators": {
     "sync-app-versions": {
-      "version": "0.17.0",
+      "version": "0.18.0",
       "description": "Move the @ng-native packages each project's own package.json lists to the new version.",
       "implementation": "./migrations/run.cjs#sync-app-versions"
     },
@@ -29,6 +29,21 @@
       "version": "0.17.0",
       "description": "Read an engine node's children, text, kind, host and sheet by their new names.",
       "implementation": "./migrations/run.cjs#engine-node-fields"
+    },
+    "library-typecheck-declaration-map": {
+      "version": "0.17.1",
+      "description": "Turn off declarationMap in each Nx library's tsconfig.typecheck.json, which TypeScript refuses beside composite: false.",
+      "implementation": "./migrations/run.cjs#library-typecheck-declaration-map"
+    },
+    "native-typecheck-target": {
+      "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"
     }
   }
 }

package/native-app.cjs

@@ -33,10 +33,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 +98,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 +122,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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/nx",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "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.0",
-    "@nx/devkit": "^23.0.0",
+    "@ng-native/migrate": "0.18.0",
+    "@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",