Skip to content

Commit ee57f67

Browse files
kossnocorpkossnocorp
committed
Basic type rendering, types modal preparation
1 parent 85d9488 commit ee57f67

File tree

7 files changed

+176
-70
lines changed

7 files changed

+176
-70
lines changed

‎src/ui/components/DocReturns/index.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { ComponentChildren, FunctionComponent, h } from 'preact'
2+
import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
3+
import { Markdown } from '~/ui/components/Markdown'
4+
5+
interface ReturnType {
6+
description: string
7+
type: ComponentChildren
8+
}
9+
10+
interface Props {
11+
returns: ReturnType[]
12+
}
13+
14+
export const DocReturns: FunctionComponent<Props> = ({ returns }) => (
15+
<section>
16+
<h2 id="returns">
17+
Returns
18+
<DocHeaderAnchor anchor="returns" />
19+
</h2>
20+
21+
<table>
22+
<thead>
23+
<tr>
24+
<th>Type</th>
25+
<th>Description</th>
26+
</tr>
27+
</thead>
28+
29+
<tbody>
30+
{returns.map((returnData, index) => (
31+
<tr key={index}>
32+
<td>{returnData.type}</td>
33+
<td>
34+
<Markdown value={returnData.description} />
35+
</td>
36+
</tr>
37+
))}
38+
</tbody>
39+
</table>
40+
</section>
41+
)

‎src/ui/components/DocType/index.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { FunctionComponent, h } from 'preact'
2+
import type { SomeType } from 'typedoc'
3+
4+
interface Props {
5+
type: SomeType
6+
}
7+
8+
export const DocType: FunctionComponent<Props> = ({ type }) => {
9+
console.log({ type })
10+
11+
switch (type.type) {
12+
case 'intrinsic':
13+
return <span>{type.name}</span>
14+
15+
case 'array':
16+
return (
17+
<span>
18+
Array{'<'}
19+
<DocType type={type.elementType} />
20+
{'>'}
21+
</span>
22+
)
23+
24+
case 'reference':
25+
return (
26+
<span>
27+
<a
28+
href={`#types/${
29+
/* TODO: Get rid of it one TypeDoc adds it */
30+
((type as unknown) as { id: number }).id
31+
}`}
32+
>
33+
{type.name}
34+
</a>
35+
</span>
36+
)
37+
38+
case 'reflection':
39+
case 'query':
40+
case 'predicate':
41+
case 'indexedAccess':
42+
case 'conditional':
43+
case 'inferred':
44+
case 'unknown':
45+
case 'tuple':
46+
case 'union':
47+
case 'intersection':
48+
case 'literal':
49+
case 'typeOperator':
50+
case 'template-literal':
51+
case 'named-tuple-member':
52+
case 'mapped':
53+
case 'optional':
54+
case 'rest':
55+
return (
56+
<div>
57+
If you see this, <a href="https://twitter.com/kossnocorp">ping me</a>.
58+
</div>
59+
)
60+
}
61+
}

‎src/ui/index.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { h } from 'preact'
1+
import { h, VNode } from 'preact'
22
import { useContext, useEffect } from 'preact/hooks'
3-
import { RouterContext } from '~/ui/router'
3+
import { AppRouteLocation, RouterContext } from '~/ui/router'
44
import { Home } from '~/ui/screens/Home'
55
import { Docs } from '~/ui/screens/Docs'
66
import { NotFound } from '~/ui/screens/NotFound'
@@ -17,6 +17,18 @@ export const UI = () => {
1717
win?.ga?.('send', 'pageview')
1818
}, [JSON.stringify(location)])
1919

20+
return (
21+
<div>
22+
<Content location={location} />
23+
</div>
24+
)
25+
}
26+
27+
interface ContentProps {
28+
location: AppRouteLocation
29+
}
30+
31+
function Content({ location }: ContentProps): VNode<any> {
2032
switch (location.name) {
2133
case 'home':
2234
return <Home />
@@ -56,7 +68,6 @@ export const UI = () => {
5668
)
5769

5870
case '404':
59-
default:
6071
return <NotFound />
6172
}
6273
}

‎src/ui/router/index.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import type { DateFnsDocs } from '@date-fns/docs'
2-
import { createRouter, InferRouteRef, route } from '@switcher/preact'
2+
import {
3+
createRouter,
4+
InferRoute,
5+
InferRouteRef,
6+
route,
7+
} from '@switcher/preact'
8+
import { RouteLocation, RouteNotFoundLocation } from '@switcher/preact/core'
39

