From acdb81c1fbda206f8ad0833061b56f923368a9a4 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sun, 7 Aug 2022 09:23:35 -0400 Subject: [PATCH 01/13] Convert primitives package to TypeScript --- packages/primitives-core/src/types.ts | 2 +- packages/primitives/package.json | 1 + packages/primitives/src/index.js | 18 --------------- packages/primitives/src/index.ts | 22 +++++++++++++++++++ .../primitives/src/{styled.js => styled.ts} | 22 +++++++++---------- .../src/{test-props.js => test-props.ts} | 6 ++--- yarn.lock | 20 +++++++++++++++++ 7 files changed, 57 insertions(+), 34 deletions(-) delete mode 100644 packages/primitives/src/index.js create mode 100644 packages/primitives/src/index.ts rename packages/primitives/src/{styled.js => styled.ts} (57%) rename packages/primitives/src/{test-props.js => test-props.ts} (87%) diff --git a/packages/primitives-core/src/types.ts b/packages/primitives-core/src/types.ts index f606163c5..04eff492e 100644 --- a/packages/primitives-core/src/types.ts +++ b/packages/primitives-core/src/types.ts @@ -1,4 +1,4 @@ -type NamedStyles = { [P in keyof T]: unknown } +type NamedStyles = { [P in keyof T]: any } // This is based on the StyleSheet type from @types/react-native export interface AbstractStyleSheet { diff --git a/packages/primitives/package.json b/packages/primitives/package.json index e20ce5924..45abb3d60 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -25,6 +25,7 @@ }, "devDependencies": { "@babel/core": "^7.18.5", + "@types/react-primitives": "^0.6.2", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "react": "16.14.0", diff --git a/packages/primitives/src/index.js b/packages/primitives/src/index.js deleted file mode 100644 index a7155513c..000000000 --- a/packages/primitives/src/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import { StyleSheet, Text, View, Image } from 'react-primitives' -import { createCss } from '@emotion/primitives-core' - -import { styled as createStyled } from './styled' - -const css = createCss(StyleSheet) - -const assignPrimitives = styled => { - createStyled.Text = createStyled(Text) - createStyled.View = createStyled(View) - createStyled.Image = createStyled(Image) - - return styled -} - -export { css } - -export default /* #__PURE__ */ assignPrimitives(createStyled) diff --git a/packages/primitives/src/index.ts b/packages/primitives/src/index.ts new file mode 100644 index 000000000..b80afba1d --- /dev/null +++ b/packages/primitives/src/index.ts @@ -0,0 +1,22 @@ +import { StyleSheet, Text, View, Image } from 'react-primitives' +import { createCss } from '@emotion/primitives-core' + +import { styled as createStyled, Styled, BaseStyled } from './styled' + +const css = createCss(StyleSheet) + +const assignPrimitives = (styled: BaseStyled): Styled => { + // bind it to avoid mutating the original function + const newStyled = styled.bind(undefined) as Styled + + newStyled.Text = createStyled(Text) + newStyled.View = createStyled(View) + newStyled.Image = createStyled(Image) + + return newStyled +} + +export { css } +export type { Styled } + +export default /* #__PURE__ */ assignPrimitives(createStyled) diff --git a/packages/primitives/src/styled.js b/packages/primitives/src/styled.ts similarity index 57% rename from packages/primitives/src/styled.js rename to packages/primitives/src/styled.ts index 6e67d9b9f..26aa93009 100644 --- a/packages/primitives/src/styled.js +++ b/packages/primitives/src/styled.ts @@ -6,7 +6,9 @@ import { testPickPropsOnOtherComponent } from './test-props' -function getShouldForwardProp(component /*: React.ElementType */) { +function getShouldForwardProp( + component: React.ElementType +): (prop: string) => boolean { switch (component) { case View: case Text: @@ -20,23 +22,19 @@ function getShouldForwardProp(component /*: React.ElementType */) { /** * a function that returns a styled component which render styles on multiple targets with same code */ - -/* -type CreateStyledComponent = ( - ...styles: any -) => React.StatelessFunctionalComponent & { - withComponent: (component: any) => React.StatelessFunctionalComponent +type CreateStyledComponent = (...styles: any) => React.FC & { + withComponent: (component: any) => React.FC } -type BaseStyled = (tag: React.ElementType) => CreateStyledComponent +/** @internal */ +export type BaseStyled = (tag: React.ElementType) => CreateStyledComponent export type Styled = BaseStyled & { - View: CreateStyledComponent, - Text: CreateStyledComponent, + View: CreateStyledComponent + Text: CreateStyledComponent Image: CreateStyledComponent } -*/ -let styled /*: Styled */ = createStyled(StyleSheet, { getShouldForwardProp }) +let styled: BaseStyled = createStyled(StyleSheet, { getShouldForwardProp }) export { styled } diff --git a/packages/primitives/src/test-props.js b/packages/primitives/src/test-props.ts similarity index 87% rename from packages/primitives/src/test-props.js rename to packages/primitives/src/test-props.ts index ad72f3037..02a33c13a 100644 --- a/packages/primitives/src/test-props.js +++ b/packages/primitives/src/test-props.ts @@ -1,6 +1,6 @@ import isPropValid from '@emotion/is-prop-valid' -const forwardableProps = { +const forwardableProps: Record = { // primitive props abortPrefetch: true, accessibilityComponentType: true, @@ -48,7 +48,7 @@ const forwardableProps = { textBreakStrategy: true } -export function testPickPropsOnPrimitiveComponent(prop /*: string */) { +export function testPickPropsOnPrimitiveComponent(prop: string): boolean { return ( forwardableProps[prop] === true || // This will allow the standard react props @@ -58,6 +58,6 @@ export function testPickPropsOnPrimitiveComponent(prop /*: string */) { ) } -export function testPickPropsOnOtherComponent(prop /*: string */) { +export function testPickPropsOnOtherComponent(prop: string): boolean { return prop !== 'theme' } diff --git a/yarn.lock b/yarn.lock index e9ae90fe6..133a0eccc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2574,6 +2574,7 @@ __metadata: "@emotion/babel-plugin": ^11.10.0 "@emotion/is-prop-valid": ^1.2.0 "@emotion/primitives-core": ^11.10.0 + "@types/react-primitives": ^0.6.2 enzyme: ^3.11.0 enzyme-adapter-react-16: ^1.15.5 react: 16.14.0 @@ -5858,6 +5859,15 @@ __metadata: languageName: node linkType: hard +"@types/react-native@npm:*": + version: 0.69.5 + resolution: "@types/react-native@npm:0.69.5" + dependencies: + "@types/react": "*" + checksum: 4ced60f7233e28d632061e86d7494319564b62db334d328056ecc1ac10904e286bd802f3152ec4a37106238fe99b5ea5b9ae89d8bcb14f4b336e836c6af2042e + languageName: node + linkType: hard + "@types/react-native@npm:^0.63.2": version: 0.63.61 resolution: "@types/react-native@npm:0.63.61" @@ -5867,6 +5877,16 @@ __metadata: languageName: node linkType: hard +"@types/react-primitives@npm:^0.6.2": + version: 0.6.2 + resolution: "@types/react-primitives@npm:0.6.2" + dependencies: + "@types/react": "*" + "@types/react-native": "*" + checksum: 8cad3f8f75dec5a0e7190c5707a4ecc75c88cb460a004f82836ec37c7b5a10b55eb2a40adeefbbccaf89c2b89ada8d8e6aa1ae4f1e186ddbb2ca2713ca9bbf55 + languageName: node + linkType: hard + "@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.9": version: 18.0.14 resolution: "@types/react@npm:18.0.14" From 588688ef392e45c297bf7036ecda35790b1fc243 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sun, 7 Aug 2022 09:58:13 -0400 Subject: [PATCH 02/13] Convert @emotion/primitives tests to TypeScript --- packages/primitives-core/src/css.ts | 2 +- packages/primitives-core/src/index.ts | 1 + packages/primitives-core/src/styled.ts | 2 +- packages/primitives-core/src/types.ts | 20 ++- packages/primitives/package.json | 4 +- packages/primitives/src/styled.ts | 7 +- .../emotion-primitives.test.tsx.snap | 138 ++++++++++++++++++ .../test/{css.test.js => css.test.ts} | 6 +- ...es.test.js => emotion-primitives.test.tsx} | 19 +-- .../__snapshots__/basic.test.tsx.snap | 15 ++ .../{basic.test.js => basic.test.tsx} | 2 +- .../{warnings.test.js => warnings.test.ts} | 0 yarn.lock | 22 +++ 13 files changed, 217 insertions(+), 21 deletions(-) create mode 100644 packages/primitives/test/__snapshots__/emotion-primitives.test.tsx.snap rename packages/primitives/test/{css.test.js => css.test.ts} (94%) rename packages/primitives/test/{emotion-primitives.test.js => emotion-primitives.test.tsx} (90%) create mode 100644 packages/primitives/test/no-babel/__snapshots__/basic.test.tsx.snap rename packages/primitives/test/no-babel/{basic.test.js => basic.test.tsx} (96%) rename packages/primitives/test/{warnings.test.js => warnings.test.ts} (100%) diff --git a/packages/primitives-core/src/css.ts b/packages/primitives-core/src/css.ts index fde7c1167..9f1a67b0b 100644 --- a/packages/primitives-core/src/css.ts +++ b/packages/primitives-core/src/css.ts @@ -7,7 +7,7 @@ import { interleave } from './utils' // this is done so we don't create a new // handleInterpolation function on every css call let styles: unknown[] | undefined -let generated: Record = {} +let generated: Record = {} let buffer = '' let lastType: string | undefined diff --git a/packages/primitives-core/src/index.ts b/packages/primitives-core/src/index.ts index d09031178..bfb6e5e6f 100644 --- a/packages/primitives-core/src/index.ts +++ b/packages/primitives-core/src/index.ts @@ -1,2 +1,3 @@ export { createCss } from './css' export { createStyled } from './styled' +export type { StyledOptions } from './styled' diff --git a/packages/primitives-core/src/styled.ts b/packages/primitives-core/src/styled.ts index e9371e349..66d7d6b86 100644 --- a/packages/primitives-core/src/styled.ts +++ b/packages/primitives-core/src/styled.ts @@ -11,7 +11,7 @@ interface CreateStyledOptions { getShouldForwardProp(cmp: React.ElementType): (prop: string) => boolean } -interface StyledOptions { +export interface StyledOptions { shouldForwardProp?(prop: string): boolean } diff --git a/packages/primitives-core/src/types.ts b/packages/primitives-core/src/types.ts index 04eff492e..e20a0cf35 100644 --- a/packages/primitives-core/src/types.ts +++ b/packages/primitives-core/src/types.ts @@ -1,10 +1,24 @@ +// This is based on the StyleSheet types from @types/react-native + +type Falsy = undefined | null | false + +interface RecursiveArray + extends Array | RecursiveArray> {} + +type RegisteredStyle = number & { __registeredStyleBrand: T } + +type StyleProp = + | T + | RegisteredStyle + | RecursiveArray | Falsy> + | Falsy + type NamedStyles = { [P in keyof T]: any } -// This is based on the StyleSheet type from @types/react-native export interface AbstractStyleSheet { create | NamedStyles>( styles: T | NamedStyles - ): T + ): { [P in keyof T]: number } - flatten(style?: unknown[]): unknown + flatten(style?: StyleProp): T extends (infer U)[] ? U : T } diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 45abb3d60..013be2ab2 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -26,10 +26,12 @@ "devDependencies": { "@babel/core": "^7.18.5", "@types/react-primitives": "^0.6.2", + "@types/react-test-renderer": "^16", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "react": "16.14.0", - "react-primitives": "^0.8.1" + "react-primitives": "^0.8.1", + "react-test-renderer": "16.8.6" }, "homepage": "https://emotion.sh", "license": "MIT", diff --git a/packages/primitives/src/styled.ts b/packages/primitives/src/styled.ts index 26aa93009..ea72152a4 100644 --- a/packages/primitives/src/styled.ts +++ b/packages/primitives/src/styled.ts @@ -1,6 +1,6 @@ import * as React from 'react' import { StyleSheet, View, Text, Image } from 'react-primitives' -import { createStyled } from '@emotion/primitives-core' +import { createStyled, StyledOptions } from '@emotion/primitives-core' import { testPickPropsOnPrimitiveComponent, testPickPropsOnOtherComponent @@ -27,7 +27,10 @@ type CreateStyledComponent = (...styles: any) => React.FC & { } /** @internal */ -export type BaseStyled = (tag: React.ElementType) => CreateStyledComponent +export type BaseStyled = ( + tag: React.ElementType, + options?: StyledOptions | undefined +) => CreateStyledComponent export type Styled = BaseStyled & { View: CreateStyledComponent diff --git a/packages/primitives/test/__snapshots__/emotion-primitives.test.tsx.snap b/packages/primitives/test/__snapshots__/emotion-primitives.test.tsx.snap new file mode 100644 index 000000000..aaf75e680 --- /dev/null +++ b/packages/primitives/test/__snapshots__/emotion-primitives.test.tsx.snap @@ -0,0 +1,138 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Emotion primitives custom shouldForwardProp works 1`] = ` +
+ Emotion +
+`; + +exports[`Emotion primitives primitive should work with \`withComponent\` 1`] = ` +
+ Mike +
+`; + +exports[`Emotion primitives should pass props in withComponent 1`] = ` +
+`; + +exports[`Emotion primitives should pass props in withComponent 2`] = ` +
+`; + +exports[`Emotion primitives should render 1`] = ` +
+
+
+`; + +exports[`Emotion primitives should render primitive with style prop 1`] = ` +
+ Emotion primitives +
+`; + +exports[`Emotion primitives should render the primitive on changing the props 1`] = ` +
+ Emotion Primitives +
+`; + +exports[`Emotion primitives should render the primitive when styles applied using object style notation 1`] = ` +
+ Emotion Primitives +
+`; + +exports[`Emotion primitives should style any other component 1`] = ` +
+ Hello World +
+`; + +exports[`Emotion primitives should unmount with theming 1`] = ` +
+
+ Hello World +
+
+`; + +exports[`Emotion primitives should work with StyleSheet.create API 1`] = ` +
+ Emotion Primitives +
+`; + +exports[`Emotion primitives should work with theming from @emotion/react 1`] = ` +
+ Hello World +
+`; diff --git a/packages/primitives/test/css.test.js b/packages/primitives/test/css.test.ts similarity index 94% rename from packages/primitives/test/css.test.js rename to packages/primitives/test/css.test.ts index a5b0882d3..b645c445f 100644 --- a/packages/primitives/test/css.test.js +++ b/packages/primitives/test/css.test.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/primitives' import { StyleSheet } from 'react-native' -let returnArguments = (...args) => args +let returnArguments = (...args: any[]) => args test('basic', () => { expect( @@ -80,7 +80,7 @@ test('order with string and object', () => { it('allows function interpolations when this is defined', () => { expect( StyleSheet.flatten( - css.call({ thing: true }, props => ({ + css.call({ thing: true }, (props: { thing: boolean }) => ({ color: props.thing && 'hotpink' })) ) @@ -90,7 +90,7 @@ it('allows function interpolations when this is defined', () => { it('works with nested functions', () => { expect( StyleSheet.flatten( - css.call({ thing: true }, props => () => ({ + css.call({ thing: true }, (props: { thing: boolean }) => () => ({ color: props.thing && 'hotpink' })) ) diff --git a/packages/primitives/test/emotion-primitives.test.js b/packages/primitives/test/emotion-primitives.test.tsx similarity index 90% rename from packages/primitives/test/emotion-primitives.test.js rename to packages/primitives/test/emotion-primitives.test.tsx index dc2c1bbaa..5289372e2 100644 --- a/packages/primitives/test/emotion-primitives.test.js +++ b/packages/primitives/test/emotion-primitives.test.tsx @@ -16,6 +16,7 @@ describe('Emotion primitives', () => { }) test('should throw an error when used invalid primitive', () => { + // @ts-expect-error expect(() => styled.TEXT({})).toThrow() }) @@ -23,7 +24,7 @@ describe('Emotion primitives', () => { const Text = styled.Text` color: red; font-size: 20px; - background-color: ${props => props.back}; + background-color: ${(props: any) => props.back}; ` const tree = renderer .create( @@ -37,7 +38,7 @@ describe('Emotion primitives', () => { it('should work with theming from @emotion/react', () => { const Text = styled.Text` - color: ${props => props.theme.backgroundColor}; + color: ${(props: any) => props.theme.backgroundColor}; ` const tree = renderer @@ -53,7 +54,7 @@ describe('Emotion primitives', () => { it('should unmount with theming', () => { const StyledText = styled.Text` - display: ${props => props.theme.display}; + display: ${(props: any) => props.theme.display}; ` const { container, unmount } = render( @@ -69,7 +70,7 @@ describe('Emotion primitives', () => { }) test('should render the primitive on changing the props', () => { - const Text = styled.Text({ padding: '20px' }, props => ({ + const Text = styled.Text({ padding: '20px' }, (props: any) => ({ color: props.decor })) const tree = renderer @@ -102,7 +103,7 @@ describe('Emotion primitives', () => { test('primitive should work with `withComponent`', () => { const StyledText = styled.Text` - color: ${props => props.decor}; + color: ${(props: any) => props.decor}; ` const Name = StyledText.withComponent(Text) const tree = renderer.create(Mike).toJSON() @@ -116,7 +117,7 @@ describe('Emotion primitives', () => { const Title = () => Hello World const StyledTitle = styled(Title)` font-size: 20px; - font-style: ${props => props.sty}; + font-style: ${(props: any) => props.sty}; ` const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() @@ -136,7 +137,7 @@ describe('Emotion primitives', () => { it('should pass props in withComponent', () => { const ViewOne = styled.View` - background-color: ${props => props.color}; + background-color: ${(props: any) => props.color}; ` const treeOne = renderer.create() const ViewTwo = ViewOne.withComponent(Text) @@ -167,11 +168,11 @@ describe('Emotion primitives', () => { test('custom shouldForwardProp works', () => { const Text = styled.Text`` - const Title = props => + const Title = (props: any) => const StyledTitle = styled(Title, { shouldForwardProp: prop => prop !== 'color' && prop !== 'theme' })` - color: ${props => props.color}; + color: ${(props: any) => props.color}; ` const tree = renderer diff --git a/packages/primitives/test/no-babel/__snapshots__/basic.test.tsx.snap b/packages/primitives/test/no-babel/__snapshots__/basic.test.tsx.snap new file mode 100644 index 000000000..4c13c5691 --- /dev/null +++ b/packages/primitives/test/no-babel/__snapshots__/basic.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render the primitive when styles applied using object style notation 1`] = ` +
+ Emotion Primitives +
+`; diff --git a/packages/primitives/test/no-babel/basic.test.js b/packages/primitives/test/no-babel/basic.test.tsx similarity index 96% rename from packages/primitives/test/no-babel/basic.test.js rename to packages/primitives/test/no-babel/basic.test.tsx index 7697ac125..49d9f167e 100644 --- a/packages/primitives/test/no-babel/basic.test.js +++ b/packages/primitives/test/no-babel/basic.test.tsx @@ -43,7 +43,7 @@ test('should render the primitive when styles applied using object style notatio const Text = styled.Text` color: red; font-size: 20px; - background-color: ${props => props.back}; + background-color: ${(props: any) => props.back}; ` const tree = renderer .create( diff --git a/packages/primitives/test/warnings.test.js b/packages/primitives/test/warnings.test.ts similarity index 100% rename from packages/primitives/test/warnings.test.js rename to packages/primitives/test/warnings.test.ts diff --git a/yarn.lock b/yarn.lock index 133a0eccc..4de4aa5cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2575,10 +2575,12 @@ __metadata: "@emotion/is-prop-valid": ^1.2.0 "@emotion/primitives-core": ^11.10.0 "@types/react-primitives": ^0.6.2 + "@types/react-test-renderer": ^16 enzyme: ^3.11.0 enzyme-adapter-react-16: ^1.15.5 react: 16.14.0 react-primitives: ^0.8.1 + react-test-renderer: 16.8.6 peerDependencies: "@babel/core": ^7.0.0 react: ">=16.8.0" @@ -5887,6 +5889,15 @@ __metadata: languageName: node linkType: hard +"@types/react-test-renderer@npm:^16": + version: 16.9.5 + resolution: "@types/react-test-renderer@npm:16.9.5" + dependencies: + "@types/react": ^16 + checksum: 5ba383f05342c9bdd3bdd431591586b76d01d673f7446bf0a035f990cdb8a84c8944994089bf179855b39324f516ed1461e23c7f27e2522210a7acaba60a5172 + languageName: node + linkType: hard + "@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.9": version: 18.0.14 resolution: "@types/react@npm:18.0.14" @@ -5898,6 +5909,17 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:^16": + version: 16.14.30 + resolution: "@types/react@npm:16.14.30" + dependencies: + "@types/prop-types": "*" + "@types/scheduler": "*" + csstype: ^3.0.2 + checksum: b0810f92b8bf086b6da5cb96bfff2babe957517a34518e439aed75402a12271555d00f3e30de5f1a5cc97b2f6e37eccdf3538546add8d0deace771e16048d2ac + languageName: node + linkType: hard + "@types/remark-prism@npm:^1.3.3": version: 1.3.3 resolution: "@types/remark-prism@npm:1.3.3" From 8685d3f8d3009e7bd04b7666e8f3bea5e3ab1d82 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sun, 7 Aug 2022 10:04:18 -0400 Subject: [PATCH 03/13] Add changeset, add "types" to package.json --- .changeset/smart-kids-leave.md | 5 +++++ packages/primitives/package.json | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/smart-kids-leave.md diff --git a/.changeset/smart-kids-leave.md b/.changeset/smart-kids-leave.md new file mode 100644 index 000000000..089840b7a --- /dev/null +++ b/.changeset/smart-kids-leave.md @@ -0,0 +1,5 @@ +--- +'@emotion/primitives': minor +--- + +Source code has been migrated to TypeScript so from now on type declarations will be available in the published package. diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 013be2ab2..e824cd5f6 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -3,6 +3,7 @@ "version": "11.10.0", "main": "dist/emotion-primitives.cjs.js", "module": "dist/emotion-primitives.esm.js", + "types": "dist/emotion-primitives.cjs.d.ts", "files": [ "src", "dist", From 4d1ef69cf205a5bb7281c5db72766e43eea0ee8b Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sun, 7 Aug 2022 10:08:57 -0400 Subject: [PATCH 04/13] Remove old snapshots --- .../emotion-primitives.test.js.snap | 138 ------------------ .../no-babel/__snapshots__/basic.test.js.snap | 15 -- 2 files changed, 153 deletions(-) delete mode 100644 packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap delete mode 100644 packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap diff --git a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap b/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap deleted file mode 100644 index 6cf28bd13..000000000 --- a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap +++ /dev/null @@ -1,138 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Emotion primitives custom shouldForwardProp works 1`] = ` -
- Emotion -
-`; - -exports[`Emotion primitives primitive should work with \`withComponent\` 1`] = ` -
- Mike -
-`; - -exports[`Emotion primitives should pass props in withComponent 1`] = ` -
-`; - -exports[`Emotion primitives should pass props in withComponent 2`] = ` -
-`; - -exports[`Emotion primitives should render 1`] = ` -
-
-
-`; - -exports[`Emotion primitives should render primitive with style prop 1`] = ` -
- Emotion primitives -
-`; - -exports[`Emotion primitives should render the primitive on changing the props 1`] = ` -
- Emotion Primitives -
-`; - -exports[`Emotion primitives should render the primitive when styles applied using object style notation 1`] = ` -
- Emotion Primitives -
-`; - -exports[`Emotion primitives should style any other component 1`] = ` -
- Hello World -
-`; - -exports[`Emotion primitives should unmount with theming 1`] = ` -
-
- Hello World -
-
-`; - -exports[`Emotion primitives should work with StyleSheet.create API 1`] = ` -
- Emotion Primitives -
-`; - -exports[`Emotion primitives should work with theming from @emotion/react 1`] = ` -
- Hello World -
-`; diff --git a/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap b/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap deleted file mode 100644 index 4c13c5691..000000000 --- a/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should render the primitive when styles applied using object style notation 1`] = ` -
- Emotion Primitives -
-`; From 8946f62bad56dcb23e579e2d9a3f7c2c9a409b65 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Thu, 18 Aug 2022 11:08:12 -0400 Subject: [PATCH 05/13] @emotion/primitives TypeScript tweaks --- packages/primitives-core/src/css.ts | 2 +- packages/primitives-core/src/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/primitives-core/src/css.ts b/packages/primitives-core/src/css.ts index 9f1a67b0b..fde7c1167 100644 --- a/packages/primitives-core/src/css.ts +++ b/packages/primitives-core/src/css.ts @@ -7,7 +7,7 @@ import { interleave } from './utils' // this is done so we don't create a new // handleInterpolation function on every css call let styles: unknown[] | undefined -let generated: Record = {} +let generated: Record = {} let buffer = '' let lastType: string | undefined diff --git a/packages/primitives-core/src/types.ts b/packages/primitives-core/src/types.ts index e20a0cf35..bbf845d31 100644 --- a/packages/primitives-core/src/types.ts +++ b/packages/primitives-core/src/types.ts @@ -18,7 +18,7 @@ type NamedStyles = { [P in keyof T]: any } export interface AbstractStyleSheet { create | NamedStyles>( styles: T | NamedStyles - ): { [P in keyof T]: number } + ): T flatten(style?: StyleProp): T extends (infer U)[] ? U : T } From 03a4dcd85083d871b7a6f96ea8ff8eae8e4fbad0 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Thu, 18 Aug 2022 13:43:47 -0400 Subject: [PATCH 06/13] Change something to `any` to fix typescript errors --- packages/primitives-core/src/css.ts | 2 +- packages/primitives/test/css.test.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/primitives-core/src/css.ts b/packages/primitives-core/src/css.ts index fde7c1167..dece86d30 100644 --- a/packages/primitives-core/src/css.ts +++ b/packages/primitives-core/src/css.ts @@ -7,7 +7,7 @@ import { interleave } from './utils' // this is done so we don't create a new // handleInterpolation function on every css call let styles: unknown[] | undefined -let generated: Record = {} +let generated: Record = {} let buffer = '' let lastType: string | undefined diff --git a/packages/primitives/test/css.test.ts b/packages/primitives/test/css.test.ts index b645c445f..f6fc97fd5 100644 --- a/packages/primitives/test/css.test.ts +++ b/packages/primitives/test/css.test.ts @@ -61,6 +61,7 @@ test('order with string and object', () => { ) ) ).toEqual(['color', 'backgroundColor', 'flex']) + expect( Object.keys( StyleSheet.flatten( From 0b8abde2efb048621eb86680e00debe998d89769 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 22 Aug 2022 10:54:16 -0400 Subject: [PATCH 07/13] Work on converting @emotion/native --- packages/native/package.json | 3 +- packages/native/src/base.js | 9 - .../native/{types/base.d.ts => src/base.ts} | 11 +- packages/native/src/index.d.ts | 2 - packages/native/src/index.js | 61 ------- packages/native/src/index.ts | 159 ++++++++++++++++++ ...{native-css.test.js => native-css.test.ts} | 25 ++- packages/native/types/index.d.ts | 110 ------------ tsconfig.json | 3 +- 9 files changed, 188 insertions(+), 195 deletions(-) delete mode 100644 packages/native/src/base.js rename packages/native/{types/base.d.ts => src/base.ts} (96%) delete mode 100644 packages/native/src/index.d.ts delete mode 100644 packages/native/src/index.js create mode 100644 packages/native/src/index.ts rename packages/native/test/{native-css.test.js => native-css.test.ts} (82%) delete mode 100644 packages/native/types/index.d.ts diff --git a/packages/native/package.json b/packages/native/package.json index dc7b92c00..ef3e1d5bf 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -18,10 +18,9 @@ "files": [ "src", "dist", - "types/*.d.ts", "macro.js" ], - "types": "types/index.d.ts", + "types": "./dist/emotion-native.cjs.d.ts", "devDependencies": { "@babel/core": "^7.18.5", "@definitelytyped/dtslint": "0.0.112", diff --git a/packages/native/src/base.js b/packages/native/src/base.js deleted file mode 100644 index 56087e225..000000000 --- a/packages/native/src/base.js +++ /dev/null @@ -1,9 +0,0 @@ -import { StyleSheet } from 'react-native' -import { createStyled } from '@emotion/primitives-core' - -/** - * a function that returns a styled component which render styles in React Native - */ -let styled = createStyled(StyleSheet) - -export { styled } diff --git a/packages/native/types/base.d.ts b/packages/native/src/base.ts similarity index 96% rename from packages/native/types/base.d.ts rename to packages/native/src/base.ts index a14f22bad..2f92673c8 100644 --- a/packages/native/types/base.d.ts +++ b/packages/native/src/base.ts @@ -1,11 +1,11 @@ // Definitions by: Pat Sissons // TypeScript Version: 3.4 +import { StyleSheet } from 'react-native' +import { createStyled } from '@emotion/primitives-core' import { Theme } from '@emotion/react' import * as RN from 'react-native' -type ReactNative = typeof RN - export type ReactNativeStyle = RN.ViewStyle | RN.TextStyle | RN.ImageStyle export type ReactNativeStyleType = Props extends { @@ -202,4 +202,9 @@ export interface CreateStyled { > } -export const styled: CreateStyled +/** + * a function that returns a styled component which render styles in React Native + */ +let styled = createStyled(StyleSheet) + +export { styled } diff --git a/packages/native/src/index.d.ts b/packages/native/src/index.d.ts deleted file mode 100644 index 9e4609375..000000000 --- a/packages/native/src/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from '../types' -export { default } from '../types' diff --git a/packages/native/src/index.js b/packages/native/src/index.js deleted file mode 100644 index 559cd9d64..000000000 --- a/packages/native/src/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import * as reactNative from 'react-native' -import { createCss } from '@emotion/primitives-core' - -import { styled } from './base' - -const css = createCss(reactNative.StyleSheet) - -const components = [ - 'ActivityIndicator', - 'Button', - 'DatePickerIOS', - 'DrawerLayoutAndroid', - 'FlatList', - 'Image', - 'ImageBackground', - 'KeyboardAvoidingView', - 'ListView', - 'Modal', - 'NavigatorIOS', - 'Picker', - 'PickerIOS', - 'Pressable', - 'ProgressBarAndroid', - 'ProgressViewIOS', - 'RecyclerViewBackedScrollView', - 'RefreshControl', - 'SafeAreaView', - 'ScrollView', - 'SectionList', - 'SegmentedControlIOS', - 'Slider', - 'SnapshotViewIOS', - 'StatusBar', - 'SwipeableListView', - 'Switch', - 'SwitchIOS', - 'TabBarIOS', - 'Text', - 'TextInput', - 'ToolbarAndroid', - 'TouchableHighlight', - 'TouchableNativeFeedback', - 'TouchableOpacity', - 'TouchableWithoutFeedback', - 'View', - 'ViewPagerAndroid' -] - -export { css } - -export default components.reduce( - (acc, comp) => - Object.defineProperty(acc, comp, { - enumerable: true, - configurable: false, - get() { - return styled(reactNative[comp]) - } - }), - styled -) diff --git a/packages/native/src/index.ts b/packages/native/src/index.ts new file mode 100644 index 000000000..a50f0fd5e --- /dev/null +++ b/packages/native/src/index.ts @@ -0,0 +1,159 @@ +import * as ReactNative from 'react-native' +import { createCss } from '@emotion/primitives-core' + +import { + CreateStyled as BaseCreateStyled, + CreateStyledComponent, + CSSInterpolation, + Interpolation, + ReactNativeStyle, + ReactNativeStyleType, + styled as baseStyled +} from './base' +import React from 'react' +import { Theme } from '@emotion/react' + +export interface EmotionNativeCss { + ( + template: TemplateStringsArray, + ...args: Array + ): StyleType + + ( + ...args: Array + ): StyleType + + ( + ...args: Array + ): StyleType + + // TODO:SAM:CHANGESET Added this overload + ( + this: MergedProps, + ...args: Array> + ): StyleType +} + +export const css: EmotionNativeCss = createCss(ReactNative.StyleSheet) + +// those 2 are just copies of the `BaseCreateStyled` with supplied `C` type argument +type HostClassComponent> = + CreateStyledComponent< + React.ComponentProps & { theme?: Theme; as?: React.ElementType }, + {}, + { ref?: React.Ref> }, + ReactNativeStyleType> + > +type HostFunctionComponent> = + CreateStyledComponent< + React.ComponentProps & { theme?: Theme; as?: React.ElementType }, + {}, + {}, + ReactNativeStyleType> + > + +type RN = typeof ReactNative + +// TODO:SAM:CHANGESET removed ToolbarAndroid which was removed in RN 0.61 + +const components = [ + 'ActivityIndicator', + 'DatePickerIOS', + 'DrawerLayoutAndroid', + 'FlatList', + 'Image', + 'ImageBackground', + 'KeyboardAvoidingView', + 'ListView', + 'Modal', + 'NavigatorIOS', + 'Picker', + 'PickerIOS', + 'ProgressBarAndroid', + 'ProgressViewIOS', + 'RecyclerViewBackedScrollView', + 'RefreshControl', + 'SafeAreaView', + 'ScrollView', + 'SectionList', + 'SegmentedControlIOS', + 'Slider', + 'SnapshotViewIOS', + 'StatusBar', + 'SwipeableListView', + 'Switch', + 'SwitchIOS', + 'TabBarIOS', + 'Text', + 'TextInput', + 'TouchableHighlight', + 'TouchableNativeFeedback', + 'TouchableOpacity', + 'TouchableWithoutFeedback', + 'View', + 'ViewPagerAndroid', + 'Pressable' +] + +type RNClassComponent = + | 'ActivityIndicator' + | 'Button' + | 'DatePickerIOS' + | 'DrawerLayoutAndroid' + | 'FlatList' + | 'Image' + | 'ImageBackground' + | 'KeyboardAvoidingView' + | 'ListView' + | 'Modal' + | 'NavigatorIOS' + | 'Picker' + | 'PickerIOS' + | 'ProgressBarAndroid' + | 'ProgressViewIOS' + | 'RecyclerViewBackedScrollView' + | 'RefreshControl' + | 'SafeAreaView' + | 'ScrollView' + | 'SectionList' + | 'SegmentedControlIOS' + | 'Slider' + | 'SnapshotViewIOS' + | 'StatusBar' + | 'SwipeableListView' + | 'Switch' + | 'SwitchIOS' + | 'TabBarIOS' + | 'Text' + | 'TextInput' + | 'TouchableHighlight' + | 'TouchableNativeFeedback' + | 'TouchableOpacity' + | 'TouchableWithoutFeedback' + | 'View' + | 'ViewPagerAndroid' + +type RNFunctionComponent = 'Pressable' + +export type StyledComponents = { + [C in RNClassComponent]: HostClassComponent +} & + { [C in RNFunctionComponent]: HostFunctionComponent } + +export type CreateStyled = BaseCreateStyled & StyledComponents + +const styled: CreateStyled = components.reduce( + (acc, comp) => + Object.defineProperty(acc, comp, { + enumerable: true, + configurable: false, + get() { + return baseStyled( + ReactNative[comp as RNClassComponent | RNFunctionComponent] + ) + } + }), + baseStyled +) as any + +export default styled diff --git a/packages/native/test/native-css.test.js b/packages/native/test/native-css.test.ts similarity index 82% rename from packages/native/test/native-css.test.js rename to packages/native/test/native-css.test.ts index f3f0bf870..af2ec47de 100644 --- a/packages/native/test/native-css.test.js +++ b/packages/native/test/native-css.test.ts @@ -1,9 +1,10 @@ import { css } from '@emotion/native' import { StyleSheet } from 'react-native' +import { Interpolation, ReactNativeStyle } from '../src/base' jest.mock('react-native') -let returnArguments = (...args) => args +let returnArguments = (...args: A): A => args describe('Emotion native css', () => { test('basic', () => { @@ -83,8 +84,12 @@ describe('Emotion native css', () => { it('allows function interpolations when this.mergedProps is defined', () => { expect( StyleSheet.flatten( - css.call({ thing: true }, props => ({ - color: props.thing && 'hotpink' + css.call< + { thing: boolean }, + Interpolation<{ thing: boolean }, ReactNativeStyle>[], + ReactNativeStyle + >({ thing: true }, (props: { thing: boolean }) => ({ + color: props.thing ? 'hotpink' : undefined })) ) ).toEqual({ color: 'hotpink' }) @@ -93,8 +98,12 @@ describe('Emotion native css', () => { it('works with nested functions', () => { expect( StyleSheet.flatten( - css.call({ thing: true }, props => () => ({ - color: props.thing && 'hotpink' + css.call< + { thing: boolean }, + Interpolation<{ thing: boolean }, ReactNativeStyle>[], + ReactNativeStyle + >({ thing: true }, props => () => ({ + color: props.thing ? 'hotpink' : undefined })) ) ).toEqual({ color: 'hotpink' }) @@ -103,7 +112,11 @@ describe('Emotion native css', () => { it('works with functions in tagged template literals', () => { expect( StyleSheet.flatten( - css.call( + css.call< + unknown, + [TemplateStringsArray, () => string], + ReactNativeStyle + >( {}, ...returnArguments` color: ${() => 'hotpink'}; diff --git a/packages/native/types/index.d.ts b/packages/native/types/index.d.ts deleted file mode 100644 index 975f2a7bf..000000000 --- a/packages/native/types/index.d.ts +++ /dev/null @@ -1,110 +0,0 @@ -// Definitions by: Pat Sissons -// TypeScript Version: 3.4 - -import * as RN from 'react-native' -import { Theme } from '@emotion/react' - -import { - CreateStyled as BaseCreateStyled, - CreateStyledComponent, - CSSInterpolation, - Interpolation, - ReactNativeStyle, - ReactNativeStyleType -} from './base' - -export { - ArrayCSSInterpolation, - ArrayInterpolation, - CreateStyledComponent, - CSSInterpolation, - FilteringStyledOptions, - FunctionInterpolation, - Interpolation, - InterpolationPrimitive, - ObjectInterpolation, - ReactNativeStyle, - StyledComponent, - StyledOptions -} from './base' - -type ReactNative = typeof RN - -export function css( - template: TemplateStringsArray, - ...args: Array -): StyleType -export function css( - ...args: Array -): StyleType -export function css( - ...args: Array -): StyleType - -// those 2 are just copies of the `BaseCreateStyled` with supplied `C` type argument -type HostClassComponent> = - CreateStyledComponent< - React.ComponentProps & { theme?: Theme; as?: React.ElementType }, - {}, - { ref?: React.Ref> }, - ReactNativeStyleType> - > -type HostFunctionComponent> = - CreateStyledComponent< - React.ComponentProps & { theme?: Theme; as?: React.ElementType }, - {}, - {}, - ReactNativeStyleType> - > - -export interface StyledComponents { - ActivityIndicator: HostClassComponent - Button: HostClassComponent - DatePickerIOS: HostClassComponent - DrawerLayoutAndroid: HostClassComponent - FlatList: HostClassComponent - Image: HostClassComponent - ImageBackground: HostClassComponent - KeyboardAvoidingView: HostClassComponent - ListView: HostClassComponent - Modal: HostClassComponent - NavigatorIOS: HostClassComponent - Picker: HostClassComponent - PickerIOS: HostClassComponent - Pressable: HostFunctionComponent - ProgressBarAndroid: HostClassComponent - ProgressViewIOS: HostClassComponent - RecyclerViewBackedScrollView: HostClassComponent< - ReactNative['RecyclerViewBackedScrollView'] - > - RefreshControl: HostClassComponent - SafeAreaView: HostClassComponent - ScrollView: HostClassComponent - SectionList: HostClassComponent - SegmentedControlIOS: HostClassComponent - Slider: HostClassComponent - SnapshotViewIOS: HostClassComponent - StatusBar: HostClassComponent - SwipeableListView: HostClassComponent - Switch: HostClassComponent - SwitchIOS: HostClassComponent - TabBarIOS: HostClassComponent - Text: HostClassComponent - TextInput: HostClassComponent - ToolbarAndroid: HostClassComponent - TouchableHighlight: HostClassComponent - TouchableNativeFeedback: HostClassComponent< - ReactNative['TouchableNativeFeedback'] - > - TouchableOpacity: HostClassComponent - TouchableWithoutFeedback: HostClassComponent< - ReactNative['TouchableWithoutFeedback'] - > - View: HostClassComponent - ViewPagerAndroid: HostClassComponent -} - -export interface CreateStyled extends BaseCreateStyled, StyledComponents {} - -declare const styled: CreateStyled -export default styled diff --git a/tsconfig.json b/tsconfig.json index d7de73673..a0ce61ac5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,6 @@ "exclude": [ "node_modules", "packages/*/types/test/*", - "packages/*/types/test*", - "packages/native" + "packages/*/types/test*" ] } From da4c5f82124fc93c453fd7534b4060a080067353 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 22 Aug 2022 10:59:55 -0400 Subject: [PATCH 08/13] Convert native-styled.test.js --- ...-styled.test.js => native-styled.test.tsx} | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) rename packages/native/test/{native-styled.test.js => native-styled.test.tsx} (88%) diff --git a/packages/native/test/native-styled.test.js b/packages/native/test/native-styled.test.tsx similarity index 88% rename from packages/native/test/native-styled.test.js rename to packages/native/test/native-styled.test.tsx index ec992fcec..d8e9c0547 100644 --- a/packages/native/test/native-styled.test.js +++ b/packages/native/test/native-styled.test.tsx @@ -11,6 +11,7 @@ jest.mock('react-native') console.error = jest.fn() const theme = { backgroundColor: 'magenta', display: 'flex' } +type Theme = typeof theme describe('Emotion native styled', () => { test('should not throw an error when used valid primitive', () => { @@ -18,11 +19,12 @@ describe('Emotion native styled', () => { }) test('should throw an error when used invalid primitive', () => { + // @ts-expect-error expect(() => styled.TEXT({})).toThrow() }) test('should render the primitive when styles applied using object style notation', () => { - const Text = styled.Text` + const Text = styled.Text<{ back: string }>` color: red; font-size: 20px; background-color: ${props => props.back}; @@ -39,12 +41,12 @@ describe('Emotion native styled', () => { it('should work with theming from @emotion/react', () => { const Text = styled.Text` - color: ${props => props.theme.backgroundColor}; + color: ${props => (props.theme as unknown as Theme).backgroundColor}; ` const tree = renderer .create( - + Hello World ) @@ -54,7 +56,7 @@ describe('Emotion native styled', () => { }) test('should render the primitive on changing the props', () => { - const Text = styled.Text({ padding: '20px' }, props => ({ + const Text = styled.Text<{ decor: string }>({ padding: '20px' }, props => ({ color: props.decor })) const tree = renderer @@ -85,7 +87,7 @@ describe('Emotion native styled', () => { }) test('primitive should work with `withComponent`', () => { - const Text = styled.Text` + const Text = styled.Text<{ decor: string }>` color: ${props => props.decor}; ` const Name = Text.withComponent(reactNative.Text) @@ -98,7 +100,7 @@ describe('Emotion native styled', () => { color: hotpink; ` const Title = () => Hello World - const StyledTitle = styled(Title)` + const StyledTitle = styled(Title)<{ sty: string }>` font-size: 20px; font-style: ${props => props.sty}; ` @@ -107,7 +109,7 @@ describe('Emotion native styled', () => { }) it('should pass props in withComponent', () => { - const ViewOne = styled.View` + const ViewOne = styled.View<{ color: string }>` background-color: ${props => props.color}; ` const treeOne = renderer.create() @@ -151,11 +153,11 @@ describe('Emotion native styled', () => { }) it('should render styles correctly from all nested style factories', () => { - const bgColor = color => css` + const bgColor = (color: string) => css` background-color: ${color}; ` - const Text = styled.Text` + const Text = styled.Text<{ backgroundColor: string }>` color: hotpink; ${({ backgroundColor }) => bgColor(backgroundColor)}; ` From 3a663ab798fb917cd3352ba5227f390fd1b941e0 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 22 Aug 2022 11:13:55 -0400 Subject: [PATCH 09/13] Finish converting @emotion/native --- packages/native/package.json | 5 ++--- packages/native/src/index.ts | 15 +++++++++++++++ ...test.js.snap => native-styled.test.tsx.snap} | 0 packages/native/test/native-styled.test.tsx | 10 +++++++--- packages/native/tsconfig.json | 17 ----------------- packages/native/types/index.d.ts | 1 + 6 files changed, 25 insertions(+), 23 deletions(-) rename packages/native/test/__snapshots__/{native-styled.test.js.snap => native-styled.test.tsx.snap} (100%) delete mode 100644 packages/native/tsconfig.json create mode 100644 packages/native/types/index.d.ts diff --git a/packages/native/package.json b/packages/native/package.json index ef3e1d5bf..223c7a2e4 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -20,14 +20,13 @@ "dist", "macro.js" ], - "types": "./dist/emotion-native.cjs.d.ts", + "types": "dist/emotion-native.cjs.d.ts", "devDependencies": { "@babel/core": "^7.18.5", "@definitelytyped/dtslint": "0.0.112", "@types/react-native": "^0.63.2", "react": "16.14.0", - "react-native": "^0.63.2", - "typescript": "^4.5.5" + "react-native": "^0.63.2" }, "dependencies": { "@emotion/primitives-core": "^11.10.0" diff --git a/packages/native/src/index.ts b/packages/native/src/index.ts index a50f0fd5e..e48a1baae 100644 --- a/packages/native/src/index.ts +++ b/packages/native/src/index.ts @@ -13,6 +13,21 @@ import { import React from 'react' import { Theme } from '@emotion/react' +export type { + ArrayCSSInterpolation, + ArrayInterpolation, + CreateStyledComponent, + CSSInterpolation, + FilteringStyledOptions, + FunctionInterpolation, + Interpolation, + InterpolationPrimitive, + ObjectInterpolation, + ReactNativeStyle, + StyledComponent, + StyledOptions +} from './base' + export interface EmotionNativeCss { ( template: TemplateStringsArray, diff --git a/packages/native/test/__snapshots__/native-styled.test.js.snap b/packages/native/test/__snapshots__/native-styled.test.tsx.snap similarity index 100% rename from packages/native/test/__snapshots__/native-styled.test.js.snap rename to packages/native/test/__snapshots__/native-styled.test.tsx.snap diff --git a/packages/native/test/native-styled.test.tsx b/packages/native/test/native-styled.test.tsx index d8e9c0547..2dfc62e06 100644 --- a/packages/native/test/native-styled.test.tsx +++ b/packages/native/test/native-styled.test.tsx @@ -11,7 +11,11 @@ jest.mock('react-native') console.error = jest.fn() const theme = { backgroundColor: 'magenta', display: 'flex' } -type Theme = typeof theme +type MyTheme = typeof theme + +declare module '@emotion/react' { + export interface Theme extends MyTheme {} +} describe('Emotion native styled', () => { test('should not throw an error when used valid primitive', () => { @@ -41,12 +45,12 @@ describe('Emotion native styled', () => { it('should work with theming from @emotion/react', () => { const Text = styled.Text` - color: ${props => (props.theme as unknown as Theme).backgroundColor}; + color: ${props => props.theme.backgroundColor}; ` const tree = renderer .create( - + Hello World ) diff --git a/packages/native/tsconfig.json b/packages/native/tsconfig.json deleted file mode 100644 index 653808e23..000000000 --- a/packages/native/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "compilerOptions": { - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "isolatedModules": true, - "jsx": "react", - "lib": ["es6", "dom"], - "module": "commonjs", - "noEmit": true, - "skipLibCheck": true, - "skipDefaultLibCheck": true, - "resolveJsonModule": true, - "strict": true, - "target": "es5", - "types": [] - } -} diff --git a/packages/native/types/index.d.ts b/packages/native/types/index.d.ts new file mode 100644 index 000000000..2c736dff8 --- /dev/null +++ b/packages/native/types/index.d.ts @@ -0,0 +1 @@ +export { default } from '..' From e4499eb9300e44c5c90fa82656d80c2c039b75ec Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 22 Aug 2022 11:21:23 -0400 Subject: [PATCH 10/13] Add changesets --- .changeset/gentle-fishes-check.md | 5 +++++ .changeset/good-scissors-love.md | 5 +++++ .changeset/strange-squids-appear.md | 5 +++++ packages/native/src/index.ts | 3 --- 4 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 .changeset/gentle-fishes-check.md create mode 100644 .changeset/good-scissors-love.md create mode 100644 .changeset/strange-squids-appear.md diff --git a/.changeset/gentle-fishes-check.md b/.changeset/gentle-fishes-check.md new file mode 100644 index 000000000..aa1213fdc --- /dev/null +++ b/.changeset/gentle-fishes-check.md @@ -0,0 +1,5 @@ +--- +'@emotion/native': patch +--- + +Added a missing overload to the TypeScript types for the `css` function so that functions are allowed as arguments when MergedProps is present. diff --git a/.changeset/good-scissors-love.md b/.changeset/good-scissors-love.md new file mode 100644 index 000000000..da2f83d70 --- /dev/null +++ b/.changeset/good-scissors-love.md @@ -0,0 +1,5 @@ +--- +'@emotion/native': minor +--- + +The source code has been migrated to TypeScript so the TypeScript declarations are now generated from the source. diff --git a/.changeset/strange-squids-appear.md b/.changeset/strange-squids-appear.md new file mode 100644 index 000000000..9b9418cfc --- /dev/null +++ b/.changeset/strange-squids-appear.md @@ -0,0 +1,5 @@ +--- +'@emotion/native': minor +--- + +Remove `styled.ToolbarAndroid` since the `ToolbarAndroid` component was removed from React Native in version 0.61. This version of React Native was published in 2019. diff --git a/packages/native/src/index.ts b/packages/native/src/index.ts index e48a1baae..34a202357 100644 --- a/packages/native/src/index.ts +++ b/packages/native/src/index.ts @@ -42,7 +42,6 @@ export interface EmotionNativeCss { ...args: Array ): StyleType - // TODO:SAM:CHANGESET Added this overload ( this: MergedProps, ...args: Array> @@ -69,8 +68,6 @@ type HostFunctionComponent> = type RN = typeof ReactNative -// TODO:SAM:CHANGESET removed ToolbarAndroid which was removed in RN 0.61 - const components = [ 'ActivityIndicator', 'DatePickerIOS', From 96e6719499d85baa0a2f4d9fa0123e2852d6ff73 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 22 Aug 2022 11:29:08 -0400 Subject: [PATCH 11/13] Update yarn.lock --- yarn.lock | 1 - 1 file changed, 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 4de4aa5cd..46ef17a07 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2542,7 +2542,6 @@ __metadata: "@types/react-native": ^0.63.2 react: 16.14.0 react-native: ^0.63.2 - typescript: ^4.5.5 peerDependencies: "@babel/core": ^7.0.0 react-native: ">=0.14.0 <1" From d8b95d105ef57572abed753abde225d0a3b2a47a Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 22 Aug 2022 13:40:24 -0400 Subject: [PATCH 12/13] Update dtslint GitHub Actions job to fix inconsistent behavior --- .github/workflows/main.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index f1aeb6175..7df54b29c 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -75,5 +75,11 @@ jobs: - uses: actions/checkout@v3 - uses: ./.github/actions/ci-setup + # dtslint can produce different results on the compiled .d.ts files and + # the stub .d.ts generated by `preconstruct dev`. We build here because we + # want to lint the compiled .d.ts files. + - name: Preconstruct + run: yarn build + - name: dtslint run: yarn test:typescript From fb29176eff2ee5b642cc388286d1cf7283e84b10 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 22 Aug 2022 13:49:13 -0400 Subject: [PATCH 13/13] Remove no longer needed hack from server/types/tsconfig.json --- packages/server/types/tsconfig.json | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/server/types/tsconfig.json b/packages/server/types/tsconfig.json index 5f5a3d15e..d7f5174a6 100644 --- a/packages/server/types/tsconfig.json +++ b/packages/server/types/tsconfig.json @@ -3,12 +3,7 @@ "baseUrl": "../", "forceConsistentCasingInFileNames": true, "jsx": "react", - "lib": [ - "es6", - // dom is needed here because @emotion/server depends on @emotion/css - // which depends on @emotion/sheet, which depends on DOM types - "dom" - ], + "lib": ["es6"], "module": "commonjs", "noEmit": true, "strict": true,