Svelte Integration

[halafi]

in case anyone would find this useful, as I do not have time for putting it into PR, but I seemed to have resolved most issues I had when using this inside a svelte component (except category click is sometimes not working, but most of time it does)

it shouldn't be too much work to put this into emoji-mart-svelte package

EmojiMart.svelte:

<script>
  import { Picker } from "emoji-mart";
  import { onMount, createEventDispatcher, onDestroy } from "svelte";

  let emojiPickerEl;
  let picker;
  let mounted = false;

  const dispatch = createEventDispatcher();

  onMount(() => {
    picker = new Picker({
      theme: "light",
      autoFocus: true,
      onClickOutside: () => {
        if (mounted) dispatch("close");
      },
      onEmojiSelect: (emoji) => {
        dispatch("select", emoji);
      },
    });
    emojiPickerEl.appendChild(picker);
    setTimeout(() => {
      // ensure click outside works
      mounted = true;
    }, 1);
  });

  onDestroy(() => {
    // the clickoutside handler is not unregistered properly, so this is probably redundant
    picker = null;
    emojiPickerEl = null;
  });
</script>

<div on:click|preventDefault|stopPropagation bind:this={emojiPickerEl} />

usage:

    <EmojiMart
      on:select={(ev) => handleEmojiSelect(ev.detail)}
      on:close={() => emojiPickerVisible = false}
    />

[Tenuka22]

`

let emojiPickerEl: HTMLElement | null = null;
let picker: any;
let mounted = false;

const dispatch = createEventDispatcher();

onMount(() => {
	if (emojiPickerEl) {
		picker = new Picker({ data });
		emojiPickerEl.appendChild(picker);
		setTimeout(() => {
			mounted = true;
		}, 1);
	}
});

onDestroy(() => {
	picker = null;
	emojiPickerEl = null;
});

`

I've created the component but this gives a ton of errors

`[{ "resource": "/e:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte", "owner": "generated_diagnostic_collection_name#1", "code": "a11y-click-events-have-key-events", "severity": 4, "message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.", "source": "svelte", "startLineNumber": 28, "startColumn": 1, "endLineNumber": 34, "endColumn": 3 }] 11:39:39 AM [vite-plugin-svelte] E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:23:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as or might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details. 11:39:47 AM [vite] Error when evaluating SSR module /src/lib/components/emoji-mart.svelte: failed to import "emoji-mart" |- SyntaxError: [vite] Named export 'Picker' not found. The requested module 'emoji-mart' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from 'emoji-mart'; const {Picker} = pkg;

at analyzeImportedModDifference (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:51938:15)      
at nodeImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52946:5)
at async ssrImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52800:16)
at async eval (E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:5:31)
at async instantiateModule (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52858:5)

11:39:47 AM [vite] Error when evaluating SSR module /src/routes/(root)/_components/announcement-manage-form.svelte: failed to import "emoji-mart" |- SyntaxError: [vite] Named export 'Picker' not found. The requested module 'emoji-mart' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from 'emoji-mart'; const {Picker} = pkg;

at analyzeImportedModDifference (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:51938:15)      
at nodeImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52946:5)
at async ssrImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52800:16)
at async eval (E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:5:31)
at async instantiateModule (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52858:5)

11:39:47 AM [vite] Error when evaluating SSR module /src/routes/(root)/calendar/create/announcement/+page.svelte: failed to import "emoji-mart" |- SyntaxError: [vite] Named export 'Picker' not found. The requested module 'emoji-mart' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from 'emoji-mart'; const {Picker} = pkg;

at analyzeImportedModDifference (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:51938:15)      
at nodeImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52946:5)
at async ssrImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52800:16)
at async eval (E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:5:31)
at async instantiateModule (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52858:5)

SyntaxError: [vite] Named export 'Picker' not found. The requested module 'emoji-mart' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from 'emoji-mart'; const {Picker} = pkg;

at analyzeImportedModDifference (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:51938:15)      
at nodeImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52946:5)
at async ssrImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52800:16)
at async eval (E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:5:31)
at async instantiateModule (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52858:5)

11:39:51 AM [vite] ✨ new dependencies optimized: devalue 11:39:51 AM [vite] ✨ optimized dependencies changed. reloading 11:40:17 AM [vite] ✨ new dependencies optimized: lucide-svelte 11:40:17 AM [vite] ✨ optimized dependencies changed. reloading prerun(C-node) worker= false Running in main thread, faking onCustomMessage `

[bastek338]

@Tenuka22 Works for me.

onMount(async () => {
    const EmojiMart = await import('emoji-mart');
    picker = new EmojiMart.Picker({
	theme: 'light',
	autoFocus: true,
	onClickOutside: () => {
		if (mounted) dispatch('close');
	},
	onEmojiSelect: (emoji) => {
		dispatch('select', emoji);
	}
     });
    emojiPicker?.appendChild(picker);
});