@symbiote-native/angular 0.2.0 → 0.3.0

package/babel-linker.cjs

@@ -0,0 +1,8 @@
+// Normalizes @angular/compiler-cli/linker/babel's export shape — depending on how a
+// consumer's Metro/Babel setup loads it, the plugin lands as either the plugin function itself
+// or a `{ default: plugin }` wrapper — so a consumer's babel.config.js just requires this
+// instead of re-deriving the `.default ?? angularLinker` fallback itself. See the
+// angular-adapter-build skill for the full ngc → linker AOT pipeline this plugs into.
+const angularLinkerModule = require('@angular/compiler-cli/linker/babel');
+
+module.exports = angularLinkerModule.default ?? angularLinkerModule;

package/bin/symbiote-angular-dev.cjs

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+// Cross-platform replacement for the old per-app dev-with-watch.sh: Angular needs a pre-Metro
+// AOT compile (ngc), kept in sync via `ngc --watch` while developing (see the angular-adapter
+// skill, §4). Metro itself must stay the FOREGROUND process — it reads raw keypresses
+// (r/j/d/...) straight off stdin, and any wrapper that pipes stdin through itself
+// (concurrently, npm-run-all, ...) breaks that raw-mode read. So ngc runs as a plain background
+// child process, never a stdin-owning process manager. `shell: true` resolves `ngc`/
+// `react-native` off PATH exactly like the bash script did — npm/pnpm/yarn already prepend
+// every `node_modules/.bin` up the tree to PATH for any script invocation, this one included.
+const { spawn, spawnSync } = require('node:child_process');
+
+const TSCONFIG = 'tsconfig.angular.json';
+const metroArgs = process.argv.slice(2);
+
+// Without watchman, Metro falls back to chokidar's native fs.watch, which opens one OS file
+// handle per watched directory. This project's watchFolders spans the whole monorepo, so that
+// reliably blows past macOS's per-process fd limit (EMFILE) — doubly likely here since ngc
+// --watch adds a second watcher on top of Metro's own. Warn instead of letting everyone
+// individually debug a native stack trace down to this one missing binary.
+const watchmanCheck = spawnSync('watchman', ['--version'], { stdio: 'ignore', shell: true });
+if (watchmanCheck.status !== 0) {
+  console.warn(
+    '[symbiote-angular-dev] watchman not found on PATH. Metro will fall back to watching files ' +
+      'itself, which commonly crashes with "EMFILE: too many open files" on a repo this size. ' +
+      'Install it: https://facebook.github.io/watchman/docs/install (macOS: brew install watchman).',
+  );
+}
+
+const initialBuild = spawnSync('ngc', ['-p', TSCONFIG], { stdio: 'inherit', shell: true });
+if (initialBuild.status !== 0) {
+  process.exit(initialBuild.status ?? 1);
+}
+
+const ngcWatch = spawn('ngc', ['-p', TSCONFIG, '--watch'], { stdio: 'inherit', shell: true });
+const metro = spawn('react-native', ['start', ...metroArgs], { stdio: 'inherit', shell: true });
+
+function stopNgcWatch() {
+  ngcWatch.kill();
+}
+
+metro.on('exit', (code) => {
+  stopNgcWatch();
+  process.exit(code ?? 0);
+});
+
+for (const signal of ['SIGINT', 'SIGTERM']) {
+  process.on(signal, () => {
+    stopNgcWatch();
+    metro.kill(signal);
+  });
+}

package/metro-config.cjs

