Light bundle version

[arturcarvalho]

Hi again @wooorm.

This PR is related to this discussion

First of all, thanks! I've reduced the bundle chunk by about 200kB!

What I did:

1. Copied the rehype-highlight index.js to my repo and changed the require to var lowlight = require('lowlight/lib/core');
2. Went from remark-html to my own remark-rehype and rehype-stringify.
3. Instead of remark-highlight I used my own remark-highlight as said on the first point.

There's a strange thing going on, if I import the lib/languages instead of require them, the bundle size stays big. I'm using nextjs, maybe it's related.

This is the calling file:

import slug from 'remark-slug';
import headings from 'remark-autolink-headings';
import hint from 'remark-hint';
import gfm from 'remark-gfm';
import remark from 'remark';
import m2h from 'remark-rehype';
import html from 'rehype-stringify';
import highlight from './rehypelight';

export async function markdownToHtml(markdown: string) {
  const result = await remark()
    .use(gfm) // underline, table, etc.
    .use(slug) // creates slugs on headings
    .use(headings, { behavior: 'wrap' }) // wrap puts it after slug, adds url
    .use(hint)
    .use(m2h)
    .use(highlight, {
      languages: {
        // requires are needed, imports don't reduce the bundle size.
        javascript: require('highlight.js/lib/languages/javascript'),
        typescript: require('highlight.js/lib/languages/typescript'),
      },
    })
    .use(html)
    .process(markdown);

  return result.toString();
}

Now to the PR (and its problems):

• I've created the core file and moved the logic there. The tests are OK.
• I've started making some tests pass for the light version.

The issues:

1. I don't know how to add another export. Is it on the files field? My require/npm publishing experience is limited.
2. I don't know how to test if the bundles are smaller.
3. Should I just duplicate the tests? I didn't have time to understand them all. I'll move them to the main test.js once they work. I'd prefer to go one by one from a clean slate in a different file for starters.
4. How should at least one language be enforced and which options field to use? I've used the languages field.

In any case, thanks for your help and hope this is helpful!

[wooorm]

Nice work, thanks!

I don't know how to test if the bundles are smaller.

I don’t think that’s needed to add. This should work.
But just to be sure, you could take a look at the npm script build-mangle, and use similar code to see if it actually works (I like using https://github.com/sindresorhus/gzip-size-cli to check the sizes of files)

How should at least one language be enforced and which options field to use? I've used the languages field.

For testing? How do you mean?

---

There should be some docs on this new plugin. Similar to the Browser section in lowlight (https://github.com/wooorm/lowlight#browser) perhaps?

[wooorm]

I think these test can go in the main test file, no need to copy-paste it all!

[arturcarvalho]

How should at least one language be enforced and which options field to use? I've used the languages field.

For testing? How do you mean?

If a user doesn't provide a language, there won't be any highlighting. Should it be mandatory that the user provides at least one language? Is the field "languages" a good place to put the selected languages to bundle?

There should be some docs on this new plugin. Similar to the Browser section in lowlight (https://github.com/wooorm/lowlight#browser) perhaps?

I'll get to it at the end if it's OK with you.

[arturcarvalho]

I think these test can go in the main test file, no need to copy-paste it all!

I suppose this is related to my question:
Should I just duplicate the tests? I didn't have time to understand them all. I'll move them to the main test.js once they work. I'd prefer to go one by one from a clean slate in a different file for starters.

[wooorm]

yes, for the tests, indeed!

[wooorm]

If a user doesn't provide a language, there won't be any highlighting. Should it be mandatory that the user provides at least one language? Is the field "languages" a good place to put the selected languages to bundle?

I think that should be clearly documented. I don’t think we need to do extra work to go into the languages object to see if there’s at least one key or not 🤷‍♂️

[arturcarvalho]

If a user doesn't provide a language, there won't be any highlighting. Should it be mandatory that the user provides at least one language? Is the field "languages" a good place to put the selected languages to bundle?

I think that should be clearly documented. I don’t think we need to do extra work to go into the languages object to see if there’s at least one key or not 🤷‍♂️

"no extra work " seems fine with me 😁

[wooorm]

nice!

A couple of nits on the docs (especially the example, I placed it in a file locally, formatted it, so that it matches the coding style of this project)

I don’t think you need so many tests! Most of the code is shared with the main plugin, so there’s no need to repeat every test! 3-5 would be fine by me

[wooorm]

please move these to the top, so when opening this file it’s immediately clear what’s loaded

[arturcarvalho]

Should be good.

[wooorm]

awesome, thanks for your hard work on this @arturcarvalho. Released!

[arturcarvalho]

awesome, thanks for your hard work on this @arturcarvalho. Released!

🎉 Thank you, it was a pleasure working with you.

Really liked the process around it all. Practical but efficient and thorough. Even the apostrophes are being checked 😁

Look at this beauty (bottom line):
Before:

After: