import {render} from "../packages/csx-custom-elements/lib";
import style from "./index.scss";

document.body.appendChild(render(<style>{style}</style>));
document.body.appendChild(render(<div class="center-me" iCanDoUpperCaseAttrs={ "yes" }>
    <h1>I am a title!</h1>
</div>));


/**
 * Findings:
 *  - JSX does not allow dot-notation in attributes: language error
 *  - Current code lower-cases attributes that result: this a limitation of setAttribute
 *  - React uses on<EventName> to capture events and the IDE auto-suggests using this (can we generalize this approach for customEvents?)
 */

/**
 * Continuation suggestionss:
 *  - ref={...} does not work yet
 *  - style-attribute untested
 *  - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
 *  - Need to support update an existing DOM-tree to a VNode-tree
 *  - Need to support the key-attribute for lists (linking with previous to have an idea how to update DOM-tree efficiently, are we going atomico/react/prect style diffing with a Virtual-DOM?)
 *  - <Host> and <ShadowDom> special handlers
 *  - Supporting fragments <>...</>?
 *  - Try working towards a simple ToDo-MVC application
 */