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

Support middleware transforms #110

Open
elierotenberg opened this issue Jul 26, 2017 · 0 comments
Open

Support middleware transforms #110

elierotenberg opened this issue Jul 26, 2017 · 0 comments

Comments

@elierotenberg
Copy link

elierotenberg commented Jul 26, 2017

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants