Adding an example of using puppeteer

[joneshf]

🚀 feature request

Relevant Rules

Per Alex Eagle's suggestion on the bazel Slack, I'd like to add an example of one approach to getting puppeteer working with bazel.

For posterity:

neat, if you have some time to mention your recipe as a placeholder on https://bazelbuild.github.io/rules_nodejs/examples.html#test-runners maybe we can help the next person find it, or add the proper example

Description

I was having issues getting puppeteer to work with bazel and asked about it on the bazel Slack: https://bazelbuild.slack.com/archives/CEZUUKQ6P/p1617464195159900. Through the help of a few people I managed to get something that works (though it's likely not the only way to do it). The solution is kind of involved though, so I wanted to make sure it's okay to make a complex PR.

Describe the solution you'd like

What I ended up doing was:

1. Vendoring the version of chromium that corresponds to the version used in a specific version of puppeteer. puppeteer mentions that each version is only guaranteed to work with its specific version of chromium (maybe even only the version it downloads itself) so it doesn't seem reliable to use just any old version. Have to have both the binary as a target and all of the additional files that chromium needs to run as a separate target.
2. Using puppeteer-core instead of puppeteer, since puppeteer-core doesn't download a version of chromium as well.
3. Passing the location of chromium to the puppeteer-core API.
4. Making a nodejs_binary rule.
5. Passing the nodejs_binary rule to a npm_package_bin rule.
6. Passing the chromium files to the data attribute in the npm_package_bin rule.

I wasn't able to simplify anything here after many days of trying. I.e. passing the chromium files to the data attribute on the nodejs_binary (or even the data attribute on the underlying ts_project) didn't work. Before extracting all this to a PR, I'd like to get some feedback that this is likely the only way and not just me running into some unintentional bug with data attributes not working properly or whatever.

Describe alternatives you've considered

The only other thing I was able to figure out was hardcoding an absolute path to the chromium binary. But, that meant that it couldn't work for any machine other than my own. That seems like a non-starter.

I would've really liked to just depend on puppeteer the npm package and not have to deal with any of this stuff, but it didn't work. That would've been ideal.

[loudmouth]

Thanks for opening the issue :)

It's a bit hard to tell without seeing the rules you've invoked, but the solution you described seems (to me) like it could be a good candidate for a macro: especially steps 4. - 6.. I'm assuming nodejs_binary rule is a wrapper around puppeteer; is that assumption correct?

I'm having trouble wrapping my brain around how you vendored chromium , Is there any sample code you're able to share from steps 1. - 3. that could shed more light?

[joneshf]

Sorry for being confusing.

I'm assuming nodejs_binary rule is a wrapper around puppeteer; is that assumption correct?

Yeah, basically. In my specific case, it's a file that uses puppeteer to render a PDF.

I'm having trouble wrapping my brain around how you vendored chromium , Is there any sample code you're able to share from steps 1. - 3. that could shed more light?

Lemme try extracting out a minimal example to a separate repo.

[joneshf]

Here's an example repo: https://github.com/joneshf/rules_nodejs_puppeteer. The vendoring happens in vendor/chromium.

Lemme know if there's more I can try to explain.