https://github.com/haxtheweb/issues/issues/1710

haxtheweb · Oct 21, 2024 · 9e3896d · 9e3896d
1 parent 86e5236
commit 9e3896d
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 37 deletions.
diff --git a/elements/web-container/index.html b/elements/web-container/index.html
@@ -34,43 +34,8 @@
 
 <body>
   <div id="demo">
-    <h1>web-container</h1>
-    <select id="select">
-      <option></option>
-    </select>
-    <p>Select the project to produce a demo for. This will make a best attempt</p>
-    <div id="container"></div>
+    <web-container-wc-registry-docs></web-container-wc-registry-docs>
   </div>
-  <script type="module" src="./lib/web-container-doc-player.js"></script>
-  <script>
-
-    // listen for user selection on the input field;
-    const select = globalThis.document.querySelector('#select');
-
-    fetch(`https://cdn.hax.cloud/cdn/wc-registry.json`).then(d => d.json()).then(data => {
-      let obj = Object.fromEntries(Object.entries(data).filter(([key, value]) => value.includes('@haxtheweb/') && !key.startsWith('hax')));
-      Object.keys(obj).forEach(path => {
-        let el = globalThis.document.createElement('option');
-        el.value = path;
-        el.innerText = path;
-        select.appendChild(el);
-      });
-      globalThis.filteredWcRegistry = obj;
-    });
-    select.addEventListener('change', async (e) => {
-      if (select.value) {
-        let wcm = await globalThis.WebContainerManager.requestAvailability();
-        let wcdp = globalThis.document.createElement('web-container-doc-player');
-        let ary = globalThis.filteredWcRegistry[select.value].split('/');
-        wcdp.project = `${ary.shift()}/${ary.shift()}`;
-        wcdp.element = select.value;
-        wcdp.importpath = globalThis.filteredWcRegistry[select.value];
-        let container = globalThis.document.querySelector('#container');
-        container.innerHTML = '';
-        container.appendChild(wcdp);
-      }
-    })
-  </script>
-
+  <script type="module" src="./lib/web-container-wc-registry-docs.js"></script>
 </body>
 </html>
diff --git a/elements/web-container/lib/web-container-wc-registry-docs.js b/elements/web-container/lib/web-container-wc-registry-docs.js
@@ -0,0 +1,66 @@
+import { html } from "lit";
+import "./web-container-doc-player.js";
+import { DDD } from "@haxtheweb/d-d-d";
+
+export class WebContainerWCRegistryDocs extends DDD {
+  static get tag() {
+    return 'web-container-wc-registry-docs';
+  }
+
+  constructor() {
+    super();
+    this.text = 'Select the project to produce a demo for. This will make a best attempt';
+    this.file = 'https://cdn.hax.cloud/cdn/wc-registry.json';
+    this.options = {
+      "": ""
+    };
+  }
+
+  static get properties() {
+    return {
+      file: { type: String },
+      text: { type: String },
+      options: { type: Object },
+    };
+  }
+
+  render() {
+    return html`
+    <select @change="${this.selectChange}">
+      <option></option>
+      ${Object.keys(this.options).map((o) => html`<option value="${o}">${o}</option>`)}
+    </select>
+    <p>${this.text}</p>
+    <div id="container"></div>
+    `;
+  }
+
+  updated(changedProperties) {
+    if (super.updated) {
+      super.updated(changedProperties);
+    }
+    if (changedProperties.has('file') && this.file) {     
+      fetch(this.file).then(d => d.json()).then(data => {
+        this.options = Object.fromEntries(Object.entries(data).filter(([key, value]) => value.includes('@haxtheweb/') && !key.startsWith('hax')));
+      });
+    }
+  }
+
+  async selectChange(e) {
+    const select = this.shadowRoot.querySelector('select');
+    if (select.value) {
+      // ensure we have a container image
+      let wcm = await globalThis.WebContainerManager.requestAvailability();
+      let wcdp = globalThis.document.createElement('web-container-doc-player');
+      let ary = this.options[select.value].split('/');
+      wcdp.project = `${ary.shift()}/${ary.shift()}`;
+      wcdp.element = select.value;
+      wcdp.importpath = this.options[select.value];
+      let container = this.shadowRoot.querySelector('#container');
+      container.innerHTML = '';
+      container.appendChild(wcdp);
+    }
+  }
+}
+
+globalThis.customElements.define(WebContainerWCRegistryDocs.tag, WebContainerWCRegistryDocs);
diff --git a/elements/web-container/web-container.js b/elements/web-container/web-container.js
@@ -21,6 +21,7 @@ export class WebContainerEl extends DDDSuper(LitElement) {
 
   constructor() {
     super();
+    this.fname = null;
     this.hideEditor = false;
     this.hideTerminal = false;
     this.hideWindow = false;
@@ -116,6 +117,22 @@ export class WebContainerEl extends DDDSuper(LitElement) {
         }
       }
     }
+    if (!this.hideEditor) {
+      import("@haxtheweb/code-editor/code-editor.js").then((e) => {
+        setTimeout(() => {
+
+          if (this.files['index.js']) {
+            this.fname = 'index.js';
+          }
+          else if (this.files['index.html']) {
+            this.fname = 'index.html';
+          }
+          if (this.fname) {
+            this.shadowRoot.querySelector('code-editor').value = this.files[this.fname].file.contents;
+          }
+        }, 100);
+      });
+    }
     this.setupWebContainers();
   }
 
@@ -439,10 +456,15 @@ export class WebContainerEl extends DDDSuper(LitElement) {
     `];
   }
 
+  editorValueChanged(e) {
+    this.writeFile(this.fname, e.detail.value);
+  }
+
   // Lit render the HTML
   render() {
     return html`
     <div class="container">
+      ${!this.hideEditor ? html`<div class="editor"><code-editor @value-changed="${this.editorValueChanged}"></code-editor></div>` : ``}
       <div class="preview">
         ${!this.hideWindow ? html`<iframe part="iframe" src="${new URL('./lib/loading.html', import.meta.url).href}"></iframe>`: ``}
       </div>