Socket
Socket
Sign inDemoInstall

remark-mdx

Package Overview
Dependencies
Maintainers
4
Versions
125
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

remark-mdx - npm Package Compare versions

Comparing version 2.3.0 to 3.0.0

lib/index.d.ts
lib/index.js

11

index.d.ts

@@ -1,9 +0,2 @@

export default function remarkMdx(this: import("unified").Processor<void, import("mdast").Root, void, void>, ...settings: [Options | null | undefined] | []): void | import("unified").Transformer<import("mdast").Root, import("mdast").Root>;
export type Root = import('mdast').Root;
export type MicromarkOptions = import('micromark-extension-mdxjs').Options;
export type ToMarkdownOptions = import('mdast-util-mdx').ToMarkdownOptions;
export type DoNotTouchAsThisIncludesMdxInTree = typeof import("mdast-util-mdx");
/**
* Configuration.
*/
export type Options = MicromarkOptions & ToMarkdownOptions;
export { default } from "./lib/index.js";
export type Options = import('./lib/index.js').Options;

43

index.js

@@ -1,43 +0,8 @@

/**
* @typedef {import('mdast').Root} Root
* @typedef {import('micromark-extension-mdxjs').Options} MicromarkOptions
* @typedef {import('mdast-util-mdx').ToMarkdownOptions} ToMarkdownOptions
* @typedef {import('mdast-util-mdx')} DoNotTouchAsThisIncludesMdxInTree
*/
// Augment node types:
/// <reference types="mdast-util-mdx" />
/**
* @typedef {MicromarkOptions & ToMarkdownOptions} Options
* Configuration.
* @typedef {import('./lib/index.js').Options} Options
*/
import {mdxjs} from 'micromark-extension-mdxjs'
import {mdxFromMarkdown, mdxToMarkdown} from 'mdast-util-mdx'
/**
* Plugin to support MDX (import/exports: `export {x} from 'y'`; expressions:
* `{1 + 1}`; and JSX: `<Video id={123} />`).
*
* @this {import('unified').Processor}
* @type {import('unified').Plugin<[Options | null | undefined] | [], Root>}
*/
export default function remarkMdx(options) {
const data = this.data()
add('micromarkExtensions', mdxjs(options))
add('fromMarkdownExtensions', mdxFromMarkdown())
add('toMarkdownExtensions', mdxToMarkdown(options))
/**
* @param {string} field
* @param {unknown} value
*/
function add(field, value) {
const list = /** @type {Array<unknown>} */ (
// Other extensions
/* c8 ignore next 2 */
data[field] ? data[field] : (data[field] = [])
)
list.push(value)
}
}
export {default} from './lib/index.js'

59

package.json
{
"name": "remark-mdx",
"version": "2.3.0",
"version": "3.0.0",
"description": "remark plugin to support MDX syntax",
"license": "MIT",
"keywords": [
"unified",
"javascript",
"jsx",
"markdown",
"mdast",
"mdx",
"plugin",
"remark",
"remark-plugin",
"plugin",
"mdast",
"markdown",
"jsx",
"javascript",
"xml",
"mdx"
"unified",
"xml"
],

@@ -22,3 +22,3 @@ "homepage": "https://mdxjs.com",

"url": "https://github.com/mdx-js/mdx",
"directory": "packages/remark-mdx"
"directory": "packages/remark-mdx/"
},

@@ -37,5 +37,5 @@ "bugs": "https://github.com/mdx-js/mdx/issues",

