Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an experimental tools-typescript package for better react-native builds with typescript #3503

Open
wants to merge 25 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
37578ec
create tools-typescript experimental package
JasonVMo Jan 3, 2025
225d7aa
copy over metro-plugin-typescript code to use as a base
JasonVMo Jan 3, 2025
48f50b1
start moving adapting FURN prototype code to rnx-kit
JasonVMo Jan 14, 2025
7b9b030
Merge remote-tracking branch 'upstream/main' into tools-typescript
JasonVMo Jan 14, 2025
11d43ea
add sanitization of ts inputs
JasonVMo Jan 15, 2025
aaf2181
finish file porting and adaptation
JasonVMo Jan 18, 2025
522d2eb
fix platform multiplexing and add tests
JasonVMo Jan 19, 2025
a12ece5
add tracing support and some basic hookup to builds
JasonVMo Jan 20, 2025
5c9b875
more in-flight changes
JasonVMo Jan 22, 2025
6c79bf5
Merge remote-tracking branch 'upstream/main' into tools-typescript
JasonVMo Jan 22, 2025
596bacb
clean up testing only changes
JasonVMo Jan 22, 2025
b7217e2
more tool cleanup
JasonVMo Jan 27, 2025
7ec0664
merge upstream changes
JasonVMo Jan 27, 2025
3c08dda
fix some issues with platform build splitting
JasonVMo Jan 28, 2025
0534f37
remove bogus test files
JasonVMo Jan 28, 2025
3009b1e
fix test for batch writer
JasonVMo Jan 28, 2025
844a274
more platform fixes
JasonVMo Jan 28, 2025
7aac066
code cleanup for module resolution issues
JasonVMo Jan 30, 2025
bae9323
fix builds for react-native platforms
JasonVMo Feb 1, 2025
f6d8f4d
Merge remote-tracking branch 'upstream/main' into tools-typescript
JasonVMo Feb 1, 2025
68b3608
update readme, and add automic generation
JasonVMo Feb 1, 2025
b89a58b
docs(changeset): Initial creation of an experimental typescript build…
JasonVMo Feb 1, 2025
2feae68
remove unused dependency in tools-typescript
JasonVMo Feb 2, 2025
d1b359a
switch from classes to interfaces, fix documentation
JasonVMo Feb 2, 2025
30e0b92
export project creation, update readme file
JasonVMo Feb 3, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hot-bobcats-play.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rnx-kit/tools-typescript": patch
---

Initial creation of an experimental typescript build tool
75 changes: 75 additions & 0 deletions incubator/tools-typescript/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!-- We recommend an empty change log entry for a new package: `yarn change --empty` -->

# @rnx-kit/tools-typescript

