Obviously, connect method is not pure - it is created especially for side effects, like adding event listeners. Thanks for the comment! In hybrids pure function term relates mainly to the property descriptor methods (get and set), where you don't mutate host element - it is only used to get dependencies. In the next post of the series, we will go deeper into the property descriptor definition and know more about the cache mechanism, change detection and independent connect method. What would you say if all of that was no longer needed? To cover those features, component-based libraries introduced sophisticated lifecycle methods and mechanisms for managing external and internal state.

They perform async calls, observe and react to changes in the internal and external state and many more. Usually, custom elements do much more than our simple example. The other two, property factories and property translation, allow simplifying the definition either further. The whole process has shown that it is possible to replace imperative and stateful class definition with a simple concept of property descriptors. In the last step we have created the simplest possible definition without class and this syntax, but with truly composable structure with pure functions. Here is the end of today's coding journey. In the result, custom element definition can be a simple structure of default values and pure functions without external dependencies: In another case, if you set property value as a function, it is translated to a descriptor object with get method. It supports primitives, functions, or even objects (without descriptors keys).įor example, if we set the value of the firstName property to a primitive, the library uses the built-in property factory to define it on the prototype of the custom element. The property translation concept provides a set of rules for translating property definition that does not match property descriptor structure. What could happen if we allowed passing primitives, functions, or even objects, but without defined methods? Our custom define function takes only descriptors, which are objects with pre-defined structure. We still have the last concept to follow. With the property factories concept, we can define properties with only one line of code! Factories hide implementation details and minimize redundant code. The goal here is to show how we can switch from class definition to plain object with pure functions.Įnter fullscreen mode Exit fullscreen mode Let's break down those concepts into the step by step process with a simple custom element definition.įor a better understanding of the process, we are going to use an example with minimal requirements of the Custom Elements API. The answer is a combination of three property-related concepts used together: property descriptors, property factories, and property translation. So, how is it possible that hybrids uses plain objects instead of classes? There is just no other way (you can also use function constructor with properly reflected super() call). However, the only way to create a custom element is to use a class, which extends HTMLElement, and define it with Custom Elements API. The hybrids library is the result of research on how we can take a different approach, and create simple and functional tools for building web components. #discuss #javascript #webdev #webcomponents

Hybridsjs unpkg