[WIP] MDX V2

.eslintignore

@@ -16,6 +16,9 @@ packages/gatsby-theme-mdx/src/components/header.js
 packages/gatsby-theme-mdx/src/components/layout.js
 packages/gatsby-theme-mdx/src/components/search.js
 
-# tmp
+packages/remark-mdx
+
+# To do: Vue should be checked.
 examples/vue
-packages/vue
+
+readme.md

.eslintrc.yml

@@ -43,15 +43,13 @@ settings:
     version: 16.3.2
 
 overrides:
-  - files: '*.md'
-    extends: plugin:mdx/recommended
-
   - files: '*.mdx'
     extends:
       - plugin:mdx/recommended
       - plugin:mdx/overrides
     rules:
       import/no-extraneous-dependencies: 0
+      prettier/prettier: 0
 
   - files:
       - '**/test/**/*.js'

.github/workflows/ci.yml

@@ -7,47 +7,25 @@ jobs:
     name: Build and Test on ${{ matrix.os }} with Node.js ${{ matrix.node }}
     strategy:
       matrix:
-        os: [macOS-latest, ubuntu-latest, windows-latest]
-        node: [10, 12]
+        os:
+          - ubuntu-latest
+          - windows-latest
+        node:
+          - 10
+          - 14
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v1
-
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2-beta
         with:
           node-version: ${{ matrix.node }}
-
-      - name: Setup yarn
-        if: matrix.os != 'windows-latest'
-        run: |
-          curl -o- -L https://yarnpkg.com/install.sh | bash
-          export PATH="$HOME/.yarn/bin:$PATH"
-
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ matrix.os }}-${{ matrix.node }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ matrix.os }}-${{ matrix.node }}-yarn-
-
-      - name: Install Dependencies
+      - name: Install
         run: yarn --frozen-lockfile
         env:
           CI: 'true'
-
-      - name: Build and Lint
-        if: matrix.os != 'windows-latest'
-        run: |
-          yarn build
-          yarn lint
-
       - name: Test
         run: yarn test
-
+      # To do: macos isn’t used anymore
       - name: Publish CI tag to npm
         if: matrix.node == 12 && matrix.os == 'macOS-latest' && github.event_name == 'push' && github.ref	== 'refs/heads/master'
         run: |

.github/workflows/publish.yml

@@ -0,0 +1,35 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  default:
+    name: Publish CI tagged release for MDX
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: 14
+
+      - name: Setup yarn
+        run: |
+          curl -o- -L https://yarnpkg.com/install.sh | bash
+          export PATH="$HOME/.yarn/bin:$PATH"
+
+      - name: Install Dependencies
+        run: yarn --frozen-lockfile
+        env:
+          CI: 'true'
+
+      - name: Build
+        run: yarn build
+
+      - name: Publish CI tag to npm
+        if: github.event_name == 'push' && github.ref	== 'refs/heads/master'
+        run: |
+          npm set //registry.npmjs.org/:_authToken $NPM_AUTH_TOKEN
+          yarn publish-ci
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.gitignore

@@ -13,3 +13,6 @@ artifacts
 .*cache
 public
 .npmrc
+.nyc_output/
+coverage/
+.yarn

.remarkrc.js

@@ -1,21 +1,9 @@
-const unified = require('unified')
-const english = require('retext-english')
-const wooorm = require('retext-preset-wooorm')
-
 module.exports = {
   plugins: [
     './packages/remark-mdx',
     'preset-wooorm',
     'preset-prettier',
-    [
-      'retext',
-      unified()
-        .use(english)
-        .use(wooorm)
-        .use({
-          plugins: [[require('retext-sentence-spacing'), false]]
-        })
-    ],
+    ['retext', false],
     ['validate-links', false]
   ]
 }

docs/404.mdx

@@ -1,3 +1,3 @@
 # 404
 
-Page not found. [Return Home](/)
+Page not found.[Return Home](/)

docs/about.mdx

