Skip to content

Commit bc7dd88

Browse files
black7375black7375
committed
Refactor: styled code order & naming
1 parent 60988c8 commit bc7dd88

File tree

1 file changed

+137
-117
lines changed

1 file changed

+137
-117
lines changed

‎packages/react/src/index.ts‎

Lines changed: 137 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -23,68 +23,97 @@ export { $$styled } from "./runtime.js";
2323

2424
type KeyofIntrinsicElements = keyof JSX.IntrinsicElements;
2525

26-
export type DefaultPropsType = Record<never, never>;
27-
export interface WithAsProp<AsComponent extends ElementType> {
28-
as?: AsComponent;
29-
}
30-
31-
export type ComponentPropWithAs<
32-
Component extends ElementType,
33-
AsComponent extends ElementType,
34-
Props extends object
35-
> = Omit<ComponentProps<Component>, keyof Props> &
36-
Omit<ComponentProps<AsComponent>, keyof Props> &
37-
WithAsProp<AsComponent> &
38-
Props;
39-
40-
export interface ComponentWithAs<
41-
Props extends object = DefaultPropsType,
42-
Component extends ElementType = ElementType
43-
> {
44-
<AsComponent extends ElementType = Component>(
45-
props: ComponentPropWithAs<Component, AsComponent, Props>
46-
): ReactNode;
26+
// == Main =====================================================================
27+
export function styled<
28+
Props,
29+
Component extends ForwardRefExoticComponent<Props>,
30+
RulesVariants extends VariantGroups | undefined = undefined,
31+
RulesToggleVariants extends VariantDefinitions | undefined = undefined,
32+
RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
33+
>(
34+
component: Component,
35+
options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
36+
): StyledComponent<
37+
Props,
38+
Component,
39+
RulesVariants,
40+
RulesToggleVariants,
41+
RulesProps
42+
>;
4743

48-
/**
49-
* Ignored by React.
50-
* @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
51-
*/
52-
propTypes?: unknown;
53-
/**
54-
* Used in debugging messages. You might want to set it
55-
* explicitly if you want to display a different name for
56-
* debugging purposes.
57-
*
58-
* @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
59-
*/
60-
displayName?: string;
61-
readonly $$typeof: symbol;
62-
}
44+
export function styled<
45+
Props,
46+
Component extends ComponentType<Props>,
47+
RulesVariants extends VariantGroups | undefined = undefined,
48+
RulesToggleVariants extends VariantDefinitions | undefined = undefined,
49+
RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
50+
>(
51+
component: Component,
52+
options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
53+
): StyledComponent<
54+
Props,
55+
Component,
56+
RulesVariants,
57+
RulesToggleVariants,
58+
RulesProps
59+
>;
6360

64-
export type StyledComponent<
65-
TProps = Record<string, unknown>,
66-
Component extends ElementType = ElementType,
67-
Variants extends VariantGroups | undefined = undefined,
68-
ToggleVariants extends VariantDefinitions | undefined = undefined,
69-
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
70-
> = ComponentWithAs<
71-
TProps &
72-
RefAttributes<unknown> &
73-
PatternOptionsToProps<Variants, ToggleVariants, Props>,
74-
Component
61+
export function styled<
62+
Props extends object,
63+
Component extends ElementType,
64+
RulesVariants extends VariantGroups | undefined = undefined,
65+
RulesToggleVariants extends VariantDefinitions | undefined = undefined,
66+
RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
67+
>(
68+
component: ComponentWithAs<Props, Component>,
69+
options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
70+
): StyledComponent<
71+
Props,
72+
Component,
73+
RulesVariants,
74+
RulesToggleVariants,
75+
RulesProps
7576
>;
7677

77-
export type PatternOptionsToProps<
78-
Variants extends VariantGroups | undefined = undefined,
79-
ToggleVariants extends VariantDefinitions | undefined = undefined,
80-
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
81-
> = ResolveComplex<
82-
NonNever<
83-
VariantObjectSelection<ConditionalVariants<Variants, ToggleVariants>>
84-
> &
85-
NonNever<PropDefinitionOutput<Exclude<Props, undefined>>>
78+
export function styled<
79+
Component extends KeyofIntrinsicElements,
80+
RulesVariants extends VariantGroups | undefined = undefined,
81+
RulesToggleVariants extends VariantDefinitions | undefined = undefined,
82+
RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
83+
>(
84+
component: Component,
85+
options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
86+
): StyledComponent<
87+
IntrinsicProps<Component>,
88+
Component,
89+
RulesVariants,
90+
RulesToggleVariants,
91+
RulesProps
8692
>;
87-
type NonNever<T> = [T] extends [never] ? unknown : T;
93+
94+
export function styled<
95+
Component extends
96+
| ForwardRefExoticComponent<unknown>
97+
| ComponentType<unknown>
98+
| KeyofIntrinsicElements
99+
| ComponentWithAs<object, ElementType>,
100+
RulesVariants extends VariantGroups | undefined = undefined,
101+
RulesToggleVariants extends VariantDefinitions | undefined = undefined,
102+
RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
103+
>(
104+
_component: Component,
105+
_options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
106+
): StyledComponent<
107+
InferStyledComponentProps<Component>,
108+
InferStyledComponentElement<Component>,
109+
RulesVariants,
110+
RulesToggleVariants,
111+
RulesProps
112+
> {
113+
throw new Error(
114+
"This function shouldn't be there in your final code. If you're seeing this, there is probably some issue with your build config."
115+
);
116+
}
88117