410
export const appRoutes = [
511
route('home', '/'),
@@ -34,4 +40,16 @@ export const {
3440
} = createRouter(appRoutes)
3541

3642
// Type to use in prop definitions
37-
export type AppRouteRef = InferRouteRef<typeof appRoutes>
43+
export type AppRoutes = typeof appRoutes
44+
45+
export type AppRouteRef = InferRouteRef<AppRoutes>
46+
47+
export type AppRoute = InferRoute<AppRoutes>
48+
49+
export type AppRouteMeta = AppRoute['meta']
50+
51+
export type AppRouteLocation =
52+
| RouteLocation<AppRoute, AppRouteMeta>
53+
| RouteNotFoundLocation<AppRouteMeta>
54+
55+
export type AppRouteName = AppRouteLocation['name']

‎src/ui/screens/Docs/Doc/JSDoc/Returns/index.tsx‎

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,16 @@
1-
import { h, FunctionComponent } from 'preact'
21
import type { DateFnsDocs } from '@date-fns/docs/types'
3-
import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
4-
import { Markdown } from '~/ui/components/Markdown'
2+
import { FunctionComponent, h } from 'preact'
3+
import { DocReturns } from '~/ui/components/DocReturns'
54

65
interface Props {
76
returns: DateFnsDocs.JSDocAttribute[]
87
}
98

109
export const Returns: FunctionComponent<Props> = ({ returns }) => (
11-
<section>
12-
<h2 id="returns">
13-
Returns
14-
<DocHeaderAnchor anchor="returns" />
15-
</h2>
16-
17-
<table>
18-
<thead>
19-
<tr>
20-
<th>Type</th>
21-
<th>Description</th>
22-
</tr>
23-
</thead>
24-
25-
<tbody>
26-
{returns.map((returnData, index) => (
27-
<tr key={index}>
28-
<td>{returnData.type.names.join(' | ')}</td>
29-
<td>
30-
<Markdown value={returnData.description} />
31-
</td>
32-
</tr>
33-
))}
34-
</tbody>
35-
</table>
36-
</section>
10+
<DocReturns
11+
returns={returns.map((returnData) => ({
12+
type: returnData.type.names.join(' | '),
13+
description: returnData.description,
14+
}))}
15+
/>
3716
)

‎src/ui/screens/Docs/Doc/TSDoc/Returns/index.tsx‎

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,25 @@
1-
import { h, FunctionComponent } from 'preact'
2-
import type { DateFnsDocs } from '@date-fns/docs/types'
3-
import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
4-
import { Markdown } from '~/ui/components/Markdown'
1+
import { findReturns } from '@date-fns/docs/utils'
2+
import { FunctionComponent, h } from 'preact'
3+
import { useMemo } from 'preact/hooks'
4+
import type { DeclarationReflection } from 'typedoc'
5+
import { DocReturns } from '~/ui/components/DocReturns'
6+
import { DocType } from '~/ui/components/DocType'
57

68
interface Props {
7-
returns: DateFnsDocs.JSDocAttribute[]
9+
fn: DeclarationReflection
810
}
911

10-
export const Returns: FunctionComponent<Props> = ({ returns }) => (
11-
<section>
12-
<h2 id="returns">
13-
Returns
14-
<DocHeaderAnchor anchor="returns" />
15-
</h2>
16-
17-
<table>
18-
<thead>
19-
<tr>
20-
<th>Type</th>
21-
<th>Description</th>
22-
</tr>
23-
</thead>
24-
25-
<tbody>
26-
{returns.map((returnData, index) => (
27-
<tr key={index}>
28-
<td>{returnData.type.names.join(' | ')}</td>
29-
<td>
30-
<Markdown value={returnData.description} />
31-
</td>
32-
</tr>
33-
))}
34-
</tbody>
35-
</table>
36-
</section>
37-
)
12+
export const Returns: FunctionComponent<Props> = ({ fn }) => {
13+
const description = useMemo(() => findReturns(fn), [fn])
14+
console.log({ fn })
15+
return (
16+
<DocReturns
17+
returns={
18+
fn.signatures?.map((s) => ({
19+
type: s.type && <DocType type={s.type} />,
20+
description: description || '',
21+
})) || []
22+
}
23+
/>
24+
)
25+
}

‎src/ui/screens/Docs/Doc/TSDoc/index.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import type { DateFnsDocs } from '@date-fns/docs/types'
2-
import { findDescription, findExamples, findFn } from '@date-fns/docs/utils'
2+
import {
3+
findDescription,
4+
findExamples,
5+
findFn,
6+
findReturns,
7+
} from '@date-fns/docs/utils'
38
import { FunctionComponent, h } from 'preact'
49
import { useMemo } from 'preact/hooks'
510
import { parse } from 'typeroo'
@@ -8,6 +13,7 @@ import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
813
import { DocUsage } from '~/ui/components/DocUsage'
914
import { Markdown } from '~/ui/components/Markdown'
1015
import Issue from './Issue'
16+
import { Returns } from './Returns'
1117
import { Header } from './style.css'
1218

1319
interface Props {
@@ -18,7 +24,7 @@ export const TSDoc: FunctionComponent<Props> = ({ page }) => {
1824
const tsdoc = useMemo(() => parse(page.tsdoc), [page.slug])
1925
const fn = useMemo(() => findFn(tsdoc), [tsdoc])
2026
const description = useMemo(() => fn && findDescription(fn), [fn])
21-
const { usage, usageTabs } = useMemo(() => generateUsage(tsdoc.name), tsdoc)
27+
const { usage, usageTabs } = useMemo(() => generateUsage(tsdoc.name), [tsdoc])
2228
const examples = useMemo(() => fn && findExamples(fn).map(extractCode), [fn])
2329

2430
console.log(examples)
@@ -49,7 +55,9 @@ export const TSDoc: FunctionComponent<Props> = ({ page }) => {
4955
{page.content.properties && page.content.properties.length > 0 && (
5056
<Properties properties={page.content.properties} />
5157
)}
52-
{page.content.returns && <Returns returns={page.content.returns} />}*/}
58+
*/}
59+
60+
{fn && <Returns fn={fn} />}
5361

5462
{examples && <DocExamples examples={examples} />}
5563

0 commit comments

Comments
 (0)