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.

Sign up for GitHub

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

Jump to bottom

bug: EmojiOneColor and NotoColorEmoji fonts are being included in our bundled app even though the Emoji Picker is not used #2116

Closed
solestravis opened this issue Oct 5, 2023 · 6 comments · Fixed by #2117
Closed

bug: EmojiOneColor and NotoColorEmoji fonts are being included in our bundled app even though the Emoji Picker is not used #2116

solestravis opened this issue Oct 5, 2023 · 6 comments · Fixed by #2117
Labels
bug Something isn't working cluster:emoji Issues related to use of emojis dependencies Pull requests that update a dependency file released status:confirmed Described issue has been reproduced by the repo maintainer

Comments

@solestravis
Copy link

Describe the bug

EmojiOneColor and NotoColorEmoji-flag fonts are being included in our bundle for a CRA app even though they're not being used, and this is causing our bandwidth usage to go up by 330%, which is costing our company a ton of money.

To Reproduce

Steps to reproduce the behavior:

  1. Create a new react app
  2. Install stream-chat-react
  3. Create a sample app without any emoji picker functionality.
  4. Build the app with yarn build or npm build
  5. Inspect the resulting build, these fonts should be included in the assets folder even though the emoji picker is not being used.

Expected behavior

These files should not be included if the Emoji Picker is not being used in the app.

Screenshots

image

Bandwidth usage after adding this library to our site:

image

Package version
├─ @stream-io/stream-chat-css@3.13.0
├─ stream-chat-react@10.10.1
└─ stream-chat@8.11.0

Desktop (please complete the following information):

  • OS: MacOS 12.2
  • Browser Chrome
  • Version 117.0.5938.149 (Official Build) (arm64)

Smartphone (please complete the following information):

Irrelevant

Additional context

N/A
@solestravis solestravis added bug Something isn't working status: unconfirmed labels Oct 5, 2023
@arnautov-anton
Copy link
Contributor

Hey, @solestravis, we're currently working on dropping everything related/connected to emoji-mart from the SDK which in turn will resolve your issue as well. Unfortunately I can't give you an ETA at this time but keep an eye on this issue for future updates.

@arnautov-anton arnautov-anton added dependencies Pull requests that update a dependency file status:confirmed Described issue has been reproduced by the repo maintainer cluster:emoji Issues related to use of emojis and removed status: unconfirmed labels Oct 5, 2023
@solestravis
Copy link
Author

@arnautov-anton Thanks for the quick response. We implemented a post build script that deletes these files in the meantime.

