As I learned how to make Web Components using the Native Browser API I felt some improvements could easily be made to bring in many of the features we are used to when working with something like React. So first off here is my playlist where I go over how to create components with the Browser API.
https://www.youtube.com/playlist?list=PLY6oTPmKnKbaNVkXHOHWxgdKEZLGKuFP9
I create MercedUI a framework build on top of the Web Component API which gives you the following features in a 14kb size.
MercedElement: A base class that allows you to create components with Reactive State, Props, and Redux like global state management through static methods and properties.
m-router/m-link: Router components with a similar feel to react-router, but web components
FormTool: A class that can bind itself to a form element and makes it easy to edit, extract and clear information from a form.
captureProps: A function that can target any DOMelement and render its attributes into an object, so you can incorporate the props of elements into your logic.
getQueryHash: returns an object of any URL queries and hashes in the url
mapToString: a map function that maps over an array and concatenates the strings that are returned for creating template strings.
mapToDom: does what mapToString does but then maps the resulting template string to target Dom element.
bindData: works like mapToDom but allows you to pass data to be bound to the template and returns a function to update the data and re-render the template. Essentially a reactive non-component template.
To try out this framework, find tutorials and templates check out my website of Libraries here:
http://www.alexmercedcoder.com/jslib/
Top comments (0)