@mdx-js/react - npm Package Compare versions

Comparing version 2.0.0-next.9 to 2.0.0-rc.1

package.json

 {
   "name": "@mdx-js/react",
-  "version": "2.0.0-next.9",
-  "description": "React implementation for MDX",
-  "repository": "mdx-js/mdx",
+  "version": "2.0.0-rc.1",
+  "description": "React context for MDX",
+  "license": "MIT",
+  "keywords": [
+    "mdx",
+    "markdown",
+    "react",
+    "jsx",
+    "remark",
+    "mdxast"
+  ],
   "homepage": "https://mdxjs.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mdx-js/mdx",
+    "directory": "packages/react"
+  },
   "bugs": "https://github.com/mdx-js/mdx/issues",
@@ -12,5 +25,5 @@ "funding": {
   },
-  "author": "John Otander <[e-mail]> (http://johnotander.com)",
+  "author": "John Otander <[e-mail]> (https://johno.com)",
   "contributors": [
-    "John Otander <[e-mail]> (http://johnotander.com)",
+    "John Otander <[e-mail]> (https://johno.com)",
     "Tim Neutkens <[e-mail]>",
@@ -22,28 +35,14 @@ "Matija Marohnić <[e-mail]>",
   ],
-  "license": "MIT",
-  "main": "dist/mdx-react.js",
-  "module": "dist/mdx-react.es.js",
-  "exports": {
-    "import": "./dist/mdx-react.modern.js",
-    "require": "./dist/mdx-react.js"
-  },
-  "types": "types/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "main": "index.js",
+  "types": "index.d.ts",
   "files": [
-    "dist",
-    "types/index.d.ts"
+    "lib/",
+    "index.d.ts",
+    "index.js"
   ],
