It should continue working just fine but no more features or bug fixes will be added.
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.
| Feature | Svelte 3 in 2 | Svelte 2 in 3 |
|---|---|---|
| Stores | ✔ | ✔ |
| Components | ✔ | 💭 |
| Rollup Bundling | ✔ | ✔ |
Legend
- ✔ feature exists and works
- 🔧 feature in progress
- 💭 feature is planned
$> npm install svelte-translator
You'll also need to use npm@6.9.0 or higher so that you can install svelte@2 and svelte@3 side-by-side.
$> npm install svelte2@npm:svelte@2
$> npm install svelte@latest
svelte to point to svelte2 now that svelte v3 is the default
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 |
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-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>require("svelte-translator/rollup/svelte2.js")({
// Optional preprocessor
preprocess : { ... },
// Options for the svelte compiler
options : {
dev : true
},
}),require("svelte-translator/rollup/svelte3.js")({
// Optional preprocessors
preprocess : [
{ ... },
],
// Options for the svelte compiler
options : {
dev : true
},
}),