Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] Support of Signals #124

Open
motss opened this issue Feb 19, 2024 · 1 comment
Open

[feat] Support of Signals #124

motss opened this issue Feb 19, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@motss
Copy link

motss commented Feb 19, 2024

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 motss added the enhancement New feature or request label Feb 19, 2024
@UpperCod
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants