tivacsvelte-translator 
Use svelte v2 features inside svelte v3, and use svelte v3 features inside svelte v2. Because sometimes there's no amount of automated component rewriting that will make things work but you want to start a gradual transition.
Features
| Feature | Svelte 3 in 2 | Svelte 2 in 3 |
|---|---|---|
| Stores | ✔ | ✔ |
| Components | ✔ | 💭 |
| Rollup Bundling | ✔ | ✔ |
Legend
- ✔ feature exists and works
- 🔧 feature in progress
- 💭 feature is planned
Installation
$> npm install svelte-translatorYou'll also need to use `npm@6.9.0or higher so that you can installsvelte@2andsvelte@3` side-by-side.
$> npm install svelte2@npm:svelte@2
$> npm install svelte@latest⚠️ Make sure you update any existing references to svelte to point to svelte2 now that svelte v3 is the default
Usage
Svelte v3 in Svelte v2
Components
Wrap up a v3 component so it can be included within a svelte2 component.
<Wrapper {component} {props} />
<script>
import Component from "./svelte3-component.svelte";
export default {
components : {
Wrapper : "svelte-translator/3in2/component.html",
},
data : () => ({
component : Component,
props : {
// any props for the component
}
}),
};| Data | Usage |
|---|---|
component |
The v3 component to wrap |
props |
Properties to set on the v3 component |
Stores
A small svelte2 store that expects to be passed either a readable or writable svelte3 store and will make the value of the svelte3 store available to components using the standard APIs.
import { readable } from "svelte/store";
import Adapter from "svelte-translator/3in2/store.js";
const s3r = readable(0);
const s2r = new Adapter(s3r);
// Non-object values are mapped to the "value" key
s2r.get(); // { value : 0 }
const s3w = writable({ fooga : 1, booga : 0 });
const s2w = new Adapater(s3w);
// Object values are splatted into the store
s2w.get(); // { fooga : 1, booga : 0 }
s2w.set({ fooga : 2 });
s3w.subscribe((value) => {
// { fooga : 2, booga : 0 }
});Svelte v2 in Svelte v3
Stores
svelte-translator/2in3/store.js implements the v3 store contract (.set() is provided natively by v2 stores, it implements .subscribe() & .update()) in a class that extends svelte/store.js so it can be a drop-in replacement.
Here's an example of how to make v2 stores usable in v3 components.
- import { Store } from "svelte/store.js";
+ import { Store } from "svelte-translator/2in3/store.js";The svelte-translator version is fully functional in v3 components. You can use its values directly within the template, within the component <script> block either staticly or in reactive statements, and it can also be used as an input to any derived stores.
It also remains a completely valid svelte v2 store that functions just as they always have in your v2 components.
// my-store.js
import { Store } from "svelte-translator/2in3/store.js";
const store = new Store({
...
});
export default store;<!-- my-component.html -->
<div>{$store.foo}</div>
<p>
{reactive}
</p>
<span>{$dstore}</span>
<script>
import store from "./my-store.js";
import { derived } from "svelte/store";
$: reactive = $store.foo + "ey";
const dstore = derived(store, ($foo, set) => set(foo + "ey"));
</script>Rollup bundling of Svelte v2 & Svelte v3
Loading Svelte2 Components
require("svelte-translator/rollup/svelte2.js")({
// Optional preprocessor
preprocess : { ... },
// Options for the svelte compiler
options : {
dev : true
},
}),Loading Svelte3 Components
require("svelte-translator/rollup/svelte3.js")({
// Optional preprocessors
preprocess : [
{ ... },
],
// Options for the svelte compiler
options : {
dev : true
},
}),