Hi All, I've created a new frontend framework. It's designed to make the most common front end task very fast to write.
I've found that during my time as a front end developer the amount of time spent wiring stuff in ways that could be automated was high enough to build something new.
I'll start by introducing a few concepts that used to take a up a lot of my time.
Event Binding: you can now tag things with on:click="^update(color=key)" and it i will call the on:update handler of any parent node with the value of key as the property color.
Property Renaming: color=key is sending the value of key as the property color as the event propagates.
Access to the target and handler element: each event contains a target and dest prop so it's easy to do things with all the elements involved. vars contains any variables on either element to make it easy to do stuff!
Styles and Classes on the fly: Styles can be built per element, you'll notice in the example that
base-style="background-color: ${key}"creates a new style rule as.custom-element-6 { background-color: rgb(187, 0, 0);}from the data{name: "Red", key: "#B00"}for that element.
It's still in development and getting cleaner with every generation.
Top comments (0)