effector

Cover image for Prerelease version of effector-solid is now available for public use!
Kirill Mironov for Core

Posted on

Prerelease version of effector-solid is now available for public use!

Official bindings for SolidJS are now ready for testing by wide audience.
https://www.npmjs.com/package/effector-solid

Why is it a great news?

SolidJS is a rapidly developing framework which holds first places of benchmarks for quite some time now. But how? By using native DOM nodes via its custom JSX transformer and fine-grained reactivity.

I think many of you have already understood why effector and solid is a match made in heaven. Opportunity to write declarative business logic and not having to think about possible rerenders and performance (looking at you, react) seems like a dream. But now it came true!
https://www.solidjs.com/

For those who don't know - effector is a business logic management library focused purely on allowing developers to write business logic easily and without a hassle.

Getting started

It's pretty simple, honestly, you just have to carefully follow the instructions written in the package itself. For the convenience of readers I will leave an example of a simplest app in which logic is written via effector and view layer via solid.

import type { Component } from 'solid-js';
import { render } from 'solid-js/web'
import { createEvent, createStore } from "effector";
import { useUnit } from 'effector-solid'

const inputText = createEvent<string>()

const $text = createStore('')
const $size = createStore(0)

$text.on(inputText, (_, text) => text)
$size.on(inputText, (_, text) => text.length)

const Form = () => {
  const { text, size, inputTextEvent } = useUnit({
    size: $size,
    text: $text,
    inputTextEvent: inputText
  })

  return (
    <form>
      <input
        type="text"
        onInput={e => inputTextEvent(e.currentTarget.value)}
        value={text()}
      />
      <p>Length: {size}</p>
    </form>
  )
}

const App: Component = () => {
  return (
    <Form />
  );
};

render(() => <App />, document.getElementById('root')!)
Enter fullscreen mode Exit fullscreen mode

Image description

We have also updated REPl and now you can set the view library of your choice. Current options are react and solid.

Image description
Image description

Example - https://share.effector.dev/nwEvJ8HE

Plans for the future

We will be closely monitoring the feedback received from our users for the most important questions like: is API simple and powerful and are there any bugs. We will also be looking at any reviews left by community (you, our friends!) to understand what's missing.

Whenever we reach a consensus about readiness of those bindings we will change places major and minor version as was done with effector before. Since that moment we will be adhering to our stability guarantees.

Extra thanks goes to Effector Core contributors for the caused help and support and to contributors of SolidJS and in particular - Ryan Carniato, for innovative thinking and great articles.

Discussion (0)