Skip to content

Commit 9538760

Browse files
Jeong-jjJeong-jj
committed
fix: resolve build type error
1 parent ca1c6c6 commit 9538760

File tree

2 files changed

+90
-121
lines changed

2 files changed

+90
-121
lines changed

‎examples/react-babel/src/App.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
import { styled } from "@mincho-js/react";
22

3-
const BaseComponent = styled("div", {
3+
const Container = styled("div", {
44
base: {
55
fontWeight: "bold",
6-
},
7-
});
8-
9-
const Container = styled(BaseComponent, {
10-
base: {
116
backgroundColor: "red",
127
padding: "20px",
138
margin: "20px",
@@ -36,15 +31,15 @@ const Container = styled(BaseComponent, {
3631
},
3732
},
3833
},
39-
compoundVariants: [
34+
compoundVariants: ({ size, color }) => [
4035
{
41-
variants: { size: "small", color: "blue" },
36+
condition: [size.small, color.blue],
4237
style: {
4338
color: "green",
4439
},
4540
},
4641
{
47-
variants: { size: "large", color: "blue" },
42+
condition: [size.large, color.blue],
4843
style: {
4944
color: "yellow",
5045
},

‎packages/react/src/index.ts‎

Lines changed: 86 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,82 @@ export { $$styled } from "./runtime.js";
2323

2424
type KeyofIntrinsicElements = keyof JSX.IntrinsicElements;
2525

26+
// == Helpers (moved up for forward reference) =================================
27+
export type DefaultPropsType = Record<never, never>;
28+
export interface WithAsProp<AsComponent extends ElementType> {
29+
as?: AsComponent;
30+
}
31+
32+
export type ComponentPropWithAs<
33+
Component extends ElementType,
34+
AsComponent extends ElementType,
35+
Props extends object
36+
> = Omit<ComponentProps<Component>, keyof Props> &
37+
Omit<ComponentProps<AsComponent>, keyof Props> &
38+
WithAsProp<AsComponent> &
39+
Props;
40+
41+
export interface ComponentWithAs<
42+
Props = DefaultPropsType,
43+
Component extends ElementType = ElementType
44+
> {
45+
<AsComponent extends ElementType = Component>(
46+
props: ComponentPropWithAs<Component, AsComponent, Props & object>
47+
): ReactNode;
48+
49+
propTypes?: unknown;
50+
displayName?: string;
51+
readonly $$typeof: symbol;
52+
}
53+
54+
export type PatternOptionsToProps<
55+
Variants extends VariantGroups | undefined = undefined,
56+
ToggleVariants extends VariantDefinitions | undefined = undefined,
57+
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
58+
> = ResolveComplex<
59+
NonNever<
60+
VariantObjectSelection<ConditionalVariants<Variants, ToggleVariants>>
61+
> &
62+
NonNever<PropDefinitionOutput<Exclude<Props, undefined>>>
63+
>;
64+
type NonNever<T> = [T] extends [never] ? unknown : T;
65+
66+
type MergedProps<
67+
TProps,
68+
Variants extends VariantGroups | undefined,
69+
ToggleVariants extends VariantDefinitions | undefined,
70+
Props extends ComplexPropDefinitions<PropTarget> | undefined
71+
> = TProps &
72+
RefAttributes<unknown> &
73+
PatternOptionsToProps<Variants, ToggleVariants, Props>;
74+
75+
export type StyledComponent<
76+
TProps = Record<string, unknown>,
77+
Component extends ElementType = ElementType,
78+
Variants extends VariantGroups | undefined = undefined,
79+
ToggleVariants extends VariantDefinitions | undefined = undefined,
80+
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
81+
> = ComponentWithAs<
82+
MergedProps<TProps, Variants, ToggleVariants, Props>,
83+
Component
84+
> &
85+
ForwardRefExoticComponent<
86+
MergedProps<TProps, Variants, ToggleVariants, Props>
87+
>;
88+
89+
type IntrinsicProps<TComponent> = TComponent extends KeyofIntrinsicElements
90+
? JSX.IntrinsicElements[TComponent]
91+
: never;
92+
2693
// == Main =====================================================================
2794
export function styled<
2895
Props,
29-
Component extends ForwardRefExoticComponent<Props>,
96+
Component extends ElementType,
3097
RulesVariants extends VariantGroups | undefined = undefined,
3198
RulesToggleVariants extends VariantDefinitions | undefined = undefined,
3299
RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
33100
>(
34-
component: Component,
101+
component: ComponentWithAs<Props, Component>,
35102
options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
36103
): StyledComponent<
37104
Props,
@@ -43,7 +110,7 @@ export function styled<
43110

44111
export function styled<
45112
Props,
46-
Component extends ComponentType<Props>,
113+
Component extends ForwardRefExoticComponent<Props>,
47114
RulesVariants extends VariantGroups | undefined = undefined,
48115
RulesToggleVariants extends VariantDefinitions | undefined = undefined,
49116
RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
@@ -59,17 +126,17 @@ export function styled<
59126
>;
60127

61128
export function styled<
62-
Props extends object,
63-
Component extends ElementType,
129+
Props,
130+
Component extends ComponentType<Props> | ForwardRefExoticComponent<Props>,
64131
RulesVariants extends VariantGroups | undefined = undefined,
65132
RulesToggleVariants extends VariantDefinitions | undefined = undefined,
66133
RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
67134
>(
68-
component: ComponentWithAs<Props, Component>,
135+
component: Component,
69136
options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
70137
): StyledComponent<
71138
Props,
72-
Component,
139+
Component extends ElementType ? Component : ElementType,
73140
RulesVariants,
74141
RulesToggleVariants,
75142
RulesProps
@@ -91,114 +158,21 @@ export function styled<
91158
RulesProps
92159
>;
93160

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>
161+
export function styled(
162+
_component: unknown,
163+
_options: PatternOptions<
164+
VariantGroups | undefined,
165+
VariantDefinitions | undefined,
166+
ComplexPropDefinitions<PropTarget> | undefined
167+
>
106168
): StyledComponent<
107-
InferStyledComponentProps<Component>,
108-
InferStyledComponentElement<Component>,
109-
RulesVariants,
110-
RulesToggleVariants,
111-
RulesProps
169+
unknown,
170+
ElementType,
171+
VariantGroups | undefined,
172+
VariantDefinitions | undefined,
173+
ComplexPropDefinitions<PropTarget> | undefined
112174
> {
113175
throw new Error(
114176
"This function shouldn't be there in your final code. If you're seeing this, there is probably some issue with your build config."
115177
);
116178
}
117-
118-
type IntrinsicProps<TComponent> = TComponent extends KeyofIntrinsicElements
119-
? JSX.IntrinsicElements[TComponent]
120-
: never;
121-
122-
type InferStyledComponentProps<Component> =
123-
Component extends KeyofIntrinsicElements
124-
? IntrinsicProps<Component>
125-
: Component extends ComponentType<infer ComponentTypeProps>
126-
? ComponentTypeProps
127-
: Component extends ForwardRefExoticComponent<infer ForwardRefProps>
128-
? ForwardRefProps
129-
: Component extends ComponentWithAs<infer WithAsProps, ElementType>
130-
? WithAsProps
131-
: never;
132-
133-
type InferStyledComponentElement<Component> =
134-
Component extends KeyofIntrinsicElements
135-
? Component
136-
: Component extends ElementType
137-
? Component
138-
: Component extends ComponentWithAs<infer _WithAsProps, infer AsComponent>
139-
? AsComponent
140-
: never;
141-
142-
// == Helpers ==================================================================
143-
export type StyledComponent<
144-
TProps = Record<string, unknown>,
145-
Component extends ElementType = ElementType,
146-
Variants extends VariantGroups | undefined = undefined,
147-
ToggleVariants extends VariantDefinitions | undefined = undefined,
148-
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
149-
> = ComponentWithAs<
150-
TProps &
151-
RefAttributes<unknown> &
152-
PatternOptionsToProps<Variants, ToggleVariants, Props>,
153-
Component
154-
>;
155-
156-
export type PatternOptionsToProps<
157-
Variants extends VariantGroups | undefined = undefined,
158-
ToggleVariants extends VariantDefinitions | undefined = undefined,
159-
Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
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;
167-
168-
export type DefaultPropsType = Record<never, never>;
169-
export interface WithAsProp<AsComponent extends ElementType> {
170-
as?: AsComponent;
171-
}
172-
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;
181-
182-
export interface ComponentWithAs<
183-
Props extends object = DefaultPropsType,
184-
Component extends ElementType = ElementType
185-
> {
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;
204-
}

0 commit comments

Comments
 (0)