Task to create webcontainer snapshots for project embeds

playfulprogramming/playfulprogramming#1377 added code embeds that build nested projects using the WebContainers API

In order to speed these up dramatically, we can preinstall any npm dependencies (with --ignore-scripts!) and create a binary snapshot of each container with @webcontainer/snapshot.

This should be done with the Fly Sprites API (npm packge: @fly/sprites)

As another optimization, we should generate one combined webcontainer snapshot per post, with each project in a subdirectory. npm install would still need to be run separately for each subdirectory, but this means that browser installs/cache can be reused when switching embeds.

Additionally, once the snapshot is generated, try compressing it with gzip. I have no idea if @webcontainer/snapshot does this already - if not it would likely reduce the download size massively.

On the browser, the script can then re-run npm install --prefer-offline to skip a lot of downloads.

To summarize, this issue involves:

• As part of the post-sync task, identify any projects (subfolders) within the post
• Create a new task for e.g. build-project-container and trigger it after post-sync, with the post ID and identified project folders as inputs
• Within the task:
  • Fetch the project sources (and calculate a combined hash)
  • Determine if the project + hash already exists in the database; early return if so.
  • Otherwise, run a sprite that fetches and bundles all dependencies for the project
    • (in the sprite) Bundle the results with @webcontainer/snapshot
  • Get the resulting file from the sprite, and store it in S3
  • Store the S3 key in the database, alongside the hash of the project sources, keyed by the post id.

Start with the existing post-sync task and trace how it identifies project subfolders. Define the build-project-container task around the listed inputs, then inspect the database and S3 storage paths used for project hashes and snapshot keys. Done means the task can reuse an existing hash or generate, store, and record a combined snapshot for a post.