chore: migrate to the magic tooling stack (pnpm + oxlint + oxfmt)

.github/workflows/branch-validation.yml

@@ -14,35 +14,14 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  # Lint, format and typecheck come from the shared workflow in GSTJ/magic.
+  # Node version is read from .nvmrc and pnpm from the `packageManager` field.
   checkup:
-    name: 👮‍♂️ Lint, Typecheck, Test and Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🏗 Setup Repo
-        uses: actions/checkout@v7
-
-      - name: 🏗 Setup Node
-        uses: actions/setup-node@v7
-        with:
-          node-version: 24
-          cache: yarn
-
-      # `.yarnrc` points `yarn-path` at scripts/bootstrap.js, which forwards to
-      # yarn whenever arguments are passed and otherwise installs the example
-      # app and the pods too. Passing the flags keeps it to the library.
-      - name: 📦 Install Dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: 🧹 Lint
-        run: yarn lint
-
-      - name: 🧪 Typecheck
-        run: yarn typescript
-
-      - name: 🧪 Test
-        run: yarn test
-
-      # `prepare` runs `bob build`, so the install above already built once.
-      # Running it again is what fails the job if the build breaks.
-      - name: 🛠️ Build
-        run: yarn prepare
+    uses: GSTJ/magic/.github/workflows/ci.yml@main
+    with:
+      # `pnpm install` already runs `prepare`, which is `bob build`. Running it
+      # again is what fails the job if the build breaks.
+      build-command: pnpm run build
+      test-command: pnpm test
+      # No turbo in this repo.
+      turbo-cache: false

.husky/commit-msg

@@ -1 +1 @@
-yarn commitlint -E HUSKY_GIT_PARAMS
+pnpm exec commitlint -E HUSKY_GIT_PARAMS

.husky/pre-commit

@@ -1 +1 @@
-yarn lint && yarn typescript
+pnpm run lint && pnpm run typecheck

.nvmrc

@@ -0,0 +1 @@
+24

CONTRIBUTING.md

@@ -4,57 +4,59 @@ We want this community to be friendly and respectful to each other. Please follo
 
 ## Development workflow
 
-To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
+To get started with the project, run `pnpm install` in the root directory to install the required dependencies for every workspace package:
 
 ```sh
-yarn
+pnpm install
 ```
 
