Update the build command to use tsc directly, pick targets based off package.json, and integrate codegen

packages/framework/eslint-config-rules/package.json

@@ -15,7 +15,7 @@
   "license": "MIT",
   "dependencies": {
     "@microsoft/eslint-plugin-sdl": "^1.1.0",
-    "@rnx-kit/eslint-plugin": "^0.4.0"
+    "@rnx-kit/eslint-plugin": "^0.8.6"
   },
   "devDependencies": {
     "@types/eslint": "^9.0.0",

packages/utils/test-tools/package.json

@@ -3,8 +3,14 @@
   "version": "0.1.1",
   "description": "Tools and mocks for testing components using jest",
   "main": "lib-commonjs/index.js",
-  "module": "src/index.ts",
+  "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    }
+  },
   "private": true,
   "scripts": {
     "build": "fluentui-scripts build",

scripts/babel.config.js

@@ -1,13 +1,2 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    '@babel/preset-react',
-    '@babel/preset-typescript',
-    ['module:@react-native/babel-preset', { runtime: 'classic' }],
-  ],
-  plugins: [
-    ['@babel/plugin-proposal-private-property-in-object', { loose: false }],
-    ['@babel/plugin-proposal-class-properties', { loose: false }],
-    ['@babel/plugin-transform-private-methods', { loose: false }],
-  ],
-};
+const { configureBabel } = require('./src/configs/configureBabel');
+module.exports = configureBabel();

scripts/dynamic.extensions.mjs

@@ -1,46 +1,79 @@
+// @ts-check
+
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
 /**
- * @param {Object} workspace           The package currently being processed
- * @param {string} workspace.cwd       Path of the current package
- * @param {Object} workspace.manifest  The content of `package.json`
- * @returns {{
- *   dependencies?: Record<string, string>;
- *   peerDependencies?: Record<string, string>;
- *   peerDependenciesMeta?: Record<string, { optional?: boolean }>;
- * }}
+ * @typedef {() => boolean} ConditionalCheck
  */
 
 /**
- * These are the dependencies we want to ensure exist in each folder. They will not override
- * the dependencies in the package.json if already present.
+ * Get the package.json manifest for a given folder.
+ * @param {string} folder
+ * @returns {import('@rnx-kit/tools-packages').PackageInfo['manifest']}
  */
-const scriptDependencies = getScriptFolderDependencies(['typescript', 'eslint', 'just-scripts']);
+function getPackageManifest(folder) {
+  const manifestPath = path.join(folder, 'package.json');
+  return JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+}
+
+// Get the versions once, so we don't query again on each package
+const scriptFolder = path.dirname(fileURLToPath(import.meta.url));
+const scriptManifest = getPackageManifest(scriptFolder);
+const rootManifest = getPackageManifest(path.dirname(scriptFolder));
+// all merged versions from the root and script manifests, scripts having precedence
+const baseVersions = {
+  ...rootManifest?.devDependencies,
+  ...rootManifest?.dependencies,
+  ...scriptManifest?.devDependencies,
+  ...scriptManifest?.dependencies,
+};
 
 /**
- * Get the dependencies for the script folder, both `devDependencies` and `dependencies`
- * @param {string[]} keys - The keys of the dependencies to include
- * @returns {Record<string, string>} A map of dependencies for the script folder
+ * Conditionally add a dependency to the given dependencies object if it is not already present
+ * @param {string[]} depsToAdd
+ * @param {import('@rnx-kit/tools-packages').PackageInfo['manifest']} manifest
+ * @param {ConditionalCheck | boolean | undefined} condition
+ * @returns {Record<string, string>}
  */
-function getScriptFolderDependencies(keys) {
-  const pkgJsonName = path.join(path.dirname(fileURLToPath(import.meta.url)), './package.json');
-  const pkgJson = JSON.parse(fs.readFileSync(pkgJsonName, 'utf-8'));
-  const mergedDeps = { ...pkgJson.devDependencies, ...pkgJson.dependencies };
-  return Object.fromEntries(Object.entries(mergedDeps).filter(([key]) => keys.includes(key)));
+function conditionallyAdd(depsToAdd, manifest, condition) {
+  /** @type {Record<string, string>} */
+  const newDeps = {};
+  if (!condition || (typeof condition === 'function' ? condition() : condition)) {
+    for (const dep of depsToAdd) {
+      if (!manifest.dependencies?.[dep] && !manifest.devDependencies?.[dep]) {
+        if (baseVersions[dep]) {
+          // If the dependency is not already present, and the extra condition is met, add it
+          newDeps[dep] = baseVersions[dep];
+        } else {
+          // If the dependency is not found in the base versions, log a warning
+          console.warn(`Dependency ${dep} not found in base versions. Skipping dynamic add.`);
+        }
+      }
+    }
+  }
+  return newDeps;
+}
+
+function addPrettier(manifest) {
+  return manifest && manifest.scripts && (manifest.scripts.prettier || manifest.scripts['prettier-fix']);
 }
 
+/**
+ * Get the dynamic dependencies for the given package given the package root directory and its manifest.
+ * @param {{cwd: string, manifest: import('@rnx-kit/tools-packages').PackageInfo['manifest']}} param0
+ * @returns { { dependencies: Record<string, string> } }
+ */
 export default function ({ cwd, manifest }) {
   const dependenciesToAdd = {};
-  Object.keys(scriptDependencies).forEach((key) => {
-    if ((manifest?.dependencies && manifest.dependencies[key]) || (manifest?.devDependencies && manifest.devDependencies[key])) {
-      // If the dependency already exists in the package.json, skip it
-      return;
-    }
-    dependenciesToAdd[key] = scriptDependencies[key];
-  });
+  const enableLinting = Boolean(manifest.scripts && manifest.scripts.lint);
+
   return {
-    dependencies: dependenciesToAdd,
+    dependencies: {
+      ...conditionallyAdd(['typescript'], manifest, () => fs.existsSync(path.join(cwd, 'tsconfig.json'))),
+      ...conditionallyAdd(['eslint'], manifest, enableLinting),
+      ...conditionallyAdd(['prettier'], manifest, () => addPrettier(manifest)),
+    },
   };
 }

scripts/package.json

@@ -18,19 +18,19 @@
     "url": "https://github.com/microsoft/fluentui-react-native.git",
     "directory": "scripts"
   },
