Closed Neptunium1129 closed 2 months ago
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.
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...
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.
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
withexport default { compilerOptions: { legacy: { componentApi: true } } }
This makes it backwards compatible.
after legacy setting
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;
};
}
i think ctx object missing on mount function
svelte4
svelte 5
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 }
}
};
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
});
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.
https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
App.svelte
Popup.svelte