feat(typescript): Upgrade to TS v4 (back compatible with TS v3.8) (#2995)

Author: krystofwoldrich

.eslintrc.js

@@ -13,8 +13,9 @@ module.exports = {
     version: 'detect', // React version. "detect" automatically picks the version you have installed.
   },
   ignorePatterns: [
-    'test/react-native/versions/*',
+    'test/react-native/versions/**/*',
     'coverage/**/*',
+    'test/typescript/**/*',
   ],
   overrides: [
     {

.github/workflows/buildandtest.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
       - uses: actions/cache@v3
         id: cache
         with:
@@ -86,7 +86,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
       - uses: actions/cache@v3
         id: cache
         with:
@@ -97,6 +97,16 @@ jobs:
         run: yarn install
       - name: Build
         run: yarn build
+      - name: Archive dist
+        uses: actions/upload-artifact@v3
+        with:
+          name: dist
+          path: dist
+      - name: Archive ts3.8
+        uses: actions/upload-artifact@v3
+        with:
+          name: ts3.8
+          path: ts3.8
       - name: Pack
         run: yarn pack
       - name: Archive Artifacts
@@ -106,6 +116,45 @@ jobs:
           path: |
             ${{ github.workspace }}/*.tgz
 
+  job_type_check:
+    name: Type Check Typescript 3.8
+    runs-on: ubuntu-latest
+    needs: [job_build]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - uses: actions/cache@v3
+        id: cache
+        with:
+          path: test/typescript/ts3.8/node_modules
+          key: ${{ runner.os }}-${{ github.sha }}-ts3.8
+      - name: Download dist
+        uses: actions/download-artifact@v3
+        with:
+          name: dist
+          path: dist
+      - name: Download ts3.8
+        uses: actions/download-artifact@v3
+        with:
+          name: ts3.8
+          path: ts3.8
+      - name: Install Global Dependencies
+        run: yarn global add yalc
+      - name: Publish SDK
+        run: yalc publish
+      - name: Install SDK
+        working-directory: test/typescript/ts3.8
+        run: yalc add @sentry/react-native
+      - name: Install Dependencies
+        if: ${{ steps.cache.outputs['cache-hit'] != 'true' }}
+        working-directory: test/typescript/ts3.8
+        run: yarn install
+      - name: Type Check
+        working-directory: test/typescript/ts3.8
+        run: yarn type-check
+
   job_bundle:
     name: Bundle
     runs-on: ubuntu-latest
@@ -120,7 +169,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: 16
       - name: Cache Dependencies
         uses: actions/cache@v3
         id: cache

.github/workflows/e2e.yml

@@ -142,7 +142,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: 16
       - uses: actions/setup-java@v3
         with:
           java-version: "11"
@@ -165,7 +165,7 @@ jobs:
         run: yalc publish
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: 16
       - uses: actions/cache@v3
         id: app-plain-cache
         with:

.gitignore

@@ -11,6 +11,7 @@ node_modules
 build/
 DerivedData
 dist
+ts3.8
 coverage
 
 ## Various settings

.npmignore

@@ -5,6 +5,7 @@
 !CHANGELOG.md
 !README.md
 !/dist/**/*
+!ts3.8/**/*
 !RNSentry.podspec
 !sentry.gradle
 !react-native.config.js

CHANGELOG.md

@@ -3,7 +3,8 @@
 ## Unreleased
 
 ### Features
-
+- Add TS 4.1 typings ([#2995](https://github.com/getsentry/sentry-react-native/pull/2995))
+  - TS 3.8 are present and work automatically with older projects
 - Add CPU Info to Device Context ([#2984](https://github.com/getsentry/sentry-react-native/pull/2984))
 
 ### Fixes

package.json

@@ -6,15 +6,19 @@
   "description": "Official Sentry SDK for react-native",
   "typings": "dist/js/index.d.ts",
   "types": "dist/js/index.d.ts",
+  "typesVersions": {
+    "<4.1": { "*": ["ts3.8/*"] }
+  },
   "typescript": {
     "definition": "dist/js/index.d.ts"
   },
   "main": "dist/js/index.js",
   "scripts": {
-    "build": "yarn build:sdk && yarn build:tools",
+    "build": "yarn build:sdk && yarn downlevel && yarn build:tools",
     "build:sdk": "tsc -p tsconfig.build.json",
     "build:sdk:watch": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
     "build:tools": "tsc -p tsconfig.build.tools.json",
+    "downlevel": "downlevel-dts dist ts3.8/dist --to=3.8",
     "clean": "rimraf dist coverage",
     "test": "jest",
     "fix": "yarn fix:eslint && yarn fix:prettier",
@@ -64,6 +68,7 @@
     "@types/jest": "^29.2.5",
     "@types/react": "^18.0.25",
     "babel-jest": "^29.3.1",
+    "downlevel-dts": "^0.11.0",
     "eslint": "^7.6.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-native": "^3.8.1",
@@ -75,7 +80,7 @@
     "replace-in-file": "^6.0.0",
     "rimraf": "^4.1.1",
     "ts-jest": "^29.0.5",
-    "typescript": "3.8.3"
+    "typescript": "4.1.3"
   },
   "rnpm": {
     "commands": {},

src/js/sdk.tsx

@@ -138,7 +138,7 @@ export function init(passedOptions: ReactNativeOptions): void {
 /**
  * Inits the Sentry React Native SDK with automatic instrumentation and wrapped features.
  */
-export function wrap<P>(
+export function wrap<P extends JSX.IntrinsicAttributes>(
   RootComponent: React.ComponentType<P>,
   options?: ReactNativeWrapperOptions
 ): React.ComponentType<P> {

src/js/tracing/reactnativenavigation.ts

@@ -1,6 +1,6 @@
 import type { Transaction as TransactionType, TransactionContext } from '@sentry/types';
 import { logger } from '@sentry/utils';
-import type { EmitterSubscription } from 'react-native';
+import type { EmitterSubscription } from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
 import type { OnConfirmRoute, TransactionCreator } from './routingInstrumentation';
 import { InternalRoutingInstrumentation } from './routingInstrumentation';

test/e2e/package.json

@@ -16,7 +16,7 @@
     "appium-xcuitest-driver": "^4.16.6",
     "babel-jest": "^29.3.1",
     "jest": "^29.3.1",
-    "typescript": "3.8.3",
+    "typescript": "4.1.3",
     "webdriverio": "7.26.0"
   }
 }