open-index/open-npm huggingface dataset:
npm package: @rnwelsh/react-tabulator
Description: React Tabulator is based on tabulator - a JS table library with many advanced features.
Author: Duc Nguyen
Latest version: 0.19.1

# react-tabulator

React Tabulator is based on Tabulator - a JS table library with many advanced features. [Link.](https://github.com/olifolkerd/tabulator)

- **NOTE: from v0.16.x (WIP) or later, this uses the latest tabulator-tables v5.x, many cases are not tested yet.**
- Live Demo: [Codesandbox](https://codesandbox.io/s/0mwpy612xw?module=/src/components/Home.js)
- Example code: [/src/ReactTabulatorExample.tsx](/src/ReactTabulatorExample.tsx)
- More Examples, Use cases, FAQ: [More Live Examples / Use cases](/docs/examples.md)

[<img src="docs/react-tabulator-demo.gif" />](https://codesandbox.io/s/0mwpy612xw?module=/src/components/Home.js)

### 🌟 Features

Tabulator's features:
```
  Filters      Sorting      Formatting    Grouping      Ajax      Editing    Virtualization
  Pagination   Themes       A11y          I18n          Layouts   Frozen Cols/Rows
  Key Binding  Responsive   Persisting    History       Calc      Validation
  Clipboard    Tree Layout  Nested Tables
```

#### Plus more features:
- React.
- Simple syntax; Import css, themes.
- Typescript, Tslint.
- Jest-puppeteer for testing.
- React Cell Editors: DateEditor, MultiSelectEditor, etc.
- React Cell Formatters: MultiValueFormatter, etc.
- React Filters (TBD).
- For the legacy React 15.x, use: import React15Tabulator.

### 📦 Usage

```
$ npm install react-tabulator --save

import 'react-tabulator/lib/styles.css'; // required styles
import 'react-tabulator/lib/css/tabulator.min.css'; // theme
import { ReactTabulator } from 'react-tabulator';

    <ReactTabulator columns={columns} data={data} options={} events={{ rowClick: rowClickHandler }} />

* "options" will be passed directly to Tabulator's options.
* "events" is an object like { eventName: handlerFunction }
* use "ref.table" to access to all tabulator functions.
```
- More Examples, Use cases, FAQ: [More Live Examples / Use cases](/docs/examples.md)

### 🔧 Development - Commands

Require: `NodeJS`

```
$ npm install --legacy-peer-deps        install dependencies for development.
$ npm run dev      Launch DEV mode (with hot reload).
$ npm run build    Make a build.

$ npm run test     Run tests using jest-puppeteer (with headless Chrome).
```

- Development Doc - see [docs/development.md](docs/development.md)

### 📖 Documentation

- [Change Log](/CHANGELOG.md)
- [Todo / Roadmap](/TODO.md)

### 🙌 Thanks

All contributions are welcome!

- Main library [olifolkerd/tabulator](https://github.com/olifolkerd/tabulator) (Thanks olifolkerd for this great library!)

While you're here, also check out
- [Node-rem](https://github.com/ngduc/node-rem) - Node REM - NodeJS Rest Express MongoDB and more: typescript, passport, JWT, socket.io, HTTPS, HTTP2, async/await, nodemailer, templates, pagination, docker, etc.
- [VSCode - TODO.md Kanban Board](https://marketplace.visualstudio.com/items?itemName=coddx.coddx-alpha) or [TODO.md spec](https://github.com/todomd/todo.md)
npm package: @rnwolfe/prettier-config
Description: Prettier Config
Latest version: 1.0.0

# @ironbow/prettier-config
rnwolfe's Prettier config.

## Install
```bash
$ npm install --save-dev @rnwolfe/prettier-config
```

## Usage
Edit your `package.json`:

```jsonc
{
  // ...
  "prettier": "@rnwolfe/prettier-config"
}
```
npm package: @rnwonder/simple-datejs
Description: Light weight date management library
Author: rnwonder
Latest version: 1.1.2

# Simple datejs

A light weight simple date management library

[Documentation](https://soliddatepicker.live/docs/helpers-utilities/)

## Installation

```bash
npm i @rnwonder/simple-datejs
```

```bash
yarn add @rnwonder/simple-datejs
```

```bash
pnpm add @rnwonder/simple-datejs
```

## Usage

```tsx
import { DateMath, utils } from "@rnwonder/simple-datejs";

const today = new Date();

const isToday = utils.checkIfItsTodayDate(today); // ✅ true

const date1 = DateMath.set("2018-03-13");
const date2 = DateMath.set("2017-02-13");

date1.diff(date2); // { "milliseconds": 33955200000 }
date1.diff(date2, ["days", "year"]); // { "days": 393, "years": 1.0833333333333333 }

const date = { month: 1, day: 14, year: 2023 };

DateMath.set(date).plus({ day: 2 }).toObject(); // { "day": 16, "month": 1, "year": 2023 }

DateMath.set(date).plus({ day: 2 }).toISO(); // 2023-02-15T23:00:00.000Z

DateMath.set(date).plus({ hour: 24, minute: 1440 }).toMillis(); // 1676502000000

DateMath.set(date).plus({ day: 2 }).toJSDate(); // Date

DateMath.set(date).plus({ day: 2 }).toString(); // Feb 16, 2023

DateMath.set(date)
  .plus({ second: 86400 })
  .toString({ format: "DDD, MMM dd yyyy" }); // Wednesday, February 15 2023

DateMath.set(date)
  .minus({
    year: 2,
    month: 2,
    day: 2,
    hour: 24,
    minute: 1440,
    second: 86400,
  })
  .toString({
    localeOptions: { dateStyle: "full" },
  }); // Wednesday, December 9, 2020
```

# Default imports

```ts
import DateMath from "@rnwonder/simple-datejs/dateMath";
import utils from "@rnwonder/simple-datejs/utils";
import { checkIfItsTodayDate } from "@rnwonder/simple-datejs/utils";
```

### Like the library? Give us a star on Github
npm package: @rnx-kit-metro/metro
Description: 🚇 The JavaScript bundler for React Native.
Latest version: 0.66.1

# Metro

🚇 The JavaScript bundler for React Native.

- **🚅 Fast**: We aim for sub-second reload cycles, fast startup and quick bundling speeds.
- **⚖️ Scalable**: Works with thousands of modules in a single application.
- **⚛️ Integrated**: Supports every React Native project out of the box.

This project was previously part of the [react-native](https://github.com/facebook/react-native) repository. In this smaller repository it is easier for the team working on Metro to respond to both issues and pull requests. See [react-native#13976](https://github.com/facebook/react-native/issues/13976) for the initial announcement.
npm package: @rnx-kit-metro/metro-hermes-compiler
Description: 🚇 Hermes bytecode compiler for Metro.
Latest version: 0.66.1

# Metro Hermes Compiler

This experimental module provides a high-level API to work with the Hermes bytecode compiler (HBC). HBC is integrated as a WASM binary generated by the emscripten toolchain and checked in as part of this package.

## How to build HBC

A pre-configured emscripten environment can be used through this [Docker image](https://hub.docker.com/r/trzeci/emscripten/). Docker can be installed via its [desktop app](https://docs.docker.com/docker-for-mac/). Make sure to increase resource limits (16G RAM, as much CPU as possible).

```
cd path/to/hermes/checkout
docker run -i -t --rm -v `pwd`:`pwd` trzeci/emscripten bash
apt-get update -y && apt-get install -y icu-devtools
cd path/to/hermes/checkout
cmake . -DCMAKE_TOOLCHAIN_FILE=/emsdk_portable/emscripten/sdk/cmake/Modules/Platform/Emscripten.cmake -DCMAKE_BUILD_TYPE=Release
make -j emhermesc
```

After the build process finishes the Hermes Bytecode Compiler JavaScript file will be available in the `bin` folder.
npm package: @rnx-kit-metro/metro-react-native-babel-preset
Description: Babel preset for React Native applications
Latest version: 0.66.1

# metro-react-native-babel-preset

Babel presets for [React Native](https://reactnative.dev) applications. React Native itself uses this Babel preset by default when transforming your app's source code.

If you wish to use a custom Babel configuration by writing a `babel.config.js` file in your project's root directory, you must specify all the plugins necessary to transform your code. React Native does not apply its default Babel configuration in this case. So, to make your life easier, you can use this preset to get the default configuration and then specify more plugins that run before it.

## Usage

As mentioned above, you only need to use this preset if you are writing a custom `babel.config.js` file.

### Installation

Install `metro-react-native-babel-preset` in your app:

with `npm`:

```sh
npm i metro-react-native-babel-preset --save-dev
```

or with `yarn`:

```sh
yarn add -D metro-react-native-babel-preset
```

### Configuring Babel

Then, create a file called `babel.config.js` in your project's root directory. The existence of this `babel.config.js` file will tell React Native to use your custom Babel configuration instead of its own. Then load this preset:

```
{
  "presets": ["module:metro-react-native-babel-preset"]
}
```

You can further customize your Babel configuration by specifying plugins and other options. See [Babel's `babel.config.js` documentation](https://babeljs.io/docs/en/config-files/) to learn more.

## Help and Support

If you get stuck configuring Babel, please ask a question on Stack Overflow or find a consultant for help. If you discover a bug, please open up an issue.
npm package: @rnx-kit/babel-plugin-import-path-remapper
Description: Babel plugin for remapping 'lib/' imports to 'src/'
Author: Microsoft Open Source
Latest version: 2.0.0

# @rnx-kit/babel-plugin-import-path-remapper

[![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/babel-plugin-import-path-remapper)](https://www.npmjs.com/package/@rnx-kit/babel-plugin-import-path-remapper)

`@rnx-kit/babel-plugin-import-path-remapper` remaps `**/lib/**` imports to
`**/src/**`. This is useful for packages that are not correctly exporting
everything via their `index.ts`, but you still want to consume the TypeScript
files rather than the transpiled JavaScript.

## Usage

Add `@rnx-kit/babel-plugin-import-path-remapper` to your `babel.config.js` under
plugins. For example, to remap all paths under the `@rnx-kit` scope:

```js
// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  overrides: [
    {
      test: /\.tsx?$/,
      plugins: [
        // @babel/plugin-transform-typescript doesn't support `const enum`s.
        // See https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats
        // for more details.
        "const-enum",

        [
          "@rnx-kit/babel-plugin-import-path-remapper",
          { test: (source) => source.startsWith("@rnx-kit/") },
        ],
      ],
    },
  ],
};
```

Or, if you're using `@rnx-kit/metro-config`:

```js
// babel.config.js
const { makeBabelConfig } = require("@rnx-kit/metro-config");
module.exports = makeBabelConfig([
  [
    "@rnx-kit/babel-plugin-import-path-remapper",
    { test: (source) => source.startsWith("@rnx-kit/") },
  ],
]);
```

### Options

| Option | Type                                           | Description                                                                                                                |
| :----- | :--------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------- |
| test   | `(source: string) => boolean`                  | **[Required]** A function returning whether the passed source should be redirected to another module.                      |
| remap  | `(moduleName: string, path: string) => string` | **[Optional]** A function returning the module that should be used instead, e.g. `contoso/index.js` -> `contoso/index.ts`. |
npm package: @rnx-kit/babel-preset-metro-react-native
Description: Babel preset for React Native applications
Author: Microsoft Open Source
Latest version: 3.0.2

# @rnx-kit/babel-preset-metro-react-native

[![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/babel-preset-metro-react-native)](https://www.npmjs.com/package/@rnx-kit/babel-preset-metro-react-native)

`@rnx-kit/babel-preset-metro-react-native` provides a Babel preset for React
Native applications that you can use as a drop-in replacement for
[`@react-native/babel-preset`](https://github.com/facebook/react-native/tree/v0.81.0/packages/react-native-babel-preset#readme)).

## Usage

Add `@rnx-kit/babel-preset-metro-react-native` to your `babel.config.js`:

```js
module.exports = {
  presets: ["@rnx-kit/babel-preset-metro-react-native"],
};
```

If you want to add additional plugins, you can pass an options object:

```js
module.exports = {
  presets: [
    [
      "@rnx-kit/babel-preset-metro-react-native",
      {
        additionalPlugins: ["const-enum"],
      },
    ],
  ],
};
```

## Notes on Bundle Size

If you're looking to reduce the bundle size, here are a couple of things you can
try.

### Enable compiler assumptions

Since 7.13.0, Babel can make certain assumptions about your code to reduce the
amount of generated code. You can read more about it in
[Compiler assumptions](https://babeljs.io/docs/en/assumptions).

### Enable loose mode when transforming classes

If you make heavy use of classes, but can't use compiler assumptions, you can
enable `looseClassTransform` to remove helper functions:

```js
module.exports = {
  presets: [
    [
      "@rnx-kit/babel-preset-metro-react-native",
      {
        looseClassTransform: true,
      },
    ],
  ],
};
```

This is equivalent to passing
[`{ loose: true }`](https://babeljs.io/docs/en/babel-plugin-transform-classes#loose)
to `@babel/plugin-transform-classes`.

### Enable experimental import/export support

In your `metro.config.js`, enable `experimentalImportSupport`:

```js
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: true,
        inlineRequires: true,
      },
    }),
  },
};
```

And disable import/export transformation in your `babel.config.js`:

```js
module.exports = {
  presets: [
    [
      "@rnx-kit/babel-preset-metro-react-native",
      { disableImportExportTransform: true },
    ],
  ],
};
```

Doing this will help the minifier strip out some unused code, but make sure that
your app still works after enabling it.

### `babel-plugin-lodash`

If you're using [Lodash](https://lodash.com), you can get some reduction with
[babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash). Add it to
your `babel.config.js` like below:

```js
module.exports = {
  presets: ["@rnx-kit/babel-preset-metro-react-native"],
  plugins: ["lodash"],
};
```
npm package: @rnx-kit/bundle-diff
Description: Simple tool for diffing the content of two bundles
Author: Microsoft Open Source
Latest version: 2.0.0

# @rnx-kit/bundle-diff

[![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/bundle-diff)](https://www.npmjs.com/package/@rnx-kit/bundle-diff)

A simple tool for diffing two bundles. Useful for getting an overview of which
files are included in one bundle but not the other. For example, comparing a
bundle produced by Webpack vs. one produced by Metro.

## Usage

```
rnx-bundle-diff <a.jsbundle.map> <b.jsbundle.map>
```

Example output:

```
     +106    added  /~/node_modules/@babel/runtime/helpers/arrayWithHoles.js
      +96    added  /~/node_modules/lodash-es/_realNames.js
      +49    added  /~/node_modules/@babel/runtime/regenerator/index.js
       +1  changed  /~/node_modules/react/index.js
     -127  removed  /~/node_modules/querystring-es3/index.js
     -286  removed  /~/node_modules/react-native/Libraries/Components/Picker/PickerAndroid.ios.js
     -592  removed  /~/node_modules/react-native/Libraries/Components/Sound/SoundManager.js
  unknown    added  /~/packages/awesome-app/lib/index.js
```

Note that the numbers are in bytes, and based on the unminified code. They are
meant to give an idea of how big the file is, but could differ wildly depending
on a number of factors, including Babel plugins, Wepback config, TypeScript
compilation options, indentation etc.

## Troubleshooting

### I have a lot of unknown content sizes in my diff

If you're using TypeScript, you need to tell `tsc` to also include source
content in the source map:

```json
// tsconfig.json
{
  "compilerOptions": {
    "inlineSources": true
  }
}
```

### I have a lot of relative paths in my source map

If your project is using TypeScript and Webpack, you may experience that your
source maps don't properly map back to the source file. Try using
[`source-map-loader`](https://webpack.js.org/loaders/source-map-loader/) to
clean up the paths:

```js
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|(js)?bundle)($|\?)/i,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
};
```
npm package: @rnx-kit/commitlint-lite
Description: Lint commit messages
Author: Microsoft Open Source
Latest version: 2.0.0

# @rnx-kit/commitlint-lite

[![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/commitlint-lite)](https://www.npmjs.com/package/@rnx-kit/commitlint-lite)

Lint commit message according to
[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).

## Usage

Pipe the commit message to `@rnx-kit/commitlint-lite`:

```sh
echo 'ci: lint commit messages' | npx @rnx-kit/commitlint-lite
```

**Example:** In a PR, only the first commit's message needs to conform if you
always squash before merging:

```sh
git log --format='%s' origin/trunk..HEAD | tail -1 | npx @rnx-kit/commitlint-lite
```
npm package: @rnx-kit/console
Description: Simple console logger
Author: Microsoft Open Source
Latest version: 2.0.0

# @rnx-kit/console

[![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/console)](https://www.npmjs.com/package/@rnx-kit/console)

`@rnx-kit/console` is a simple console logger that is a subset of the logger in
[`@react-native-community/cli-tools`](https://github.com/react-native-community/cli/blob/6615eb30f37bec5bb25acc066c849c4aa2d8a4cd/packages/tools/src/logger.ts).
It is used by
[Metro plugins](https://github.com/microsoft/rnx-kit/tree/main/packages) to
ensure that log lines are consistent with `@react-native-community/cli`.

Ideally, we should be using the reporter that is passed to Metro but we don't
have access to it from the `customSerializer` hook. The next best thing would be
to use `@react-native-community/cli-tools` but it includes a bunch of other
tools and we cannot take a dependency on any single version since we need to
support multiple versions of `react-native` (and hence multiple versions of
`@react-native-community/cli-tools`).

Other libraries, such as
[`just-task-logger`](https://github.com/microsoft/just/tree/master/packages/just-task-logger),
were also considered. However, the purpose of this package is to match with the
output of `@react-native-community/cli`. `just-task-logger` in particular uses
its own colour scheme and doesn't allow configuring them to match the colour
scheme.

## Install

```sh
yarn add @rnx-kit/console --dev
```

## Usage

```ts
import { error, info, warn } from "@rnx-kit/console";

error("This is an error message");
info("This is an informational message");
warn("This is a warning");
```
npm package: @rnx-kit/esbuild-plugin-import-path-remapper
Description: Esbuild plugin for remapping 'lib/' imports to 'src/'
Author: Microsoft Open Source
Latest version: 3.0.1

# @rnx-kit/esbuild-plugin-import-path-remapper

[![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/esbuild-plugin-import-path-remapper)](https://www.npmjs.com/package/@rnx-kit/esbuild-plugin-import-path-remapper)

`@rnx-kit/esbuild-plugin-import-path-remapper` remaps `**/lib/**` imports to
`**/src/**`. This is useful for packages that are not correctly exporting
everything via their `index.ts`, but you still want to consume the TypeScript
files rather than the transpiled JavaScript.

## Usage

Add `@rnx-kit/esbuild-plugin-import-path-remapper` to your build script plugins.
The package name filter argument to the plugin is an esbuild compatible regular
expression to match the packages to transform.

For example, to remap all paths under the `@rnx-kit` scope:

```js
// esbuild.js
const ImportPathRemapperPlugin = require("@rnx-kit/esbuild-plugin-import-path-remapper");

require("esbuild")
  .build({
    entryPoints: ["app.tsx"],
    bundle: true,
    outfile: "out.js",
    plugins: [ImportPathRemapperPlugin("@rnx-kit")],
  })
  .catch(() => process.exit(1));
```
npm package: @rnx-kit/jest-preset
Description: Jest preset for React Native code bases
Author: Microsoft Open Source
Latest version: 0.3.1

# @rnx-kit/jest-preset

[![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/jest-preset)](https://www.npmjs.com/package/@rnx-kit/jest-preset)

A Jest preset with support for React Native
[platform-specific extensions](https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions)
and [TypeScript](https://www.typescriptlang.org/).

## Usage

### In a TypeScript-only Package (Non-React Native)

Add `preset: "@rnx-kit/jest-preset"` to your Jest config:

```diff
 module.exports = {
+  preset: "@rnx-kit/jest-preset",
   ...
 };
```

`@rnx-kit/jest-preset` will detect that you're not targeting React Native and
exclude any React Native specific configurations.

### In a React Native Package

There are three ways to use this preset when targeting React Native, depending
on your personal preference.

#### Single `jest.config.js`

If you prefer to use a single Jest config, you can provide the target platform
via an environment variable. First, add `preset: "@rnx-kit/jest-preset"` to your
Jest config:

```diff
 module.exports = {
+  preset: "@rnx-kit/jest-preset",
   ...
 };
```

Then specify the target platform when running Jest:

```sh
RN_TARGET_PLATFORM=ios npm run jest
```

#### Multiple `jest.config.js`

Alternatively, you can have a Jest config file for each platform, e.g.:

```js
// jest.config.ios.js
module.exports = require("@rnx-kit/jest-preset")("ios", {
  ...
});
```

Then specify the config file to use when running Jest:

```sh
npm run jest --config jest.config.ios.js
```

#### Use `@rnx-kit/cli`

You can specify the target platform using the `rnx-test` command provided by
`@rnx-kit/cli`. First, add `preset: "@rnx-kit/jest-preset"` to your Jest config:

```diff
 module.exports = {
+  preset: "@rnx-kit/jest-preset",
   ...
 };
```

Then specify the target platform when running `rnx-test`:

```sh
npm run react-native rnx-test --platform ios
```

### In an Out-of-Tree Platform Package

Add `preset: "@rnx-kit/jest-preset"` to your Jest config:

```diff
 module.exports = {
+  preset: "@rnx-kit/jest-preset",
   ...
 };
```

The target platform will be deduced by reading `react-native.config.js` at the
package root.
npm package: @rnx-kit/jest-resolver
Description: Jest resolver that supports out-of-tree platforms
Latest version: 0.1.0

# @rnx-kit/jest-resolver

[![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/jest-resolver)](https://www.npmjs.com/package/@rnx-kit/jest-resolver)

A Jest resolver with support for React Native
[out-of-tree platforms](https://reactnative.dev/docs/out-of-tree-platforms).

## Usage

Add `resolver: '@rnx-kit/jest-resolver'` to your Jest config:

```diff
 module.exports = {
   ...
+  resolver: '@rnx-kit/jest-resolver',
   ...
 };
```
npm package: @rnx-kit/lint-lockfile
Description: Tool for linting lockfiles
Author: Microsoft Open Source
Latest version: 0.1.3

# @rnx-kit/lint-lockfile

[![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/lint-lockfile)](https://www.npmjs.com/package/@rnx-kit/lint-lockfile)

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

### THIS TOOL IS EXPERIMENTAL — USE WITH CAUTION

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

`@rnx-kit/lint-lockfile` is a standalone tool for scanning your lockfiles for
potential issues.

Supported lockfile formats:

- [Yarn v1](https://classic.yarnpkg.com/en/docs/yarn-lock)
- [Yarn v2+](https://yarnpkg.com/advanced/changelog#200)

## Installation

```sh
yarn add @rnx-kit/lint-lockfile --dev
```

## Usage

```sh
yarn lint-lockfile
```

## Configuration

`@rnx-kit/lint-lockfile` can be configured in your root `package.json` file. For
example:

```ts
{
  "rnx-kit": {
    "lint": {
      "lockfile": {
        "noDuplicates": {
          "enabled": true, // enabled by default
          "packages": [
            "react",
            "react-native"
          ]
        },
        "noWorkspacePackageFromNpm": {
          "enabled": true // enabled by default
        }
      }
    }
  }
}
```

## Rules

### `noDuplicates`

This rule checks for duplicate packages in the lockfile. It must be configured
to check for specific packages. For example, to check for duplicates of React
and React Native, configure it like this:

```ts
{
  "rnx-kit": {
    "lint": {
      "lockfile": {
        "noDuplicates": {
          "packages": [
            "react",
            "react-native"
          ]
        }
      }
    }
  }
}
```

You can allow multiple copies of a package by specifying a max count:

```ts
{
  "rnx-kit": {
    "lint": {
      "lockfile": {
        "noDuplicates": {
          "packages": [
            "react-native",
            ["react", 2], // allow up to 2 copies of `react`
            ["left-pad", 0] // disallow `left-pad` entirely
          ]
        }
      }
    }
  }
}
```

This rule also has a built-in preset for React Native. You can enable it with
`#react-native`:

```ts
{
  "rnx-kit": {
    "lint": {
      "lockfile": {
        "noDuplicates": {
          "packages": [
            "#react-native"
          ]
        }
      }
    }
  }
}
```

### `noWorkspacePackageFromNpm`

This rule checks for workspace packages that are unintentionally installed from
npm. It is enabled by default, but can be disabled like this:

```ts
{
  "rnx-kit": {
    "lint": {
      "lockfile": {
        "noWorkspacePackageFromNpm": {
          "enabled": false
        }
      }
    }
  }
}
```
npm package: @rnx-kit/metro-plugin-cyclic-dependencies-detector
Description: Cyclic dependencies detector for Metro
Author: Microsoft Open Source
Latest version: 2.0.3

# @rnx-kit/metro-plugin-cyclic-dependencies-detector

[![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/metro-plugin-cyclic-dependencies-detector)](https://www.npmjs.com/package/@rnx-kit/metro-plugin-cyclic-dependencies-detector)

`@rnx-kit/metro-plugin-cyclic-dependencies-detector` detects cyclic import
chains that may cause issues in your bundle.

## Usage

Import and add the plugin to `MetroSerializer` in your `metro.config.js`, and
optionally configure it to your liking:

```diff
 const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const {
+  CyclicDependencies,
+} = require("@rnx-kit/metro-plugin-cyclic-dependencies-detector");
+const { MetroSerializer } = require("@rnx-kit/metro-serializer");

 module.exports = makeMetroConfig({
   serializer: {
+    customSerializer: MetroSerializer([
+      CyclicDependencies({
+        includeNodeModules: false,
+        linesOfContext: 1,
+        throwOnError: true,
+      }),
+    ]),
   },
 });
```

If you are not using `@rnx-kit/metro-serializer`, you can still use the plugin
directly in your `metro.config.js`. This is useful if you are using Expo which
uses its own custom serializer:

```js
const {
  CyclicDependencies,
} = require("@rnx-kit/metro-plugin-cyclic-dependencies-detector");
const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

const expoSerializer = config.serializer.customSerializer;
config.serializer.customSerializer = async (
  entryPoint,
  preModules,
  graph,
  options
) => {
  CyclicDependencies({
    // Options
  })(entryPoint, preModules, graph, options);
  return await expoSerializer(entryPoint, preModules, graph, options);
};

module.exports = config;
```

## Options

| Key                | Type    | Default | Description                                   |
| :----------------- | :------ | :------ | :-------------------------------------------- |
| includeNodeModules | boolean | `false` | Whether to scan `node_modules`.               |
| linesOfContext     | number  | 1       | Number of extra modules to print for context. |
| throwOnError       | boolean | `true`  | Whether to throw when cycles are detected.    |

## Limitations

- This plugin can only detect cycles that are present in the module graph
  generated by Metro. If your project uses file based routing (e.g. Expo
  Router), Metro may not include every file in its module graph; you may need
  require additional configuration. Refer to this issue for the details:
  https://github.com/microsoft/rnx-kit/issues/3868#issuecomment-3564074769.
npm package: @rnx-kit/metro-plugin-typescript
Description: Metro plugin for TypeScript type validation
Author: Microsoft Open Source
Latest version: 0.5.4

# @rnx-kit/metro-plugin-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/metro-plugin-typescript)](https://www.npmjs.com/package/@rnx-kit/metro-plugin-typescript)

`@rnx-kit/metro-plugin-typescript` adds type checking to Metro.

## Usage

```diff
 const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const { TypeScriptPlugin } = require("@rnx-kit/metro-plugin-typescript");

 module.exports = makeMetroConfig({
   serializer: {
+    experimentalSerializerHook: TypeScriptPlugin(),
   },
 });
```

## Options

| Key          | Type    | Default | Description                             |
| :----------- | :------ | :------ | :-------------------------------------- |
| throwOnError | boolean | `false` | Whether to throw when errors are found. |
npm package: @rnx-kit/metro-plugin-typescript-validation
Description: Typescript validation during Metro bundling
Latest version: 1.0.14

# @rnx-kit/metro-plugin-typescript-validation

[![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/metro-plugin-typescript-validation)](https://www.npmjs.com/package/@rnx-kit/metro-plugin-typescript-validation)

`@rnx-kit/metro-plugin-typescript-validation` checks TypeScript source files in
your package for syntactic and semantic correctness.

## Usage

Add this plugin in your `metro.config.js` using `@rnx-kit/metro-serializer`:

```js
const { makeMetroConfig } = require("@rnx-kit/metro-config");
const {
  TypeScriptValidation,
} = require("@rnx-kit/metro-plugin-typescript-validation");
const { MetroSerializer } = require("@rnx-kit/metro-serializer");

module.exports = makeMetroConfig({
  projectRoot: __dirname,
  serializer: {
    customSerializer: MetroSerializer([TypeScriptValidation()]),
  },
});
```

This plugin runs as part of Metro bundling. When a type error occurs, it is
displayed console output and bundle creation fails (no files are written).
npm package: @rnx-kit/metro-serializer
Description: Metro's default JavaScript bundle serializer but with plugin support
Author: Microsoft Open Source
Latest version: 2.0.3

# @rnx-kit/metro-serializer

[![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/metro-serializer)](https://www.npmjs.com/package/@rnx-kit/metro-serializer)

`@rnx-kit/metro-serializer` is Metro's default JavaScript bundle serializer, but
with support for plugins.

## Usage

Import and set the serializer to `serializer.customSerializer` in your
`metro.config.js`, then add your desired plugins. For instance, to add
`CyclicDependencies` and `DuplicateDependencies` plugins:

```diff
 const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const {
+  CyclicDependencies,
+} = require("@rnx-kit/metro-plugin-cyclic-dependencies-detector");
+const {
+  DuplicateDependencies,
+} = require("@rnx-kit/metro-plugin-duplicates-checker");
+const { MetroSerializer } = require("@rnx-kit/metro-serializer");

 module.exports = makeMetroConfig({
   projectRoot: __dirname,
   serializer: {
+    customSerializer: MetroSerializer([
+      CyclicDependencies(),
+      DuplicateDependencies(),
+    ]),
   },
 });
```

## Expo

If you are using Expo, you most likely don't want to use this serializer, since
Expo uses its own custom serializer. For instance, to use the
`CyclicDependencies` and `DuplicateDependencies` plugins without the serializer:

```js
const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.serializer.customSerializer = async (
  entryPoint,
  preModules,
  graph,
  options
) => {
  CyclicDependencies({
    // Options
  })(entryPoint, preModules, graph, options);
  DuplicateDependencies({
    // Options
  })(entryPoint, preModules, graph, options);
  return await config.serializer.customSerializer(
    entryPoint,
    preModules,
    graph,
    options
  );
};

module.exports = config;
```
npm package: @rnx-kit/metro-swc-worker
Description: Metro transform worker that uses swc under the hood
Latest version: 0.1.9
Deprecated: This experiment is no longer maintained. Metro is experimenting with SWC here: https://github.com/facebook/metro/pull/948

# @rnx-kit/metro-swc-worker

[![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/metro-swc-worker)](https://www.npmjs.com/package/@rnx-kit/metro-swc-worker)

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

### This tool is EXPERIMENTAL - USE WITH CAUTION

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

An experimental Metro transformer using [swc](https://swc.rs/).

## Requirements

This plugin currently depends on some unstable features introduced in Metro
[0.66.1](https://github.com/facebook/metro/releases/tag/v0.66.1). Breaking
changes were introduced in Metro 0.60, so this plugin will not work with React
Native below 0.64.

## Install

```sh
yarn add @rnx-kit/metro-swc-worker --dev
```

or if you're using npm:

```sh
npm add --save-dev @rnx-kit/metro-swc-worker
```

## Usage

`@rnx-kit/metro-swc-worker` falls back to Babel for assets and Flow files, and
relies on esbuild to perform import/export transformation and tree shaking. For
best effect, we also need to disable Babel's import/export transformation in
`babel.config.js`:

```diff
 module.exports = {
   presets: [
     ["module:metro-react-native-babel-preset", {
+      disableImportExportTransform: true
     }],
   ],
 };
```

Next, we configure Metro to use the esbuild serializer and swc as transformer in
`metro.config.js`:

```diff
 const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const {
+  MetroSerializer,
+  esbuildTransformerConfig,
+} = require("@rnx-kit/metro-serializer-esbuild");

 module.exports = makeMetroConfig({
+  serializer: {
+    customSerializer: MetroSerializer(),
+  },
+  transformer: esbuildTransformerConfig,
+  transformerPath: require.resolve("@rnx-kit/metro-swc-worker"),
 });
```

## Known Limitations

- Similar to
  [Babel](https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options),
  your TypeScript code needs to be compilable with
  [Isolated Modules](https://www.typescriptlang.org/tsconfig#isolatedModules)
  enabled.
- Since this worker requires the esbuild serializer, it inherits all the
  limitations listed in the
  [README](https://github.com/microsoft/rnx-kit/tree/main/packages/metro-serializer-esbuild#known-limitations).
npm package: @rnx-kit/metro-transformer-oxc
Description: EXPERIMENTAL - USE WITH CAUTION - metro-transformer-oxc
Author: Microsoft Open Source
Latest version: 0.1.1

# @rnx-kit/metro-transformer-oxc

[![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/metro-transformer-oxc)](https://www.npmjs.com/package/@rnx-kit/metro-transformer-oxc)

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

### THIS TOOL IS EXPERIMENTAL — USE WITH CAUTION

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

A Metro transformer that uses `oxc-parser`.

## Installation

```sh
yarn add @rnx-kit/metro-transformer-oxc --dev
```

or if you're using npm

```sh
npm add --save-dev @rnx-kit/metro-transformer-oxc
```

## Usage

Add it to your `metro.config.js`:

```diff
   },
+  transformer: {
+    babelTransformerPath: require.resolve("@rnx-kit/metro-transformer-oxc"),
+  },
 }
```
npm package: @rnx-kit/polyfills
Description: EXPERIMENTAL - USE WITH CAUTION - New package called polyfills
Author: Microsoft Open Source
Latest version: 0.2.1

# @rnx-kit/polyfills

[![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/polyfills)](https://www.npmjs.com/package/@rnx-kit/polyfills)

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

### THIS TOOL IS EXPERIMENTAL — USE WITH CAUTION

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

This is a polyfills "autolinker" for React Native. It works like native module
autolinking, but gathers polyfills from dependencies instead.

## Motivation

Please read the
[Modularity](https://github.com/microsoft/rnx-kit/blob/tido/react-native-standard-api/text/0002-react-native-webapis.md#modularity)
section of the
[React Native WebAPIs RFC](https://github.com/microsoft/rnx-kit/pull/2504) for
its raison d'être.

## Installation

```sh
yarn add @rnx-kit/polyfills --dev
```

or if you're using npm

```sh
npm add --save-dev @rnx-kit/polyfills
```

## Usage

1. Add the Babel plugin:

   ```diff
    // babel.config.js
    module.exports = {
      presets: ["module:@react-native/babel-preset"],
   +  plugins: [require("@rnx-kit/polyfills")],
    };
   ```

2. In your `index.ts` (or `index.js`), add the following comment at the top of
   the file:

   ```
   // @react-native-webapis
   ```
npm package: @rnx-kit/tools-android
Description: A collection of functions for deploying apps on Android
Author: Microsoft Open Source
Latest version: 0.2.2

# @rnx-kit/tools-android

[![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-android)](https://www.npmjs.com/package/@rnx-kit/tools-android)

`@rnx-kit/tools-android` is a collection of functions for deploying apps on
Android.

Usage:

```typescript
import * as tools from "@rnx-kit/tools-android";
```

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

| Category | Function                                            | Description                                                                      |
| -------- | --------------------------------------------------- | -------------------------------------------------------------------------------- |
| apk      | `getPackageName(apk)`                               | Returns the package name and the first launchable activity of the specified APK. |
| apk      | `install(device, apk, packageName)`                 | Installs the specified APK on specified emulator or physical device.             |
| apk      | `start(options, packageName, activityName)`         | Starts the specified activity on specified emulator or physical device.          |
| device   | `getDevices()`                                      | Returns a list of attached physical Android devices.                             |
| device   | `getEmulators()`                                    | Returns a list of available Android virtual devices.                             |
| device   | `launchEmulator(emulatorName)`                      | Launches the emulator with the specified name.                                   |
| device   | `selectDevice(emulatorName, logger)`                | Returns the emulator or physical device with the specified name.                 |
| gradle   | `assemble(projectDir, buildParams, additionalArgs)` | Invokes Gradle build.                                                            |
| gradle   | `findOutputFile(projectDir, buildConfiguration)`    | Tries to find Gradle build output file.                                          |
| sdk      | `getBuildToolsPath()`                               | Returns the path to Android SDK Build-Tools.                                     |

<!-- @rnx-kit/api end -->
npm package: @rnx-kit/tools-language
Description: A collection of supplemental JavaScript functions and types
Author: Microsoft Open Source
Latest version: 3.0.1

# @rnx-kit/tools-language

[![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-language)](https://www.npmjs.com/package/@rnx-kit/tools-language)

`@rnx-kit/tools-language` is a collection of supplemental JavaScript functions
and types.

You can import the entire package, or, to save space, import individual
categories:

```typescript
import * as tools from "@rnx-kit/tools-language";
```

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

| Category   | Function                       | Description                                                                                                                                                 |
| ---------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| properties | `hasProperty(obj, property)`   | Returns whether `property` exists in `obj`.                                                                                                                 |
| properties | `keysOf(obj)`                  | Returns the names of the enumerable string properties of an object. Equivalent to calling `Object.keys()`, but type safe.                                   |
| properties | `pickValues(obj, keys, names)` | Pick the value for each `key` property from `obj` and return each one in a new object. If `names` are given, use them in the new object, instead of `keys`. |

<!-- @rnx-kit/api end -->
npm package: @rnx-kit/tools-shell
Description: A collection of functions for writing shell scripts
Author: Microsoft Open Source
Latest version: 0.2.2

# @rnx-kit/tools-shell

[![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-shell)](https://www.npmjs.com/package/@rnx-kit/tools-shell)

`@rnx-kit/tools-shell` is a collection of functions for writing shell scripts.

You can import the entire package, or, to save space, import individual
categories:

```typescript
import * as tools from "@rnx-kit/tools-shell";

// Alternatively...
import * as asyncTools from "@rnx-kit/tools-shell/async";
import * as commandTools from "@rnx-kit/tools-shell/command";
```

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

| Category | Function                            | Description                                                                                             |
| -------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------- |
| async    | `idle(ms)`                          | Sleep for a specified numer of milliseconds.                                                            |
| async    | `once(func)`                        | Wraps the function, making sure it only gets called once.                                               |
| async    | `retry(func, retries, counter)`     | Calls the specified function, retrying up to specified number of times as long as the result is `null`. |
| async    | `withRetry(func, retries, counter)` | Calls the specified function, retrying up to specified number of times as long as the function throws.  |
| command  | `ensure(result, message)`           | Throws if the result of the process is non-zero.                                                        |
| command  | `ensureInstalled(check, message)`   | Throws if the provided command fails.                                                                   |
| command  | `makeCommand(command, userOptions)` | Creates an async function for calling the specified command.                                            |
| command  | `makeCommandSync(command)`          | Creates a synchronous function for calling the specified command.                                       |
| untar    | `untar(archive)`                    | Invokes `tar xf`.                                                                                       |

<!-- @rnx-kit/api end -->
npm package: @rnx-kit/tools-windows
Description: A collection of functions for deploying apps on Windows
Author: Microsoft Open Source
Latest version: 0.2.1

# @rnx-kit/tools-windows

[![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-windows)](https://www.npmjs.com/package/@rnx-kit/tools-windows)

`@rnx-kit/tools-windows` is a collection of functions for deploying apps on
Windows.

Usage:

```typescript
import * as tools from "@rnx-kit/tools-windows";
```

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

| Category | Function                     | Description                                                             |
| -------- | ---------------------------- | ----------------------------------------------------------------------- |
| -        | `getPackageInfo(app)`        | Returns information about the app package at specified path.            |
| -        | `install(app, tryUninstall)` | Installs the app package at specified path, and returns its identifier. |
| -        | `start(packageId)`           | Starts the app with specified identifier.                               |

<!-- @rnx-kit/api end -->