@ng-native/schematics 0.2.0 → 0.4.0

package/application/index.cjs

@@ -96,13 +96,14 @@ function commands(name) {
   ].join('\n');
 }
 
-function writeFiles(tree, root, name) {
+function writeFiles(tree, root, name, bundleIdentifier) {
   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));
+  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, 'CLAUDE.md'), '@AGENTS.md\n');
+  tree.create(path.join(root, '.gitignore'), native.GITIGNORE);
   const manifest = native.projectManifest(name, readJson(tree, 'package.json'));
   tree.create(path.join(root, 'package.json'), JSON.stringify(manifest, null, 2) + '\n');
 }
@@ -130,7 +131,7 @@ function ignoreExpo(tree) {
 }
 
 /**
- * @param {{ name: string, directory?: string, prefix?: string, skipInstall?: boolean }} options
+ * @param {{ name: string, directory?: string, prefix?: string, bundleIdentifier?: string, skipInstall?: boolean }} options
  */
 function application(options) {
   return (tree, context) => {
@@ -146,9 +147,13 @@ function application(options) {
       throw new SchematicsException(`angular.json already has a project called "${name}".`);
     }
     const root = options.directory ?? path.join(workspace.newProjectRoot ?? 'projects', name);
+    const scope = readJson(tree, 'package.json').name?.match(/^@[^/]+/)?.[0];
+    const bundleIdentifier = options.bundleIdentifier ?? native.bundleIdentifier(name, scope);
+    const problem = native.bundleIdentifierProblem(bundleIdentifier);
+    if (problem) throw new SchematicsException(problem);
 
     addDependencies(tree, context);
-    writeFiles(tree, root, name);
+    writeFiles(tree, root, name, bundleIdentifier);
     workspace.projects = { ...workspace.projects, [name]: project(root, name, options.prefix) };
     writeJson(tree, 'angular.json', workspace);
     ignoreExpo(tree);

package/application/schema.json

@@ -21,6 +21,10 @@
       "default": "app",
       "pattern": "^[a-z][a-z0-9-]*$"
     },
+    "bundleIdentifier": {
+      "type": "string",
+      "description": "The iOS bundle identifier and Android package: com.acme.mobile. Defaults to com.<workspace scope>.<name>."
+    },
     "skipInstall": {
       "type": "boolean",
       "description": "Write the files and package.json without installing.",

package/component/index.cjs

@@ -10,36 +10,7 @@
 const path = require('node:path').posix;
 const { SchematicsException } = require('@angular-devkit/schematics');
 const { strings } = require('@angular-devkit/core');
-
-function componentSource(className, selector, label) {
-  return `import { Component } from '@angular/core';
-import { Text, View } from '@ng-native/components';
-
-@Component({
-  selector: '${selector}',
-  imports: [Text, View],
-  template: \`
-    <view>
-      <text>${label}</text>
-    </view>
-  \`,
-})
-export class ${className} {}
-`;
-}
-
-function testSource(className, file, label) {
-  return `import { render, screen } from '@ng-native/testing';
-import { expect, test } from 'vitest';
-import { ${className} } from './${file}.ts';
-
-test('renders', async () => {
-  await render(${className});
-
-  expect(screen.getByText('${label}')).toBeTruthy();
-});
-`;
-}
+const { componentSource, testSource } = require('./sources.cjs');
 
 /**
  * The directory the component goes in: the one `ng generate` was run from if that is inside the

package/component/sources.cjs

@@ -0,0 +1,47 @@
+/**
+ * The files a generated component is made of: a component built from `<view>` and `<text>`, and a
+ * test that renders it on the fake Fabric. `@ng-native/schematics` and `@ng-native/nx` each ship
+ * this file, and a test in `@ng-native/nx` keeps the two identical.
+ */
+
+/**
+ * @param {string} className
+ * @param {string} selector
+ * @param {string} label the text it shows, which its test finds
+ */
+function componentSource(className, selector, label) {
+  return `import { Component } from '@angular/core';
+import { Text, View } from '@ng-native/components';
+
+@Component({
+  selector: '${selector}',
+  imports: [Text, View],
+  template: \`
+    <view>
+      <text>${label}</text>
+    </view>
+  \`,
+})
+export class ${className} {}
+`;
+}
+
+/**
+ * @param {string} className
+ * @param {string} file the component's file name, without `.ts`
+ * @param {string} label
+ */
+function testSource(className, file, label) {
+  return `import { render, screen } from '@ng-native/testing';
+import { expect, test } from 'vitest';
+import { ${className} } from './${file}.ts';
+
+test('renders', async () => {
+  await render(${className});
+
+  expect(screen.getByText('${label}')).toBeTruthy();
+});
+`;
+}
+
+module.exports = { componentSource, testSource };

package/files/AGENTS.md

@@ -31,9 +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.
-- **Text only renders inside `<text>`.** `<view>Hello</view>` compiles and shows nothing.
+- **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 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/files/src/app/app.ts

@@ -1,5 +1,6 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { Pressable, SafeAreaProvider, SafeAreaView, Text, View } from '@ng-native/components';
+import { StatusBar } from '@ng-native/device';
 
 /**
  * Element names are lowercase, and that is load-bearing rather than style: an uppercase name is
@@ -28,7 +29,7 @@ import { Pressable, SafeAreaProvider, SafeAreaView, Text, View } from '@ng-nativ
     }
     .screen {
       flex: 1;
-      background-color: #101014;
+      background-color: #f5f5f7;
     }
     .body {
       flex: 1;
@@ -37,12 +38,12 @@ import { Pressable, SafeAreaProvider, SafeAreaView, Text, View } from '@ng-nativ
       padding: 24px;
     }
     .title {
-      color: #ffffff;
+      color: #101014;
       font-size: 28px;
       font-weight: 700;
     }
     .hint {
-      color: #8b8b96;
+      color: #5f5f6b;
       font-size: 15px;
     }
     .button {
@@ -57,8 +58,25 @@ import { Pressable, SafeAreaProvider, SafeAreaView, Text, View } from '@ng-nativ
       font-size: 16px;
       font-weight: 600;
     }
+    @media (prefers-color-scheme: dark) {
+      .screen {
+        background-color: #101014;
+      }
+      .title {
+        color: #ffffff;
+      }
+      .hint {
+        color: #8b8b96;
+      }
+    }
   `,
 })
 export class App {
   protected readonly count = signal(0);
+
+  constructor() {
+    // Dark status bar icons in light mode and light ones in dark mode. Unclaimed, Android keeps
+    // light icons whatever the scheme.
+    inject(StatusBar).set({ style: 'auto' });
+  }
 }

package/files/src/main.ts

@@ -1,3 +1,7 @@
+// Expo's runtime: its fetch, whose response streams a body, and URL, TextDecoderStream and
+// structuredClone. Metro runs it before this file only when something imports it, and nothing
+// else does in a release build, which would then get React Native's fetch, with no body.
+import 'expo';
 import { AppRegistry, Image, Platform, processColor } from 'react-native';
 import { mount } from '@ng-native/platform';
 import { currentConditions, deviceTokens, watchConditions } from '@ng-native/device';

package/migrations/run.cjs

@@ -0,0 +1,5 @@
+/**
+ * The migrations `ng update` runs, from `@ng-native/migrate`, where each one is written once for
+ * `nx migrate`, `ng update` and `npx @ng-native/migrate` alike.
+ */
+module.exports = require('@ng-native/migrate').forAngular();

package/migrations.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "sync-app-versions": {
+      "version": "0.4.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"
+    },
+    "split-store-and-player": {
+      "version": "0.3.0",
+      "description": "Import Storage, SecureStorage, audioPlayer and videoPlayer from the entry points that now hold them.",
+      "factory": "./migrations/run.cjs#split-store-and-player"
+    },
+    "tracking-available-getter": {
+      "version": "0.3.0",
+      "description": "Read Tracking's available as a property rather than calling it.",
+      "factory": "./migrations/run.cjs#tracking-available-getter"
+    },
+    "device-react-native-import": {
+      "version": "0.3.0",
+      "description": "Note each import of reactNative or ReactNative from @ng-native/device, which no longer exports them.",
+      "factory": "./migrations/run.cjs#device-react-native-import"
+    }
+  }
+}

