This repo contains a runnable demo that shows how to invoke a Svelte component from an Ember app.
pnpm install
cd app && pnpm run start
some-svelte-lib
is intended to stand in for your library package that contains a Svelte component.app
is the Ember app- it contains a
{{svelte}}
element modifier that can render a Svelte component into any dom element. - the modifier is implemented in app/modifiers/svelte.js.
- in order to import the Svelte component into the Ember app, we configure ember-auto-import with Svelte support. The same webpack config could be passed to
@embroider/compat
instead, if you're using Embroider rather than the classic build pipeline.
- it contains a
- this example assumes your Svelte component is in a separate NPM package, so we're importing it via
ember-auto-import
. If instead you want to make Svelte components work inside your app's own package, you would need to movesvelte-loader
into the app's own babel config. - remember to install
ember-modifier
. It's not part of the default Ember app blueprint. - make sure your app declares its dependency on your library, otherwise ember-auto-import won't be able to import it.
- It's a good idea for the library to declare a peerDependency on
svelte
so that it will definitely share the app's copy.
A Big Thanks to Edward Faulkner for the inspiration. This project is based on the ember-react-example created by him.