{"id":19215,"library":"babel-plugin-transform-redom-jsx","title":"babel-plugin-transform-redom-jsx","description":"A Babel plugin that transforms JSX into RE:DOM element creation calls (el, text). Current stable version is 3.0.6. The plugin converts JSX syntax to RE:DOM's el() function calls, with support for component classes and this-assignment for direct DOM access. It requires Babel 7+ and is used alongside @babel/plugin-transform-react-jsx (or similar) with a pragma set to 'el'. Unlike generic JSX-to-hyperscript transforms, this plugin is specifically optimized for RE:DOM's reactive DOM patching and component lifecycle.","status":"active","version":"3.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/tomerigal/babel-plugin-transform-redom-jsx","tags":["javascript","babel","redom","jsx"],"install":[{"cmd":"npm install babel-plugin-transform-redom-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-redom-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-redom-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency needed for Babel plugin compatibility","package":"@babel/core","optional":false},{"reason":"Peer dependency needed to parse JSX syntax","package":"@babel/plugin-syntax-jsx","optional":false}],"imports":[{"note":"This is a Babel plugin, typically used in .babelrc config string, not imported directly.","wrong":"","symbol":"default","correct":"import plugin from 'babel-plugin-transform-redom-jsx'"},{"note":"el is from the redom package, this plugin transforms JSX to el calls.","wrong":"import { el } from 'babel-plugin-transform-redom-jsx'","symbol":"el","correct":"import { el } from 'redom'"},{"note":"text is from redom package; plugin transforms JSX text nodes to text() calls.","wrong":"import { text } from 'babel-plugin-transform-redom-jsx'","symbol":"text","correct":"import { text } from 'redom'"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    \"babel-plugin-transform-redom-jsx\",\n    [\"@babel/plugin-transform-react-jsx\", { \"pragma\": \"el\" }]\n  ]\n}\n\n// App.js\nimport { el, mount } from 'redom';\n\nclass Hello {\n  constructor() {\n    <div this=\"el\">\n      <h1>Hello, World!</h1>\n    </div>;\n  }\n}\n\nmount(document.body, <Hello />);","lang":"javascript","description":"Shows minimal Babel config and a RE:DOM component using JSX transformed to el() calls."},"warnings":[{"fix":"Update JSX to standard component usage; see README for examples.","message":"v3.0.0 changed handling of component JSX. Use <Component /> syntax, not special handling.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade to Babel 7 or use v1.x.","message":"v2.0.0 requires Babel 7+. Babel 6 is not supported.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update JSX to use standard component pattern from v2.0.0+.","message":"Old v1.x patterns using special handling for component JSX are removed in v2.0.0.","severity":"deprecated","affected_versions":"<2.0.0"},{"fix":"Add both plugins to Babel config as shown in README.","message":"You must also include @babel/plugin-transform-react-jsx (or equivalent) with pragma 'el'.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev babel-plugin-transform-redom-jsx and ensure .babelrc is correct.","cause":"Plugin not installed or Babel config not recognized.","error":"Unknown plugin \"babel-plugin-transform-redom-jsx\""},{"fix":"Add 'import { el } from \"redom\";' to your file.","cause":"el function not imported from redom.","error":"ReferenceError: el is not defined"},{"fix":"Add @babel/plugin-transform-react-jsx with pragma 'el' to your plugins.","cause":"Missing @babel/plugin-transform-react-jsx or stale Babel config.","error":"Support for the experimental syntax 'jsx' isn't currently enabled"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}