Skip to content

tivac/svelte-translator

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

svelte-translator Build Status NPM Version NPM License NPM Downloads

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-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

⚠️ 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
    },
}),

About

Tools for helping svelte v2 & v3 work together

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published