89118
type IntrinsicProps<TComponent> = TComponent extends KeyofIntrinsicElements
90119
? JSX.IntrinsicElements[TComponent]
@@ -110,75 +139,66 @@ type InferStyledComponentElement<Component> =
110139
? AsComponent
111140
: never;
112141

113-
export function styled<
114-
TProps,
115-
TComponent extends ForwardRefExoticComponent<TProps>,
142+
// == Helpers ==================================================================
143+
export type StyledComponent<
144+
TProps = Record<string, unknown>,
145+
Component extends ElementType = ElementType,
116146
Variants extends VariantGroups | undefined = undefined,
117147
ToggleVariants extends VariantDefinitions | undefined = undefined,
118148
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
119-
>(
120-
component: TComponent,
121-
options: PatternOptions<Variants, ToggleVariants, Props>
122-
): StyledComponent<TProps, TComponent, Variants, ToggleVariants, Props>;
149+
> = ComponentWithAs<
150+
TProps &
151+
RefAttributes<unknown> &
152+
PatternOptionsToProps<Variants, ToggleVariants, Props>,
153+
Component
154+
>;
123155

124-
export function styled<
125-
TProps,
126-
TComponent extends ComponentType<TProps>,
156+
export type PatternOptionsToProps<
127157
Variants extends VariantGroups | undefined = undefined,
128158
ToggleVariants extends VariantDefinitions | undefined = undefined,
129159
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
130-
>(
131-
component: TComponent,
132-
options: PatternOptions<Variants, ToggleVariants, Props>
133-
): StyledComponent<TProps, TComponent, Variants, ToggleVariants, Props>;
160+
> = ResolveComplex<
161+
NonNever<
162+
VariantObjectSelection<ConditionalVariants<Variants, ToggleVariants>>
163+
> &
164+
NonNever<PropDefinitionOutput<Exclude<Props, undefined>>>
165+
>;
166+
type NonNever<T> = [T] extends [never] ? unknown : T;
134167

135-
export function styled<
136-
TProps extends object,
137-
TComponent extends ElementType,
138-
Variants extends VariantGroups | undefined = undefined,
139-
ToggleVariants extends VariantDefinitions | undefined = undefined,
140-
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
141-
>(
142-
component: ComponentWithAs<TProps, TComponent>,
143-
options: PatternOptions<Variants, ToggleVariants, Props>
144-
): StyledComponent<TProps, TComponent, Variants, ToggleVariants, Props>;
168+
export type DefaultPropsType = Record<never, never>;
169+
export interface WithAsProp<AsComponent extends ElementType> {
170+
as?: AsComponent;
171+
}
145172

146-
export function styled<
147-
TComponent extends KeyofIntrinsicElements,
148-
Variants extends VariantGroups | undefined = undefined,
149-
ToggleVariants extends VariantDefinitions | undefined = undefined,
150-
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
151-
>(
152-
component: TComponent,
153-
options: PatternOptions<Variants, ToggleVariants, Props>
154-
): StyledComponent<
155-
IntrinsicProps<TComponent>,
156-
TComponent,
157-
Variants,
158-
ToggleVariants,
159-
Props
160-
>;
173+
export type ComponentPropWithAs<
174+
Component extends ElementType,
175+
AsComponent extends ElementType,
176+
Props extends object
177+
> = Omit<ComponentProps<Component>, keyof Props> &
178+
Omit<ComponentProps<AsComponent>, keyof Props> &
179+
WithAsProp<AsComponent> &
180+
Props;
161181

162-
export function styled<
163-
Component extends
164-
| ForwardRefExoticComponent<unknown>
165-
| ComponentType<unknown>
166-
| KeyofIntrinsicElements
167-
| ComponentWithAs<object, ElementType>,
168-
Variants extends VariantGroups | undefined = undefined,
169-
ToggleVariants extends VariantDefinitions | undefined = undefined,
170-
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
171-
>(
172-
_component: Component,
173-
_options: PatternOptions<Variants, ToggleVariants, Props>
174-
): StyledComponent<
175-
InferStyledComponentProps<Component>,
176-
InferStyledComponentElement<Component>,
177-
Variants,
178-
ToggleVariants,
179-
Props
182+
export interface ComponentWithAs<
183+
Props extends object = DefaultPropsType,
184+
Component extends ElementType = ElementType
180185
> {
181-
throw new Error(
182-
"This function shouldn't be there in your final code. If you're seeing this, there is probably some issue with your build config."
183-
);
186+
<AsComponent extends ElementType = Component>(
187+
props: ComponentPropWithAs<Component, AsComponent, Props>
188+
): ReactNode;
189+
190+
/**
191+
* Ignored by React.
192+
* @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
193+
*/
194+
propTypes?: unknown;
195+
/**
196+
* Used in debugging messages. You might want to set it
197+
* explicitly if you want to display a different name for
198+
* debugging purposes.
199+
*
200+
* @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
201+
*/
202+
displayName?: string;
203+
readonly $$typeof: symbol;
184204
}

0 commit comments

Comments
 (0)