feat(core): useConstant, createSignal, createComputed$

[wmertens]

This adds the following APIs:

• useConstant(value): stores a fixed value for the lifetime of the component
• createSignal(value): same as useSignal but can be called a variable amount of times and always returns a new Signal
• createComputed$(cb): same as createSignal but for computed signals

Note that the create* API calls still need to run within the component context. This is only available inside the render function and the useConst callback.

Perhaps we should also make the context available inside tasks, as long as we forbid calling hooks (by forbidding useSequentialContext).

Example:

  const signals = useConstant(() => {
    const arr: (Signal<number> | string)[] = [];
    for (let i = 0; i < 10; i++) {
      arr.push(createSignal(0));
      arr.push(", ");
    }
    return arr;
  });
  const doubles = useConstant(() =>
    signals.map((s: Signal<number> | string) =>
      typeof s === "string" ? s : createComputed$(() => s.value * 2),
    ),
  );

TODO

• make createSignal work at any time. Does it really need the container context?
• make createComputed$ not need a Task so it's not bound to an element, or else don't add this yet. Ideally, the qrl is called and cached in the getter, and when one of the used signals changes the cache is cleared and subs triggered.

[netlify]

✅ Deploy Preview for qwik-insights ready!

Name	Link
🔨 Latest commit	ad15e34
🔍 Latest deploy log	https://app.netlify.com/sites/qwik-insights/deploys/6646b8230eee3b000865244e
😎 Deploy Preview	https://deploy-preview-6319--qwik-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cloudflare-pages]

Deploying qwik-docs with    Cloudflare Pages

Latest commit:	ad15e34
Status:	✅  Deploy successful!
Preview URL:	https://b43a090e.qwik-8nx.pages.dev
Branch Preview URL:	https://createsignal.qwik-8nx.pages.dev

View logs

[mhevery]

Nice work!

[gioboa]

You rock 🚀

[PatrickJS]

@wmertens can we merge this and have the TODO in another PR?

[wmertens]

I merged because I think the API will remain the same even though we'll be able to call it in more places.

Here's how to use it dynamically within the component render function. This could also be part of a hook function that forces rerenders.

import { component$, useConstant, createSignal, useSignal, useTask$ } from '@builder.io/qwik';

export default component$(() => {
  const rerender = useSignal(0)
  // force rerender by referencing the signal in the render body
  console.log('render', rerender.value)

  const sigs = useConstant([])

  sigs.push(createSignal(0))

  useTask$(({track}) => {
    track(rerender)
    for (const s of sigs) s.value++
  })

  return (
    <main>
      <div>Counts: {sigs.map(s => <span>{s.value}, </span>)}</div>
      <p>
        <button onClick$={() => rerender.value++}>Click</button>
      </p>
    </main>
  );
});