fix(template): upgrade plugin to React Native 0.73

release-npm
tobua · Dec 10, 2023 · bd16a7d · bd16a7d
1 parent 20cfa38
commit bd16a7d
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 161 deletions.
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
@@ -7,13 +7,16 @@ on:
 jobs:
   test-release:
     runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: write
     steps:
       - uses: actions/checkout@v3
-      - run: npm install --legacy-peer-deps
+      - run: npm install
       - run: npm run build
       - name: 📱 Test
         run: npm test
       - name: 📢 Release
-        uses: tobua/release-npm-action@v1
+        uses: tobua/release-npm-action@v3
         with:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 node_modules
 package-lock.json
 dist
+IndicateApp
 app/**/*
-!app/App.js
+!app/App.tsx
 !app/black-gradient.png
diff --git a/Fade.tsx b/Fade.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { StyleSheet, View, ImageBackground, ImageSourcePropType } from 'react-native'
+// Image will be inlined by esbuild.
 import defaultGradient from './gradient.png'
 
 type Dimensions = { width: number; height: number }

diff --git a/app/App.js → app/App.tsx b/app/App.js → app/App.tsx
diff --git a/babel.config.json b/babel.config.json
@@ -1,3 +1,3 @@
 {
-  "presets": ["module:metro-react-native-babel-preset"]
+  "presets": ["module:@react-native/babel-preset"]
 }
diff --git a/create-app.js b/create-app.js
@@ -1,28 +1,29 @@
 #!/usr/bin/env node
+import { cpSync, renameSync, rmSync } from 'fs'
 import { join } from 'path'
 import { execSync } from 'child_process'
-import copy from 'recursive-copy'
-import rimraf from 'rimraf'
 
 // Enhances source files inside /app with a fresh RN project template.
 const appName = 'IndicateApp'
 
 console.log('⌛ Initializing a fresh RN project...')
 
