Skip to content

Expose an API to preprocess the VDOM tree before diffing #2174

@jussi-kalliokoski

Description

@jussi-kalliokoski

One really positive feature of React is the ability to do proper logic for layout, e.g. you can do grids that scale both ways, take into account screen size and content size and so on. However, the reusability of such solutions is not often quite optimal.

There are solutions such as GSS that allow you to define things like this in a reusable manner, they're usually supported only in the most recent browsers (which would be easier to solve for React-based solutions, since virtual DOM doesn't depend on the browser) and also hooking them up to possible changes in the tree is tedious and hard to get right without sacrificing performance.

Allowing user-code to pre-process the virtual DOM tree before the diffing would open the doors for a whole new world of styling engines to born into, where reading from the virtual DOM tree is fast, as well as making changes to it. The implications vary from styling languages being able to define custom values such as aspect-ratio to apply a CSS aspect ratio hack, or inject extra DOM elements to make things centered based on the className of the element, while keeping the user-code intent-oriented and clear, abstracting away the common pains of CSS.

I realize that this is not a simple change of adding a hook somewhere, but instead means exposing a vast amount of API surface that's currently considered implementation details. This is also even more problematic in cases where shouldComponentUpdate is involved. However, I think this would have the potential to revolutionize how we deal with styling web pages, so I'd say it's worth thinking through at least.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions