Add Flexer

src/UI/Components/Flexer.js

@@ -0,0 +1,37 @@
+import { Component } from "../../util/Component.js";
+
+/**
+ * Allows a flex layout of composed components to be
+ * treated as a component.
+ */
+export default class Flexer extends Component {
+    static PROPERTIES = {
+        children: {},
+    }
+
+    create_template ({ template }) {
+        // TODO: The way we handle loading assets doesn't work well
+        // with web components, so for now it goes in the template.
+        $(template).html(`
+            <slot name="inside"></slot>
+        `);
+    }
+
+    on_ready () {
+        console.log('Flexer on_ready called');
+        debugger;
+        for ( const child of this.get('children') ) {
+            child.setAttribute('slot', 'inside');
+            child.attach(this);
+        }
+    }
+}
+
+// TODO: This is necessary because files can be loaded from
+// both `/src/UI` and `/UI` in the URL; we need to fix that
+if ( ! window.__component_flexer ) {
+    window.__component_flexer = true;
+
+    console.log('this is here');
+    customElements.define('c-flexer', Flexer);
+}

src/UI/Components/QRCode.js

@@ -27,6 +27,7 @@ export default class QRCodeView extends Component {
     }
 
     on_ready ({ listen }) {
+        console.log('QRCodeView on_ready called');
         listen('value', value => {
             console.log('got value', value);
             // $(this.dom_).find('.qr-code').empty();
@@ -43,5 +44,5 @@ export default class QRCodeView extends Component {
 if ( ! window.__component_qr_code ) {
     window.__component_qr_code = true;
 
-    customElements.define('qr-code', QRCodeView);
+    customElements.define('c-qr-code', QRCodeView);
 }

src/UI/UIWindowQR.js

@@ -19,6 +19,7 @@
 
 import Placeholder from '../util/Placeholder.js';
 import TeePromise from '../util/TeePromise.js';
+import Flexer from './Components/Flexer.js';
 import QRCodeView from './Components/QRCode.js';
 import UIWindow from './UIWindow.js'
 
@@ -129,8 +130,15 @@ async function UIWindowQR(options){
     const component_qr = new QRCodeView({
         value: options.text
     });
-    console.log('test', component_qr);
-    component_qr.attach(placeholder_qr);
+
+    const component_flexer = new Flexer({
+        children: [
+            component_qr,
+        ]
+    });
+
+    // component_qr.attach(placeholder_qr);
+    component_flexer.attach(placeholder_qr);
     // placeholder_qr.replaceWith($(`<h1>test</h1>`).get(0));
 
     if ( false ) {

src/util/Component.js

@@ -22,15 +22,32 @@ export class Component extends HTMLElement {
         }
     }
 
+    get (key) {
+        return this.values_[key].get();
+    }
+
     connectedCallback () {
         console.log('connectedCallback called')
         this.on_ready && this.on_ready(this.get_api_());
     }
 
-    attach (placeholder) {
+    attach (destination) {
         const el = this.create_element_();
         this.dom_.appendChild(el);
-        placeholder.replaceWith(this);
+
+        if ( destination instanceof HTMLElement ) {
+            destination.appendChild(this);
+            return;
+        }
+
+        if ( destination.$ === 'placeholder' ) {
+            destination.replaceWith(this);
+            return;
+        }
+
+        // TODO: generalize displaying errors about a value;
+        //   always show: typeof value, value.toString()
+        throw new Error(`Unknown destination type: ${destination}`);
     }
 
     place (slot_name, child_node) {

src/util/Placeholder.js

@@ -21,6 +21,7 @@
 const Placeholder = () => {
     const id = Placeholder.get_next_id_();
     return {
+        $: 'placeholder',
         html: `<div id="${id}"></div>`,
         id,
         replaceWith: (el) => {