tc39 / proposal-signals

A proposal to add signals to JavaScript.
MIT License
3.05k stars 55 forks source link

We need your help to develop Signals! #95

Open littledan opened 2 months ago

littledan commented 2 months ago

There's a lot that you all can do to help, including:

NullVoxPopuli commented 2 months ago

I'm making a utility library here: https://github.com/NullVoxPopuli/signal-utils

The implementations and tests are going to be ports from other ecosystems :tada: I can also use this repo's tests to see how changes to the polyfill over time affect things!

Current structures / utils:

quantuminformation commented 2 months ago

Cool, I'll try it out here soon: https://github.com/quantuminformation/vanillajs-patterns

blackguard commented 2 months ago

I'm failing to get the example code shown in the readme to work (section: "Using signals"). This is the counter/isEven/parity example, and I am using the effect.js implementation shown there, too (section "Creating a simple effect"). I'm using node 21.7.3.

The problem is that the effect() callback is never run (except for the initial time). What am I doing wrong?

Note: I added a console.log() to the setInterval callback to make sure it is being called and, yes, it is, but no corresponding output from the effect() callback.

Note: I get the same behavior when using the signal-polyfill package from npm, or when directly using the polyfill built from this repository's packages/signal-polyfill subdirectory.

PS very excited about this, and looking forward to getting it to work!


UPDATE: I got this to work after changing the given example code for effect.js:

  1. changed initialization of needsEnqueue from false to true
  2. changed queueMicrotask.enqueue(...) to queueMicrotask(...)

Would it be possible to update the readme example?

NullVoxPopuli commented 2 months ago

Would it be possible to update the readme example?

of course! would you like to submit a PR? We also have a working example of the microtaskqueue effect here: https://github.com/proposal-signals/signal-utils/blob/main/src/subtle/microtask-effect.ts

yinxulai commented 1 month ago

I have developed a tsx application framework called airx that fully embraces Signal. It is designed for learning purposes. Here is a code snippet:

const count = new Signal.State(0);

function Counter() {
  const handleClick = () => {
    count.set(count.get() + 1);
  };

  return () => (
    <button onClick={handleClick}>
      count is {count.get()}
    </button>
  );
}

Quick demo: https://codesandbox.io/p/devbox/github/airxjs/vite-template/tree/signal/?file=%2Fsrc%2FApp.tsx%3A7%2C1