Fix Vue, test and document rest

.eslintignore

@@ -18,8 +18,7 @@ packages/gatsby-theme-mdx/src/components/search.js
 
 packages/remark-mdx
 
-# tmp
+# tmp - this doesn’t make sense at all
 examples/vue
-packages/vue
 
 readme.md

.gitignore

@@ -15,3 +15,4 @@ public
 .npmrc
 .nyc_output/
 coverage/
+.yarn

.yarnrc

@@ -1 +1,6 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
 ignore-engines true
+yarn-path ".yarn/releases/yarn-1.19.0.cjs"

docs/advanced/typescript.mdx

@@ -13,7 +13,6 @@ improve the developer experience for TypeScript users.
 - `@mdx-js/react`
 - `@mdx-js/runtime`
 - `@mdx-js/vue`
-- `@mdx-js/util`
 - `remark-mdx`
 - `remark-mdx-remove-exports`
 - `remark-mdx-remove-imports`
@@ -26,15 +25,15 @@ Include types, no additional setup needed.
 
 ### React and Webpack
 
-Add an _mdx.d.ts_ file with the below content, and ensure it is included by the _tsconfig.json_.
+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_.
+Add an `mdx.d.ts` file with the below content, and ensure it is included by the `tsconfig.json`.
 
 ```tsx
 /// <reference types="@mdx-js/vue-loader" />

package.json

@@ -30,11 +30,7 @@
     "publish": "lerna publish --force-publish=\"*\"",
     "publish-ci": "lerna publish -y --canary --preid ci --pre-dist-tag ci",
     "publish-next": "lerna publish --force-publish=\"*\" --pre-dist-tag next --preid next",
-    "test": "yarn test-jest && yarn test-parser",
-    "test-all": "yarn test && yarn test-types",
-    "test-jest": "jest --runInBand --detectOpenHandles",
-    "test-parser": "nyc --reporter lcov tape packages/remark-mdx/test/index.js",
-    "test-types": "lerna run test-types"
+    "test": "lerna run test --no-private"
   },
   "dependencies": {},
   "devDependencies": {
@@ -45,7 +41,6 @@
     "@mapbox/rehype-prism": "0.5.0",
     "@mdx-js/mdx": "^1.6.7",
     "@mdx-js/react": "^1.6.7",
-    "@mdx-js/test-util": "^1.6.7",
     "@mdx-js/vue": "^1.6.7",
     "@pkgr/rollup": "0.10.4",
     "@vue/babel-preset-jsx": "1.1.2",
@@ -81,8 +76,8 @@
     "rehype-katex": "3.0.0",
     "remark-autolink-headings": "6.0.1",
     "remark-math": "2.0.1",
-    "remark-mdx": "2.0.0-next.0",
-    "remark-mdxjs": "2.0.0-next.0",
+    "remark-mdx": "2.0.0-next.8",
+    "remark-mdxjs": "2.0.0-next.8",
     "remark-parse": "8.0.2",
     "remark-preset-prettier": "0.4.0",
     "remark-preset-wooorm": "7.0.0",

packages/babel-plugin-apply-mdx-type-props/index.js

@@ -1,6 +1,7 @@
 const {types: t} = require('@babel/core')
 const {declare} = require('@babel/helper-plugin-utils')
-const {startsWithCapitalLetter} = require('@mdx-js/util')
+
+const startsWithCapitalLetter = str => /^[A-Z]/.test(str)
 
 class BabelPluginApplyMdxTypeProp {
   constructor() {

packages/babel-plugin-apply-mdx-type-props/package.json

@@ -29,8 +29,10 @@
     "@babel/core": "^7.10.5"
   },
   "dependencies": {
-    "@babel/helper-plugin-utils": "7.10.4",
-    "@mdx-js/util": "^2.0.0-next.8"
+    "@babel/helper-plugin-utils": "7.10.4"
+  },
+  "scripts": {
+    "test": "jest test --coverage"
   },
   "gitHead": "bf7deab69996449cb99c2217dff75e65855eb2c1"
 }

packages/babel-plugin-apply-mdx-type-props/readme.md

@@ -1,25 +1,34 @@
-# `babel-plugin-apply-mdx-type-prop`
+# babel-plugin-apply-mdx-type-prop
 
-Babel plugin that applies the `mdxType` prop which is
-used by the [MDX](https://mdxjs.com) pragma.
+[![Build][build-badge]][build]
+[![Downloads][downloads-badge]][downloads]
+[![Sponsors][sponsors-badge]][opencollective]
+[![Backers][backers-badge]][opencollective]
+[![Chat][chat-badge]][chat]
 
-It also stores all components encountered as `names` in
-the plugin state.
+Create a Babel plugin to both add `mdxType` props to components and extract all
+those found named.
+Used by [MDX][].
 
-## Installation
+## Install
+
+[npm][]:
 
 ```sh
