[Working Prototype] Headless Renderer

[lucasdinonolte]

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

mechanic-headless.mp4

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 [Proof of Concept] Video Export using Web Codec API #178

[netlify]

✅ Deploy Preview for dsi-logo-maker ready!

Name	Link
🔨 Latest commit	b6a43d7
🔍 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.

---

To edit notification comments on pull requests, go to your Netlify site settings.