@ng-native/schematics 0.16.0 → 0.17.1

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

@@ -40,6 +40,7 @@ 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: {} },
   };
 }
 
@@ -83,6 +84,7 @@ function commands(name) {
     [`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'],
     [`ng build ${name}`, 'an exported bundle'],
   ];
   const width = Math.max(...rows.map(([command]) => command.length)) + 2;
@@ -161,7 +163,7 @@ function application(options) {
     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, ng build ${name}.`,
     );
   };
 }

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

@@ -59,10 +59,10 @@ change; both are fast.
   (`{ padding: 16, backgroundColor: '#fff' }`).
 - A component's `styles` is real CSS, compiled at build time: type, class, id and attribute
   selectors, combinators, `:host`, `@media`, custom properties, transitions and `@keyframes`.
-  Grid, float, `::before`/`::after`, `:hover` and `:focus-visible` are dropped with a build
-  warning naming the file, line and reason - lay out with flexbox, and drive a hover or focus look
-  from a bound attribute. Everything is `display: flex`
-  with `flex-direction: column` by default, as in React Native.
+  Float, `::before`/`::after`, `:hover` and `:focus-visible` are dropped with a build warning
+  naming the file, line and reason - lay out with flexbox, grid or a block, and drive a hover or
+  focus look from a bound attribute. Everything is `display: flex` with `flex-direction: column`
+  by default, as in React Native.
 - Tailwind v4 works through `@ng-native/tailwind`, with `ios:`, `android:` and `dark:` variants.
 
 ## Lists, navigation, forms

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/migrations.json

@@ -2,7 +2,7 @@
   "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
     "sync-app-versions": {
-      "version": "0.16.0",
+      "version": "0.17.1",
       "description": "Move the @ng-native packages each project's own package.json lists to the new version.",
       "factory": "./migrations/run.cjs#sync-app-versions"
     },
@@ -25,6 +25,21 @@
       "version": "0.14.0",
       "description": "Read an engine node's element tag as tag rather than name.",
       "factory": "./migrations/run.cjs#engine-node-tag"
+    },
+    "engine-node-fields": {
+      "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"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/schematics",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "ng add and ng generate for Angular Native: an Expo app in an Angular CLI workspace, with builders that run it.",
   "keywords": [
     "angular",
@@ -39,14 +39,15 @@
       "@ng-native/schematics",
       "@ng-native/tailwind",
       "@ng-native/testing",
-      "@ng-native/web"
+      "@ng-native/web",
+      "@ng-native/web-compat"
     ]
   },
   "dependencies": {
     "@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.16.0"
+    "@ng-native/migrate": "0.17.1"
   },
   "devDependencies": {
     "@schematics/angular": "22.1.9"