@ng-native/nx 0.18.0 → 0.18.2

package/application/index.cjs

@@ -29,7 +29,7 @@ const {
   addDependenciesToPackageJson,
 } = require('@nx/devkit');
 const native = require('../native-app.cjs');
-const { init, workspaceNxVersion } = require('../init/index.cjs');
+const { init } = require('../init/index.cjs');
 const { usesWorkspaces, includeInWorkspaces } = require('./workspaces.cjs');
 const { asSaved } = require('../save-exact.cjs');
 const { registerSyncGenerator } = require('../sync/index.cjs');
@@ -268,12 +268,11 @@ async function application(tree, options) {
       true,
     );
   }
-  // `nxViteTsPaths()`, which the app's Vitest config uses to reach the workspace's libraries.
+  // `tsconfigPaths()`, which the app's Vitest config uses to reach the workspace's libraries.
   // Added now rather than only when present, because a library generated later is the ordinary
   // case and nothing would come back to add it then.
   if (hasPathAliases(tree, workspaces)) {
-    const vite = { '@nx/vite': workspaceNxVersion(tree) };
-    addDependenciesToPackageJson(tree, {}, vite, 'package.json', true);
+    addDependenciesToPackageJson(tree, {}, native.vitestPathsDependencies, 'package.json', true);
   }
   await writeFiles(tree, resolved);
   addProjectConfiguration(tree, projectName, {

package/generators.json

@@ -35,6 +35,11 @@
       "factory": "./component/index.cjs#component",
       "schema": "./component/schema.json",
       "description": "A component for an Angular Native app or library, with native elements and a test that runs in Node."
+    },
+    "nativescript": {
+      "factory": "./nativescript/index.cjs#nativescript",
+      "schema": "./nativescript/schema.json",
+      "description": "Sets up @ng-native/nativescript in an Angular Native app: the packages, the config plugin, the iOS types and provideNativeScript()."
     }
   }
 }

package/library/index.cjs

@@ -328,10 +328,9 @@ async function library(tree, options) {
   });
 
   await addImports(tree, directory, angular ? {} : typecheckDependencies);
-  // `nxViteTsPaths()`, which the Vitest config uses to reach the workspace's other libraries.
+  // `tsconfigPaths()`, which the Vitest config uses to reach the workspace's other libraries.
   if (aliases) {
-    const vite = { '@nx/vite': workspaceNxVersion(tree) };
-    addDependenciesToPackageJson(tree, {}, vite, 'package.json', true);
+    addDependenciesToPackageJson(tree, {}, native.vitestPathsDependencies, 'package.json', true);
   }
 
   if (!options.skipFormat) await formatFiles(tree);

package/migrations.json

@@ -1,7 +1,7 @@
 {
   "generators": {
     "sync-app-versions": {
-      "version": "0.18.0",
+      "version": "0.18.2",
       "description": "Move the @ng-native packages each project's own package.json lists to the new version.",
       "implementation": "./migrations/run.cjs#sync-app-versions"
     },
@@ -44,6 +44,11 @@
       "version": "0.17.2",
       "description": "Keep what watchConditions returns in each app's entry point and stop it as the app is destroyed.",
       "implementation": "./migrations/run.cjs#stop-watching-conditions"
+    },
+    "vitest-tsconfig-paths": {
+      "version": "0.18.1",
+      "description": "Resolve the workspace's path aliases in Nx Vitest configs with vite-tsconfig-paths, as nxViteTsPaths does nothing from Nx 24.",
+      "implementation": "./migrations/run.cjs#vitest-tsconfig-paths"
     }
   }
 }

package/native-app.cjs

@@ -13,8 +13,9 @@
  *   import a library at all: Metro reports `Cannot resolve @org/ui`.
  * - `tsconfig.json` also extends the workspace's `tsconfig.base.json` when there is one, which is
  *   where those aliases live, and puts back the Expo settings the workspace's base overrides.
- * - `vitest.config.mts` adds `nxViteTsPaths` when the workspace has `@nx/vite`, for the same
- *   aliases, which Vitest does not read from tsconfig either.
+ * - `vitest.config.mts` adds `vite-tsconfig-paths` when the workspace has path aliases, for the
+ *   same aliases, which Vitest does not read from tsconfig either. It is what Nx 24 writes in its
+ *   own Vite configs: `nxViteTsPaths` from `@nx/vite` is an inert stub there.
  *
  * What does not depend on Nx, the dependencies, `app.json` and bundle identifier among them, is
  * `@ng-native/migrate/native-app.cjs`, which `@ng-native/schematics` builds its apps from too.
@@ -153,12 +154,22 @@ function vitestConfig(withPaths) {
   return template
     .replace(
       "import { defineConfig } from 'vitest/config';",
-      "import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';\n" +
+      "import tsconfigPaths from 'vite-tsconfig-paths';\n" +
         "import { defineConfig } from 'vitest/config';",
     )
-    .replace('plugins: [ngNative()],', 'plugins: [nxViteTsPaths(), ngNative()],');
+    .replace('plugins: [ngNative()],', 'plugins: [tsconfigPaths(), ngNative()],');
 }
 
+/**
+ * What `vitestConfig(true)` imports, at the range Nx 24 adds for its own Vite configs, and Vite at
+ * the range `@ng-native/testing` peers on. Both peer on Vite optionally, so npm installs it for
+ * neither, and an integrated workspace from the `angular-monorepo` preset may have none at its root.
+ */
+const vitestPathsDependencies = {
+  'vite-tsconfig-paths': '^5.1.4',
+  vite: '^6.0.0 || ^7.0.0 || ^8.0.0',
+};
+
 /**
  * The ranges a workspace package's `package.json` lists: the root's own where everything it can
  * resolve to is a version Angular Native accepts, so that pnpm does not install a second Vitest
@@ -195,6 +206,7 @@ module.exports = {
   tsconfig,
   typecheckTsconfig,
   vitestConfig,
+  vitestPathsDependencies,
   reuseRootRanges,
   expoCompanions,
 };

package/nativescript/index.cjs

@@ -0,0 +1,126 @@
+/**
+ * `nx g @ng-native/nx:nativescript mobile`: NativeScript's iOS and Android APIs in an Angular
+ * Native app, through `@ng-native/nativescript`.
+ *
+ * An app needs the packages, `@ng-native/nativescript` among its config plugins (which links the
+ * runtime and its metadata into the native build), the iOS and Android SDKs' types, and `provideNativeScript()`
+ * among the providers `mount` is given. Metro supplies the Babel config: see `@ng-native/metro`'s
+ * `nativescript-babel.cjs`.
+ *
+ * It only adds, so running it again changes nothing. A file it cannot follow is left alone, with a
+ * warning saying what to add by hand.
+ */
+const {
+  addDependenciesToPackageJson,
+  formatFiles,
+  getProjects,
+  installPackagesTask,
+  joinPathFragments,
+  logger,
+  readJson,
+} = require('@nx/devkit');
+const native = require('../native-app.cjs');
+const { usesWorkspaces } = require('../application/workspaces.cjs');
+
+// The iOS SDK's types ship with the runtime; Android's are a package of their own.
+const TYPES =
+  '/// <reference types="@nativescript/react-native/types/ios" />\n' +
+  '/// <reference types="@nativescript/types-android" />\n';
+const PROVIDER = 'provideNativeScript()';
+
+/** The `react-native-worklets` each Expo SDK bundles, by its major; the template's SDK otherwise. */
+const WORKLETS = { 57: '0.10.1', 58: '0.13.0' };
+const worklets = (expo) => WORKLETS[/\d+/.exec(expo ?? '')?.[0]] ?? WORKLETS[58];
+
+function byHand(file, what) {
+  logger.warn(`Could not update ${file}: ${what}`);
+}
+
+function addPlugin(tree, root) {
+  const file = joinPathFragments(root, 'app.json');
+  const text = tree.read(file, 'utf-8');
+  if (text === null) return byHand(file, 'it does not exist.');
+  const config = JSON.parse(text);
+  const expo = (config.expo ??= {});
+  const plugins = (expo.plugins ??= []);
+  const named = (plugin) => (Array.isArray(plugin) ? plugin[0] : plugin);
+  if (plugins.some((plugin) => named(plugin) === '@ng-native/nativescript')) return;
+  plugins.push('@ng-native/nativescript');
+  tree.write(file, `${JSON.stringify(config, null, 2)}\n`);
+}
+
+/** Where the `mount(...)` call's parentheses close, counting brackets; -1 if they never do. */
+function callEnd(source, open) {
+  let depth = 0;
+  for (let at = open; at < source.length; at++) {
+    if ('([{'.includes(source[at])) depth++;
+    else if (')]}'.includes(source[at]) && --depth === 0) return at;
+  }
+  return -1;
+}
+
+const IMPORTED =
+  /\bimport\s*\{[^}]*\bprovideNativeScript\b[^}]*\}\s*from\s*['"]@ng-native\/nativescript['"]/;
+
+function addProvider(tree, root) {
+  const file = joinPathFragments(root, 'src/main.ts');
+  const main = tree.read(file, 'utf-8');
+  if (main === null) return byHand(file, 'it does not exist.');
+  if (main.includes(PROVIDER)) return;
+  const imports = [...main.matchAll(/^import .+;$/gm)];
+  const options = /(\bmount\([^\n]*\{\n)([ \t]*)/.exec(main);
+  const open = options ? options.index + options[0].indexOf('(') : -1;
+  const end = options ? callEnd(main, open) : -1;
+  if (!imports.length || end < 0) {
+    return byHand(
+      file,
+      `import { provideNativeScript } from '@ng-native/nativescript' and add ${PROVIDER} to the ` +
+        'providers mount is given.',
+    );
+  }
+  // Only a providers list inside the call: one elsewhere in the file is not the app's.
+  const call = main.slice(open, end);
+  const listed = /(\bproviders:\s*\[)/.exec(call);
+  // A second providers key would replace the app's own, so one that is not a list is left alone.
+  if (!listed && /\bproviders\s*[:,}]/.test(call)) {
+    return byHand(file, `add ${PROVIDER} to the providers mount is given.`);
+  }
+  const edited = listed
+    ? call.replace(listed[0], `${listed[1]}${PROVIDER}, `)
+    : call.replace(
+        options[0].slice(options[0].indexOf('(')),
+        (found) => `${found}${options[2]}providers: [${PROVIDER}],\n${options[2]}`,
+      );
+  const updated = main.slice(0, open) + edited + main.slice(end);
+  if (IMPORTED.test(updated)) return tree.write(file, updated);
+  const last = imports.at(-1);
+  const at = updated.indexOf(last[0]) + last[0].length;
+  const imported = "\nimport { provideNativeScript } from '@ng-native/nativescript';";
+  tree.write(file, updated.slice(0, at) + imported + updated.slice(at));
+}
+
+async function nativescript(tree, options) {
+  const app = getProjects(tree).get(options.project);
+  if (!app) throw new Error(`The workspace has no project called "${options.project}".`);
+  addPlugin(tree, app.root);
+  addProvider(tree, app.root);
+  const types = joinPathFragments(app.root, 'src/nativescript.d.ts');
+  if (!tree.exists(types)) tree.write(types, TYPES);
+
+  const own = joinPathFragments(app.root, 'package.json');
+  const manifest = usesWorkspaces(tree) && tree.exists(own) ? own : 'package.json';
+  const install = addDependenciesToPackageJson(
+    tree,
+    {
+      '@ng-native/nativescript': native.dependencies['@ng-native/components'],
+      '@nativescript/react-native': '^9.1.2',
+      'react-native-worklets': worklets(readJson(tree, manifest).dependencies?.expo),
+    },
+    { '@nativescript/types-android': '^9.1.1' },
+    manifest,
+  );
+  if (!options.skipFormat) await formatFiles(tree);
+  return options.skipInstall ? () => {} : () => (install(), installPackagesTask(tree));
+}
+
+module.exports = { nativescript, default: nativescript };

package/nativescript/schema.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NgNativeNxNativeScript",
+  "title": "NativeScript in an Angular Native app",
+  "description": "Sets up @ng-native/nativescript in an Angular Native app: the packages, the config plugin, the iOS types and provideNativeScript().",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The Angular Native app.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "Which app should NativeScript be set up in?",
+      "x-dropdown": "projects"
+    },
+    "skipInstall": {
+      "type": "boolean",
+      "description": "Write the files without installing.",
+      "default": false
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Leave the generated files unformatted.",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/nx",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Nx generators for Angular Native: nx add, an Expo app project whose targets run it, and native libraries and components.",
   "keywords": [
     "angular",
@@ -29,6 +29,7 @@
       "@ng-native/icons",
       "@ng-native/metro",
       "@ng-native/migrate",
+      "@ng-native/nativescript",
       "@ng-native/nx",
       "@ng-native/platform",
       "@ng-native/router",
@@ -40,7 +41,7 @@
     ]
   },
   "dependencies": {
-    "@ng-native/migrate": "0.18.0",
+    "@ng-native/migrate": "0.18.2",
     "@nx/devkit": "^23.0.0 || ^24.0.0",
     "minimatch": "^10.0.0",
     "semver": "^7.7.0"
@@ -85,6 +86,6 @@
   },
   "scripts": {
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "node --test \"*.test.ts\" \"{init,application,sync,library,component,migrations,tailwind}/*.test.ts\""
+    "test": "node --test \"*.test.ts\" \"{init,application,sync,library,component,migrations,tailwind,nativescript}/*.test.ts\""
   }
 }