fix: Fix TypeScript relative imports (#358)

* fix: Fix TypeScript relative imports

* Decouple `example` from tsconfig

* fix ESLint config

* add lint-ci script

* move example running to workflow

* test ts

* test eslint

* test ts

* fix ESLint formatter

* Revert "fix ESLint formatter"

This reverts commit 21aca0dcdb54d4ce98b33d2b4f1decc18bc82e85.

* Revert "test ts"

This reverts commit becc346ad3d097b7d3570ebc8b5bf80390aadf87.

* Revert "test eslint"

This reverts commit 9c9f0b81bf3aa57188f550a34b2a8151e364f3b0.

* Revert "test ts"

This reverts commit 3cbe7200608910087b43e0d9cdae0917b0b4215e.

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module',
   },
-  ignorePatterns: ['scripts', 'lib', 'docs', 'app.plugin.js'],
+  ignorePatterns: ['scripts', 'lib', 'docs', 'example', 'app.plugin.js'],
   plugins: ['@typescript-eslint'],
   extends: ['plugin:@typescript-eslint/recommended', '@react-native-community'],
   rules: {

.github/workflows/validate-js.yml

@@ -61,6 +61,12 @@ jobs:
       env:
         REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+    - name: Run TypeScript in example/ # Reviewdog tsc errorformat: %f:%l:%c - error TS%n: %m
+      run: |
+        cd example && yarn typescript | reviewdog -name="tsc" -efm="%f(%l,%c): error TS%n: %m" -reporter="github-pr-review" -filter-mode="nofilter" -fail-on-error -tee && cd ..
+      env:
+        REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
   lint:
     name: Lint JS (eslint, prettier)
     runs-on: ubuntu-latest
@@ -90,5 +96,11 @@ jobs:
     - name: Run ESLint with auto-fix
       run: yarn lint --fix
 
+    - name: Run ESLint in example/
+      run: cd example && yarn lint -f @jamesacarr/github-actions && cd ..
+
+    - name: Run ESLint in example/ with auto-fix
+      run: cd example && yarn lint --fix && cd ..
+
     - name: Verify no files have changed after auto-fix
       run: git diff --exit-code HEAD

docs/docusaurus.config.js

@@ -118,7 +118,7 @@ module.exports = {
         name: 'VisionCamera',
         entryPoints: ['../src'],
         exclude: "../src/index.ts",
-        tsconfig: '../tsconfig.build.json',
+        tsconfig: '../tsconfig.json',
         excludePrivate: true,
         excludeProtected: true,
         excludeExternals: true,

example/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  ignorePatterns: ['babel.config.js', 'metro.config.js', '.eslintrc.js', 'index.js'],
+  plugins: ['@typescript-eslint'],
+  extends: ['plugin:@typescript-eslint/recommended', '@react-native-community', '../.eslintrc.js'],
+};

example/package.json

@@ -9,7 +9,9 @@
     "start": "react-native start",
     "setup": "cd ios && bundle install",
     "pods": "cd ios && bundle exec pod install",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint-ci": "yarn lint -f ../node_modules/@firmnav/eslint-github-actions-formatter/dist/formatter.js",
+    "typescript": "tsc --noEmit"
   },
   "dependencies": {
     "@react-native-community/blur": "^3.6.0",

example/src/frame-processors/ExamplePlugin.ts

@@ -1,6 +1,8 @@
-/* global _WORKLET __example_plugin __example_plugin_swift */
+/* global __example_plugin __example_plugin_swift */
 import type { Frame } from 'react-native-vision-camera';
 
+declare let _WORKLET: true | undefined;
+
 export function examplePluginSwift(frame: Frame): string[] {
   'worklet';
   if (!_WORKLET) throw new Error('examplePluginSwift must be called from a frame processor!');

example/tsconfig.json

@@ -0,0 +1,15 @@
+
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "paths": {
+      "react-native-vision-camera": ["../src/index"]
+    },
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package.json

@@ -156,7 +156,7 @@
       [
         "typescript",
         {
-          "project": "tsconfig.build.json"
+          "project": "tsconfig.json"
         }
       ]
     ]

src/hooks/useFrameProcessor.ts

@@ -1,7 +1,7 @@
 /* global _setGlobalConsole */
 
 import { DependencyList, useCallback } from 'react';
-import type { Frame } from 'src/Frame';
+import type { Frame } from '../Frame';
 
 type FrameProcessor = (frame: Frame) => void;
 

src/utils/FormatFilter.ts

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import type { CameraDevice, CameraDeviceFormat, FrameRateRange } from 'react-native-vision-camera';
+import type { CameraDevice, CameraDeviceFormat, FrameRateRange } from '../CameraDevice';
 
 /**
  * Compares two devices by the following criteria:

tsconfig.build.json

@@ -1,5 +0,0 @@
-
-{
-  "extends": "./tsconfig",
-  "exclude": ["example"]
-}

tsconfig.json

@@ -1,9 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "react-native-vision-camera": ["./src/index"]
-    },
     "allowJs": false,
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
@@ -28,13 +24,13 @@
   },
   "include": [
     "src",
-    "example",
     ".eslintrc.js",
     "babel.config.js",
   ],
   "exclude": [
     "node_modules",
     "lib",
-    "docs"
+    "docs",
+    "example"
   ]
 }