webcontainers-demo

webcontainers-demo.ts

import { WebContainer } from "@webcontainer/api";

let webcontainerInstance: WebContainer;


const packages = [
  { name: 'react-dom', version: '18.2.0' },
  { name: 'react', version: '18.2.0' },
  { name: 'zod', version: '3.22.2' },
  { name: 'framer-motion', version: '10.16.4' },
  { name: 'react-icons', version: '4.11.0' },
]


webcontainerInstance = await WebContainer.boot();

const npmInstall = await webcontainerInstance.spawn("npm", ["install", ...packages.map(pkg => `${pkg.name}@${pkg.version}`)]);
const exitCode = await npmInstall.exit
if (exitCode !== 0) throw new Error('exit code was ' + exitCode)

const finished = performance.now()

const reactPkgJson = JSON.parse(await webcontainerInstance.fs.readFile('./node_modules/react/package.json', 'utf-8'))
if (reactPkgJson.name !== 'react') throw new Error('npm install seems to be broken: reactPkgJson.name was ' + reactPkgJson.name)

globalThis.onFsReadyAfterNpmInstall?.(finished)
document.getElementById('result')!.textContent = finished.toFixed(0)