package/native-app.cjs

@@ -2,52 +2,16 @@
  * What an Angular Native app is made of, whichever workspace it is generated into.
  *
  * The source of truth is `template/`, the starter `create-expo-app` uses and the setup this project
- * verifies before every release. `files/` holds verbatim copies of the template's source files and
- * the versions below are the template's own, and `native-app.test.ts` fails the moment either
- * drifts from it. A generated app and a templated app are the same app.
+ * verifies before every release. `files/` holds verbatim copies of the template's source files,
+ * the versions are the template's own, and `native-app.test.ts` fails the moment either drifts
+ * from it. A generated app and a templated app are the same app.
  *
- * The `@ng-native/*` packages are pinned to this package's own version, because every one of them
- * is released in lockstep with it.
+ * What does not depend on the Angular CLI, the dependencies, `app.json` and bundle identifier
+ * among them, is `@ng-native/migrate/native-app.cjs`, which `@ng-native/nx` builds its apps from too.
  */
 const { readFileSync } = require('node:fs');
 const path = require('node:path');
-const semver = require('semver');
-
-const { version } = require('./package.json');
-
-const FRAMEWORK = [
-  '@ng-native/components',
-  '@ng-native/device',
-  '@ng-native/fabric',
-  '@ng-native/metro',
-  '@ng-native/platform',
-];
-
-/** @type {Record<string, string>} */
-const dependencies = {
-  ...Object.fromEntries(FRAMEWORK.map((name) => [name, version])),
-  '@angular/common': '^22.0.0',
-  '@angular/core': '^22.0.0',
-  expo: '~57.0.26',
-  'expo-status-bar': '~57.0.1',
-  'expo-system-ui': '~57.0.4',
-  react: '19.2.3',
-  'react-native': '0.86.3',
-  'react-native-safe-area-context': '~5.7.0',
-};
-
-/** @type {Record<string, string>} */
-const devDependencies = {
-  // An Angular workspace already has Babel 8 through @angular/compiler-cli, and React Native's
-  // Babel peer would otherwise take the newest copy there is.
-  // The typecheck script compiles the templates too, which only the Angular compiler can.
-  '@angular/compiler-cli': '^22.0.0',
-  '@babel/core': '^7.29.7',
-  '@ng-native/testing': version,
-  '@types/react': '~19.2.2',
-  typescript: '~6.0.3',
-  vitest: '^5.0.0',
-};
+const shared = require('@ng-native/migrate/native-app.cjs');
 
 /**
  * The template's files, copied verbatim into the new app. Its `metro.config.js` and `tsconfig.json`
@@ -82,94 +46,21 @@ function agentsFile(commands) {
 }
 
 /**
- * The template's `app.json`, named for this app.
- *
- * Without the template's icons: they are the template's branding, not this app's, and Expo draws
- * its own default until `icon` is set.
- *
- * @param {string} name the project name, which is also the Expo slug
- */
-function appJson(name) {
-  const expo = {
-    name,
-    slug: name,
-    version: '1.0.0',
-    platforms: ['ios', 'android'],
-    orientation: 'portrait',
-    userInterfaceStyle: 'dark',
-    ios: { supportsTablet: true },
-    android: { predictiveBackGestureEnabled: false },
-    scheme: name.replace(/[^a-z0-9]/gi, '').toLowerCase(),
-    // The template's: Expo otherwise guesses a router root from src/app and says so on every start.
-    extra: { router: { root: 'src/app' } },
-    plugins: ['@ng-native/metro'],
-  };
-  return JSON.stringify({ expo }, null, 2) + '\n';
-}
-
-/**
- * The project's own `package.json`, which only Expo reads: `main` is how it finds the entry file.
- *
- * It lists every dependency the app has too, at the ranges the workspace root installs, though
- * nothing installs from it. Expo's autolinking links the native modules named here and no others,
- * so one left out, such as `react-native-safe-area-context`, is missing from the native build. And
- * `expo prebuild`, which `expo run:ios` starts with, adds `expo`, `react` or `react-native` if it
- * does not find them and then offers to install them into the project's directory, which would put
- * a second copy of React Native beside the root's.
+ * The project's own `package.json`, which only Expo reads: `main` is how it finds the entry file,
+ * and `prebuildPins` says why it lists every dependency the app has.
  *
  * @param {string} name
  * @param {{ dependencies?: Record<string, string>, devDependencies?: Record<string, string> }} root
  *   the workspace's root `package.json`, once this app's dependencies are in it
  */
 function projectManifest(name, root) {
-  const installed = { ...root.devDependencies, ...root.dependencies };
-  const pinned = Object.keys(dependencies).map((pkg) => [pkg, installed[pkg] ?? dependencies[pkg]]);
-  return { name, private: true, main: 'src/main.ts', dependencies: Object.fromEntries(pinned) };
-}
-
-/**
- * Where what a workspace already has can be older than what a new app is given: `@ng-native/testing`
- * installs Vitest 5 but its plugin runs on 4, which `ng new` 22.1 and the Nx preset still start on.
- * The range here is that package's `vitest` peer, and a test holds the two together.
- */
-const accepted = { vitest: '^4.0.8 || ^5.0.0' };
-
-/**
- * Why an existing dependency would stop this app installing or running, as a sentence each.
- *
- * Only ranges already in the manifest are judged, and only a range that cannot overlap the one
- * wanted is a conflict: `~6.0.2` and `~6.0.3` resolve to the same TypeScript. A missing package is
- * added at the version above. Nothing is rewritten, because moving a workspace's Angular or Vitest is an upgrade of every
- * project in it, and that belongs to `ng update` or `nx migrate`, not to a generator.
- *
- * @param {{ dependencies?: Record<string, string>, devDependencies?: Record<string, string> }} manifest
- * @returns {string[]}
- */
-function conflicts(manifest) {
-  const existing = { ...manifest.dependencies, ...manifest.devDependencies };
-  const problems = [];
-  for (const [name, installed] of Object.entries({ ...dependencies, ...devDependencies })) {
-    const range = existing[name];
-    const wanted = accepted[name] ?? installed;
-    if (!range || name.startsWith('@ng-native/')) continue;
-    if (semver.validRange(range) && !semver.intersects(range, wanted)) {
-      problems.push(
-        `${name} is ${range} here, and Angular Native needs ${wanted}. ` +
-          `npm will refuse the install until it is moved.`,
-      );
-    }
-  }
-  return problems;
+  return { name, private: true, main: 'src/main.ts', dependencies: shared.prebuildPins(root) };
 }
 
 module.exports = {
-  dependencies,
-  devDependencies,
+  ...shared,
   SOURCE_FILES,
   sourceFile,
   agentsFile,
-  appJson,
   projectManifest,
-  conflicts,
-  accepted,
 };

