This Meteor package makes it possible to instantiate Blaze templates inside Svelte components, with reactivity across boundaries.
This package is still experimental.
To add this package to your app, you will want to run the following command:
meteor add svelte:blaze-integration
This package provides a <BlazeTemplate> component which will render the given
Blaze template inside the Svelte component. The template is specified in the
template property, which may either be a string template name or a Template
reference, for example:
<script>
import { BlazeTemplate } from 'meteor/svelte:blaze-integration';
</script>
<BlazeTemplate template="loginButtons" />
<BlazeTemplate template={Template.loginButtons} />To pass in data, use the data prop, which will be updated reactively according
to the normal Svelte rules for reactivity (ie. requiring an assignment):
<script>
import { BlazeTemplate } from 'meteor/svelte:blaze-integration';
import './label.html';
let labelData = {text: 'not clicked'};
function handleClick() {
labelData = {text: 'clicked'};
}
</script>
<BlazeTemplate template={Template.Label} data={labelData} />You can use {{> Template.contentBlock}} as in Blaze to spawn in the slotted
content inside the BlazeTemplate component.
To render a Svelte component inside a Blaze template, use the SvelteComponent
template. This works similarly to Svelte's own <svelte:component>, and takes
the component as this argument and the props as remaining arguments.
MyTemplate.html
<template name="MyTemplate">
{{> SvelteComponent this=MyComponent first="Hello" second="world"}}
</template>MyTemplate.js
import MyComponent from './MyComponent.svelte';
Template.MyTemplate.helpers({
MyComponent: () => MyComponent,
});MyComponent.svelte
<script>
export let first;
export let second;
</script>
<p>{first} {second}!</p>If you wish to determine the selection of props programmatically, you can use the single-argument form instead:
MyTemplate.html
<template name="MyTemplate">
{{> SvelteComponent myHelperFunction}}
</template>MyTemplate.js
import MyComponent from './MyComponent.svelte';
Template.MyTemplate.helpers({
myHelperFunction() {
return {
this: MyComponent,
first: "Hello",
second: "world",
};
},
});You can also directly return MyComponent, but that method will not support additional properties.
Slotted content (like Template.contentBlock) is also supported. For example:
MyTemplate.html
<template name="MyTemplate">
{{#SvelteComponent this=myComponentHelper}}
Welcome
{{/SvelteComponent}}
</template>Heading.svelte
<h1><slot /></h1>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent