Svelte inside Aurelia
Libception. Learn how to use Svelte inside of your Aurelia applications.
Aurelia's design embraces flexibility and interoperability, making it well-suited for integration with other libraries and frameworks. One common scenario is incorporating Svelte components into an Aurelia application. This integration showcases Aurelia's adaptability and how it can leverage the strengths of other ecosystems. Below, we provide a detailed guide and code examples to integrate a Svelte component seamlessly into an Aurelia 2 application.
Install Dependencies
First, ensure that your Aurelia project has the necessary dependencies to use Svelte. You'll need the Svelte core library.
npm install svelte
Additionally, if you're using Webpack, install the svelte-loader
to handle .svelte
files:
npm install svelte-loader
Configure Your Build System
To process .svelte
files correctly, configure your Webpack setup.
webpack.config.js:
const SveltePreprocess = require('svelte-preprocess');
module.exports = {
// ... existing configuration ...
module: {
rules: [
// ... existing rules ...
{
test: /\.svelte$/,
use: {
loader: 'svelte-loader',
options: {
preprocess: SveltePreprocess(),
},
},
},
],
},
resolve: {
extensions: ['.mjs', '.js', '.svelte'],
mainFields: ['svelte', 'browser', 'module', 'main'],
},
};
This ensures Webpack properly processes .svelte
files.
Create a Svelte Component
For this example, let's create a simple Svelte component.
<!-- src/components/MySvelteComponent.svelte -->
<script>
export let name = 'World';
</script>
<style>
div {
color: blue;
}
</style>
<div>Hello from Svelte, {name}!</div>
This component displays a greeting message and accepts a name
prop.
Create an Aurelia Wrapper Component
To integrate the Svelte component into Aurelia, create a wrapper Aurelia component that will render the Svelte component.
// src/resources/elements/svelte-wrapper.ts
import { customElement, ICustomElementViewModel, INode } from 'aurelia';
import MySvelteComponent from '../../components/MySvelteComponent.svelte';
@customElement({ name: 'svelte-wrapper', template: '<template><div ref="container"></div></template>' })
export class SvelteWrapper implements ICustomElementViewModel {
private container: HTMLElement;
private svelteInstance: any;
constructor(@INode private element: HTMLElement) {
this.container = this.element.querySelector('div[ref="container"]')!;
}
attached() {
this.svelteInstance = new MySvelteComponent({
target: this.container,
props: {
name: 'Aurelia User',
},
});
}
detaching() {
if (this.svelteInstance) {
this.svelteInstance.$destroy();
}
}
}
This wrapper initializes and mounts the Svelte component when the Aurelia component is attached to the DOM.
Register the Wrapper Component and Use It
Now, you must register the wrapper component with Aurelia and then use it in your application.
// src/main.ts
import Aurelia from 'aurelia';
import { SvelteWrapper } from './resources/elements/svelte-wrapper';
import { MyApp } from './my-app';
Aurelia
.register(SvelteWrapper)
.app(MyApp)
.start();
Then, use it in a view:
<!-- src/my-view.html -->
<template>
<svelte-wrapper></svelte-wrapper>
</template>
Following these steps, you can integrate Svelte components into your Aurelia 2 application. This process highlights the flexibility of Aurelia, allowing you to take advantage of Svelte's reactive capabilities while benefiting from Aurelia's powerful framework features.
Last updated
Was this helpful?