package/ng-add/index.cjs

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

package/ng-add/schema.json

@@ -14,6 +14,10 @@
       "type": "string",
       "description": "Where the project goes. Defaults to newProjectRoot/name, usually projects/native."
     },
+    "bundleIdentifier": {
+      "type": "string",
+      "description": "The iOS bundle identifier and Android package: com.acme.mobile. Defaults to com.<workspace scope>.<name>."
+    },
     "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.2.0",
+  "version": "0.4.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",
@@ -21,10 +21,31 @@
   "ng-add": {
     "save": "devDependencies"
   },
+  "ng-update": {
+    "migrations": "./migrations.json",
+    "packageGroupName": "@ng-native/schematics",
+    "packageGroup": [
+      "@ng-native/components",
+      "@ng-native/device",
+      "@ng-native/expo",
+      "@ng-native/fabric",
+      "@ng-native/icons",
+      "@ng-native/metro",
+      "@ng-native/migrate",
+      "@ng-native/nx",
+      "@ng-native/platform",
+      "@ng-native/router",
+      "@ng-native/schematics",
+      "@ng-native/tailwind",
+      "@ng-native/testing",
+      "@ng-native/web"
+    ]
+  },
   "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.4.0",
     "semver": "^7.7.0"
   },
   "devDependencies": {
@@ -32,9 +53,13 @@
     "@types/semver": "^7.7.0"
   },
   "nx": {
+    "projectType": "library",
     "tags": [
       "scope:schematics",
       "layer:build"
+    ],
+    "implicitDependencies": [
+      "@ng-native/template"
     ]
   },
   "license": "MIT",
@@ -51,6 +76,7 @@
     "*.cjs",
     "collection.json",
     "builders.json",
+    "migrations.json",
     "*/*.cjs",
     "*/*.json",
     "files"
@@ -60,6 +86,6 @@
   },
   "scripts": {
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "node --test \"*.test.ts\" \"{application,component,builders}/*.test.ts\""
+    "test": "node --test \"*.test.ts\" \"{application,component,builders,migrations}/*.test.ts\""
   }
 }