@epic-web/config 1.18.1 → 1.18.3
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/docs/style-guide.md +1 -112
- package/eslint.js +3 -3
- package/package.json +1 -1
- package/tsconfig.json +1 -4
package/docs/style-guide.md
CHANGED
|
@@ -602,117 +602,6 @@ const doubledGreaterThanTwoItems = items.filter(n => n > 2).map(n => n * 2)
|
|
|
602
602
|
This makes it easier to add/remove parameters without having to futz around with
|
|
603
603
|
parentheses.
|
|
604
604
|
|
|
605
|
-
### Classes & Constructors
|
|
606
|
-
|
|
607
|
-
#### Avoid Classes
|
|
608
|
-
|
|
609
|
-
Avoid classes. Use objects and functions instead.
|
|
610
|
-
|
|
611
|
-
```tsx
|
|
612
|
-
type Role = 'admin' | 'user'
|
|
613
|
-
|
|
614
|
-
type User = {
|
|
615
|
-
name: string
|
|
616
|
-
role: Role
|
|
617
|
-
}
|
|
618
|
-
|
|
619
|
-
// ✅ Good
|
|
620
|
-
const user: User = {
|
|
621
|
-
name: 'Brittany',
|
|
622
|
-
role: 'admin',
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
function userHasAccess(user: User, requiredRole: Role) {
|
|
626
|
-
return user.role === requiredRole
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
// ❌ Avoid
|
|
630
|
-
class User {
|
|
631
|
-
name: string
|
|
632
|
-
role: Role
|
|
633
|
-
constructor(name: string, role: Role) {
|
|
634
|
-
this.name = name
|
|
635
|
-
this.role = role
|
|
636
|
-
}
|
|
637
|
-
hasAccess(requiredRole: Role) {
|
|
638
|
-
return this.role === requiredRole
|
|
639
|
-
}
|
|
640
|
-
}
|
|
641
|
-
```
|
|
642
|
-
|
|
643
|
-
#### Use as a performance optimization
|
|
644
|
-
|
|
645
|
-
Use classes as a performance optimization when you need to create a large number
|
|
646
|
-
of objects and you need to avoid the overhead of creating those objects with
|
|
647
|
-
functions. It's even better to use simple objects and functions, but if for some
|
|
648
|
-
reason you need the function to be attached to the object, then use a class.
|
|
649
|
-
|
|
650
|
-
```tsx
|
|
651
|
-
// ✅ Good
|
|
652
|
-
class Point {
|
|
653
|
-
x: number
|
|
654
|
-
y: number
|
|
655
|
-
constructor(x: number, y: number) {
|
|
656
|
-
this.x = x
|
|
657
|
-
this.y = y
|
|
658
|
-
}
|
|
659
|
-
distanceTo(other: Point) {
|
|
660
|
-
const dx = this.x - other.x
|
|
661
|
-
const dy = this.y - other.y
|
|
662
|
-
return Math.sqrt(dx * dx + dy * dy)
|
|
663
|
-
}
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
// ✅ Better
|
|
667
|
-
function distanceBetweenPoints(point1: Point, point2: Point) {
|
|
668
|
-
const dx = point1.x - point2.x
|
|
669
|
-
const dy = point1.y - point2.y
|
|
670
|
-
return Math.sqrt(dx * dx + dy * dy)
|
|
671
|
-
}
|
|
672
|
-
const point1 = { x: 0, y: 0 }
|
|
673
|
-
const point2 = { x: 1, y: 1 }
|
|
674
|
-
const distance = distanceBetweenPoints(point1, point2)
|
|
675
|
-
|
|
676
|
-
// ❌ Avoid
|
|
677
|
-
function createPoint(x: number, y: number) {
|
|
678
|
-
return {
|
|
679
|
-
x,
|
|
680
|
-
y,
|
|
681
|
-
distanceTo(other: Point) {
|
|
682
|
-
const dx = this.x - other.x
|
|
683
|
-
const dy = this.y - other.y
|
|
684
|
-
return Math.sqrt(dx * dx + dy * dy)
|
|
685
|
-
},
|
|
686
|
-
}
|
|
687
|
-
}
|
|
688
|
-
```
|
|
689
|
-
|
|
690
|
-
#### Avoid Inheritance
|
|
691
|
-
|
|
692
|
-
Avoid inheritance. If you need to extend a class, use duplication or composition
|
|
693
|
-
instead of inheritance.
|
|
694
|
-
|
|
695
|
-
```tsx
|
|
696
|
-
// ✅ Good
|
|
697
|
-
class User {
|
|
698
|
-
name: string
|
|
699
|
-
role: string
|
|
700
|
-
constructor(name: string, role: string) {
|
|
701
|
-
this.name = name
|
|
702
|
-
this.role = role
|
|
703
|
-
}
|
|
704
|
-
}
|
|
705
|
-
|
|
706
|
-
// ❌ Avoid
|
|
707
|
-
class User extends Person {
|
|
708
|
-
role: string
|
|
709
|
-
constructor(name: string, role: string) {
|
|
710
|
-
super(name)
|
|
711
|
-
this.role = role
|
|
712
|
-
}
|
|
713
|
-
}
|
|
714
|
-
```
|
|
715
|
-
|
|
716
605
|
### Modules
|
|
717
606
|
|
|
718
607
|
#### File Organization
|
|
@@ -1810,7 +1699,7 @@ describe('LoginForm', () => {
|
|
|
1810
1699
|
})
|
|
1811
1700
|
```
|
|
1812
1701
|
|
|
1813
|
-
### Avoid Nesting Tests
|
|
1702
|
+
### [Avoid Nesting Tests](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing)
|
|
1814
1703
|
|
|
1815
1704
|
Keep your tests flat. Nesting makes tests harder to understand and maintain.
|
|
1816
1705
|
|
package/eslint.js
CHANGED
|
@@ -21,7 +21,7 @@ const hasPlaywright = has('playwright')
|
|
|
21
21
|
|
|
22
22
|
const vitestFiles = ['**/__tests__/**/*', '**/*.test.*', '**/*.spec.*']
|
|
23
23
|
const testFiles = ['**/tests/**', '**/#tests/**', ...vitestFiles]
|
|
24
|
-
const playwrightFiles = ['**/e2e/**']
|
|
24
|
+
const playwrightFiles = ['**/tests/e2e/**']
|
|
25
25
|
|
|
26
26
|
export const config = [
|
|
27
27
|
{
|
|
@@ -35,6 +35,7 @@ export const config = [
|
|
|
35
35
|
'**/server-build/**',
|
|
36
36
|
'**/dist/**',
|
|
37
37
|
'**/coverage/**',
|
|
38
|
+
'**/*.tsbuildinfo',
|
|
38
39
|
],
|
|
39
40
|
},
|
|
40
41
|
|
|
@@ -313,8 +314,7 @@ export const config = [
|
|
|
313
314
|
|
|
314
315
|
hasPlaywright
|
|
315
316
|
? {
|
|
316
|
-
files: [
|
|
317
|
-
ignores: testFiles,
|
|
317
|
+
files: [...playwrightFiles],
|
|
318
318
|
plugins: {
|
|
319
319
|
playwright: (await import('eslint-plugin-playwright')).default,
|
|
320
320
|
},
|
package/package.json
CHANGED