Invoking Svelte components from your Ember apps

In this post, we are going to take a look at how to invoke Svelte components from an Ember.js application. Before diving into the topic let's have a quick intro about both these frameworks (or library) and look at why we want to integrate Svelte into an Ember codebase first.

Ember

Ember is a framework for ambitious web developers. It is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device. It has been around for more than 10 years and is still preferred and used by a lot of companies.

Svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Why?

There could be many reasons to integrate Svelte into an Ember.js application from performance, maintainability, technology heterogeneity, organizational reasons, developer availability to business priorities. My fellow Emberanos won't fully agree with me on these various reasons. It's okay. Yet I wanted to share my knowledge on some recent experiments I have done to help a larger community of people and to those who are looking to migrate from Ember to Svelte.

It is important to remember that Ember is not a bad framework. And Ember is still my first love ❤️ when it comes to JavaScript Frameworks and I am very grateful to the framework and the community since it has been a tremendous help in shaping my front-end career and building a lot of tools. You really can't compare Ember with Svelte in absolute terms. Because it's apples and oranges.

Setting up the Monorepo

We are going to setup a monorepo for this post. That gives us a clear advantage of keeping the Svelte components and the Ember app separately, still within a single repository. We are going to use pnpm workspaces for the task at hand.

|-app
|--|-<Ember app>
|-some-svelte-lib
|--HelloWorld.svelte
|--package.json
|-README.md
|-pnpm-lock.yaml
|-pnpm-workspace.yaml

This is how I setup the monorepo structure using the command line.

mkdir ember-svelte-example
cd ember-svelte-example
touch README.md pnpm-workspace.yaml
mkdir app some-svelte-lib
cd app
degit ember-cli/ember-new-output#v4.10.0
cd ..
cd some-svelte-lib
touch HelloWorld.svelte package.json

Here I am using degit to bootstrap our Ember app since the ember-cli doesn't allow you to create a new Ember app in the name of app.

Our pnpm-workspace.yaml file should look like something like this, indicating that the workspace contains two packages one Ember app and other Svelte component library.

packages:
  - app
  - some-svelte-lib

Compiling Svelte components with Ember

Now we will see how to configure Ember build pipeline with ember-auto-import to tweak the Webpack builder underneath to compile Svelte components. Before that we need to add the appropriate dependencies for compiling Svelte components like svelte and svelte-loader.

So from your Ember app root folder, run the following command to add the dependencies.

pnpm add -D svelte svelte-loader

This is how the modified ember-cli-build.js file inside the Ember app will look like. We are configuring the webpack loader to handle all the .svelte files from the Svelte package some-svelte-lib inside the monorepo.

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    // Add options here
    autoImport: {
      webpack: {
        resolve: {
          // see below for an explanation
          alias: {
            svelte: path.resolve('node_modules', 'svelte'),
          },
          extensions: ['.mjs', '.js', '.svelte'],
          mainFields: ['svelte', 'browser', 'module', 'main'],
        },
        module: {
          rules: [
            {
              test: /\.(html|svelte)$/,
              use: 'svelte-loader',
            },
            {
              // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
              test: /node_modules\/svelte\/.*\.mjs$/,
              resolve: {
                fullySpecified: false,
              },
            },
          ],
        },
      },
    },
  });

  return app.toTree();
};

Rendering components via Modifiers

Modifiers are a basic primitive for interacting with the DOM in Ember. For example, Ember ships with a built-in modifier, {{on}}:

<button {{on "click" @onClick}}>
  {{@text}}
</button>

All modifiers get applied to elements directly this way (if you see a similar value that isn't in an element, it is probably a helper instead), and they are passed the element when applying their effects.

Conceptually, modifiers take tracked, derived state, and turn it into some sort of side effect related in some way to the DOM element they are applied to.

To create our modifiers, we are going to use the ember-modifier addon inside our Ember app. Let's first install our addon.

ember install ember-modifier

Let's create a class-based modifier to render our Svelte components.

ember g modifier svelte --class

This is the code for the newly created modifier. Basically the modifier is trying to create a new Root element for the Svelte component and then it creates a new instance of the Svelte component and render it inside the element provided by the modifier. The registerDestructor function available in @ember/destroyable will help you to tear down the functionality added in the modifier, when the modifier is removed.

import Modifier from 'ember-modifier';
import { registerDestructor } from '@ember/destroyable';

export default class SvelteModifier extends Modifier {
  modify(element, [svelteComponent], props) {
    // this is required , because Svelte appends to the DOM
    element.replaceChildren();
    this.component = new svelteComponent({
      target: element,
      props,
    });

    registerDestructor(this, () => this.component.$destroy());
  }
}

Svelte Component

Our Svelte component is a simple component showing a message that can be toggled using the actions of an Ember component.
This is the code for our Svelte component.

<script>
 export let onClick;
 export let message;
</script>

<div>
    <button on:click={onClick}>Toggle </button>
    <div>you said: {message}</div>
</div>

<style>
 button {
   background: red;
   color: white;
 }
</style>

Creating a Ember wrapper component

Let's create our wrapper component for which we need a Glimmer component with class

ember g component example -gc

Ember component.js

The code for the Ember wrapper component is simple. First we are importing our Svelte component from the shared library in our monorepo and assign it to a component property called theSvelteComponent which we will be using the main argument to our modifier. Then we have a tracked property message and an action toggle which are both props to the Svelte component.

import HelloWorld  from 'some-svelte-lib/HelloWorld.svelte';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class extends Component {
  theSvelteComponent = HelloWorld;

  @tracked message = 'hello';

  @action toggle() { 
    if (this.message === 'hello') {
      this.message = 'goodbye';
    } else {
      this.message = 'hello';
    }
  }
}

Ember Component template

And this is how we use the svelte modifier on a DOM element to render our Svelte component and pass our data from Ember via the props.

<div {{svelte this.theSvelteComponent message=this.message onClick=this.toggle}} />

And this is how the Ember app looks like. Basically we are toggling a message with a button. Both the message data and the message handler functions are passed from Ember to Svelte component via the modifier props.

Pros & Cons

Having used Svelte components inside an Ember app, let's discuss about the pros and cons of using the above mentioned approach to integrate Svelte into Ember.js applications.

Pros

• Incrementally migrate an Ember codebase to Svelte
• Having a monorepo of both Ember and Svelte components
• Easy to consume the components, passing data via props and sharing the state with Modifier syntax
• Clean and simple approach

Cons

• Need Ember wrapper components for each Svelte Component
• Hot module reloading won't work if you change code in Svelte components since it is a separate dependency via npm
• Passing children to Svelte components and slots is not possible, the Svelte components need to have their own children

Sample repo

The code for this post is hosted in Github here.

Please take a look at the Github repo and let me know your feedback, queries in the comments section. If you feel there are more pros and cons to be added here, please do let us know also.