@procamp/webcontainers-lib

Install

npm i monaco-editor @procamp/webcontainers-lib

Usage

Example of use with svelte

<script lang="ts">
   import { WebContainer } from '@procamp/webcontainers-lib';
   import { onMount } from 'svelte';

   import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
   import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
   import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
   import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
   import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

   function setupMonaco() {
   self.MonacoEnvironment = {
      getWorker: function (_moduleId: any, label: string) {
         if (label === 'json') {
         return new jsonWorker();
         }
         if (label === 'css' || label === 'scss' || label === 'less') {
         return new cssWorker();
         }
         if (label === 'html' || label === 'handlebars' || label === 'razor') {
         return new htmlWorker();
         }
         if (label === 'typescript' || label === 'javascript') {
         return new tsWorker();
         }
         return new editorWorker();
      },
   };
   }

   // Setup monaco editor
   onMount(() => {
      setupMonaco();
   });

   // Create and mount web container
   onMount(async () => {
      const editorContainer = document.getElementById('editor')!;
      const terminalContainer = document.getElementById('terminal')!;

      const webContainer = new WebContainer({
      editorContainer,
      terminalContainer,
      mainServerBaseUrl: 'http://localhost:3000/api/webcontainers',
      files: [
         {
            name: 'index.js',
            content: `const element = document.getElementById('editor');`,
            language: 'javascript'
         }
      ]
      });
      await webContainer.mount();
   });
</script>