babel-plugin-jsx-expressions

babel-plugin-jsx-expressions

Plugin to automatically wrap JSX expressions and spread attributes containing any member access with a computed signal.

This enables signal-safe expressions in JSX when using Preact with the Signals library.

Installation

npm install --save-dev @babel/core @preact/signals

Also install this plugin (locally or from your project):

npm install --save-dev babel-plugin-jsx-expressions

Usage with Babel

const { transformSync } = require("@babel/core");
const plugin = require("babel-plugin-jsx-expressions");

const result = transformSync(code, {
  filename: "file.tsx",
  plugins: [plugin],
  parserOpts: { sourceType: "module" },
  sourceMaps: true
});

Or in your babel.config.js:

module.exports = {
  plugins: ["babel-plugin-jsx-expressions"]
};

What it does

This plugin transforms JSX like:

<div>{foo.bar}</div>

into:

import { computed } from "@preact/signals";
<div>{computed(() => foo.bar)}</div>

It also works for JSX spread attributes:

<Component {...some.obj} />
// becomes
<Component {...computed(() => some.obj)} />

Notes

• The plugin ensures the Babel parser supports both jsx and typescript by injecting those parser plugins via manipulateOptions().
• Only expressions containing a MemberExpression (e.g. a.b) are wrapped.
• Nested JSX containers are handled correctly.

License

MIT