From 03212af7dab98266839c0826b3a14c8e5e6b95be Mon Sep 17 00:00:00 2001 From: Martin Charles Date: Mon, 23 Jul 2018 13:10:12 -0400 Subject: [PATCH] [react-side-effect] Removed Any Types (#27132) * Improved react-side-effect Typings Removed all `any` typings. Added tests which test usage. * Made Lint Less Permissive It doesn't need to be so permissive. * Fixed Whitespace * Added Typings for Server Stuff Used a more robust way than suggested in review. Added tests too. * Fixed Server Types `peek` can return either a `TServerState` or `TState` when `withSideEffect` is provided `mapStateOnServer` (based on runtime). `rewind` always returns `TServerState` when `mapStateOnServer` is provided, otherwise it returns `TState`. --- types/react-side-effect/index.d.ts | 31 +++++--- .../react-side-effect-tests.ts | 34 -------- .../react-side-effect-tests.tsx | 59 ++++++++++++++ types/react-side-effect/tsconfig.json | 3 +- types/react-side-effect/tslint.json | 78 +------------------ 5 files changed, 83 insertions(+), 122 deletions(-) delete mode 100644 types/react-side-effect/react-side-effect-tests.ts create mode 100644 types/react-side-effect/react-side-effect-tests.tsx diff --git a/types/react-side-effect/index.d.ts b/types/react-side-effect/index.d.ts index 358acbbf05..1f15038c4b 100644 --- a/types/react-side-effect/index.d.ts +++ b/types/react-side-effect/index.d.ts @@ -1,23 +1,34 @@ -// Type definitions for react-side-effect v1.0.2 +// Type definitions for react-side-effect 1.1 // Project: https://github.com/gaearon/react-side-effect // Definitions by: Remo H. Jansen +// Martin Charles // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 import * as React from "react"; -declare function withSideEffect( - reducePropsToState: (propsList: any[]) => any, - handleStateChangeOnClient: (state: any) => any, - mapStateOnServer?: (state: any) => any -): ClassDecorator; +interface WithSideEffect { + ( + reducePropsToState: (propsList: TProp[]) => TState, + handleStateChangeOnClient: (state: TState) => void + ): ClassDecorator; -declare class ElementClass extends React.Component {} - -interface ClassDecorator { - (component:T): T; + ( + reducePropsToState: (propsList: TProp[]) => TState, + handleStateChangeOnClient: (state: TState) => void, + mapStateOnServer: (state: TState) => TServerState + ): ClassDecorator; } +declare const withSideEffect: WithSideEffect; + +type ClassDecorator = ( + component: React.ComponentType +) => React.ComponentType & { + peek: () => TPeek; + rewind: () => TRewind; +}; + declare namespace withSideEffect {} // https://github.com/Microsoft/TypeScript/issues/5073 export = withSideEffect; diff --git a/types/react-side-effect/react-side-effect-tests.ts b/types/react-side-effect/react-side-effect-tests.ts deleted file mode 100644 index d568fed4cc..0000000000 --- a/types/react-side-effect/react-side-effect-tests.ts +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from "react"; -import withSideEffect = require("react-side-effect"); - -interface DocumentTitleProps { - title: string -} - -class DocumentTitle extends React.Component { - public render() { - if (this.props.children) { - return React.Children.only(this.props.children); - } else { - return null; - } - } -} - -function reducePropsToState(propsList: any[]) { - var innermostProps = propsList[propsList.length - 1]; - if (innermostProps) { - return innermostProps.title; - } -} - -function handleStateChangeOnClient(title: string) { - document.title = title || ""; -} - -let DocumentTitleWithSideEffects = withSideEffect( - reducePropsToState, - handleStateChangeOnClient -)(DocumentTitle); - -export default DocumentTitleWithSideEffects; diff --git a/types/react-side-effect/react-side-effect-tests.tsx b/types/react-side-effect/react-side-effect-tests.tsx new file mode 100644 index 0000000000..7cbe8fc043 --- /dev/null +++ b/types/react-side-effect/react-side-effect-tests.tsx @@ -0,0 +1,59 @@ +import * as React from "react"; +import withSideEffect = require("react-side-effect"); + +interface DocumentTitleProps { + title: string; +} + +type State = string | undefined; + +interface ServerState { + innerState: State; +} + +const DocumentTitle = () => null; + +function reducePropsToState(propsList: DocumentTitleProps[]): State { + const innermostProps = propsList[propsList.length - 1]; + if (innermostProps) { + return innermostProps.title; + } +} + +function handleStateChangeOnClient(title: State) { + document.title = title || ""; +} + +const mapStateOnServer = (state: State): ServerState => ({ innerState: state }); + +const DocumentTitleWithServerMapState = withSideEffect( + reducePropsToState, + handleStateChangeOnClient, + mapStateOnServer +)(DocumentTitle); + +const testWithServerMapState = () => { + const testComponent = () => ( + + ); + const peekedState: + | ServerState + | State = DocumentTitleWithServerMapState.peek(); + const rewindedState: ServerState = DocumentTitleWithServerMapState.rewind(); +}; + +const DocumentTitleNotServer = withSideEffect( + reducePropsToState, + handleStateChangeOnClient +)(DocumentTitle); + +const testWithoutMapState = () => { + const testComponent = () => ; + const peekedState: State = DocumentTitleNotServer.peek(); + const rewindedState: State = DocumentTitleNotServer.rewind(); +}; + +const testInvalidProp = () => ( + // $ExpectError + +); diff --git a/types/react-side-effect/tsconfig.json b/types/react-side-effect/tsconfig.json index f64b0cedec..752e806984 100644 --- a/types/react-side-effect/tsconfig.json +++ b/types/react-side-effect/tsconfig.json @@ -5,6 +5,7 @@ "es6", "dom" ], + "jsx": "react", "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, @@ -19,6 +20,6 @@ }, "files": [ "index.d.ts", - "react-side-effect-tests.ts" + "react-side-effect-tests.tsx" ] } \ No newline at end of file diff --git a/types/react-side-effect/tslint.json b/types/react-side-effect/tslint.json index a41bf5d19a..f93cf8562a 100644 --- a/types/react-side-effect/tslint.json +++ b/types/react-side-effect/tslint.json @@ -1,79 +1,3 @@ { - "extends": "dtslint/dt.json", - "rules": { - "adjacent-overload-signatures": false, - "array-type": false, - "arrow-return-shorthand": false, - "ban-types": false, - "callable-types": false, - "comment-format": false, - "dt-header": false, - "eofline": false, - "export-just-namespace": false, - "import-spacing": false, - "interface-name": false, - "interface-over-type-literal": false, - "jsdoc-format": false, - "max-line-length": false, - "member-access": false, - "new-parens": false, - "no-any-union": false, - "no-boolean-literal-compare": false, - "no-conditional-assignment": false, - "no-consecutive-blank-lines": false, - "no-construct": false, - "no-declare-current-package": false, - "no-duplicate-imports": false, - "no-duplicate-variable": false, - "no-empty-interface": false, - "no-for-in-array": false, - "no-inferrable-types": false, - "no-internal-module": false, - "no-irregular-whitespace": false, - "no-mergeable-namespace": false, - "no-misused-new": false, - "no-namespace": false, - "no-object-literal-type-assertion": false, - "no-padding": false, - "no-redundant-jsdoc": false, - "no-redundant-jsdoc-2": false, - "no-redundant-undefined": false, - "no-reference-import": false, - "no-relative-import-in-test": false, - "no-self-import": false, - "no-single-declare-module": false, - "no-string-throw": false, - "no-unnecessary-callback-wrapper": false, - "no-unnecessary-class": false, - "no-unnecessary-generics": false, - "no-unnecessary-qualifier": false, - "no-unnecessary-type-assertion": false, - "no-useless-files": false, - "no-var-keyword": false, - "no-var-requires": false, - "no-void-expression": false, - "no-trailing-whitespace": false, - "object-literal-key-quotes": false, - "object-literal-shorthand": false, - "one-line": false, - "one-variable-per-declaration": false, - "only-arrow-functions": false, - "prefer-conditional-expression": false, - "prefer-const": false, - "prefer-declare-function": false, - "prefer-for-of": false, - "prefer-method-signature": false, - "prefer-template": false, - "radix": false, - "semicolon": false, - "space-before-function-paren": false, - "space-within-parens": false, - "strict-export-declare-modifiers": false, - "trim-file": false, - "triple-equals": false, - "typedef-whitespace": false, - "unified-signatures": false, - "void-return": false, - "whitespace": false - } + "extends": "dtslint/dt.json" }