Svelte5 migration

[Neptunium1129]

I am attempting to migrate this modal source because it is a Svelte modal, which is the most stable and functional.

The modal open function is working.

However, the "store bind" has failed, and clicking behind the modal causes the component to duplicate and mount again.

-- behind click focus duplicate mount component

<script>
const etcModuleHistListModal = writable(null);
    const etcModuleHistListBtn = () => {
        etcModuleHistListModal.set(bind(ModalContent,
            {
                title: "BIND TITLE"
            }
         )
        )
    };
</script>
<p><button onclick={(e)=>{
        etcModuleHistListBtn()
    }
    }>BIND_BTN</button></p>

• Autofocus button issue and spacebar click cause the component to regenerate and append to the modal area.

Temporary Solution: Adding e.target.blur();

<p><button onclick={(e)=>{
    e.target.blur();
    cmmModalBtn();
}
}>CUSTOM_CMM</button></p>

-- Usage With a Svelte Store Problem

1. OnMount changed $effect, then isMounted is set to true.
2. Reactivity issue: Component duplicate bind,
3. I thought OnMount and reactivity ($:) changed $effect.

• first click

• 

• second click

• 

  isMounted = $state(false);
$effect(()=>{
  isMounted = true;

  if (isMounted) {
    if (isFunction(show)) {
      open(show);
    } else {

      close();

    }
  }

  return () => {
    if (isMounted) close();
  }
});

<!-- App.svelte -->
<script>
  import { writable } from 'svelte/store';
  import Modal, { bind } from 'svelte-simple-modal';
  import Popup from './Popup.svelte';
  const modal = writable(null);
  const showModal = () => modal.set(bind(Popup, { message: "It's a modal!" }));
</script>

<Modal show={$modal}>
  <button on:click={showModal}>Show modal</button>
</Modal>

[Neptunium1129]

https://svelte.dev/repl/52e0ade6d42546d8892faf8528c70d30?version=3.59.1

https://svelte.dev/repl/52e0ade6d42546d8892faf8528c70d30?version=4.2.18

The issue of duplicate components occurring on button click happens in version 4.2.18 but does not occur in version 3.59.1.

[Neptunium1129]

let {
  children,
  show = null,
  id = null,
  key = 'simple-modal',
  isTabbable = baseIsTabbable,
  ariaLabel = null,
  ariaLabelledBy = null,
  closeButton = true,
  closeOnEsc = true,
  closeOnOuterClick = true,
  styleBg = {},
  styleWindow = {},
  styleContent = {},
  styleCloseButton = {},
  styleWindowWrap = {},
  classBg = null,
  classWindowWrap = null,
  classWindow = null,
  classContent = null,
  classCloseButton = null,
  unstyled = false,
  setContext = baseSetContext,
  transitionBg = fade,
  transitionBgProps = { duration: 250 },
  transitionWindow = transitionBg,
  transitionWindowProps = transitionBgProps,
  disableFocusTrap = false
} = $props();

The duplicate component issue is caused by using the fade transition. The issue occurs with a duration of 250, but does not occur with a duration of 120.