-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(switch): improved types for Switch/Match components + allowed mul…
…tiple children inside Simple VComponent
- Loading branch information
Showing
11 changed files
with
252 additions
and
103 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
/* eslint-disable @typescript-eslint/ban-ts-comment */ | ||
import { describe, expect, it } from 'vitest'; | ||
import { Match, Switch } from './SimpleSwitch'; | ||
import { component } from '.'; | ||
import { reactive } from '../reactive'; | ||
import { fakeMount } from '../test-utils/fake-mount'; | ||
import type { ComponentChildren } from '../dom/create-dom-element'; | ||
|
||
describe('Switch/Match', () => { | ||
it('initially renders the correct child ', () => { | ||
const condition = reactive('a'); | ||
|
||
const TestComponent = component(() => { | ||
return ( | ||
<Switch condition={condition}> | ||
<Match when="a">a</Match> | ||
<Match when="b">b</Match> | ||
<Match when="c">c</Match> | ||
</Switch> | ||
); | ||
}); | ||
|
||
const { children, cmp } = fakeMount(TestComponent); | ||
expect(children).toEqual(['a']); | ||
}); | ||
|
||
it('renders the right child when the condition changes', () => { | ||
const condition = reactive('a'); | ||
|
||
const TestComponent = component(() => { | ||
return ( | ||
<Switch condition={condition}> | ||
<Match when="a">a</Match> | ||
<Match when="b">b</Match> | ||
<Match when="c">c</Match> | ||
</Switch> | ||
); | ||
}); | ||
|
||
const { children } = fakeMount(TestComponent); | ||
|
||
condition.update('b'); | ||
|
||
expect(children).toEqual(['b']); | ||
}); | ||
|
||
it('renders the fallback when no child matches the condition', () => { | ||
const condition = reactive('no match'); | ||
|
||
// TODO: need to find a good way to easily render a string | ||
//@ts-expect-error | ||
const Fallback = component((props) => { | ||
return props.children || [] as ComponentChildren | ||
}) | ||
|
||
const TestComponent = component(() => { | ||
|
||
|
||
|
||
|
||
return ( | ||
<Switch condition={condition} fallback={<Fallback>fallback</Fallback>} > | ||
<Match when="a">a</Match> | ||
<Match when="b">b</Match> | ||
<Match when="c">c</Match> | ||
</Switch> | ||
); | ||
}); | ||
|
||
const { children } = fakeMount(TestComponent); | ||
|
||
|
||
expect(children).toEqual(['fallback']); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
/* eslint-disable @typescript-eslint/ban-ts-comment */ | ||
import { | ||
buildSwitchComponent, | ||
component, | ||
type ComponentFn, | ||
type VComponent, | ||
} from '.'; | ||
import type { PrimitiveType } from '../utils/primitive'; | ||
import { isVComponent } from './is-component'; | ||
|
||
// TODO: fix types here | ||
|
||
type ComponentProps<T extends object> = Parameters<ComponentFn<T>>[0]; | ||
|
||
export function Match<T extends PrimitiveType>( | ||
props: ComponentProps<{ when: T }> | ||
) { | ||
//@ts-expect-error | ||
const componentFn = component<{ when: T }>(({ children }) => { | ||
return children; | ||
}); | ||
|
||
return componentFn(props); | ||
} | ||
|
||
export function Switch<T extends PrimitiveType>( | ||
props: ComponentProps<{ condition: T; fallback?: VComponent }> | ||
) { | ||
const componentFn = component<{ condition: T; fallback?: VComponent }>( | ||
({ children, condition, fallback }) => { | ||
// TODO: fix types here | ||
//@ts-expect-error | ||
return buildSwitchComponent(condition, (value) => { | ||
for (const child of children || []) { | ||
if (!isVComponent(child)) return; | ||
|
||
const childMatchesCondition = | ||
'props' in child && | ||
!!child.props && | ||
typeof child.props === 'object' && | ||
'when' in child.props && | ||
child.props.when === value; | ||
|
||
// TODO: need to add props as type of VComponent ? | ||
if (childMatchesCondition) { | ||
console.log({ child }); | ||
return child; | ||
} | ||
} | ||
|
||
return fallback; | ||
}); | ||
} | ||
); | ||
|
||
return componentFn(props); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.