feat: add typings for @mdx-js/runtime

Author: ChristianMurphy

packages/mdx/types/index.d.ts

@@ -9,28 +9,28 @@ declare namespace mdx {
      *
      * @default true
      */
-    footnotes?: boolean
+    footnotes: boolean
 
     /**
      * remark plugins to transform markdown content
      *
      * @default []
      */
-    remarkPlugins?: Plugin[]
+    remarkPlugins: Plugin[]
 
     /**
      * rehype plugins html content
      *
      * @default []
      */
-    rehypePlugins?: Plugin[]
+    rehypePlugins: Plugin[]
 
     /**
      * compilers to customize output
      *
      * @default []
      */
-    compilers?: Compiler[]
+    compilers: Compiler[]
   }
 
   /**
@@ -40,15 +40,15 @@ declare namespace mdx {
    * @param options transform and compiler options
    * @returns jsx text
    */
-  function sync(mdx: string, options?: Options): string
+  function sync(mdx: string, options?: Partial<Options>): string
 
   /**
    * Generated an MDX compiler
    *
    * @param options transform and compiler options
    * @returns Unified Processor for MDX
    */
-  function createMdxAstCompiler(options?: Options): Processor
+  function createMdxAstCompiler(options?: Partial<Options>): Processor
 }
 
 /**
@@ -58,6 +58,6 @@ declare namespace mdx {
  * @param options transform and compiler options
  * @returns jsx text
  */
-declare function mdx(mdx: string, options?: mdx.Options): Promise<string>
+declare function mdx(mdx: string, options?: Partial<mdx.Options>): Promise<string>
 
 export = mdx

packages/react/types/index.d.ts

@@ -20,6 +20,9 @@ interface ComponentDictionary {
  * Prop type that includes a component dictionary
  */
 interface ComponentsProp {
+  /**
+   * Mapping of names for JSX components to React components
+   */
   components: ComponentDictionary
 }
 

packages/runtime/package.json

@@ -19,19 +19,22 @@
     "John Otander <[email protected]> (http://johnotander.com)",
     "Tim Neutkens <[email protected]>",
     "Matija Marohnić <[email protected]>",
-    "Titus Wormer <[email protected]> (https://wooorm.com)"
+    "Titus Wormer <[email protected]> (https://wooorm.com)",
+    "Christian Murphy <[email protected]>"
   ],
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "scripts": {
     "build": "microbundle --format es,cjs --external react,buble,@mdx-js/mdx,@mdx-js/react --jsx React.createElement --no-sourcemap",
     "clean": "rimraf dist",
     "prepublish": "yarn clean && yarn build",
-    "test": "jest"
+    "test": "jest && dtslint types"
   },
   "files": [
-    "dist"
+    "dist",
+    "types/index.d.ts"
   ],
+  "types": "types/index.d.ts",
   "dependencies": {
     "@mdx-js/mdx": "^1.4.5",
     "@mdx-js/react": "^1.4.5",
@@ -41,6 +44,7 @@
     "@babel/core": "7.6.0",
     "@babel/preset-env": "7.6.0",
     "@babel/preset-react": "7.0.0",
+    "dtslint": "^0.9.8",
     "jest": "24.9.0",
     "microbundle": "0.11.0",
     "react": "16.9.0",

packages/runtime/types/index.d.ts

@@ -0,0 +1,29 @@
+// TypeScript Version: 3.5
+
+import { FunctionComponent } from 'react'
+import { Options } from '@mdx-js/mdx'
+import { ComponentsProp } from '@mdx-js/react'
+
+/**
+ * Properties for the MDX Runtime component
+ */
+export interface MDXRuntimeProps extends Omit<Options, 'footnotes' | 'compilers'>, ComponentsProp  {
+  /**
+   * MDX text
+   */
+  children: string
+
+  /**
+   * Values in usable in MDX scope
+   */
+  scope: {
+    [variableName: string]: unknown
+  }
+}
+
+/**
+ * Renders child MDX text as a React component
+ */
+declare const mdxRuntime: FunctionComponent<Partial<MDXRuntimeProps>>
+
+export default mdxRuntime

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

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import MDX from '@mdx-js/runtime'
+
+const exampleNoProps = () => <MDX># header</MDX>
+
+// $ExpectError
+const exampleInvalidContent = () => <MDX children={<div />}></MDX>
+
+const exampleScopeAndComponents = (mdx: string) => (
+  <MDX components={{h1: () => <h1 />}} scope={{value: 'example'}}>
+    {mdx}
+  </MDX>
+)
+
+const exampleFullConfig = (mdx: string) => (
+  <MDX
+    components={{h1: () => <h1 />}}
+    scope={{value: 'example', number: 1}}
+    rehypePlugins={[() => () => ({type: 'test'})]}
+    remarkPlugins={[() => () => ({type: 'test'})]}
+  >
+    {mdx}
+  </MDX>
+)

packages/runtime/types/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["dom", "es6"],
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "jsx": "react",
+    "paths": {
+      "@mdx-js/runtime": ["index.d.ts"]
+    }
+  }
+}

packages/runtime/types/tslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "whitespace": false,
+    "semicolon": false,
+    "no-redundant-jsdoc": false
+  }
+}