-yarn add babel-plugin-apply-mdx-type-prop
+npm install babel-plugin-apply-mdx-type-prop
 ```
 
-## Usage
+[yarn][]:
 
-```js
-const babel = require('@babel/core')
+```sh
+yarn add babel-plugin-apply-mdx-type-prop
+```
 
-const BabelPluginApplyMdxTypeProp = require('babel-plugin-apply-mdx-type-prop')
+## Use
 
-const jsx = `
+Say we have the following code in `input.jsx`:
+
+```jsx
 export const Foo = () => (
   <div>
     <Button />
@@ -32,53 +41,77 @@ export default () => (
     <TomatoBox />
   </>
 )
-`
+```
 
-const plugin = new BabelPluginApplyMdxTypeProp()
+And our script, `example.js`:
 
-const result = babel.transform(jsx, {
+```js
+const fs = require('fs')
+const babel = require('@babel/core')
+const BabelPluginApplyMdxTypeProp = require('babel-plugin-apply-mdx-type-prop')
+
+// Construct one for every file you’re processing.
+const applyMdxTypeProp = new BabelPluginApplyMdxTypeProp()
+
+const result = babel.transformSync(fs.readFileSync('./input.jsx'), {
   configFile: false,
-  plugins: ['@babel/plugin-syntax-jsx', plugin.plugin]
+  plugins: ['@babel/plugin-syntax-jsx', applyMdxTypeProp.plugin]
 })
 
 console.log(result.code)
-console.log(plugin.state.names)
+console.log(applyMdxTypeProp.state.names)
 ```
 
-### Input
+Now, running `node example` yields:
 
-```js
+```jsx
 export const Foo = () => (
   <div>
-    <Button />
+    <Button mdxType="Button" />
   </div>
 )
 
 export default () => (
   <>
     <h1>Hello!</h1>
-    <TomatoBox />
+    <TomatoBox mdxType="TomatoBox" />
   </>
 )
 ```
 
-### Output
-
 ```js
-export const Foo = () => (
-  <div>
-    <Button mdxType="Button" />
-  </div>
-)
-
-export default () => (
-  <>
-    <h1>Hello!</h1>
-    <TomatoBox mdxType="Button" />
-  </>
-)
+['Button', 'TomatoBox']
 ```
 
+## API
+
+### `BabelPluginApplyMdxTypeProp()`
+
+Constructor for an instance to transform and capture MDX types.
+
+Note that this isn’t a Babel plugin but _creates_ one.
+
+###### Returns
+
+Instance with:
+
+*   `plugin` — Plugin for Babel
+*   `state` — Object with a `names` field listing all (including duplicates)
+    found types
+
 ## License
 
 MIT
+
+[build-badge]: https://github.com/mdx-js/mdx/workflows/CI/badge.svg
+[build]: https://github.com/mdx-js/mdx/actions
+[downloads-badge]: https://img.shields.io/npm/dm/babel-plugin-apply-mdx-type-prop.svg
+[downloads]: https://www.npmjs.com/package/babel-plugin-apply-mdx-type-prop
+[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
+[backers-badge]: https://opencollective.com/unified/backers/badge.svg
+[opencollective]: https://opencollective.com/unified
+[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg
+[chat]: https://github.com/mdx-js/mdx/discussions
+[mdx]: https://mdxjs.com
+[npm]: https://docs.npmjs.com/cli/install
+[yarn]: https://yarnpkg.com/cli/add

packages/babel-plugin-apply-mdx-type-props/test/index.test.js

@@ -2,27 +2,10 @@ const babel = require('@babel/core')
 
 const BabelPluginApplyMdxTypeProp = require('..')
 
-const FIXTURE = `export const Foo = () => <div>
-  <Button />
-</div>;
-export default (() => <>
-  <h1>Hello!</h1>
-  <TomatoBox />
-</>);
-`
-
-const EXPECTED = `export const Foo = () => <div>
-  <Button mdxType="Button" />
-</div>;
-export default (() => <>
-  <h1>Hello!</h1>
-  <TomatoBox mdxType="TomatoBox" />
-</>);`
-
-const transform = str => {
+const transform = value => {
   const plugin = new BabelPluginApplyMdxTypeProp()
 
-  const result = babel.transform(str, {
+  const result = babel.transformSync(value, {
     configFile: false,
     plugins: [require('@babel/plugin-syntax-jsx'), plugin.plugin]
   })
@@ -34,15 +17,40 @@ const transform = str => {
 }
 
 describe('babel-plugin-add-mdx-type-prop', () => {
-  test('adds mdxType to custom components', () => {
-    const result = transform(FIXTURE)
+  test('should add `mdxType` to components', () => {
+    expect(transform('var d = <div><Button /></div>').code).toEqual(
+      'var d = <div><Button mdxType="Button" /></div>;'
+    )
+  })
+
+  test('should support (as in, ignore) fragments', () => {
+    expect(transform('var d = <><Button /></>').code).toEqual(
+      'var d = <><Button mdxType="Button" /></>;'
+    )
+  })
 
-    expect(result.code).toEqual(EXPECTED)
+  // To do: this should probably be handled
+  test('should *not* support dot notation (object methods)', () => {
+    expect(transform('var d = <><a.b /></>').code).toEqual(
+      'var d = <><a.b /></>;'
+    )
   })
 
-  test('adds component names to state', () => {
-    const result = transform(FIXTURE)
+  test('should track used component names in state', () => {
+    expect(transform('var d = <Button />').state.names).toEqual(['Button'])
+  })
+
+  test('should track all component names', () => {
+    expect(
+      transform('var d = <><Button /><div /><TomatoBox /></>').state.names
+    ).toEqual(['Button', 'TomatoBox'])
+  })
 
-    expect(result.state.names).toEqual(['Button', 'TomatoBox'])
+  // To do: is this useful?
+  test('should track duplicate component names', () => {
+    expect(transform('var d = <><Button /><Button /></>').state.names).toEqual([
+      'Button',
+      'Button'
+    ])
   })
 })

packages/babel-plugin-extract-export-names/index.js

@@ -23,12 +23,16 @@ class BabelPluginExtractExportNames {
           if (t.isIdentifier(declaration.id)) {
             // Export const foo = 'bar'
             names.push(declaration.id.name)
-          } else if (t.isArrayPattern(declaration.id)) {
+          }
+
+          if (t.isArrayPattern(declaration.id)) {
             // Export const [ a, b ] = []
             declaration.id.elements.forEach(decl => {
               names.push(decl.name)
             })
-          } else if (t.isObjectPattern(declaration.id)) {
+          }
+
+          if (t.isObjectPattern(declaration.id)) {
             // Export const { a, b } = {}
             declaration.id.properties.forEach(decl => {
               names.push(decl.key.name)
@@ -38,16 +42,14 @@ class BabelPluginExtractExportNames {
       }
 
       const handleSpecifiers = node => {
-        const {specifiers} = node
-
-        if (!specifiers) {
-          return
-        }
+        /* istanbul ignore next - seems to always exist, maybe for older Babel? */
+        const specifiers = node.specifiers || []
 
         specifiers.forEach(specifier => {
+          /* istanbul ignore if - Can’t seem to get coverage for this branch, something’s up. */
           if (t.isExportDefaultSpecifier(specifier)) {
             names.push(specifier.exported.name)
-          } else {
+          } else if (specifier.local) {
             names.push(specifier.local.name)
           }
         })

packages/babel-plugin-extract-export-names/package.json

@@ -25,5 +25,8 @@
   "dependencies": {
     "@babel/helper-plugin-utils": "7.10.4"
   },
+  "scripts": {
+    "test": "jest test --coverage"
+  },
   "gitHead": "bf7deab69996449cb99c2217dff75e65855eb2c1"
 }