presetter-preset-react 7.3.0 → 8.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +578 -61
- package/lib/eslint.override.d.ts +1 -1
- package/lib/eslint.override.d.ts.map +1 -1
- package/lib/eslint.override.js +1 -7
- package/lib/eslint.template.d.ts.map +1 -1
- package/lib/eslint.template.js +1 -1
- package/lib/index.d.ts +0 -7
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -2
- package/package.json +20 -16
- package/templates/tsconfig.yaml +3 -5
- package/types/eslint-plugin-react/index.d.ts +41 -0
package/README.md
CHANGED
@@ -1,109 +1,626 @@
|
|
1
|
-
|
1
|
+
# 🚀 presetter-preset-react
|
2
2
|
|
3
3
|

|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
• [Quick Start](#quick-start) • [Project Structure](#project-structure) • [Customization](#customization) • [Scripts](#script-template-summary) •
|
5
|
+
<div align="center">
|
8
6
|
|
9
7
|
[](https://github.com/alvis/presetter/releases)
|
10
8
|
[](https://github.com/alvis/presetter/actions)
|
11
9
|
[](https://codeclimate.com/github/alvis/presetter/maintainability)
|
12
10
|
[](https://codeclimate.com/github/alvis/presetter/test_coverage)
|
13
|
-
[](https://sonarcloud.io/summary/new_code?id=presetter)
|
14
12
|
[](https://libraries.io/npm/presetter-preset-react)
|
15
|
-
|
13
|
+
|
14
|
+
React development perfected — JSX/TSX, React linting, component-first workflows
|
15
|
+
|
16
|
+
• [Usage](#-usage) • [Configuration](#-configuration-details) • [Comparison](#-comparison) • [FAQ](#-faq) •
|
16
17
|
|
17
18
|
</div>
|
18
19
|
|
19
|
-
|
20
|
+
---
|
21
|
+
|
22
|
+
**This is a configuration extension that works with [Presetter](https://github.com/alvis/presetter/blob/master/packages/presetter), the configuration management tool.**
|
23
|
+
|
24
|
+
## ⚡ TL;DR / Quick Start
|
25
|
+
|
26
|
+
```bash
|
27
|
+
# Install React preset alongside a base preset
|
28
|
+
npm i -D presetter presetter-preset-esm presetter-preset-react
|
29
|
+
|
30
|
+
# Create presetter.config.ts
|
31
|
+
cat > presetter.config.ts << 'EOF'
|
32
|
+
import { preset } from 'presetter';
|
33
|
+
import esm from 'presetter-preset-esm';
|
34
|
+
import react from 'presetter-preset-react';
|
35
|
+
|
36
|
+
export default preset('my-react-app', {
|
37
|
+
extends: [esm, react],
|
38
|
+
});
|
39
|
+
EOF
|
40
|
+
|
41
|
+
# Bootstrap your project
|
42
|
+
npx presetter bootstrap
|
43
|
+
```
|
44
|
+
|
45
|
+
Your project now has **complete React development environment** — JSX/TSX support, React linting, asset imports, component-first workflows!
|
46
|
+
|
47
|
+
---
|
48
|
+
|
49
|
+
## ✨ React Development Excellence
|
50
|
+
|
51
|
+
### Need production-ready React tooling?
|
52
|
+
|
53
|
+
React development requires specialized tooling: JSX compilation, React-specific linting, component patterns, asset handling, and development workflows. Setting this up manually is complex and error-prone.
|
54
|
+
|
55
|
+
**What if you could get the complete React stack in seconds?**
|
56
|
+
|
57
|
+
### The React development challenge
|
58
|
+
|
59
|
+
| React Development Need | Manual Setup | With preset-react |
|
60
|
+
| ------------------------- | ---------------------------- | --------------------------------------- |
|
61
|
+
| **JSX/TSX Compilation** | ⚠️ Complex TypeScript config | ✅ Perfect JSX transform setup |
|
62
|
+
| **React Linting** | ❌ Basic rules only | ✅ Comprehensive React best practices |
|
63
|
+
| **Asset Type Safety** | ❌ No TypeScript support | ✅ Images, styles as typed imports |
|
64
|
+
| **Component Patterns** | ⚠️ No naming conventions | ✅ PascalCase components, prop ordering |
|
65
|
+
| **Development Workflow** | ⚠️ Fragmented tooling | ✅ Integrated Storybook + testing |
|
66
|
+
| **Modern React Features** | ❌ Legacy JSX transform | ✅ Latest React 18+ features |
|
67
|
+
|
68
|
+
### What you get instead
|
69
|
+
|
70
|
+
**presetter-preset-react is a configuration extension that adds comprehensive React development capabilities to the modern web stack.**
|
71
|
+
|
72
|
+
When used with [Presetter](https://github.com/alvis/presetter/blob/master/packages/presetter) (the configuration management tool), this preset extends [preset-web](../preset-web) with React-specific tooling, creating the complete React development environment with JSX/TSX support, React linting, asset type safety, and component-first workflows.
|
73
|
+
|
74
|
+
- ⚛️ **React 18+ Ready**: Modern JSX transform, latest React patterns
|
75
|
+
- 🎯 **TypeScript JSX**: Perfect TSX compilation and type safety
|
76
|
+
- 📝 **React Linting**: Comprehensive ESLint rules for React best practices
|
77
|
+
- 🖼️ **Asset Type Safety**: Import images, CSS modules with full TypeScript support
|
78
|
+
- 🧩 **Component-First**: PascalCase conventions, prop ordering, component patterns
|
79
|
+
- 🚀 **Complete Stack**: Inherits TailwindCSS, Storybook, and modern web tooling
|
80
|
+
|
81
|
+
---
|
82
|
+
|
83
|
+
## 🎯 React Development Without the Complexity
|
84
|
+
|
85
|
+
### The React tooling setup problem
|
86
|
+
|
87
|
+
React development requires coordinating multiple specialized tools:
|
88
|
+
|
89
|
+
- **JSX/TSX compilation**: TypeScript configuration for React JSX transform
|
90
|
+
- **React linting**: ESLint rules for React patterns, hooks, JSX best practices
|
91
|
+
- **Asset handling**: TypeScript declarations for importing images, CSS modules
|
92
|
+
- **Component conventions**: Naming patterns, prop ordering, component structure
|
93
|
+
- **Development environment**: Hot reloading, component development, testing
|
94
|
+
|
95
|
+
**Getting it right requires deep knowledge of React tooling, TypeScript JSX, and modern React patterns.**
|
96
|
+
|
97
|
+
### From fragmented React setup to integrated development
|
98
|
+
|
99
|
+
```diff
|
100
|
+
# Before: Manual React development setup
|
101
|
+
my-react-app/
|
102
|
+
├── tsconfig.json ← Basic TypeScript, missing JSX optimization
|
103
|
+
├── eslint.config.js ← Basic linting, no React rules
|
104
|
+
├── src/
|
105
|
+
│ ├── components/
|
106
|
+
│ │ └── Button.tsx ← No linting for React patterns
|
107
|
+
│ ├── assets/
|
108
|
+
│ │ └── logo.png ← Cannot import in TypeScript
|
109
|
+
│ └── styles/
|
110
|
+
- └── Button.module.css ← Cannot import as CSS module
|
111
|
+
|
112
|
+
# After: Extended with React development stack
|
113
|
+
my-react-app/
|
114
|
+
+├── presetter.config.ts ← Base preset + web + React extensions
|
115
|
+
├── tsconfig.json ← Enhanced with React JSX transform
|
116
|
+
├── eslint.config.ts ← Enhanced with React linting rules
|
117
|
+
+├── types/
|
118
|
+
+│ ├── image.d.ts ← TypeScript declarations for images
|
119
|
+
+│ └── style.d.ts ← TypeScript declarations for CSS modules
|
120
|
+
├── src/
|
121
|
+
│ ├── components/
|
122
|
+
│ │ └── Button.tsx ← React linting, prop ordering, naming
|
123
|
+
│ ├── assets/
|
124
|
+
│ │ └── logo.png ← Import as typed asset
|
125
|
+
│ └── styles/
|
126
|
+
+ └── Button.module.css ← Import as typed CSS module object
|
127
|
+
```
|
128
|
+
|
129
|
+
### How React development integration works
|
130
|
+
|
131
|
+
1. **JSX/TSX Compilation** — TypeScript configured with `react-jsx` transform for modern React
|
132
|
+
2. **React Linting** — ESLint enhanced with React plugin and component best practices
|
133
|
+
3. **Asset Type Safety** — TypeScript declarations for importing images, CSS modules, styles
|
134
|
+
4. **Component Patterns** — Naming conventions, prop ordering, component organization
|
135
|
+
|
136
|
+
### Why this solves the real problem
|
137
|
+
|
138
|
+
- **Complete React environment**: Everything needed for professional React development
|
139
|
+
- **Modern React patterns**: Latest React 18+ features and best practices
|
140
|
+
- **Type-safe assets**: Import any asset with full TypeScript support
|
141
|
+
- **Component excellence**: Enforced patterns for maintainable React code
|
142
|
+
- **Integrated workflow**: Inherits Storybook, TailwindCSS, testing from web preset
|
20
143
|
|
21
|
-
|
144
|
+
---
|
22
145
|
|
23
|
-
|
24
|
-
- 🧪 @testing-library/react
|
25
|
-
- 📝 Recommended rules from eslint-plugin-react
|
146
|
+
## 🔍 Understanding Presetter vs This Extension
|
26
147
|
|
27
|
-
|
148
|
+
**Important distinction:**
|
28
149
|
|
29
|
-
|
150
|
+
| Component | Role | What it does |
|
151
|
+
| ---------------------------------------------------------------------------------- | ----------------------------- | -------------------------------------------------------------------------------- |
|
152
|
+
| **[Presetter](https://github.com/alvis/presetter/blob/master/packages/presetter)** | Configuration management tool | CLI that processes presets, generates config files, executes scripts |
|
153
|
+
| **Base Preset** | Core development template | Provides TypeScript, testing, building capabilities (essentials, esm, cjs, etc.) |
|
154
|
+
| **[preset-web](../preset-web)** | Web development extension | Adds TailwindCSS, Storybook, browser optimization |
|
155
|
+
| **presetter-preset-react** | React development extension | Adds JSX/TSX, React linting, asset types, component patterns |
|
30
156
|
|
31
|
-
|
157
|
+
**Think of it like:**
|
32
158
|
|
33
|
-
|
159
|
+
- **Presetter** = The engine that builds houses
|
160
|
+
- **Base preset** = The blueprint for a functional house
|
161
|
+
- **Web preset** = The modern kitchen and smart home systems
|
162
|
+
- **This extension** = The family room, entertainment center, and comfort features
|
163
|
+
|
164
|
+
This preset **extends** [preset-web](../preset-web) with React-specific capabilities. For advanced usage, customization, and troubleshooting, **[visit the main Presetter documentation](https://github.com/alvis/presetter/blob/master/packages/presetter)**.
|
165
|
+
|
166
|
+
---
|
167
|
+
|
168
|
+
## 🚀 Usage
|
169
|
+
|
170
|
+
### 🟢 Basic React Development Setup
|
171
|
+
|
172
|
+
#### Step 1: Install Extension with Base Preset
|
173
|
+
|
174
|
+
```jsonc
|
175
|
+
// package.json
|
176
|
+
{
|
177
|
+
"scripts": {
|
178
|
+
"build": "run build",
|
179
|
+
"test": "run test",
|
180
|
+
"storybook": "storybook dev -p 6006",
|
181
|
+
"dev": "run develop",
|
182
|
+
},
|
183
|
+
"devDependencies": {
|
184
|
+
"presetter": "latest",
|
185
|
+
"presetter-preset-esm": "latest",
|
186
|
+
"presetter-preset-react": "latest",
|
187
|
+
},
|
188
|
+
"dependencies": {
|
189
|
+
"react": "^18.0.0",
|
190
|
+
"react-dom": "^18.0.0",
|
191
|
+
},
|
192
|
+
}
|
193
|
+
```
|
34
194
|
|
35
195
|
```typescript
|
36
196
|
// presetter.config.ts
|
197
|
+
import { preset } from 'presetter';
|
198
|
+
import esm from 'presetter-preset-esm';
|
199
|
+
import react from 'presetter-preset-react';
|
200
|
+
|
201
|
+
export default preset('my-react-app', {
|
202
|
+
extends: [esm, react], // Base + React (includes web preset)
|
203
|
+
});
|
204
|
+
```
|
205
|
+
|
206
|
+
#### Step 2: Bootstrap & Develop
|
207
|
+
|
208
|
+
```bash
|
209
|
+
npm install
|
210
|
+
# Complete React development environment generated automatically
|
211
|
+
# JSX/TSX, React linting, asset imports, Storybook ready!
|
212
|
+
```
|
213
|
+
|
214
|
+
That's it! Start building React components with the complete modern stack.
|
215
|
+
|
216
|
+
---
|
217
|
+
|
218
|
+
### 🧑🔬 Advanced Usage: Custom React Optimizations
|
37
219
|
|
220
|
+
```typescript
|
221
|
+
// presetter.config.ts
|
38
222
|
import { preset } from 'presetter';
|
39
223
|
import esm from 'presetter-preset-esm';
|
40
224
|
import react from 'presetter-preset-react';
|
41
225
|
|
42
|
-
export default preset('
|
43
|
-
// NOTE
|
44
|
-
// you don't need to extends presetter-preset-web presets here since they are already included in the react preset
|
45
|
-
// however, you may need an additional preset like presetter-preset-esm for ESM support and other basic toolings
|
226
|
+
export default preset('advanced-react-app', {
|
46
227
|
extends: [esm, react],
|
47
228
|
override: {
|
48
|
-
|
229
|
+
variables: {
|
230
|
+
source: 'app', // Custom source directory
|
231
|
+
types: 'typings', // Custom types directory
|
232
|
+
},
|
233
|
+
assets: {
|
234
|
+
'tsconfig.json': {
|
235
|
+
compilerOptions: {
|
236
|
+
jsx: 'react-jsx', // Modern JSX transform
|
237
|
+
jsxImportSource: 'react', // JSX import source
|
238
|
+
strict: true, // Strict TypeScript
|
239
|
+
},
|
240
|
+
},
|
241
|
+
'eslint.config.ts': {
|
242
|
+
rules: {
|
243
|
+
// Custom React rules
|
244
|
+
'react/jsx-sort-props': ['warn', { callbacksLast: true }],
|
245
|
+
'react/destructuring-assignment': ['warn', 'always'],
|
246
|
+
},
|
247
|
+
},
|
248
|
+
},
|
49
249
|
},
|
50
250
|
});
|
51
251
|
```
|
52
252
|
|
53
|
-
|
253
|
+
> **Need more customization options?** Check the [main Presetter documentation](https://github.com/alvis/presetter/blob/master/packages/presetter) for complete guides on overrides, extensions, and advanced configurations.
|
254
|
+
|
255
|
+
---
|
256
|
+
|
257
|
+
## 📖 API Reference
|
258
|
+
|
259
|
+
### Core React Development Extension
|
260
|
+
|
261
|
+
This preset extends [preset-web](../preset-web) with React-specific capabilities:
|
262
|
+
|
263
|
+
| Enhancement | Purpose | React Features |
|
264
|
+
| ------------------------- | ----------------- | ----------------------------------------------------- |
|
265
|
+
| **JSX/TSX Compilation** | React components | Modern React JSX transform, TypeScript JSX |
|
266
|
+
| **React Linting** | Code quality | Component patterns, hooks rules, JSX best practices |
|
267
|
+
| **Asset Type Safety** | Import handling | Images, CSS modules, styles as typed imports |
|
268
|
+
| **Component Conventions** | Code organization | PascalCase naming, prop ordering, component structure |
|
269
|
+
|
270
|
+
### JSX/TSX Configuration
|
271
|
+
|
272
|
+
#### TypeScript JSX Setup
|
273
|
+
|
274
|
+
```yaml
|
275
|
+
# tsconfig.json enhancements
|
276
|
+
compilerOptions:
|
277
|
+
jsx: react-jsx # Modern React 18+ JSX transform
|
278
|
+
target: ESNext # Latest JavaScript features
|
279
|
+
module: ESNext # ES modules
|
280
|
+
lib: [DOM, ESNext] # Browser + modern JavaScript
|
281
|
+
```
|
282
|
+
|
283
|
+
#### File Extension Support
|
284
|
+
|
285
|
+
- **TSX Files**: Full TypeScript + JSX support
|
286
|
+
- **JSX Files**: JavaScript + JSX support
|
287
|
+
- **Build Integration**: Both included in build and linting processes
|
288
|
+
|
289
|
+
### React ESLint Rules
|
290
|
+
|
291
|
+
#### Core React Rules
|
292
|
+
|
293
|
+
```typescript
|
294
|
+
// Essential React linting rules
|
295
|
+
'react/boolean-prop-naming': 'warn', // Consistent boolean props
|
296
|
+
'react/button-has-type': 'warn', // Button type attributes
|
297
|
+
'react/destructuring-assignment': 'warn', // Destructuring patterns
|
298
|
+
'react/jsx-sort-props': 'warn', // Prop ordering (callbacks last)
|
299
|
+
'react/sort-comp': 'warn', // Component method ordering
|
300
|
+
```
|
301
|
+
|
302
|
+
#### TypeScript Integration
|
303
|
+
|
304
|
+
```typescript
|
305
|
+
// TypeScript-React integration
|
306
|
+
'react/prop-types': 'off', // Use TypeScript instead
|
307
|
+
'@typescript-eslint/naming-convention': [
|
308
|
+
{ selector: 'function', format: ['camelCase', 'PascalCase'] }, // React components
|
309
|
+
{ selector: 'parameter', format: ['camelCase', 'PascalCase'] }, // Component props
|
310
|
+
]
|
311
|
+
```
|
312
|
+
|
313
|
+
### Asset Type Declarations
|
314
|
+
|
315
|
+
#### Image Import Types
|
316
|
+
|
317
|
+
```typescript
|
318
|
+
// types/image.d.ts - Generated automatically
|
319
|
+
declare module '*.avif' {
|
320
|
+
const src: string;
|
321
|
+
export default src;
|
322
|
+
}
|
323
|
+
declare module '*.bmp' {
|
324
|
+
const src: string;
|
325
|
+
export default src;
|
326
|
+
}
|
327
|
+
declare module '*.gif' {
|
328
|
+
const src: string;
|
329
|
+
export default src;
|
330
|
+
}
|
331
|
+
declare module '*.jpg' {
|
332
|
+
const src: string;
|
333
|
+
export default src;
|
334
|
+
}
|
335
|
+
declare module '*.jpeg' {
|
336
|
+
const src: string;
|
337
|
+
export default src;
|
338
|
+
}
|
339
|
+
declare module '*.png' {
|
340
|
+
const src: string;
|
341
|
+
export default src;
|
342
|
+
}
|
343
|
+
declare module '*.webp' {
|
344
|
+
const src: string;
|
345
|
+
export default src;
|
346
|
+
}
|
347
|
+
|
348
|
+
// SVG special handling
|
349
|
+
declare module '*.svg' {
|
350
|
+
const src: string;
|
351
|
+
export const ReactComponent: React.FunctionComponent<
|
352
|
+
React.SVGProps<SVGSVGElement>
|
353
|
+
>;
|
354
|
+
export default src;
|
355
|
+
}
|
356
|
+
```
|
357
|
+
|
358
|
+
#### CSS Module Types
|
359
|
+
|
360
|
+
```typescript
|
361
|
+
// types/style.d.ts - Generated automatically
|
362
|
+
declare module '*.css' {
|
363
|
+
const classes: { readonly [key: string]: string };
|
364
|
+
export default classes;
|
365
|
+
}
|
366
|
+
|
367
|
+
declare module '*.less' {
|
368
|
+
const classes: { readonly [key: string]: string };
|
369
|
+
export default classes;
|
370
|
+
}
|
371
|
+
|
372
|
+
declare module '*.scss' {
|
373
|
+
const classes: { readonly [key: string]: string };
|
374
|
+
export default classes;
|
375
|
+
}
|
376
|
+
```
|
377
|
+
|
378
|
+
### Configuration Variables
|
379
|
+
|
380
|
+
Inherited from base presets with React-specific defaults:
|
381
|
+
|
382
|
+
| Variable | Default | Description |
|
383
|
+
| --------------------- | --------- | ------------------------------------- |
|
384
|
+
| `source` | `"src"` | Source code directory |
|
385
|
+
| `types` | `"types"` | TypeScript declarations directory |
|
386
|
+
| `output` | `"lib"` | Build output directory |
|
387
|
+
| Base preset variables | Inherited | All variables from chosen base preset |
|
388
|
+
|
389
|
+
---
|
390
|
+
|
391
|
+
## 🔧 Configuration Details
|
392
|
+
|
393
|
+
### Enhanced TypeScript Configuration
|
394
|
+
|
395
|
+
```yaml
|
396
|
+
# Generated tsconfig.json
|
397
|
+
compilerOptions:
|
398
|
+
jsx: react-jsx # Modern React JSX transform
|
399
|
+
target: ESNext # Latest JavaScript features
|
400
|
+
lib: [DOM, DOM.Iterable, ESNext] # Browser APIs + modern JS
|
401
|
+
allowSyntheticDefaultImports: true # React import compatibility
|
402
|
+
esModuleInterop: true # Module interoperability
|
403
|
+
|
404
|
+
exclude:
|
405
|
+
- '**/*.stories.ts' # Exclude Storybook files from build
|
406
|
+
- '**/*.stories.tsx' # Exclude TSX Storybook files
|
407
|
+
```
|
408
|
+
|
409
|
+
### React ESLint Integration
|
410
|
+
|
411
|
+
#### Plugin Configuration
|
412
|
+
|
413
|
+
```typescript
|
414
|
+
// Enhanced ESLint with React
|
415
|
+
plugins: ['react'],
|
416
|
+
extends: ['plugin:react/recommended'],
|
417
|
+
settings: {
|
418
|
+
react: {
|
419
|
+
version: 'detect', // Auto-detect React version
|
420
|
+
},
|
421
|
+
},
|
422
|
+
parserOptions: {
|
423
|
+
ecmaFeatures: {
|
424
|
+
jsx: true, # Enable JSX parsing
|
425
|
+
},
|
426
|
+
},
|
427
|
+
```
|
428
|
+
|
429
|
+
#### Component-Specific Rules
|
430
|
+
|
431
|
+
```typescript
|
432
|
+
// React component linting
|
433
|
+
overrides: [
|
434
|
+
{
|
435
|
+
files: ['**/*.[jt]sx'],
|
436
|
+
rules: {
|
437
|
+
'max-lines-per-function': ['warn', { max: 120 }], // Larger React components
|
438
|
+
'jsdoc/require-returns': 'off', // JSX doesn't need return docs
|
439
|
+
},
|
440
|
+
},
|
441
|
+
],
|
442
|
+
```
|
443
|
+
|
444
|
+
### Asset Import Integration
|
445
|
+
|
446
|
+
#### Build Process Integration
|
447
|
+
|
448
|
+
```typescript
|
449
|
+
// lint-staged.config.js enhancement
|
450
|
+
'*.{tsx,jsx}': ['presetter run stage'], // Include React files in staging
|
451
|
+
```
|
452
|
+
|
453
|
+
#### Type Generation
|
454
|
+
|
455
|
+
- **Automatic**: Types generated during bootstrap
|
456
|
+
- **Directories**: Placed in configurable `types` directory
|
457
|
+
- **Updates**: Regenerated when preset configuration changes
|
458
|
+
|
459
|
+
---
|
460
|
+
|
461
|
+
## 🏎️ Performance
|
54
462
|
|
55
|
-
|
463
|
+
| Metric | Standard Web Preset | With preset-react |
|
464
|
+
| --------------------- | ------------------- | ------------------------------- |
|
465
|
+
| Component development | Basic HTML/CSS | **React components + JSX** |
|
466
|
+
| Type safety | Basic TypeScript | **Asset imports + React props** |
|
467
|
+
| Code quality | Web linting | **React best practices** |
|
468
|
+
| Development workflow | Manual setup | **Component-first tooling** |
|
469
|
+
| Asset handling | Manual imports | **Type-safe asset imports** |
|
56
470
|
|
57
|
-
|
58
|
-
and now you can try to run some example life cycle scripts (e.g. run prepare).
|
471
|
+
---
|
59
472
|
|
60
|
-
|
473
|
+
## 🌐 Compatibility
|
61
474
|
|
62
|
-
|
475
|
+
| Environment | Support |
|
476
|
+
| ------------ | --------------------------------------- |
|
477
|
+
| React | ≥ 18 (with React 16.14+ support) |
|
478
|
+
| Base Presets | Works with essentials, esm, cjs, hybrid |
|
479
|
+
| Browsers | Modern browsers (ES2022+) |
|
480
|
+
| Node.js | ≥ 18 |
|
481
|
+
| TypeScript | ≥ 5.0 |
|
63
482
|
|
64
|
-
|
483
|
+
### Extends
|
65
484
|
|
66
|
-
|
67
|
-
The `.d.ts` files are handy type definitions for you to import `.css` or image files in typescript.
|
485
|
+
- [`presetter-preset-web`](../preset-web) - Modern web development stack with TailwindCSS + Storybook
|
68
486
|
|
69
|
-
|
70
|
-
It's because `presetter-preset-react` extends `presetter-preset-web` which is a bundle only preset, meaning it only helps you to install the development packages specified in this preset only.
|
487
|
+
### Works With All Base Presets
|
71
488
|
|
72
|
-
|
489
|
+
- [`presetter-preset-essentials`](../preset-essentials) + web + React
|
490
|
+
- [`presetter-preset-esm`](../preset-esm) + web + React
|
491
|
+
- [`presetter-preset-cjs`](../preset-cjs) + web + React
|
492
|
+
- [`presetter-preset-hybrid`](../preset-hybrid) + web + React
|
73
493
|
|
494
|
+
### Can Be Combined With
|
495
|
+
|
496
|
+
- [`presetter-preset-strict`](../preset-strict) - React development + strict quality enforcement
|
497
|
+
|
498
|
+
---
|
499
|
+
|
500
|
+
## 🆚 Comparison
|
501
|
+
|
502
|
+
| Feature | Web Preset | With preset-react |
|
503
|
+
| -------------------------- | ----------- | --------------------------------- |
|
504
|
+
| **Component Framework** | Generic web | ✅ React + JSX/TSX |
|
505
|
+
| **Asset Imports** | Basic | ✅ Type-safe images + CSS modules |
|
506
|
+
| **Linting Rules** | Web-focused | ✅ React best practices |
|
507
|
+
| **Component Patterns** | None | ✅ PascalCase + prop ordering |
|
508
|
+
| **Development Experience** | Web tools | ✅ React-optimized workflow |
|
509
|
+
| **Type Safety** | Basic web | ✅ React components + assets |
|
510
|
+
|
511
|
+
### When to Use
|
512
|
+
|
513
|
+
✅ **Use preset-react when:**
|
514
|
+
|
515
|
+
- Building React applications or component libraries
|
516
|
+
- Need React-specific linting and patterns
|
517
|
+
- Want type-safe asset imports (images, CSS modules)
|
518
|
+
- Developing React components with Storybook
|
519
|
+
- Need modern React development workflow
|
520
|
+
- Want comprehensive React TypeScript setup
|
521
|
+
|
522
|
+
❌ **Consider alternatives when:**
|
523
|
+
|
524
|
+
- Building non-React web applications
|
525
|
+
- Using other frameworks (Vue, Angular, Svelte)
|
526
|
+
- Basic web development without component frameworks
|
527
|
+
- Node.js applications or APIs
|
528
|
+
|
529
|
+
---
|
530
|
+
|
531
|
+
## 🛠️ Troubleshooting
|
532
|
+
|
533
|
+
> **General Presetter issues?** See the [main troubleshooting guide](https://github.com/alvis/presetter/blob/master/README.md#troubleshooting) for common Presetter problems and solutions.
|
534
|
+
|
535
|
+
### React Development Specific Issues
|
536
|
+
|
537
|
+
| Issue | Symptoms | Solution |
|
538
|
+
| ----------------------------- | ---------------------------------- | ---------------------------------------------- |
|
539
|
+
| **JSX not compiling** | TypeScript errors in TSX files | Ensure `jsx: "react-jsx"` in TypeScript config |
|
540
|
+
| **Asset imports failing** | Cannot import images/CSS | Check type declarations in `types/` directory |
|
541
|
+
| **React linting not working** | No React-specific lint errors | Verify ESLint React plugin is loaded |
|
542
|
+
| **Component naming errors** | PascalCase component names flagged | Check naming convention overrides in ESLint |
|
543
|
+
|
544
|
+
> **Need help with Presetter CLI commands?** Check the [CLI reference](https://github.com/alvis/presetter/blob/master/README.md#cli-reference) in the main documentation.
|
545
|
+
|
546
|
+
---
|
547
|
+
|
548
|
+
## ❓ FAQ
|
549
|
+
|
550
|
+
> **General Presetter questions?** Check the [main FAQ](https://github.com/alvis/presetter/blob/master/README.md#faq) for general usage, configuration, and customization questions.
|
551
|
+
|
552
|
+
### React Development Specific FAQs
|
553
|
+
|
554
|
+
#### Do I need preset-web separately?
|
555
|
+
|
556
|
+
No! preset-react **extends** preset-web automatically:
|
557
|
+
|
558
|
+
```typescript
|
559
|
+
// ❌ Redundant - web already included in react
|
560
|
+
extends: [esm, web, react]
|
561
|
+
|
562
|
+
// ✅ Correct - react includes web preset
|
563
|
+
extends: [esm, react]
|
74
564
|
```
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
│ ├─ (type).d.ts
|
89
|
-
├─ eslint.config.ts
|
90
|
-
├─ package.json
|
91
|
-
└─ tsconfig.json
|
565
|
+
|
566
|
+
#### How do I import images and CSS modules?
|
567
|
+
|
568
|
+
Type-safe imports work automatically:
|
569
|
+
|
570
|
+
```typescript
|
571
|
+
// Image imports
|
572
|
+
import logo from './assets/logo.png'; // string URL
|
573
|
+
import { ReactComponent as Icon } from './icon.svg'; // React component
|
574
|
+
|
575
|
+
// CSS module imports
|
576
|
+
import styles from './Button.module.css'; // CSS module object
|
577
|
+
const className = styles.button; // Type-safe class names
|
92
578
|
```
|
93
579
|
|
94
|
-
|
580
|
+
#### What React versions are supported?
|
581
|
+
|
582
|
+
React 18+ recommended, with backward compatibility:
|
583
|
+
|
584
|
+
- **React 18+**: Full support with modern JSX transform
|
585
|
+
- **React 16.14+**: Supported with legacy JSX transform
|
586
|
+
- **React <16.14**: Not recommended, may require manual config
|
587
|
+
|
588
|
+
#### How do React linting rules work?
|
589
|
+
|
590
|
+
Comprehensive React best practices:
|
591
|
+
|
592
|
+
```typescript
|
593
|
+
// Enforced patterns
|
594
|
+
const MyComponent = ({ isActive, onClick }) => { } // ✅ PascalCase component
|
595
|
+
<Button type="button" onClick={handler} disabled /> // ✅ Props ordered correctly
|
596
|
+
|
597
|
+
// Violations caught
|
598
|
+
const myComponent = () => { } // ❌ camelCase component
|
599
|
+
<button onClick={handler} type="button" /> // ❌ Props out of order
|
600
|
+
```
|
601
|
+
|
602
|
+
#### Can I use this with other React tools?
|
603
|
+
|
604
|
+
Absolutely! The preset integrates with:
|
605
|
+
|
606
|
+
- **Next.js**: Works with Next.js React setup
|
607
|
+
- **Vite**: Compatible with Vite React templates
|
608
|
+
- **Create React App**: Can replace CRA configuration
|
609
|
+
- **Custom bundlers**: Works with any React build setup
|
610
|
+
|
611
|
+
---
|
612
|
+
|
613
|
+
## 🤝 Contributing
|
614
|
+
|
615
|
+
We'd love your ideas and contributions!
|
616
|
+
Submit issues or suggestions via [GitHub Issues](https://github.com/alvis/presetter/issues).
|
617
|
+
See the [Contribution Guide](https://github.com/alvis/presetter/blob/master/CONTRIBUTING.md) for more details.
|
95
618
|
|
96
|
-
|
619
|
+
---
|
97
620
|
|
98
|
-
|
621
|
+
## 📄 License
|
99
622
|
|
100
|
-
|
623
|
+
Released under the [MIT License](https://github.com/alvis/presetter/blob/master/LICENSE).
|
624
|
+
© 2020, [Alvis Tang](https://github.com/alvis).
|
101
625
|
|
102
|
-
-
|
103
|
-
- **`run clean`**: Clean up any previously transpiled code
|
104
|
-
- **`run develop -- <file path>`**: Create a service that run the specified file whenever the source has changed
|
105
|
-
- **`run test`**: Run all tests
|
106
|
-
- **`run watch`**: Rerun all tests whenever the source has change
|
107
|
-
- **`run coverage`**: Run all test with coverage report
|
108
|
-
- **`run release`**: Bump the version and automatically generate a change log
|
109
|
-
- **`run release -- --prerelease <tag>`**: Release with a prerelease tag
|
626
|
+
[](https://github.com/alvis/presetter/blob/master/LICENSE)
|
package/lib/eslint.override.d.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"eslint.override.d.ts","sourceRoot":"","sources":["../
|
1
|
+
{"version":3,"file":"eslint.override.d.ts","sourceRoot":"","sources":["../src/eslint.override.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;;aAEL,MAAM,CAAC,MAAM,EAAE;;AAA/C,wBAkGG"}
|
package/lib/eslint.override.js
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
/* v8 ignore start */
|
2
|
-
import testing from 'eslint-plugin-testing-library';
|
3
2
|
import { asset } from 'presetter';
|
4
3
|
export default asset((current) => {
|
5
4
|
const configs = current?.default ?? [];
|
@@ -8,11 +7,6 @@ export default asset((current) => {
|
|
8
7
|
return {
|
9
8
|
default: [
|
10
9
|
...configs,
|
11
|
-
{
|
12
|
-
name: 'presetter-preset-react:override:test-files',
|
13
|
-
files: ['**/__tests__/**/*.[jt]sx', '**/?(*.)+(spec|test).[jt]sx'],
|
14
|
-
...testing.configs['flat/react'],
|
15
|
-
},
|
16
10
|
{
|
17
11
|
name: 'presetter-preset-react:override:react-files',
|
18
12
|
files: ['**/*.[jt]sx'],
|
@@ -100,4 +94,4 @@ export default asset((current) => {
|
|
100
94
|
],
|
101
95
|
};
|
102
96
|
});
|
103
|
-
//# sourceMappingURL=data:application/json;base64,
|
97
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXNsaW50Lm92ZXJyaWRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL2VzbGludC5vdmVycmlkZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQkFBcUI7QUFFckIsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUlsQyxlQUFlLEtBQUssQ0FBK0IsQ0FBQyxPQUFPLEVBQUUsRUFBRTtJQUM3RCxNQUFNLE9BQU8sR0FBRyxPQUFPLEVBQUUsT0FBTyxJQUFJLEVBQUUsQ0FBQztJQUV2QyxNQUFNLG1CQUFtQixHQUFHLE9BQU8sQ0FBQyxJQUFJLENBQ3RDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxDQUFDLG9CQUFvQixDQUFDLENBQ3JELENBQUM7SUFFRixNQUFNLFFBQVEsR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsQ0FBQztJQUVuRSxPQUFPO1FBQ0wsT0FBTyxFQUFFO1lBQ1AsR0FBRyxPQUFPO1lBQ1Y7Z0JBQ0UsSUFBSSxFQUFFLDZDQUE2QztnQkFDbkQsS0FBSyxFQUFFLENBQUMsYUFBYSxDQUFDO2dCQUN0QixLQUFLLEVBQUU7b0JBQ0wsd0JBQXdCLEVBQUU7d0JBQ3hCLE1BQU07d0JBQ047NEJBQ0UsR0FBRyxFQUFFLEdBQUcsRUFBRSw0REFBNEQ7eUJBQ3ZFO3FCQUNGO29CQUNELEdBQUcsQ0FBQyxtQkFBbUIsSUFBSTt3QkFDekIsc0NBQXNDLEVBQUU7NEJBQ3RDLE9BQU8sRUFBRSx1REFBdUQ7NEJBQ2hFO2dDQUNFLFFBQVEsRUFBRSxTQUFTO2dDQUNuQixNQUFNLEVBQUU7b0NBQ04sV0FBVyxFQUFFLFVBQVU7aUNBQ3hCO2dDQUNELGlCQUFpQixFQUFFLE9BQU8sRUFBRSxVQUFVO2dDQUN0QyxrQkFBa0IsRUFBRSxPQUFPLEVBQUUsVUFBVTs2QkFDeEM7NEJBQ0Q7Z0NBQ0UsUUFBUSxFQUFFLFFBQVE7Z0NBQ2xCLE1BQU0sRUFBRTtvQ0FDTixXQUFXLEVBQUUsdUNBQXVDO29DQUNwRCxZQUFZLEVBQUUsdUJBQXVCO2lDQUN0Qzs2QkFDRjs0QkFDRDtnQ0FDRSxRQUFRLEVBQUUsVUFBVTtnQ0FDcEIsTUFBTSxFQUFFO29DQUNOLFdBQVcsRUFBRSxVQUFVO29DQUN2QixZQUFZLEVBQUUsdUJBQXVCO2lDQUN0Qzs2QkFDRjs0QkFDRDtnQ0FDRSxRQUFRLEVBQUUscUJBQXFCO2dDQUMvQixNQUFNLEVBQUUsSUFBSSxFQUFFLGdHQUFnRzs2QkFDL0c7NEJBQ0Q7Z0NBQ0UsUUFBUSxFQUFFLHVCQUF1QjtnQ0FDakMsTUFBTSxFQUFFLElBQUksRUFBRSxnR0FBZ0c7NkJBQy9HOzRCQUNEO2dDQUNFLFFBQVEsRUFBRSxXQUFXO2dDQUNyQixNQUFNLEVBQUU7b0NBQ04sV0FBVyxFQUFFLFVBQVU7b0NBQ3ZCLFlBQVksRUFBRSx1QkFBdUI7aUNBQ3RDO2dDQUNELGlCQUFpQixFQUFFLE9BQU8sRUFBRSxVQUFVO2dDQUN0QyxrQkFBa0IsRUFBRSxPQUFPLEVBQUUsVUFBVTs2QkFDeEM7NEJBQ0Q7Z0NBQ0UsUUFBUSxFQUFFLFVBQVU7Z0NBQ3BCLE1BQU0sRUFBRTtvQ0FDTixZQUFZLEVBQUUsa0NBQWtDO29DQUNoRCxXQUFXLEVBQUUseUJBQXlCO29DQUN0QyxZQUFZLEVBQUUseUJBQXlCO2lDQUN4QztnQ0FDRCxpQkFBaUIsRUFBRSxPQUFPLEVBQUUsaUNBQWlDO2dDQUM3RCxrQkFBa0IsRUFBRSxPQUFPLEVBQUUsaUNBQWlDOzZCQUMvRDs0QkFDRDtnQ0FDRSxRQUFRLEVBQUUsVUFBVTtnQ0FDcEIsTUFBTSxFQUFFO29DQUNOLFlBQVksRUFBRSxVQUFVO2lDQUN6Qjs2QkFDRjt5QkFDRjtxQkFDRixDQUFDO29CQUNGLEdBQUcsQ0FBQyxRQUFRLElBQUk7d0JBQ2QsdUJBQXVCLEVBQUU7NEJBQ3ZCLE9BQU8sRUFBRSw0RUFBNEU7NEJBQ3JGO2dDQUNFLFlBQVksRUFBRSxLQUFLO2dDQUNuQixRQUFRLEVBQUU7b0NBQ1IsNkZBQTZGO29DQUM3RixpR0FBaUc7aUNBQ2xHOzZCQUNGO3lCQUNGO3FCQUNGLENBQUM7aUJBQ0g7YUFDRjtTQUNpQjtLQUNyQixDQUFDO0FBQ0osQ0FBQyxDQUFDLENBQUMifQ==
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"eslint.template.d.ts","sourceRoot":"","sources":["../
|
1
|
+
{"version":3,"file":"eslint.template.d.ts","sourceRoot":"","sources":["../src/eslint.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;wBA8BhC,MAAM,CAAC,MAAM,EAAE;AA5BpB,wBA4BqB"}
|
package/lib/eslint.template.js
CHANGED
@@ -29,4 +29,4 @@ export default [
|
|
29
29
|
},
|
30
30
|
},
|
31
31
|
];
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXNsaW50LnRlbXBsYXRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL2VzbGludC50ZW1wbGF0ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQkFBcUI7QUFFckIsT0FBTyxLQUFLLE1BQU0scUJBQXFCLENBQUM7QUFJeEMsZUFBZTtJQUNiLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFdBQVc7SUFDOUIsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQ2pDO1FBQ0UsSUFBSSxFQUFFLHdCQUF3QjtRQUM5QixPQUFPLEVBQUUsRUFBRSxLQUFLLEVBQUU7UUFDbEIsZUFBZSxFQUFFO1lBQ2YsYUFBYSxFQUFFO2dCQUNiLFlBQVksRUFBRTtvQkFDWixHQUFHLEVBQUUsSUFBSTtpQkFDVjthQUNGO1NBQ0Y7UUFDRCxLQUFLLEVBQUU7WUFDTCwyQkFBMkIsRUFBRSxNQUFNLEVBQUUsOENBQThDO1lBQ25GLHVCQUF1QixFQUFFLE1BQU0sRUFBRSxzREFBc0Q7WUFDdkYsZ0NBQWdDLEVBQUUsTUFBTSxFQUFFLHlEQUF5RDtZQUNuRyxrQkFBa0IsRUFBRSxLQUFLLEVBQUUsbUNBQW1DO1lBQzlELGlCQUFpQixFQUFFLE1BQU0sRUFBRSxrQ0FBa0M7WUFDN0Qsc0JBQXNCLEVBQUU7Z0JBQ3RCLE1BQU0sRUFBRSxzQkFBc0I7Z0JBQzlCO29CQUNFLGFBQWEsRUFBRSxJQUFJO29CQUNuQixjQUFjLEVBQUUsSUFBSTtpQkFDckI7YUFDRjtTQUNGO0tBQ0Y7Q0FDaUIsQ0FBQyJ9
|
package/lib/index.d.ts
CHANGED
@@ -1,10 +1,3 @@
|
|
1
|
-
/** config for this preset */
|
2
|
-
export interface PresetConfig {
|
3
|
-
/** configuration to be merged with .eslintrc */
|
4
|
-
eslint?: Record<string, unknown>;
|
5
|
-
/** configuration to be merged with tsconfig.json */
|
6
|
-
tsconfig?: Record<string, unknown>;
|
7
|
-
}
|
8
1
|
/** list of configurable variables */
|
9
2
|
export interface Variables {
|
10
3
|
/** the directory containing all source code (default: source) */
|
package/lib/index.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAeA,qCAAqC;AACrC,MAAM,WAAW,SAAS;IACxB,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB;;;;CAIT,CAAC;;AAKtB,wBA4BG"}
|
package/lib/index.js
CHANGED
@@ -9,7 +9,7 @@ const DIR = fileURLToPath(dirname(import.meta.url));
|
|
9
9
|
const TEMPLATES = resolve(DIR, '..', 'templates');
|
10
10
|
const OVERRIDES = resolve(DIR, '..', 'overrides');
|
11
11
|
export const DEFAULT_VARIABLES = {
|
12
|
-
source: '
|
12
|
+
source: 'src',
|
13
13
|
types: 'types',
|
14
14
|
output: 'lib',
|
15
15
|
};
|
@@ -38,4 +38,4 @@ export default preset('presetter-preset-react', {
|
|
38
38
|
},
|
39
39
|
},
|
40
40
|
});
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDN0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUV6QyxPQUFPLEdBQUcsTUFBTSxzQkFBc0IsQ0FBQztBQUN2QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFekMsT0FBTyxjQUFjLE1BQU0sbUJBQW1CLENBQUM7QUFDL0MsT0FBTyxLQUFLLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQUU1QyxNQUFNLEdBQUcsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztBQUVwRCxrQ0FBa0M7QUFDbEMsTUFBTSxTQUFTLEdBQUcsT0FBTyxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsV0FBVyxDQUFDLENBQUM7QUFDbEQsTUFBTSxTQUFTLEdBQUcsT0FBTyxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsV0FBVyxDQUFDLENBQUM7QUFZbEQsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUc7SUFDL0IsTUFBTSxFQUFFLEtBQUs7SUFDYixLQUFLLEVBQUUsT0FBTztJQUNkLE1BQU0sRUFBRSxLQUFLO0NBQ00sQ0FBQztBQUV0QixNQUFNLFVBQVUsR0FBRyxZQUFZLENBQUM7QUFDaEMsTUFBTSxVQUFVLEdBQUcsWUFBWSxDQUFDO0FBRWhDLGVBQWUsTUFBTSxDQUFDLHdCQUF3QixFQUFFO0lBQzlDLE9BQU8sRUFBRSxDQUFDLEdBQUcsQ0FBQztJQUNkLFNBQVMsRUFBRSxpQkFBaUI7SUFDNUIsT0FBTyxFQUFFLE9BQU8sQ0FBQyxTQUFTLEVBQUUsY0FBYyxDQUFDO0lBQzNDLE1BQU0sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDMUIsWUFBWSxFQUFFLENBQUMsT0FBTyxFQUFFLEVBQUUsU0FBUyxFQUFFLEVBQUUsRUFBRSxDQUFDO1lBQ3hDLEdBQUcsQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDO1lBQ2xCLElBQUksU0FBUyxDQUFDLEtBQU0sSUFBSSxVQUFVLEVBQUU7WUFDcEMsSUFBSSxTQUFTLENBQUMsS0FBTSxJQUFJLFVBQVUsRUFBRTtTQUNyQztRQUNELGtCQUFrQixFQUFFLE1BQU07UUFDMUIsZUFBZSxFQUFFLE9BQU8sQ0FBQyxTQUFTLEVBQUUsZUFBZSxDQUFDO1FBQ3BELHFCQUFxQixFQUFFLE9BQU8sQ0FBQyxTQUFTLEVBQUUscUJBQXFCLENBQUM7UUFDaEUsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxLQUFNLElBQUksVUFBVSxFQUFrQixDQUFDLEVBQUUsT0FBTyxDQUM1RCxTQUFTLEVBQ1QsVUFBVSxDQUNYO1FBQ0QsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxLQUFNLElBQUksVUFBVSxFQUFrQixDQUFDLEVBQUUsT0FBTyxDQUM1RCxTQUFTLEVBQ1QsVUFBVSxDQUNYO0tBQ0YsQ0FBQztJQUNGLFFBQVEsRUFBRTtRQUNSLE1BQU0sRUFBRTtZQUNOLG9CQUFvQixFQUFFLE9BQU8sQ0FBQyxTQUFTLEVBQUUsaUJBQWlCLENBQUM7WUFDM0Qsa0JBQWtCLEVBQUUsY0FBYztTQUNuQztLQUNGO0NBQ0YsQ0FBQyxDQUFDIn0=
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "presetter-preset-react",
|
3
|
-
"version": "
|
3
|
+
"version": "8.0.1",
|
4
4
|
"description": "An opinionated presetter preset for a React project",
|
5
5
|
"keywords": [
|
6
6
|
"presetter",
|
@@ -10,33 +10,37 @@
|
|
10
10
|
"bugs": {
|
11
11
|
"url": "https://github.com/alvis/presetter/issues"
|
12
12
|
},
|
13
|
+
"repository": {
|
14
|
+
"type": "git",
|
15
|
+
"url": "git+https://github.com/alvis/presetter.git"
|
16
|
+
},
|
13
17
|
"license": "MIT",
|
14
18
|
"author": "Alvis HT Tang <alvis@hilbert.space>",
|
15
|
-
"main": "lib/index.js",
|
16
|
-
"types": "lib/index.d.ts",
|
17
19
|
"type": "module",
|
20
|
+
"imports": {
|
21
|
+
"#*": {
|
22
|
+
"types": "./lib/*.d.ts",
|
23
|
+
"import": "./lib/*.js"
|
24
|
+
}
|
25
|
+
},
|
18
26
|
"exports": {
|
19
27
|
".": {
|
20
28
|
"types": "./lib/index.d.ts",
|
21
29
|
"import": "./lib/index.js"
|
22
30
|
}
|
23
31
|
},
|
24
|
-
"
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
"peerDependencies": {
|
29
|
-
"@testing-library/react": "^16.0.0",
|
30
|
-
"eslint-plugin-react": "^7.0.0",
|
31
|
-
"eslint-plugin-testing-library": "^7.0.0",
|
32
|
-
"presetter": "7.3.0",
|
33
|
-
"presetter-preset-web": "7.3.0"
|
32
|
+
"main": "lib/index.js",
|
33
|
+
"types": "lib/index.d.ts",
|
34
|
+
"dependencies": {
|
35
|
+
"presetter-types": "8.0.1"
|
34
36
|
},
|
35
37
|
"devDependencies": {
|
36
|
-
"presetter": "
|
38
|
+
"presetter": "8.0.1"
|
37
39
|
},
|
38
|
-
"
|
39
|
-
"
|
40
|
+
"peerDependencies": {
|
41
|
+
"eslint-plugin-react": "^7.0.0",
|
42
|
+
"presetter": "8.0.1",
|
43
|
+
"presetter-preset-web": "8.0.1"
|
40
44
|
},
|
41
45
|
"scripts": {
|
42
46
|
"build": "run build",
|
package/templates/tsconfig.yaml
CHANGED
@@ -18,11 +18,6 @@ compilerOptions:
|
|
18
18
|
moduleResolution: bundler
|
19
19
|
resolveJsonModule: true
|
20
20
|
baseUrl: .
|
21
|
-
paths:
|
22
|
-
'#*':
|
23
|
-
- '{source}/*'
|
24
|
-
'*':
|
25
|
-
- '{types}/*'
|
26
21
|
|
27
22
|
# libraries
|
28
23
|
lib:
|
@@ -31,6 +26,9 @@ compilerOptions:
|
|
31
26
|
- DOM
|
32
27
|
- DOM.Iterable
|
33
28
|
include:
|
29
|
+
- '.*/**/*.json'
|
30
|
+
- '.*/**/*.ts'
|
31
|
+
- '.*/**/*.tsx'
|
34
32
|
- '**/*.json'
|
35
33
|
- '**/*.ts'
|
36
34
|
- '**/*.tsx'
|
@@ -0,0 +1,41 @@
|
|
1
|
+
declare module 'eslint-plugin-react' {
|
2
|
+
import type { ESLint, Linter } from 'eslint';
|
3
|
+
|
4
|
+
export default declare as ESLint.Plugin & {
|
5
|
+
configs: {
|
6
|
+
'all': {
|
7
|
+
plugins: Linter.PluginsRecord;
|
8
|
+
languageOptions: Linter.LanguageOptions;
|
9
|
+
rules: Linter.RulesRecord;
|
10
|
+
};
|
11
|
+
'jsx-runtime': {
|
12
|
+
plugins: Linter.PluginsRecord;
|
13
|
+
languageOptions: Linter.LanguageOptions;
|
14
|
+
rules: Linter.RulesRecord;
|
15
|
+
};
|
16
|
+
'recommended': {
|
17
|
+
plugins: Linter.PluginsRecord;
|
18
|
+
languageOptions: Linter.LanguageOptions;
|
19
|
+
rules: Linter.RulesRecord;
|
20
|
+
};
|
21
|
+
'flat': {
|
22
|
+
'all': {
|
23
|
+
plugins: Linter.PluginsRecord;
|
24
|
+
languageOptions: Linter.LanguageOptions;
|
25
|
+
rules: Linter.RulesRecord;
|
26
|
+
};
|
27
|
+
'jsx-runtime': {
|
28
|
+
plugins: Linter.PluginsRecord;
|
29
|
+
languageOptions: Linter.LanguageOptions;
|
30
|
+
rules: Linter.RulesRecord;
|
31
|
+
};
|
32
|
+
'recommended': {
|
33
|
+
plugins: Linter.PluginsRecord;
|
34
|
+
languageOptions: Linter.LanguageOptions;
|
35
|
+
rules: Linter.RulesRecord;
|
36
|
+
};
|
37
|
+
};
|
38
|
+
};
|
39
|
+
rules: Linter.RulesRecord;
|
40
|
+
};
|
41
|
+
}
|