@@ -1,7 +1,7 @@
 # About
 
 MDX is based on the [original `.mdx` proposal][idea] by Guillermo Rauch
-([@rauchg][rauchg]). Its syntax is defined by an official [specification][].
+([@rauchg][rauchg]).Its syntax is defined by an official [specification][].
 The source code for MDX is available on [GitHub][] and is [MIT licensed][license].
 
 The project is governed by the [unified collective][governance].
@@ -13,10 +13,10 @@ also available on [GitHub][design].
 
 ### Authors
 
-- [John Otander][john] ([@4lpine][4lpine]) – [Compositor][] + [Clearbit][]
+- [John Otander][john] ([@4lpine][4lpine]) – [Components AI](https://components.ai)
 - [Tim Neutkens][tim] ([@timneutkens][timneutkens]) – [Vercel][]
 - [Guillermo Rauch][guillermo] ([@rauchg][rauchg]) – [Vercel][]
-- [Brent Jackson][brent] ([@jxnblk][jxnblk]) – [Compositor][]
+- [Brent Jackson][brent] ([@jxnblk][jxnblk]) – [Gatsby](https://gatsbyjs.com)
 
 ## Related
 
@@ -70,6 +70,4 @@ These projects define the syntax which MDX blends together (MD and JSX).
 [timneutkens]: https://twitter.com/timneutkens
 [jxnblk]: https://twitter.com/jxnblk
 [evil rabbit]: https://twitter.com/evilrabbit_
-[compositor]: https://compositor.io
 [vercel]: https://vercel.com
-[clearbit]: https://clearbit.com

docs/advanced/api.mdx

@@ -115,8 +115,6 @@ const mdxText = fs.readFileSync('hello.mdx', 'utf8')
 const jsx = mdx.sync(mdxText)
 ```
 
-<!-- TODO: links should be updated. Can we also inline this example? -->
-
 MDX’s [runtime][] package has [example][] usage.
 
 ## Compiler

docs/advanced/components.mdx

@@ -51,14 +51,14 @@ documents via the [MDXProvider](#mdxprovider).
 ### Layout props
 
 You’ll also notice that `layoutProps` is created based on your exports
-and then passed to the wrapper. This allows for the wrapper to use
+and then passed to the wrapper.This allows for the wrapper to use
 those props automatically for handling things like adding an author
 bio to the wrapped document.
 
 ## `makeShortcode`
 
 There is one other function added to the compiled output: `makeShortcode`.
-This is added for [shortcode support](/blog/shortcodes). It’s used in order
+This is added for [shortcode support](/blog/shortcodes).It’s used in order
 to stub any components that aren’t directly imported so that there won’t be
 any `ReferenceError`s. If they’re passed to the `MDXProvider`, the custom
 JSX pragma will pull the component from context and use that in place of the
@@ -68,9 +68,9 @@ stubbed `Button`:
 const makeShortcode = name =>
   function MDXDefaultShortcode(props) {
     console.warn(
-      'Component ' +
+      'Component `' +
         name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
+        '` was not imported, exported, or provided by MDXProvider as global scope'
     )
     return <div {...props} />
   }
