fix sveltekit compatibility and add missing focus prop

[kamholz]

This pull request fixes two issues I ran across when using Svelecte in SvelteKit:

• The reference to document in global scope in src/lib/utils.js breaks SSR because the document global is only available in the browser. The easy fix is to move the code into highlightSearch.
• The docs mention a focus function exposed as a prop but it was not implemented, so I added it. Fixes Add focus() method #12

I'm fine with using my forked version for now, but I thought it might be useful to incorporate these fixes.

[kamholz]

Correction, the SSR fix is only partial. Working on a complete fix now.

[mskocik]

The itemHtml needs to be defined only once, no matter how many Svelecte components are being used. Can you implement it this way?

Suggested change

	const itemHtml = document.createElement('div');
	itemHtml.className = 'sv-item-content';
	if (!itemHtml) {
	itemHtml = document.createElement('div');
	itemHtml.className = 'sv-item-content';
	}

[kamholz]

The issue is that you can't reference document.createElement at all, because it's being generated server-side. Why does itemHtml need to be defined only once? As far as I can tell it's only referenced in highlightSearch. Is it a performance issue? I can probably find a way to call document.createElement fewer times (in the browser, where it's possible) if so.

[mskocik]

Yes, I did it this way because of possible performance issues with long list, but basically if that should be a concern, virtualList should be enabled. (this was implemented before virtual list support has been added)

[kamholz]

OK, well in that case, the latest commit should help. It's about the best I could do with the limitations of SSR. The idea is that in most cases (hopefully all but I'm not sure), this condition will apply in SSR:

  if ($inputValue == '' || item.isSelected) return itemHtmlText;

The code that follows is not SSR-safe, but hopefully it will never get there.

[mskocik]

Yes, it shouldn't because it's only about text highlighting while typing. Thanks for your effort!

[mskocik]

Happy to merge, once you resolve the SSR issue completely 👍

[kamholz]

The latest commits make it work for me. It's not exhaustively tested but works for the component I'm trying to use right now (multiple select, not async). The dropdownStateSubscription fix is needed because SSR can call onDestroy before onMount.

[mskocik]

Based on code, looks good to me. Tomorrow I will publish updated version. I have some other tweaks in progress.
And again thank you.

[kamholz]

Thanks! Unfortunately I just realized that there's an issue with the optimization (not recreating itemHtml): if itemHtml already exists, its contents were not being updated. The latest commit to my branch fixes it.