-
Notifications
You must be signed in to change notification settings - Fork 51
Support middleware transforms #110
Description
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.