add a build preset for web containers

cpreston321 commented 1 year ago

Describe the feature

This preset would target a folder that would create a json file of all the contents of each file within a JSON file to easily start a web container with it. I'm not for sure if this is the right spot for it but it would be cool to see that you can just change the preset and it will build a web-container file that you can ingest using the API: https://webcontainers.io/

Structure like so (Pulled straight from docs example:)

Start up index script:

import { WebContainer, FileSystemTree } from '@webcontainer/api';
import { projectFiles } from './project-files.ts';

async function main() {
  // First we boot a WebContainer
  const webcontainer = await WebContainer.boot();

  // After booting the container we copy all of our project files
  // into the container's file system
  await webcontainer.mount(projectFiles);

  // Once the files have been mounted, we install the project's
  // dependencies by spawning `npm install`
  const install = await webcontainer.spawn('npm', ['i']);

  await install.exit;

  // Once all dependencies have been installed, we can spawn `npm`
  // to run the `dev` script from the project's `package.json`
  await webcontainer.spawn('npm', ['run', 'dev']);
}

Content JSON structure.

export const projectFiles = {
  myProject: {
    directory: {
      'package.json': {
        file: {
          contents: '...',
        }
      },
      'index.js': {
        file: {
          contents: '...',
        }
      },
    }
  }
};

Maybe it's a separate package. I am just thinking out loud. Maybe we can just discuss it but it only sounds right since unbuild is a unified builder.

Additional information

[ ] Would you be willing to help implement this feature?

pi0 commented 1 year ago

Do you have some examples of projects would be built based on such project?

Also are you thinking to mainly generate the json output from unbuild?

We might alternatively target it as a nitro preset too (which a unified web builder) but would love to hear more about your vision how we can integrate with stackblitz format..

cpreston321 commented 1 year ago

@pi0

Also are you thinking to mainly generate the json output from unbuild?

Yes, exactly. There could be a better way of doing this but that is what I was thinking.

Furthermore, One example of the top of my head is that @clack/prompts. I have worked closely with him in integrating unbuild and jitti with a mono repo structure. In his docs site he integrated this demo here: https://github.com/natemoo-re/clack.cc/tree/main/demo.

This would eventually be added within the mono repo of the @clack/prompts but he created his own script to copy the contents into a file that can be used within the site like so here. I think the duplication could be heavily simplified in a mono-repo structure where he would want to target certain demos to be a web container to change the experience of different prompts to load but then he would have to create multiple scripts like I showed above with makes it a hassle to turn into cjs format and test such demos.

pi0 commented 1 year ago

Exciting stuff and ideas! Shall we start with an experimental repo to see how it looks like? Feel free to ping me in discord pi0#6582 to continue this there are some relevant ideas could be nice to brainstorm together how to join them.

cpreston321 commented 1 year ago

Shall we start with an experimental repo to see how it looks like?

I think that would be great! 😀

Feel free to ping me in discord pi0#6582 to continue this there are some relevant ideas could be nice to brainstorm together how to join them.

I added you, my username is different on discord. it's officialcpzz#1411

unjs / unbuild