import {render} from "../../packages/csx";
import style from "./index.scss";
import {ExamplePage} from "./page";

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

//document.body.appendChild(render(<example-page />));
document.body.appendChild(render(<ExamplePage pageWidth={200} />));

/**
 * Continuation suggestionss:
 *  - style-attribute untested
 *  - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
 *  - Supporting fragments <>...</>?
 */
// Private vars are visible, because of loose mode, not desirable...
class PrivTest{
    #privatevar = 1;
    get someVar(){
        console.log(Object.getOwnPropertyDescriptors(this));
        return this.#privatevar;
    }
}
let a = new PrivTest();
console.log(a);
console.log(a.someVar);

let preRenderedText = render("I can prerender text-nodes");
document.body.appendChild(render(preRenderedText));