The input is MDX (serialized markdown with embedded JSX, ESM, and expressions). transform hast to esast (JS syntax tree).transform through rehype (HTML ecosystem).transform mdast to hast (HTML syntax tree).transform through remark (markdown ecosystem).parse MDX (serialized markdown with embedded JSX, ESM, and expressions) to mdast (markdown syntax tree).To understand what this project does, it’s very important to first understand what unified does: please read through the unifiedjs/unified readme (the part until you hit the API section is required is a unified pipeline - wrapped so that most folks don’t need to know about unified: core.js#L65. See § Types on our website for information.Īdditional CompileOptions, EvaluateOptions, and ProcessorOptions types are exported, which represents acceptable configuration for their respective methods. This package is fully typed with TypeScript. Note that format: 'detect' does not work here: only 'md' or 'mdx' are allowed (and 'mdx' is the default). Has the same options as compile, but returns a configured processor. createProcessor(options)Ĭreate a unified processor to compile MDX to JS. They come from an automatic JSX runtime that you must import yourself. These options are required: Fragment always, when development: true then jsx and jsxs, when development: false then jsxDEV. outputFormat is set to function-body options.jsx options.jsxs options.jsxDEV options.Fragment.jsx* and pragma* options are replaced by Fragment, jsx, jsxs, and jsxDEV.providerImportSource is replaced by useMDXComponents.Most options are the same as compile, with the following exceptions: ☢️ Danger: you likely must set development: boolean. They can be compiled to dynamic import() by passing eDynamicImport. Typically, import (or export … from) do not work here. But if you trust your content, evaluate can work. When possible, please use compile, write to a file, and then run with Node, or use one of the § Integrations. ☢️ Danger: It’s called evaluate because it evals JavaScript.Ĭompile and run MDX. When possible please use the async compile. Plain text 1:16-1:27 warning Emphasis should use `*` as a marker emphasis-marker remark-lintĬompile MDX to JS. Promise - Promise that resolves to the compiled JS as a vfile. This casing is used for hast elements, not for embedded MDX JSX nodes (components that someone authored manually). Specify casing to use for property names in style objects ( 'css' | 'dom, default: 'dom'). Specify casing to use for attribute names ( 'html' | 'react, default: 'react'). To illustrate with an example: when pragma is 'a.b' and pragmaImportSource is 'c' this following will be generated: import a from 'c'. When in the classic runtime, this is used to import the pragma function. Where to import the identifier of pragma from ( string?, default: 'react'). When in the classic runtime, this is used as an identifier for fragments: to React.createElement(React.Fragment). Pragma for JSX fragments ( string?, default: 'React.Fragment'). If file is the contents of example.mdx from § Use, then:ĭiff -/* classic React.createElement React.Fragment */ -import React from 'react' +/* classic preact.createElement preact.Fragment */ +import preact from 'preact/compat' -export const Thing = () => React.createElement(React.Fragment, null, 'World!') +export const Thing = () => preact.createElement(preact.Fragment, null, 'World!') The classic runtime compiles to calls such as h('p'), the automatic runtime compiles to import _jsx from '$importSource/jsx-runtime'\n_jsx('p'). JSX runtime to use ( 'automatic' | 'classic', default: 'automatic'). JavaScript /* automatic react */ import )) + ?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |