search

lit / lit-element

LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
https://lit-element.polymer-project.org
BSD 3-Clause "New" or "Revised" License
4.49k stars 319 forks source link

Functional API #1075

Closed gunar closed 4 years ago

gunar commented 4 years ago

Would be interesting to able to define components as pure functions—as opposed to extending classes.

justinfagnani commented 4 years ago

The render() method is already basically that, and the class allows for the declaration of properties.

Is there any specific you're trying to achieve with a pure function?

rbiggs commented 4 years ago

If you don't want classes, and would prefer a functional approach like React, you could just use Lit-Html. Lit-Element uses it under the hood to render the DOM: https://lit-html.polymer-project.org. It's really small, something like 3KB, and much faster than React at rendering. You can use it with Redux, using same patterns as React. But you'd be missing out on all the things that make Web components so great. Web Components are part of the browser platform. The DOM is object-oriented (Document Object Model), so it's class-based. Even though you might be using what you think are class-free techniques in JavaScript, such as using literals to create objects, arrays, etc., under the hood those are aliased to constructors that create new instances.

chase-moskal commented 4 years ago

@gunar

check out haunted!

functional react-hooks-style lit-html components :sunglasses: