@mdx-js/react - npm Package Compare versions

Comparing version 2.0.0-next.8 to 2.0.0-next.9

package.json

 {
   "name": "@mdx-js/react",
-  "version": "2.0.0-next.8",
+  "version": "2.0.0-next.9",
   "description": "React implementation for MDX",
@@ -22,4 +22,8 @@ "repository": "mdx-js/mdx",
   "license": "MIT",
-  "main": "dist/cjs.js",
-  "module": "dist/esm.js",
+  "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",
@@ -39,8 +43,17 @@ "files": [
   "scripts": {
-    "test-types": "dtslint types"
+    "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"
   },
   "peerDependencies": {
-    "react": "^16.13.1"
+    "react": ">=16"
   },
-  "gitHead": "e194fc1a61715549be10d56055ea4ad25533fcb1"
+  "devDependencies": {
+    "microbundle": "^0.13.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "gitHead": "6fc71ff94c671582b4185a98f87dcdb1d18c831b"
 }

readme.md

 # `@mdx-js/react`
 
-[![Build Status][build-badge]][build]
-[![lerna][lerna-badge]][lerna]
-[![Join the community on Spectrum][spectrum-badge]][spectrum]
+[![Build][build-badge]][build]
+[![Downloads][downloads-badge]][downloads]
+[![Sponsors][sponsors-badge]][opencollective]
+[![Backers][backers-badge]][opencollective]
+[![Chat][chat-badge]][chat]
 
-Map components to HTML elements based on the Markdown syntax.
-Serves as the React implementation for [MDX][].
+React renderer for [MDX][]: JSX in Markdown.
 
-## Installation
+## Install
 
@@ -15,13 +16,21 @@ [npm][]:
 ```sh
-npm install --save @mdx-js/react
+npm install @mdx-js/react
 ```
 
-## Usage
+[yarn][]:
 
-```md
-<!-- helloworld.md -->
+```sh
+yarn add @mdx-js/react
+```
 
-# Hello, World!
+## Use
+
+Say we have the following code in `example.mdx`:
+
+```markdown
+# Hello, world! {1 + 1}
 ```
 
+And our script, `example.jsx`:
+
 ```jsx
@@ -32,10 +41,10 @@ import React from 'react'
 
-import HelloWorld from './helloworld.md'
+import Example from './example.mdx'
 
-const H1 = props => <h1 style={{color: 'tomato'}} {...props} />
+const h1 = props => <h1 style={{color: 'tomato'}} {...props} />
 
 console.log(
   renderToString(
-    <MDXProvider components={{h1: H1}}>
-      <HelloWorld />
+    <MDXProvider components={{h1}}>
+      <Example />
     </MDXProvider>
@@ -46,15 +55,19 @@ )
 
-Yields:
+Now, building, bundling, and finally running it, yields:
 
 ```html
-<h1 style="color:tomato">Hello, world!</h1>
+<h1 style="color:tomato">Hello, world! 2</h1>
 ```
 
+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.
+
 ## Contribute
 
-See the [Support][] and [Contributing][] guidelines on the MDX website for ways
-to (get) help.
+See [Contributing on `mdxjs.com`][contributing] for ways to get started.
+See [Support][] for ways to get help.
 
-This project has a [Code of Conduct][coc].
-By interacting with this repository, organisation, or community you agree to
+This project has a [code of conduct][coc].
+By interacting with this repository, organization, or community you agree to
 abide by its terms.
@@ -66,8 +79,14 @@
 
-[build]: https://travis-ci.com/mdx-js/mdx
-[build-badge]: https://travis-ci.com/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
+[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/@mdx-js/react.svg
+[downloads]: https://www.npmjs.com/package/@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
+[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
@@ -79,3 +98,1 @@ [support]: https://mdxjs.com/support
 [vercel]: https://vercel.com
-[mdx]: https://github.com/mdx-js/mdx
-[npm]: https://docs.npmjs.com/cli/install

types/index.d.ts

@@ -1,77 +0,2 @@
-// TypeScript Version: 3.4
-
-import {
-  Context,
-  Consumer,
-  ComponentType,
-  FunctionComponent,
-  ReactElement,
-  createElement
-} from 'react'
-
-/**
- * Mapping of names for JSX components to React components
- */
-interface ComponentDictionary {
-  [name: string]: ComponentType<any>
-}
-
-/**
- * Prop type that includes a component dictionary
- */
-interface ComponentsProp {
-  /**
-   * Mapping of names for JSX components to React components
-   */
-  components?: ComponentDictionary,
-  /**
-   * Turn off outer component context
-   *
-   * @defaultValue false
-   */
-  disableParentContext?: boolean
-}
-
-/**
- * Direct access to the MDX React Context
- */
-declare const MDXContext: Context<ComponentsProp>
-
-/**
- * Provider for MDX context
- */
-declare const MDXProvider: FunctionComponent<ComponentsProp>
-
-/**
- * Gets components from the MDX Context
- *
- * @param components additional components to include
- * @returns all components from context with overrides from components parameter
- */
-declare function useMDXComponents(
-  components: ComponentDictionary | (() => ComponentDictionary)
-): ComponentDictionary
-
-/**
- * High order component that passes components prop to child
- *
- * @param child Component being wrapped
- */
-declare function withMDXComponents(
-  child: ComponentType<ComponentsProp>
-): ReactElement | null
-
-/**
- * React createElement function wrapped with handler for MDX content
- */
-declare const mdx: typeof createElement
-
-export {
-  ComponentDictionary,
-  ComponentsProp,
-  MDXContext,
-  MDXProvider,
-  useMDXComponents,
-  withMDXComponents,
-  mdx
-}
+export { default as mdx } from "./create-element";
+export { default as MDXContext, MDXProvider, useMDXComponents, withMDXComponents } from "./context";

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

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

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

Improved metrics

Total package byte prevSize

152977

increased by788.47%

Number of package files

10

increased by66.67%

Number of lines in readme file

94

increased by22.08%

Worsened metrics

Dev dependency count

3

increased byInfinity%

Lines of code

96

decreased by-76.53%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

4

increased byInfinity%

No dependency changes