@petbee/tsconfig 2.0.0 → 3.0.0

package/README.md

@@ -1,13 +1,31 @@
 # `@petbee/tsconfig`
 
-This is default `tsconfig.json` that should be used by all Petbee projects.
+This is the default `tsconfig.json` that should be used by all Petbee projects.
+
+## Features (v3.0.0)
+
+- ✅ **TypeScript 5.9+** - Modern TypeScript support
+- ✅ **ES2022+ Target** - Modern JavaScript features
+- ✅ **Modern Module Resolution** - `bundler` for web apps, `NodeNext` for Node.js
+- ✅ **Strict Type Safety** - Including `noUncheckedIndexedAccess` for safer array access
+- ✅ **Verbatim Module Syntax** - Better ESM compatibility
+- ✅ **React 17+ JSX** - New JSX transform (`react-jsx`)
 
 ## Install
 
 ```bash
-yarn add -D @petbee/tsconfig
+yarn add -D @petbee/tsconfig typescript
 ```
 
+## Module Resolution Guide
+
+This package provides different configs optimized for different project types:
+
+- **`base.json`** - For bundled web apps (Vite, Webpack) - Uses `"moduleResolution": "bundler"`
+- **`node/base.json`** - For Node.js ESM projects - Uses `"moduleResolution": "NodeNext"`
+- **`nestjs.json`** - For NestJS projects - Uses `"moduleResolution": "node"` (CommonJS)
+- **`react/*`** - For React projects - Uses modern JSX transform
+
 ## Usage
 
 ### React Project
@@ -47,7 +65,9 @@ Similarly for a react library project. Create a `tsconfig.json` in the root of y
 
 #### Project that run in the browser
 
-A configuration file is provided that included styles setup and a more conservative build target.
+A configuration file is provided that includes styles setup and modern React JSX transform.
+
+**Note:** This config uses `"jsx": "react-jsx"` (the new JSX transform from React 17+), which means you don't need to import React in every file that uses JSX.
 
 ```json
 {
@@ -59,11 +79,18 @@ A configuration file is provided that included styles setup and a more conservat
 }
 ```
 
+The React DOM config includes type definitions for:
+
+- Image imports (`.svg`, `.png`, `.jpg`, etc.)
+- Style imports (`.css`, `.scss`, `.module.css`, etc.)
+
 ### NestJS Project
 
 To start, create a `tsconfig.json` in the root of your project.
 
-A typical setup where the application sit in `[project root]/app` folder is as follow:
+**Note:** The NestJS config uses CommonJS module system (`"module": "commonjs"`) and Node.js module resolution, which is optimal for NestJS applications.
+
+A typical setup where the application sit in `[project root]/src` folder is as follow:
 
 ```json
 {
@@ -77,6 +104,8 @@ A typical setup where the application sit in `[project root]/app` folder is as f
 
 ### NodeJS Project
 
+**Note:** The Node.js config uses modern ESM module resolution (`"moduleResolution": "NodeNext"`). This is optimal for Node.js 18+ with native ESM support. If you're using CommonJS, consider using the NestJS config instead.
+
 #### Node Application Project
 
 To start, create a `tsconfig.json` in the root of your project.
@@ -93,6 +122,14 @@ A typical setup where the application sit in `[project root]/src` folder is as f
 }
 ```
 
+**For ESM projects**, ensure your `package.json` has:
+
+```json
+{
+  "type": "module"
+}
+```
+
 #### Node Library Project
 
 Similarly for a node library project. Create a `tsconfig.json` in the root of your project with a setup below assuming the library code sit in `[project root]/src` folder.
@@ -112,6 +149,11 @@ Similarly for a node library project. Create a `tsconfig.json` in the root of yo
 
 A base configuration file is also provided if the above does not fit your need.
 
+**Note:** The base config uses `"moduleResolution": "bundler"`, which is optimal for projects using modern bundlers (Vite, Webpack 5+, esbuild, etc.). If you need different module resolution:
+
+- For Node.js ESM: use `node/base.json`
+- For CommonJS: use `nestjs.json` or override with `"moduleResolution": "node"`
+
 ```json
 {
   "extends": "@petbee/tsconfig/base.json",

package/base.json

@@ -1,16 +1,22 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "isolatedModules": true,
+    "verbatimModuleSyntax": true,
     "experimentalDecorators": true,
-    "lib": ["dom", "es2020"],
-    "moduleResolution": "node",
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "noUncheckedIndexedAccess": true,
+    "allowUnusedLabels": false,
+    "allowUnreachableCode": false,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,

package/nestjs.json

@@ -1,17 +1,21 @@
 {
   "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
     "module": "commonjs",
+    "moduleResolution": "node",
     "declaration": true,
     "removeComments": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
-    "target": "es2020",
     "sourceMap": true,
     "outDir": "./dist",
     "baseUrl": "./",
     "incremental": true,
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true
   }
 }

package/node/base.json

@@ -1,15 +1,22 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "esModuleInterop": true,
     "isolatedModules": true,
+    "verbatimModuleSyntax": true,
     "experimentalDecorators": true,
-    "lib": ["es2020"],
-    "moduleResolution": "node",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "noUncheckedIndexedAccess": true,
+    "allowUnusedLabels": false,
+    "allowUnreachableCode": false,
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "strict": true
+    "strict": true,
+    "forceConsistentCasingInFileNames": true
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@petbee/tsconfig",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -15,5 +15,5 @@
   "peerDependencies": {
     "typescript": "^3 || ^4 || ^5"
   },
-  "gitHead": "0885e6ebef089afcee9b87428cf90ecb8c95e946"
+  "gitHead": "e78d31f90c9546fa3b7e1959902bc6d703956349"
 }

package/react/definitions/images.d.ts

@@ -0,0 +1,39 @@
+declare module '*.svg' {
+  const content: string
+  export default content
+}
+
+declare module '*.png' {
+  const content: string
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: string
+  export default content
+}
+
+declare module '*.jpeg' {
+  const content: string
+  export default content
+}
+
+declare module '*.gif' {
+  const content: string
+  export default content
+}
+
+declare module '*.webp' {
+  const content: string
+  export default content
+}
+
+declare module '*.ico' {
+  const content: string
+  export default content
+}
+
+declare module '*.bmp' {
+  const content: string
+  export default content
+}

package/react/definitions/styles.d.ts

@@ -0,0 +1,39 @@
+declare module '*.css' {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module '*.scss' {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module '*.sass' {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module '*.less' {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module '*.module.css' {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module '*.module.scss' {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module '*.module.sass' {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module '*.module.less' {
+  const content: { [className: string]: string }
+  export default content
+}

package/react/dom.json

@@ -1,10 +1,10 @@
 {
   "extends": "../base.json",
   "compilerOptions": {
-    "jsx": "react",
-    "lib": ["dom", "dom.iterable", "scripthost", "es2020"],
-    "module": "esnext",
-    "target": "es2020"
+    "jsx": "react-jsx",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "target": "ES2022"
   },
   "files": ["./definitions/images.d.ts", "./definitions/styles.d.ts"]
 }