expose hax command in container

haxtheweb · Oct 17, 2024 · b58edf1 · b58edf1
1 parent b363681
commit b58edf1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 36 deletions.
diff --git a/elements/web-container/web-container.js b/elements/web-container/web-container.js
@@ -13,11 +13,6 @@ import { FitAddon } from "@xterm/addon-fit";
 // also needs to support terminal rendering / layouts to support and editing files
 // in the web container
 const files = {
-  'index.js': {
-    file: {
-      contents: ``
-    },
-  },
   'package.json': {
     file: {
       contents: `
@@ -26,10 +21,11 @@ const files = {
           "type": "module",
           "dependencies": {
             "@haxtheweb/haxcms-nodejs": "latest",
-            "nodemon": "latest"
+            "@haxtheweb/create": "latest"
           },
           "scripts": {
-            "start": "npx @haxtheweb/haxcms-nodejs"
+            "start": "npx @haxtheweb/haxcms-nodejs",
+            "hax": "hax"
           }
         }`,
     },
@@ -63,35 +59,6 @@ export class webContainer extends DDDSuper(I18NMixin(LitElement)) {
         "/../",
       locales: ["ar", "es", "hi", "zh"],
     });
-    globalThis.addEventListener("load", async () => {
-
-      const fitAddon = new FitAddon();
-      const terminal = new Terminal({
-        convertEol: true,
-      });
-      terminal.loadAddon(fitAddon);
-      terminal.open(this.shadowRoot.querySelector('.terminal'));
-
-      fitAddon.fit();
-      // Call only once
-      this.webcontainerInstance = await WebContainer.boot();
-      await this.webcontainerInstance.mount(files);
-      await this.installDependencies();
-      await this.startDevServer();
-      // Wait for `server-ready` event
-      this.webcontainerInstance.on("server-ready", (port, url) => {
-        this.shadowRoot.querySelector('iframe').src = url;
-      });
-
-      const shellProcess = await this.startShell(terminal);
-      globalThis.addEventListener("resize", () => {
-        fitAddon.fit();
-        shellProcess.resize({
-          cols: terminal.cols,
-          rows: terminal.rows,
-        });
-      });
-    });
   }
 
   async installDependencies() {
@@ -148,6 +115,40 @@ export class webContainer extends DDDSuper(I18NMixin(LitElement)) {
     };
   }
 
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.setupWebContainers();
+  }
+
+  async setupWebContainers() {
+    const fitAddon = new FitAddon();
+    const terminal = new Terminal({
+      convertEol: true,
+    });
+    terminal.loadAddon(fitAddon);
+    terminal.open(this.shadowRoot.querySelector('.terminal'));
+
+    fitAddon.fit();
+    // Call only once
+    this.webcontainerInstance = await WebContainer.boot();
+    await this.webcontainerInstance.mount(files);
+    await this.installDependencies();
+    await this.startDevServer();
+    // Wait for `server-ready` event
+    this.webcontainerInstance.on("server-ready", (port, url) => {
+      this.shadowRoot.querySelector('iframe').src = url;
+    });
+
+    const shellProcess = await this.startShell(terminal);
+    globalThis.addEventListener("resize", () => {
+      fitAddon.fit();
+      shellProcess.resize({
+        cols: terminal.cols,
+        rows: terminal.rows,
+      });
+    });
+  }
+
   // Lit scoped styles
   static get styles() {
     return [super.styles,

diff --git a/polymer.json b/polymer.json
@@ -6,6 +6,7 @@
     "node_modules/@webcontainer/api/dist/utils/*.js",
     "node_modules/@webcontainer/api/dist/internal/*.js",
     "node_modules/@xterm/xterm/lib/*",
+    "node_modules/@xterm/xterm/css/*",
     "node_modules/@xterm/addon-fit/lib/*",
     "node_modules/@polymer/app-layout/*/*.js",
     "node_modules/@polymer/**/*.js",