atomico icon indicating copy to clipboard operation
atomico copied to clipboard

[feat] Support of Signals

Open motss opened this issue 5 months ago • 1 comments

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

motss avatar Feb 19 '24 14:02 motss

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.

UpperCod avatar Feb 20 '24 17:02 UpperCod