Skip to content

feat: add jsxBind function to @preact/signals #724

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

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

aleclarson
Copy link

@aleclarson aleclarson commented Jul 11, 2025

Background

I briefly discussed this idea with @rschristian, who said I should try to implement it.

Link to discussion: https://preact.slack.com/archives/C3NMBSJKH/p1752172452437339

Goal

Avoid needing to declare "computed expressions" with useComputed, enabling you to write "inline computeds" where they're needed. This is intended for computeds that are only used by one JSX attribute or JSX child.

How It Works

It's as easy as wrapping a "computed callback" with jsxBind(…), a function exported by the @preact/signals package.

Key Features

  • Host elements only: Only host elements support this feature
  • No rerender updates: Just like useComputed, the callback does not update on rerender
  • Dual support: This implementation supports use in JSX attributes and JSX children

Current Limitations

Currently, there is no warning when trying to use jsxBind with a composite element, as this would require iterating the props object. Maybe someone has an idea about how to efficiently check for such misuse.

Naming

Originally, I named it bind(), but decided jsxBind() makes its purpose a bit clearer. Ultimately, the name is up to you guys. :)

Copy link

netlify bot commented Jul 11, 2025

Deploy Preview for preact-signals-demo ready!

Name Link
🔨 Latest commit 4604dd9
🔍 Latest deploy log https://app.netlify.com/projects/preact-signals-demo/deploys/687298e47ea3df0008a61d2d
😎 Deploy Preview https://deploy-preview-724--preact-signals-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

changeset-bot bot commented Jul 12, 2025

🦋 Changeset detected

Latest commit: 4604dd9

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

expect(scratch.innerHTML).to.equal("<div>Jane Doe</div>");
});

it("should update bound values without re-rendering the component", async () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a test where we first return JSX and then text or something, similar to the normal SignalValue component

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 👍

@JoviDeCroock
Copy link
Member

This is missing a changeset btw

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

Successfully merging this pull request may close these issues.

2 participants