Estrela - a JavaScript library for building reactive web components inspired by lit

Last update: Oct 31, 2022

Related tags

Overview

Estrela ⭐

Full Reactive Web Components

Estrela is a JavaScript library for building reactive web components inspired by lit.

Just like Lit, Estrela is a boilerplate-killing component that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive. However, it allows you to choose either class or function based custom elements just like React.

For reactivity, Estrela extends RxJs observables to create the state of your component, so you will be able to subscribe and extend them with RxJs pipes.

Documentation

Head over to estrelajs.gitbook.io

Installation

To install:

# npm
npm install --save estrela

# yarn
yard add estrela

Example

Estrela takes advantage of web components. To define your custom element, you need to provide a class/function with a render function. Functional Elements will be called just once, so there's no need for hooks. You can just declare your variables and use them.

count.update(value => ++value), 1000); // Subscribe to value changes and do any kind of side effect you want. // e.g. update database on value changes. count.subscribe(console.log); // Return the template builder function. // The ":count" syntax is to bind the "count" prop on "app-counter". return () => html``; }; const Counter = () => { // Define a prop state. const count = prop
(); // Return the template builder function. // Note: calling the state value getter function is optional. return () => html`

Count is ${count}
`; }; defineElement('app-counter', Counter); defineElement('app-root', App); // index.html ...
 ">
// main.ts
import { defineElement, html, prop, state } from 'estrela';

const App = () => {
  // Count value state. Initial value = 0.
  const count = state(0);

  // To get the current state value, just call it like a normal function.
  console.log(count());

  // Change its state by calling "next" or "update" methods.
  // The "update" receives a callback function with the current value
  // as parameter and expects the next value to be returned.
  setInterval(() => count.update(value => ++value), 1000);

  // Subscribe to value changes and do any kind of side effect you want.
  // e.g. update database on value changes.
  count.subscribe(console.log);

  // Return the template builder function.
  // The ":count" syntax is to bind the "count" prop on "app-counter".
  return () => html`<app-counter :count=${count}>app-counter>`;
};

const Counter = () => {
  // Define a prop state.
  const count = prop<number>();

  // Return the template builder function.
  // Note: calling the state value getter function is optional.
  return () => html`<div>Count is ${count}div>`;
};

defineElement('app-counter', Counter);
defineElement('app-root', App);

// index.html
...
<body>
  <app-root></app-root>
</body>

Check more examples on docs.

Contributing

Estrela is open source and we appreciate issue reports and pull requests.

Instructions coming soon...

Web app for adding EU Digital COVID Certificates to your wallet apps

Dec 31, 2022

A Sequelize web builder interface. To make your own sequelize schema

Mar 9, 2022

Insider Unlocked is an ongoing web application

Insider Unlocked is an ongoing web application we have been co-developing for the past few months which aggregates stock trading data of US senators and presents it in a digestible manner for the average retail investor

Feb 13, 2022

A simple server application that allows you to perform Wake-on-LAN remotely with a web interface

WoL Helper A simple server application that allows you to perform Wake-on-LAN remotely with a web interface. Usage Install: npm install -g wol-helper

Jul 27, 2022

A Pauli Test simulation app made with Web Component and RxJS

There was a discussion quite a while ago in Teknologi Umum about brain throughput or something. Basically it was about how long does your brain can maintain its performance. It was brought up because there was a discussion about typing speed and how someone can get high Words per Minute at the start but starts to slow down the longer they go.

Jun 8, 2022

The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

List.js Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on

Jan 1, 2023

Comments

List Render Bug: when using observables and selectors, there are edge cases where the list stops rendering to the DOM as expected.
Hi, I just found out about this marvelous framework, and I am really loving the look of it and can't wait for its future.

I have spent a little bit of time playing around with observables and selectors to see what they are capable of, and have been extremely happy with them thus far. However, I have run into a small bug with the rendering of lists. It really only happens (as far as I can see) in one or two particular edge cases.

Reproduction repo: https://github.com/JaymanMDev/estrela-issue-reproduction

Reproduction steps:

clone repository and start up development server as usual with vite.

When you see the rendered DOM, a list of numbers will begin to show up on a 1 second interval.

Right clicking one of the list items will remove it from the DOM.

IMPORTANT: Ensure that you click on the first or second list items (before it ever exceeds that amount) in order to reproduce the edge case. No more items should show up if the reproduction worked.

bug
opened by ghost 7