https://github.com/rajasegar/ember-svelte-example

Example of invoking Svelte components from an Ember app.
https://github.com/rajasegar/ember-svelte-example

ember emberjs svelte sveltejs

Last synced: 3 days ago
JSON representation

Example of invoking Svelte components from an Ember app.

• Host: GitHub
• URL: https://github.com/rajasegar/ember-svelte-example
• Owner: rajasegar
• Created: 2023-01-29T06:31:25.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-01-29T06:40:22.000Z (over 1 year ago)
• Last Synced: 2024-09-26T11:38:58.581Z (7 days ago)
• Topics: ember, emberjs, svelte, sveltejs
• Language: JavaScript
• Homepage:
• Size: 171 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Example: Invoking Svelte Components from Ember

This repo contains a runnable demo that shows how to invoke a Svelte component from an Ember app.

## Run it

1. `pnpm install`

2. `cd app && pnpm run start`

## Understand it

 - `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](./app/app/components/example.hbs) into any dom element.

   - the modifier is implemented in [app/modifiers/svelte.js](./app/app/modifiers/svelte.js).

   - in order to import the Svelte component into the Ember app, we [configure ember-auto-import with Svelte support](./app/ember-cli-build.js). The same webpack config could be passed to `@embroider/compat` instead, if you're using Embroider rather than the classic build pipeline.

## Gotchas

 - 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 move `svelte-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.

 

## Inspiration

A Big Thanks to [Edward Faulkner](https://github.com/ef4) for the inspiration. This project is based on the [ember-react-example](https://github.com/ef4/ember-react-example) created by him.

## References

- [svelte-loader](https://github.com/sveltejs/svelte-loader)

- [Svlete client-side component API](https://svelte.dev/docs#run-time-client-side-component-api)