Unsure What I'm calling this

Trying a new way to compose Components

by Kye Hohenberger

HTML

<script src="https://unpkg.com/preact/dist/preact.min.js"></script>
<div id="o"></div>

CSS

html,
body,
#app,
.full-size {
  font-family: sans-serif;
  width: 100%;
  margin: 0;
}

.child-c.list {
  list-style: none;
  padding: 4px;
  border: 2px solid green;
}

Babel + JSX

const {
  h,
  Component: PreactComponent,
  render: preactRender
} = preact;
/** @jsx box */
console.clear();
const el = document.getElementById('o');
const pp = obj => JSON.stringify(obj, null, 2);
const stack = [];

const EMPTY_CHILDREN = [];
class CardboardBox {
  constructor(nodeName, attributes) {
    let children, lastSimple, child, simple, i;
    for (i = arguments.length; i-- > 2; ) {
      stack.push(arguments[i]);
    }
    if (attributes && attributes.children) {
      if (!stack.length) stack.push(attributes.children);
      delete attributes.children;
    }
    while (stack.length) {
      if ((child = stack.pop()) instanceof Array) {
        for (i = child.length; i--; )
          stack.push(child[i]);
      } else if (child != null && child !== true && child !== false) {
        if (typeof child == 'number') child = String(child);
        simple = typeof child == 'string';
        if (simple && lastSimple) {
          children[children.length - 1] += child;
        } else {
          (children || (children = [])).push(child);
          lastSimple = simple;
        }
      }
    }

    this.nodeName = nodeName;
    this.attributes = attributes || undefined;
    this._children = children || EMPTY_CHILDREN;

    // Alias
    this.hoc = this.map;
    return this;
  }

  get children() {
    console.log('get:children', this._children);
    return this._children.map(child => {
      if (typeof child === 'function') {
        return child(this.attributes);
      }
      return child;
    });
  }

  map(fn = C => props => box(C, props)) {
    return box(
      fn(props => box(this.nodeName, props)),
      this.attributes,
      this.children
    );
  }

  fold(fn = C => props => box(C, props)) {
    return fn(this.nodeName);
  }

  prop(key, value) {
    return this.map(
      C => class extends PreactComponent {
        render() {
          return box(
            C,
            Object.assign({}, this.props, {
              [key]: typeof value ===...