From ff105a47602b6d92a481ab54b3167a6d1597c98d Mon Sep 17 00:00:00 2001 From: Titus Wormer Date: Mon, 16 Nov 2020 15:32:16 +0100 Subject: [PATCH 1/6] Fix Vue, test and document rest MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update readmes * Fix code style * Add 100% coverage to renderers, babel plugins, loaders, runtime * Add todos inline for potentially broken things * Fix Vue to have tests, support properties, support Vue components * Lock Yarn because latest is broken * Soft deprecate `@mdx-js/util`, `@mdx-js/test-util`, `babel-plugin-html-attributes-to-jsx`: their contents weren’t used or not reused * Set up tests in each package, to allow for different test methods (e.g., vue) * Largely not touching code --- .eslintignore | 3 +- .gitignore | 1 + .yarnrc | 5 + docs/advanced/typescript.mdx | 5 +- package.json | 11 +- .../index.js | 3 +- .../package.json | 6 +- .../readme.md | 103 ++++-- .../test/index.test.js | 58 ++-- .../index.js | 18 +- .../package.json | 3 + .../readme.md | 83 ++++- .../test/index.test.js | 168 ++++++--- .../package.json | 3 + .../readme.md | 83 ++++- .../test/index.test.js | 60 +++- .../index.js | 7 +- .../package.json | 2 +- .../readme.md | 82 ++--- .../package.json | 3 + .../readme.md | 75 ++-- .../test/index.test.js | 98 ++++-- packages/create-mdx/readme.md | 33 +- packages/loader/.babelrc | 12 + packages/loader/index.js | 6 +- packages/loader/package.json | 4 +- packages/loader/readme.md | 113 +++--- .../loader/test/{fixture.md => fixture.mdx} | 0 packages/loader/test/index.test.js | 134 +++++--- packages/mdx/mdx-hast-to-jsx.js | 14 +- packages/mdx/package.json | 8 +- packages/mdx/test/index.test.js | 10 +- packages/mdx/test/render.test.js | 33 +- packages/mdx/util.js | 3 - packages/parcel-plugin-mdx/readme.md | 42 +-- packages/preact/package.json | 3 +- packages/preact/readme.md | 83 +++-- packages/preact/src/context.js | 3 +- packages/preact/src/create-element.js | 2 + packages/preact/test/fixture.js | 19 - packages/preact/test/sandbox-fixture.js | 14 - packages/preact/test/test.js | 317 +++++++++++------ packages/react/package.json | 4 +- packages/react/readme.md | 77 +++-- packages/react/src/create-element.js | 2 + packages/react/test/fixture.js | 18 - packages/react/test/sandbox-fixture.js | 14 - packages/react/test/test.js | 324 ++++++++++++------ .../remark-mdx-remove-exports/package.json | 4 +- .../remark-mdx-remove-imports/package.json | 4 +- packages/remark-mdx/.prettierignore | 2 + packages/remark-mdx/lib/serialize/link.js | 4 - .../remark-mdx/lib/serialize/mdx-element.js | 7 +- packages/remark-mdx/package.json | 18 +- packages/remark-mdx/test/index.js | 22 ++ packages/remark-mdxjs/index.js | 7 +- packages/remark-mdxjs/package.json | 6 +- packages/runtime/package.json | 4 +- packages/runtime/readme.md | 82 +++-- packages/runtime/src/index.js | 30 +- packages/runtime/test/index.test.js | 117 ++++--- packages/test-util/index.js | 49 --- packages/test-util/package.json | 5 +- packages/test-util/readme.md | 4 +- packages/test-util/types/index.d.ts | 12 - .../test-util/types/mdx-js-test-util-test.tsx | 7 - packages/util/index.js | 51 --- packages/util/package.json | 5 +- packages/util/readme.md | 8 +- packages/util/test/test.js | 66 +--- packages/util/types/index.d.ts | 11 - packages/util/types/mdx-js-util-test.ts | 23 -- packages/vue-loader/index.js | 47 +-- packages/vue-loader/package.json | 12 +- packages/vue-loader/readme.md | 93 ++--- .../test/{fixture.md => fixture.mdx} | 0 packages/vue-loader/test/test.js | 91 +++-- packages/vue/package.json | 12 +- packages/vue/readme.md | 96 +++--- packages/vue/src/create-element.js | 110 +++--- packages/vue/src/index.js | 4 +- packages/vue/src/mdx-provider.js | 22 +- packages/vue/test/mdx-components.js | 57 --- packages/vue/test/mdx-provider.test.js | 36 -- packages/vue/test/test.js | 190 ++++++++++ yarn.lock | 86 ++--- 86 files changed, 2132 insertions(+), 1444 deletions(-) create mode 100644 packages/loader/.babelrc rename packages/loader/test/{fixture.md => fixture.mdx} (100%) delete mode 100644 packages/mdx/util.js delete mode 100644 packages/preact/test/fixture.js delete mode 100644 packages/preact/test/sandbox-fixture.js delete mode 100644 packages/react/test/fixture.js delete mode 100644 packages/react/test/sandbox-fixture.js rename packages/vue-loader/test/{fixture.md => fixture.mdx} (100%) delete mode 100644 packages/vue/test/mdx-components.js delete mode 100644 packages/vue/test/mdx-provider.test.js create mode 100644 packages/vue/test/test.js diff --git a/.eslintignore b/.eslintignore index 0d5c2eb11..1db0b3e31 100644 --- a/.eslintignore +++ b/.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 diff --git a/.gitignore b/.gitignore index cfbb353f7..a5f875ef6 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ public .npmrc .nyc_output/ coverage/ +.yarn diff --git a/.yarnrc b/.yarnrc index 123ac74a0..1797a01bc 100644 --- a/.yarnrc +++ b/.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" diff --git a/docs/advanced/typescript.mdx b/docs/advanced/typescript.mdx index 091f67bd5..5a158f1bf 100644 --- a/docs/advanced/typescript.mdx +++ b/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,7 +25,7 @@ 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 /// @@ -34,7 +33,7 @@ Add an _mdx.d.ts_ file with the below content, and ensure it is included by the ### 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 /// diff --git a/package.json b/package.json index 20593a15b..acd669f05 100644 --- a/package.json +++ b/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", diff --git a/packages/babel-plugin-apply-mdx-type-props/index.js b/packages/babel-plugin-apply-mdx-type-props/index.js index d4fe24307..ab549dd48 100644 --- a/packages/babel-plugin-apply-mdx-type-props/index.js +++ b/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() { diff --git a/packages/babel-plugin-apply-mdx-type-props/package.json b/packages/babel-plugin-apply-mdx-type-props/package.json index 0bd3a3d4c..91ab7100b 100644 --- a/packages/babel-plugin-apply-mdx-type-props/package.json +++ b/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" } diff --git a/packages/babel-plugin-apply-mdx-type-props/readme.md b/packages/babel-plugin-apply-mdx-type-props/readme.md index 645c3e2bb..a60e7dbb1 100644 --- a/packages/babel-plugin-apply-mdx-type-props/readme.md +++ b/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 = () => (
) export default () => ( <>

Hello!

- + ) ``` -### Output - ```js -export const Foo = () => ( -
-
-) - -export default () => ( - <> -

Hello!

- - -) +['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 diff --git a/packages/babel-plugin-apply-mdx-type-props/test/index.test.js b/packages/babel-plugin-apply-mdx-type-props/test/index.test.js index 40881e4c9..97ff81498 100644 --- a/packages/babel-plugin-apply-mdx-type-props/test/index.test.js +++ b/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 = () =>
-
; -export default (() => <> -

Hello!

- -); -` - -const EXPECTED = `export const Foo = () =>
-
; -export default (() => <> -

Hello!

- -);` - -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 =
').code).toEqual( + 'var d =
;' + ) + }) + + test('should support (as in, ignore) fragments', () => { + expect(transform('var d = <>