@ng-native/schematics 0.17.0 → 0.18.0

package/README.md

@@ -22,8 +22,9 @@ ng serve native                  # expo start: Metro, with Expo Go or a simulato
 ng build native                  # expo export, into dist/native
 ng test native                   # vitest run, on the fake Fabric
 ng run native:run-ios            # expo run:ios
+ng run native:typecheck          # ngc: the templates as well as the code
 
-cd projects/native && ng generate component profile-card   # <view>, <text>, and a test
+cd projects/native && ng generate component profile-card   # src/app/profile-card: <view>, <text>, a test
 ```
 
 ## What's in the package

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 },
@@ -40,6 +40,19 @@ function targets(root, name) {
     'run-ios': expo('run:ios'),
     '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')],
+        },
+      },
+    }),
   };
 }
 
@@ -58,7 +71,7 @@ const WEB_SPECS = [
   'service',
 ];
 
-function project(root, name, prefix) {
+function project(root, name, prefix, lint) {
   return {
     projectType: 'application',
     root,
@@ -72,17 +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;
@@ -92,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'));
@@ -109,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)),
     );
@@ -131,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) => {
@@ -152,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 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/builders/spawn-bin.cjs

@@ -21,13 +21,14 @@ function findManifest(name, from) {
 }
 
 /**
- * @param {string} name the package, `expo` or `vitest`
+ * @param {string} name the package, such as `expo`, `vitest` or `@angular/compiler-cli`
  * @param {string} from the directory to resolve it from
+ * @param {string} command the entry of its `bin` to run, when not named for the package: `ngc`
  */
-function resolveBin(name, from) {
+function resolveBin(name, from, command = name) {
   const manifestPath = findManifest(name, from);
   const { bin } = JSON.parse(readFileSync(manifestPath, 'utf8'));
-  const file = typeof bin === 'string' ? bin : bin[name];
+  const file = typeof bin === 'string' ? bin : bin[command];
   return path.join(path.dirname(manifestPath), file);
 }
 
@@ -56,12 +57,25 @@ const SIGNALS = ['SIGINT', 'SIGTERM', 'SIGHUP'];
  */
 async function spawnBin(name, args, context) {
   const cwd = await projectRoot(context);
-  const bin = resolveBin(name, cwd);
+  return spawnFile(resolveBin(name, cwd), args, cwd, name, context);
+}
+
+/**
+ * Runs `file` with Node in `cwd`, logged and reported as `label`.
+ *
+ * @param {string} file
+ * @param {string[]} args
+ * @param {string} cwd
+ * @param {string} label
+ * @param {import('@angular-devkit/architect').BuilderContext} context
+ * @returns {Promise<{ success: boolean, error?: string }>}
+ */
+function spawnFile(file, args, cwd, label, context) {
   context.logger.info(
-    `${name} ${args.join(' ')}  (in ${path.relative(context.workspaceRoot, cwd)})`,
+    `${[label, ...args].join(' ')}  (in ${path.relative(context.workspaceRoot, cwd)})`,
   );
   return new Promise((resolve) => {
-    const child = spawn(process.execPath, [bin, ...args], { cwd, stdio: 'inherit' });
+    const child = spawn(process.execPath, [file, ...args], { cwd, stdio: 'inherit' });
     // Ctrl-C reaches the whole process group, but a supervisor, CI or an IDE's task runner signals
     // `ng` alone, and Metro would outlive it on its port. So a stop is passed on.
     const stop = (signal) => child.kill(signal);
@@ -75,10 +89,10 @@ async function spawnBin(name, args, context) {
       settle(
         code === 0
           ? { success: true }
-          : { success: false, error: `${name} exited with ${signal ?? `code ${code}`}` },
+          : { success: false, error: `${label} exited with ${signal ?? `code ${code}`}` },
       ),
     );
   });
 }
 
-module.exports = { resolveBin, projectRoot, spawnBin };
+module.exports = { resolveBin, projectRoot, spawnBin, spawnFile };

package/builders/typecheck.cjs

@@ -0,0 +1,30 @@
+/**
+ * `@ng-native/schematics:typecheck`: the project's code and templates, checked by `ngc`.
+ *
+ * `tsc` reads no template, so a binding to an input a component does not have passes it. The Metro
+ * config is loaded first, as the template's `typecheck` script does: once Tailwind is added, it
+ * writes the sheet `src/main.ts` imports, which a fresh checkout does not have.
+ */
+const { createBuilder } = require('@angular-devkit/architect');
+const { existsSync } = require('node:fs');
+const path = require('node:path');
+const { projectRoot, resolveBin, spawnFile } = require('./spawn-bin.cjs');
+
+/**
+ * @param {import('@angular-devkit/architect').BuilderContext} context
+ * @returns {Promise<{ success: boolean, error?: string }>}
+ */
+async function runTypecheck(context) {
+  const cwd = await projectRoot(context);
+  // A project without one has no Tailwind sheet to write either.
+  const metroConfig = path.join(cwd, 'metro.config.js');
+  if (existsSync(metroConfig)) {
+    const config = await spawnFile(metroConfig, [], cwd, 'node metro.config.js', context);
+    if (!config.success) return config;
+  }
+  const ngc = resolveBin('@angular/compiler-cli', cwd, 'ngc');
+  return spawnFile(ngc, ['-p', 'tsconfig.json', '--noEmit'], cwd, 'ngc', context);
+}
+
+module.exports = createBuilder((_options, context) => runTypecheck(context));
+module.exports.runTypecheck = runTypecheck;

package/builders/typecheck.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "NgNativeTypecheckBuilder",
+  "title": "Typecheck",
+  "type": "object",
+  "properties": {}
+}

package/builders.json

@@ -10,6 +10,11 @@
       "implementation": "./builders/vitest.cjs",
       "schema": "./builders/vitest.json",
       "description": "Runs the project's tests once with Vitest, through @ng-native/testing."
+    },
+    "typecheck": {
+      "implementation": "./builders/typecheck.cjs",
+      "schema": "./builders/typecheck.json",
+      "description": "Checks the project's code and templates with ngc, after loading its Metro config."
     }
   }
 }

package/component/index.cjs

@@ -14,17 +14,18 @@ const { componentSource, testSource } = require('./sources.cjs');
 
 /**
  * The directory the component goes in: the one `ng generate` was run from if that is inside the
- * project, the project's root otherwise.
+ * project's `src`, and `src/app` otherwise, beside `app.ts`, as Angular's own schematic and
+ * `@ng-native/nx:component` put it. From the project's own directory that is `src/app` too.
  */
 function directoryFor(workspace, options) {
   const project = workspace.projects?.[options.project];
   if (!project) {
     throw new SchematicsException(`angular.json has no project called "${options.project}".`);
   }
-  const root = project.sourceRoot ?? project.root;
+  const src = path.join(project.root, 'src');
   const cwd = path.normalize(options.path ?? '');
-  const inside = cwd === root || cwd.startsWith(root + '/');
-  return { directory: inside ? cwd : root, prefix: project.prefix };
+  const inside = cwd === src || cwd.startsWith(src + '/');
+  return { directory: inside ? cwd : path.join(src, 'app'), prefix: project.prefix };
 }
 
 /**

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/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.0",
+      "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"
     },
@@ -30,6 +30,21 @@
       "version": "0.17.0",
       "description": "Read an engine node's children, text, kind, host and sheet by their new names.",
       "factory": "./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.",
+      "factory": "./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.",
+      "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.0",
+  "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.0"
+    "@ng-native/migrate": "0.18.0"
   },
   "devDependencies": {
     "@schematics/angular": "22.1.9"