[![Build](https://github.com/microsoft/rnx-kit/actions/workflows/build.yml/badge.svg)](https://github.com/microsoft/rnx-kit/actions/workflows/build.yml)
[![npm version](https://img.shields.io/npm/v/@rnx-kit/tools-typescript)](https://www.npmjs.com/package/@rnx-kit/tools-typescript)

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

### THIS TOOL IS EXPERIMENTAL — USE WITH CAUTION

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

A package that helps with building typescript, particularly for react-native. It
leverages the @rnx-kit/typescript-service package to build using the language
service rather than using the compiler directly. This allows for custom
resolution strategies (among other things). The compilation and type-checking
are still done by typescript but this drives some convenient custom
configurations.

In particular the `buildTypescript` command can do things like:

- multiplex a build in a directory, to build for multiple react-native platforms
at the same time. The files will be split such that the minimal build can be
performed.
- detect which react-native platforms should be built based on rnx-kit bundle
configs or react-native.config.js settings.
- successfully build with the module suffixes without throwing up a ton of bogus
unresolved reference errors.
- share caches where possible to speed up compilations within the same node
process.

## Motivation

The current story for building typescript for react-native is sub-par, and
typescript itself is particularly restrictive with module resolution. This
addresses the ability to build react-native better right now, but also creates a
framework for experimenting with different resolvers.

## Installation

```sh
yarn add @rnx-kit/tools-typescript --dev
```

or if you're using npm

```sh
npm add --save-dev @rnx-kit/tools-typescript
```

## Usage

<!-- The following table can be updated by running `yarn update-readme` -->
<!-- @rnx-kit/api start -->

| Category | Type Name | Description |
| -------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| types | AsyncThrottler | Interface for capping the max number of async operations that happen at any given time. This allows for multiple AsyncWriter instances to be used in parallel while still limiting the max number of concurrent operations |
| types | AsyncWriter | Interface for handling async file writing. There is a synchronous write function then a finish function that will wait for all writes to complete |
| types | BuildOptions | Options that control how the buildTypescript command should be configured |
| types | PlatformInfo | Information about each available platform |
| types | Reporter | Interface for reporting logging and timing information |

| Category | Function | Description |
| --------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| build | `buildTypescript(options)` | Execute a build (or just typechecking) for the given package. This can be configured with standard typescript options, but can also be directed to split builds to build and type-check multiple platforms as efficiently as possible. |
| files | `createAsyncThrottler(maxActive, rebalanceAt)` | Creates an AsyncThrottler that can be used to limit the number of concurrent operations that happen at any given time. |
| files | `createAsyncWriter(root, throttler, reporter)` | Create an AsyncWriter that can be used to write files asynchronously and wait on the results |
| host | `openProject(context)` | Open a typescript project for the given context. Can handle react-native specific projects and will share cache information where possible given the configuration |
| platforms | `loadPkgPlatformInfo(pkgRoot, manifest, platformOverride)` | Load platform info for available platforms for a given package |
| platforms | `parseSourceFileDetails(file, ignoreSuffix)` | Take a file path and return the base file name, the platform extension if one exists, and the file extension. |
| reporter | `createReporter(name, logging, tracing)` | Create a reporter that can log, time, and report errors |

<!-- @rnx-kit/api end -->
1 change: 1 addition & 0 deletions incubator/tools-typescript/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("@rnx-kit/eslint-config");
54 changes: 54 additions & 0 deletions incubator/tools-typescript/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{
"name": "@rnx-kit/tools-typescript",
"version": "0.0.1",
"description": "EXPERIMENTAL - USE WITH CAUTION - tools-typescript",
"homepage": "https://github.com/microsoft/rnx-kit/tree/main/incubator/tools-typescript#readme",
"license": "MIT",
"author": {
"name": "Microsoft Open Source",
"email": "microsoftopensource@users.noreply.github.com"
},
"files": [
"lib/**/*.d.ts",
"lib/**/*.js"
],
"main": "lib/index.js",
"types": "lib/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/microsoft/rnx-kit",
"directory": "incubator/tools-typescript"
},
"engines": {
"node": ">=16.17"
},
"scripts": {
"build": "rnx-kit-scripts build",
"format": "rnx-kit-scripts format",
"lint": "rnx-kit-scripts lint",
"test": "rnx-kit-scripts test"
},
"dependencies": {
"@rnx-kit/config": "^0.7.0",
"@rnx-kit/tools-node": "^3.0.0",
"@rnx-kit/tools-react-native": "^2.0.0",
"@rnx-kit/typescript-service": "^2.0.0"
},
"devDependencies": {
"@rnx-kit/eslint-config": "*",
"@rnx-kit/jest-preset": "*",
"@rnx-kit/scripts": "*",
"@rnx-kit/tsconfig": "*",
"eslint": "^9.0.0",
"jest": "^29.2.1",
"prettier": "^3.0.0",
"typescript": "^5.0.0"
},
"peerDependencies": {
"typescript": ">=4.7.0"
},
"jest": {
"preset": "@rnx-kit/jest-preset/private"
},
"experimental": true
}
107 changes: 107 additions & 0 deletions incubator/tools-typescript/src/build.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { createReporter } from "./reporter";
import type { BuildContext, BuildOptions, PlatformInfo } from "./types";

import { findPackage, readPackage } from "@rnx-kit/tools-node";
import { readConfigFile } from "@rnx-kit/typescript-service";

import type { AllPlatforms } from "@rnx-kit/tools-react-native";
import path from "node:path";
import ts from "typescript";
import { loadPkgPlatformInfo } from "./platforms";
import { createBuildTasks } from "./task";

/**
* Load the tsconfig.json file for the package
* @param pkgRoot the root directory of the package
* @param args the command line arguments to be passed to typescript
* @returns the parsed tsconfig.json file, if found
*/
function loadTypescriptConfig(
pkgRoot: string,
options: ts.CompilerOptions = {}
): ts.ParsedCommandLine {
// find the tsconfig.json, overriding with project if it is set
const configPath =
options.project ??
ts.findConfigFile(pkgRoot, ts.sys.fileExists, "tsconfig.json");

// now load the config, mixing in the command line options
const config = configPath
? // ? readConfigFile(configPath, sanitizeOptions(options))
readConfigFile(configPath, options)
: undefined;

if (!config) {
throw new Error("Unable to find tsconfig.json");
}
return config;
}

/**
* Execute a build (or just typechecking) for the given package. This can be configured
* with standard typescript options, but can also be directed to split builds to build
* and type-check multiple platforms as efficiently as possible.
*
* @param options - options for the build
*/
export async function buildTypescript(options: BuildOptions) {
// load the base package json
const pkgJsonPath = findPackage(options.target);
if (!pkgJsonPath) {
throw new Error("Unable to find package.json for " + options.target);
}
const manifest = readPackage(pkgJsonPath);
const root = path.dirname(pkgJsonPath);
const reporter = createReporter(
manifest.name,
options.verbose,
options.trace
);

// set up the typescript options and load the config file
const mergedOptions = {
...options.options,
...ts.parseCommandLine(options.args || []).options,
};
const cmdLine = loadTypescriptConfig(root, mergedOptions);

// load/detect the platforms
let targetPlatforms: PlatformInfo[] | undefined = undefined;
if (options.platforms || options.reactNative) {
const platformInfo = loadPkgPlatformInfo(root, manifest, options.platforms);
const platforms = Object.keys(platformInfo);
if (platforms.length > 0) {
options.platforms = platforms as AllPlatforms[];
targetPlatforms = platforms.map((name) => platformInfo[name]);
}
}

if (options.verbose) {
const module = cmdLine.options.module;
const moduleStr =
module === ts.ModuleKind.CommonJS
? "cjs"
: module === ts.ModuleKind.ESNext
? "esm"
: "none";
const output = cmdLine.options.noEmit ? "noEmit" : cmdLine.options.outDir;
const platforms = options.platforms
? ` [${options.platforms.join(", ")}]`
: "";
reporter.log(`Starting build (${moduleStr} -> ${output})${platforms}`);
}

// turn the parsed command line and options into a build context
const context: BuildContext = {
cmdLine,
root,
reporter,
};

// create the set of tasks to run then resolve all the tasks
await Promise.all(createBuildTasks(options, context, targetPlatforms)).catch(
() => {
throw new Error(`${manifest.name}: Build failed`);
}
);
}
Loading
Loading