How to use virtual-dom - 10 common examples

private _createVNode(direction: EdgeDirection, name: string): vd.VNode {
        return vd.h(
            `span.Direction.Direction${name}`,
            {
                onclick: (ev: Event): void => {
                    this._navigator.moveDir$(direction)
                        .subscribe(
                            (node: Node): void => { return; },
                            (error: Error): void => { console.error(error); });
                },
            },
            []);
    }
}

render() {
    if (this.rendered) return this.rendered;
    let { chunks, height, width } = this;
    height += "px";
    return this.rendered = h("div",
      {style: {height, lineHeight: height}},
     chunks.map(ea => ea.render()));
  }
}

function jsx2vTree(jsxTree) {
    if (typeof jsxTree !== 'object') return jsxTree;
    let { elementName, attributes, children } = jsxTree;
    if (children) {
        let index = children.findIndex(c => Array.isArray(c));
        while (index !== -1) {
            children = children.slice(0, index).concat(
                children[index],
                children.slice(index + 1, children.length)
            );
            index = children.findIndex(c => Array.isArray(c));
        }
        children = children.map(c => jsx2vTree(c));
    }
    return h(elementName, handleAttr(attributes), children)
}

function specTo_h_svg(spec) {
      let {tagName, id, children, style} = spec,
          childNodes = children ? children.map(specTo_h_svg) : undefined;
      if (id) id = path.id + "-" + id;
      return h(tagName, {
        namespace: svgNs,
        id, style,
        attributes: obj.dissoc(spec, ["tagName", "id", "children", "style"])
      }, childNodes);
    }
  }

export function create(type, props, children, context) {
  let definition;
  props = fixProps(props || {});
  if (typeof type === 'string') {
    if (props.cssSelector) type += cssSelector;
    definition = h(type, props, children);
    definition.context = context;
  }
  else {
    definition = new ComponentThunk(type, props, children, context);
  }
  return definition;
}

function renderMarkerPart(textLayouter, morph, start, end, style) {
  var padding = morph.padding,
      {x,y} = textLayouter.boundsFor(morph, start),
      {height, x: endX} = textLayouter.boundsFor(morph, end);
  return h("div.marker-layer-part", {
    style: {
      zIndex: -4,
      ...style,
      position: "absolute",
      left: padding.left()+x + "px", top: padding.top()+y + "px",
      height: height + "px",
      width: endX-x + "px"
    }
  });
}

html(attrs, state) {
        const event_occurred_at = attrs.created_at;
        const event_id = attrs.id;
        const desc = attrs.data.filter((f) => f.key == 'description');
        const status = attrs.data.filter((f) => f.key == 'status');
        const rows = [h("h4", status.get('firstObject').value + " - " + desc.get('firstObject').value)];
        rows.push( h('i', { className: 'circle-' + status.get('firstObject').value + " " + 'pull-right' }));
        const createdAt = new Date(attrs.created_at);
        if (createdAt) {
            rows.push(h('h5.post-date', {}, dateNode(createdAt)));
        }

        return rows;
    }
});

private _getCoverBackgroundVNode(conf: ICoverConfiguration): vd.VNode {
        let url: string = conf.src != null ?
            `url(${conf.src})` :
            `url(https://d1cuyjsrcm0gby.cloudfront.net/${conf.key}/thumb-640.jpg)`;

        let properties: vd.createProperties = { style: { backgroundImage: url } };

        let children: vd.VNode[] = [];
        if (conf.loading) {
            children.push(vd.h("div.Spinner", {}, []));
        }

        children.push(vd.h("div.CoverBackgroundGradient", {}, []));

        return vd.h("div.CoverBackground", properties, children);
    }
}

private _getCoverBackgroundVNode(conf: ICoverConfiguration): vd.VNode {
        let url: string = conf.src != null ?
            conf.src : Urls.thumbnail(conf.key, ImageSize.Size640);

        let properties: vd.createProperties = { style: { backgroundImage: `url(${url})` } };

        let children: vd.VNode[] = [];
        if (conf.state === CoverState.Loading) {
            children.push(vd.h("div.Spinner", {}, []));
        }

        return vd.h("div.CoverBackground", properties, children);
    }
}

html() {
    const contents = [];
    contents.push(h("h3", I18n.t("admin_title")));

    buildManageButtons(this.attrs, this.currentUser, this.siteSettings).forEach(
      b => {
        b.secondaryAction = "closeAdminMenu";
        contents.push(this.attach("post-admin-menu-button", b));
      }
    );

    return contents;
  },