Add types to @mdx-js/preact (#1233)

* types: mdx preact typings

* docs: add preact to typescript documentation

Co-authored-by: John Otander <johnotander@gmail.com>

docs/advanced/typescript.mdx

@@ -10,6 +10,7 @@ improve the developer experience for TypeScript users.
 ## Typings for Components and Utilities
 
 - `@mdx-js/mdx`
+- `@mdx-js/preact`
 - `@mdx-js/react`
 - `@mdx-js/runtime`
 - `@mdx-js/vue`

packages/preact/package.json

@@ -16,17 +16,23 @@
     "Matija Marohnić <matija.marohnic@gmail.com>",
     "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)",
     "JounQin <admin@1stg.me> (https://www.1stg.me)",
-    "Chris Biscardi <chris@christopherbiscardi.com> (https://www.christopherbiscardi.com)"
+    "Chris Biscardi <chris@christopherbiscardi.com> (https://www.christopherbiscardi.com)",
+    "Christian Murphy <christian.murphy.42@gmail.com>"
   ],
   "license": "MIT",
+  "main": "dist/cjs.js",
+  "module": "dist/esm.js",
+  "types": "types/index.d.ts",
+  "license": "MIT",
   "main": "dist/mdx-preact.js",
   "module": "dist/mdx-preact.es.js",
   "exports": {
     "import": "./dist/mdx-preact.modern.js",
     "require": "./dist/mdx-preact.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "types/index.d.ts"
   ],
   "keywords": [
     "mdx",
@@ -38,7 +44,8 @@
   ],
   "scripts": {
     "build": "microbundle -f modern,es,cjs src/index.js",
-    "test": "jest test --coverage"
+    "test": "jest test --coverage",
+    "test-types": "dtslint types"
   },
   "peerDependencies": {
     "preact": "^10.4.6"

packages/preact/types/index.d.ts

@@ -0,0 +1,69 @@
+// TypeScript Version: 3.4
+
+import {
+  h,
+  Context,
+  AnyComponent,
+  FunctionComponent
+} from 'preact'
+
+/**
+ * Mapping of names for JSX components to React components
+ */
+interface ComponentDictionary {
+  [name: string]: AnyComponent<any>
+}
+
+/**
+ * Prop type that includes a component dictionary
+ */
+interface ComponentsProp {
+  /**
+   * Mapping of names for JSX components to React components
+   */
+  components?: ComponentDictionary,
+}
+
+/**
+ * Direct access to the MDX React Context
+ */
+declare const MDXContext: Context<ComponentsProp>
+
+/**
+ * Provider for MDX context
+ */
+declare const MDXProvider: FunctionComponent<ComponentsProp>
+
+/**
+ * Gets components from the MDX Context
+ *
+ * @param components additional components to include
+ * @returns all components from context with overrides from components parameter
+ */
+declare function useMDXComponents(
+  components: ComponentDictionary | (() => ComponentDictionary)
+): ComponentDictionary
+
+/**
+ * High order component that passes components prop to child
+ *
+ * @param child Component being wrapped
+ */
+declare function withMDXComponents(
+  child: AnyComponent<ComponentsProp>
+): ReactElement | null
+
+/**
+ * Preact hyperscript function wrapped with handler for MDX content
+ */
+declare const mdx: typeof h
+
+export {
+  ComponentDictionary,
+  ComponentsProp,
+  MDXContext,
+  MDXProvider,
+  useMDXComponents,
+  withMDXComponents,
+  mdx
+}

packages/preact/types/mdx-preact-test.tsx

@@ -0,0 +1,36 @@
+import {h, ComponentChildren} from 'preact'
+import {useContext} from 'preact/hooks'
+import {
+  MDXProvider,
+  useMDXComponents,
+  withMDXComponents,
+  ComponentsProp,
+  MDXContext,
+  mdx
+} from '@mdx-js/preact'
+
+const H1 = ({children}: {children: ComponentChildren}) => <h1>{children}</h1>
+
+const MDXProvideExample = () => (
+  <MDXProvider components={{h1: H1}}>
+    <h1>Hello, world!</h1>
+  </MDXProvider>
+)
+
+const WithMDXComponentsExample = () =>
+  withMDXComponents(({components}: ComponentsProp) => {
+    components // $ExpectType ComponentDictionary | undefined
+    return <div />
+  })
+
+const UseMDXComponentsExample = () => {
+  useMDXComponents({h1: H1}) // $ExpectType ComponentDictionary
+  useMDXComponents(() => ({h1: H1})) // $ExpectType ComponentDictionary
+}
+
+const UseMDXContextExample = () => {
+  const {components} = useContext(MDXContext)
+  components // $ExpectType ComponentDictionary | undefined
+}
+
+const MDXCreateElementExample = () => mdx('mdx', {title: 'example'}, [])

packages/preact/types/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["dom", "es6"],
+    "strict": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "jsx": "react",
+    "jsxFactory": "h",
+    "paths": {
+      "@mdx-js/preact": ["index.d.ts"]
+    }
+  }
+}

packages/preact/types/tslint.json

@@ -0,0 +1,7 @@
+{
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "whitespace": false,
+    "semicolon": false
+  }
+}