Implement first pass of MDXs

This implements the basic idea of MDXs. Though
we still need to figure out how to best handle
the layout mechanism.

cc/ @ChristopherBiscardi, @jxnblk, @timneutkens

---

Related #454

packages/mdx/index.js

@@ -30,6 +30,7 @@ function createMdxAstCompiler(options) {
   const fn = unified()
     .use(toMDAST, options)
     .use(remarkMdx, options)
+    .use(mdxHastToJsx, options) // Set JSX compiler early so it can be overridden
     .use(squeeze, options)
     .use(toMDXAST, options)
 
@@ -81,8 +82,6 @@ function applyHastPluginsAndCompilers(compiler, options) {
     }
   })
 
-  compiler.use(mdxHastToJsx, options)
-
   for (const compilerPlugin of compilers) {
     compiler.use(compilerPlugin, options)
   }

packages/remark-mdxs/index.js

@@ -0,0 +1,76 @@
+const visit = require('unist-util-visit')
+const remove = require('unist-util-remove')
+const {toJSX} = require('@mdx-js/mdx/mdx-hast-to-jsx')
+
+module.exports = function({delimiter = 'hr'}) {
+  this.Compiler = tree => {
+    const splits = []
+    const documents = []
+
+    const importNodes = tree.children.filter(n => n.type === 'import')
+    const exportNodes = tree.children.filter(n => n.type === 'export')
+
+    const layout = exportNodes.find(node => node.default)
+
+    // We don't care about imports and exports when handling
+    // multiple MDX documents
+    let mdxsTree = remove(remove(tree, 'export'), 'import')
+    const {children} = mdxsTree
+
+    visit(mdxsTree, node => {
+      if (node.tagName === delimiter) {
+        splits.push(children.indexOf(node))
+      }
+    })
+
+    let previousSplit = 0
+    for (let i = 0; i < splits.length; i++) {
+      const split = splits[i]
+      documents.push(children.slice(previousSplit, split))
+      previousSplit = split + 1
+    }
+
+    documents.push(children.slice(previousSplit))
+
+    const jsxFragments = documents
+      .map(nodes => nodes.map(toJSX).join('\n'))
+      .map((jsx, i) =>
+        `
+function MDXSContent${i}({ components, ...props }) {
+  return (
+    ${jsx.trim()}
+  )
+}
+    `.trim()
+      )
+
+    const defaultExport = `
+const MDXSWrapper = props => [
+${jsxFragments.map((_, i) => `  <MDXSContent${i} {...props} />`).join(',\n')}
+]
+
+export default MDXWrapper
+    `.trim()
+
+    return [
+      importNodes.map(n => n.value.trim()).join('\n'),
+      '',
+      exportNodes
+        .filter(n => !n.default)
+        .map(n => n.value.trim())
+        .join('\n'),
+      '',
+      `const MDXSLayout = ${
+        layout
+          ? layout.value
+              .replace(/^export\s+default\s+/, '')
+              .replace(/;\s*$/, '')
+          : '"wrapper"'
+      }`,
+      '',
+      jsxFragments.join('\n\n'),
+      '',
+      defaultExport
+    ].join('\n')
+  }
+}

packages/remark-mdxs/license

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-2019 Titus Wormer and John Otander
+
+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/remark-mdxs/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "remark-mdxs",
+  "version": "1.0.0-rc.0",
+  "description": "Support for multiple MDX documents in a single file",
+  "license": "MIT",
+  "keywords": [
+    "mdx",
+    "mdxs",
+    "markdown",
+    "react",
+    "jsx",
+    "remark",
+    "mdxast"
+  ],
+  "homepage": "https://mdxjs.com",
+  "repository": "mdx-js/mdx",
+  "bugs": "https://github.com/mdx-js/mdx/issues",
+  "author": "John Otander <johnotander@gmail.com> (https://johno.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)"
+  ],
+  "files": [
+    "index.js"
+  ],
+  "dependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/helper-plugin-utils": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
+    "@babel/plugin-syntax-jsx": "^7.2.0",
+    "is-alphabetical": "^1.0.2",
+    "remark-parse": "^6.0.0",
+    "unified": "^7.0.0",
+    "unist-util-remove": "^1.0.1",
+    "unist-util-visit": "^1.4.0"
+  },
+  "peerDependencies": {
+    "@mdx-js/mdx": "*"
+  },
+  "scripts": {
+    "test": "jest"
+  },
+  "jest": {
+    "testEnvironment": "node"
+  },
+  "devDependencies": {
+    "jest": "^24.0.0",
+    "remark-stringify": "^6.0.4",
+    "vfile": "^4.0.0"
+  }
+}

packages/remark-mdxs/readme.md

@@ -0,0 +1,55 @@
+# [remark][]-[mdx][]s
+
+[![Build Status][build-badge]][build]
+[![lerna][lerna-badge]][lerna]
+[![Join the community on Spectrum][spectrum-badge]][spectrum]
+
+> :warning: This project is currently in alpha
+
+[MDXs][] syntax support for [remark][].
+
+## Installation
+
+```sh
+npm install --save remark-mdxs
+```
+
+## Contribute
+
+See [`contributing.md` in `mdx-js/mdx`][contributing] for ways to get started.
+
+This organisation has a [Code of Conduct][coc].
+By interacting with this repository, organisation, or community you agree to
+abide by its terms.
+
+## License
+
+[MIT][] © [Titus Wormer][author] and [John Otander][author2]
+
+<!-- Definitions -->
+
+[build]: https://travis-ci.org/mdx-js/mdx
+
+[build-badge]: https://travis-ci.org/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://github.com/mdx-js/mdx/blob/master/contributing.md
+
+[coc]: https://github.com/mdx-js/mdx/blob/master/code-of-conduct.md
+
+[mit]: license
+
+[remark]: https://github.com/remarkjs/remark
+
+[mdx]: https://github.com/mdx-js/mdx
+
+[author]: https://wooorm.com
+
+[author2]: https://johno.com

packages/remark-mdxs/test/__snapshots__/test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`correctly transpiles 1`] = `
+"/* @jsx mdx */
+import Foo from './bar'
+
+export const author = 'fred'
+
+const MDXSLayout = Foo
+
+function MDXSContent0({ components, ...props }) {
+  return (
+    <h1>{\`Hello, world! \`}<Foo bar={{ baz: 'qux' }} /></h1>
+  )
+}
+
+function MDXSContent1({ components, ...props }) {
+  return (
+    <Baz>
+  Hi!
+</Baz>
+  )
+}
+
+function MDXSContent2({ components, ...props }) {
+  return (
+    <h1>{\`I'm another document\`}</h1>
+
+
+<p>{\`over here.\`}</p>
+  )
+}
+
+const MDXSWrapper = props => [
+  <MDXSContent0 {...props} />,
+  <MDXSContent1 {...props} />,
+  <MDXSContent2 {...props} />
+]
+
+export default MDXWrapper"
+`;

packages/remark-mdxs/test/test.js

@@ -0,0 +1,30 @@
+const mdx = require('../../mdx')
+const remarkMdxs = require('..')
+
+const FIXTURE = `
+import Foo from './bar'
+export const author = 'fred'
+export default Foo
+
+# Hello, world! <Foo bar={{ baz: 'qux' }} />
+
+---
+
+<Baz>
+  Hi!
+</Baz>
+
+---
+
+# I'm another document
+
+over here.
+`
+
+it('correctly transpiles', async () => {
+  const result = await mdx(FIXTURE, {
+    remarkPlugins: [remarkMdxs]
+  })
+
+  expect(result).toMatchSnapshot()
+})