atomicojs / atomico

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
https://atomicojs.dev
MIT License
1.15k stars 43 forks source link

[feat] Support of Signals #124

Open motss opened 6 months ago

motss commented 6 months ago

Is your feature request related to a problem? Please describe. I knew that there is already an existing useProp() and useState() which already do their job just nice. I wonder if Signals is a valid feature to be considered in atomico.

Describe the solution you'd like

import { html, useSignal } from 'atomico';

function MyComponent() {
  const $count = useSignal(0);

  return html`
  <host shadowDom>
    <button onclick=${() => $count.value--}>-</button>
    <span>${count.value}</span>
    <button onclick=${() => $count.value++}>+</button>
  </host>
  `;
}

Describe alternatives you've considered useState() does the same thing already.

Additional context

Prior arts:

  1. Solid's Signals
  2. Preact's Signals
  3. Qwik's Signals
UpperCod commented 6 months ago

Hi @motss , it depends on the benefits. Currently, a syntax similar to signals can be achieved based on useHost.

import { html, useHost } from 'atomico';

function myComponent() {
  const { current } = useHost<typeof MyComponent>();

  return html`
    <host shadowDom>
      <button onclick=${() => current.value--}>-</button>
      <span>${current.value}</span>
      <button onclick=${() => current.value++}>+</button>
    </host>
  `;
}

myComponent.props = { count: { type: Number, value: 0 } };

export const MyComponent = c(myComponent);

customElements.define("my-component", MyComponent);

By the way, I generated a post on Discord at some point to propose an alternative to signals: Discord Post. I invite you to participate on Discord.