Add a package to share a common tsconfig (#13)

* feat: add a new package for sharing tsconfig.json

* feat: create a shareable tsconfig in the tsconfig package

* feat: use the shareable config in the example app

* feat: add an example that breaks a shared tsconfig rule

* deps: install missing eslint deps in the example app

* feat: break another tsconfig rule

* docs: add some documentation about the tsconfig package

* feat: set the repo version to the same value as the packages

* v0.2.0

* v0.3.0

* docs: add more information on how to publish packages

* feat: use tsconfig in example-app

* feat: update noImplicitReturns rule breaking example comment

* refacto: rename folder from tsconfig to typescript-config

* add script to run type tests in example-app

---------

Co-authored-by: Clément Dours <[email protected]>
Co-authored-by: Clément Dours <[email protected]>

Author: 3 people

README.md

@@ -29,6 +29,14 @@ Here are some useful commands:
 - rename the directory of a package: `mv package-my-config new-directory-name && yarn lerna bootstrap`,
 - run a script `do-something` that exists in at least one package: `yarn lerna run do-something` (this will try to run the script in all packages in which it is defined).
 
+## Publishing a new version of a package
+
+If this is the first time the package is published to npm, running `yarn lerna publish --no-private` [doesn't seem to work](https://github.com/lerna/lerna/issues/1821). Instead, you should `cd` into your package and run `yarn publish --access public`. `yarn` will then ask the new version the package should have.
+
+If the package has already been published on npm, you can use `yarn lerna publish --no-private` in the root directory of the project.
+
+For each of these two tasks, you will need to have an account on [npmjs.com](https://www.npmjs.com/) and to be added to the [@bam.tech](https://www.npmjs.com/settings/bam.tech/packages) organization.
+
 ## Running commands
 
 - `yarn lerna run start`: run the 'start' script in all packages (currently only present in `example-app`),

example-app/package.json

@@ -5,26 +5,30 @@
   "license": "MIT",
   "scripts": {
     "start": "node .",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "types":"tsc --noEmit"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
     "@types/react": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "eslint": "^8.31.0",
+    "@bam.tech/typescript-config": "*",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "eslint": "^8.32.0",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",
     "eslint-plugin-testing-library": "^5.11.0",
     "jest": "^29.5.0",
-    "prettier": "^2.8.8"
+    "prettier": "^2.8.8",
+    "typescript": "^4.9.4"
   },
   "private": "true",
   "dependencies": {
     "react": "^18.2.0",
-    "react-native": "^0.72.0"
+    "react-native": "^0.72.0",
+    "expo": "^47.0.13"
   }
 }

example-app/tsconfig-breaking-examples/break-tsconfig.ts

@@ -0,0 +1,22 @@
+// This example breaks the rule noImplicitReturns activated by the rule strict
+// (https://www.typescriptlang.org/tsconfig#noImplicitReturns)
+// specified in the imported tsconfig.
+export const lookupHeadphonesManufacturer = (
+  color: "blue" | "black"
+): string => {
+  if (color === "blue") {
+    return "beats";
+  } else {
+    ("bose");
+  }
+};
+
+// This example breaks the rule allowUnreachableCode: false (https://www.typescriptlang.org/tsconfig#allowUnreachableCode)
+// specified in the imported tsconfig.
+const fn = (n: number) => {
+  if (n > 5) {
+    return true;
+  } else {
+    return false;
+  }
+};

example-app/tsconfig.json

@@ -1,6 +1,3 @@
 {
-  "compilerOptions": {
-    "jsx": "react-native",
-    "baseUrl": "./"
-  }
+  "extends": "@bam.tech/typescript-config"
 }

lerna.json

@@ -1,5 +1,5 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useWorkspaces": true,
-  "version": "0.0.0"
+  "version": "0.2.0"
 }

packages/typescript-config/README.md

@@ -0,0 +1,24 @@
+# tsconfig for BAM
+
+This project is just a simple package that exposes a tsconfig.json file that gathers the compiler options that should be used in any new BAM project.
+
+## How to use?
+
+In your app, run `yarn add @bam.tech/typescript-config expo`.
+
+In your `.tsconfig.json` config file, extend the exported tsconfig:
+
+```json
+// tsconfig.json
+{
+  "extends": "@bam.tech/typescript-config/tsconfig"
+}
+```
+
+## How to customize?
+
+You can still customize your tsconfig by overriding any acceptable field.
+
+## How to improve?
+
+If you find a useful compiler options that you feel every project at BAM should use, feel free to open a PR.

packages/typescript-config/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@bam.tech/typescript-config",
+  "version": "0.3.0",
+  "license": "MIT",
+  "peerDependencies": {
+    "expo": ">=47"
+  }
+}

packages/typescript-config/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-native",
+    "lib": ["esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "types": ["react-native", "jest"]
+  }
+}