<commit_before>Try Reflex
==========
Setup
-----
The steps below will set up an environment from which you can use Reflex with GHCJS. This process will install the [Nix package manager](https://nixos.org/nix/). If you prefer to install Nix yourself, you may do so any time prior to step 2.

1. Clone the try-reflex repo:

    ```bash
        git clone git@github.com:ryantrinkle/try-reflex
    ```

2. Navigate into the `try-reflex` folder and run the try-reflex bootstrapping command. This will install nix, if you don't have it already, and use it to wrangle all the dependencies you'll need and drop you in an environment from which you can use Reflex. Be warned, this might take a little while the first time:

    ```bash
        cd try-reflex
        ./try-reflex
    ```

3. From this nix-shell, you can compile your haskell source using ghcjs:

    ```bash
        ghcjs --make source.hs
    ```
    This should look fairly familiar to anyone who has compiled with ghc.

4. Compilation will produce a `source.jsexe` folder containing an `index.html` file. Open that in your browser to run your app.

Code
----
In this example, we'll be following [Luite Stegemann's lead](http://weblog.luite.com/wordpress/?p=127) and building a [simple functional reactive calculator](./main.jsexe/index.html) to be used in a web browser.

### DOM Basics

Reflex's companion library, Reflex-DOM, contains a number of functions used to build and interact with the Document Object Model. Let's start by getting a basic app up and running.

```haskell
    import Reflex.Dom

    main = mainWidget $ el "div" $ text "Welcome to Reflex"
```

Saving this file as `source.hs` and compiling it produces a `source.jsexe` folder (the name of the jsexe folder is based on the name of the hs file). Inside the `source.jsexe` folder you'll find `index.html`. Opening that in your browser will reveal a webpage with a single div containing the text "Welcome to Reflex".

Most Reflex apps will start the same way: a call to `mainWidget` with a starting `Widget`. A `Widget` is some DOM wrapped up for easy use with Reflex. In our example, we are building the argument to `mainWidget`, (in other words, our starting `Widget`) on the same line.

`el` has the type signature:

```haskell
    el :: MonadWidget t m => String -> m a -> m a
```

The first argument to `el` is a `String`, which will become the tag of the html element produced. The second argument is a `Widget`, which will become the child of the element being produced.

In our example, `el "div" $ text "Welcome to Reflex"`, the first argument to `el` was `"div"`, indicating that we are going to produce a div element.

The second argument to `el` was `text "Welcome to Reflex"`. The type signature of `text` is:

```haskell
    text :: MonadWidget t m => String -> m ()
```

`text` takes a `String` and produces a `Widget`. The `String` becomes a text DOM node in the parent element of the `text`. Of course, instead of a `String`, we could have used `el` here as well to continue building arbitrarily complex DOM. For instance, if we wanted to make a unordered list:

```haskell
    import Reflex.Dom

    main = mainWidget $ el "div" $ do
      el "p" $ text "Reflex is:"
      el "ul" $ do
        el "li" $ text "Efficient"
        el "li" $ text "Higher-order"
        el "li" $ text "Glitch-free"
```

### Dynamics and Events
Of course, we want to do more than just view a static webpage. Let's start by getting some user input and printing it.

```haskell
    import Reflex.Dom

    main = mainWidget $ el "div" $ do
      t <- textInput
      dynText $ _textInput_value t
```

Running this in your browser, you'll see that it produces a `div` containing an `input` element. When you type into the `input` element, the text you enter appears inside the div as well.

`textInput` is a function with the following type:

```haskell
    textInput :: MonadWidget t m => m (TextInput t)
```

It takes no arguments, and produces a `Widget` whose result is a `TextInput`. In `Reflex.Dom.Widget.Input` we can see that a `TextInput` exposes the following functionality:

```haskell
    data TextInput t
      = TextInput { _textInput_value :: Dynamic t String
                  , _textInput_keypress :: Event t Int
                  , _textInput_keydown :: Event t Int
                  , _textInput_keyup :: Event t Int
                  , _textInput_hasFocus :: Dynamic t Bool
                  , _textInput_element :: HTMLInputElement
                  }
```

Here we are using `_textInput_value` to access the `Dynamic String` value of the `TextInput`. Conveniently, `dynText` takes a `Dynamic String` and displays it. It is the dynamic version of `text`.

> #### What's with all the `t` arguments?
> FRP-enabled datatypes in Reflex take an argument `t`, which identifies the FRP subsystem being used.  This ensures that wires don't get crossed if a single program uses Reflex in multiple different contexts.  You can think of `t` as identifying a particular "timeline" of the FRP system.
> Because most simple programs will only deal with a single timeline, we won't revisit the `t` parameters in this tutorial.  As long as you make sure your `Event`s, `Behavior`s, and `Dynamic`s all get their `t` argument, it'll work itself out.

We can also access `Event`s related to the `TextInput`. For example, consider the following code:

```haskell
    import Reflex<commit_msg>Move and slightly revise the sidebar on `t` parameters<commit_after>Try Reflex
==========
Setup
-----
The steps below will set up an environment from which you can use Reflex with GHCJS. This process will install the [Nix package manager](https://nixos.org/nix/). If you prefer to install Nix yourself, you may do so any time prior to step 2.

1. Clone the try-reflex repo:

    ```bash
        git clone <EMAIL>:ryantrinkle/try-reflex
    ```

2. Navigate into the `try-reflex` folder and run the try-reflex bootstrapping command. This will install nix, if you don't have it already, and use it to wrangle all the dependencies you'll need and drop you in an environment from which you can use Reflex. Be warned, this might take a little while the first time:

    ```bash
        cd try-reflex
        ./try-reflex
    ```

3. From this nix-shell, you can compile your haskell source using ghcjs:

    ```bash
        ghcjs --make source.hs
    ```
    This should look fairly familiar to anyone who has compiled with ghc.

4. Compilation will produce a `source.jsexe` folder containing an `index.html` file. Open that in your browser to run your app.

Code
----
In this example, we'll be following [Luite Stegemann's lead](http://weblog.luite.com/wordpress/?p=127) and building a [simple functional reactive calculator](./main.jsexe/index.html) to be used in a web browser.

### DOM Basics

Reflex's companion library, Reflex-DOM, contains a number of functions used to build and interact with the Document Object Model. Let's start by getting a basic app up and running.

```haskell
    import Reflex.Dom

    main = mainWidget $ el "div" $ text "Welcome to Reflex"
```

Saving this file as `source.hs` and compiling it produces a `source.jsexe` folder (the name of the jsexe folder is based on the name of the hs file). Inside the `source.jsexe` folder you'll find `index.html`. Opening that in your browser will reveal a webpage with a single div containing the text "Welcome to Reflex".

Most Reflex apps will start the same way: a call to `mainWidget` with a starting `Widget`. A `Widget` is some DOM wrapped up for easy use with Reflex. In our example, we are building the argument to `mainWidget`, (in other words, our starting `Widget`) on the same line.

`el` has the type signature:

```haskell
    el :: MonadWidget t m => String -> m a -> m a
```

The first argument to `el` is a `String`, which will become the tag of the html element produced. The second argument is a `Widget`, which will become the child of the element being produced.

> #### Sidebar: Interpreting the MonadWidget type
> FRP-enabled datatypes in Reflex take an argument `t`, which identifies the FRP subsystem being used.  This ensures that wires don't get crossed if a single program uses Reflex in multiple different contexts.  You can think of `t` as identifying a particular "timeline" of the FRP system.
> Because most simple programs will only deal with a single timeline, we won't revisit the `t` parameters in this tutorial.  As long as you make sure your `Event`, `Behavior`, and `Dynamic` values all get their `t` argument, it'll work itself out.

In our example, `el "div" $ text "Welcome to Reflex"`, the first argument to `el` was `"div"`, indicating that we are going to produce a div element.

The second argument to `el` was `text "Welcome to Reflex"`. The type signature of `text` is:

```haskell
    text :: MonadWidget t m => String -> m ()
```

`text` takes a `String` and produces a `Widget`. The `String` becomes a text DOM node in the parent element of the `text`. Of course, instead of a `String`, we could have used `el` here as well to continue building arbitrarily complex DOM. For instance, if we wanted to make a unordered list:

```haskell
    import Reflex.Dom

    main = mainWidget $ el "div" $ do
      el "p" $ text "Reflex is:"
      el "ul" $ do
        el "li" $ text "Efficient"
        el "li" $ text "Higher-order"
        el "li" $ text "Glitch-free"
```

### Dynamics and Events
Of course, we want to do more than just view a static webpage. Let's start by getting some user input and printing it.

```haskell
    import Reflex.Dom

    main = mainWidget $ el "div" $ do
      t <- textInput
      dynText $ _textInput_value t
```

Running this in your browser, you'll see that it produces a `div` containing an `input` element. When you type into the `input` element, the text you enter appears inside the div as well.

`textInput` is a function with the following type:

```haskell
    textInput :: MonadWidget t m => m (TextInput t)
```

It takes no arguments, and produces a `Widget` whose result is a `TextInput`. In `Reflex.Dom.Widget.Input` we can see that a `TextInput` exposes the following functionality:

```haskell
    data TextInput t
      = TextInput { _textInput_value :: Dynamic t String
                  , _textInput_keypress :: Event t Int
                  , _textInput_keydown :: Event t Int
                  , _textInput_keyup :: Event t Int
                  , _textInput_hasFocus :: Dynamic t Bool
                  , _textInput_element :: HTMLInputElement
                  }
```

Here we are using `_textInput_value` to access the `Dynamic String` value of the `TextInput`. Conveniently, `dynText` takes a `Dynamic String` and displays it. It is the dynamic version of `text`.

We can also access `Event`s related to the `TextInput`. For example, consider the following code:

```haskell
    import Reflex
{'fraction_non_alphanumeric': 0.08576944291230006, 'fraction_numerical': 0.0014708586137157566, 'mean_word_length': 3.3411811652035115, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 22, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 1, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7070745', 'n_tokens_mistral': 3149, 'n_tokens_neox': 2981, 'n_words': 1577}