support Preact X (#955)

packages/preact/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "corejs": 2,
+        "useBuiltIns": "usage"
+      }
+    ],
+    "@babel/react"
+  ]
+}

packages/preact/license

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017-2018 Compositor and Zeit, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

packages/preact/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mdx-js/preact",
+  "version": "1.5.6",
+  "description": "Preact implementation for MDX",
+  "repository": "mdx-js/mdx",
+  "homepage": "https://mdxjs.com",
+  "bugs": "https://github.com/mdx-js/mdx/issues",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/unified"
+  },
+  "author": "John Otander <johnotander@gmail.com> (http://johnotander.com)",
+  "contributors": [
+    "John Otander <johnotander@gmail.com> (http://johnotander.com)",
+    "Tim Neutkens <tim@zeit.co>",
+    "Matija Marohnić <matija.marohnic@gmail.com>",
+    "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)",
+    "JounQin <admin@1stg.me> (https://www.1stg.me)"
+  ],
+  "license": "MIT",
+  "main": "dist/cjs.js",
+  "module": "dist/esm.js",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "mdx",
+    "markdown",
+    "react",
+    "jsx",
+    "remark",
+    "mdxast"
+  ],
+  "peerDependencies": {
+    "preact": "^10.3.2"
+  },
+  "devDependencies": {
+    "preact": "10.3.2",
+    "preact-render-to-string": "5.1.4"
+  }
+}

packages/preact/readme.md

