feat(template): publish as TypeScript without build and use Bun

Uses the newly released `bun pm pack` to bundle the package for the demo app. release-npm

BREAKING CHANGE: Requires bun for installation and usage. Plugin published as TypeScript with works fine with the regular React Native template and no longer requires a build.

Author: tobua

README.md

@@ -4,16 +4,16 @@
 
 Starting point for creating React Native plugins in TypeScript without native code.
 
-- Bundle plugin in TypeScript with esbuild
+- Publish plugin as TypeScript with Bun
 - Setup demo app with plugin installed
-- Watch plugin for changes
+- Copy plugin changes over to demo app
 - Jest, ESLint and Prettier configured
 
 ## Usage
 
 ```
-bun --bun create react-native-plugin react-native-my-plugin
-npm init -y react-native-plugin@latest react-native-my-plugin / npx create-react-native-plugin@latest react-native-my-plugin
+bun create react-native-plugin react-native-my-plugin
+bunx create-react-native-plugin@latest react-native-my-plugin
 ```
 
 This will bootstrap a new plugin inside a folder named `react-native-my-plugin` accordingly. Inside that folder the commands mentioned hereafter are available. The prefix `react-native-` is optional and will be removed where the React Native context is implied.
@@ -25,16 +25,16 @@ Start working on your plugin by editing `index.tsx` which will be the entry poin
 Since you probably don't want to blind-code the whole plugin use the following command to generate an up-to-date React Native app which includes the plugin:
 
 ```
-npm run app
+bun app
 ```
 
-This will create an app inside `/app` where except `/app/App.tsx` all files are gitignored. Here you can try out various use cases of the plugin and use this as a way to demonstrate the plugin. The app can be started as usual by running `npm run ios` or `npm run android` inside the `/app` folder.
+This will create an app inside `/app` where except `/app/App.tsx` all files are gitignored. Here you can try out various use cases of the plugin and use this as a way to demonstrate the plugin. The app can be started as usual by running `bun ios` or `bun android` inside the `/app` folder.
 
 ```
-npm run watch
+bun copy
 ```
 
-Running the above in the root folder will watch the plugin source code for any kind of changes, rebuild and copy over the changes to the app which will then automatically hot-reload.
+Running the above in the root folder will watch the plugin source code for any kind of changes and copy over the changes to the app which will then automatically hot-reload.
 
 Don't forget to always check your plugin both on Android and iOS even though your not using native code the provided components might still differ depending on the platform.
 
@@ -43,8 +43,7 @@ Don't forget to always check your plugin both on Android and iOS even though you
 The template is configured to work with Jest out of the box. All non-native functionality can be tested from the terminal. With the following command you can run the tests which are found in a folder with the same name:
 
 ```
-npm test
-npm run test:watch # Keep watching and retesting on changes.
+bun run test
 ```
 
 ## Troubleshooting
@@ -55,8 +54,6 @@ If you have issues building the app for iOS try the following
 - Update Cocoapods with `sudo gem install cocoapods`
 - Update Pod dependencies in `app/ios` folder with `pod update`
 
-To avoid bundling additional dependencies with `esbuild` mark them as `--external` in the `npm run build` script.
-
 ## Examples
 
 The following plugins have been created with create-react-native-plugin as a starting point.

index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env bun
 import { execSync } from 'node:child_process'
 import { cpSync, existsSync, lstatSync, mkdirSync, renameSync, rmdirSync, unlinkSync } from 'node:fs'
 import { dirname, join } from 'node:path'
