Fix bunch of small issues

src/ui/components/TypeDocType/index.tsx

@@ -154,8 +154,8 @@ export const TypeDocType: FunctionComponent<TypeDocTypeProps> = ({
     case 'inferred':
     case 'unknown':
     case 'typeOperator':
-    case 'template-literal':
-    case 'named-tuple-member':
+    case 'templateLiteral':
+    case 'namedTupleMember':
     case 'optional':
     case 'rest':
       return <Missing data={type} />

src/ui/screens/Docs/Doc/TypeDoc/Constants/index.tsx

@@ -111,9 +111,11 @@ function Constant({ item, query }: ConstantProps) {
 
   if (constant.kind !== DateFnsDocs.ReflectionKind.Variable) return null
 
-  const { usage, usageTabs } = useMemo(() => generateUsage(name, 'constants'), [
-    item,
-  ])
+  const { usage, usageTabs } = useMemo(
+    () =>
+      generateUsage(name, { submodule: 'constants', alwaysSubmodule: true }),
+    [item]
+  )
 
   const examples = useMemo(
     () => findExamples(constant).map(extractCodeFromTagString),

src/ui/screens/Docs/Doc/TypeDoc/Function/Signature/index.tsx

@@ -10,11 +10,11 @@ import { IgnoreParentTypesSourceContext } from '~/ui/contexts/IgnoreParentTypesS
 import { Arguments } from '../Arguments'
 import { Generics } from '../Generics'
 import { Returns } from '../Returns'
-import { Throws } from '../Throws'
 import { Type } from '../Type'
 import { Debug } from '~/ui/components/Debug'
 import { DocExamples } from '~/ui/components/DocExamples'
 import { extractCodeFromTagString } from '~/utils/docs'
+import { Throws } from '../Throws'
 
 interface SignatureProps {
   name: string

src/ui/screens/Docs/Doc/TypeDoc/Function/Throws/index.tsx

@@ -1,10 +1,8 @@
 import { Fragment, FunctionComponent, h } from 'preact'
-import { InlineCode } from '~/ui/components/InlineCode'
 import { Markdown } from '~/ui/components/Markdown'
 import { SectionHeader } from '~/ui/components/SectionHeader'
 
 export interface TypeDocThrow {
-  type: string | undefined
   description: string
 }
 
@@ -26,17 +24,13 @@ export const Throws: FunctionComponent<TypeDocThrowsProps> = ({
       <table>
         <thead>
           <tr>
-            <th>Type</th>
             <th>Description</th>
           </tr>
         </thead>
 
         <tbody>
           {throws.map((throwData, index) => (
             <tr key={index}>
-              <td>
-                {throwData.type && <InlineCode>{throwData.type}</InlineCode>}
-              </td>
               <td>
                 <Markdown value={throwData.description} />
               </td>

src/ui/screens/Docs/Doc/TypeDoc/index.tsx

@@ -7,14 +7,17 @@ import { matchTypeHash } from '~/utils/docs'
 import { TypeDocConstants } from './Constants'
 import { TypeDocFunction } from './Function'
 import { useTypesModal } from './Types'
+import type { DeclarationReflection } from 'typedoc'
 
 interface TypeDocProps {
   page: DateFnsDocs.TypeDocPage
 }
 
 export const TypeDoc: FunctionComponent<TypeDocProps> = ({ page }) => {
   const { location, navigate } = useContext(RouterContext)
-  const doc = useMemo(() => parse(page.doc), [page.slug])
+  const doc = useMemo(() => parse(page.doc) as DeclarationReflection, [
+    page.slug,
+  ])
   const showTypesModal = useTypesModal()
 
   useEffect(() => {

src/ui/screens/Docs/Finder/index.tsx

@@ -41,8 +41,6 @@ export const Finder: FunctionComponent<FinderProps> = ({
     const { pages, categories } = versions[0].data
     const filteredPages = filterPages(pages, query, selectedSubmodule)
 
-    console.log({ filteredPages })
-
     return (
       <div class={styles.container}>
         <Search query={[query, setQuery]} inputRef={searchRef} />

src/utils/docs/index.ts

@@ -30,21 +30,33 @@ export interface UsageMap {
   usageTabs: string[]
 }
 
-export function generateUsage(name: string, module = name): UsageMap {
+export interface GenerateUsageOptions {
+  submodule?: string
+  alwaysSubmodule?: boolean
+}
+
+export function generateUsage(
+  name: string,
+  options?: GenerateUsageOptions
+): UsageMap {
+  const submodule = options?.submodule || name
+  const path = `date-fns${options?.alwaysSubmodule ? `/${submodule}` : ''}`
+
   const usage: Usage = {
     esm: {
-      code: `import { ${name} } from "date-fns";`,
+      code: `import { ${name} } from "${path}";`,
       title: 'ESM',
     },
 
     commonjs: {
-      code: `const ${name} = require("date-fns/${module}");`,
+      code: `const { ${name} } = require("${path}");`,
       title: 'CommonJS',
     },
 
     cdn: {
       title: 'CDN',
-      code: (cdn) => `import ${name} from "${cdn}/date-fns/${name}.mjs";`,
+      code: (cdn) =>
+        `import { ${name} } from "${cdn}/date-fns/${submodule}.mjs";`,
       options: {
         unpkg: 'https://unpkg.com',
         Skypack: 'https://cdn.skypack.dev',
@@ -85,7 +97,7 @@ export function findSource(
     | undefined,
   trimHash = false
 ) {
-  const url = ref?.sources?.[0].url
+  const url = ref && 'sources' in ref && ref?.sources?.[0].url
   if (!url) return
   return trimHash ? url.replace(/#.*$/, '') : url
 }