-
Notifications
You must be signed in to change notification settings - Fork 886
Description
The problem is I want to get the frequently used emojis from emoji-mart, because I also want to embed/show them in my application.
Thankfully, the Store is exposed, so I could get them manually (see also #987), but that only saves the emojiId -> counter mapping, unsorted and also does seem slightly less advanced than what is actually shown in the picker.
Now FrequentlyUsed is also exposed (thanks again!), so I can just hook into that, but that is also harder than I thought/necessary, as it has the wrong typing.
STR
Load emoji-mart (in my case via getEmojiMart()) via await import("../../node_modules/emoji-mart/dist/module.js"); essentially. But for typing I import("../../node_modules/emoji-mart/dist/index.d.js").
This is just a dynamic import in my case, but it should work with static imports, too.
Prod source code:
/** @type {typeof import("../../node_modules/emoji-mart/dist/index.d.js").FrequentlyUsed._get1} */
// @ts-ignore
const frequentlyUsedGetter = ((await getEmojiMart()).FrequentlyUsed).get;
/** {@type string[] */
frequentlyUsed = frequentlyUsedGetter({
maxFrequentRows: maximumNumberOfElements,
perLine: 1
});
console.debug("Frequently used emojis found via getter:", frequentlyUsed);What happens
Now this already contains the fixes/workaround, if you don't do that, you e.g. get TS/typing errors (as you can see this is JS code but with VSCode/TS server typings enabled/shown):
Note this likely happens, because the index.d.ts typings that are exported are somewhat broken here:
declare function _get1({ maxFrequentRows, perLine }: {
maxFrequentRows: any;
perLine: any;
}): any[];
export const FrequentlyUsed: {
add: typeof add;
_get1: typeof _get1;
DEFAULTS: string[];
};They seem to want this to be _get1, maybe renamed due to the Store method having the same name before:
declare function set(key: string, value: string): void;
declare function get(key: string): any;
export const Store: {
set: typeof set;
get: typeof get;
};
declare function add(emoji: {
id: string;
}): void;Property 'get' does not exist on type '{ add: (emoji: { id: string; }) => void; _get1: ({ maxFrequentRows, perLine }: { maxFrequentRows: any; perLine: any; }) => any[]; DEFAULTS: string[]; }'.ts(2339)
What should happen
Here you can see the function, which is just called get:
| function get({ maxFrequentRows, perLine }) { |
This is how it should also be called in all typings, they are otherwise wrong.
Ideal solution
I actually had to create quite a lot of code to mangle with these emojis and convert them to proper Emoji/Skin instances, like when searching with SearchIndex.
That said, your function seems to do a lot of filtering and that seems useful. So I would like to use it to get the emojis.
If you want to see the whole code I added, see here:
https://github.com/rugk/awesome-emoji-picker/blob/d1a16bf23884993788a1d3c2d32f16450de0cdb7/src/common/modules/EmojiMartLazyLoaded.js#L57-L147
The skins complicate the matter, but somehow your picker also manages these (I could not pinpoint the code in your code base, where exactly.)
I would also create a PR to contribute parts of this code, if you want.