[Working Prototype] Headless Renderer

This PR explores the possibility of using puppeteer to headlessly render mechanic design function (i.e. from the command line or server-side).

What this does

Adds the @mechanic-design/headless package
- this exposes a function to headlessly render a mechanic design function
- the render result is passed back to the caller to be processed
Adds the render command to @mechanic-design/cli to allow headless rendering from the CLI

Preview

https://github.com/designsystemsinternational/mechanic/assets/1673742/83e19762-48c4-4c80-bd62-fcf9cf700044

How it works

The headless renderer expects to be pointed to the path of a built mechanic project. It will run a static express server in that directory and then dispatch a headless Chrome (using Puppeteer) to visit a specified design function and dispatch a render. The headless browser hooks into the events emitted from mechanic core to catch the render result, turn it into a Buffer and return it to the caller. Headless rendering can be called with an object of parameters that will be passed as the inputs to the design function.

In the case of the new render command (which is a caller of the headless package) the result will be saved to disk in a user specified file. The render command passes any flags along to the design function as inputs. So mechanic render textCanvas text.png --text "Enzo’s Red Ferrari" will render the textCanvas function to text.png with the input named text set.

It's using puppeteer-core to avoid shipping a Chromium binary with mechanic. The headless package has a util to look for an installation of Google Chrome on a user's system. Alternatively the path to Chrome can be set in an ENV variable.

What's more?

The idea of this being it's own package is to be flexible with use cases. @mechanic-design/headless can be used everywhere where you have access to node and a chrome (or chromium) executable. This includes (but is not limited to): CLIs, API endpoints, CI workflows, etc.

I have created separate repo to test the headless rendering in Github Workflows, including experiments with the Web Video Codec API #178

What's next

This is mostly a working prototype to verify this approach is feasible. It needs a lot of love before it'll be ready to go in, including:

make sure any errors of the headless rendering are handled correctly to avoid infinitely running processes
numbers and strings are easy to pass via the CLI, but what about files?
solve the web codec Caveat mentioned in #178

Name	Link
Latest commit	b6a43d707d80a010c0111a0a56386484d4c98a30
Latest deploy log	https://app.netlify.com/sites/dsi-logo-maker/deploys/64889d5d13c6000008ac7a2f
Deploy Preview	https://deploy-preview-180--dsi-logo-maker.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

designsystemsinternational / mechanic