@@ -0,0 +1,49 @@
+// Angular's AOT pipeline needs ONE Metro-side accommodation beyond the plain css-parser
+// transformer: ngc mirrors this app's whole source tree into its own outDir (see
+// tsconfig.angular.base.json's `outDir` convention, "build/angular" by default) but only ever
+// compiles .ts — a relative style import (`import './App.css'`) survives untouched in the
+// compiled .js, still pointing at the ORIGINAL source location, which ngc never copies there.
+// Metro resolves that relative specifier against the COMPILED file's own location
+// (<outDir>/...), so without this it 404s on a file that was never created there. This redirects
+// such an import back to the real source file instead of copying it — a copy would need its own
+// re-copy on every CSS edit during `ngc --watch` (which only re-runs on .ts changes), while this
+// redirect lets Metro's own watchFolders pick up a source-file CSS edit for free. Applies
+// identically to a release `react-native bundle`, which resolves through this same config.
+//
+// watchFolders/extraNodeModules are intentionally NOT included here — those are monorepo-only
+// pnpm-workspace concerns (deduping a single react/@angular/core copy across packages), not
+// relevant to an external app installing @symbiote-native/angular from npm; a consumer keeps
+// those local to their own metro.config.js if it needs them at all. See the
+// symbiote-sfc-style-compiler and angular-adapter-build skills.
+const fs = require('node:fs');
+const path = require('node:path');
+
+function withSymbioteAngularMetroConfig(defaultConfig, projectRoot, { outDir = 'build/angular' } = {}) {
+  const buildRoot = path.join(projectRoot, ...outDir.split('/'));
+
+  return {
+    resolver: {
+      // Teach Metro that a style file is a source file (the transformer above turns it into a
+      // module). scss/sass/less/styl are optional preprocessor sources — see
+      // core/css-parser/src/preprocessors.ts.
+      sourceExts: [...defaultConfig.resolver.sourceExts, 'css', 'scss', 'sass', 'less', 'styl'],
+      resolveRequest: (context, moduleName, platform) => {
+        const isRelativeStyleImport =
+          /^\.\.?\//.test(moduleName) && /\.(css|scss|sass|less|styl)$/.test(moduleName);
+        if (isRelativeStyleImport) {
+          const originDir = path.dirname(context.originModulePath);
+          if (originDir === buildRoot || originDir.startsWith(buildRoot + path.sep)) {
+            const sourceDir = path.join(projectRoot, path.relative(buildRoot, originDir));
+            const sourceFile = path.resolve(sourceDir, moduleName);
+            if (fs.existsSync(sourceFile)) {
+              return { type: 'sourceFile', filePath: sourceFile };
+            }
+          }
+        }
+        return context.resolveRequest(context, moduleName, platform);
+      },
+    },
+  };
+}
+
+module.exports = { withSymbioteAngularMetroConfig };

package/metro-css-parser.cjs

@@ -8,4 +8,7 @@
 // the way a flat classic node_modules would). .cjs, not .js: this package is "type": "module",
 // and Metro's babelTransformerPath loading expects a require()-able module. See the
 // symbiote-sfc-style-compiler skill.
-module.exports = require('@symbiote-native/css-parser');
+// createCssMetroTransformer is a factory, not a ready transformer — Metro's
+// babelTransformerPath needs the actual {transform, getCacheKey} object it returns,
+// not the css-parser package barrel.
+module.exports = require('@symbiote-native/css-parser').createCssMetroTransformer();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/angular",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "SymbioteNative's Angular adapter — a Renderer2/RendererFactory2 with DOM-less bootstrap driving real native iOS/Android views through the same engine as the other adapters.",
   "repository": {
     "type": "git",
@@ -27,20 +27,31 @@
       "react-native": "./build/angular/bootstrap.js",
       "default": "./src/bootstrap.ts"
     },
-    "./metro-css-parser": "./metro-css-parser.cjs"
+    "./metro-css-parser": "./metro-css-parser.cjs",
+    "./metro-config": "./metro-config.cjs",
+    "./babel-linker": "./babel-linker.cjs",
+    "./tsconfig.angular.base.json": "./tsconfig.angular.base.json"
   },
   "files": [
     "src",
     "build",
-    "metro-css-parser.cjs"
+    "bin",
+    "metro-css-parser.cjs",
+    "metro-config.cjs",
+    "babel-linker.cjs",
+    "tsconfig.angular.base.json"
   ],
+  "bin": {
+    "symbiote-angular-dev": "./bin/symbiote-angular-dev.cjs"
+  },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@angular/compiler-cli": "^22",
+    "@symbiote-native/components": "0.2.0",
     "@symbiote-native/engine": "0.1.1",
-    "@symbiote-native/css-parser": "0.1.1",
-    "@symbiote-native/components": "0.2.0"
+    "@symbiote-native/css-parser": "0.2.0"
   },
   "peerDependencies": {
     "@angular/core": ">=20",
@@ -48,7 +59,6 @@
   },
   "devDependencies": {
     "@angular/compiler": "^22",
-    "@angular/compiler-cli": "^22",
     "@angular/core": "^22",
     "@types/node": "^26.0.0",
     "typescript": "~6.0.0",

package/tsconfig.angular.base.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": false,
+    "allowImportingTsExtensions": false,
+    "declaration": false,
+    "sourceMap": true,
+    "lib": ["ES2022", "DOM"],
+    "types": ["node"],
+    "ignoreDeprecations": "6.0",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial",
+    "strictTemplates": true
+  }
+}