@@ -0,0 +1,79 @@
+# `@mdx-js/preact`
+
+[![Build Status][build-badge]][build]
+[![lerna][lerna-badge]][lerna]
+[![Join the community on Spectrum][spectrum-badge]][spectrum]
+
+Map components to HTML elements based on the Markdown syntax.
+Serves as the Preact implementation for [MDX][].
+
+## Installation
+
+[npm][]:
+
+```sh
+npm install --save @mdx-js/preact
+```
+
+## Usage
+
+```md
+<!-- helloworld.md -->
+
+# Hello, World!
+```
+
+```jsx
+/* @jsx h */
+import {h} from 'preact'
+import {MDXProvider} from '@mdx-js/preact'
+import {render} from 'preact-render-to-string'
+
+import HelloWorld from './helloworld.md'
+
+const H1 = props => <h1 style={{color: 'tomato'}} {...props} />
+
+console.log(
+  render(
+    <MDXProvider components={{h1: H1}}>
+      <HelloWorld />
+    </MDXProvider>
+  )
+)
+```
+
+Yields:
+
+```html
+<h1 style="color:tomato">Hello, world!</h1>
+```
+
+## Contribute
+
+See the [Support][] and [Contributing][] guidelines on the MDX website for ways
+to (get) help.
+
+This project has a [Code of Conduct][coc].
+By interacting with this repository, organisation, or community you agree to
+abide by its terms.
+
+## License
+
+[MIT][] © [Compositor][] and [ZEIT][]
+
+<!-- Definitions -->
+
+[build]: https://travis-ci.com/mdx-js/mdx
+[build-badge]: https://travis-ci.com/mdx-js/mdx.svg?branch=master
+[lerna]: https://lernajs.io/
+[lerna-badge]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
+[spectrum]: https://spectrum.chat/mdx
+[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
+[contributing]: https://mdxjs.com/contributing
+[support]: https://mdxjs.com/support
+[coc]: https://github.com/mdx-js/.github/blob/master/code-of-conduct.md
+[mit]: license
+[compositor]: https://compositor.io
+[zeit]: https://zeit.co
+[mdx]: https://github.com/mdx-js/mdx
+[npm]: https://docs.npmjs.com/cli/install

packages/preact/src/context.js

@@ -0,0 +1,37 @@
+/* @jsx h */
+// eslint-disable-next-line
+import { createContext, h } from "preact";
+import {useContext} from 'preact/hooks'
+
+const isFunction = obj => typeof obj === 'function'
+
+const MDXContext = createContext({})
+
+export const withMDXComponents = Component => props => {
+  const allComponents = useMDXComponents(props.components)
+  return <Component {...props} components={allComponents} />
+}
+
+export const useMDXComponents = components => {
+  const contextComponents = useContext(MDXContext)
+  let allComponents = contextComponents
+  if (components) {
+    allComponents = isFunction(components)
+      ? components(contextComponents)
+      : {...contextComponents, ...components}
+  }
+
+  return allComponents
+}
+
+export const MDXProvider = props => {
+  const allComponents = useMDXComponents(props.components)
+
+  return (
+    <MDXContext.Provider value={allComponents}>
+      {props.children}
+    </MDXContext.Provider>
+  )
+}
+
+export default MDXContext

packages/preact/src/create-element.js

@@ -0,0 +1,73 @@
+import {h, Fragment} from 'preact'
+import {forwardRef} from 'preact/compat'
+
+import {useMDXComponents} from './context'
+
+const TYPE_PROP_NAME = 'mdxType'
+
+const DEFAULTS = {
+  inlineCode: 'code',
+  wrapper: ({children}) => h(Fragment, {}, children)
+}
+
+const MDXCreateElement = forwardRef((props, ref) => {
+  const {
+    components: propComponents,
+    mdxType,
+    originalType,
+    parentName,
+    ...etc
+  } = props
+
+  const components = useMDXComponents(propComponents)
+  const type = mdxType
+  const Component =
+    components[`${parentName}.${type}`] ||
+    components[type] ||
+    DEFAULTS[type] ||
+    originalType
+
+  if (propComponents) {
+    return h(Component, {
+      ref,
+      ...etc,
+      components: propComponents
+    })
+  }
+
+  return h(Component, {ref, ...etc})
+})
+
+MDXCreateElement.displayName = 'MDXCreateElement'
+
+export default function(type, props) {
+  const args = arguments
+  const mdxType = props && props.mdxType
+
+  if (typeof type === 'string' || mdxType) {
+    const argsLength = args.length
+
+    const createElementArgArray = new Array(argsLength)
+    createElementArgArray[0] = MDXCreateElement
+
+    const newProps = {}
+    for (let key in props) {
+      if (hasOwnProperty.call(props, key)) {
+        newProps[key] = props[key]
+      }
+    }
+
+    newProps.originalType = type
+    newProps[TYPE_PROP_NAME] = typeof type === 'string' ? type : mdxType
+
+    createElementArgArray[1] = newProps
+
+    for (let i = 2; i < argsLength; i++) {
+      createElementArgArray[i] = args[i]
+    }
+
+    return h.apply(null, createElementArgArray)
+  }
+
+  return h.apply(null, args)
+}

packages/preact/src/index.js

@@ -0,0 +1,8 @@
+export {
+  default as MDXContext,
+  MDXProvider,
+  useMDXComponents,
+  withMDXComponents
+} from './context'
+
+export {default as mdx} from './create-element'

packages/preact/test/fixture.js

@@ -0,0 +1,20 @@
+/* @jsx mdx */
+
+// eslint-disable-next-line no-unused-vars
+import {mdx} from '../src'
+
+const Component = ({components}) => <p>{Object.keys(components).join(', ')}</p>
+
+export default () => (
+  <wrapper>
+    <h1 />
+    <h2 />
+    <del />
+    <Component
+      components={{
+        h3: props => <h3 {...props} />,
+        h4: props => <h4 {...props} />
+      }}
+    />
+  </wrapper>
+)

packages/preact/test/test.js

@@ -0,0 +1,80 @@
+/* @jsx h */
+import {render} from 'preact-render-to-string'
+// eslint-disable-next-line
+import {h} from 'preact'
+
+import {MDXProvider} from '../src/context'
+import Fixture from './fixture'
+
+const H1 = props => <h1 style={{color: 'tomato'}} {...props} />
+const H2 = props => <h2 style={{color: 'rebeccapurple'}} {...props} />
+const CustomH2 = props => <h2 style={{color: 'papayawhip'}} {...props} />
+const CustomDelete = props => <del style={{color: 'crimson'}} {...props} />
+
+it('Should allow components to be passed via context', () => {
+  const Layout = ({children}) => <div id="layout">{children}</div>
+
+  const result = render(
+    <MDXProvider components={{h1: H1, wrapper: Layout}}>
+      <Fixture />
+    </MDXProvider>
+  )
+
+  // Layout is rendered
+  expect(result).toMatch(/id="layout"/)
+
+  // H1 is rendered
+  expect(result).toMatch(/style="color: tomato;"/)
+})
+
+it('Should merge components when there is nested context', () => {
+  const components = {h1: H1, h2: H2}
+
+  const result = render(
+    <MDXProvider components={components}>
+      <MDXProvider components={{h2: CustomH2}}>
+        <Fixture />
+      </MDXProvider>
+    </MDXProvider>
+  )
+
+  // MDXTag picks up original component context
+  expect(result).toMatch(/style="color: tomato;"/)
+
+  // MDXTag picks up overridden component context
+  expect(result).toMatch(/style="color: papayawhip;"/)
+})
+
+it('Should allow removing of context components using the functional form', () => {
+  const components = {h1: H1, h2: H2}
+
+  const result = render(
+    <MDXProvider components={components}>
+      <MDXProvider components={_outerComponents => ({h2: CustomH2})}>
+        <Fixture />
+      </MDXProvider>
+    </MDXProvider>
+  )
+
+  // MDXTag does not pick up original component context
+  expect(result).not.toMatch(/style="color:tomato"/)
+
+  // MDXTag picks up overridden component context
+  expect(result).toMatch(/style="color: papayawhip;"/)
+})
+
+it('Should pass prop components along', () => {
+  const result = render(<Fixture />)
+
+  expect(result).toMatch(/h3, h4/)
+})
+
+it('Should render custom del', () => {
+  const result = render(
+    <MDXProvider components={{del: CustomDelete}}>
+      <Fixture />
+    </MDXProvider>
+  )
+
+  expect(result).toMatch(/style="color: crimson;"/)
+})