npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mdast-deku

v1.0.0

Published

Compile Markdown to deku with mdast

Downloads

5

Readme

mdast-deku

Build Status

mdast-deku compiles markdown to Deku components. Built on mdast, an extensively tested and pluggable parser.

Installation

npm:

npm install mdast-deku

Table of Contents

Programmatic

mdast.use(deku, options)

Parameters

  • deku — This plugin;
  • options (Object?) — See below.

Let’s say example.js looks as follows:

import element from 'virtual-element';
import {render,tree} from 'deku';
import mdast from 'mdast';
import mdastDeku from 'mdast-deku';

var MdastComp = {
  InitialState (props) {
      return { text: '# hello world' };
  },
  render(component, setState) {
    const {state} = component;
    function onChange(e) {
      setState({ text: e.target.value });
    }
    return (<div>
        <textarea
            value={state.text}
            onChange={onChange} />
        <div id='preview'>
            {mdast().use(mdastDeku).process(state.text)}
        </div>
    </div>);
  }
};

const app = tree(<MdastComp />);
app.render(document.getElementById('app'));

Configuration

All options, including the options object itself, are optional:

  • entities (true, 'numbers', or 'escape', default: true) — How to encode non-ASCII and HTML-escape characters: the default generates named entities (& > &amp;); 'numbers' generates numbered entities (& > &#x26;), and 'escape' only encodes characters which are required by HTML to be escaped: &, <, >, ", ', and `, leaving non-ASCII characters untouched.

  • sanitize (boolean, default: false) — Whether or not to allow the use of HTML inside markdown.

These can passed to mdast.use() as a second argument.

You can define these in .mdastrc or package.json files too. An example .mdastrc file could look as follows:

{
  "plugins": {
    "html": {
        "sanitize": false,
        "xhtml": false,
        "entities": "numbers"
    }
  },
  "settings": {
    "commonmark": true
  }
}

Where the object at plugins.html are the options for mdast-deku. The object at settings determines how mdast parses markdown code. Read more about the latter on mdast’s readme.

CommonMark

You still need to set commonmark: true in mdast’s options

CommonMark support is a goal but not (yet) a necessity. There are some (roughly 115 of 550, relating to inline precedence, lists, emphasis and strongness) issues which I’d like to cover in the future. Note that this sounds like a lot, but they have to do with obscure differences which do not often occur in the real world. Read more on some of the reasoning in doc/commonmark.md.

Integrations

mdast-deku works great with:

All mdast nodes can be compiled to deku. In addition, mdast-deku looks for an attributes object on each node it compiles and adds the found properties as deku attributes on the compiled tag.

License

MIT © Titus Wormer, modified by Tom MacWright and Mapbox and Ulrik Augustsson