buntec / ff4s

A purely functional web UI library for Scala.js

ff4s

Check out the microsite and Scaladocs.

See the examples folder for commented code examples. Try them out by running examples/fastLinkJS in sbt and serving the index.html using something like Live Server.

For good measure, there is an implementation of todomvc in the todo-mvc folder.

Artifacts are published to Maven Central for Scala 2.13 and Scala 3.

libraryDependencies += "io.github.buntec" %%% "ff4s" % "0.24.0"

Companion libraries

• ff4s-canvas
• ff4s-shoelace
• ff4s-heroicons

(Breaking) changes

0.24.0

• The store constructor is simplified to (Action, State) => (State, F[Unit]). To migrate replace all occurrences of None with Applicative[F].unit (see microsite and examples).

0.23.0

• Adds withClass extension method to the V type that allows overriding the class attribute of the underlying node. This turns out to be useful for literals, e.g., setting the class on an SVG icon.

0.22.0

• Dsl[F, State, Action] becomes Dsl[State, Action]. The F parameter was merely an implementation detail leaking out.
• ff4s.App no longer has an implicit Dsl member. A better pattern for organizing components is to use a Dsl[State, Action] self-type (see the examples), which obviates the need for passing a Dsl parameter to every component.

0.21.0

• Adds a debug mode for inspecting the state from the browser console.
• Improves support for web components by adding a WebComponent base trait and a Slot modifier (see ff4s-shoelace for usage examples).

0.20.0

• Bug fix: map reflected attributes to attributes instead of props. Properties typically cannot be deleted so things like id, once set, couldn't be removed.

0.18.0

• Adds caching for literals. This can significantly improve performance, e.g., when displaying a large number of SVG icon literals.

Debugging

You can query the state of your ff4s app in the Browser console by defining/declaring the following global variables (e.g., by adding an inline script to your index.html):

var process = {
  env: {
    'FF4S_DEBUG': 'TRUE',
  }
};
var ff4s_state;

The current state can then be retrieved from the ff4s_state variable. In particular, you can call ff4s_state.toString() (and toString can be customized in your Scala code).

ff4s's Issues

question about Store function return type

I was wondering why the store function looks like:

Action => State => (State, Option[F[Unit]])

vs

Action => State => (State, F[Unit])

Since we know that F[_]: Concurrent and Concurrent extends Applicative so we could return F[Unit] via Concurrent[F].unit instead of None.

There is possibly an efficiency motivation, but if there isn't, I think the simpler type signature would be cleaner to use.

please publish scala doc

This looks like a great library that I'm excited to try. One of the reasons I love typed functional programming is that the type signatures are often great documentation.

Would you be willing to publish the scala docs for this library so that we can easily see the types without having to click through the GitHub UI or checking the project out locally?

Thanks for your work on this!

Question about Store name

I'm enjoying using ff4s on a simple UI. I really enjoy programming with cats and pure functional style, so I appreciate your work on this.

I've shown this library to a few people and one place they always trip up is explaining with Store is named what it is. The main thing it seems to be about is the updating logic of (Action, State) => State. Or someone with more FP experience might notice that it something like Action => cats.data.State[State, Option[IO[Unit]]

I don't have a great suggestion for you, but I noticed you are still making incompatible changes, so I thought I would bring the issue up. Something more direct like Update, or maybe TransitionMatrix.

Just thought I would share my feedback.

Types of events

I have some code that looks like this:

        textArea(
          `type` := "text",
          cls := "codein",
          value := text,
          onInput := { te =>
            Some(
              Action.CodeEntered(
                te.currentTarget.asInstanceOf[HTMLTextAreaElement].value
              )
            )
          }
        )

It would be nice if the type of the event allowed me to access the HTMLTextAreaElement without the cast. Maybe it is possible now, but I didn't see how.

Thank you.