Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tutorial/Guide #51

Open
djleonskennedy opened this issue Jan 23, 2017 · 5 comments
Open

Tutorial/Guide #51

djleonskennedy opened this issue Jan 23, 2017 · 5 comments

Comments

@djleonskennedy
Copy link

Hello
Have you plans for add some tutorial how to use it, like https://guide.elm-lang.org/

@Gozala
Copy link
Contributor

Gozala commented Feb 8, 2017

@djleonskennedy There is semi-finished guide here
https://gozala.gitbooks.io/reflex/content/

@Gozala
Copy link
Contributor

Gozala commented Feb 8, 2017

Current implementation is based on Elm 0.16, in 0.17 they introduced breaking API changes and new concepts like subscriptions plan was to update this library to match new API and also update guide accordingly, unfortunately I have not got around to wrapping that work up.

Than being said linked guide matches API of the library in it's current state.

@sp4ghet
Copy link

sp4ghet commented Mar 8, 2017

Where is a good place to report issues/problems when reading the docs?

I found that the reflex-virtual-dom-driver/examples/counter is different from the docs and that the sample in the docs uses the address/send API differently than the examples. The one from the examples works for me, whereas the one from the Docs(Introduction) does not in my environment:

"reflex": "^0.4.1",
"reflex-virtual-dom-driver": "^0.2.5"

Docs(Introduction):

export const view =
  (model:Model, send:Address<Command>):DOM =>
  html.section({ className: "counter" }, [
    html.button({
      onClick: event => send({ type: "Decrement" })
    }, ["-"]),
    html.output({
        className: "value"
    }, [`${model.value}`]),
    html.button({
        onClick: event => send({ type: "Increment" })
    }, ["+"])
  ])

Docs(Basics):

export const view = (model:Model, address:Address<Message>):DOM =>
  html.section({
    className: "counter"
  }, [
    html.button({
      onClick: forward(address, createIncrement)
    }, ["-"]),
    html.output({ 
      className: "value"
    }, [`${model.value}`]),
    html.button({
      onClick: forward(address, createDecrement)
    }, ["+"])
  ])

Example:

export const view =
  ( model/*:Model*/
  , address/*:Address<Action>*/
  )/*:DOM*/ =>
  html.span
  ( { key: "counter"
    }
  , [ html.button
      ( { key: "decrement"
        , onClick: forward(address, Decrement)
        }
      , ["-"]
      )
    , html.span
      ( { key: "value"
        , style: counterStyle.value
        }
      , [ `${model.value}` ]
      )
    , html.button
      ( { key: "increment"
        , onClick: forward(address, Increment)
        }
      , ["+"]
      )
    ]
  )

@Gozala
Copy link
Contributor

Gozala commented May 2, 2017

Where is a good place to report issues/problems when reading the docs?

@spaghet feel free to open issues in this repo.

I found that the reflex-virtual-dom-driver/examples/counter is different from the docs and that the sample in the docs uses the address/send API differently than the examples. The one from the examples works for me, whereas the one from the Docs(Introduction) does not in my environment:

Can you elaborate (in the separate issue) what do you mean by does not work ? Are the exceptions thrown ? Is something else gets rendered ?

@sp4ghet
Copy link

sp4ghet commented May 2, 2017

Cool, thanks!
It's been a bit since I went over this so I will get back to you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants