Skip Navigation
Docs

Interactivity (TypeScript)

I try to avoid using TypeScript as much as possible, but some things are impossible to solve with just HTML + CSS, which is why I'm following a strict Progressive Enhancement policy when needed.

Since Kirby v4, I switched to Stimulus as framework supporting this approach. It's integrated with server-side templates exactly how I need it to be and very similiar to my own, previously used, "micro framework".

Naming conventions

The naming conventions are different from the Stimulus default. Please do not append *_controller.ts at the end of the filename. Instead:

  • Use hyphens to separate words
  • Just use your desired controller name as the filename

hello-world.ts, not hello_world_controller.ts

Lazy loading

When importing large libraries, it is recommended to lazy load them. This can be done by appending .lazy to the filename. Thanks to ES Modules, the file will then be loaded only when the controller is used for the first time.

hello-world.lazy.ts

TypeScript

We use stimulus-typescript for strongly typed Stimulus controllers. When working with TypeScript daily, we get a huge productivity boost with the autocompletion & by being able to spot as well as fix errors before testing then in runtime.