Replace html-to-react with html-react-parser by emlynmac · Pull Request #3995 · Azure/communication-ui-library

emlynmac · 2024-01-10T17:10:47Z

What

Replace non-typescript html-to-react with a the html-react-parser.

Why

html-to-react has typings that are too loose and the html-react-parser seems to be the more widely used solution with more github stars.
https://npmtrends.com/html-react-parser-vs-html-to-react.
The html-react-parser has a clearer API and seems to reduce our bundle size considerably.

How Tested

CI and storybook

Process & policy checklist

I have updated the project documentation to reflect my changes if necessary.
I have read the CONTRIBUTING documentation.

Is this a breaking change?

This change causes current functionality to break.

github-actions · 2024-01-10T17:14:46Z

Storybook URL https://60c7ae6891f0e90039d7cd54-rskilmszut.chromatic.com/

github-actions · 2024-01-10T17:18:45Z

Storybook URL https://60c7ae6891f0e90039d7cd54-ccwofuilui.chromatic.com/

github-actions · 2024-01-10T17:20:31Z

Chat bundle size is decreased✅.

Current size: 1437631
Base size: 1532384
Diff size: -94753

github-actions · 2024-01-10T17:20:36Z

Calling bundle size is not changed.

Current size: 5621579
Base size: 5621579
Diff size: 0

github-actions · 2024-01-10T17:20:37Z

CallWithChat bundle size is decreased✅.

Current size: 6341759
Base size: 6436527
Diff size: -94768

github-actions · 2024-01-10T17:49:50Z

Storybook URL https://60c7ae6891f0e90039d7cd54-ogiundqdqe.chromatic.com/

github-actions · 2024-01-10T17:54:35Z

@azure/communication-react jest test coverage for beta.

	Lines	Statements	Functions	Branches
Base	44155 / 71074 62.12%	44155 / 71074 62.12%	914 / 1995 45.81%	2582 / 4209 61.34%
Current	44140 / 71035 62.13%	44140 / 71035 62.13%	908 / 1989 45.65%	2586 / 4203 61.52%
Diff	-15 / -39 0.01%	-15 / -39 0.01%	-6 / -6 -0.16%	4 / -6 0.18%

emlynmac · 2024-01-10T17:54:35Z

+          );
+        }
+      }
+      // Pass through the original node


The casting is needed as the underlying library wraps this in a function to hide the casting to any.

https://github.com/remarkablemark/html-react-parser/blob/master/src/dom-to-react.ts#L36C35-L36C35

github-actions · 2024-01-10T17:54:37Z

@azure/communication-react jest test coverage for stable.

	Lines	Statements	Functions	Branches
Base	21959 / 34647 63.37%	21959 / 34647 63.37%	595 / 1039 57.26%	1728 / 2732 63.25%
Current	22008 / 34628 63.55%	22008 / 34628 63.55%	592 / 1036 57.14%	1721 / 2734 62.94%
Diff	49 / -19 0.18%	49 / -19 0.18%	-3 / -3 -0.12%	-7 / 2 -0.31%

JamesBurnside

Wow that bundle size reduction! On that alone let's get this checked in 😄
Would be good to get this into selfhost as soon as possible to get extra coverage if this behaves any different to the previous package

