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

)

.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"
   }
 }

test/e2e/yarn.lock

@@ -6251,10 +6251,10 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@3.8.3:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
-  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
+typescript@4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
 
 ua-parser-js@^1.0.1:
   version "1.0.32"

test/typescript/ts3.8/index.ts

@@ -0,0 +1,2 @@
+// we need to import the SDK to ensure tsc check the types
+import * as _Sentry from '@sentry/react-native';

test/typescript/ts3.8/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "sentry-react-native-ts-3-8-test",
+  "version": "0.0.0",
+  "description": "Sentry React Native TypeScript 3.8 Test",
+  "main": "index.ts",
+  "scripts": {
+    "type-check": "tsc --project tsconfig.build.json"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "17.0.58",
+    "@types/react-native": "0.65.30",
+    "typescript": "3.8.3"
+  },
+  "dependencies": {
+    "@sentry/react-native": "file:.yalc/@sentry/react-native",
+    "react": "17.0.2",
+    "react-native": "0.65.3"
+  }
+}

test/typescript/ts3.8/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "include": [
+    "index.ts",
+  ],
+  "compilerOptions": {
+    "skipLibCheck": false,
+    "noEmit": true,
+    "types": [],
+    "jsx": "react-native",
+    "target": "es6",
+    "moduleResolution": "node",
+  },
+}