Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example for polyfilling DOMParser in Node #10782

Merged

Conversation

fabianishere
Copy link
Contributor

This pull request addresses #10533 and updates the with-react-intl example to show the user how they can enable support for FormattedHTMLMessage on the server by polyfilling DOMParser.

I have disabled the polyfill by default since the dependency on xmldom (or jsdom) might be a little heavy if you are not using FormattedHTMLMessage (which is a legacy feature and not recommended anyway). Though, this dependency is only included on the server so that might be not as big of an issue. What do you think?

Fixes #10533

@ijjk
Copy link
Member

ijjk commented Mar 2, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
buildDuration 9.3s 9.3s ⚠️ +3ms
nodeModulesSize 56.3 MB 56.3 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
main-HASH.js gzip 5.41 kB 5.41 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55 kB 55 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
main-HASH.module.js gzip 4.44 kB 4.44 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51 kB 51 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
_app.js gzip 1.07 kB 1.07 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.27 kB 5.27 kB
Client Build Manifests
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
index.html gzip 925 B 925 B
link.html gzip 935 B 935 B
withRouter.html gzip 923 B 923 B
Overall change 2.78 kB 2.78 kB

Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
buildDuration 10.1s 10.4s ⚠️ +361ms
nodeModulesSize 56.3 MB 56.3 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
main-HASH.js gzip 5.41 kB 5.41 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55 kB 55 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
main-HASH.module.js gzip 4.44 kB 4.44 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51 kB 51 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
_app.js gzip 1.07 kB 1.07 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.27 kB 5.27 kB
Client Build Manifests
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary fabianishere/next.js example/react-intl-domparser Change
_error.js gzip 292 kB 292 kB -831 B
404.html gzip 1.33 kB 1.33 kB
hooks.html gzip 964 B 964 B
index.js gzip 292 kB 292 kB ⚠️ +18 B
link.js gzip 299 kB 299 kB -39 B
routerDirect.js gzip 298 kB 299 kB ⚠️ +1.14 kB
withRouter.js gzip 298 kB 298 kB -10 B
Overall change 1.48 MB 1.48 MB ⚠️ +275 B

Commit: 4240c2e

@karlhorky
Copy link
Contributor

karlhorky commented Mar 30, 2020

Is this now obsolete with v4 now that they have removed dependency on DOMParser?

Remove dependency on DOMParser and restrictions on void element like . This effectively means you don't need to polyfill DOMParser in Node anymore.

Changelog link: https://github.com/formatjs/react-intl/blob/master/CHANGELOG.md#400-2020-03-05

Maybe make this only a note for pre-v4 versions?

@fabianishere
Copy link
Contributor Author

@karlhorky Good point! Will add a comment for this.

This change updates the README of the `react-intl` example to show how to use
the FormattedHTMLMessage component from `react-intl` in Node environments when
using pre-v4 versions.
@fabianishere fabianishere force-pushed the example/react-intl-domparser branch from 4240c2e to 4e9d4d9 Compare March 30, 2020 12:00
@timneutkens timneutkens merged commit 20f2b0b into vercel:canary Apr 6, 2020
@timneutkens
Copy link
Member

Thanks!

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

Successfully merging this pull request may close these issues.

[with-react-intl] - FormattedMessage HTML
4 participants