@mapbox/babel-plugin-transform-jsxtreme-markdown

Transform Markdown interpolated with JS expressions and JSX elements at compile time

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@mapbox/babel-plugin-transform-jsxtreme-markdown
85202.0.010 months ago5 years agoMinified + gzip package size for @mapbox/babel-plugin-transform-jsxtreme-markdown in KB

Readme

@mapbox/babel-plugin-transform-jsxtreme-markdown
Transform Markdown interpolated with JS expressions and JSX elements into pure JSX, at compile time.
Uses jsxtreme-markdown to compile the interpolated Markdown.
For more information about jsxtreme-markdown features, read the README at the root of this monorepo.

Installation

npm install @mapbox/babel-plugin-transform-jsxtreme-markdown

Usage

Transforms a special tagged template literal.
require or import the (fake) package '@mapbox/babel-plugin-transform-jsxtreme-markdown/md', or whatever you've specified as packageName in your Babel options. Then use that (fake) module's export as a template literal tag, marking the template literals you'd like to be compiled at run time.
If React is not already in the file's top-level scope, var React = require('react'); will be added to the beginning of the file.
// Input
const md = require('@mapbox/babel-plugin-transform-jsxtreme-markdown/md');
const foo = md`
  # Title

  This is **bold.**
  Here is a [link](/some/url).
`;

// Output
('use strict');

var React = require('react');
var foo = (
  <div>
    <h1>Title</h1>
    <p>
      This is <strong>bold.</strong>
      Here is a <a href="/some/url">link</a>.
    </p>
  </div>
);

Because this plugin uses jsxtreme-markdown, you can also interpolate JS expressions and JSX elements within special delimiters. Read more about this in the jsxtreme-markdown docs.
// Input
import md from '@mapbox/babel-plugin-transform-jsxtreme-markdown/md';
const text = md`
  This is a paragraph {{<span className="foo">}} with a **markdown** span inside {{</span>}}
  {{ <div style={{ margin: 70 }}> }}
  And here is a _paragraph_ inside a div.
  [Link](/some/url)
  {{ </div> }}
`;

// Output
('use strict');

var React = require('react');
var text = (
  <div>
    <p>
      This is a paragraph{' '}
      <span className="foo">
        {' '}
        with a <strong>markdown</strong> span inside{' '}
      </span>
    </p>
    <div style={{ margin: 70 }}>
      And here is a <em>paragraph</em> inside a div.
      <a href="/some/url">Link</a>
    </div>
  </div>
);

options

You can pass any of the options available to jsxtremeMarkdown.toJsx
.
Additional options:

packageName

Type: string. Default: '@mapbox/babel-plugin-transform-jsxtreme-markdown/md'.
The name of the package that you will require or import to use this thing. For example, with the value 'xtreme-markdown' you should use
import md from 'xtreme-markdown';