Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@preact/signals-react-transform
Advanced tools
Readme
A Babel plugin to transform React components to automatically subscribe to Preact Signals.
Signals is a performant state management library with two primary goals:
Read the announcement post to learn more about which problems signals solves and how it came to be.
npm i --save-dev @preact/signals-react-transform
This package works with the @preact/signals-react
package to integrate signals into React. You use the @preact/signals-react
package to setup and access signals inside your components and this package is one way to automatically subscribe your components to rerender when the signals you use change. To understand how to use signals in your components, check out the Signals React documentation.
To setup the transform plugin, add the following to your Babel config:
// babel.config.js
module.exports = {
plugins: [["module:@preact/signals-react-transform"]],
};
Here is an example of a component using signals:
import { signal } from "@preact/signals-react";
const count = signal(0);
function CounterValue() {
// Whenever the `count` signal is updated, we'll
// re-render this component automatically for you
return <p>Value: {count.value}</p>;
}
After the babel transform runs, it'll look something like:
import { signal, useSignals } from "@preact/signals-react";
const count = signal(0);
function CounterValue() {
const store = useSignals(1);
try {
// Whenever the `count` signal is updated, we'll
// re-render this component automatically for you
return <p>Value: {count.value}</p>;
} finally {
store.f();
}
}
The useSignals
hook setups the machinery to observe what signals are used inside the component and then automatically re-render the component when those signals change. The f()
function notifies the tracking mechanism that this component has finished rendering. When your component unmounts, it also unsubscribes from all signals it was using.
Fundamentally, this Babel transform needs to answer two questions in order to know whether to transform a function:
Currently we use the following heuristics to answer these questions:
function MyComponent() {}
) and contains JSX..value
(i.e. something.value
), we assume it's a signal.If your function/component meets these criteria, this plugin will transform it. If not, it will be left alone. If you have a function that uses signals but does not meet these criteria (e.g. a function that manually calls createElement
instead of using JSX), you can add a comment with the string @useSignals
to instruct this plugin to transform this function. You can also manually opt-out of transforming a function by adding a comment with the string @noUseSignals
.
// This function will be transformed
/** @useSignals */
function MyComponent() {
return createElement("h1", null, signal.value);
}
// This function will not be transformed
/** @noUseSignals */
function MyComponent() {
return <p>{signal.value}</p>;
}
mode
The mode
option enables you to control how the plugin transforms your code. There are three modes:
mode: "auto"
(default): This mode will automatically transform any function that meets the criteria described above. This is the easiest way to get started with signals.mode: "manual"
: This mode will only transform functions that have a comment with the string @useSignals
. This is useful if you want to manually control which functions are transformed.mode: "all"
: This mode will transform all functions that appear to be Components, regardless of whether or not they use signals. This is useful if you are starting a new project and want to use signals everywhere.// babel.config.js
module.exports = {
plugins: [
[
"@preact/signals-react-transform",
{
mode: "manual",
},
],
],
};
importSource
The importSource
option enables you to control where the useSignals
hook is imported from. By default, it will import from @preact/signals-react
. This is useful if you want to wrap the exports of the @preact/signals-react
package to provide customized behavior or if you want to use a different package entirely. Note: if you use a different package, you'll need to make sure that it exports a useSignals
hook with the same API & behavior as the one in @preact/signals-react
.
// babel.config.js
module.exports = {
plugins: [
[
"@preact/signals-react-transform",
{
importSource: "my-signals-package",
},
],
],
};
This plugin uses the debug
package to log information about what it's doing. To enable logging, set the DEBUG
environment variable to signals:react-transform:*
.
MIT
, see the LICENSE file.
FAQs
Manage state with style in React
The npm package @preact/signals-react-transform receives a total of 2,073 weekly downloads. As such, @preact/signals-react-transform popularity was classified as popular.
We found that @preact/signals-react-transform demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.