Initial version to monorepo-setup to start experimenting with, featuring a fork of @babel JSX-transformation, and a crude VDOM>DOM rendering-step. The Custom-Elements part is just a placeholder at this point but ready to be populated with base-classes and decorators.
This commit is contained in:
28
test/index.jsx
Normal file
28
test/index.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
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: to be investigated further... is 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?)
|
||||
* - Nothing stops us from using
|
||||
*/
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
Reference in New Issue
Block a user