"sideEffects": false,
"main": "index.js",
"types": "index.d.ts",
"exports": "./index.js",
"files": [
"lib/",
"index.d.ts",

@@ -45,28 +45,17 @@ "index.js"

"dependencies": {
"mdast-util-mdx": "^2.0.0",
"micromark-extension-mdxjs": "^1.0.0"
"mdast-util-mdx": "^3.0.0",
"micromark-extension-mdxjs": "^3.0.0"
},
"devDependencies": {
"remark-parse": "^10.0.0",
"remark-stringify": "^10.0.0",
"unified": "^10.0.0",
"unist-builder": "^3.0.0",
"unist-util-remove-position": "^4.0.0",
"unist-util-visit": "^4.0.0"
},
"devDependencies": {},
"scripts": {
"prepack": "npm run build",
"build": "tsc --build --clean && tsc --build && type-coverage",
"test-api": "uvu test \"\\.jsx?$\"",
"test-coverage": "c8 --check-coverage --100 --reporter lcov npm run test-api",
"test": "npm run build && npm run test-coverage"
"test": "npm run test-coverage",
"test-api": "node --conditions development test/index.js",
"test-coverage": "c8 --100 --reporter lcov npm run test-api"
},
"xo": false,
"typeCoverage": {
"atLeast": 100,
"detail": true,
"strict": true,
"ignoreCatch": true
},
"gitHead": "bf7deab69996449cb99c2217dff75e65855eb2c1"
"xo": {
"prettier": true,
"rules": {
"n/file-extension-in-import": "off"
}
}
}

255

readme.md

@@ -11,3 +11,3 @@ # remark-mdx

remark plugin to support the MDX syntax (JSX, expressions, import/exports).
remark plugin to support the MDX syntax (JSX, export/import, expressions).

@@ -18,19 +18,31 @@ <!-- more -->

