<commit_before># Elm Components

Create infinitely nestable components that are easy to write, test, and reuse.

This package is the next step in [The Elm Architecture][arch], making it easy to create components that request JSON, have animations, talk to databases, etc.

[arch]: https://github.com/evancz/elm-architecture-tutorial/


## The General Pattern

The general pattern is a slight extension to [The Elm Architecture][arch]. If you have not read about that, do it now. Come on, here is [the link][arch] again. Go and read it!

Alright, now that you know about that, almost everything is the same here. We build up a component as a model, a way to update that model, and a way to view that model. As you look through the following skeleton code, read `Transaction Message Model` as “a new model” to get the basic intuition:


```elm
module MyComponent where


-- MODEL

type Model<commit_msg>Link to all the examples up front<commit_after># Elm Components

Create infinitely nestable components that are easy to write, test, and reuse.

This package is the next step in [The Elm Architecture][arch], making it easy to create components that request JSON, have animations, talk to databases, etc.

[arch]: https://github.com/evancz/elm-architecture-tutorial/

The following tutorial will work through the following examples:

  - [Random GIF fetcher](http://evancz.github.io/elm-components/examples/random-gifs.html) &mdash; [code](examples/1)
  - [Pair of random GIFs](http://evancz.github.io/elm-components/examples/random-gifs-pair.html) &mdash; [code](examples/2)
  - [List of random GIFs](http://evancz.github.io/elm-components/examples/random-gifs-list.html) &mdash; [code](examples/3)
  - [Animating Components](http://evancz.github.io/elm-components/examples/animating-pair.html) &mdash; [code](examples/4)

The goal of these examples is to build an intuition of the general architecture pattern and how to use this library, so you can go do fancier stuff in your project.


## The General Pattern

The general pattern is a slight extension to [The Elm Architecture][arch]. If you have not read about that, do it now. Come on, here is [the link][arch] again. Go and read it!

Alright, now that you know about that, almost everything is the same here. We build up a component as a model, a way to update that model, and a way to view that model. As you look through the following skeleton code, read `Transaction Message Model` as “a new model” to get the basic intuition:


```elm
module MyComponent where


-- MODEL

type Model
{'fraction_non_alphanumeric': 0.08608490566037735, 'fraction_numerical': 0.0015723270440251573, 'mean_word_length': 4.391949152542373, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, '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': '275983', 'n_tokens_mistral': 741, 'n_tokens_neox': 697, 'n_words': 344}