-  "keywords": [
-    "mdx",
-    "markdown",
-    "react",
-    "jsx",
-    "remark",
-    "mdxast"
-  ],
-  "scripts": {
-    "build": "microbundle -f modern,es,cjs src/index.js",
-    "test-api": "jest test",
-    "test-coverage": "jest test --coverage",
-    "test-types": "dtslint types",
-    "test": "yarn test-coverage && yarn test-types"
+  "dependencies": {
+    "@types/mdx": "^2.0.0",
+    "@types/react": ">=16"
   },
@@ -54,7 +53,23 @@ "peerDependencies": {
   "devDependencies": {
-    "microbundle": "^0.13.0",
+    "@mdx-js/mdx": "^2.0.0-rc.1",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
-  "gitHead": "6fc71ff94c671582b4185a98f87dcdb1d18c831b"
+  "scripts": {
+    "prepack": "npm run build",
+    "build": "rimraf \"lib/**/*.d.ts\" \"test/**/*.d.ts\" \"index.d.ts\" && tsc && type-coverage",
+    "test-api": "node --no-warnings --experimental-loader=../../script/jsx-loader.js ../../node_modules/uvu/bin.js test \"\\.jsx?$\"",
+    "test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov npm run test-api",
+    "test": "npm run build && npm run test-coverage"
+  },
+  "xo": false,
+  "typeCoverage": {
+    "atLeast": 100,
+    "detail": true,
+    "strict": true,
+    "ignoreCatch": true
+  },
+  "gitHead": "bf7deab69996449cb99c2217dff75e65855eb2c1"
 }

readme.md

 # `@mdx-js/react`
 
 [![Build][build-badge]][build]
+[![Coverage][coverage-badge]][coverage]
 [![Downloads][downloads-badge]][downloads]
-[![Sponsors][sponsors-badge]][opencollective]
-[![Backers][backers-badge]][opencollective]
+[![Size][size-badge]][size]
+[![Sponsors][sponsors-badge]][collective]
+[![Backers][backers-badge]][collective]
 [![Chat][chat-badge]][chat]
 
-React renderer for [MDX][]: JSX in Markdown.
+React context for MDX.
 
+<!-- more -->
+
+## Contents
+
+*   [What is this?](#what-is-this)
+*   [When should I use this?](#when-should-i-use-this)
+*   [Install](#install)
+*   [Use](#use)
+*   [API](#api)
+    *   [`MDXProvider(props?)`](#mdxproviderprops)
+    *   [`useMDXComponents(components?)`](#usemdxcomponentscomponents)
+    *   [`MDXContext`](#mdxcontext)
+    *   [`withMDXComponents(Component)`](#withmdxcomponentscomponent)
+*   [Types](#types)
+*   [Security](#security)
+*   [Contribute](#contribute)
+*   [License](#license)
+
+## What is this?
+
+This package is a context based components provider for combining React with
+MDX.
+
+## When should I use this?
+
+This package is not needed for MDX to work with React.
+But it is nice if you enjoy context-based props passing to avoid repetition.
+This package adds support for a React context based interface to set components
+(sometimes known as *shortcodes*) by passing them to an `MDXProvider`, which
+then are used in all nested MDX files implicitly.
+The alternative is to pass those components to each MDX file.
+
 ## Install
 
+This package is [ESM only][esm]:
+Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
+
 [npm][]:
 
 ```sh
-npm install @mdx-js/react
+npm install @mdx-js/react@next
 ```
@@ -22,3 +59,3 @@
 ```sh
-yarn add @mdx-js/react
+yarn add @mdx-js/react@next
 ```
@@ -28,42 +65,109 @@
 
-Say we have the following code in `example.mdx`:
+```js
+import {MDXProvider} from '@mdx-js/react'
+import Post from './post.mdx' // Assumes an integration is used to compile MDX -> JS.
 
-```markdown
-# Hello, world! {1 + 1}
+const components = {
+  em: props => <i {...props} />
+}
+
+<MDXProvider components={components}>
+  <Post />
+</MDXProvider>
 ```
 
-And our script, `example.jsx`:
+Note that you don’t have to use `MDXProvider` and can pass components
+directly:
 
-```jsx
-import React from 'react'
-import {MDXProvider} from '@mdx-js/react'
-import {renderToString} from 'react-dom/server'
+```diff
+-<MDXProvider components={components}>
+-  <Post />
+-</MDXProvider>
++<Post components={components} />
+```
 
-import Example from './example.mdx'
+See [¶ React in § Getting started][start-react] for how to get started with MDX
+and React.
+See [¶ MDX provider in § Using MDX][use-provider] for how to use an MDX
+provider.
 
-const h1 = props => <h1 style={{color: 'tomato'}} {...props} />
+## API
 
-console.log(
-  renderToString(
-    <MDXProvider components={{h1}}>
-      <Example />
-    </MDXProvider>
-  )
-)
-```
+This package exports the following identifiers: `MDXContext`, `MDXProvider`,
+`useMDXComponents`, and `withMDXComponents`.
+There is no default export.
 
-Now, building, bundling, and finally running it, yields:
+### `MDXProvider(props?)`
 
-```html
-<h1 style="color:tomato">Hello, world! 2</h1>
-```
+Provider for MDX context.
 
-Note that you must configure whatever you use to load `.mdx` files to use `mdx`
-from `@mdx-js/react`.
-The webpack loader does this automatically.
+##### `props`
 
+Configuration (`Object`, optional).
+
+###### `props.components`
+
+Mapping of names for JSX components to React components
+(`Record<string, string|Component|Components>`, optional).
+
+###### `props.disableParentContext`
+
+Turn off outer component context (`boolean`, default: `false`).
+
+###### `props.children`
+
+Children (JSX elements, optional).
+
+##### Returns
+
+JSX element.
+
+### `useMDXComponents(components?)`
+
+Get current components from the MDX Context.
+
+###### `components`
+
+Additional components (`Components`) to use or a function that takes the current
+components and filters/merges/changes them (`(currentComponents: Components) =>
+Components`).
+
+###### Returns
+
+`Components`.
+
+### `MDXContext`
+
+> 🪦 **Deprecated**: This export is not recommended for use as it exposes
+> internals which should be hidden.
+> It might be removed in a future major release.
+> Please use `useMDXComponents` to get context based components and
+> `MDXProvider` to set context based components instead.
+
+The React Context for MDX (`React.Context`).
+
+### `withMDXComponents(Component)`
+
+> 🪦 **Deprecated**: This export is not recommended for use.
+> It might be removed in a future major release.
+> Please use `useMDXComponents` to get context based components instead.
+
+Create a HOC of `Components` which is given the current context based MDX
+components.
+
+## Types
+
+This package is fully typed with [TypeScript][].
+
+An additional `Components` type is exported, which represents the acceptable
+configuration for the functions and components from this project.
+
+## Security
+
+See [§ Security][security] on our website for information.
+
 ## Contribute
 
-See [Contributing on `mdxjs.com`][contributing] for ways to get started.
-See [Support][] for ways to get help.
+See [§ Contribute][contribute] on our website for ways to get started.
+See [§ Support][support] for ways to get help.
 
@@ -76,21 +180,52 @@ This project has a [code of conduct][coc].
 
-[MIT][] © [Compositor][] and [Vercel][]
+[MIT][] © Compositor and [Vercel][]
 
-[build-badge]: https://github.com/mdx-js/mdx/workflows/CI/badge.svg
+[build-badge]: https://github.com/mdx-js/mdx/workflows/main/badge.svg
+
 [build]: https://github.com/mdx-js/mdx/actions
+
+[coverage-badge]: https://img.shields.io/codecov/c/github/mdx-js/mdx/main.svg
+
+[coverage]: https://codecov.io/github/mdx-js/mdx
+
 [downloads-badge]: https://img.shields.io/npm/dm/@mdx-js/react.svg
+
 [downloads]: https://www.npmjs.com/package/@mdx-js/react
+
+[size-badge]: https://img.shields.io/bundlephobia/minzip/@mdx-js/react.svg
+
+[size]: https://bundlephobia.com/result?p=@mdx-js/react
+
 [sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
+
 [backers-badge]: https://opencollective.com/unified/backers/badge.svg
-[opencollective]: https://opencollective.com/unified
+
+[collective]: 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
-[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
+
+[yarn]: https://classic.yarnpkg.com/docs/cli/add/
+
+[contribute]: https://v2.mdxjs.com/community/contribute/
+
+[support]: https://v2.mdxjs.com/community/support/
+
+[coc]: https://github.com/mdx-js/.github/blob/HEAD/code-of-conduct.md
+
+[mit]: https://github.com/mdx-js/mdx/blob/main/packages/react/license
+
 [vercel]: https://vercel.com
+
+[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
+
+[start-react]: https://v2.mdxjs.com/getting-started/#react
+
+[use-provider]: https://v2.mdxjs.com/using-mdx/#mdx-provider
+
+[security]: https://v2.mdxjs.com/getting-started/#security
+
+[typescript]: https://www.typescriptlang.org

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Lines of code

153

increased by59.38%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

229

increased by143.62%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

2

decreased by-50%

Is type module

Yes

Worsened metrics

Total package byte prevSize

13959

decreased by-90.88%

Dependency count

3

increased by200%

Dev dependency count

5

increased by66.67%

Number of package files

7

decreased by-30%

Dependency changes

• + Added@types/mdx@^2.0.0

• + Added@types/react@>=16

• + Added@types/mdx@2.0.13(transitive)

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@18.3.11(transitive)

• + Addedcsstype@3.1.3(transitive)