
Research
Security News
Lazarus Strikes npm Again with New Wave of Malicious Packages
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
babel-plugin-jsx-dom-expressions
Advanced tools
A JSX to DOM plugin that wraps expressions for fine grained change detection
This package is to provide a general JSX to DOM transformation for reactive libraries that do fine grained change detection. These libraries rely on concepts like Observables and Signals rather than Lifecycle functions and the Virtual DOM. Standard JSX transformers are not helpful to these libraries as they need to evaluate their expressions in isolation to avoid re-rendering unnecessary parts of the DOM. This package aims to convert JSX statements to native DOM statements and wrap JSX expressions with functions that can be implemented with the library of your choice. Sort of like a JSX to Hyperscript for fine change detection.
This plugin would allow you to take a library like KnockoutJS or MobX and use them independent of their current render systems using a small library to render pure DOM expressions. So instead of the data-bind's or managing shouldComponentUpdate, you use simple JSX to leverage the fine grain computation like libraries are capable of. The idea is this completely replaces the DOM interaction. So while you could write a data-bind, you wouldn't. This approach is still relatively new but has been proven to be very performant (See SurplusJS on JS-Frameworks-Benchmark)
This plugin treats all lowercase tags as html elements and mixed cased tags as Custom Functions. This enables breaking up your view into functional components. This library supports Web Compoenent Custom Elements spec. Support for common camelcase event handlers like React, dom safe attributes like class and for, a simple ref property, and parsing of objects for style, and classList properties. Support for JSX fragment elements.
The name of the runtime the compiler will output. Defaults to 'r'.
By default the plugin skips expressions that are only white space. You can set this to true if you wish it not to skip.
To write a runtime you pass an object with the following methods to the createRuntime method:
This is called around all expressions. This is typically where you wrap the expression with a computation in the desired library and handle any value preparsing. Call fn with the resolved value and element.
This binding will assign the variable you pass to it with the DOM element
These will be treated as event handlers expecting a function.
This takes a custom method that passes the element as a parameter. You can add as many as you want.
This takes an object and assigns all the keys which are truthy.
Keep in mind given the independent nature of binding updates there is no guarentee of order using spreads at this time. It's definitely an area for improvement.
In order to optimize certain situations the compiler supports pragma comments.
This skips calling the wrap handler. Keep in mind if the element is in a parent expression it may unintentionally trigger it.
This is still early in the works. I'm still consolidating what methods should be helpers or end user provided. My goal here is to better understand and generalize this approach to provide non Virtual DOM alternatives to developing web applications. In a sense when React hit the scene it brought with it tools and approaches that were light years ahead of the competition but also prematurely dismissed other approaches that were more optimized in other ways. I hope being able to leverage JSX evens the playing field a bit.
I'm mostly focusing early on where I can make the biggest conceptual gain so the plugin lacks in a few key places most noticeably limited support for SVG. I intend to get a few working examples up of library wrapper implementations.
TODOS:
The JSX to DOM basis is built on top of babel-plugin-jsx-to-dom. The concept of using JSX to DOM instead of html strings and context based binding usually found in these libraries was inspired greatly by Surplus. If you want to use a library today that employs a further optimized version of these techniques you should check it out.
FAQs
A JSX to DOM plugin that wraps expressions for fine grained change detection
The npm package babel-plugin-jsx-dom-expressions receives a total of 92,055 weekly downloads. As such, babel-plugin-jsx-dom-expressions popularity was classified as popular.
We found that babel-plugin-jsx-dom-expressions demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.