https://github.com/buntec/ff4s

A purely functional web UI library for Scala.js
https://github.com/buntec/ff4s

cats-effect frontend functional-programming scala scalajs

Last synced: about 2 months ago
JSON representation

A purely functional web UI library for Scala.js

• Host: GitHub
• URL: https://github.com/buntec/ff4s
• Owner: buntec
• License: apache-2.0
• Created: 2022-01-04T13:28:26.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-08-12T12:22:47.000Z (5 months ago)
• Last Synced: 2024-10-03T12:37:56.436Z (3 months ago)
• Topics: cats-effect, frontend, functional-programming, scala, scalajs
• Language: Scala
• Homepage: https://buntec.github.io/ff4s/
• Size: 37.4 MB
• Stars: 40
• Watchers: 3
• Forks: 3
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# ff4s

![Maven Central](https://img.shields.io/maven-central/v/io.github.buntec/ff4s_sjs1_2.13)

Check out the [microsite](https://buntec.github.io/ff4s/) and [Scaladocs](https://www.javadoc.io/doc/io.github.buntec/ff4s_sjs1_3/latest/index.html).

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](https://www.npmjs.com/package/live-server).

For good measure, there is an implementation of [todomvc](https://github.com/tastejs/todomvc)

in the `todo-mvc` folder.

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

```scala

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

```

## Companion libraries

- [ff4s-canvas](https://github.com/buntec/ff4s-canvas)

- [ff4s-shoelace](https://github.com/buntec/ff4s-shoelace)

- [ff4s-heroicons](https://github.com/buntec/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 `literal`s, 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](https://github.com/buntec/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 `literal`s. 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`):

```javascript

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