Repository: mdx-js/mdx Branch: main Commit: 579f20e1943b Files: 167 Total size: 689.2 KB Directory structure: gitextract_mjw34tia/ ├── .editorconfig ├── .github/ │ └── workflows/ │ ├── bb.yml │ ├── main.yml │ └── website.yml ├── .gitignore ├── .prettierignore ├── .vercelignore ├── changelog.md ├── docs/ │ ├── .remarkrc.js │ ├── 404.mdx │ ├── _asset/ │ │ ├── editor.jsx │ │ ├── index.css │ │ └── index.js │ ├── _component/ │ │ ├── blog.jsx │ │ ├── foot-site.jsx │ │ ├── home.jsx │ │ ├── icon/ │ │ │ ├── github.jsx │ │ │ ├── mdx.jsx │ │ │ └── open-collective.jsx │ │ ├── layout.jsx │ │ ├── nav-site.jsx │ │ ├── nav.jsx │ │ ├── note.jsx │ │ ├── snowfall.jsx │ │ └── sort.js │ ├── _config.js │ ├── blog/ │ │ ├── conf.mdx │ │ ├── custom-pragma.mdx │ │ ├── index.mdx │ │ ├── shortcodes.mdx │ │ ├── v1.mdx │ │ ├── v2.mdx │ │ └── v3.mdx │ ├── community/ │ │ ├── about.mdx │ │ ├── contribute.mdx │ │ ├── index.mdx │ │ ├── projects.mdx │ │ ├── sponsor.mdx │ │ └── support.mdx │ ├── docs/ │ │ ├── extending-mdx.mdx │ │ ├── getting-started.mdx │ │ ├── index.mdx │ │ ├── troubleshooting-mdx.mdx │ │ ├── using-mdx.mdx │ │ └── what-is-mdx.mdx │ ├── guides/ │ │ ├── embed.mdx │ │ ├── frontmatter.mdx │ │ ├── gfm.mdx │ │ ├── index.mdx │ │ ├── injecting-components.mdx │ │ ├── math.mdx │ │ ├── mdx-on-demand.mdx │ │ └── syntax-highlighting.mdx │ ├── index.mdx │ ├── migrating/ │ │ ├── v1.mdx │ │ ├── v2.mdx │ │ └── v3.mdx │ ├── packages/ │ │ └── index.mdx │ ├── playground.mdx │ └── table-of-components.mdx ├── license ├── package.json ├── packages/ │ ├── esbuild/ │ │ ├── index.js │ │ ├── lib/ │ │ │ └── index.js │ │ ├── license │ │ ├── package.json │ │ ├── readme.md │ │ ├── test/ │ │ │ └── index.js │ │ └── tsconfig.json │ ├── loader/ │ │ ├── index.cjs │ │ ├── lib/ │ │ │ └── index.js │ │ ├── license │ │ ├── package.json │ │ ├── readme.md │ │ ├── test/ │ │ │ └── index.js │ │ └── tsconfig.json │ ├── mdx/ │ │ ├── index.js │ │ ├── lib/ │ │ │ ├── compile.js │ │ │ ├── core.js │ │ │ ├── evaluate.js │ │ │ ├── node-types.js │ │ │ ├── plugin/ │ │ │ │ ├── recma-build-jsx-transform.js │ │ │ │ ├── recma-document.js │ │ │ │ ├── recma-jsx-rewrite.js │ │ │ │ ├── rehype-remove-raw.js │ │ │ │ └── remark-mark-and-unravel.js │ │ │ ├── run.js │ │ │ ├── types.d.ts │ │ │ └── util/ │ │ │ ├── create-format-aware-processors.js │ │ │ ├── estree-util-create.js │ │ │ ├── estree-util-declaration-to-expression.js │ │ │ ├── estree-util-is-declaration.js │ │ │ ├── estree-util-specifiers-to-declarations.js │ │ │ ├── estree-util-to-binary-addition.js │ │ │ ├── estree-util-to-id-or-member-expression.js │ │ │ ├── extnames-to-regex.js │ │ │ ├── extnames.js │ │ │ ├── resolve-evaluate-options.js │ │ │ └── resolve-file-and-options.js │ │ ├── license │ │ ├── package.json │ │ ├── readme.md │ │ ├── test/ │ │ │ ├── compile.js │ │ │ ├── context/ │ │ │ │ ├── components.js │ │ │ │ ├── data.js │ │ │ │ └── run.js │ │ │ ├── core.js │ │ │ ├── evaluate.js │ │ │ ├── index.js │ │ │ └── syntax.js │ │ └── tsconfig.json │ ├── node-loader/ │ │ ├── index.js │ │ ├── lib/ │ │ │ ├── condition.default.js │ │ │ ├── condition.development.js │ │ │ └── index.js │ │ ├── license │ │ ├── package.json │ │ ├── readme.md │ │ ├── test/ │ │ │ └── index.js │ │ └── tsconfig.json │ ├── preact/ │ │ ├── index.js │ │ ├── lib/ │ │ │ └── index.js │ │ ├── license │ │ ├── package.json │ │ ├── readme.md │ │ ├── test/ │ │ │ └── index.jsx │ │ └── tsconfig.json │ ├── react/ │ │ ├── index.js │ │ ├── lib/ │ │ │ └── index.js │ │ ├── license │ │ ├── package.json │ │ ├── readme.md │ │ ├── test/ │ │ │ └── index.jsx │ │ └── tsconfig.json │ ├── remark-mdx/ │ │ ├── index.js │ │ ├── lib/ │ │ │ └── index.js │ │ ├── license │ │ ├── package.json │ │ ├── readme.md │ │ ├── test/ │ │ │ └── index.js │ │ └── tsconfig.json │ ├── rollup/ │ │ ├── index.js │ │ ├── lib/ │ │ │ └── index.js │ │ ├── license │ │ ├── package.json │ │ ├── readme.md │ │ ├── test/ │ │ │ ├── index.js │ │ │ └── vite-entry.mdx │ │ └── tsconfig.json │ └── vue/ │ ├── index.js │ ├── lib/ │ │ └── index.js │ ├── license │ ├── package.json │ ├── readme.md │ ├── test/ │ │ └── index.js │ └── tsconfig.json ├── readme.md ├── renovate.json5 ├── script/ │ └── jsx-loader.js ├── tsconfig.json ├── vercel.json └── website/ ├── generate.js ├── mdx-loader.js ├── post.js ├── prep.js ├── schema-description.js └── types.d.ts ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [*] charset = utf-8 end_of_line = lf indent_size = 2 indent_style = space insert_final_newline = true trim_trailing_whitespace = true ================================================ FILE: .github/workflows/bb.yml ================================================ jobs: main: runs-on: ubuntu-latest steps: - uses: unifiedjs/beep-boop-beta@main with: repo-token: ${{secrets.GITHUB_TOKEN}} name: bb on: issues: types: [closed, edited, labeled, opened, reopened, unlabeled] pull_request_target: types: [closed, edited, labeled, opened, reopened, unlabeled] ================================================ FILE: .github/workflows/main.yml ================================================ jobs: small: env: PUPPETEER_SKIP_DOWNLOAD: 1 name: test / ${{matrix.os}} / ${{matrix.node}} runs-on: ${{matrix.os}} steps: - uses: actions/checkout@v5 with: fetch-depth: 0 - uses: actions/setup-node@v4 with: cache: npm node-version: ${{matrix.node}} - run: npm ci - run: npm run test-api strategy: matrix: include: - node: lts/iron os: ubuntu-latest node: - lts/* os: - macos-latest - windows-latest full: env: PUPPETEER_SKIP_DOWNLOAD: 1 name: full build runs-on: ubuntu-latest steps: - uses: actions/checkout@v5 with: fetch-depth: 0 - uses: actions/setup-node@v4 with: cache: npm node-version: lts/* - run: npm ci - run: npm test - uses: codecov/codecov-action@v5 name: main on: - pull_request - push ================================================ FILE: .github/workflows/website.yml ================================================ jobs: deploy: environment: name: Website url: ${{steps.deployment.outputs.page_url}} permissions: contents: read id-token: write pages: write # To do: replace w/ `ubuntu-latest` when upstream is solved: # . runs-on: ubuntu-22.04 steps: - uses: actions/checkout@v5 - uses: actions/setup-node@v4 with: node-version: lts/* - run: npm ci - run: npm run docs - uses: actions/upload-pages-artifact@v4 with: path: public - uses: actions/deploy-pages@v4 id: deployment name: website on: push: branches: - main ================================================ FILE: .gitignore ================================================ .DS_Store coverage/ node_modules/ *.d.cts *.d.ts *.map *.tsbuildinfo /public/ !/packages/mdx/lib/types.d.ts !/website/types.d.ts ================================================ FILE: .prettierignore ================================================ node_modules/ coverage/ public/ *.md *.mdx ================================================ FILE: .vercelignore ================================================ node_modules/ ================================================ FILE: changelog.md ================================================ # Changelog See [GitHub Releases][releases] for the changelog. [releases]: https://github.com/mdx-js/mdx/releases ================================================ FILE: docs/.remarkrc.js ================================================ /** * @import {CheckFlag} from 'remark-lint-fenced-code-flag' * @import {Preset} from 'unified' */ import remarkPresetWooorm from 'remark-preset-wooorm' import remarkLintFencedCodeFlag, { checkGithubLinguistFlag } from 'remark-lint-fenced-code-flag' import remarkLintNoHtml from 'remark-lint-no-html' import remarkValidateLinks from 'remark-validate-links' /** @type {Preset} */ const remarkPresetMdx = { plugins: [ remarkPresetWooorm, [remarkLintFencedCodeFlag, check], [remarkLintNoHtml, false], [remarkValidateLinks, false] ] } export default remarkPresetMdx /** * Check according to GitHub Linguist. * * @param {string} value * Language flag to check. * @returns {string | undefined} * Whether the flag is valid (`undefined`), * or a message to warn about (`string`). * @satisfies {CheckFlag} */ function check(value) { // To do: investigate if we can change ` ```jsx ` -> ` ```js `? if (value === 'jsx' || value === 'mdx-invalid') return undefined return checkGithubLinguistFlag(value) } ================================================ FILE: docs/404.mdx ================================================ import {Note} from './_component/note.jsx' export {Home as default} from './_component/home.jsx' export const navExclude = true # 404: Not found Aww, snap. Unfortunately this page doesn’t exist. Perhaps you can find what you’re looking for [on GitHub][search]? **Note**: Did you come here from a website linking to it? Pretty sure this page used to exist? Please [open an issue](https://github.com/mdx-js/mdx/issues/new) to let us know so we can fix it! [search]: https://github.com/mdx-js/mdx/search ================================================ FILE: docs/_asset/editor.jsx ================================================ /* @jsxRuntime automatic */ /* @jsxImportSource react */ /* eslint-disable unicorn/prefer-global-this */ /** * @import {Grammar} from '@wooorm/starry-night' * @import {Node as EstreeNode, Program} from 'estree' * @import {Nodes as HastNodes, Root as HastRoot} from 'hast' * @import {Nodes as MdastNodes, Root as MdastRoot} from 'mdast' * @import { MdxJsxAttribute, MdxJsxAttributeValueExpression, MdxJsxExpressionAttribute * } from 'mdast-util-mdx-jsx' * @import {MDXModule} from 'mdx/types.js' * @import {ReactNode} from 'react' * @import {FallbackProps} from 'react-error-boundary' * @import {PluggableList} from 'unified' * @import {Node as UnistNode} from 'unist' */ /** * @typedef DisplayProperties * Properties. * @property {Error} error * Error. * * @typedef EvalNok * Not OK. * @property {false} ok * Whether OK. * @property {Error} value * Error. * * @typedef EvalOk * OK. * @property {true} ok * Whether OK. * @property {ReactNode} value * Result. * * @typedef {EvalNok | EvalOk} EvalResult * Result. */ import {compile, nodeTypes, run} from '@mdx-js/mdx' import {createStarryNight} from '@wooorm/starry-night' import sourceCss from '@wooorm/starry-night/source.css' import sourceJs from '@wooorm/starry-night/source.js' import sourceJson from '@wooorm/starry-night/source.json' import sourceMdx from '@wooorm/starry-night/source.mdx' import sourceTs from '@wooorm/starry-night/source.ts' import sourceTsx from '@wooorm/starry-night/source.tsx' import textHtmlBasic from '@wooorm/starry-night/text.html.basic' import textMd from '@wooorm/starry-night/text.md' import {visit as visitEstree} from 'estree-util-visit' import {toJsxRuntime} from 'hast-util-to-jsx-runtime' import {useEffect, useState} from 'react' import {Fragment, jsx, jsxs} from 'react/jsx-runtime' import ReactDom from 'react-dom/client' import {ErrorBoundary} from 'react-error-boundary' import rehypeRaw from 'rehype-raw' import remarkDirective from 'remark-directive' import remarkFrontmatter from 'remark-frontmatter' import remarkGfm from 'remark-gfm' import remarkMath from 'remark-math' import {removePosition} from 'unist-util-remove-position' import {visit} from 'unist-util-visit' import {VFile} from 'vfile' const sample = `# Hello, world! Below is an example of markdown in JSX.
Try and change the background color to \`tomato\`.
` /** @type {ReadonlyArray} */ const grammars = [ sourceCss, sourceJs, sourceJson, sourceMdx, sourceTs, sourceTsx, textHtmlBasic, textMd ] /** @type {Awaited>} */ let starryNight const editor = document.querySelector('#js-editor') if (window.location.pathname === '/playground/' && editor) { const root = document.createElement('div') root.classList.add('playground') editor.after(root) init(root) } /** * @param {Element} main * DOM element. * @returns {undefined} * Nothing. */ function init(main) { const root = ReactDom.createRoot(main) createStarryNight(grammars).then( /** * @returns {undefined} * Nothing. */ function (x) { starryNight = x const missing = starryNight.missingScopes() if (missing.length > 0) { throw new Error('Unexpected missing required scopes: `' + missing + '`') } root.render() } ) } function Playground() { const [directive, setDirective] = useState(false) const [evalResult, setEvalResult] = useState( // Cast to more easily use actual value. /** @type {unknown} */ (undefined) ) const [development, setDevelopment] = useState(false) const [frontmatter, setFrontmatter] = useState(false) const [gfm, setGfm] = useState(false) const [formatMarkdown, setFormatMarkdown] = useState(false) const [generateJsx, setGenerateJsx] = useState(false) const [math, setMath] = useState(false) const [outputFormatFunctionBody, setOutputFormatFunctionBody] = useState(false) const [positions, setPositions] = useState(false) const [raw, setRaw] = useState(false) const [show, setShow] = useState('result') const [value, setValue] = useState(sample) useEffect( function () { go().then( function (ok) { setEvalResult({ok: true, value: ok}) }, /** * @param {Error} error * Error. * @returns {undefined} * Nothing. */ function (error) { setEvalResult({ok: false, value: error}) } ) async function go() { /** @type {PluggableList} */ const recmaPlugins = [] /** @type {PluggableList} */ const rehypePlugins = [] /** @type {PluggableList} */ const remarkPlugins = [] if (directive) remarkPlugins.unshift(remarkDirective) if (frontmatter) remarkPlugins.unshift(remarkFrontmatter) if (gfm) remarkPlugins.unshift(remarkGfm) if (math) remarkPlugins.unshift(remarkMath) if (raw) rehypePlugins.unshift([rehypeRaw, {passThrough: nodeTypes}]) const file = new VFile({ basename: formatMarkdown ? 'example.md' : 'example.mdx', value }) if (show === 'esast') recmaPlugins.push([captureEsast]) if (show === 'hast') rehypePlugins.push([captureHast]) if (show === 'mdast') remarkPlugins.push([captureMdast]) /** @type {UnistNode | undefined} */ let ast await compile(file, { development: show === 'result' ? false : development, jsx: show === 'code' || show === 'esast' ? generateJsx : false, outputFormat: show === 'result' || outputFormatFunctionBody ? 'function-body' : 'program', recmaPlugins, rehypePlugins, remarkPlugins }) if (show === 'result') { /** @type {MDXModule} */ const result = await run(String(file), { Fragment, jsx, jsxs, baseUrl: window.location.href }) return (
{result.default({})}
 ) } if (ast) { return ( 
              
                {toJsxRuntime(
                  starryNight.highlight(
                    JSON.stringify(ast, undefined, 2),
                    'source.json'
                  ),
                  {Fragment, jsx, jsxs}
                )}
) } // `show === 'code'` return ( 
            
              {toJsxRuntime(starryNight.highlight(String(file), 'source.js'), {
                Fragment,
                jsx,
                jsxs
              })}
) function captureMdast() { /** * @param {MdastRoot} tree * Tree. * @returns {undefined} * Nothing. */ return function (tree) { const clone = structuredClone(tree) if (!positions) cleanUnistTree(clone) ast = clone } } function captureHast() { /** * @param {HastRoot} tree * Tree. * @returns {undefined} * Nothing. */ return function (tree) { const clone = structuredClone(tree) if (!positions) cleanUnistTree(clone) ast = clone } } function captureEsast() { /** * @param {Program} tree * Tree. * @returns {undefined} * Nothing. */ return function (tree) { const clone = structuredClone(tree) if (!positions) visitEstree(clone, removeFromEstree) ast = clone } } } }, [ development, directive, frontmatter, gfm, generateJsx, formatMarkdown, math, outputFormatFunctionBody, positions, raw, show, value ] ) const scope = formatMarkdown ? 'text.md' : 'source.mdx' // Cast to actual value. const compiledResult = /** @type {EvalResult | undefined} */ (evalResult) /** @type {ReactNode | undefined} */ let display if (compiledResult) { if (compiledResult.ok) { display = compiledResult.value } else { display = (

Could not compile code:

) } } return ( <>
{toJsxRuntime(starryNight.highlight(value, scope), { Fragment, jsx, jsxs })} {/* Trailing whitespace in a `textarea` is shown, but not in a `div` with `white-space: pre-wrap`. Add a `br` to make the last newline explicit. */} {/\n[ \t]*$/.test(value) ?
: undefined}