@@ -102,9 +102,9 @@ export default () => (
 ### Caveats
 
 Because MDXProvider uses React Context directly, it is affected by
-the same caveats. It is therefore important that you do not declare
-your components mapping inline in the JSX. Doing so will trigger a rerender
-of your entire MDX page with every render cycle. Not only is this bad for
+the same caveats.It is therefore important that you do not declare
+your components mapping inline in the JSX.Doing so will trigger a rerender
+of your entire MDX page with every render cycle.Not only is this bad for
 performance, but it can cause unwanted side affects, like breaking in-page
 browser navigation.
 

docs/advanced/plugins.mdx

@@ -151,10 +151,10 @@ mdx.sync(mdxText, {
 [rehype]: https://github.com/rehypejs/rehype
 [remark-capitalize]: https://github.com/zeit/remark-capitalize
 [remark-toc]: https://github.com/remarkjs/remark-toc
-[remark-plugins]: https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins
-[rehype-plugins]: https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins
+[remark-plugins]: https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
+[rehype-plugins]: https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
 [retext]: https://github.com/retextjs/retext
 [remarkjs/remark#224]: https://github.com/remarkjs/remark/issues/224
 [visit]: https://github.com/syntax-tree/unist-util-visit
 [retext-smartypants]: https://github.com/retextjs/retext-smartypants
-[create-plugin]: https://unifiedjs.com/create-a-plugin.html
+[create-plugin]: https://unifiedjs.com/learn/guide/create-a-plugin

docs/advanced/runtime.mdx

@@ -1,10 +1,5 @@
 import Doc from '@mdx-js/runtime/readme.md'
 
-<!--
-TODO: add a nicer, smaller intro to the runtime: when to use it, when not to.
-We can also move it to `api` maybe?
--->
-
 # Runtime
 
 <Doc />

docs/advanced/transform-content.mdx

@@ -6,7 +6,7 @@ are many utilities you can use to work with MDX.
 
 You can utilize [to-vfile][] to read and write MDX files
 and you can leverage [remark][] and [remark-mdx][]
-to parse and process MDX content. The remark-mdx library is a parsing
+to parse and process MDX content.The remark-mdx library is a parsing
 extension to enhance the Markdown [AST][] to understand MDX
 (resulting in [MDXAST][]), giving you access and insight to MDX
 attributes, namely imports, exports, and jsx.

docs/advanced/typescript.mdx

@@ -1,68 +1,39 @@
 # TypeScript
 
-<!--
-TODO: this feels like it’s placed weirdly.
-Where could it go?
--->
+MDX provides typings for many of the core packages.
 
-Below are some basic typings to get started with:
+If you want to improve upon the types, we would _love_ a PR to
+improve the developer experience for TypeScript users.
 
-```tsx
-declare module '@mdx-js/react' {
-  import * as React from 'react'
+---
 
-  type ComponentType =
-    | 'a'
-    | 'blockquote'
-    | 'code'
-    | 'delete'
-    | 'em'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'hr'
-    | 'img'
-    | 'inlineCode'
-    | 'li'
-    | 'ol'
-    | 'p'
-    | 'pre'
-    | 'strong'
-    | 'sup'
-    | 'table'
-    | 'td'
-    | 'thematicBreak'
-    | 'tr'
-    | 'ul'
+## Typings for Components and Utilities
 
-  export type Components = {
-    [key in ComponentType]?: React.ComponentType<{children: React.ReactNode}>
-  }
+- `@mdx-js/mdx`
+- `@mdx-js/preact`
+- `@mdx-js/react`
+- `@mdx-js/runtime`
+- `@mdx-js/vue`
+- `remark-mdx`
 
-  export interface MDXProviderProps {
-    children: React.ReactNode
-    components: Components
-  }
-  export class MDXProvider extends React.Component<MDXProviderProps> {}
-}
-```
-
-If you want to improve upon the types we would _love_ a PR to
-improve the developer experience for TypeScript users.
+Include types, no additional setup needed.
 
 ---
 
-If you’re getting errors from TypeScript related to imports with an `*.mdx`
-extension, create an `mdx.d.ts` file in your types directory and include it
-inside your `tsconfig.json`.
+## Typings for MDX imports
+
+### React and Webpack
+
+Add an `mdx.d.ts` file with the below content, and ensure it is included by the `tsconfig.json`.
+
+```tsx
+/// <reference types="@mdx-js/loader" />
+```
+
+### Vue and Webpack
+
+Add an `mdx.d.ts` file with the below content, and ensure it is included by the `tsconfig.json`.
 
 ```tsx
-// types/mdx.d.ts
-declare module '*.mdx' {
-  let MDXComponent: (props: any) => JSX.Element
-  export default MDXComponent
-}
+/// <reference types="@mdx-js/vue-loader" />
 ```