Javascript¶

Using Typescript
Linter: ESLint with « love » config
Formatting: Prettier (trailing comma: all, printWidth: 88, semi: false)
Framework: Stimulus for controllers, Turbo for navigation
Build: Parcel compiles static/to_compile/ and static/to_collect to static/compiled/

Stimulus ¶

Controllers are in webapp/static/to_compile/controllers/
Use Stimulus targets and values
Export as export default class extends Controller
Structure example:

import { Controller } from "@hotwired/stimulus";

export default class extends Controller<HTMLElement> {
  static targets = ["targetName"];
  declare readonly targetNameTarget: HTMLElement;

  connect() {
    // Initialization
  }
}

Turbo frame ¶

Turbo Frames allow partial page updates by wrapping a section of HTML in a <turbo-frame> element. When a link or form inside the frame is triggered, Turbo only replaces the content of the matching frame in the current page.

Make sure the server response contains a <turbo-frame> with the same id so Turbo can update the correct region.

Map¶

We use Maplibre js technologie with Carte Facile vectorial layers in application and OpenStreetMap layers for the backoffice