https://github.com/pauldijou/elm-dom-diff
https://github.com/pauldijou/elm-dom-diff
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pauldijou/elm-dom-diff
- Owner: pauldijou
- Created: 2016-05-17T11:54:26.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-05-17T12:52:20.000Z (over 9 years ago)
- Last Synced: 2025-02-04T20:44:03.929Z (11 months ago)
- Language: Elm
- Size: 2.93 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# elm dom diff
> Trying to understand some Elm virtual dom stuff
## Install
```bash
git clone git@github.com:pauldijou/elm-dom-diff.git
cd elm-dom-diff
./build
```
Then open `index.html` in your favorite browser.
When opening the first and third items, it will update the `class` attribute and add text inside it with a nice CSS transition. When opening the second item, it will remove the node and create a new one. You can check the console to see the mutation events.
So what's the difference? Nearly none... All items follow the same rules except the **first** is declared directly inside `Main.elm` while the others resides in their own module following the Elm architecture. The difference between **second** and **third** is that **second** uses `Html.App.map` inside `Maybe.withDefault` while the other is doing the inverse.