* [What is this?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Install](#install)
* [Use](#use)
* [API](#api)
* [`unified().use(remarkMdx)`](#unifieduseremarkmdx)
* [Syntax](#syntax)
* [Syntax tree](#syntax-tree)
* [Types](#types)
* [Security](#security)
* [Contribute](#contribute)
* [License](#license)
* [What is this?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Install](#install)
* [Use](#use)
* [API](#api)
* [`unified().use(remarkMdx[, options])`](#unifieduseremarkmdx-options)
* [`Options`](#options)
* [Authoring](#authoring)
* [HTML](#html)
* [Syntax](#syntax)
* [Syntax tree](#syntax-tree)
* [Errors](#errors)
* [Types](#types)
* [Compatibility](#compatibility)
* [Security](#security)
* [Contribute](#contribute)
* [License](#license)
## What is this?
This package is a remark plugin to support the MDX syntax.
This package is a [unified][] ([remark][]) plugin to enable the extensions to
markdown that MDX adds: JSX (`<x/>`), export/import (`export x from 'y'`), and
expression {`{1 + 1}`}.
You can use this plugin to add support for parsing and serializing them.
This plugin does not handle how MDX is compiled to JavaScript or evaluated and
rendered to HTML.
That’s done by [`@mdx-js/mdx`][mdx].
## When should I use this?

@@ -43,11 +55,5 @@

**remark** is an AST (abstract syntax tree) based transform project.
The layer under remark is called mdast, which is just the syntax tree without
the convention on how to transform.
mdast is useful when transforming to other formats.
Another layer underneath is micromark, which is just the parser and has support
for concrete tokens.
micromark is useful for linting and formatting.
`remark-mdx` is a small wrapper to integrate all of these.
Its parts can be used separately.
If you don’t use plugins and want to access the syntax tree, you can use
[`mdast-util-from-markdown`][mdast-util-from-markdown] with
[`mdast-util-mdx`][mdast-util-mdx].

@@ -57,14 +63,11 @@ Typically though, you’d want to move a layer up: `@mdx-js/mdx`.

gives you the most control.
Or even higher: if you’re using a bundler (webpack, Rollup, esbuild), or a site
builder (Gatsby, Next.js) or build system (Vite, WMR) which comes with a
bundler, you’re better off using an integration: see
[§ Integrations][integrations].
Or even higher: if you’re using a bundler (Rollup, esbuild, webpack), or a site
builder (Next.js) or build system (Vite) which comes with a bundler, you’re
better off using an integration: see [§ Integrations][integrations].
## Install
This package is [ESM only][esm]:
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
This package is [ESM only][esm].
In Node.js (version 16+), install with [npm][]:
[npm][]:
```sh

@@ -74,17 +77,25 @@ npm install remark-mdx

[yarn][]:
In Deno with [`esm.sh`][esmsh]:
```sh
yarn add remark-mdx
```tsx
import remarkMdx from 'https://esm.sh/remark-mdx@2'
```
In browsers with [`esm.sh`][esmsh]:
```html
<script type="module">
import remarkMdx from 'https://esm.sh/remark-mdx@2?bundle'
</script>
```
## Use
```js
```tsx
import {remark} from 'remark'
import remarkMdx from 'remark-mdx'
const file = remark()
const file = await remark()
.use(remarkMdx)
.processSync('import a from "b"\n\na <b /> c {1 + 1} d')
.process('import a from "b"\n\na <b /> c {1 + 1} d')

@@ -105,56 +116,111 @@ console.log(String(file))

This package exports no identifiers.
The default export is `remarkMdx`.
The default export is [`remarkMdx`][api-remark-mdx].
### `unified().use(remarkMdx)`
### `unified().use(remarkMdx[, options])`
Configures remark so that it can parse and serialize MDX (JSX, expressions,
import/exports).
It doesn’t do anything with the syntax: you can
[create your own plugin][create-plugin] to transform them.
Add support for MDX (JSX: `<Video id={123} />`, export/imports: `export {x}
from 'y'`; and expressions: `{1 + 1}`).
###### Parameters
* `options` ([`Options`][api-options], optional)
— configuration
###### Returns
Nothing (`undefined`).
### `Options`
Configuration (TypeScript type).
###### Fields
* `acornOptions` ([`AcornOptions`][acorn-options], default:
`{ecmaVersion: 2024, locations: true, sourceType: 'module'}`)
— configuration for acorn; all fields except `locations` can be set
* `printWidth` (`number`, default: `Infinity`)
— try and wrap syntax at this width;
when set to a finite number (say, `80`), the formatter will print
attributes on separate lines when a tag doesn’t fit on one line;
the normal behavior is to print attributes with spaces between them instead
of line endings
* `quote` (`'"'` or `"'"`, default: `'"'`)
— preferred quote to use around attribute values
* `quoteSmart` (`boolean`, default: `false`)
— use the other quote if that results in less bytes
* `tightSelfClosing` (`boolean`, default: `false`)
— do not use an extra space when closing self-closing elements: `<img/>`
instead of `<img />`
<!-- Note: `acorn`, `addResult`, `allowEmpty`, and `spread` are intentionally not documented. -->
## Authoring
For recommendations on how to author MDX, see each corresponding readme:
* [ESM](https://github.com/micromark/micromark-extension-mdxjs-esm#authoring)
* [JSX](https://github.com/micromark/micromark-extension-mdx-jsx#authoring)
* [expressions](https://github.com/micromark/micromark-extension-mdx-expression/tree/main/packages/micromark-extension-mdx-expression#authoring)
* [CommonMark features not in MDX](https://github.com/micromark/micromark-extension-mdx-md#authoring)
## HTML
MDX has no representation in HTML.
Though, when you are dealing with MDX, you will likely go *through* hast.
You can enable passing MDX through to hast by configuring
[`remark-rehype`][remark-rehype] with `passThrough: ['mdxjsEsm',
'mdxFlowExpression', 'mdxJsxFlowElement', 'mdxJsxTextElement', 'mdxTextExpression']`.
## Syntax
This plugin applies several micromark extensions to parse the syntax.
See their readmes for parse details:
For info on the syntax of these features, see each corresponding readme:
* [`micromark-extension-mdx-expression`](https://github.com/micromark/micromark-extension-mdx-expression#syntax)
— expressions (`{1 + 1}`)
* [`micromark-extension-mdx-jsx`](https://github.com/micromark/micromark-extension-mdx-jsx#syntax)
— JSX (`<div />`)
* [`micromark-extension-mdxjs-esm`](https://github.com/micromark/micromark-extension-mdxjs-esm#syntax)
— ESM (`export x from 'y'`)
* [`micromark-extension-mdx-md`](https://github.com/micromark/micromark-extension-mdx-md#mdxmd)
— Turn off HTML, autolinks, and indented code
* [ESM](https://github.com/micromark/micromark-extension-mdxjs-esm#syntax)
* [JSX](https://github.com/micromark/micromark-extension-mdx-jsx#syntax)
* [expressions](https://github.com/micromark/micromark-extension-mdx-expression/tree/main/packages/micromark-extension-mdx-expression#syntax)
* CommonMark features not in MDX: n/a
## Syntax tree
This plugin applies several mdast utilities to build and serialize the AST.
See their readmes for the node types supported in the tree:
For info on the syntax tree of these features, see each corresponding readme:
* [`mdast-util-mdx-expression`](https://github.com/syntax-tree/mdast-util-mdx-expression#syntax-tree)
— expressions (`{1 + 1}`)
* [`mdast-util-mdx-jsx`](https://github.com/syntax-tree/mdast-util-mdx-jsx#syntax-tree)
— JSX (`<div />`)
* [`mdast-util-mdxjs-esm`](https://github.com/syntax-tree/mdast-util-mdxjs-esm#syntax-tree)
— ESM (`export x from 'y'`)
* [ESM](https://github.com/syntax-tree/mdast-util-mdxjs-esm#syntax-tree)
* [JSX](https://github.com/syntax-tree/mdast-util-mdx-jsx#syntax-tree)
* [expressions](https://github.com/syntax-tree/mdast-util-mdx-expression#syntax-tree)
* CommonMark features not in MDX: n/a
## Errors
For info on what errors are thrown, see each corresponding readme:
* [ESM](https://github.com/micromark/micromark-extension-mdxjs-esm#errors)
* [JSX](https://github.com/micromark/micromark-extension-mdx-jsx#errors)
* [expressions](https://github.com/micromark/micromark-extension-mdx-expression/tree/main/packages/micromark-extension-mdx-expression#errors)
* CommonMark features not in MDX: n/a
## Types
This package is fully typed with [TypeScript][].
It exports the additional type [`Options`][api-options].
If you’re working with the syntax tree, make sure to import this plugin
somewhere in your types, as that registers the new node types in the tree.
If you’re working with the syntax tree, you can register the new node types
with `@types/mdast` by adding a reference:
```js
/**
* @typedef {import('remark-mdx')}
*/
```tsx
// Register MDX nodes in mdast:
/// <reference types="remark-mdx" />
import {visit} from 'unist-util-visit'
export default function myRemarkPlugin() => {
/** @param {import('@types/mdast').Root} tree */
return (tree) => {
visit(tree, (node) => {
// `node` can now be one of the nodes for JSX, expressions, or ESM.
function myRemarkPlugin() {
/**
* @param {import('mdast').Root} tree
* Tree.
* @returns {undefined}
* Nothing.
*/
return function (tree) {
visit(tree, function (node) {
console.log(node) // `node` can now be one of the MDX nodes.
})

@@ -165,19 +231,12 @@ }

Alternatively, in TypeScript, do:
## Compatibility
```ts
/// <reference types="remark-mdx" />
Projects maintained by the unified collective are compatible with maintained
versions of Node.js.
import type {Root} from '@types/mdast'
import {visit} from 'unist-util-visit'
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, `remark-mdx@^3`, compatible
with Node.js 16.
export default function myRemarkPlugin() => {
return (tree: Root) => {
visit(tree, (node) => {
// `node` can now be one of the nodes for JSX, expressions, or ESM.
})
}
}
```
## Security

@@ -228,4 +287,2 @@

[yarn]: https://classic.yarnpkg.com/docs/cli/add/
[contribute]: https://mdxjs.com/community/contribute/

@@ -241,4 +298,2 @@

[create-plugin]: https://unifiedjs.com/learn/guide/create-a-plugin/
[integrations]: https://mdxjs.com/getting-started/#integrations

@@ -248,4 +303,24 @@

[esmsh]: https://esm.sh
[security]: https://mdxjs.com/getting-started/#security
[typescript]: https://www.typescriptlang.org
[unified]: https://github.com/unifiedjs/unified
[remark]: https://github.com/remarkjs/remark
[remark-rehype]: https://github.com/remarkjs/remark-rehype
[mdast-util-from-markdown]: https://github.com/syntax-tree/mdast-util-from-markdown
[mdast-util-mdx]: https://github.com/syntax-tree/mdast-util-mdx
[mdx]: https://mdxjs.com/packages/mdx/
[acorn-options]: https://github.com/acornjs/acorn/blob/520547b/acorn/src/acorn.d.ts#L578
[api-options]: #options
[api-remark-mdx]: #unifieduseremarkmdx-options
license

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc