how to use in svelte5?

[Neptunium1129]

https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes

App.svelte

  import { writable } from 'svelte/store';
    import { mount } from 'svelte';
  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 onclick={showModal}>Show modal</button>
</Modal>

Popup.svelte

<script>
  export let message = 'Hi';
</script>

<p>🎉 {message} 🍾</p>

[flekschas]

The library is not yet tested in svelte v5. Looks like they introduced a breaking change in v5. Please go ahead and propose an ideally backwards compatible fix if you're free.

[Neptunium1129]

The library is not yet tested in svelte v5. Looks like they introduced a breaking change in v5. Please go ahead and propose an ideally backwards compatible fix if you're free.

-- https://github.com/sveltejs/svelte/issues/11472

I tried to change a "new component" to use Svelte 5 Mount command , but I failed. There are a lot of changes.

I'm thinking of leaving svelte...

[dummdidumm]

From https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes :

If this component is not under your control, you can use the legacy.componentApi compiler option for auto-applied backwards compatibility (note that this adds a bit of overhead to each component).

In other words add a svelte.config.js with

export default {
  compilerOptions: {
    legacy: { componentApi: true }
  }
}

This makes it backwards compatible.

[Neptunium1129]

From https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes :

If this component is not under your control, you can use the legacy.componentApi compiler option for auto-applied backwards compatibility (note that this adds a bit of overhead to each component).

In other words add a svelte.config.js with

export default {
  compilerOptions: {
    legacy: { componentApi: true }
  }
}

This makes it backwards compatible.

after legacy setting

[Neptunium1129]

change bind function source

export function bind(Component, props = {}) {
      return function ModalComponent(options) {
        /* let app = new Component({
        ...options,
        props: {
          ...props,
          ...options.props,
        },
        }) */
        let cmpData = {
          ...options,
          props: {
            ...props,
            ...options.props,
          },
          target: document.body
        };

        let component = svelte.mount(Component, cmpData);
        debugger;
        return component;
      };
    }

• modal work! but content missing..

i think ctx object missing on mount function

svelte4

svelte 5

[Neptunium1129]

edit source same.

svelte.config.js

const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    },
     compilerOptions: {
        legacy: { componentApi: true }
    } 
};

[Neptunium1129]

change new Component code

-- svelte4

return new Component({
           ...options,
           props: {
             ...props,
             ...options.props,
           },
         });

-- svelte5

return mount(Component,{
           ...options,
           props: {
             ...props,
             ...options.props,
           },
           target : options.parentNode  
         });

[flekschas]

Cool thanks! I'll wait to cutting a new release until Svelte v5 is released. Hopefully there's a backward compatible way to support Svelte v4 and v5.