state should be readonly always everywhere

piotrwitek · piotrwitek · commit 2a45ffc1eece · 2018-04-30T10:26:34.000+02:00
diff --git a/README.md b/README.md
@@ -226,12 +226,12 @@ export interface StatefulCounterProps {
   label: string;
 }
 
-type State = {
-  count: number;
-};
+interface State {
+  readonly count: number;
+}
 
 export class StatefulCounter extends React.Component<StatefulCounterProps, State> {
-  state: State = {
+  readonly state: State = {
     count: 0,
   };
 
@@ -272,11 +272,11 @@ export interface StatefulCounterWithDefaultProps {
 }
 
 interface DefaultProps {
-  initialCount: number;
+  readonly initialCount: number;
 }
 
 interface State {
-  count: number;
+  readonly count: number;
 }
 
 export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWithDefaultProps> =
@@ -287,7 +287,7 @@ export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWit
       initialCount: 0,
     };
 
-    state: State = {
+    readonly state: State = {
       count: this.props.initialCount,
     };
 
@@ -373,11 +373,11 @@ interface NameProviderProps {
 }
 
 interface NameProviderState {
-  name: string;
+  readonly name: string;
 }
 
 export class NameProvider extends React.Component<NameProviderProps, NameProviderState> {
-  state = {
+  readonly state: NameProviderState = {
     name: 'Piotr',
   };
 
@@ -403,12 +403,12 @@ export interface MouseProviderProps {
 }
 
 interface MouseProviderState {
-  x: number;
-  y: number;
+  readonly x: number;
+  readonly y: number;
 }
 
 export class MouseProvider extends React.Component<MouseProviderProps, MouseProviderState> {
-  state = { x: 0, y: 0 };
+  readonly state: MouseProviderState = { x: 0, y: 0 };
 
   handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
     this.setState({
@@ -463,14 +463,14 @@ export const withState = <P extends WrappedComponentProps>(
     initialCount?: number;
   }
   interface State {
-    count: number;
+    readonly count: number;
   }
 
   return class WithState extends React.Component<Subtract<P, WrappedComponentProps> & Props, State> {
     // Enhance component name for debugging and React-Dev-Tools
     static displayName = `withState(${WrappedComponent.name})`;
 
-    state: State = {
+    readonly state: State = {
       count: Number(this.props.initialCount) || 0,
     };
 
@@ -532,13 +532,13 @@ export const withErrorBoundary = <P extends WrappedComponentProps>(
 ) => {
   interface Props { }
   interface State {
-    error: Error | null | undefined;
+    readonly error: Error | null | undefined;
   }
 
   return class WithErrorBoundary extends React.Component<Subtract<P, WrappedComponentProps> & Props, State> {
     static displayName = `withErrorBoundary(${WrappedComponent.name})`;
 
-    state: State = {
+    readonly state: State = {
       error: undefined,
     };
 
@@ -852,7 +852,7 @@ export type TodosState = {
 };
 
 export type RootState = {
-  todos: TodosState;
+  readonly todos: TodosState;
 };
 
 export const todosReducer = combineReducers<TodosState, TodosAction>({
@@ -1345,7 +1345,8 @@ configure({ adapter: new Adapter() });
       // in webpack you need to add -> resolve: { alias: { '@src': PATH_TO_SRC } }
     },
     "outDir": "dist/", // target for compiled files
-    "allowSyntheticDefaultImports": true, // no errors on commonjs default import
+    "allowSyntheticDefaultImports": true, // no errors with commonjs modules interop
+    "esModuleInterop": true,
     "allowJs": true, // include js files
     "checkJs": true, // typecheck js files
     "declaration": false, // don't emit declarations
diff --git a/playground/src/components/mouse-provider.tsx b/playground/src/components/mouse-provider.tsx
@@ -5,12 +5,12 @@ export interface MouseProviderProps {
 }
 
 interface MouseProviderState {
-  x: number;
-  y: number;
+  readonly x: number;
+  readonly y: number;
 }
 
 export class MouseProvider extends React.Component<MouseProviderProps, MouseProviderState> {
-  state = { x: 0, y: 0 };
+  readonly state: MouseProviderState = { x: 0, y: 0 };
 
   handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
     this.setState({
diff --git a/playground/src/components/name-provider.tsx b/playground/src/components/name-provider.tsx
@@ -5,11 +5,11 @@ interface NameProviderProps {
 }
 
 interface NameProviderState {
-  name: string;
+  readonly name: string;
 }
 
 export class NameProvider extends React.Component<NameProviderProps, NameProviderState> {
-  state = {
+  readonly state: NameProviderState = {
     name: 'Piotr',
   };
 
diff --git a/playground/src/components/stateful-counter-with-default.tsx b/playground/src/components/stateful-counter-with-default.tsx
@@ -6,11 +6,11 @@ export interface StatefulCounterWithDefaultProps {
 }
 
 interface DefaultProps {
-  initialCount: number;
+  readonly initialCount: number;
 }
 
 interface State {
-  count: number;
+  readonly count: number;
 }
 
 export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWithDefaultProps> =
@@ -21,7 +21,7 @@ export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWit
       initialCount: 0,
     };
 
-    state: State = {
+    readonly state: State = {
       count: this.props.initialCount,
     };
 
diff --git a/playground/src/components/stateful-counter.tsx b/playground/src/components/stateful-counter.tsx
@@ -4,12 +4,12 @@ export interface StatefulCounterProps {
   label: string;
 }
 
-type State = {
-  count: number;
-};
+interface State {
+  readonly count: number;
+}
 
 export class StatefulCounter extends React.Component<StatefulCounterProps, State> {
-  state: State = {
+  readonly state: State = {
     count: 0,
   };
 
diff --git a/playground/src/hoc/with-error-boundary.tsx b/playground/src/hoc/with-error-boundary.tsx
@@ -12,13 +12,13 @@ export const withErrorBoundary = <P extends WrappedComponentProps>(
 ) => {
   interface Props { }
   interface State {
-    error: Error | null | undefined;
+    readonly error: Error | null | undefined;
   }
 
   return class WithErrorBoundary extends React.Component<Subtract<P, WrappedComponentProps> & Props, State> {
     static displayName = `withErrorBoundary(${WrappedComponent.name})`;
 
-    state: State = {
+    readonly state: State = {
       error: undefined,
     };
 
diff --git a/playground/src/hoc/with-state.tsx b/playground/src/hoc/with-state.tsx
@@ -15,14 +15,14 @@ export const withState = <P extends WrappedComponentProps>(
     initialCount?: number;
   }
   interface State {
-    count: number;
+    readonly count: number;
   }
 
   return class WithState extends React.Component<Subtract<P, WrappedComponentProps> & Props, State> {
     // Enhance component name for debugging and React-Dev-Tools
     static displayName = `withState(${WrappedComponent.name})`;
 
-    state: State = {
+    readonly state: State = {
       count: Number(this.props.initialCount) || 0,
     };
 
diff --git a/playground/src/redux/todos/reducer.ts b/playground/src/redux/todos/reducer.ts
@@ -12,7 +12,7 @@ export type TodosState = {
 };
 
 export type RootState = {
-  todos: TodosState;
+  readonly todos: TodosState;
 };
 
 export const todosReducer = combineReducers<TodosState, TodosAction>({

Original file line number	Diff line number	Diff line change
`@@ -5,12 +5,12 @@ export interface MouseProviderProps {`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`interface MouseProviderState {`
`8`		`- x: number;`
`9`		`- y: number;`
	`8`	`+ readonly x: number;`
	`9`	`+ readonly y: number;`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`export class MouseProvider extends React.Component<MouseProviderProps, MouseProviderState> {`
`13`		`- state = { x: 0, y: 0 };`
	`13`	`+ readonly state: MouseProviderState = { x: 0, y: 0 };`
`14`	`14`
`15`	`15`	`handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {`
`16`	`16`	`this.setState({`
Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,11 @@ interface NameProviderProps {`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`interface NameProviderState {`
`8`		`- name: string;`
	`8`	`+ readonly name: string;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`export class NameProvider extends React.Component<NameProviderProps, NameProviderState> {`
`12`		`- state = {`
	`12`	`+ readonly state: NameProviderState = {`
`13`	`13`	`name: 'Piotr',`
`14`	`14`	`};`
`15`	`15`
Original file line number	Diff line number	Diff line change
`@@ -6,11 +6,11 @@ export interface StatefulCounterWithDefaultProps {`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`interface DefaultProps {`
`9`		`- initialCount: number;`
	`9`	`+ readonly initialCount: number;`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`interface State {`
`13`		`- count: number;`
	`13`	`+ readonly count: number;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWithDefaultProps> =`
`@@ -21,7 +21,7 @@ export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWit`
`21`	`21`	`initialCount: 0,`
`22`	`22`	`};`
`23`	`23`
`24`		`- state: State = {`
	`24`	`+ readonly state: State = {`
`25`	`25`	`count: this.props.initialCount,`
`26`	`26`	`};`
`27`	`27`
Original file line number	Diff line number	Diff line change
`@@ -15,14 +15,14 @@ export const withState = <P extends WrappedComponentProps>(`
`15`	`15`	`initialCount?: number;`
`16`	`16`	`}`
`17`	`17`	`interface State {`
`18`		`- count: number;`
	`18`	`+ readonly count: number;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`return class WithState extends React.Component<Subtract<P, WrappedComponentProps> & Props, State> {`
`22`	`22`	`// Enhance component name for debugging and React-Dev-Tools`
`23`	`23`	static displayName = `withState(${WrappedComponent.name})`;
`24`	`24`
`25`		`- state: State = {`
	`25`	`+ readonly state: State = {`
`26`	`26`	`count: Number(this.props.initialCount) \|\| 0,`
`27`	`27`	`};`
`28`	`28`