@@ -29,9 +29,8 @@ if (existsSync(name.regular)) {
 
 mkdirSync(name.regular)
 
-const npmPackagePath = dirname(new URL(import.meta.url).pathname)
-
-const templateDirectory = join(npmPackagePath, 'template')
+const packagePath = dirname(new URL(import.meta.url).pathname)
+const templateDirectory = join(packagePath, 'template')
 const destinationDirectory = join(process.cwd(), name.regular)
 
 cpSync(templateDirectory, destinationDirectory, { recursive: true })
@@ -48,22 +47,14 @@ customize(name, destinationDirectory)
 
 console.log('Installing dependencies...')
 
-// biome-ignore lint/correctness/noUndeclaredVariables: Used to detect Bun as the runtime.
-if (typeof Bun !== 'undefined') {
-  execSync('bun install', {
-    cwd: destinationDirectory,
-    stdio: 'inherit',
-  })
-} else {
-  execSync('npm install --legacy-peer-deps', {
-    cwd: destinationDirectory,
-    stdio: 'inherit',
-  })
-}
+execSync('bun install', {
+  cwd: destinationDirectory,
+  stdio: 'inherit',
+})
 
 console.log('')
 console.log(`😃 Created new plugin called ${name.regular} in ${destinationDirectory}.`)
 console.log('🛠️  Start coding in the file ./index.tsx.')
-console.log('🛠️  To preview the plugin edit app/App.tsx and create a RN installation with:')
+console.log('🛠️  To preview the plugin edit app/App.tsx and create a React Native installation with:')
 console.log(`🐚 cd ${name.regular}`)
-console.log('🐚 npm run app / bun app:bun')
+console.log('🐚 bun app')

package.json

@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
-    "zero-configuration": "^0.17.2"
+    "zero-configuration": "^0.17.3"
   },
   "trustedDependencies": [
     "zero-configuration"

template/.gitignore

@@ -1,8 +1,7 @@
 node_modules
-# package-lock.json / bun.lockb has no effect when publishing your plugin to npm.
-package-lock.json
+# Lockfiles have no effect when publishing your plugin to a registry.
 bun.lockb
-dist
 <%= pascal %>App
+*.tgz
 app/**/*
 !app/App.tsx

template/README.md

@@ -5,7 +5,7 @@ A plugin for React Native.
 ## Installation
 
 ```
-npm i <%= name %>
+bun install <%= name %>
 ```
 
 ## Usage
@@ -23,26 +23,22 @@ export () =>
 
 ## Development
 
-### Build
-
-Run a single build with `npm run build` and find the output in `/dist`.
-
 ### Tests
 
-Tests configured for React Native can be run with `npm test` or `npm run test:watch` in watch mode.
+Tests configured for React Native can be run with `bun run test`.
 
 ### Preview App
 
 To test your plugin on a device run the following to create a React Native app using it.
 
 ```
-npm run app
+bun app
 cd app
-npm run ios / npm run android
+bun ios / bun android
 ```
 
-The following command will automatically copy over changes made to the plugin to the app.
+The following command in the root will automatically copy over changes made to the plugin to the app.
 
 ```
-npm run watch
+bun copy
 ```

template/create-app.js

@@ -1,43 +1,28 @@
-import { execSync } from 'child_process'
-import { copyFileSync, cpSync, readFileSync, renameSync, rmSync, mkdirSync } from 'fs'
-import { join, resolve } from 'path'
-import Arborist from '@npmcli/arborist'
-import packlist from 'npm-packlist'
+import { execSync } from 'node:child_process'
+import { cpSync, renameSync, rmSync } from 'node:fs'
 
 // This script enhances source files inside /app with a fresh React Native template.
 const appName = '<%= pascal %>App'
-const isBun = typeof Bun !== 'undefined'
 
 console.log('⌛ Initializing a fresh RN project...')
 
-execSync(`${isBun ? 'bunx' : 'npx'} @react-native-community/cli init ${appName} --skip-git-init true --install-pods true`, {
+execSync(`bunx @react-native-community/cli init ${appName} --skip-git-init true --install-pods true`, {
   // Write output to cnosole.
   stdio: 'inherit',
 })
 
-copyFileSync('app/App.tsx', `${appName}/App.tsx`)
-
+cpSync('app/App.tsx', `${appName}/App.tsx`)
 rmSync('app', { recursive: true })
-
 renameSync(appName, 'app')
 
-// Run build to ensure distributed files for plugin exist.
-execSync(`${isBun ? 'bun' : 'npm'} run build`, {
-  stdio: 'inherit',
+// Install package to app.
+const output = execSync('bun pm pack', {
+  encoding: 'utf-8',
+})
+const tgzFileName = output.match(/[\w.-]+\.tgz/)[0]
+execSync(`bun install ../${tgzFileName}`, {
+  cwd: './app',
 })
-
-const packageName = JSON.parse(readFileSync('./package.json')).name
-const packageDirectory = resolve(`app/node_modules/${packageName}`)
-
-// Package files and copy them to app node_modules.
-// Couldn't get symlinks to work with metro.
-const arborist = new Arborist({ path: process.cwd() })
-const tree = await arborist.loadActual()
-const files = await packlist(tree)
-
-mkdirSync(packageDirectory, { recursive: true })
-
-files.forEach((file) => cpSync(join(process.cwd(), file), join(packageDirectory, file), { recursive: true }))
 
 console.log('')
 console.log('🍞 React Native App created inside /app.')

template/package.json

@@ -3,42 +3,33 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
-    "app": "node create-app.js",
-    "app:bun": "bun create-app.js",
-    "app:install": "npm i --no-save $(npm pack . | tail -1) --prefix app",
-    "build": "esbuild index.tsx --outdir=dist --bundle --format=esm --sourcemap --external:react-native --external:react",
-    "watch": "npm-run-all --parallel build:watch copy",
-    "copy": "cpx 'dist/**/*' app/node_modules/<%= name %>/dist --watch",
-    "build:watch": "esbuild index.tsx --watch --outdir=dist --bundle --format=esm --sourcemap --external:react-native --external:react",
+    "app": "bun create-app.js",
+    "copy": "cpx '*.{ts,tsx}' app/node_modules/<%= name %> --watch",
+    "format": "prettier \"{,!(app|dist)/**/}*.{ts,tsx}\" --write",
+    "lint": "eslint . --fix --ext .ts,.tsx",
     "test": "jest",
-    "test:watch": "jest --watchAll",
-    "types": "tsc",
-    "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
-    "format": "prettier \"{,!(app|dist)/**/}*.{ts,tsx}\" --write"
+    "types": "tsc && tsc --noEmit --project ./test/tsconfig.json"
   },
   "devDependencies": {
-    "@npmcli/arborist": "^7.5.4",
-    "@react-native-community/cli": "^14.0.0",
-    "@react-native/babel-preset": "^0.75.1",
-    "@react-native/eslint-config": "^0.75.1",
-    "@react-native/typescript-config": "^0.75.1",
+    "@react-native-community/cli": "^14.0.1",
+    "@react-native/babel-preset": "^0.75.2",
+    "@react-native/eslint-config": "^0.75.2",
+    "@react-native/typescript-config": "^0.75.2",
+    "@types/bun": "^1.1.8",
     "@types/jest": "^29.5.12",
-    "@types/node": "^22.4.0",
-    "@types/react": "^18.3.3",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.5",
     "@types/react-native": "^0.73.0",
     "@types/react-test-renderer": "^18.3.0",
     "babel-jest": "^29.7.0",
     "cpx": "^1.5.0",
-    "esbuild": "^0.23.1",
     "eslint": "8.57.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
-    "npm-packlist": "^8.0.2",
-    "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
-    "react-native": "^0.75.1",
+    "react-native": "^0.75.2",
     "react-test-renderer": "^18.3.1",
     "typescript": "^5.5.4"
   },
@@ -47,19 +38,17 @@
     "react-native": ">= 0.70"
   },
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./index.tsx",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
+    ".": "./index.tsx"
   },
-  "types": "./dist/index.d.ts",
+  "types": "./index.tsx",
   "files": [
-    "dist"
+    "*.ts",
+    "*.tsx"
   ],
   "prettier": {
-    "printWidth": 120,
+    "printWidth": 140,
     "semi": false,
     "singleQuote": true
   },
@@ -69,7 +58,6 @@
       "semi": 0
     },
     "ignorePatterns": [
-      "dist",
       "app"
     ],
     "root": true
@@ -78,13 +66,9 @@
     "moduleFileExtensions": [
       "ts",
       "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
+      "js"
     ],
     "moduleNameMapper": {
-      "react-dom": "react-native",
       "<%= name %>": "<rootDir>"
     },
     "preset": "react-native",

template/test/basic.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import renderer, { ReactTestRendererJSON } from 'react-test-renderer'
-import { <%= pascal %> } from '<%= name %>'
+import { <%= pascal %> } from '../index'
 
 test('Renders without any options.', () => {
   const rendered = renderer.create(<<%= pascal %> />)

template/test/docs.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View } from 'react-native'
 import renderer from 'react-test-renderer'
-import { <%= pascal %> } from '<%= name %>'
+import { <%= pascal %> } from '../index'
 
 test('README example renders correctly.', () => {
   const tree = renderer.create(

template/test/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "strict": false
+  },
   "include": ["*"]
 }