-execSync(`npx react-native init ${appName}`, {
+execSync(`npx react-native init ${appName} --skip-git-init true --install-pods true`, {
   // Write output to cnosole.
   stdio: 'inherit',
 })
 
-// Copy to destination directory, leaving source files untouched.
-await copy(appName, 'app', {
-  dot: true,
-  overwrite: false,
-  filter: ['**/*', '!App.js'],
-})
+cpSync('app/App.tsx', `${appName}/App.tsx`)
+cpSync('app/black-gradient.png', `${appName}/black-gradient.png`)
+
+rmSync('app', { recursive: true })
+
+renameSync(appName, 'app')
 
-// Remove temporary project directory.
-rimraf.sync(appName)
+// Run build to ensure distributed files for plugin exist.
+execSync('npm run build', {
+  stdio: 'inherit',
+})
 
 // Install this package locally, avoiding symlinks.
 execSync('npm install $(npm pack .. | tail -1) --legacy-peer-deps', {

diff --git a/index.tsx b/index.tsx
@@ -1,55 +1,22 @@
-import React, { ReactNode, useState } from 'react'
+import React, { useState } from 'react'
 import {
   ScrollView,
   SafeAreaView,
   LayoutChangeEvent,
   NativeSyntheticEvent,
   NativeScrollEvent,
-  ScrollViewProps,
-  ImageSourcePropType,
-  StyleProp,
-  ViewStyle,
 } from 'react-native'
-import omit from 'omit.js'
 import { getDirectionFromBoolean } from './direction'
 import { Fade } from './Fade'
-import type { Direction, FadeType, View, Content } from './types'
-
-type Props = {
-  appearanceOffset: number
-  fadeWidth: number
-  horizontal?: boolean
-  vertical?: boolean
-  style?: StyleProp<ViewStyle>
-  innerViewStyle?: StyleProp<ViewStyle>
-  wrapperStyle?: StyleProp<ViewStyle>
-  contentContainerStyle?: StyleProp<ViewStyle>
-  gradient?: string | ImageSourcePropType
-  children: ReactNode
-} & ScrollViewProps
-
-type InputProps = {
-  appearanceOffset?: number
-  fadeWidth?: number
-  horizontal?: boolean
-  vertical?: boolean
-  style?: StyleProp<ViewStyle>
-  innerViewStyle?: StyleProp<ViewStyle>
-  wrapperStyle?: StyleProp<ViewStyle>
-  contentContainerStyle?: StyleProp<ViewStyle>
-  gradient?: string | ImageSourcePropType
-  children: ReactNode
-} & ScrollViewProps
-
-type State = {
-  direction: Direction
-  setDirection: (value: Direction) => void
-  fade: FadeType
-  setFade: (value: FadeType) => void
-  view: View
-  setView: (value: View) => void
-  content: Content
-  setContent: (value: Content) => void
+import type { Direction, FadeType, View, Content, Props, State, InputProps } from './types'
+
+function omit<T extends object>(input: T, fields: (keyof T)[]) {
+  const shallowCopy = Object.assign({}, input)
+  for (let i = 0; i < fields.length; i += 1) {
+    const key = fields[i]
+    delete shallowCopy[key]
+  }
+  return shallowCopy
 }
 
 const handleLayout = (state: State, event: LayoutChangeEvent) => {
@@ -79,7 +46,7 @@ const handleScroll = (
   props: Props,
   state: State,
   direction: Direction,
-  event: NativeSyntheticEvent<NativeScrollEvent>
+  event: NativeSyntheticEvent<NativeScrollEvent>,
 ) => {
   const newFade = { ...state.fade }
   const offset = event.nativeEvent.contentOffset
@@ -101,7 +68,7 @@ const handleContentSizeChange = (
   state: State,
   direction: Direction,
   width: number,
-  height: number
+  height: number,
 ) => {
   const newContent = { ...state.content }
   const newFade = { ...state.fade }
@@ -129,7 +96,7 @@ const renderInnerScrollView = (
   viewCompatibleProps: any,
   props: Props,
   state: State,
-  direction: Direction
+  direction: Direction,
 ) => {
   if (direction !== 'both') {
     return props.children
@@ -176,7 +143,7 @@ export default (props: InputProps): any => {
 
   // Scroll directions (horizontal, vertical or both).
   const [direction, setDirection] = useState<Direction>(
-    getDirectionFromBoolean(horizontal, vertical)
+    getDirectionFromBoolean(horizontal, vertical),
   )
   // Which fade elements are currently active.
   const [fade, setFade] = useState<FadeType>({
@@ -217,7 +184,7 @@ export default (props: InputProps): any => {
             state,
             direction === 'both' ? 'horizontal' : direction,
             width,
-            height
+            height,
           )
         }
         scrollEventThrottle={300}

diff --git a/package.json b/package.json
@@ -5,58 +5,55 @@
   "repository": "github:tobua/react-native-indicate",
   "license": "MIT",
   "author": "Matthias Giger",
-  "main": "dist/index.js",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
-  },
   "scripts": {
     "app": "node create-app.js",
     "app:install": "npm i --no-save $(npm pack . | tail -1)  --prefix app",
-    "build": "esbuild index.tsx --outdir=dist --bundle --minify --format=esm --sourcemap --external:react-native --external:react --loader:.png=dataurl && tsc",
-    "watch": "concurrently --kill-others \"npm run build:watch\" \"npm run copy\"",
-    "copy": "cpx 'dist/**/*' app/node_modules/react-native-indicate/dist --watch",
-    "build:watch": "esbuild index.tsx --watch --outdir=dist --bundle --format=esm --sourcemap --external:react-native --external:react --loader:.png=dataurl",
+    "build": "esbuild index.tsx --outdir=dist --bundle --format=esm --platform=neutral --sourcemap --external:react-native --external:react --loader:.png=dataurl && tsc",
+    "watch": "npm-run-all --parallel build:watch copy",
+    "copy": "cpx 'dist/**/*' app/node_modules/reactigation/dist --watch",
+    "build:watch": "esbuild index.tsx --watch --outdir=dist --bundle --format=esm --platform=neutral --sourcemap --external:react-native --external:react --loader:.png=dataurl",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
     "format": "prettier \"{,!(app|dist)/**/}*.{ts,tsx}\" --write"
   },
-  "dependencies": {
-    "omit.js": "^2.0.2"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-native": "^0.70.6"
-  },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/runtime": "^7.20.6",
-    "@react-native-community/eslint-config": "3.2.0",
-    "@types/jest": "^29.2.4",
-    "@types/react": "^18.0.26",
-    "@types/react-native": "^0.70.8",
-    "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
-    "babel-jest": "^29.3.1",
-    "concurrently": "^7.6.0",
+    "@react-native-community/cli": "^13.0.0",
+    "@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.10.4",
+    "@types/react": "^18.2.43",
+    "@types/react-native": "^0.72.8",
+    "@types/react-test-renderer": "^18.0.7",
+    "babel-jest": "^29.7.0",
     "cpx": "^1.5.0",
-    "esbuild": "^0.16.10",
-    "eslint": "^8.30.0",
+    "esbuild": "^0.19.9",
+    "eslint": "^8.55.0",
     "eslint-plugin-flowtype": "^8.0.3",
-    "jest": "^29.3.1",
-    "metro-react-native-babel-preset": "^0.73.6",
-    "prettier": "^2.8.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.1.1",
     "react": "^18.2.0",
-    "react-native": "^0.70.6",
+    "react-native": "^0.73.0",
     "react-test-renderer": "^18.2.0",
-    "recursive-copy": "^2.0.14",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.9.4"
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": ">= 18",
+    "react-native": ">= 0.70"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -67,60 +64,44 @@
     "overflow",
     "indicate"
   ],
+  "prettier": {
+    "printWidth": 100,
+    "semi": false,
+    "singleQuote": true
+  },
   "eslintConfig": {
-    "root": true,
-    "extends": "@react-native-community",
+    "extends": "@react-native",
     "rules": {
       "semi": 0
     },
     "ignorePatterns": [
       "dist",
       "app"
     ],
-    "parser": "@typescript-eslint/parser",
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "*.ts",
-          "*.tsx"
-        ],
-        "rules": {
-          "@typescript-eslint/no-shadow": [
-            "error"
-          ],
-          "no-shadow": "off",
-          "no-undef": "off"
-        }
-      }
-    ]
-  },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "printWidth": 100
+    "root": true
   },
   "jest": {
-    "preset": "react-native",
-    "testPathIgnorePatterns": [
-      "/app/"
-    ],
-    "transformIgnorePatterns": [
-      "node_modules/(?!react-native|@react-native)"
-    ],
-    "moduleNameMapper": {
-      "react-dom": "react-native",
-      "react-native-indicate": "<rootDir>"
-    },
     "moduleFileExtensions": [
       "ts",
       "tsx",
       "js",
       "jsx",
       "json",
       "node"
+    ],
+    "moduleNameMapper": {
+      "react-dom": "react-native",
+      "react-native-indicate": "<rootDir>"
+    },
+    "preset": "react-native",
+    "testPathIgnorePatterns": [
+      "/app/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!react-native|@react-native)"
     ]
+  },
+  "publishConfig": {
+    "provenance": true
   }
 }