feat(signals-preact): add possibility of deferring effect execution to the next frame

[JoviDeCroock]

Resolve #228

This currently adds support for useEffect like execution to the useSignalEffect, this is supported by means of a new options second argument, which is an object that allows you to pass in a property named mode. By default we will do sync execution which is the behavior we have seen before, but we also allow for a new type of behavior, namely afterPaint which is the same method used as useEffect.

Currently I did not really see a need to add useLayoutEffect but we could in the future, for React we could implement this like the following:

export const useSignalEffect = (cb, opts) => {
  const [effectTrigger, setEffect] = useState(0);

  const effectFlush = useRef();
  const callback = useRef(cb);
  callback.current = cb;

  useEffect(() => {
    const notify = () => {
	if (mode === 'afterPaint') {
		setEffect((e) => e + 1)
	} else {
		eff.flush();
	}      
    }
    const eff = createFlusher(() => callback.current(), notify);
    effectFlush.current = eff.flush;
    return eff.dispose
  }, Empty);
  
  useEffect(() => {
    if (effectTrigger > 0) {
      effectFlush.current()
    }
  }, [effectTrigger]);
}

Do note that this would only trigger after updating the DOM-node if the relevant property is used on a DOM-node as well

demo

[changeset-bot]

🦋 Changeset detected

Latest commit: 62fd280

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@preact/signals	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for preact-signals-demo ready!

Name	Link
🔨 Latest commit	62fd280
🔍 Latest deploy log	https://app.netlify.com/sites/preact-signals-demo/deploys/63b6a819af81680008cab0f3
😎 Deploy Preview	https://deploy-preview-290--preact-signals-demo.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 settings.

[github-actions]

Size Change: +106 B (0%)

Total Size: 68.5 kB

Filename	Size	Change
docs/dist/assets/index.********.js	836 B	-243 B (-23%)	🎉
docs/dist/assets/signals.module.********.js	1.97 kB	-2 B (0%)
docs/dist/demos-********.js	3.35 kB	-1 B (0%)
packages/preact/dist/signals.js	1.37 kB	+167 B (+14%)	⚠️
packages/preact/dist/signals.mjs	1.33 kB	+185 B (+16%)	⚠️

ℹ️ View Unchanged

Filename	Size
docs/dist/assets/client.********.js	46.4 kB
docs/dist/assets/jsxRuntime.module.********.js	282 B
docs/dist/assets/preact.module.********.js	4 kB
docs/dist/assets/signals-core.module.********.js	1.36 kB
docs/dist/assets/style.********.js	21 B
docs/dist/assets/style.********.css	1.21 kB
docs/dist/basic-********.js	244 B
docs/dist/nesting-********.js	1.13 kB
docs/dist/react-********.js	239 B
packages/core/dist/signals-core.js	1.42 kB
packages/core/dist/signals-core.mjs	1.44 kB
packages/react/dist/signals.js	1 kB
packages/react/dist/signals.mjs	919 B

_{compressed-size-action}

[JoviDeCroock]

Closing due to inactivity

[luisherranz]

@JoviDeCroock, we've added this in our codebase and it's working great so far: WordPress/block-interactivity-experiments#226

The only problem is that we had to use the mangled properties instead:

// Using the mangled properties:
// this.c: this._callback
// this.x: this._compute
// https://github.com/preactjs/signals/blob/main/mangle.json
function createFlusher(compute, notify) {
	let flush;
	const dispose = effect(function () {
		flush = this.c.bind(this);
		this.x = compute;
		this.c = notify;
		return compute();
	});
	return { flush, dispose };
}

[luisherranz]

I changed the implementation a bit to ignore notifications that happen before the callback has been executed and thus prevent infinite loops:

• Interactivity API: add short-cirtuit to useSignalEffect WordPress/gutenberg#53358
• Stackblitz demo