ff4s

Check out the microsite and Scaladocs.

See the examples folder for commented code examples. To run them locally, you need Java 17 or later, sbt, Node.js ^20.19.0 or >=22.12.0, and just.

From the repository root, install the JavaScript dependencies:

npm install

Then run the Scala.js compiler and the Vite dev server in separate terminals:

sbt '~examples/fastLinkJS'

just serve-examples

Open http://127.0.0.1:8080/ in your browser. To try another example, change new example1.App in examples/src/main/scala/examples/Main.scala to the desired example<N>.App.

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.26.1"

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

• The store constructor is simplified to (Action, State) => (State, F[Unit]). To migrate replace the None returned for effect-free updates with Applicative[F].unit (or a local unit value; see the microsite and examples).

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

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

• 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).

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

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

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