fix(project): improve and update setup and template

tobua · tobua · commit cac24d4b6eb4 · 2024-06-12T19:45:10.000+02:00
release-npm
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
@@ -12,9 +12,8 @@ Starting point for creating React Native plugins in TypeScript without native co
 ## Usage
 
 ```
-npm init -y react-native-plugin@latest react-native-my-plugin
-# or
-npx create-react-native-plugin@latest react-native-my-plugin
+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
 ```
 
 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.
diff --git a/app.png b/app.png
diff --git a/customize.js b/customize.js
@@ -1,5 +1,5 @@
-import { join } from 'path'
-import { existsSync, readFileSync, writeFileSync } from 'fs'
+import { existsSync, readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
 
 const files = [
   'app/App.tsx',
diff --git a/index.js b/index.js
@@ -1,9 +1,9 @@
 #!/usr/bin/env node
-import { join, dirname } from 'path'
-import { existsSync, unlinkSync, rmdirSync, lstatSync, mkdirSync, cpSync, renameSync } from 'fs'
-import { execSync } from 'child_process'
-import names from './names.js'
+import { execSync } from 'node:child_process'
+import { cpSync, existsSync, lstatSync, mkdirSync, renameSync, rmdirSync, unlinkSync } from 'node:fs'
+import { dirname, join } from 'node:path'
 import customize from './customize.js'
+import names from './names.js'
 
 const args = process.argv
 
@@ -55,7 +55,7 @@ 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 ./index.tsx.`)
-console.log(`🛠️  To preview the plugin edit app/App.tsx and create a RN installation with:`)
+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(`🐚 cd ${name.regular}`)
 console.log('🐚 npm run app')
diff --git a/package.json b/package.json
@@ -5,21 +5,21 @@
   "repository": "github:tobua/create-react-native-plugin",
   "license": "MIT",
   "author": "Matthias Giger",
-  "padua": {
-    "source": true,
-    "ignore": [
-      "template"
-    ]
+  "scripts": {
+    "check": "biome check --write ."
   },
   "dependencies": {
-    "change-case": "5.4.2"
+    "change-case": "^5.4.4"
   },
   "devDependencies": {
-    "padua": "^2.0.9"
+    "@biomejs/biome": "^1.8.1",
+    "zero-configuration": "^0.10.1"
   },
+  "trustedDependencies": [
+    "zero-configuration"
+  ],
   "type": "module",
-  "bin": "index.js",
-  "source": "index.js",
+  "bin": "./index.js",
   "files": [
     "template",
     "template/.gitignore",
@@ -30,21 +30,32 @@
     "plugin",
     "template"
   ],
-  "prettier": "padua/configuration/.prettierrc.json",
-  "eslintConfig": {
-    "extends": "./node_modules/padua/configuration/eslint.cjs",
-    "rules": {
-      "no-console": 0,
-      "import/extensions": [
-        2,
-        "ignorePackages"
-      ]
-    }
-  },
   "publishConfig": {
     "provenance": true
   },
-  "engines": {
-    "node": ">= 18"
+  "configuration": {
+    "biome": {
+      "extends": "recommended",
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noNodejsModules": "off"
+          },
+          "suspicious": {
+            "noConsoleLog": "off"
+          },
+          "style": {
+            "noDefaultExport": "off"
+          }
+        }
+      },
+      "files": {
+        "ignore": [
+          "template"
+        ]
+      }
+    },
+    "gitignore": "recommended",
+    "vscode": "biome"
   }
 }
diff --git a/template/.gitignore b/template/.gitignore
@@ -1,6 +1,7 @@
 node_modules
-# package-lock.json has no effect when publishing your plugin to npm.
+# package-lock.json / bun.lockb has no effect when publishing your plugin to npm.
 package-lock.json
+bun.lockb
 dist
 <%= pascal %>App
 app/**/*
diff --git a/template/index.tsx b/template/index.tsx
@@ -80,10 +80,7 @@ const styles = StyleSheet.create({
 const ThirdLayer = ({ percent, pressed }: { percent: number; pressed: boolean }) => {
   if (percent > 50) {
     return (
-      <View
-        key={percent + 99999}
-        style={[styles.secondProgressLayer, rotation(percent - 50, 45)]}
-      />
+      <View key={percent + 99999} style={[styles.secondProgressLayer, rotation(percent - 50, 45)]} />
     )
   }
 
diff --git a/template/package.json b/template/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "app": "node create-app.js",
-    "app:install": "npm i --no-save $(npm pack . | tail -1)  --prefix app",
+    "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 && tsc",
     "watch": "npm-run-all --parallel build:watch copy",
     "copy": "cpx 'dist/**/*' app/node_modules/<%= name %>/dist --watch",
@@ -15,27 +15,27 @@
     "format": "prettier \"{,!(app|dist)/**/}*.{ts,tsx}\" --write"
   },
   "devDependencies": {
-    "@react-native/babel-preset": "^0.74.0",
-    "@react-native/eslint-config": "^0.74.0",
-    "@react-native/typescript-config": "^0.74.0",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.11.8",
-    "@types/react": "^18.2.48",
-    "@types/react-native": "^0.72.8",
-    "@types/react-test-renderer": "^18.0.7",
+    "@react-native/babel-preset": "^0.74.84",
+    "@react-native/eslint-config": "^0.74.84",
+    "@react-native/typescript-config": "^0.74.84",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-native": "^0.73.0",
+    "@types/react-test-renderer": "^18.3.0",
     "babel-jest": "^29.7.0",
     "cpx": "^1.5.0",
-    "esbuild": "^0.20.0",
-    "eslint": "^8.56.0",
+    "esbuild": "^0.21.5",
+    "eslint": "8.57.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-prettier": "^5.1.3",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.4",
-    "react": "^18.2.0",
-    "react-native": "^0.73.2",
-    "react-test-renderer": "^18.2.0",
-    "typescript": "^5.3.3"
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-native": "^0.74.2",
+    "react-test-renderer": "^18.3.1",
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "react": ">= 18",
@@ -54,7 +54,7 @@
     "dist"
   ],
   "prettier": {
-    "printWidth": 100,
+    "printWidth": 120,
     "semi": false,
     "singleQuote": true
   },

Original file line number	Diff line number	Diff line change
`@@ -80,10 +80,7 @@ const styles = StyleSheet.create({`
`80`	`80`	`const ThirdLayer = ({ percent, pressed }: { percent: number; pressed: boolean }) => {`
`81`	`81`	`if (percent > 50) {`
`82`	`82`	`return (`
`83`		`- <View`
`84`		`- key={percent + 99999}`
`85`		`- style={[styles.secondProgressLayer, rotation(percent - 50, 45)]}`
`86`		`- />`
	`83`	`+ <View key={percent + 99999} style={[styles.secondProgressLayer, rotation(percent - 50, 45)]} />`
`87`	`84`	`)`
`88`	`85`	`}`
`89`	`86`