Skip to content
This repository was archived by the owner on Feb 19, 2022. It is now read-only.
This repository was archived by the owner on Feb 19, 2022. It is now read-only.

Support middleware transforms #110

@elierotenberg

Description

@elierotenberg

More often than not, I find myself in the situation where I need to apply transforms at the HTML AST level. For example, I may want to replace all <a> tags with <span> tags (and perform the reverse transform before mounting the app on the client side). Or inline <script src> tags.

Currently, I do this in a very unperformant way: first I render the app using renderToString, then I use an HTML parser such as htmlparser2 (or a more convenient wrapper, such as cheerio).
The code looks like this;

const originalHtml = React.renderToString(<App />);
const $ = cheerio.load(originalHtml); // slow HTML parsing
applyTransforms($);
const transformedHtml = $.html(); // slow HTML stringification
res.send(transformedHtml);

As you can imagine, the generated markup is not necessarily valid to be mounted on the client side directly, but there are definitely cases where it would make sense. In some cases, a small helper script performing a reverse transform on the client side could be inserted.

I believe that since raspscallion already uses an internal lightweight tree representation, it would be feasible to expose this representation to transforms middlewares, and avoid a useless, costly stringify/parse step.
The code above could be rewritten like the following:

render(<App />)
 .use(transformNode)
 .toStream()
 .pipe(res);

If this feature would be acceptable to you, I'd be glad to give an implementation a try. I'm not very familiar with the codebase but I'm willing to deep dive into it to land this feature.

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