Going through the deku docs, I got stuck trying to use deku events, as it doesn't compile. Here's the code, and below is the error message:

module Main where

import Prelude

import Data.Tuple.Nested ((/\))
import Deku.Attributes as DA
import Deku.Control (text_, text)
import Deku.Core (Nut)
import Deku.DOM as D
import Deku.Do as Deku
import Deku.Hooks (useState)
import Deku.Listeners as DL
import Deku.Toplevel (runInBody)
import Effect (Effect)
import Effect.Random (random)

main :: Effect Unit
main = do
  n <- random
  runInBody Deku.do
    setNumber /\ number <- useState n
    D.div_
      [ D.button
          [ DA.klass_ "btn btn-primary"
          , DL.click_ \_ -> random >>= setNumber
          ]
          [ text_ "Update number" ]
      , text $ number <#>
          show >>> ("Here's a random number: " <> _)
      ]

Here's the error:

Building...
[1 of 1] Compiling Main
[1/1 NoInstanceFound] src\Main.purs:25:13

  25            , DL.click_ \_ -> random >>= setNumber
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  No type class instance was found for
    Deku.Attribute.Attr Button_
                        OnClick
                        (t2 -> Effect Unit)
  The instance head contains unknown type variables. Consider adding a type annotation.
  while applying a function click_
    of type Attr t0 OnClick t1 => t1 -> Event (Attribute t0)
    to argument \$1 ->
                  case $1 of
                    _ -> (...) setNumber
  while checking that expression click_ (\$1 ->
                                           case $1 of
                                             _ -> ...
                                        )
    has type Event (Attribute Button_)
  in value declaration main
  where t1 is an unknown type
        t0 is an unknown type
        t2 is an unknown type

           Src   Lib   All
Warnings     0     0     0
Errors       1     0     1

❌ Failed to build.

Additional Context

Spago version: 0.93.18
Purescript version: 0.15.12
Package set: registry: 45.1.0

The documentation imports DL as import Deku.DOM.Listeners as DL whereas you have import Deku.Listeners as DL.

I think there was a major change between v0.9.18 (the version published on pursuit) and v0.10.0 (the version afais used in the documentation). Just guessing here, as I haven't checked this myself and am myself a fairly new deku user.

I had to add the following snippet to spago.yaml to use deku in the way described in the documentation:

workspace:
  extra_packages:
    hyrule:
      git: "https://github.com/mikesol/purescript-hyrule.git"
      ref: "f388528a9aaa25a5307bf67f6ed12d2097620929"
      dependencies:
        - effect
        - js-timers
        - unsafe-reference
        - web-html
        - web-uievents
    bolson:
      git: "https://github.com/mikesol/purescript-bolson.git"
      ref: "d87900ceedfb81814bd282be464fa4c8a55677c2"
      dependencies:
        - hyrule
        - fast-vect
    deku:
      git: "https://github.com/mikesol/purescript-deku.git"
      subdir: deku
      ref: "22d4756f831ac57c17286bae86a5799a0377239a"
      dependencies:
        - bolson
    deku-core:
      git: "https://github.com/mikesol/purescript-deku.git"
      subdir: deku-core
      ref: "22d4756f831ac57c17286bae86a5799a0377239a"
      dependencies:
        - bolson
        - stringutils
    deku-dom:
      git: "https://github.com/mikesol/purescript-deku.git"
      subdir: deku-dom
      ref: "22d4756f831ac57c17286bae86a5799a0377239a"
      dependencies:
        - bolson
        - web-pointerevents
        - web-touchevents

Note: ref 22d4756f831ac57c17286bae86a5799a0377239a corresponds to v.10.0

Maybe the documentation needs to be updated to state in the Getting started section that it now requires v.10.0 onwards and how to set it up?

Thanks for the writeup @jquesada2016 and the explanation @sprungknoedl . The yaml you have should work, and I'll update the docs!

In general, we could use more version-management rigor in the project. If anyone would like to help out with that, I'd appreciate it! I haven't used Deku at work for nearly a year now, so while I'm happy to maintain it, I'm not encountering it's day-to-day warts the way that some folks do. Of course, if I move back to using it professionally, I'll get to fixing these things faster.

For a monorepo project, the spago.yaml under the root directory should be instead

workspace:
  package_set:
    registry: 47.10.0
  extra_packages:
    hyrule:
      git: "https://github.com/mikesol/purescript-hyrule.git"
      ref: "f388528a9aaa25a5307bf67f6ed12d2097620929"
      dependencies:
        - effect
        - js-timers
        - unsafe-reference
        - web-html
        - web-uievents
    bolson:
      git: "https://github.com/mikesol/purescript-bolson.git"
      ref: "d87900ceedfb81814bd282be464fa4c8a55677c2"
      dependencies:
        - hyrule
        - fast-vect
        - foreign-object
    deku:
      git: "https://github.com/mikesol/purescript-deku.git"
      subdir: deku
      ref: "22d4756f831ac57c17286bae86a5799a0377239a"
      dependencies:
        - record
        - bolson
    deku-core:
      git: "https://github.com/mikesol/purescript-deku.git"
      subdir: deku-core
      ref: "22d4756f831ac57c17286bae86a5799a0377239a"
      dependencies:
        - catenable-lists
        - stringutils
        - bolson
    deku-dom:
      git: "https://github.com/mikesol/purescript-deku.git"
      subdir: deku-dom
      ref: "22d4756f831ac57c17286bae86a5799a0377239a"
      dependencies:
        - bolson
        - aff
        - web-pointerevents
        - web-touchevents
    tidy:
      repo: "https://github.com/natefaubion/purescript-tidy.git"
      version: "v0.10.0"
      dependencies:
        - arrays
        - dodo-printer
        - foldable-traversable
        - lists
        - maybe
        - ordered-collections
        - partial
        - prelude
        - language-cst-parser
        - strings
        - tuples
    tidy-codegen:
      repo: "https://github.com/natefaubion/purescript-tidy-codegen"
      version: "main"
      dependencies:
        - aff
        - ansi
        - arrays
        - avar
        - bifunctors
        - console
        - control
        - dodo-printer
        - effect
        - either
        - enums
        - exceptions
        - filterable
        - foldable-traversable
        - free
        - identity
        - integers
        - language-cst-parser
        - lazy
        - lists
        - maybe
        - newtype
        - node-buffer
        - node-child-process
        - node-fs-aff
        - node-path
        - node-process
        - node-streams
        - ordered-collections
        - parallel
        - partial
        - posix-types
        - prelude
        - record
        - safe-coerce
        - st
        - strings
        - tidy
        - transformers
        - tuples
        - type-equality
        - unicode

which worked for me

mikesol / purescript-deku

Examples seem to be broken #110

Additional Context