feat(typescript): use TypeScript as plugin source code

Also automate release and generally improve and overhaul the setup. release-npm

BREAKING CHANGE: source code switches from JavaScript (with Flow) to TypeScript

Author: tobua

.github/workflows/push.yml

@@ -0,0 +1,14 @@
+name: push
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  test-release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: tobua/release-npm-action@v1
+        with:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.md

@@ -1,11 +1,12 @@
 # create-react-native-plugin
 
-<img align="right" src="https://github.com/tobua/create-react-native-plugin/raw/master/logo.png" width="20%" alt="Create React Native Plugin" />
+<img align="right" src="https://github.com/tobua/create-react-native-plugin/raw/main/logo.png" width="20%" alt="Create React Native Plugin" />
 
-Starting point for creating React Native plugins without native code.
+Starting point for creating React Native plugins in TypeScript without native code.
 
-- Setup demo app with plugin
-- Watch plugin source for changes
+- Bundle plugin in TypeScript with esbuild
+- Setup demo app with plugin installed
+- Watch plugin for changes
 
 ## Usage
 
@@ -17,7 +18,7 @@ npx create-react-native-plugin 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.
 
-Start working on your plugin by editing `src/index.js` which will be the entry point for the plugin.
+Start working on your plugin by editing `index.tsx` which will be the entry point for the plugin.
 
 ## App
 
@@ -33,7 +34,7 @@ This will create an app inside `/app` where except `/app/App.js` all files are g
 npm run watch
 ```
 
-Running the above will watch the plugin `/src/` folder for any kind of changes and copy them over to the app which will then automatically hot-reload.
+Running the above 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.
 
 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,11 +44,12 @@ The template is configured to work with Jest out of the box. All non-native func
 
 ```
 npm test
+npm run test:watch # Keep watching and retesting on changes.
 ```
 
-## Types
+## TypeScript
 
-Since React Native will usually run in a modern JavaScript engine there is no need to transpile your source code and apps can directly use the plugin source code. The Flow type checker is the default type system for react native and the source code is writting in flow. While TypeScript is the more popular type checker overall flow is more popular in the React Native ecosystem and can be used out of the box. Therefore this package will only support flow.
+Flow the type checker native to React Native has largely failed to gain popularity and also lags behind TypeScript in many other important aspects. Since a good chunk of bigger React Native projects are written in TypeScript plugins should provide type definitions.
 
 ## Troubleshooting
 
@@ -57,6 +59,8 @@ 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.
@@ -65,5 +69,11 @@ The following plugins have been created with create-react-native-plugin as a sta
   JS-only navigation for React Native.
 - [React Native Cols](https://github.com/tobua/react-native-cols)
   Grid for React Native.
-- [React Native Indicate](https://github.com/tobua/indicate/tree/master/plugins/react-native)
+- [React Native Indicate](https://github.com/tobua/react-native-indicate)
   Scroll indicator for views with overflow.
+- [Naxos](https://github.com/tobua/naxos)
+  UI Library.
+
+<p align="center">
+  <img src="https://github.com/tobua/create-react-native-plugin/raw/main/app.png" alt="Plugin running in Preview App" width="250">
+</p>

README.md

@@ -3,13 +3,14 @@ import { readFileSync, writeFileSync } from 'fs'
 
 const files = [
   'app/App.js',
-  'src/index.js',
-  'test/basic.test.js',
-  'test/docs.test.js',
-  '.flowconfig',
+  'test/basic.test.tsx',
+  'test/docs.test.tsx',
+  'babel.config.json',
   'create-app.js',
+  'index.tsx',
   'package.json',
   'README.md',
+  'tsconfig.json',
 ]
 
 // Replace template values with plugin name.

app.png

@@ -16,9 +16,7 @@ if (args.length < 3) {
 const name = names(args[2])
 
 if (existsSync(name.regular)) {
-  console.warn(
-    `A folder or file named ${name.regular} already exists in ${process.cwd()}.`
-  )
+  console.warn(`A folder or file named ${name.regular} already exists in ${process.cwd()}.`)
   process.exit()
 }
 
@@ -49,12 +47,8 @@ execSync('npm install --legacy-peer-deps', {
 })
 
 console.log('')
-console.log(
-  `😃 Created new plugin called ${name.regular} in ${destinationDirectory}.`
-)
-console.log(`🛠️  Start coding in the file src/index.js.`)
-console.log(
-  `🛠️  To preview the plugin edit app/App.js and create a RN installation with:`
-)
+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.js and create a RN installation with:`)
 console.log(`🐚 cd ${name.regular}`)
 console.log('🐚 npm run app')

customize.js

@@ -1,7 +1,7 @@
 {
   "name": "create-react-native-plugin",
   "description": "Template for creating React Native plugins without native code.",
-  "version": "1.1.5",
+  "version": "0.0.0-development",
   "repository": "github:tobua/create-react-native-plugin",
   "license": "MIT",
   "author": "Matthias Giger",
@@ -10,28 +10,23 @@
   },
   "dependencies": {
     "change-case": "4.1.2",
-    "fs-extra": "10.0.0"
+    "fs-extra": "10.1.0"
   },
   "type": "module",
-  "main": "index.js",
-  "exports": {
-    "default": "./index.js"
-  },
-  "sideEffects": true,
   "bin": "index.js",
   "source": "index.js",
   "files": [
     "template",
     "template/.gitignore",
-    "**/*.js"
+    "*.js"
   ],
   "keywords": [
     "react-native",
     "plugin",
     "template"
   ],
   "devDependencies": {
-    "padua": "^0.3.9"
+    "padua": "^0.5.6"
   },
   "prettier": "padua/configuration/.prettierrc.json",
   "eslintConfig": {
@@ -42,8 +37,5 @@
         "ignorePackages"
       ]
     }
-  },
-  "engines": {
-    "node": ">= 14"
   }
 }

index.js

@@ -1,5 +1,6 @@
 node_modules
 # package-lock.json has no effect when publishing your plugin to npm.
 package-lock.json
+dist
 app/**/*
 !app/App.js

package.json

@@ -13,7 +13,7 @@ npm i <%= name %>
 ```jsx
 import React from 'react'
 import { Text } from 'react-native'
-import <%= pascal %> from '<%= name %>'
+import { <%= pascal %> } from '<%= name %>'
 
 export () =>
     <<%= pascal %>>
@@ -23,20 +23,19 @@ export () =>
 
 ## Development
 
-### Tests
+### Build
 
-Tests configured for React Native can be run as follows
+Run a single build with `npm run build` and find the output in `/dist`.
 
-```
-npm test
-```
+### Tests
+
+Tests configured for React Native can be run with `npm test` or `npm run test:watch` in watch mode.
 
 ### Preview App
 
 To test your plugin on a device run the following to create a React Native app using it.
 
 ```
-npm install
 npm run app
 cd app
 react-native run-ios / react-native run-android