* [Calling sounds] Stabilize Calling sounds feature (#3969) * stabilize sounds * Change files * Duplicate change files for beta release * build beta API * fix breaking change * build API files * update stable API --------- Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> * Fix `noInvalidAny` chat composites (#3987) * [DTMF Dialler] Enable DTMF mode and dialing out mode in dialpad (#3970) * remove code forcing end of number to be edit with key * Change files * Duplicate change files for beta release * add editing mode for dialing and dtmf default * disable input on click if there is no editing * remove ref * build API * fix test for new API * [InlineImage][Test] Resolve resource not found error for inline image placeholder UITest (#3979) * Resolve resource not found error for inline image placeholder UITest * Update UI Testing doc Signed-off-by: Patrick Latter <73612854+palatter@users.noreply.github.com> * Resolve issue with inline image placeholder test * Change files * Duplicate change files for beta release --------- Signed-off-by: Patrick Latter <73612854+palatter@users.noreply.github.com> * Fix up typing on chat components (#3988) * Replace html-to-react with html-react-parser (#3995) * Enable noImplicitAny in chat-stateful-client (#3998) * Enable noImplicitAny in the chat sample (#4000) * Update component examples for noImplicitAny (#4001) * Make Calling Sample textfield validate the Teams user id format (#3967) * Prevent dialpad unecessarily triggering onChange event (#3963) * [DTMF Dialer] Update Dialpad styles per designs (#3999) * Update Dialpad styles per designs * Change files * Duplicate change files for beta release * fix alignment * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * sizing * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * [Calling] Send reaction button component (#3997) * Add Spotlight feature to stateful call client (#3993) * Add Spotlight feature to stateful call client * Change files * Duplicate change files for beta release * update api * mark spot light feature as in progress * added code docs * Add spotlight feature selectors and handlers (#4004) * Add Spotlight feature to stateful call client * Change files * Duplicate change files for beta release * update api * mark spot light feature as in progress * update api * Add Spotlight selectors and handlers * Change files * Duplicate change files for beta release * remove ununsed import * remove duplicate handlers already in common calling handlers * memoize spotlightedParticipantIds * remove 'on' prefix from spotlight adapter functions * fix conditional compilation * added code docs * small edit * Change hidesurvey to disablesurvey based on ARB (#4006) * hide survey * Change files * Duplicate change files for beta release --------- Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> * [Calling Deps] Update to new Calling beta (#4008) * update to new Calling beta * Change files * Duplicate change files for beta release * cc new type * fix hermetic * fix test mock * Update packages/react-composites ChatComposite browser test snapshots --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Add callback when survey is dismissed for selfhost (#4009) * add callback for survey dismissed to selfhost * Change files * Duplicate change files for beta release * build files * [Calling] Send reaction component calling-component-binding and composite changes (#4003) * Add license field for package.json files (#4018) * [Chat] Remove inline image from stable (#4010) * Revert "[Chat] Remove file card group message from stable API (#3940)" This reverts commit 74a97ba. * Revert "[Chat] Rename ImageGallery related Chat Theme (#3936)" This reverts commit 98b9f7d. * Revert Inline Image GA changes * Fix lint issues * Change files * Duplicate change files for beta release * Separate file sharing with inline image * Remove test CC * Update FileDownloadCards.test.tsx * Update ChatScreen.tsx * Merge strings back into main (#4025) * TDBuild - updating localized resource files. * Improve CI workflow (#4016) * Lock Files * Change files * Duplicate change files for beta release * Update lock files * Skip compare jest coverage and compare bundle size CI steps for PRs to release (#4026) * Skip jest test coverage and compare bundle stats steps when base branch is a release branch * Change files * Duplicate change files for beta release * [OCE] Remove beta banner for features that are stable (#4031) * remove sounds beta banner * Change files * Duplicate change files for beta release * [Calling] Applying capability for Reaction feature (#4013) * Fix calling sample joining room with room id query arg (#4032) * Fix calling sample to be able to join room with roomId query arg * Change files * Duplicate change files for beta release * Update packages/react-composites ChatComposite browser test snapshots * Update packages/react-composites ChatComposite browser test snapshots --------- Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> Signed-off-by: Patrick Latter <73612854+palatter@users.noreply.github.com> Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> Co-authored-by: Emlyn Bolton <3941071+emlynmac@users.noreply.github.com> Co-authored-by: James Burnside <2684369+JamesBurnside@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Mohtasim <99507832+Mohtasim@users.noreply.github.com> Co-authored-by: mgamis-msft <79475487+mgamis-msft@users.noreply.github.com> Co-authored-by: carocao-msft <96077406+carocao-msft@users.noreply.github.com> Co-authored-by: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Co-authored-by: Leah Xia <107075081+Leah-Xia-Microsoft@users.noreply.github.com> Co-authored-by: edwardlee-msft <edwardlee@microsoft.com>

emlynmac added 2 commits January 10, 2024 09:08

Replace html-to-react with html-react-parser

dd2acbb

Change files

ca1c131

Duplicate change files for beta release

d9e3162

Fix up passing through of nodes.

ce47191

emlynmac assigned JoshuaLai and vhuseinova-msft Jan 10, 2024

emlynmac commented Jan 10, 2024

View reviewed changes

emlynmac marked this pull request as ready for review January 10, 2024 17:54

emlynmac requested review from a team as code owners January 10, 2024 17:55

emlynmac requested review from AmyL219, JamesBurnside, PorterNan, alkwa-msft, carocao-msft, dmceachernmsft, edwardlee-msft, jimchou-dev, mgamis-msft and prabhjot-msft January 10, 2024 17:55

emlynmac requested review from JoshuaLai, Leah-Xia-Microsoft, jpeng-ms, palatter, vhuseinova-msft and waynemo January 10, 2024 17:55

emlynmac assigned JamesBurnside Jan 10, 2024

JamesBurnside approved these changes Jan 10, 2024

View reviewed changes

vhuseinova-msft approved these changes Jan 10, 2024

View reviewed changes

emlynmac merged commit 3383b3c into main Jan 10, 2024

emlynmac deleted the emlyn/html-react-parser branch January 10, 2024 18:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace html-to-react with html-react-parser#3995

Replace html-to-react with html-react-parser#3995
emlynmac merged 4 commits intomainfrom
emlyn/html-react-parser

emlynmac commented Jan 10, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

emlynmac Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

JamesBurnside left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

emlynmac commented Jan 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

How Tested

Process & policy checklist

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chat bundle size is decreased✅.

Uh oh!

github-actions Bot commented Jan 10, 2024

Calling bundle size is not changed.

Uh oh!

github-actions Bot commented Jan 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CallWithChat bundle size is decreased✅.

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024

@azure/communication-react jest test coverage for beta.

Uh oh!

emlynmac Jan 10, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 10, 2024

@azure/communication-react jest test coverage for stable.

Uh oh!

JamesBurnside left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

emlynmac commented Jan 10, 2024 •

edited

Loading

github-actions Bot commented Jan 10, 2024 •

edited

Loading

github-actions Bot commented Jan 10, 2024 •

edited

Loading