Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Properly expose FrequentlyUsed / current typing in dist/index.d.js for FrequentlyUsed.get is invalid/missing #997

@rugk

Description

@rugk

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);

https://github.com/rugk/awesome-emoji-picker/blob/d1a16bf23884993788a1d3c2d32f16450de0cdb7/src/common/modules/EmojiMartLazyLoaded.js#L67-L76

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):
Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions