remarkjs/remark-react

remark v5 API is async now

bebraw opened this issue · 8 comments

Hi,

Just thought to note that remark changed its API so that it's async. The signature is like this:

remark().use(lint).use(html).process('## Hello world!', function (err, file) {
    console.error(report(file));
    console.log(file.toString());
});

You might want to tweak the README example accordingly.

@bebraw That’s not really true, it’s more that the return value is now a virtual file instead of a string / React element

The sync interface is still very much allowed / favoured often!

P.S. @tmcw I did quite a lot on sanitation in remark-html, which is now very virtual and very safe. Take a look at the index.js.

remark-react could use something a lot similar, with the exception of instead of stringifying to HTML (L60), going to react with hast-to-hyperscript.

@wooorm Ah, great to hear! I got misled by the README. Closing. 👍

Abstract: so instead of remark().use(react).process('## Hello world!'), remark().use(react).process('## Hello world!').contents should be used.

@bebraw Whoops, sorry! If you have suggestions or concerns, could you raise them in the Gitter? I’d love to know about them.

@wooorm I'm good for now.

I guess adding that .contents bit to the README would help. That bit me today and I ended up writing html-webpack-remark-plugin to deal with the async interface. No probs. 😄

Ah, well the thing there is that it’s a bit weird that remark is “stringifying” to React. In essence, toString simply returns file.contents, so it would also work for React.

I’d rather not advertise accessing .contents. Maybe buffers will be added in the future, meaning people’s code will break if they use .contents instead of .toString().

@wooorm So what is preferred way?

<div id='preview'>
  {remark().use(reactRenderer).process(this.state.text).contents}
</div>

or

<div id='preview'>
  {remark().use(reactRenderer).process(this.state.text).toString()}
</div>

I’d like to submit a pull request to fix non-working example in the Readme.

The latter (toString()), as buffers are now also supported, and toString() automatically transforms those! This is not the case for remark-react.

Whoops, hold on, as this plugin exposes an AST, it should use contents. 😬