Is svelte-scenejs on the roadmap?

[stemcc]

I've been enjoying working your svelte-movable library. Would love to know if you've considered a svelte client for scenejs.

[daybrush]

@stemcc

I will remake scenejs for all frameworks including svelte. (in hooks or reactive form)

I will release it within this month.

• Concept

<script>
import { useSceneItem } from "scenejs";


const {
    left, top, transform,
    play,
} = useSceneItem({
   0: {
       left: "0px",
       top: "100px",
       transform: "translate(0px)",
   },
   1: {
       left: "100px",
       top: "100px",
       transform: "translate(100px)",
   },
});


play();
</script>
<div style={{ transform: $transform, left: $left, top: $top }}>
Target
</div>

[stemcc]

That's great to hear! Looking forward to it :-)

[daybrush]

@stemcc

svelte-scenejs@1.0.0-beta.1 is released.

https://github.com/daybrush/scenejs/tree/master/packages/svelte-scenejs

• Raindrop Selector Example
• Raindrop No Selector Example

$ npm install svelte-scenejs

<script>
import {
    useScene,
    useSceneItem,
    useFrame,
    useNowFrame,
} from "svelte-scenejs";


const scene = new Scene({
    "a1": {
        0: {
            left: "0px",
            top: "0px",
            transform: `translate(0px, 0px)`,
        },
        1: {
            left: "100px",
            top: "100px",
            transform: `translate(100px, 0px)`,
        },
    },
    "a2": {
        0: {
            left: "0px",
            top: "0px",
            transform: `translate(0px, 0px)`,
        },
        1: {
            left: "100px",
            top: "100px",
            transform: `translate(100px, 0px)`,
        },
    }
});
const { cssText: cssText1 } = useNowFrame(scene.getItem("a1"));
const { cssText: cssText2 } = useNowFrame(scene.getItem("a2"));

</script>
<div class="container">
    <div class="a1" style={$cssText1}></div>
    <div class="a2" style={$cssText2}></div>
</div>

There are still many shortcomings and explanations are insufficient.

1. Tell me if there is something missing or a feature you want.
2. Or suggest me if there is a better way.