-> While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development.
+> The repo is a pnpm workspace and pins its package manager in `package.json`, so use [`pnpm`](https://pnpm.io/) — `npm` and `yarn` will produce a different `node_modules` layout than Metro is configured for.
 
 While developing, you can run the [example app](/example/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app.
 
 To start the packager:
 
 ```sh
-yarn example start
+pnpm example start
 ```
 
 To run the example app on Android:
 
 ```sh
-yarn example android
+pnpm example android
 ```
 
 To run the example app on iOS:
 
 ```sh
-yarn example ios
+pnpm example ios
 ```
 
 To run the example app on Web:
 
 ```sh
-yarn example web
+pnpm example web
 ```
 
-Make sure your code passes TypeScript and ESLint. Run the following to verify:
+Make sure your code passes TypeScript, oxlint and oxfmt. Run the following to verify:
 
 ```sh
-yarn typescript
-yarn lint
+pnpm run typecheck
+pnpm run lint
+pnpm run format
 ```
 
-To fix formatting errors, run the following:
+To fix lint and formatting errors, run the following:
 
 ```sh
-yarn lint --fix
+pnpm run lint:fix
+pnpm run format:fix
 ```
 
 Remember to add tests for your change if possible. Run the unit tests by:
 
 ```sh
-yarn test
+pnpm test
 ```
 
 ### Commit message convention
@@ -72,9 +74,9 @@ Our pre-commit hooks verify that your commit message matches this format when co
 
 ### Linting and tests
 
-[ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
+[oxlint](https://oxc.rs/docs/guide/usage/linter), [oxfmt](https://oxc.rs/docs/guide/usage/formatter), [TypeScript](https://www.typescriptlang.org/)
 
-We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
+We use [TypeScript](https://www.typescriptlang.org/) for type checking, [oxlint](https://oxc.rs/docs/guide/usage/linter) for linting, [oxfmt](https://oxc.rs/docs/guide/usage/formatter) for formatting, and [Jest](https://jestjs.io/) for testing. Lint, format and TypeScript settings come from the shared [`GSTJ/magic`](https://github.com/GSTJ/magic) packages; `oxlint.config.mts`, `oxfmt.config.mts` and `tsconfig.json` only hold what is specific to this repo.
 
 Our pre-commit hooks verify that the linter and tests pass when committing.
 
@@ -85,20 +87,23 @@ We use [release-it](https://github.com/release-it/release-it) to make it easier
 To publish new versions, run the following:
 
 ```sh
-yarn release
+pnpm run release
 ```
 
 ### Scripts
 
 The `package.json` file contains various scripts for common tasks:
 
-- `yarn bootstrap`: setup project by installing all dependencies and pods.
-- `yarn typescript`: type-check files with TypeScript.
-- `yarn lint`: lint files with ESLint.
-- `yarn test`: run unit tests with Jest.
-- `yarn example start`: start the Metro server for the example app.
-- `yarn example android`: run the example app on Android.
-- `yarn example ios`: run the example app on iOS.
+- `pnpm install`: install every dependency in the workspace and build the library once.
+- `pnpm run typecheck`: type-check files with TypeScript.
+- `pnpm run lint` / `pnpm run lint:fix`: lint files with oxlint.
+- `pnpm run format` / `pnpm run format:fix`: check and apply formatting with oxfmt.
+- `pnpm test`: run unit tests with Jest.
+- `pnpm run build`: build the library with react-native-builder-bob.
+- `pnpm run pods`: install the example app's CocoaPods.
+- `pnpm example start`: start the Metro server for the example app.
+- `pnpm example android`: run the example app on Android.
+- `pnpm example ios`: run the example app on iOS.
 
 ### Sending a pull request
 

README.md

@@ -18,14 +18,14 @@ This toast uses [react-native-magic-modal](https://github.com/GSTJ/react-native-
 
 magic-modal v7 sets the floor for the whole stack:
 
-| Package | Minimum |
-| --- | --- |
-| react | 18 |
-| react-native | 0.81 |
-| react-native-reanimated | 4 |
-| react-native-gesture-handler | 2.20 |
-| react-native-worklets | 0.5 |
-| react-native-safe-area-context | 5 |
+| Package                        | Minimum |
+| ------------------------------ | ------- |
+| react                          | 18      |
+| react-native                   | 0.81    |
+| react-native-reanimated        | 4       |
+| react-native-gesture-handler   | 2.20    |
+| react-native-worklets          | 0.5     |
+| react-native-safe-area-context | 5       |
 
 Reanimated 4 needs its Babel plugin. `babel-preset-expo` adds it for you; outside Expo, put `react-native-worklets/plugin` last in the plugin list of your `babel.config.js`.
 
@@ -36,8 +36,8 @@ If your app can't move to RN 0.81 yet, stay on `react-native-magic-toast@0.4.x`,
 Insert a SafeAreaProvider encapsulating your app and a MagicModalPortal right beneath it
 
 ```js
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { MagicModalPortal } from 'react-native-magic-modal';
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { MagicModalPortal } from "react-native-magic-modal";
 
 export default function App() {
   return (
@@ -52,12 +52,12 @@ export default function App() {
 Then, you are free to use the magicToast as shown from anywhere you want.
 
 ```js
-import { magicToast } from 'react-native-magic-toast';
+import { magicToast } from "react-native-magic-toast";
 
 // ...
 
-magicToast.alert('Oops! Something went wrong 😬');
-magicToast.success('Hurray! Saved successfully');
+magicToast.alert("Oops! Something went wrong 😬");
+magicToast.success("Hurray! Saved successfully");
 
 // You can also use the show method to render a custom toast
 magicToast.show(() => (

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['babel-preset-expo'],
+  presets: ["babel-preset-expo"],
 };

example/App.tsx

@@ -1,13 +1,18 @@
-import * as React from 'react';
+import * as React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { magicToast } from 'react-native-magic-toast';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { MagicModalPortal } from 'react-native-magic-modal';
+import { MagicModalPortal } from "react-native-magic-modal";
+import { magicToast } from "react-native-magic-toast";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
-export default function App() {
+const colors = {
+  button: "#000000",
+  buttonText: "#ffffff",
+};
+
+const App = () => {
   React.useEffect(() => {
-    magicToast.success('It works!!');
+    magicToast.success("It works!!");
   }, []);
 
   return (
@@ -16,14 +21,14 @@ export default function App() {
       <View style={styles.container}>
         <TouchableOpacity
           style={styles.button}
-          onPress={() => magicToast.alert('Oops! Something went wrong 😬')}
+          onPress={() => magicToast.alert("Oops! Something went wrong 😬")}
         >
           <Text style={styles.buttonText}>Press me to fire an alert!</Text>
         </TouchableOpacity>
 
         <TouchableOpacity
           style={styles.button}
-          onPress={() => magicToast.success('Hurray! It works 🎉')}
+          onPress={() => magicToast.success("Hurray! It works 🎉")}
         >
           <Text style={styles.buttonText}>
             Press me to fire a success toast!
@@ -32,25 +37,27 @@ export default function App() {
       </View>
     </SafeAreaProvider>
   );
-}
+};
+
+export default App;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     gap: 15,
   },
   button: {
     height: 40,
     paddingHorizontal: 20,
-    backgroundColor: '#000000',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: colors.button,
+    alignItems: "center",
+    justifyContent: "center",
     borderRadius: 5,
   },
   buttonText: {
-    color: '#ffffff',
-    fontWeight: 'bold',
+    color: colors.buttonText,
+    fontWeight: "bold",
   },
 });

example/app.json

@@ -7,16 +7,10 @@
     "description": "Example app for react-native-magic-toast",
     "privacy": "public",
     "version": "1.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "platforms": ["ios", "android", "web"],
     "ios": {
       "supportsTablet": true
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ]
+    "assetBundlePatterns": ["**/*"]
   }
 }

example/babel.config.js

@@ -1,19 +1,19 @@
-const path = require('path');
-const pak = require('../package.json');
+const path = require("path");
+const pak = require("../package.json");
 
 module.exports = function (api) {
   api.cache(true);
 
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
     plugins: [
       [
-        'module-resolver',
+        "module-resolver",
         {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
+          extensions: [".tsx", ".ts", ".js", ".json"],
           alias: {
             // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
+            [pak.name]: path.join(__dirname, "..", pak.source),
           },
         },
       ],

example/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from "expo";
+
+import App from "./App";
+
+// Replaces the `node_modules/expo/AppEntry.js` entry point. In a pnpm
+// workspace the hoisted `node_modules` lives at the repo root, so a `main`
+// pointing inside `example/node_modules` no longer resolves.
+registerRootComponent(App);