TSDoc rendering prototype

Author: kossnocorp

package.json

@@ -14,7 +14,7 @@
     "start": "env NODE_ENV=development ts-node -r tsconfig-paths/register devServer.ts"
   },
   "dependencies": {
-    "@date-fns/docs": "0.5.0",
+    "@date-fns/docs": "0.12.1",
     "@nyancss/css-modules-loader": "^1.1.0",
     "@nyancss/react": "^1.3.0",
     "@sentry/browser": "^5.30.0",

scripts/migrations/migratePackages.ts

@@ -0,0 +1,12 @@
+import { db } from '@date-fns/docs'
+import * as admin from 'firebase-admin'
+
+admin.initializeApp()
+
+db.packages
+  .all()
+  .then((packages) =>
+    Promise.all(
+      packages.map((p) => db.packages.set(db.packages.id(p.data.name), p.data))
+    )
+  )

scripts/migrations/migrateV3.ts

@@ -1,4 +1,4 @@
-import { db, JSDocFunction, JSDocPage, MarkdownPage } from '@date-fns/docs/db'
+import { db, DateFnsDocs } from '@date-fns/docs'
 import * as admin from 'firebase-admin'
 import { last } from 'lodash'
 import { StringifiedJSON } from 'typeroo/json'
@@ -7,8 +7,8 @@ import { schema, Typesaurus } from 'typesaurus'
 admin.initializeApp()
 
 type Page =
-  | MarkdownPage
-  | (Omit<JSDocPage, 'doc'> & {
+  | DateFnsDocs.MarkdownPage
+  | (Omit<DateFnsDocs.JSDocPage, 'doc'> & {
       doc: { json: string }
     })
 
@@ -25,7 +25,7 @@ processAll((pages) =>
     pages.map((page) => {
       if (page.data.type === 'markdown') return
       return db.pages.update(page.ref.id, {
-        doc: page.data.doc.json as StringifiedJSON<JSDocFunction>,
+        doc: page.data.doc.json as StringifiedJSON<DateFnsDocs.JSDocFunction>,
       })
     })
   )

src/ui/screens/Docs/Doc/JSDoc/Examples/index.tsx renamed to src/ui/components/DocExamples/index.tsx

@@ -9,7 +9,7 @@ interface Props {
   examples: string[] | string
 }
 
-export const Examples: FunctionComponent<Props> = ({ examples }) => (
+export const DocExamples: FunctionComponent<Props> = ({ examples }) => (
   <section>
     <h2 id="examples">
       Examples

src/ui/screens/Docs/Doc/JSDoc/Examples/style.css renamed to src/ui/components/DocExamples/style.css

@@ -1,10 +1,10 @@
 import { h, FunctionComponent, Fragment } from 'preact'
-import { JSDocParam, JSDocType } from '@date-fns/docs/db'
+import type { DateFnsDocs } from '@date-fns/docs'
 import { Markdown } from '~/ui/components/Markdown'
 import { OptionalLabel, PropsLabel } from './style.css'
 
 interface Props {
-  params: JSDocParam[]
+  params: DateFnsDocs.JSDocParam[]
 }
 
 export const DocParams: FunctionComponent<Props> = ({ params }) => (
@@ -40,7 +40,7 @@ const ParamOptionalLabel: FunctionComponent<{
 )
 
 const ParamPropsTable: FunctionComponent<{
-  props: JSDocParam[]
+  props: DateFnsDocs.JSDocParam[]
 }> = ({ props }) => (
   <div>
     <PropsLabel>Properties:</PropsLabel>
@@ -62,7 +62,7 @@ const ParamPropsTable: FunctionComponent<{
 )
 
 const ParamType: FunctionComponent<{
-  type: JSDocType
+  type: DateFnsDocs.JSDocType
   variable?: boolean
 }> = ({ type, variable }) => {
   const names = type.names

src/ui/screens/Docs/Doc/JSDoc/Examples/style.css.d.ts renamed to src/ui/components/DocExamples/style.css.d.ts

@@ -1,6 +1,6 @@
 import { h, FunctionComponent } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
-import { JSDocUsage } from '@date-fns/docs/db'
+import type { DateFnsDocs } from '@date-fns/docs/types'
 import { Options, Option, OptionLink } from './style.css'
 import { Content } from './Content'
 import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
@@ -9,13 +9,13 @@ const LOCALSTORAGE_KEY = 'usageSource'
 const DEFAULT_SOURCE = 'commonjs'
 
 interface Props {
-  usage: JSDocUsage
+  usage: DateFnsDocs.FnUsage
   usageTabs: string[]
 }
 
 type FIXME = any
 
-export const Usage: FunctionComponent<Props> = ({ usageTabs, usage }) => {
+export const DocUsage: FunctionComponent<Props> = ({ usageTabs, usage }) => {
   const [source, setSource] = useState(DEFAULT_SOURCE)
 
   useEffect(() => {