Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
blank_issues_enabled: false
contact_links:
- name: Feature Request 💡
url: https://github.com/callstackincubator/react-native-release-inspector/discussions/new?category=ideas
url: https://github.com/callstackincubator/inspector/discussions/new?category=ideas
about: If you have a feature request, please create a new discussion on GitHub.
- name: Discussions on GitHub 💬
url: https://github.com/callstackincubator/react-native-release-inspector/discussions
url: https://github.com/callstackincubator/inspector/discussions
about: If this library works as promised but you need help, please ask questions there.
8 changes: 4 additions & 4 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ We want this community to be friendly and respectful to each other. Please follo

This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:

- The library package in `packages/react-native-release-inspector`.
- The library package in `packages/inspector`.
- An example app in `apps/example`.

To get started with the project, make sure you have the correct version of [Node.js](https://nodejs.org/) installed. See the [`.nvmrc`](./.nvmrc) file for the version used in this project.
Expand All @@ -25,9 +25,9 @@ The [example app](/apps/example/) demonstrates usage of the library. You need to

It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.

If you want to use Android Studio or Xcode to edit the native code, you can open the `apps/example/android` or `apps/example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `apps/example/ios/ReleaseInspectorExample.xcworkspace` in Xcode and find the source files at `Pods > Development Pods > react-native-release-inspector`.
If you want to use Android Studio or Xcode to edit the native code, you can open the `apps/example/android` or `apps/example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `apps/example/ios/InspectorExample.xcworkspace` in Xcode and find the source files at `Pods > Development Pods > inspector`.

To edit the Java or Kotlin files, open `apps/example/android` in Android studio and find the source files at `react-native-release-inspector` under `Android`.
To edit the Java or Kotlin files, open `apps/example/android` in Android studio and find the source files at `inspector` under `Android`.

You can use various commands from the root directory to work with the project.

Expand All @@ -52,7 +52,7 @@ yarn example ios
To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this:

```sh
Running "ReleaseInspectorExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
Running "InspectorExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

Note the `"fabric":true` and `"concurrentRoot":true` properties.
Expand Down
48 changes: 23 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<a href="https://www.callstack.com/open-source?utm_campaign=generic&utm_source=github&utm_medium=referral&utm_content=react-native-release-inspector" align="center">
<a href="https://www.callstack.com/open-source?utm_campaign=generic&utm_source=github&utm_medium=referral&utm_content=inspector" align="center">
<picture>
<img alt="react-native-release-inspector" src="./docs/assets/banner.png">
<img alt="inspector" src="./docs/assets/banner.png">
</picture>
</a>

Expand All @@ -12,15 +12,15 @@

---

# react-native-release-inspector
# inspector

The React on Web allows the users to run [profilable](https://react.dev/reference/dev-tools/react-performance-tracks#using-profiling-builds) builds to get near to production experience. This is the sweetest spot to having more confident profiling. However, on React Native this wasn't possible until now.

This package fixes this gap following the same analogy from React on Web, by allowing React Native to load Profiling shim for Release builds. 🚀

## Demo

![release-inspector](./docs/assets/inspector.gif)
![inspector](./docs/assets/inspector.gif)

<hr/>

Expand Down Expand Up @@ -51,7 +51,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
## Installation

```sh
npm install @callstack/react-native-release-inspector
npm install @callstack/inspector
```

#### Additional For Expo:
Expand All @@ -66,7 +66,7 @@ npm install --dev @react-native/metro-config@YOUR_RN_VERSION
Add this to the top level of `index.js`:

```diff
+import '@callstack/react-native-release-inspector';
+import '@callstack/inspector';
import { AppRegistry } from 'react-native';
```

Expand All @@ -77,7 +77,7 @@ import { AppRegistry } from 'react-native';

- Create an `entry.tsx` file, if you don't have it already:
```tsx
import "@callstack/react-native-release-inspector";
import "@callstack/inspector";
import { ExpoRoot } from "expo-router";
import { AppRegistry } from "react-native";

Expand All @@ -88,7 +88,7 @@ function App() {

AppRegistry.registerComponent("main", () => App);
```
> This is required to allow importing `@callstack/react-native-release-inspector` as the first module
> This is required to allow importing `@callstack/inspector` as the first module


- Update `package.json` to reflect this entry file:
Expand Down Expand Up @@ -120,12 +120,10 @@ module.exports = config;

<hr/>

Update your `metro.config` with `withReactNativeReleaseInspector`:
Update your `metro.config` with `withInspector`:

```diff
+const {
+ withReactNativeReleaseInspector,
+} = require('@callstack/react-native-release-inspector/metro');
+const { withInspector } = require('@callstack/inspector/metro');

const root = path.resolve(__dirname, '../..');

Expand All @@ -134,7 +132,7 @@ const config = withMetroConfig(getDefaultConfig(__dirname), {
dirname: __dirname,
});

+module.exports = withReactNativeReleaseInspector(config, true);
+module.exports = withInspector(config, true);
```

#### Step 3:
Expand All @@ -158,9 +156,9 @@ Now build and run your app in release mode, you should see the react devtools co

### API

The `@callstack/react-native-release-inspector` requires the user to configure their `metro.config` as shown above. This `withReactNativeReleaseInspector` receives the following arguments:
The `@callstack/inspector` requires the user to configure their `metro.config` as shown above. This `withInspector` receives the following arguments:

- `withReactNativeReleaseInspector(config, enabled)`
- `withInspector(config, enabled)`
- `config: MetroConfig`
- User only need to pass the config instance from Metro
- `enabled: Boolean`
Expand All @@ -169,7 +167,7 @@ The `@callstack/react-native-release-inspector` requires the user to configure t

### CLI

The `@callstack/react-native-release-inspector` exposes a CLI `inspector` to start the instance of React DevTools.
The `@callstack/inspector` exposes a CLI `inspector` to start the instance of React DevTools.

It supports the following options:

Expand All @@ -181,9 +179,9 @@ It supports the following options:
Sample Usages:

```bash
yarn inspector start
yarn inspector help
yarn inspector -h
npx inspector start
npx inspector help
npx inspector -h
```
<hr/>

Expand All @@ -195,7 +193,7 @@ yarn inspector -h

## Made with ❤️ at Callstack

**react-native-release-inspector** is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.
**inspector** is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

[Callstack](https://www.callstack.com/) is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!

Expand All @@ -207,9 +205,9 @@ Made with [create-react-native-library](https://github.com/callstack/react-nativ

MIT

[license-badge]: https://img.shields.io/npm/l/react-native-release-inspector?style=for-the-badge
[license]: https://github.com/callstackincubator/react-native-release-inspector/blob/main/LICENSE
[npm-downloads-badge]: https://img.shields.io/npm/dm/react-native-release-inspector?style=for-the-badge
[npm-downloads]: https://www.npmjs.com/package/react-native-release-inspector
[license-badge]: https://img.shields.io/npm/l/@callstack/inspector?style=for-the-badge
[license]: https://github.com/callstackincubator/inspector/blob/main/LICENSE
[npm-downloads-badge]: https://img.shields.io/npm/dm/@callstack/inspector?style=for-the-badge
[npm-downloads]: https://www.npmjs.com/package/@callstack/inspector
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
[prs-welcome]: https://github.com/callstackincubator/react-native-release-inspector
[prs-welcome]: https://github.com/callstackincubator/inspector
4 changes: 2 additions & 2 deletions apps/example/android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ android {
buildToolsVersion rootProject.ext.buildToolsVersion
compileSdk rootProject.ext.compileSdkVersion

namespace "releaseinspector.example"
namespace "inspector.example"
defaultConfig {
applicationId "releaseinspector.example"
applicationId "inspector.example"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
package releaseinspector.example
package inspector.example

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
Expand All @@ -11,7 +11,7 @@ class MainActivity : ReactActivity() {
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
override fun getMainComponentName(): String = "ReleaseInspectorExample"
override fun getMainComponentName(): String = "InspectorExample"

/**
* Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
package releaseinspector.example
package inspector.example

import android.app.Application
import com.facebook.react.PackageList
Expand Down
2 changes: 1 addition & 1 deletion apps/example/android/app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<resources>
<string name="app_name">ReleaseInspectorExample</string>
<string name="app_name">InspectorExample</string>
</resources>
2 changes: 1 addition & 1 deletion apps/example/android/settings.gradle
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
rootProject.name = 'releaseinspector.example'
rootProject.name = 'inspector.example'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')
4 changes: 2 additions & 2 deletions apps/example/app.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"name": "ReleaseInspectorExample",
"displayName": "ReleaseInspectorExample"
"name": "InspectorExample",
"displayName": "InspectorExample"
}
4 changes: 2 additions & 2 deletions apps/example/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ module.exports = {
'module-resolver',
{
alias: {
'@callstack/react-native-release-inspector':
'../../packages/react-native-release-inspector/src',
'@callstack/inspector':
'../../packages/inspector/src',
},
},
],
Expand Down
2 changes: 1 addition & 1 deletion apps/example/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import '@callstack/react-native-release-inspector';
import '@callstack/inspector';
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';
Expand Down
Loading
Loading