feat(@theme-ui/mdx): add TypeScript support

Author: LA1CH3

packages/core/src/types.ts

@@ -48,7 +48,7 @@ export interface IntrinsicSxElements {
   em: JSX.IntrinsicElements['em'] & SxProps
   strong: JSX.IntrinsicElements['strong'] & SxProps
   div: JSX.IntrinsicElements['div'] & SxProps
-  delete: JSX.IntrinsicElements['div'] & SxProps
+  del: JSX.IntrinsicElements['div'] & SxProps
   inlineCode: JSX.IntrinsicElements['div'] & SxProps
   thematicBreak: JSX.IntrinsicElements['div'] & SxProps
   root: JSX.IntrinsicElements['div'] & SxProps

packages/mdx/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@theme-ui/mdx",
   "version": "0.3.0",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "prepare": "microbundle --no-compress",
-    "watch": "microbundle watch --no-compress"
+    "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
+    "watch": "microbundle watch --no-compress --tsconfig tsconfig.json"
   },
   "dependencies": {
     "@emotion/core": "^10.0.0",

packages/mdx/src/index.js

@@ -0,0 +1,108 @@
+import { jsx, IntrinsicSxElements } from '@theme-ui/core'
+import { css, get, Theme } from '@theme-ui/css'
+import { ComponentType, FC, ReactNode } from 'react'
+import styled, { Interpolation } from '@emotion/styled'
+import {
+  MDXProvider as _MDXProvider,
+  useMDXComponents
+} from '@mdx-js/react'
+
+
+export type MdxAliases = {
+  [key in keyof IntrinsicSxElements]: keyof JSX.IntrinsicElements
+}
+
+export type MdxAliasesKeys = 'inlineCode' | 'thematicBreak' | 'root'
+
+export type MdxProviderComponents = {
+  [key in keyof IntrinsicSxElements]: ComponentType
+}
+
+export type ThemedProps = {
+  theme: Theme
+}
+
+export interface MdxProviderProps {
+  components?: MdxProviderComponents
+  children: ReactNode
+}
+
+// mdx components
+const tags: Array<keyof IntrinsicSxElements> = [
+  'p',
+  'b',
+  'i',
+  'a',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'img',
+  'pre',
+  'code',
+  'ol',
+  'ul',
+  'li',
+  'blockquote',
+  'hr',
+  'em',
+  'table',
+  'tr',
+  'th',
+  'td',
+  'em',
+  'strong',
+  'del',
+  // mdx
+  'inlineCode',
+  'thematicBreak',
+  // other
+  'div',
+  // theme-ui
+  'root',
+]
+
+const aliases: Pick<MdxAliases, MdxAliasesKeys> = {
+  inlineCode: 'code',
+  thematicBreak: 'hr',
+  root: 'div',
+}
+
+const alias = (n: keyof IntrinsicSxElements): keyof JSX.IntrinsicElements => aliases[n] || n
+
+export const themed = (key: keyof IntrinsicSxElements) => (props: ThemedProps) =>
+  css(get(props.theme, `styles.${key}`))(props.theme) as Interpolation<ThemedProps>
+
+export const Styled = styled('div')(themed('div'))
+
+export const components = {}
+
+tags.forEach(tag => {
+  components[tag] = styled(alias(tag))(themed(tag))
+  Styled[tag] = components[tag]
+})
+
+const createComponents = (comps: MdxProviderComponents) => {
+  const next = { ...components }
+
+  const componentKeys = Object.keys(comps) as Array<keyof IntrinsicSxElements>
+
+  componentKeys.forEach(key => {
+    next[key] = styled(comps[key])(themed(key))
+  })
+  return next
+}
+
+export const MDXProvider: FC<MdxProviderProps> = ({
+  components,
+  children,
+}) => {
+  const outer = useMDXComponents()
+
+  return jsx(_MDXProvider, {
+    components: createComponents({ ...outer, ...components }),
+    children,
+  })
+}

packages/mdx/src/index.ts

@@ -0,0 +1,4 @@
+{
+    "extends": "../core/tsconfig.json",
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
+}