This was referenced Oct 30, 2023
Closed
Merged
arnautov-anton added a commit that referenced this issue Nov 8, 2023
@arnautov-anton
Bump @stream-io/stream-chat-css to v4-rc (#2153)
d128509 
### 🎯 Goal

This PR bumps our CSS package to the latest RC version which separates
`emoji-mart` related styling rules and `emoji-replacement` (styling
rules for the `Chat.useImageFlagEmojisOnWindows` property) from the main
`index.css` to reduce final bundle size for integrators who do not wish
to use these stylesheets.

Fixes: #2116

NOTE: This PR is part of the `v11` release, it should should be merged
only after `v4` of `stream-chat-css` lands.
arnautov-anton added a commit that referenced this issue Nov 13, 2023
@arnautov-anton
Bump @stream-io/stream-chat-css to v4-rc (#2153)
4bbbe7c 
### 🎯 Goal

This PR bumps our CSS package to the latest RC version which separates
`emoji-mart` related styling rules and `emoji-replacement` (styling
rules for the `Chat.useImageFlagEmojisOnWindows` property) from the main
`index.css` to reduce final bundle size for integrators who do not wish
to use these stylesheets.

Fixes: #2116

NOTE: This PR is part of the `v11` release, it should should be merged
only after `v4` of `stream-chat-css` lands.
@arian921017
Copy link

@arnautov-anton
This is a very serious bug. We have also discovered that for no reason we will generate it into the build file without using the icon. Please resolve it as soon as possible.

image

@arnautov-anton
Copy link
Contributor

Hey, @arianshirepublik, in an ongoing effort to make builds of our integrators lighter in regards to emojis we've released 11.0.0-rc.3 which solves this issue. If you're not ready to start transitioning to v11 just yet I'd suggest you to install @stream-io/stream-chat-css@rc and import required styling file from there. This CSS build omits mentioned fonts.

import "@stream-io/stream-chat-css/dist/v2/css/index.css"
// import this only if you're using built-in EmojiPicker
import "@stream-io/stream-chat-css/dist/v2/css/emoji-mart.css"

For more information, please follow #1715.

arnautov-anton added a commit that referenced this issue Nov 14, 2023
@arnautov-anton
Bump @stream-io/stream-chat-css to v4-rc (#2153)
61400de 
### 🎯 Goal

This PR bumps our CSS package to the latest RC version which separates
`emoji-mart` related styling rules and `emoji-replacement` (styling
rules for the `Chat.useImageFlagEmojisOnWindows` property) from the main
`index.css` to reduce final bundle size for integrators who do not wish
to use these stylesheets.

Fixes: #2116

NOTE: This PR is part of the `v11` release, it should should be merged
only after `v4` of `stream-chat-css` lands.
@arian921017
Copy link

Hey, @arianshirepublik, in an ongoing effort to make builds of our integrators lighter in regards to emojis we've released 11.0.0-rc.3 which solves this issue. If you're not ready to start transitioning to v11 just yet I'd suggest you to install @stream-io/stream-chat-css@rc and import required styling file from there. This CSS build omits mentioned fonts.

import "@stream-io/stream-chat-css/dist/v2/css/index.css"
// import this only if you're using built-in EmojiPicker
import "@stream-io/stream-chat-css/dist/v2/css/emoji-mart.css"

For more information, please follow #1715.

Hey, @arianshirepublik, in an ongoing effort to make builds of our integrators lighter in regards to emojis we've released 11.0.0-rc.3 which solves this issue. If you're not ready to start transitioning to v11 just yet I'd suggest you to install @stream-io/stream-chat-css@rc and import required styling file from there. This CSS build omits mentioned fonts.

import "@stream-io/stream-chat-css/dist/v2/css/index.css"
// import this only if you're using built-in EmojiPicker
import "@stream-io/stream-chat-css/dist/v2/css/emoji-mart.css"

For more information, please follow #1715.

Hi @solestravis
I changed to version 11.0.0-rc.3 and it works normally. Thank you

@arnautov-anton arnautov-anton mentioned this issue Nov 15, 2023
Merged
arnautov-anton added a commit that referenced this issue Nov 22, 2023
@arnautov-anton
Bump @stream-io/stream-chat-css to v4-rc (#2153)
ae86e4c 
This PR bumps our CSS package to the latest RC version which separates
`emoji-mart` related styling rules and `emoji-replacement` (styling
rules for the `Chat.useImageFlagEmojisOnWindows` property) from the main
`index.css` to reduce final bundle size for integrators who do not wish
to use these stylesheets.

Fixes: #2116

NOTE: This PR is part of the `v11` release, it should should be merged
only after `v4` of `stream-chat-css` lands.
arnautov-anton added a commit that referenced this issue Nov 27, 2023
@arnautov-anton
Bump @stream-io/stream-chat-css to v4-rc (#2153)
adcf13f 
This PR bumps our CSS package to the latest RC version which separates
`emoji-mart` related styling rules and `emoji-replacement` (styling
rules for the `Chat.useImageFlagEmojisOnWindows` property) from the main
`index.css` to reduce final bundle size for integrators who do not wish
to use these stylesheets.

Fixes: #2116

NOTE: This PR is part of the `v11` release, it should should be merged
only after `v4` of `stream-chat-css` lands.
arnautov-anton added a commit that referenced this issue Nov 27, 2023
@arnautov-anton
Bump @stream-io/stream-chat-css to v4-rc (#2153)
fcccff4 
This PR bumps our CSS package to the latest RC version which separates
`emoji-mart` related styling rules and `emoji-replacement` (styling
rules for the `Chat.useImageFlagEmojisOnWindows` property) from the main
`index.css` to reduce final bundle size for integrators who do not wish
to use these stylesheets.

Fixes: #2116

NOTE: This PR is part of the `v11` release, it should should be merged
only after `v4` of `stream-chat-css` lands.
arnautov-anton added a commit that referenced this issue Nov 27, 2023
@arnautov-anton
Bump @stream-io/stream-chat-css to v4-rc (#2153)
c9ca96a 
This PR bumps our CSS package to the latest RC version which separates
`emoji-mart` related styling rules and `emoji-replacement` (styling
rules for the `Chat.useImageFlagEmojisOnWindows` property) from the main
`index.css` to reduce final bundle size for integrators who do not wish
to use these stylesheets.

Fixes: #2116

NOTE: This PR is part of the `v11` release, it should should be merged
only after `v4` of `stream-chat-css` lands.
arnautov-anton added a commit that referenced this issue Nov 27, 2023
@arnautov-anton
fix(emoji-mart): simplify EmojiPicker & emojiSearchIndex (#2117)
3657ed0 
BREAKING CHANGE: `EmojiPicker` & `EmojiIndex` signatures changed,
`EmojiIndex` has been renamed to `emojiSearchIndex`, both `EmojiPicker`
& `emojiSearchIndex` are now optional, see release guide for more
information
BREAKING CHANGE: `useImageFlagEmojisOnWindow` flag now requires extra
style sheet import, see release guide for more information

Fixes: #2116
Fixes: #2094
arnautov-anton added a commit that referenced this issue Nov 27, 2023
@arnautov-anton
fix(emoji-mart): simplify EmojiPicker & emojiSearchIndex (#2117)
8fd13e3 
BREAKING CHANGE: `EmojiPicker` & `EmojiIndex` signatures changed,
`EmojiIndex` has been renamed to `emojiSearchIndex`, both `EmojiPicker`
& `emojiSearchIndex` are now optional, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more
information
BREAKING CHANGE: `useImageFlagEmojisOnWindow` flag now requires extra
style sheet import, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information

Fixes: #2116
Fixes: #2094
arnautov-anton added a commit that referenced this issue Nov 27, 2023
@arnautov-anton
fix(emoji-mart): simplify EmojiPicker & emojiSearchIndex (#2117)
a6e0a87 
Fixes: #2116
Fixes: #2094

BREAKING CHANGE: `EmojiPicker` & `EmojiIndex` signatures changed, `EmojiIndex` has been renamed to `emojiSearchIndex`, both `EmojiPicker` & `emojiSearchIndex` are now optional, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information
BREAKING CHANGE: `useImageFlagEmojisOnWindow` flag now requires extra style sheet import, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information
github-actions bot pushed a commit that referenced this issue Nov 27, 2023
@semantic-release-bot
chore(release): 11.0.0 [skip ci]
a9a5193 
## [11.0.0](v10.20.1...v11.0.0) (2023-11-27)

### ⚠ BREAKING CHANGES

* **emoji-mart:** `EmojiPicker` & `EmojiIndex` signatures changed, `EmojiIndex` has been renamed to `emojiSearchIndex`, both `EmojiPicker` & `emojiSearchIndex` are now optional, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information
* **emoji-mart:** `useImageFlagEmojisOnWindow` flag now requires extra style sheet import, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information
* **emoji-mart:** `reactionOptions` signature has changed, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information
* the first argument to `doSendMessageRequest` is now Channel instance instead of `Channel.cid`
* apply the remark plugins `keepLineBreaksPlugin`, `htmlToTextPlugin` as a part of the default message text parsing, upgrade `unified` libraries

### Bug Fixes

* **emoji-mart:** new reactions  ([#1947](#1947)) ([14bef23](14bef23)), closes [#1935](#1935) [#1637](#1637) [#1437](#1437) [#2159](#2159)
* **emoji-mart:** simplify EmojiPicker & emojiSearchIndex ([#2117](#2117)) ([a6e0a87](a6e0a87)), closes [#2116](#2116) [#2094](#2094)

### Features

* apply keepLineBreaksPlugin & htmlToTextPlugin plugins to text rendering by default ([#2169](#2169)) ([e8047f2](e8047f2)), closes [#2170](#2170) [/github.com/GetStream/stream-chat-react/blob/f0bc7ba2532760cabb1db01e685a35bd3b0b64c5/src/components/Message/renderText/renderText.tsx#L158](https://github.com/GetStream//github.com/GetStream/stream-chat-react/blob/f0bc7ba2532760cabb1db01e685a35bd3b0b64c5/src/components/Message/renderText/renderText.tsx/issues/L158)
* export MessageListNotifications and LinkPreviewList components and component props ([#2181](#2181)) ([a5a7e5a](a5a7e5a))
* require Channel instance as the first argument to doSendMessageRequest ([#2171](#2171)) ([2a06b88](2a06b88))

### Chores

* **deps:** bump stream-chat from 8.14.0 to 8.14.2 ([#2179](#2179)) ([4e6a59d](4e6a59d))
* **deps:** bump stream-chat from 8.14.2 to 8.14.3 ([#2185](#2185)) ([3dd8dab](3dd8dab))
@stream-ci-bot
Copy link
Collaborator

🎉 This issue has been resolved in version 11.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working cluster:emoji Issues related to use of emojis dependencies Pull requests that update a dependency file released status:confirmed Described issue has been reproduced by the repo maintainer
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(emoji-mart): simplify EmojiPicker & emojiSearchIndex GetStream/stream-chat-react
4 participants
@stream-ci-bot @solestravis @arnautov-anton @arian921017