Skip to content

Commit

Permalink
that's a better spot
Browse files Browse the repository at this point in the history
  • Loading branch information
@hadihallak
hadihallak committed Aug 19, 2021
1 parent 561ebc8 commit 763dc92
Show file tree
Hide file tree
Showing 8 changed files with 16,162 additions and 16,424 deletions.
2 changes: 1 addition & 1 deletion packages/react/types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export type CSS<
Config['themeMap'],
Config['utils'],
false
> & StyledComponent.$MarkerType
>

/** Returns the properties, attributes, and children expected by a component. */
export type ComponentProps<Component> = Component extends ((...args: any[]) => any) ? Parameters<Component>[0] : never
Expand Down
26 changes: 9 additions & 17 deletions packages/react/types/styled-component.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import type * as React from 'react'
import type * as Util from './util'

export declare const $_STITCHES_CSS: unique symbol
export type $MarkerType = {[$_STITCHES_CSS]?: never}

export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;

/** Removes index signatures from a type */
type RemoveIndex<T> = {
[ K in keyof T as string extends K ? never : number extends K ? never : K ] : T[K]
};
/** Returns a new Styled Component. */
export interface StyledComponent<
Type extends string | React.ComponentType<any> = 'span',
Type = 'span',
Props = {},
Media = {},
CSS = {}
Expand All @@ -19,25 +22,14 @@ export interface StyledComponent<
TransformProps<Props, Media> & { css?: CSS }
>
> {
<M extends undefined, As = Type>(
props: (
As extends ''
? { as: IntrinsicElementsKeys }
: As extends React.ComponentType<infer P>
? Util.Assign<P, TransformProps<Props, Media> & { as: As, css?: {[$_STITCHES_CSS]?: M} }>
: As extends IntrinsicElementsKeys
? Util.Assign<JSX.IntrinsicElements[As], TransformProps<Props, Media> & { as: As, css?: {[$_STITCHES_CSS]?: M}}>
: never
)
): React.ReactElement | null
<As = Type>(
<C, As = Type>(
props: (
As extends ''
? { as: IntrinsicElementsKeys }
: As extends React.ComponentType<infer P>
? Util.Assign<P, TransformProps<Props, Media> & { as: As, css?: CSS }>
? Util.Assign<P, TransformProps<Props, Media> & { as: As, css?: RemoveIndex<CSS> & {[k in keyof C]: k extends keyof CSS ? CSS[k]: never}}>
: As extends IntrinsicElementsKeys
? Util.Assign<JSX.IntrinsicElements[As], TransformProps<Props, Media> & { as: As, css?: CSS}>
? Util.Assign<JSX.IntrinsicElements[As], TransformProps<Props, Media> & { as: As, css?: RemoveIndex<CSS> & {[k in keyof C]: k extends keyof CSS ? CSS[k]: never}}>
: never
)
): React.ReactElement | null
Expand Down
633 changes: 633 additions & 0 deletions packages/test/index.d.ts
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions packages/test/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,24 @@ export const { config, styled } = Stitches.createStitches({
},
},
});
const Text = styled('span', {});
export const Text = styled('span', {});
const DEFAULT_TAG = 'h1';
export const Heading = React.forwardRef((props, forwardedRef) => {
const Heading = React.forwardRef((props, forwardedRef) => {
return (<>
{/* types here will be fast */}
<Text as={DEFAULT_TAG} onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef}/>
<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef}/>
<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ backgroundColor: '$red100', backgroundClip: 'border-box' }}/>
<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ backgroundColor: '$red100' }}/>
<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100' }}/>
<Text as="a" href="" onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100' }}/>
<Text as="b" onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100', padding: 'initial' }}/>
<Text as="div" onClick={(e) => { console.log(e.altKey); }} css={{ ...props.css, backgroundColor: '$red100', background: 'red', paddingLeft: 'initial' }}/>
{/*
types here will be correct but autocompletion is going to be painfully slow when you add a new prop.
This is the only case where the autocompletion is slow
*/}
<Text as={DEFAULT_TAG} {...props} ref={forwardedRef}/>
<Text as={DEFAULT_TAG} {...props} onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef}/>
</>);
});
const App = () => {
// when consuming the component it should be very fast
return <Heading />;
// when consuming the component it should be very fast too
return <Heading css={{ backgroundColor: '$red100', padding: 'inherit' }}/>;
};
25 changes: 12 additions & 13 deletions packages/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,30 @@ export const { config, styled } = Stitches.createStitches({

export type StitchesCss = Stitches.CSS<typeof config>

const Text = styled('span', {})
export const Text = styled('span', {
background: '$red100'
})


const DEFAULT_TAG = 'h1'

type HeadingProps = React.ComponentProps<typeof DEFAULT_TAG> & { css?: StitchesCss }
export type HeadingProps = React.ComponentProps<typeof DEFAULT_TAG> & { css?: StitchesCss }

export const Heading = React.forwardRef<React.ElementRef<typeof DEFAULT_TAG>, HeadingProps>((props, forwardedRef) => {
const Heading = React.forwardRef<React.ElementRef<typeof DEFAULT_TAG>, HeadingProps>((props, forwardedRef) => {
return (
<>
{/* types here will be fast */}
<Text as={DEFAULT_TAG} onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{ backgroundColor: '$red100' }} />
<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100' }} />
<Text as="a" href="" onClick={(e) => {console.log(e.altKey)}} css={{ ...props.css, backgroundColor: '$red100' }} />
{/*
types here will be correct but autocompletion is going to be painfully slow when you add a new prop.
This is the only case where the autocompletion is slow
*/}
<Text as={DEFAULT_TAG} onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{backgroundColor: '$red100', backgroundClip: 'border-box', ml: 'auto'}}/>
<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{ backgroundColor: '$red100'}} />
<Text as="b" onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100', padding: 'initial' }} />
<Text as="div" onClick={(e) => {console.log(e.altKey)}} css={{ ...props.css, backgroundColor: '$red100', background: 'red', paddingLeft: 'initial'}} />
<Text as={DEFAULT_TAG} {...props} onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
</>
)
})

const App = () => {
// when consuming the component it should be very fast too
return <Heading />
return <Heading css={{ backgroundColor: '$red100', padding: 'inherit'}} />
}
Loading

0 comments on commit 763dc92

Please sign in to comment.