PoC: hyperapp + twitter bootstrap

button.js

import { h } from 'hyperapp';

export const BUTTON_VARIANT_PRIMARY = 'primary';
export const BUTTON_VARIANT_SECONDARY = 'secondary';
export const BUTTON_VARIANT_SUCCESS = 'success';
export const BUTTON_VARIANT_DANGER = 'danger';
export const BUTTON_VARIANT_WARNING = 'warning';
export const BUTTON_VARIANT_INFO = 'info';
export const BUTTON_VARIANT_LIGHT = 'light';
export const BUTTON_VARIANT_DARK = 'dark';
export const BUTTON_VARIANT_LINK = 'link';

/**
 * @param {object} props 
 * @param {string} props.variant
 * @param {array} children 
 */
export default function Button({
    variant=BUTTON_VARIANT_PRIMARY,
    ...props,
}, children=null) {
    return (
        <button
            class={ `btn btn-${ variant }` }
            type="button"
            aria-haspopup="true"
            aria-expanded="false"
            { ...props }
        >{ children }</button>
    );
}

dropdown.js

import { h } from 'hyperapp';
import $ from 'jquery';
import Button from './button';
import { BUTTON_VARIANT_PRIMARY } from './button';

export * from './button';

/**
 * @param {object} params
 * @param {VNode} params.triggerContent
 * @param {string} params.triggerVariant
 * @param {boolean} params.right
 * @param {array} children
 */
export default function Dropdown({
    triggerContent=null,
    triggerVariant=BUTTON_VARIANT_PRIMARY,
    right=false,
}, children=null) {
    const dropdownId = `dropdown_${ Math.ceil(Math.random()*1000) }`;
    return (
        <div class="dropdown">
            <Button
                class={ `btn btn-${ triggerVariant } dropdown-toggle` }
                data-toggle="dropdown"
                oncreate={ element => $(element).dropdown() }
                ondestroy={ element => $(element).dropdown('dispose') }
            >{ triggerContent }</Button>
            <div
                class={ `dropdown-menu ${ right ? 'dropdown-menu-right': null }` }
                aria-labelledby={ dropdownId }
            >
                { children }
            </div>
        </div>
    );
}