-  "peerDependencies": {
-    "just-scripts": "^2.3.2",
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0",
-    "react-native-svg": "^15.0.0 || ^15.4.0"
-  },
   "devDependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-private-methods": "^7.27.1",
     "@react-native-community/cli": "^13.6.4",
     "@react-native-community/cli-platform-android": "^13.6.4",
     "@react-native-community/cli-platform-ios": "^13.6.4",
     "@react-native/metro-babel-transformer": "^0.74.0",
     "@react-native/metro-config": "^0.74.0",
     "@rnx-kit/jest-preset": "^0.2.0",
+    "@rnx-kit/tools-packages": "^0.1.1",
+    "@rnx-kit/tools-typescript": "^0.1.1",
     "@types/es6-collections": "^0.5.29",
     "@types/es6-promise": "0.0.32",
     "@types/jest": "^29.0.0",
@@ -40,6 +40,7 @@
     "depcheck": "^1.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^7.0.1",
+    "glob": "^10.0.0",
     "jest": "^29.2.1",
     "jest-diff": "^27.0.0",
     "jsdom": "^25.0.0",
@@ -94,5 +95,10 @@
         "svg"
       ]
     }
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-native": "^0.73.0 || ^0.74.0",
+    "react-native-svg": "^15.0.0 || ^15.4.0"
   }
 }

scripts/src/configs/configureBabel.js

@@ -0,0 +1,30 @@
+/** @typedef {{ esmodule?: boolean, estarget?: string, jsxRuntime?: boolean }} BabelConfigOptions */
+
+/**
+ * @param {BabelConfigOptions} options
+ * @param {import('@babel/core').TransformOptions} [mixin] - Additional Babel configuration options to mix in.
+ * @returns {import('@babel/core').TransformOptions} - The complete Babel configuration object.
+ */
+module.exports.configureBabel = function (/** @type {BabelConfigOptions} */ options = {}, mixin = {}) {
+  const { esmodule, estarget, jsxRuntime } = options;
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          modules: esmodule ? false : 'auto',
+          targets: { node: 'current' },
+        },
+      ],
+      '@babel/preset-react',
+      '@babel/preset-typescript',
+      ['module:@react-native/babel-preset', { runtime: jsxRuntime ? 'automatic' : 'classic' }],
+    ],
+    plugins: [
+      ['@babel/plugin-proposal-private-property-in-object', { loose: false }],
+      ['@babel/plugin-proposal-class-properties', { loose: false }],
+      ['@babel/plugin-transform-private-methods', { loose: false }],
+    ],
+    ...mixin,
+  };
+};

scripts/src/justPreset.ts

@@ -8,8 +8,7 @@ const fs = require('fs');
 const { clean } = require('./tasks/clean');
 const { copy } = require('./tasks/copy');
 const { jest } = require('./tasks/jest');
-const { ts } = require('./tasks/ts');
-const { codegenNativeComponents } = require('./tasks/codegenNativeComponents')
+const { build } = require('./tasks/build');
 const { eslint } = require('./tasks/eslint');
 const { depcheckTask } = require('./tasks/depcheck');
 const { checkForModifiedFiles } = require('./tasks/checkForModifiedFilesTask');
@@ -33,25 +32,14 @@ export function preset() {
   task('clean', clean);
   task('copy', copy);
   task('jest', jest);
-  task('codegenNativeComponents', codegenNativeComponents);
-  task('ts:commonjs', ts.commonjs);
-  task('ts:esm', ts.esm);
+  task('ts', build);
   task('eslint', eslint);
-  task('ts:commonjs-only', ts.commonjsOnly);
   task('prettier', () =>
     argv().fix
       ? prettierTask({ files: ['src/.'], ignorePath: path.join(findGitRoot(process.cwd()), '.prettierignore') })
       : prettierCheckTask({ files: ['src/.'], ignorePath: path.join(findGitRoot(process.cwd()), '.prettierignore') }),
   );
   task('checkForModifiedFiles', checkForModifiedFiles);
-  task('tsall', parallel('ts:commonjs', 'ts:esm'));
-  task(
-    'ts',
-    series(
-      condition('ts:commonjs-only', () => !!argv().commonjs),
-      condition('tsall', () => !argv().commonjs),
-    ),
-  );
 
   task(
     'validate',
@@ -61,19 +49,7 @@ export function preset() {
     ),
   );
 
-  task(
-    'build:node-lib',
-    series(
-      'clean',
-      'copy',
-      series(
-        condition('validate', () => !argv().min),
-        'ts:commonjs-only',
-      ),
-    ),
-  );
-
-  task('build', series('clean', 'copy', 'ts', 'codegenNativeComponents'));
+  task('build', series('clean', 'copy', 'ts'));
 
   task('depcheck', depcheckTask);