emotion-theming - npm Package Compare versions

Comparing version 11.0.0-next.0 to 11.0.0-next.1

CHANGELOG.md

 # emotion-theming
 
+## 11.0.0-next.1
+
+### Major Changes
+
+- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes:
+
+  - Reduce build times when using emotion
+  - In many cases remove the need for manually specifying generic parameters for your emotion components.
+
+  If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below.
+
+  ## Improvements
+
+  - useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section.
+  - Union types as props are better supported and should be inferred properly
+  - Build times should be reduced significantly in larger projects.
+
+  ## Breaking changes
+
+  - withTheme can now have the Theme type specified when calling it. For example `withTheme<MyTheme>(MyComponent)`
+
+    **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section
+
+  - `css` function has been restricted to prevent passing of invalid types
+  - `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example
+
+    `styled<typeof MyComponent, ExtraProps>(MyComponent)({})`
+    to
+    `styled(MyComponent)<ExtraProps>({})`
+
+  - `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example:
+
+    `StyledComponent<Props, {}, MyTheme>`
+    to
+    `StyledComponent<Props & { theme?: MyTheme }>`
+
+### Patch Changes
+
+- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6), [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687)]:
+  - @emotion/styled@11.0.0-next.1
+  - @emotion/core@11.0.0-next.1
+
 ## 11.0.0-next.0
@@ -4,0 +46,0 @@

package.json

 {
   "name": "emotion-theming",
-  "version": "11.0.0-next.0",
+  "version": "11.0.0-next.1",
   "description": "A CSS-in-JS theming solution, inspired by styled-components",
@@ -35,4 +35,4 @@ "main": "dist/emotion-theming.cjs.js",
   "devDependencies": {
-    "@emotion/core": "^11.0.0-next.0",
-    "@emotion/styled": "^11.0.0-next.0",
+    "@emotion/core": "^11.0.0-next.1",
+    "@emotion/styled": "^11.0.0-next.1",
     "@types/react": "^16.8.20",
@@ -48,3 +48,3 @@ "dtslint": "^0.3.0",
   "peerDependencies": {
-    "@emotion/core": "^11.0.0-next.0",
+    "@emotion/core": "^11.0.0-next.1",
     "react": ">=16.3.0"
@@ -51,0 +51,0 @@ },

types/index.d.ts

@@ -6,3 +6,9 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 
-import { AddOptionalTo, PropsOf } from './helper'
+import {
+  StyledComponent,
+  StyledOptions,
+  CreateStyledComponent,
+  StyledTags
+} from '@emotion/styled'
+import { PropsOf, DistributiveOmit } from '@emotion/styled-base'
 
@@ -14,21 +20,28 @@ export interface ThemeProviderProps<Theme> {
 
-export function ThemeProvider<Theme>(
-  props: ThemeProviderProps<Theme>
-): React.ReactElement
+export interface ThemeProvider<Theme extends {} = any> {
+  (props: ThemeProviderProps<Theme>): React.ReactElement
+}
 
-export function useTheme<Theme>(): Theme
-
-/**
- * @todo Add more constraint to C so that
- * this function only accepts components with theme props.
- */
-export function withTheme<C extends React.ComponentType<any>>(
+export type withTheme<Theme extends {} = any> = <
+  C extends React.ComponentType<React.ComponentProps<C>>
+>(
   component: C
-): React.SFC<AddOptionalTo<PropsOf<C>, 'theme'>>
+) => React.FC<DistributiveOmit<PropsOf<C>, 'theme'> & { theme?: Theme }>
 
+export type useTheme<Theme extends {} = any> = <T extends Theme = Theme>() => T
+
+export const ThemeProvider: ThemeProvider
+
+export const withTheme: withTheme
+
+export const useTheme: useTheme
+
 export interface EmotionTheming<Theme> {
-  ThemeProvider(props: ThemeProviderProps<Theme>): React.ReactElement
-  withTheme<C extends React.ComponentType<any>>(
-    component: C
-  ): React.SFC<AddOptionalTo<PropsOf<C>, 'theme'>>
+  ThemeProvider: ThemeProvider<Theme>
+  withTheme: withTheme<Theme>
+  useTheme: useTheme<Theme>
 }
+
+export type WithTheme<P, T> = P extends { theme: infer Theme }
+  ? P & { theme: Exclude<Theme, undefined> }
+  : P & { theme: T }

types/tslint.json

 {
-    "extends": "dtslint/dtslint.json",
-    "rules": {
-        "array-type": [true, "generic"],
-        "semicolon": false,
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-decl",
-            "check-operator",
-            "check-module",
-            "check-rest-spread",
-            "check-type",
-            "check-typecast",
-            "check-type-operator",
-            "check-preblock"
-        ],
-        "no-null-undefined-union": false,
-        "no-unnecessary-generics": false
-    }
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "array-type": [true, "generic"],
+    "semicolon": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-module",
+      "check-rest-spread",
+      "check-type",
+      "check-typecast",
+      "check-type-operator",
+      "check-preblock"
+    ],
+    "no-null-undefined-union": false,
+    "no-unnecessary-generics": false,
+    "callable-types": false
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

56640

increased by6.34%

Lines of code

612

increased by6.62%

Worsened metrics

Number of package files

20

decreased by-4.76%

No dependency changes