From ef520eacfa870aeabab80d88feecebb1cf6b0cbd Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Thu, 18 Oct 2018 11:48:17 +0300 Subject: [PATCH] chore: upgrade to styled-components@4 --- package.json | 7 ++- src/common-elements/perfect-scrollbar.tsx | 13 +++-- src/components/JsonViewer/JsonViewer.tsx | 2 +- src/components/SideMenu/MenuItem.tsx | 2 +- .../StickySidebar/StickyResponsiveSidebar.tsx | 2 +- src/styled-components.ts | 4 +- typings/styled-patch.d.ts | 32 ++++++---- yarn.lock | 58 +++++++++++-------- 8 files changed, 70 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index 695e84bb..ae1eaca1 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "@types/react-dom": "^16.0.9", "@types/react-hot-loader": "^4.1.0", "@types/react-tabs": "^2.3.0", + "@types/styled-components": "^4.0.1", "@types/tapable": "1.0.4", "@types/webpack": "^4.4.17", "@types/webpack-env": "^1.13.0", @@ -107,7 +108,7 @@ "shelljs": "^0.8.1", "source-map-loader": "^0.2.4", "style-loader": "^0.23.1", - "styled-components": "^3.4.5", + "styled-components": "^4.0.2", "swagger2openapi": "^3.2.8", "ts-jest": "23.10.4", "ts-loader": "5.2.2", @@ -126,7 +127,7 @@ "mobx": "^4.2.0", "react": "^16.2.0", "react-dom": "^16.2.0", - "styled-components": "^3.4.0" + "styled-components": "^4.0.1" }, "dependencies": { "classnames": "^2.2.6", @@ -134,7 +135,7 @@ "dompurify": "^1.0.7", "eventemitter3": "^3.0.0", "json-pointer": "^0.6.0", - "json-schema-ref-parser": "^5.1.2", + "json-schema-ref-parser": "^6.0.1", "lunr": "^2.3.2", "mark.js": "^8.11.1", "marked": "https://github.com/markedjs/marked#fb48827", diff --git a/src/common-elements/perfect-scrollbar.tsx b/src/common-elements/perfect-scrollbar.tsx index 5025f3dd..4b809edf 100644 --- a/src/common-elements/perfect-scrollbar.tsx +++ b/src/common-elements/perfect-scrollbar.tsx @@ -4,7 +4,7 @@ import PerfectScrollbarType, * as PerfectScrollbarNamespace from 'perfect-scroll import psStyles from 'perfect-scrollbar/css/perfect-scrollbar.css'; import { OptionsContext } from '../components/OptionsProvider'; -import styled, { injectGlobal } from '../styled-components'; +import styled, { createGlobalStyle } from '../styled-components'; /* * perfect scrollbar umd bundle uses exports assignment while module uses default export @@ -14,7 +14,7 @@ import styled, { injectGlobal } from '../styled-components'; const PerfectScrollbarConstructor = PerfectScrollbarNamespace.default || ((PerfectScrollbarNamespace as any) as PerfectScrollbarType); -injectGlobal`${psStyles && psStyles.toString()}`; +const PSStyling = createGlobalStyle`${psStyles && psStyles.toString()}`; const StyledScrollWrapper = styled.div` position: relative; @@ -58,9 +58,12 @@ export class PerfectScrollbar extends React.Component { } return ( - - {children} - + <> + + + {children} + + ); } } diff --git a/src/components/JsonViewer/JsonViewer.tsx b/src/components/JsonViewer/JsonViewer.tsx index a39aa62c..33231ee7 100644 --- a/src/components/JsonViewer/JsonViewer.tsx +++ b/src/components/JsonViewer/JsonViewer.tsx @@ -35,7 +35,7 @@ class Json extends React.PureComponent { (this.node = node!)} + ref={node => (this.node = node!)} dangerouslySetInnerHTML={{ __html: jsonToHTML(this.props.data) }} /> diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index 1b814962..9b66cb53 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/src/components/SideMenu/MenuItem.tsx @@ -46,7 +46,7 @@ export class MenuItem extends React.Component { {item.type === 'operation' ? ( diff --git a/src/components/StickySidebar/StickyResponsiveSidebar.tsx b/src/components/StickySidebar/StickyResponsiveSidebar.tsx index 3d2e2fd5..6345c8d9 100644 --- a/src/components/StickySidebar/StickyResponsiveSidebar.tsx +++ b/src/components/StickySidebar/StickyResponsiveSidebar.tsx @@ -122,7 +122,7 @@ export class StickyResponsiveSidebar extends React.Component className={this.props.className} style={style(options)} // tslint:disable-next-line - innerRef={el => { + ref={el => { this.stickyElement = el as any; }} > diff --git a/src/styled-components.ts b/src/styled-components.ts index 1e0e4fb1..c116a83a 100644 --- a/src/styled-components.ts +++ b/src/styled-components.ts @@ -18,7 +18,7 @@ function withProps( const { default: styled, css, - injectGlobal, + createGlobalStyle, keyframes, ThemeProvider, } = (styledComponents as any) as styledComponents.ThemedStyledComponentsModule< @@ -54,7 +54,7 @@ export const media = { }, }; -export { css, injectGlobal, keyframes, ThemeProvider, withProps }; +export { css, createGlobalStyle, keyframes, ThemeProvider, withProps }; export default styled; export function extensionsHook(styledName: string) { diff --git a/typings/styled-patch.d.ts b/typings/styled-patch.d.ts index 9dd299c7..c5f45652 100644 --- a/typings/styled-patch.d.ts +++ b/typings/styled-patch.d.ts @@ -2,42 +2,50 @@ import * as styledComponents from 'styled-components'; // Styled components typings for using babel-plugin BEFORE typescript declare module 'styled-components' { + type Attrs, T> = { + [K in keyof A]: ((props: ThemedStyledProps) => A[K]) | A[K] + }; + type KeyofBase = keyof any; + type Diff = ({ [P in T]: P } & { [P in U]: never })[T]; + type DiffBetween = Pick> & Pick>; interface ThemedStyledFunction { // adding "| string[]" for transpileTemplateLiterals and similar below ( strings: TemplateStringsArray | string[], - ...interpolations: Interpolation>[] + ...interpolations: Array>> ): StyledComponentClass; - - new ( + ( strings: TemplateStringsArray | string[], - ...interpolations: Interpolation>[] + ...interpolations: Array>> ): StyledComponentClass

; + attrs = {}>( + attrs: Attrs

, + ): ThemedStyledFunction, T, DiffBetween>; // adding "withConfig" for transpileTemplateLiterals withConfig(config: any): ThemedStyledFunction; } - export interface ThemedCssFunction { - // adding "| string[]" for transpileTemplateLiterals and similar below + export interface BaseThemedCssFunction { ( strings: TemplateStringsArray | string[], ...interpolations: SimpleInterpolation[] ): InterpolationValue[];

( strings: TemplateStringsArray | string[], - ...interpolations: Interpolation>[] - ): FlattenInterpolation>[]; + ...interpolations: Array>> + ): Array>>; } interface ThemedStyledComponentsModule { keyframes( strings: TemplateStringsArray | string[], ...interpolations: SimpleInterpolation[] - ): string; - injectGlobal( + ): Keyframes; + + createGlobalStyle

( strings: TemplateStringsArray | string[], - ...interpolations: SimpleInterpolation[] - ): void; + ...interpolations: Array>> + ): GlobalStyleClass; } } diff --git a/yarn.lock b/yarn.lock index 63db93c2..b3da068f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -641,6 +641,16 @@ debug "^3.1.0" lodash.once "^4.1.1" +"@emotion/is-prop-valid@^0.6.8": + version "0.6.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz#68ad02831da41213a2089d2cab4e8ac8b30cbd85" + dependencies: + "@emotion/memoize" "^0.6.6" + +"@emotion/memoize@^0.6.6": + version "0.6.6" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b" + "@types/blob-util@1.3.3": version "1.3.3" resolved "https://registry.yarnpkg.com/@types/blob-util/-/blob-util-1.3.3.tgz#adba644ae34f88e1dd9a5864c66ad651caaf628a" @@ -791,6 +801,13 @@ version "2.3.2" resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47" +"@types/styled-components@^4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.0.1.tgz#5eb9a5474dbde3becab2bcc8f04e0b8e8dcf8c06" + dependencies: + "@types/node" "*" + "@types/react" "*" + "@types/tapable@*", "@types/tapable@1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370" @@ -1494,7 +1511,7 @@ babel-plugin-jest-hoist@^23.2.0: version "23.2.0" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167" -babel-plugin-styled-components@^1.8.0: +"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.8.0.tgz#9dd054c8e86825203449a852a5746f29f2dab857" dependencies: @@ -1840,13 +1857,6 @@ buffer@^4.3.0: ieee754 "^1.1.4" isarray "^1.0.0" -buffer@^5.0.3: - version "5.2.1" - resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6" - dependencies: - base64-js "^1.0.2" - ieee754 "^1.1.4" - builtin-modules@^1.0.0, builtin-modules@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" @@ -2585,7 +2595,7 @@ css-selector-tokenizer@^0.7.0: fastparse "^1.1.1" regexpu-core "^1.0.0" -css-to-react-native@^2.0.3: +css-to-react-native@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.2.tgz#c077d0f7bf3e6c915a539e7325821c9dd01f9965" dependencies: @@ -3553,7 +3563,7 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.16, fbjs@^0.8.5: +fbjs@^0.8.5: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" dependencies: @@ -5177,14 +5187,13 @@ json-pointer@^0.6.0: dependencies: foreach "^2.0.4" -json-schema-ref-parser@^5.1.2: - version "5.1.3" - resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-5.1.3.tgz#f86c5868f40898e69169e1bbc854725a4fd0e1ad" +json-schema-ref-parser@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-6.0.1.tgz#342a43713df584ab1f3f4d5e5ca76439e0a42bce" dependencies: call-me-maybe "^1.0.1" - debug "^3.1.0" js-yaml "^3.12.0" - ono "^4.0.6" + ono "^4.0.10" json-schema-traverse@^0.3.0: version "0.3.1" @@ -6320,7 +6329,7 @@ onetime@^2.0.0: dependencies: mimic-fn "^1.0.0" -ono@^4.0.6: +ono@^4.0.10: version "4.0.10" resolved "https://registry.yarnpkg.com/ono/-/ono-4.0.10.tgz#f7f9c6d1b76270a499d8664c95a740d44175134c" dependencies: @@ -8103,19 +8112,18 @@ style-loader@^0.23.1: loader-utils "^1.1.0" schema-utils "^1.0.0" -styled-components@^3.4.5: - version "3.4.10" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.10.tgz#9a654c50ea2b516c36ade57ddcfa296bf85c96e1" +styled-components@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.0.2.tgz#7d4409ada019cdd34c25ba68c4577ea95dbcf0c5" dependencies: - buffer "^5.0.3" - css-to-react-native "^2.0.3" - fbjs "^0.8.16" - hoist-non-react-statics "^2.5.0" + "@emotion/is-prop-valid" "^0.6.8" + babel-plugin-styled-components ">= 1" + css-to-react-native "^2.2.2" + memoize-one "^4.0.0" prop-types "^15.5.4" react-is "^16.3.1" stylis "^3.5.0" stylis-rule-sheet "^0.0.10" - supports-color "^3.2.3" stylis-rule-sheet@^0.0.10: version "0.0.10" @@ -8135,7 +8143,7 @@ supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" -supports-color@^3.1.2, supports-color@^3.2.3: +supports-color@^3.1.2: version "3.2.3" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6" dependencies: