Split out emoji library from emoji picker. 👻

[missive]

Split out emoji library from emoji picker. 👻

[bramchi]

I'm also seeing all.json show up together with twitter.json when I use the NimblePicker and set it to use the twitter.json data.

Using emoji-mart 2.6.1 with webpack 3.11.0, all the following ways of importing result in all.json ánd twitter.json in the bundle:

import { NimblePicker } from 'emoji-mart'
import { NimblePicker } from 'emoji-mart/dist-es'
import NimblePicker from 'emoji-mart/dist/components/picker/nimble-picker'
import NimblePicker from 'emoji-mart/dist-es/components/picker/nimble-picker'

Any ideas/suggestions for a patch/solution are welcome 😄
Or is Webpack 3 not supported? Current situation doesn't allow me to upgrade to Webpack 4.

[savardc]

We also use the dataset separately from the picker and having an easier way to query it would be a big improvement

[EtienneLem]

That would work for me 😄

[slvnperron]

@samkelleher Have you done that? I also need to split data from the bundle

[samkelleher]

@slvnperron I did actually and finished the other day, however, by the time I finished and moved things about I have something thats radically different to emoii-mart. Visually similar, but by time I had moved stuff around and generally optimised and tweaked it I essentially have something new. Need to figure out where to take it from here.

[mismith]

What's the status of this?

[samkelleher]

@mismith I need to figure out what to do since when I split out the emoji dataset to essentially recreate an emoji picker using dumb components decoubled from their dataset, it obviously is a breaking change to emoji-mart so there is no clear upgrade path or replacement. I could continue to refactor and try preserve the original interface but this would take a lot of work and I've already completed the part I needed.

[mismith]

Gotcha, thanks for the clarification.

[nolanlawson]

This should be possible now?

import data from 'emoji-mart/dist/data/data.js'
import Picker from 'emoji-mart/dist/components/picker.js'

[EtienneLem]

This should now be possible since v2.6.0, see section in README https://github.com/missive/emoji-mart#datasets

I also noticed some places where the provided JSON for each set (in emoji-mart/data) can be optimized to reduce the size a little bit more. I’ll be updating that soon. Let me know if you have any questions regarding providing a custom data file.

[dmfrancisco]

@EtienneLem That's great, thank you 👍 I think there may be something wrong with the implementation or instructions (or maybe I'm misunderstanding) though.

I created an app and added emoji-mart v2.6.1:

import 'emoji-mart/css/emoji-mart.css';
import { Picker } from 'emoji-mart';

class App extends Component {
  render() {
    return (
      <Picker set='emojione' />
    );
  }
}

The js file after building weights 118.52 KB gzipped. I then followed the instructions in the readme:

import 'emoji-mart/css/emoji-mart.css';
import data from 'emoji-mart/data/emojione.json';
import { NimblePicker } from 'emoji-mart';

class App extends Component {
  render() {
    return (
      <NimblePicker set='emojione' data={data} />
    );
  }
}

After building it now weights 183.15 KB (+64.63 KB) gzipped. Using source-map-explorer you can see that the latter (page on the right) includes both all.json and emojione.json:

[EtienneLem]

@dmfrancisco I see. Can you try import { NimblePicker } from 'emoji-mart/dist-es'? I believe to take advantage of tree-shaking it requires ES modules (which dist-es should have).

Let me know if that works, will update the docs accordingly if it does.

[dmfrancisco]

I'm afraid I got the same result 😕 The demo I'm using is here and I'm testing with:

yarn build
npm install -g source-map-explorer
source-map-explorer build/static/js/main.<hash>.js

[EtienneLem]

Thanks for the demo! I believe it could be an issue with Webpack config when using create-react-app, I did a demo from scratch (w/ Webpack 4) and it feels like it’s working(?):

Demo: https://github.com/EtienneLem/emoji-mart-tree-shaking
source-map-explorer:

[dmfrancisco]

Interesting 👍 I quickly tried to clone and build your demo and the generated main.js weighted 1.01 MiB according to webpack, while when I replaced the NimblePicker with Picker and removed the data import it reduced to 618 KiB.

But I may have done something wrong! I'll take a closer look as soon as possible.

[Kubster96]

@bramchi I have the same situation, using Webpack 4.12.1

[piotrooo]

Any news with this?

[EtienneLem]

I just realized that this file (https://github.com/missive/emoji-mart/blob/master/src/utils/data.js) uses module.exports instead of export. I’m pretty sure that’s because this file is also used by https://github.com/missive/emoji-mart/blob/master/scripts/build.js (which doesn’t go through Babel so it was throwing when requiring).

Although utils/data.js isn’t requiring any file, is the module.exports alone enough to nullify Webpack’s tree shaking?

[bramchi]

What I ended up doing as a workaround is cloning the package into my project and replacing all references to all.json in the component with the specific twitter.json dataset I want to use.
Makes for a 'whopping' 50kB smaller build... haha oh well ¯\_(ツ)_/¯

[Kubster96]

@bramchi I used NimblePicker and NimbleEmoji with messanger emojis (which included all.json and messanger.json) then i replaced all.json with empty json like this {}, so eventually it decreased build by 500 kB and still i could use in Nimble components any emoji set i liked.

[EtienneLem]

So I just published v2.7.0 which completely removes module.exports from the dist-es folder. Hopefully that’ll help w/ Webpack tree shaking.

[peacepostman]

Hello, we are still experiencing the same issue even when using NimblePicker and NimbleEmoji and specifying data import. Is anyone still in the same situation ?

Webpack version is 4.12.0 and Emoji-mart is 2.7.0

[ajbeaven]

Same issue here. 2.8.1 with NimblePicker loads both all.json and {set}.json. #229 has some suggestion on how to fix.

[towfiqi]

This is still an issue. The NimblePicker also includes the all.json file.