Skip to content

Commit 15de62f

Browse files
committed
docs: enhance installation and FAQ sections to clarify TypeScript and JavaScript options
1 parent d2e776d commit 15de62f

7 files changed

Lines changed: 420 additions & 12 deletions

File tree

README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,14 @@ To create a new project using the boilerplate simply run :
3434
npx @react-native-community/cli@latest init MyApp --template @thecodingmachine/react-native-boilerplate
3535
```
3636

37+
During installation, you'll be asked:
38+
39+
```
40+
📘 Using typescript ? (Y/n)
41+
```
42+
43+
**Choose TypeScript (recommended)** or **Modern JavaScript (ESNext)** - the choice is yours! Both options provide the same architecture and features.
44+
3745
Assuming you have all the requirements installed, you can run the project by running:
3846

3947
- `yarn start` to start the metro bundler, in a dedicated terminal

documentation/docs/01-Getting Started.mdx

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,27 @@ all while maintaining a clear separation of concerns.
2323
If you find value in this boilerplate, consider giving us a star. It would brighten our day like a ray of sunshine! 🌈☀️
2424
:::
2525

26+
## TypeScript or JavaScript? You Choose! 🎯
27+
28+
One of the most frequently requested features: **the boilerplate works with both TypeScript and Modern JavaScript (ESNext)!**
29+
30+
During installation, you'll be prompted to choose:
31+
```bash
32+
📘 Using typescript ? (Y/n)
33+
```
34+
35+
- **TypeScript (Default)**: Full type safety, enhanced IDE support, and better refactoring capabilities
36+
- **Modern JavaScript (ESNext/ES2022)**: Latest JavaScript features and syntax, automatically compiled from the TypeScript source
37+
38+
Both options provide the **exact same architecture, features, and code organization**. The only difference is the language syntax.
39+
40+
[Learn more about the installation process and language choice →](/docs/installation#using-the-boilerplate)
41+
2642
## Features
2743

2844
| Features | Description |
2945
| ---------------------------------------------------------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
30-
| [`Javascript or TypeScript`](/docs/installation#using-the-boilerplate) | Every project, developer, team, and experience is unique. That's why you have the freedom to select either a JavaScript or TypeScript codebase. [The choice is yours!](/docs/installation#using-the-boilerplate) |
46+
| [`Javascript or TypeScript`](/docs/installation#using-the-boilerplate) | Every project, developer, team, and experience is unique. That's why you have the freedom to select either a Modern JavaScript (ESNext) or TypeScript codebase. [The choice is yours!](/docs/installation#using-the-boilerplate) |
3147
| [`Navigation`](/docs/navigate) | With [React Navigation](https://reactnavigation.org/), we offer a swift start to your navigation structure through a robust dependency. Check out the details in our [navigation structure documentation](/docs/navigate#navigation-structure). |
3248
| [`Data fetching`](/docs/data-fetching)| Leveraging [TanStack Query](https://tanstack.com/query/latest), data fetching has never been this effortless, with a clean domain-based architecture. |
3349
| [`Internationalization`](/docs/internationalization) | Our application is fully prepared for multilingual support, all thanks to [React i18next](https://react.i18next.com/). |

documentation/docs/02-Installation.md

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,37 @@ During the installation process, you will encounter the following prompt:
2626
📘 Using typescript ? (Y/n)
2727
```
2828

29-
This prompt gives you the flexibility to choose whether you want to use TypeScript or not.
30-
If you choose not to use TypeScript, the project will be created without any TypeScript configuration.
29+
This prompt gives you the flexibility to choose whether you want to use TypeScript or JavaScript for your project.
30+
31+
### TypeScript (Default - Recommended)
32+
33+
If you choose **Yes** (or simply press Enter), your project will be set up with TypeScript. This includes:
34+
- Full TypeScript support with strict type checking
35+
- Type definitions for all services, components, and hooks
36+
- Enhanced IDE autocomplete and error detection
37+
- Better refactoring capabilities
38+
39+
### JavaScript
40+
41+
If you choose **No**, the boilerplate will automatically:
42+
1. 📦 Install TypeScript temporarily as a build tool
43+
2. 🧱 Compile all TypeScript source files to JavaScript
44+
3. 🖼️ Copy assets (images, icons) to the compiled output
45+
4. ♻️ Replace the TypeScript source with the compiled JavaScript code
46+
5. 🌀 Remove TypeScript-specific files:
47+
- Type definition files (`*.d.ts`)
48+
- Type directories (`src/services/theme-generation/types/`)
49+
- Navigation type files
50+
51+
The resulting project will be pure JavaScript while maintaining the same architecture and structure.
52+
53+
:::note ESLint Configuration
54+
The ESLint configuration is designed to work with both TypeScript and JavaScript projects. When using JavaScript, TypeScript-specific rules are automatically disabled.
55+
:::
56+
57+
:::warning Migration Limitation
58+
Once you choose JavaScript, migrating back to TypeScript requires manual effort. Consider your team's preferences carefully before making this choice.
59+
:::
3160

3261
## Running the project
3362

documentation/docs/04-Guides/09-ESLint.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,37 @@ export default defineConfig([
6060
]);
6161
```
6262

63+
### JavaScript Support
64+
65+
The ESLint configuration works seamlessly with both TypeScript and JavaScript projects:
66+
67+
```js title="eslint.config.js"
68+
export default defineConfig([
69+
// ... TypeScript configs
70+
71+
// Specific configuration for JavaScript files
72+
{
73+
files: ['**/*.{js,jsx}'],
74+
...tseslint.configs.disableTypeChecked,
75+
},
76+
77+
// ... rest of config
78+
]);
79+
```
80+
81+
When you choose JavaScript during project initialization, TypeScript-specific type-checking rules are automatically disabled for `.js` and `.jsx` files. This includes:
82+
- All rules requiring type information (from `strictTypeChecked` and `stylisticTypeChecked`)
83+
- Type-aware linting rules
84+
85+
**All other rules remain active for JavaScript:**
86+
- Project structure enforcement
87+
- Code composition rules
88+
- Import sorting (perfectionist)
89+
- React best practices
90+
- Unicorn JS/TS best practices
91+
92+
This ensures code quality and architectural consistency regardless of whether you use TypeScript or JavaScript.
93+
6394
## Key Plugins
6495

6596
### 1. eslint-plugin-project-structure

0 commit comments

Comments
 (0)