@ng-native/nx 0.3.0 → 0.4.0

package/application/index.cjs

@@ -59,6 +59,15 @@ function hasPathAliases(tree, workspaces) {
  * The compiler options `file` ends up with, those it inherits through `extends` included, as
  * TypeScript merges them: each option from the last config that sets it.
  */
+/**
+ * Whether the app reaches its libraries through the package manager's links alone, where a
+ * library can have a copy of its own of a package the app has too. With path aliases the
+ * workspace has one `node_modules`, and a `paths` list of the app's would replace the aliases.
+ */
+function linksLibraries(tree, workspaces) {
+  return workspaces && !hasPathAliases(tree, workspaces);
+}
+
 function baseCompilerOptions(tree, file = 'tsconfig.base.json', ancestors = []) {
   if (ancestors.includes(file) || !tree.exists(file)) return {};
   const config = readJson(tree, file);
@@ -116,7 +125,7 @@ function metroPort(tree) {
   return port;
 }
 
-function targets(directory, port) {
+function targets(directory, port, oneCopy) {
   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
@@ -127,7 +136,7 @@ function targets(directory, port) {
   };
   return {
     typecheck: {
-      ...run(native.TYPECHECK),
+      ...run(oneCopy ? native.TYPECHECK_ONE_COPY : native.TYPECHECK),
       cache: true,
       inputs: ['default', '^production'],
       // The Tailwind sheet the command builds, which a cache hit restores rather than rebuilds.
@@ -190,6 +199,9 @@ async function writeFiles(tree, { directory, projectName, workspaces, bundleIden
   const workspaceBase = base ? `${offsetFromRoot(directory)}tsconfig.base.json` : undefined;
   const conditions = baseCompilerOptions(tree).customConditions ?? [];
   file('tsconfig.json', JSON.stringify(native.tsconfig(workspaceBase, conditions), null, 2) + '\n');
+  if (linksLibraries(tree, workspaces)) {
+    file('tsconfig.typecheck.json', JSON.stringify(native.typecheckTsconfig(), null, 2) + '\n');
+  }
   file('vitest.config.mts', native.vitestConfig(Boolean(base)));
 
   const manifest = { name: projectName, version: '0.0.1', private: true, main: 'src/main.ts' };
@@ -258,7 +270,7 @@ async function application(tree, options) {
       .split(',')
       .map((tag) => tag.trim())
       .filter(Boolean),
-    targets: targets(directory, port),
+    targets: targets(directory, port, linksLibraries(tree, workspaces)),
   });
 
   ignoreExpo(tree);

package/files/AGENTS.md

@@ -31,12 +31,17 @@ change; both are fast.
   imported from `@ng-native/components` into the component's `imports`, like any Angular
   component: `imports: [View, Text]`. `<View>` compiles to an empty template, and an element used
   without its import renders as a plain view.
-- **There is no DOM.** No `document`, no `window`, no `<div>`, `<span>`, `<button>` or `<input>`,
-  no `@angular/platform-browser`, and no `@angular/animations`. Use the native elements above.
+- **There is no DOM.** No `document`, no `window`, no `<button>`, `<a>`, `<input>` or `<img>`, no
+  `@angular/platform-browser`, and no `@angular/animations`. Use the native elements above. HTML's
+  text elements (`p`, `span`, `h1`, `strong`) draw as text and its layout elements (`div`,
+  `section`, `ul`) as plain views, with none of a browser's default styles.
 - **A component's host is a flex item.** `<app-case-list />` commits as a view of its own, with no
   `flex`, so a `flex: 1` scroll view inside it gets a height of zero and shows nothing. A component
   that fills the space it is given sets `host: { style: 'flex: 1' }` (or `:host { flex: 1; }`).
-- **Text only renders inside `<text>`.** `<view>Hello</view>` compiles and shows nothing.
+- **Text is drawn in a text element.** `<text>` is the one with inputs and outputs (`numberOfLines`,
+  `(press)`). `p`, `span` and the other HTML text elements are text while they hold only text and
+  other text elements; one that holds a view is a view. Text written straight into a view is given
+  a paragraph of its own, one per run, and never flows inline with the elements beside it.
 - **Events are native:** `(press)` on `<pressable>`, not `(click)`; `[(value)]` or `(changeText)` on
   `<text-input>`; `(scroll)`, `(layout)`. A pressable text is `<text pressable (press)="...">`.
 - **Signals, zoneless, AOT.** State is signals and `computed()`; there is no zone.js, so nothing

package/library/index.cjs

@@ -23,6 +23,7 @@ const {
   names,
   readNxJson,
   readJson,
+  writeJson,
   updateJson,
   updateProjectConfiguration,
 } = require('@nx/devkit');
@@ -107,6 +108,11 @@ const imports = {
   },
 };
 
+/** What `nx typecheck` runs for a library in the TypeScript preset: `ngc`, which reads templates. */
+const typecheckDependencies = {
+  '@angular/compiler-cli': native.devDependencies['@angular/compiler-cli'],
+};
+
 function projectAt(tree, root) {
   for (const [name, project] of getProjects(tree))
     if (project.root === root) return { name, project };
@@ -164,12 +170,100 @@ function writeSpecConfig(tree, root, angular) {
   });
 }
 
+/**
+ * Lets the library's source import as its test, the template and the documentation do, with
+ * `.ts`: `allowImportingTsExtensions` in `tsconfig.lib.json`, and `src/index.ts` written that way
+ * in place of the `.js` `@nx/js` gives it.
+ *
+ * TypeScript takes the option only where no JavaScript is emitted, which is the TypeScript
+ * preset's own setting (`emitDeclarationOnly`, which `@nx/js` writes into `tsconfig.lib.json`). A
+ * workspace that has turned that off keeps `.js`.
+ */
+function importWithTsExtensions(tree, root) {
+  const config = joinPathFragments(root, 'tsconfig.lib.json');
+  if (!emitsDeclarationsOnly(tree, config)) return;
+  updateJson(tree, config, (lib) => ({
+    ...lib,
+    compilerOptions: { ...lib.compilerOptions, allowImportingTsExtensions: true },
+  }));
+  const index = joinPathFragments(root, 'src', 'index.ts');
+  if (!tree.exists(index)) return;
+  const source = tree.read(index, 'utf-8');
+  tree.write(index, source.replace(/(from\s+['"]\.{1,2}\/[^'"]*)\.js(['"])/g, '$1.ts$2'));
+}
+
+/** The config `nx typecheck` gives `ngc` for a library, beside the one it is built with. */
+const TYPECHECK_CONFIG = 'tsconfig.typecheck.json';
+
+/**
+ * A config `ngc` can check the library's templates with, as an app's `typecheck` does. `@nx/js`
+ * 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.
+ */
+function writeTypecheckConfig(tree, root) {
+  writeJson(tree, joinPathFragments(root, TYPECHECK_CONFIG), {
+    extends: './tsconfig.lib.json',
+    compilerOptions: { noEmit: true, composite: false, emitDeclarationOnly: false },
+    angularCompilerOptions: {
+      strictTemplates: true,
+      typeCheckHostBindings: false,
+      strictDomEventTypes: false,
+    },
+  });
+}
+
+/** `nx typecheck <library>`: `ngc`, in place of the `tsc` `@nx/js` infers. */
+function typecheckTarget(root) {
+  return {
+    executor: 'nx:run-commands',
+    options: { cwd: root, command: `ngc -p ${TYPECHECK_CONFIG}` },
+    cache: true,
+    inputs: ['default', '^production'],
+  };
+}
+
+/** Whether a tsconfig emits declarations and no JavaScript, once what it extends is merged in. */
+function emitsDeclarationsOnly(tree, file) {
+  const { noEmit, emitDeclarationOnly } = emitOptions(tree, file, new Set());
+  return noEmit === true || emitDeclarationOnly === true;
+}
+
+/**
+ * `noEmit` and `emitDeclarationOnly` as the compiler reads them: each from the nearest config that
+ * sets it, and a later entry of an `extends` list over an earlier one.
+ */
+function emitOptions(tree, file, seen) {
+  if (seen.has(file) || !tree.exists(file)) return {};
+  // The configs on the way here, to stop at a cycle. Not every config read: two entries of a list
+  // may share an ancestor, and each is read whole.
+  const above = new Set(seen).add(file);
+  const { compilerOptions = {}, extends: base = [] } = readJson(tree, file);
+  // ponytail: a config that comes from a package is not followed, so a library under one keeps
+  // `.js`. Resolve the specifier from the config's directory if a workspace needs it.
+  const inherited = [base]
+    .flat()
+    .filter((from) => typeof from === 'string' && from.startsWith('.'))
+    .map((from) => joinPathFragments(path.dirname(file), from))
+    .map((from) => emitOptions(tree, from.endsWith('.json') ? from : `${from}.json`, above));
+  const { noEmit, emitDeclarationOnly } = compilerOptions;
+  return Object.assign(
+    {},
+    ...inherited,
+    noEmit === undefined ? {} : { noEmit },
+    emitDeclarationOnly === undefined ? {} : { emitDeclarationOnly },
+  );
+}
+
 /**
  * The packages the component and its test import: in the library's own `package.json` when it is
  * a workspace package, which pnpm links from, and at the root otherwise. A version already there
  * is left alone.
  */
-async function addImports(tree, root) {
+async function addImports(tree, root, alsoDev = {}) {
+  const devDependencies = { ...imports.devDependencies, ...alsoDev };
   const manifest = joinPathFragments(root, 'package.json');
   const rootManifest = readJson(tree, 'package.json');
   if (tree.exists(manifest)) {
@@ -177,7 +271,7 @@ async function addImports(tree, root) {
     return addDependenciesToPackageJson(
       tree,
       await own(imports.dependencies),
-      await own(imports.devDependencies),
+      await own(devDependencies),
       manifest,
       true,
     );
@@ -186,7 +280,7 @@ async function addImports(tree, root) {
   return addDependenciesToPackageJson(
     tree,
     await asSaved(tree, imports.dependencies, existing),
-    await asSaved(tree, imports.devDependencies, existing),
+    await asSaved(tree, devDependencies, existing),
     'package.json',
     true,
   );
@@ -211,10 +305,13 @@ async function library(tree, options) {
   const aliases = hasPathAliases(tree, usesWorkspaces(tree));
   tree.write(joinPathFragments(directory, 'vitest.config.mts'), native.vitestConfig(aliases));
   writeSpecConfig(tree, directory, angular);
+  if (!angular) importWithTsExtensions(tree, directory);
+  if (!angular) writeTypecheckConfig(tree, directory);
   updateProjectConfiguration(tree, name, {
     ...project,
     targets: {
       ...project.targets,
+      ...(angular ? {} : { typecheck: typecheckTarget(directory) }),
       test: {
         executor: 'nx:run-commands',
         options: { cwd: directory, command: 'vitest run' },
@@ -224,7 +321,7 @@ async function library(tree, options) {
     },
   });
 
-  await addImports(tree, directory);
+  await addImports(tree, directory, angular ? {} : typecheckDependencies);
   // `nxViteTsPaths()`, which the Vitest config uses to reach the workspace's other libraries.
   if (aliases) {
     const vite = { '@nx/vite': workspaceNxVersion(tree) };

package/migrations.json

@@ -1,7 +1,7 @@
 {
   "generators": {
     "sync-app-versions": {
-      "version": "0.3.0",
+      "version": "0.4.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"
     },

package/native-app.cjs

@@ -121,6 +121,31 @@ 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'];
+
+/** `nx typecheck` in a workspace whose libraries are the package manager's links. */
+const TYPECHECK_ONE_COPY = TYPECHECK.replace('tsconfig.json', 'tsconfig.typecheck.json');
+
+/**
+ * The tsconfig `nx typecheck` reads where libraries are the package manager's links: the app's,
+ * with every `@ng-native` package resolved to the app's own copy.
+ *
+ * pnpm gives a library a copy of its own of a package whose peers it does not share with the app,
+ * the gesture and animation packages an app adds among them. `ngc` then finds a component a
+ * library imports in one copy and the app's import of it in the other, and stops at `NG3004`
+ * before it checks a template. The Metro preset and the Vitest plugin make the same choice where
+ * they resolve. It is a file of its own because Metro reads the `paths` of `tsconfig.json`, and
+ * these skip the `exports` of each package, its `browser` condition included.
+ */
+function typecheckTsconfig() {
+  const paths = { '@ng-native/*': ['./node_modules/@ng-native/*'] };
+  for (const name of WITH_ENTRY_POINTS) {
+    paths[`@ng-native/${name}/*`] = [`./node_modules/@ng-native/${name}/dist/*`];
+  }
+  return { extends: './tsconfig.json', compilerOptions: { paths } };
+}
+
 /** @param {boolean} withPaths whether to resolve the workspace's tsconfig path aliases */
 function vitestConfig(withPaths) {
   const template = readFileSync(path.join(__dirname, 'files', 'vitest.config.mts'), 'utf8');
@@ -165,7 +190,10 @@ module.exports = {
   agentsFile,
   METRO_CONFIG,
   TYPECHECK,
+  TYPECHECK_ONE_COPY,
+  WITH_ENTRY_POINTS,
   tsconfig,
+  typecheckTsconfig,
   vitestConfig,
   reuseRootRanges,
   expoCompanions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/nx",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Nx generators for Angular Native: nx add, an Expo app project whose targets run it, and native libraries and components.",
   "keywords": [
     "angular",
@@ -37,7 +37,7 @@
     ]
   },
   "dependencies": {
-    "@ng-native/migrate": "0.3.0",
+    "@ng-native/migrate": "0.4.0",
     "@nx/devkit": "^23.0.0",
     "minimatch": "^10.0.0",
     "semver": "^7.7.0"
@@ -54,6 +54,9 @@
     "tags": [
       "scope:nx",
       "layer:build"
+    ],
+    "implicitDependencies": [
+      "@ng-native/template"
     ]
   },
   "license": "MIT",