@ng-native/schematics 0.17.1 → 0.18.0

package/application/index.cjs

@@ -27,7 +27,7 @@ function writeJson(tree, file, value) {
  * The project's targets. Each is an Expo command run in the project's directory, which is where
  * Expo reads `app.json` and `metro.config.js` from.
  */
-function targets(root, name) {
+function targets(root, name, lint = false) {
   const expo = (command, args) => ({
     builder: '@ng-native/schematics:expo',
     options: args ? { command, args } : { command },
@@ -41,6 +41,18 @@ function targets(root, name) {
     'run-android': expo('run:android'),
     test: { builder: '@ng-native/schematics:vitest', options: {} },
     typecheck: { builder: '@ng-native/schematics:typecheck', options: {} },
+    // With `--linter=eslint`, angular-eslint's builder, which `ng lint` runs, with the project's
+    // own config: the rules that know a device from a browser, which a workspace's config for its
+    // web apps does not.
+    ...(lint && {
+      lint: {
+        builder: '@angular-eslint/builder:lint',
+        options: {
+          eslintConfig: path.join(root, 'eslint.config.mjs'),
+          lintFilePatterns: [path.join(root, '**/*.ts'), path.join(root, '**/*.html')],
+        },
+      },
+    }),
   };
 }
 
@@ -59,7 +71,7 @@ const WEB_SPECS = [
   'service',
 ];
 
-function project(root, name, prefix) {
+function project(root, name, prefix, lint) {
   return {
     projectType: 'application',
     root,
@@ -73,18 +85,19 @@ function project(root, name, prefix) {
     schematics: Object.fromEntries(
       WEB_SPECS.map((schematic) => [`@schematics/angular:${schematic}`, { skipTests: true }]),
     ),
-    architect: targets(root, name),
+    architect: targets(root, name, lint),
   };
 }
 
 /** The Commands section of the app's `AGENTS.md`, as this workspace runs them. */
-function commands(name) {
+function commands(name, lint) {
   const rows = [
     [`ng serve ${name}`, 'Metro; press i or a for a simulator, or scan the QR code with Expo Go'],
     [`ng run ${name}:run-ios`, 'the iOS simulator'],
     [`ng run ${name}:run-android`, 'the Android emulator'],
     [`ng test ${name}`, 'Vitest, in Node against a fake native layer: no simulator needed'],
     [`ng run ${name}:typecheck`, 'ngc, which checks the templates as well as the code'],
+    ...(lint ? [[`ng lint ${name}`, 'ESLint: what compiles but does nothing on a device']] : []),
     [`ng build ${name}`, 'an exported bundle'],
   ];
   const width = Math.max(...rows.map(([command]) => command.length)) + 2;
@@ -94,16 +107,19 @@ function commands(name) {
     '```',
     '',
     '`src/main.ts` mounts the root component, `src/app/app.ts`. ' +
-      `Run \`ng test ${name}\` after a change; it is fast.`,
+      (lint
+        ? `Run \`ng test ${name}\` and \`ng lint ${name}\` after a change; both are fast.`
+        : `Run \`ng test ${name}\` after a change; it is fast.`),
   ].join('\n');
 }
 
-function writeFiles(tree, root, name, bundleIdentifier) {
+function writeFiles(tree, root, name, bundleIdentifier, lint) {
   for (const file of native.SOURCE_FILES) {
     tree.create(path.join(root, file), native.sourceFile(file));
   }
   tree.create(path.join(root, 'app.json'), native.appJson(name, bundleIdentifier));
-  tree.create(path.join(root, 'AGENTS.md'), native.agentsFile(commands(name)));
+  tree.create(path.join(root, 'AGENTS.md'), native.agentsFile(commands(name, lint)));
+  if (lint) tree.create(path.join(root, 'eslint.config.mjs'), native.ESLINT_CONFIG);
   tree.create(path.join(root, 'CLAUDE.md'), '@AGENTS.md\n');
   tree.create(path.join(root, '.gitignore'), native.GITIGNORE);
   const manifest = native.projectManifest(name, readJson(tree, 'package.json'));
@@ -111,12 +127,19 @@ function writeFiles(tree, root, name, bundleIdentifier) {
 }
 
 /** Adds what is missing and leaves every version the workspace already chose alone. */
-function addDependencies(tree, context) {
+function addDependencies(tree, context, lint) {
   const manifest = readJson(tree, 'package.json');
-  for (const problem of native.conflicts(manifest)) context.logger.warn(problem);
+  const linter = lint ? 'eslint' : 'none';
+  for (const problem of native.conflicts(manifest, { linter })) context.logger.warn(problem);
+  const wanted = {
+    dependencies: native.dependencies,
+    devDependencies: lint
+      ? { ...native.devDependencies, ...native.lintDevDependencies }
+      : native.devDependencies,
+  };
   for (const field of ['dependencies', 'devDependencies']) {
     const existing = { ...manifest.dependencies, ...manifest.devDependencies };
-    const added = Object.entries(native[field]).filter(([name]) => !(name in existing));
+    const added = Object.entries(wanted[field]).filter(([name]) => !(name in existing));
     manifest[field] = Object.fromEntries(
       [...Object.entries(manifest[field] ?? {}), ...added].sort(([a], [b]) => (a < b ? -1 : 1)),
     );
@@ -133,7 +156,7 @@ function ignoreExpo(tree) {
 }
 
 /**
- * @param {{ name: string, directory?: string, prefix?: string, bundleIdentifier?: string, skipInstall?: boolean }} options
+ * @param {{ name: string, directory?: string, prefix?: string, bundleIdentifier?: string, linter?: 'eslint' | 'none', skipInstall?: boolean }} options
  */
 function application(options) {
   return (tree, context) => {
@@ -154,16 +177,20 @@ function application(options) {
     const problem = native.bundleIdentifierProblem(bundleIdentifier);
     if (problem) throw new SchematicsException(problem);
 
-    addDependencies(tree, context);
-    writeFiles(tree, root, name, bundleIdentifier);
-    workspace.projects = { ...workspace.projects, [name]: project(root, name, options.prefix) };
+    const lint = options.linter === 'eslint';
+    addDependencies(tree, context, lint);
+    writeFiles(tree, root, name, bundleIdentifier, lint);
+    const added = project(root, name, options.prefix, lint);
+    workspace.projects = { ...workspace.projects, [name]: added };
     writeJson(tree, 'angular.json', workspace);
     ignoreExpo(tree);
 
     if (!options.skipInstall) context.addTask(new NodePackageInstallTask());
     context.logger.info(
       `Created ${root}. Run it with: ng serve ${name} (Metro), ng run ${name}:run-ios, ` +
-        `ng test ${name}, ng run ${name}:typecheck, ng build ${name}.`,
+        `ng test ${name}, ng run ${name}:typecheck, ` +
+        (lint ? `ng lint ${name}, ` : '') +
+        `ng build ${name}.`,
     );
   };
 }

package/application/schema.json

@@ -8,7 +8,10 @@
       "type": "string",
       "description": "The project name, in angular.json and as the Expo slug.",
       "pattern": "^[a-z][a-z0-9-]*$",
-      "$default": { "$source": "argv", "index": 0 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What should the native app be called?"
     },
     "directory": {
@@ -25,6 +28,12 @@
       "type": "string",
       "description": "The iOS bundle identifier and Android package: com.acme.mobile. Defaults to com.<workspace scope>.<name>."
     },
+    "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 and package.json 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/files/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "expo/tsconfig.base",
+  "extends": "expo/tsconfig.base.json",
   "compilerOptions": {
     "strict": true,
     "allowImportingTsExtensions": true

package/migrations.json

@@ -2,7 +2,7 @@
   "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
     "sync-app-versions": {
-      "version": "0.17.1",
+      "version": "0.18.0",
       "description": "Move the @ng-native packages each project's own package.json lists to the new version.",
       "factory": "./migrations/run.cjs#sync-app-versions"
     },
@@ -40,6 +40,11 @@
       "version": "0.17.1",
       "description": "Give each Angular Native project in angular.json a typecheck target, run by ngc.",
       "factory": "./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.",
+      "factory": "./migrations/run.cjs#stop-watching-conditions"
     }
   }
 }

package/ng-add/index.cjs

@@ -8,7 +8,7 @@
  */
 const { application } = require('../application/index.cjs');
 
-/** @param {{ name?: string, directory?: string, bundleIdentifier?: string, skipInstall?: boolean }} options */
+/** @param {{ name?: string, directory?: string, bundleIdentifier?: string, linter?: 'eslint' | 'none', skipInstall?: boolean }} options */
 function ngAdd(options) {
   return application({ ...options, name: options.name ?? 'native', prefix: 'app' });
 }

package/ng-add/schema.json

@@ -18,6 +18,12 @@
       "type": "string",
       "description": "The iOS bundle identifier and Android package: com.acme.mobile. Defaults to com.<workspace scope>.<name>."
     },
+    "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 and package.json without installing.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/schematics",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "ng add and ng generate for Angular Native: an Expo app in an Angular CLI workspace, with builders that run it.",
   "keywords": [
     "angular",
@@ -28,6 +28,7 @@
       "@ng-native/analog",
       "@ng-native/components",
       "@ng-native/device",
+      "@ng-native/eslint-plugin",
       "@ng-native/expo",
       "@ng-native/fabric",
       "@ng-native/icons",
@@ -47,7 +48,7 @@
     "@angular-devkit/architect": ">=0.2200.0 <0.2300.0",
     "@angular-devkit/core": "^22.0.0",
     "@angular-devkit/schematics": "^22.0.0",
-    "@ng-native/migrate": "0.17.1"
+    "@ng-native/migrate": "0.18.0"
   },
   "devDependencies": {
     "@schematics/angular": "22.1.9"