Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
micromark-extension-mdxjs-esm
Advanced tools
micromark extension to support MDX JS import/exports
The micromark-extension-mdxjs-esm package is an extension for the micromark Markdown parser that adds support for parsing MDX.js (Markdown for the component era). It allows users to use JSX within their Markdown documents, enabling the embedding of React components and other JSX elements.
Parsing MDX syntax
This feature allows the parsing of MDX syntax within Markdown content. The code sample demonstrates how to use the micromark parser with the mdxjs extension to parse a string containing an MDX component.
import {micromark} from 'micromark';
import {mdxjs} from 'micromark-extension-mdxjs-esm';
const output = micromark('<MyComponent />', {
extensions: [mdxjs()]
});
Support for JSX
This feature enables the use of JSX within Markdown documents. The code sample shows how to parse a Markdown string that includes a JSX component with a prop.
import {micromark} from 'micromark';
import {mdxjs} from 'micromark-extension-mdxjs-esm';
const output = micromark('# Hello, world!\n\n<MyComponent prop1={value} />', {
extensions: [mdxjs()]
});
remark-mdx is a plugin for the remark Markdown processor that adds support for MDX. It is similar to micromark-extension-mdxjs-esm in that it allows for MDX syntax in Markdown files, but it is built on top of the remark ecosystem.
unified is an interface for parsing, transforming, and serializing content through syntax trees and is often used with remark and rehype plugins. While not specific to MDX, it can be used in conjunction with other plugins to achieve similar functionality to micromark-extension-mdxjs-esm.
micromark extension to support MDX ESM (import x from 'y'
).
This package contains an extension that adds support for the ESM syntax enabled
by MDX to micromark
.
These extensions are used inside MDX.
It matches how imports and exports work in JavaScript through acorn.
This package is aware of JavaScript syntax.
This project is useful when you want to support ESM in markdown.
You can use this extension when you are working with micromark
.
To support all MDX features, use
micromark-extension-mdxjs
instead.
When you need a syntax tree, combine this package with
mdast-util-mdxjs-esm
.
All these packages are used in remark-mdx
, which focusses on
making it easier to transform content by abstracting these internals away.
When you are using mdx-js/mdx
, all of this is already included.
This package is ESM only. In Node.js (version 16+), install with npm:
npm install micromark-extension-mdxjs-esm
In Deno with esm.sh
:
import {mdxjsEsm} from 'https://esm.sh/micromark-extension-mdxjs-esm@2'
In browsers with esm.sh
:
<script type="module">
import {mdxjsEsm} from 'https://esm.sh/micromark-extension-mdxjs-esm@2?bundle'
</script>
import {Parser} from 'acorn'
import acornJsx from 'acorn-jsx'
import {micromark} from 'micromark'
import {mdxjsEsm} from 'micromark-extension-mdxjs-esm'
const acorn = Parser.extend(acornJsx())
const output = micromark('import a from "b"\n\n# c', {
extensions: [mdxjsEsm({acorn})]
})
console.log(output)
Yields:
<h1>c</h1>
…which is useless: go to a syntax tree with
mdast-util-from-markdown
and
mdast-util-mdxjs-esm
instead.
This package exports the identifier mdxjsEsm
.
There is no default export.
The export map supports the development
condition.
Run node --conditions development module.js
to get instrumented dev code.
Without this condition, production code is loaded.
mdxjsEsm(options)
Create an extension for micromark
to enable MDX ESM syntax.
options
(Options
, required)
— configurationExtension for micromark
that can be passed in extensions
to enable MDX
ESM syntax (Extension
).
Options
Configuration (TypeScript type).
acorn
(Acorn
, required)
— acorn parser to useacornOptions
(AcornOptions
, default:
{ecmaVersion: 2024, locations: true, sourceType: 'module'}
)
— configuration for acorn; all fields except locations
can be setaddResult
(boolean
, default: false
)
— whether to add estree
fields to tokens with results from acornWhen authoring markdown with ESM, make sure to follow export and import statements with blank lines before more markdown.
All valid imports and exports are supported, depending on what the given acorn instance and configuration supports.
When the lowercase strings export
or import
are found, followed by a space,
we expect JavaScript.
Otherwise, like normal in markdown, we exit and it’ll end up as a paragraph.
We continue parsing until we find a blank line.
At that point, we parse with acorn: it if parses, we found our block.
Otherwise, if parsing failed at the last character, we assume it’s a blank line
in code: we continue on until the next blank line and try again.
Otherwise, the acorn error is thrown.
Some examples of valid export and import statements:
import a from 'b'
import * as a from 'b'
import {a} from 'b'
import {a as b} from 'c'
import a, {b as c} from 'd'
import a, * as b from 'c'
import 'a'
export var a = ''
export const a = ''
export let a = ''
export var a, b
export var a = 'a', b = 'b'
export function a() {}
export class a {}
export var {a} = {}
export var {a: b} = {}
export var [a] = []
export default a = 1
export default function a() {}
export default class a {}
export * from 'a'
export * as a from 'b'
export {a} from 'b'
export {a as b} from 'c'
export {default} from 'b'
export {default as a, b} from 'c'
{/* Blank lines are supported in expressions: */}
export function a() {
return 'b'
}
{/* A blank line must be used after import/exports: this is incorrect! */}
import a from 'b'
## Hello, world!
ESM forms with the following BNF:
; Restriction: the entire construct must be valid JavaScript.
mdx_esm ::= word ' ' *line *(eol *line)
word ::= 'e' 'x' 'p' 'o' 'r' 't' | 'i' 'm' 'p' 'o' 'r' 't'
This construct must be followed by a blank line or eof (end of file).
This error occurs if acorn crashes (source: micromark-extension-mdxjs-esm
,
rule id: acorn
).
For example:
import 1/1
$type
in code: only import/exports are supportedThis error occurs when a non-ESM construct is found (source:
micromark-extension-mdxjs-esm
, rule id: non-esm
).
For example:
export var a = 1
var b
An mdxjsEsm
token is used to reflect the block of import/exports in markdown.
It includes:
lineEnding
for the \r
, \n
, and \r\n
lineEndingBlank
for the same characters but when after potential
whitespace and another line endingwhitespace
for markdown spaces and tabs in blank linesmdxjsEsmData
for any character in a line of mdxjsEsm
This package is fully typed with TypeScript.
It exports the additional type Options
.
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
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,
micromark-extension-mdxjs-esm@^2
, compatible with Node.js 16.
This package works with micromark
version 3
and later.
This package is safe.
micromark-extension-mdxjs
— support all MDX syntaxmdast-util-mdxjs-esm
— support MDX ESM in mdastremark-mdx
— support all MDX syntax in remarkSee contributing.md
in micromark/.github
for ways to get
started.
See support.md
for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
FAQs
micromark extension to support MDX JS import/exports
The npm package micromark-extension-mdxjs-esm receives a total of 858,766 weekly downloads. As such, micromark-extension-mdxjs-esm popularity was classified as popular.
We found that micromark-extension-mdxjs-esm demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.