@ng-native/testing 0.0.1 → 0.1.1

package/dist/worklets-library.js

@@ -0,0 +1,23 @@
+/**
+ * What a test gets for `react-native-worklets`, whose source Node cannot load. There is one
+ * runtime in a test, so scheduling a function on either runtime calls it at once.
+ */
+export function scheduleOnRN(fn, ...args) {
+    fn(...args);
+}
+export function scheduleOnUI(fn, ...args) {
+    fn(...args);
+}
+export function runOnUISync(fn, ...args) {
+    return fn(...args);
+}
+export function runOnJS(fn) {
+    return fn;
+}
+export function runOnUI(fn) {
+    return fn;
+}
+export function isWorkletFunction(_value) {
+    return false;
+}
+//# sourceMappingURL=worklets-library.js.map

package/dist/worklets-library.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"worklets-library.js","sourceRoot":"","sources":["../src/worklets-library.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAsB,EAA2B,EAAE,GAAG,IAAO;IACvF,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC;AACd,CAAC;AAED,MAAM,UAAU,YAAY,CAAsB,EAA2B,EAAE,GAAG,IAAO;IACvF,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC;AACd,CAAC;AAED,MAAM,UAAU,WAAW,CAAyB,EAAqB,EAAE,GAAG,IAAO;IACnF,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,OAAO,CAAyB,EAAqB;IACnE,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,OAAO,CAAyB,EAAqB;IACnE,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,MAAe;IAC/C,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/**\n * What a test gets for `react-native-worklets`, whose source Node cannot load. There is one\n * runtime in a test, so scheduling a function on either runtime calls it at once.\n */\nexport function scheduleOnRN<A extends unknown[]>(fn: (...args: A) => unknown, ...args: A): void {\n  fn(...args);\n}\n\nexport function scheduleOnUI<A extends unknown[]>(fn: (...args: A) => unknown, ...args: A): void {\n  fn(...args);\n}\n\nexport function runOnUISync<A extends unknown[], R>(fn: (...args: A) => R, ...args: A): R {\n  return fn(...args);\n}\n\nexport function runOnJS<A extends unknown[], R>(fn: (...args: A) => R): (...args: A) => R {\n  return fn;\n}\n\nexport function runOnUI<A extends unknown[], R>(fn: (...args: A) => R): (...args: A) => R {\n  return fn;\n}\n\nexport function isWorkletFunction(_value: unknown): boolean {\n  return false;\n}\n"]}

package/package.json

@@ -1,12 +1,95 @@
 {
   "name": "@ng-native/testing",
-  "version": "0.0.1",
-  "description": "Reserved for ng-native. The first release follows.",
+  "version": "0.1.1",
+  "description": "Test Angular Native components in Node with no simulator: a fake Fabric, Testing Library queries and events, and Vitest and node:test integration.",
+  "keywords": [
+    "angular",
+    "react-native",
+    "angular-native",
+    "ios",
+    "android",
+    "fabric",
+    "native",
+    "testing",
+    "testing-library",
+    "vitest",
+    "node-test"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./vitest": {
+      "types": "./runner/vitest.d.mts",
+      "default": "./runner/vitest.mjs"
+    },
+    "./register": "./runner/register.mjs",
+    "./loader": "./runner/loader.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ng-native/metro": "0.1.1",
+    "@ng-native/platform": "0.1.1",
+    "@ng-native/fabric": "0.1.1"
+  },
+  "peerDependencies": {
+    "@angular/compiler": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+    "vitest": "^4.0.8 || ^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/compiler": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "vitest": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/common": "22.2.0",
+    "@angular/compiler": "22.2.0",
+    "@angular/core": "22.2.0",
+    "@angular/forms": "22.2.0",
+    "@angular/router": "22.2.0",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2",
+    "@ng-native/components": "0.1.1",
+    "@ng-native/router": "0.1.1"
+  },
+  "nx": {
+    "tags": [
+      "scope:testing",
+      "layer:testing"
+    ]
+  },
   "license": "MIT",
+  "homepage": "https://ng-native.com/packages/testing",
+  "bugs": {
+    "url": "https://github.com/ng-native/ng-native/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ng-native/ng-native.git",
     "directory": "packages/testing"
   },
-  "homepage": "https://ng-native.com/packages/testing"
+  "files": [
+    "dist",
+    "runner"
+  ],
+  "scripts": {
+    "build": "ngc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --import ./runner/register.mjs --test \"src/**/*.node.test.ts\" && vitest run"
+  },
+  "types": "dist/index.d.ts"
 }

package/runner/compile.mjs

@@ -0,0 +1,82 @@
+/**
+ * The one decision both test runners make about a file: does Angular have to touch it before it
+ * can run, and if so, what does it become.
+ *
+ * Shared by the Node hook (`loader.mjs`) and the Vitest plugin (`vitest.mjs`) so the two cannot
+ * drift, and both delegate the compiling itself to `@ng-native/metro`'s `transformAngular` so a
+ * test runs what Metro would have put in the app bundle rather than a lookalike.
+ *
+ * Two kinds of file need it, for the same reason - nothing downstream understands Angular:
+ *
+ * - A TypeScript source with an Angular decorator. Node's type stripping and Vite's both erase
+ *   types and nothing else, and a decorator is syntax neither accepts. That covers an app's own
+ *   components, a test file that declares one inline, and the `@ng-native/*` packages' source in
+ *   this workspace.
+ * - A package published partial-compiled. `@angular/common`, `@angular/router`, a published
+ *   `@ng-native/*` package and most Angular libraries on npm are full of `ɵɵngDeclare*` calls, which compile eagerly at module evaluation
+ *   and throw "needs to be compiled using the JIT compiler" without the linker.
+ */
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+const require = createRequire(import.meta.url);
+
+const IS_SOURCE = /\.m?tsx?$/;
+const HAS_ANGULAR_DECORATOR = /@(Component|Directive|Pipe|Injectable|NgModule|Service)\s*\(/;
+/** Metro's own test, so a test links exactly the files an app bundle would. */
+const IS_PARTIAL_COMPILED =
+  /ɵɵngDeclare(Component|Directive|Pipe|Injectable|NgModule|Service|Factory)/;
+
+/** @type {((source: string, file: string, options?: { platform?: string }) => { code: string, dependencies: string[], map?: string, mapLineOffset?: number }) | undefined} */
+let transformAngular;
+
+/**
+ * @param {string} source
+ * @param {string} file
+ */
+export function needsAngular(source, file) {
+  return IS_SOURCE.test(file)
+    ? HAS_ANGULAR_DECORATOR.test(source)
+    : IS_PARTIAL_COMPILED.test(source);
+}
+
+/**
+ * Compile or link one file. The output of a decorated source is still TypeScript: the runner's
+ * own type stripping takes it from there, as Metro's babel preset does in an app.
+ *
+ * `dependencies` are the `templateUrl` and `styleUrls` files, as absolute paths, for a watcher.
+ *
+ * @param {string} source
+ * @param {string} file
+ * @param {{ platform?: string }} [options] `platform: 'web'` compiles as Metro does for a web view.
+ * @returns {{ code: string, dependencies: string[], map?: string }}
+ */
+export function compileAngular(source, file, options = {}) {
+  transformAngular ??= require('@ng-native/metro/angular-transform.cjs').transformAngular;
+  const result = transformAngular(source, file, options);
+  // Metro gets a module-graph edge to each template and stylesheet, as a bare `import "./x.html"`
+  // it erases itself. Neither runner here knows what to do with one, and the content has already
+  // been compiled in, so the edges are dropped. They are exactly the first `mapLineOffset` lines,
+  // which also leaves the source map lined up with the code again.
+  const code = result.mapLineOffset
+    ? result.code.split('\n').slice(result.mapLineOffset).join('\n')
+    : result.code;
+  const directory = path.dirname(file);
+  return {
+    code,
+    dependencies: result.dependencies.map((dependency) => path.resolve(directory, dependency)),
+    map: result.map,
+  };
+}
+
+/**
+ * `require('./logo.png')`, which Metro turns into an asset id. An ES module has no `require` under
+ * Vitest or under Node, so the module would throw as it is evaluated; it gets `{ testUri }`
+ * instead, as under React Native's Jest preset, which is enough for a component to render and for
+ * a test to see which image. Only an app's own files: a package's are left as they are.
+ */
+const ASSET =
+  /\brequire\(\s*(['"])([^'"]+\.(?:png|jpe?g|gif|webp|bmp|svg|ttf|otf|mp3|mp4|wav|m4a|mov|json5?))\1\s*\)/g;
+/** @param {string} code */
+export const stubAssets = (code) =>
+  code.replace(ASSET, (_, _quote, path) => `({ testUri: ${JSON.stringify(path)} })`);

package/runner/loader.mjs

@@ -0,0 +1,73 @@
+/**
+ * A Node module hook that compiles Angular for `node --test`, the way the Metro transformer does
+ * for the app. `register.mjs` installs it; see `compile.mjs` for which files need it and why.
+ *
+ * One more job than the Vitest plugin has: Node refuses to strip types from a `.ts` file under
+ * `node_modules` at all, and that is exactly where an installed `@ng-native/*` package's source
+ * lives. So every `.ts` there is loaded here, compiled if it is decorated and stripped either way.
+ *
+ * `initialize` takes `{ skip: string[] }` - URL fragments whose TypeScript is left to Node, for a
+ * suite that compiles some files itself. This workspace's integration suite uses it for its
+ * fixtures and generated copies; an app has no reason to.
+ *
+ * `web: string[]` does the same for files compiled as Metro compiles for the browser - a
+ * `<dom-component>`'s own component, whose CSS a web view applies rather than native.
+ */
+import { readFileSync } from 'node:fs';
+import { stripTypeScriptTypes } from 'node:module';
+import { fileURLToPath } from 'node:url';
+import { compileAngular, needsAngular, stubAssets } from './compile.mjs';
+
+/** @type {string[]} */
+let skip = [];
+/** @type {string[]} */
+let web = [];
+
+/** @param {{ skip?: string[], web?: string[] } | undefined} data */
+export function initialize(data) {
+  skip = data?.skip ?? [];
+  web = data?.web ?? [];
+}
+
+/**
+ * @param {string} url
+ * @param {{ format?: string }} context
+ * @param {(url: string, context: object) => Promise<{ format?: string, source?: string | ArrayBuffer | Uint8Array }>} nextLoad
+ */
+export async function load(url, context, nextLoad) {
+  const installed = url.includes('/node_modules/');
+
+  if (url.startsWith('file:') && url.endsWith('.ts') && !skip.some((part) => url.includes(part))) {
+    const loaded = loadTypeScript(fileURLToPath(url), installed);
+    if (loaded) return loaded;
+  }
+
+  const result = await nextLoad(url, context);
+  if (!installed || result.format !== 'module') return result;
+
+  // Any package, not only Angular's own: `@ng-icons/core` ships partial-compiled too.
+  const source = result.source?.toString();
+  if (!source || !needsAngular(source, url)) return result;
+  return { ...result, source: compileAngular(source, fileURLToPath(url)).code };
+}
+
+/**
+ * A `.ts` file this hook has to handle itself: decorated, installed, or requiring an asset. Any
+ * other is left to Node, which strips types faster than this does.
+ *
+ * @param {string} file
+ * @param {boolean} installed
+ */
+function loadTypeScript(file, installed) {
+  const read = readFileSync(file, 'utf8');
+  const source = installed ? read : stubAssets(read);
+  const decorated = needsAngular(source, file);
+  if (!decorated && !installed && source === read) return null;
+  const platform = web.some((part) => file.includes(part)) ? 'web' : undefined;
+  const code = decorated ? compileAngular(source, file, { platform }).code : source;
+  return {
+    format: 'module',
+    source: stripTypeScriptTypes(code, { mode: 'strip' }),
+    shortCircuit: true,
+  };
+}

package/runner/register.mjs

@@ -0,0 +1,17 @@
+/**
+ * `node --import @ng-native/testing/register --test` - compiles Angular for Node's own test
+ * runner. See `loader.mjs`.
+ *
+ * The animation globals go in first, and have to: `@angular/core` decides whether `animate.enter`
+ * and `animate.leave` do anything at all when it is first evaluated, so this is the last moment
+ * that answer can be influenced. An app does the same thing with a Metro polyfill. `ngDevMode`
+ * is left undefined, which Angular reads as dev mode - what a Metro dev build runs - and
+ * `__DEV__` is true for the same reason.
+ */
+import { createRequire, register } from 'node:module';
+
+createRequire(import.meta.url)('@ng-native/metro/polyfills/animation-globals.js');
+// Metro's prelude defines this in every bundle, and app code reads it bare.
+globalThis.__DEV__ ??= true;
+
+register('./loader.mjs', import.meta.url);

package/runner/setup.mjs

@@ -0,0 +1,10 @@
+/**
+ * The setup file `ngNative()` adds to Vitest: the globals the Metro preset installs as polyfills,
+ * in place before a test file evaluates `@angular/core`. See `register.mjs` for why that order
+ * matters and why `ngDevMode` is left alone.
+ */
+import { createRequire } from 'node:module';
+
+createRequire(import.meta.url)('@ng-native/metro/polyfills/animation-globals.js');
+// Metro's prelude defines this in every bundle, and app code reads it bare.
+globalThis.__DEV__ ??= true;

package/runner/vitest.d.mts

@@ -0,0 +1,12 @@
+import type { Plugin } from 'vitest/config';
+
+export interface NgNativeOptions {
+  /**
+   * More packages for Vitest to process rather than hand to Node, for an Angular library that
+   * ships partial-compiled. `@angular/*`, `@ng-native/*` and `@ng-icons/*` are always included.
+   */
+  inline?: (string | RegExp)[];
+}
+
+/** Compile Angular for Vitest: AOT for decorated sources, the linker for partial-compiled packages. */
+export declare function ngNative(options?: NgNativeOptions): Plugin;

package/runner/vitest.mjs

@@ -0,0 +1,142 @@
+/**
+ * `ngNative()`: the Vite plugin that lets Vitest run Angular Native code in Node, with no DOM.
+ *
+ * Four things, each of which Vitest would otherwise get wrong on its own:
+ *
+ * - It compiles. Every decorated `.ts` goes through `@ng-native/metro`'s AOT transform and every
+ *   partial-compiled package through the linker (see `compile.mjs`), before Vite strips types.
+ * - It inlines. Vitest hands `node_modules` straight to Node by default, which would mean an
+ *   `@ng-native/*` package's `.ts` source reaching a runtime that refuses to strip types under
+ *   `node_modules`, and `@angular/*` reaching it unlinked. Inlined, both come through the plugin.
+ * - It adds a setup file with the globals Angular reads as it is first evaluated, and runs ES
+ *   modules without the CommonJS variables Vitest otherwise injects into them.
+ * - It stubs assets. With no `require`, an app's `require('./logo.png')` would throw; it becomes
+ *   `{ testUri }` instead. And it stands in for the gesture and animation entry points, whose
+ *   React Native source Node cannot load (`STAND_INS`).
+ *
+ * The environment is Vitest's default, `node`. There is no DOM to emulate: the renderer talks to
+ * a fake Fabric, and jsdom would only give Angular a `document` to misread.
+ */
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defaultClientConditions, defaultServerConditions } from 'vite';
+import { compileAngular, needsAngular, stubAssets } from './compile.mjs';
+
+const SETUP = fileURLToPath(new URL('./setup.mjs', import.meta.url));
+
+/**
+ * Entry points a test gets a stand-in for, because what they import is React Native source that
+ * Node cannot load: the gestures and reanimated entry points of `@ng-native/components`, the
+ * gesture library itself, which an app imports for `Gesture`, and Reanimated and worklets, which
+ * an app imports for `withTiming` and `scheduleOnRN`. See each stand-in for what it does and does
+ * not do.
+ */
+const STAND_INS = {
+  '@ng-native/components/gestures': fileURLToPath(new URL('../src/gestures.ts', import.meta.url)),
+  'react-native-gesture-handler': fileURLToPath(
+    new URL('../src/gesture-handler.ts', import.meta.url),
+  ),
+  '@ng-native/components/reanimated': fileURLToPath(
+    new URL('../src/reanimated.ts', import.meta.url),
+  ),
+  'react-native-reanimated': fileURLToPath(
+    new URL('../src/reanimated-library.ts', import.meta.url),
+  ),
+  'react-native-worklets': fileURLToPath(new URL('../src/worklets-library.ts', import.meta.url)),
+};
+
+/**
+ * ponytail: inlining is by package name, so a third-party Angular library other than these has
+ * to be named in `inline` by the app. Linking whatever turns out to be partial-compiled would
+ * mean inlining every dependency, which is slower and breaks CommonJS packages.
+ */
+const INLINE = [
+  /\/node_modules\/@angular\//,
+  /\/node_modules\/@ng-native\//,
+  /\/node_modules\/@ng-icons\//,
+];
+
+/**
+ * `compilerOptions.customConditions` from the project's `tsconfig.json`, less `react-native`,
+ * which would send a test to React Native's Flow source.
+ *
+ * @param {string} root
+ * @returns {string[]}
+ */
+function tsconfigConditions(root) {
+  try {
+    const conditions = JSON.parse(readFileSync(path.join(root, 'tsconfig.json'), 'utf8'))
+      .compilerOptions?.customConditions;
+    return Array.isArray(conditions) ? conditions.filter((c) => c !== 'react-native') : [];
+  } catch {
+    return [];
+  }
+}
+
+/** @param {string[]} conditions */
+function withConditions(conditions) {
+  if (conditions.length === 0) return {};
+  return {
+    resolve: { conditions: [...conditions, ...defaultClientConditions] },
+    ssr: { resolve: { conditions: [...conditions, ...defaultServerConditions] } },
+  };
+}
+
+/**
+ * `injectCjsGlobals: false` again, for Vitest 4, which has no such option and hands every module
+ * a `require` regardless. A module that probes for one then requires React Native's Flow source.
+ * A `var` of the same name shadows the one Vitest passes in, and is harmless where there is none.
+ * On the first line, so every other line keeps its number. ES modules only: a CommonJS file needs
+ * the real thing.
+ *
+ * @param {string} code
+ * @param {string} file
+ */
+function hideRequire(code, file) {
+  if (!/\.(ts|mts|mjs)$/.test(file) || !/\brequire\b/.test(code)) return code;
+  // A module that makes its own, with `createRequire`, already sees the one it means.
+  if (/\b(?:const|let|var|function|class)\s+require\b/.test(code)) return code;
+  return `var require = undefined; ${code}`;
+}
+
+/**
+ * @param {{ inline?: (string | RegExp)[] }} [options]
+ * @returns {import('vitest/config').Plugin}
+ */
+export function ngNative(options = {}) {
+  return {
+    name: 'ng-native',
+    enforce: 'pre',
+    config: (config) => ({
+      // The conditions the project's tsconfig resolves packages with, ahead of Vite's own, so a
+      // test takes the same entry tsc does: Nx's TypeScript preset exports a library's source
+      // only under one.
+      ...withConditions(tsconfigConditions(config?.root ?? process.cwd())),
+      test: {
+        setupFiles: [SETUP],
+        // Vitest hands every ES module a CommonJS `require` by default, for compatibility with an
+        // older runner. Code here checks for one to tell a device from Node: given one, it
+        // requires `react-native`, whose Flow source nothing in a test can parse. Off, a module
+        // sees what it sees under Node itself.
+        injectCjsGlobals: false,
+        server: { deps: { inline: [...INLINE, ...(options.inline ?? [])] } },
+      },
+    }),
+    resolveId(source) {
+      return Object.hasOwn(STAND_INS, source) ? STAND_INS[source] : null;
+    },
+    transform(source, id) {
+      const file = id.split('?')[0];
+      if (file.startsWith('\0') || !/\.m?[jt]s$/.test(file)) return null;
+      const code = file.includes('/node_modules/') ? source : stubAssets(source);
+      if (!needsAngular(code, file)) {
+        const hidden = hideRequire(code, file);
+        return hidden === source ? null : { code: hidden, map: null };
+      }
+      const result = compileAngular(code, file);
+      for (const dependency of result.dependencies) this.addWatchFile(dependency);
+      return { code: hideRequire(result.code, file), map: result.map ?? null };
+    },
+  };
+}