/mdxx

Primary LanguageJavaScript

MDXX

# install
$ npm install mdxx-cli -g

Example

<!-- bar.mdx -->

import Bar from "./bar"

# Bar
<!-- foo.mdx -->

import Bar from "./bar"

# Hello from Foo

<Bar />
import React from "react";
import ReactDOM from "react-dom/server";
import Foo from "./foo.mdx";

const str = ReactDOMServer.renderToString(<Foo />);
console.log(str);
# run with js
$ mdxx foo.md # output as html

# Write js
$ mdxx index.tsx --mode js --out out.js
$ node out.js # dump js

# Write with chunk
$ mdxx index.tsx --mode js --outdir out
$ node out/index.js

API

import React from "react";
import ReactDOM from "react-dom";

import { compile } from "mdxx-compiler";
import { parse } from "mdxx-parser";

const ast = parse(`# hello`);

function App(props) {
  return const el = compile(ast, {
    props,
    components: {},
    h: React.createElement,
    Fragment: React.Fragment
  });
}

ReactDOM.render(<App />, document.querySelector("#main"));

As rollup plugin

rollup-mdxx-plugin makes .md and .mdx loadable as react component.

// rollup.config.js
import { rollup } from "rollup";
import { mdxx } from "rollup-plugin-mdxx";

export default {
  input: "index.mdx",
  output: {
    format: 'esm'
    file: "out.js"
  },
  plugins: [
    // your plugin...
    mdxx()
  ]
};

index.mdx

# Hello mdxx

import Foo from "./foo.mdx" //

<Foo />

rollup -c rollup.config.js

TODO

  • Support React.Context based component provider
  • Support preact

LICENSE

MIT