Initial commit.

.gitignore

@@ -0,0 +1,6 @@
+elm-stuff/
+node_modules/
+tmp/
+dist/
+yarn.lock
+

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "elm.makeCommand": "./node_modules/.bin/elm-make",
+    "elm.analyseCommand": "./node_modules/.bin/elm-analyse",
+    "elm.formatCommand": "./node_modules/.bin/elm-format",
+    "elm.analyseEnabled": true,
+}

README.md

@@ -0,0 +1,20 @@
+# elm-example
+
+## Development
+
+```bash
+yarn start
+```
+
+* Access app at `http://localhost:8080/`
+* Get coding! The entry point file is `src/elm/Main.elm`
+* Browser will refresh automatically on any file changes..
+
+## Building
+
+```bash
+yarn run build
+```
+
+* Files are saved into the `/dist` folder
+* To check it, open `dist/index.html`

elm-package.json

@@ -0,0 +1,15 @@
+{
+  "version": "0.0.1",
+  "summary": "A simple example app with elm and javascript.",
+  "repository": "https://github.com/jshmrtn/elm-example.git",
+  "license": "UNLICENSED",
+  "source-directories": ["src/elm"],
+  "exposed-modules": [],
+  "dependencies": {
+    "elm-lang/core": "5.0.0 <= v < 6.0.0",
+    "elm-lang/html": "2.0.0 <= v < 3.0.0",
+    "elm-lang/http": "1.0.0 <= v < 2.0.0",
+    "evancz/elm-markdown": "3.0.1 <= v < 4.0.0"
+  },
+  "elm-version": "0.18.0 <= v < 0.19.0"
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "elm-example",
+  "description": "A simple example app with elm and webpack.",
+  "version": "0.0.1",
+  "license": "UNLICENSED",
+  "author": "Jeremy Zahner",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jshmrtn/elm-example.git"
+  },
+  "scripts": {
+    "postinstall": "./node_modules/.bin/elm package install",
+    "start": "webpack-dev-server --hot --inline",
+    "prebuild": "rimraf dist",
+    "build": "webpack",
+    "reinstall": "./node_modules/.bin/rimraf elm-stuff && ./node_modules/.bin/rimraf node_modules && yarn install"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.7",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.27.3",
+    "elm": "^0.18.0",
+    "elm-analyse": "^0.13.3",
+    "elm-format": "^0.6.1-alpha",
+    "elm-webpack-loader": "^4.3.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.28.0",
+    "node-sass": "^4.5.1",
+    "postcss-loader": "^1.3.3",
+    "rimraf": "^2.6.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.0",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.1",
+    "webpack-dev-server": "^2.4.2",
+    "webpack-merge": "^4.1.0"
+  }
+}

src/elm/Components/Hello.elm

@@ -0,0 +1,29 @@
+module Components.Hello exposing (..)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+
+
+-- MODEL
+
+
+type alias Model =
+    { name : String
+    , counter : Int
+    }
+
+
+
+-- VIEW
+
+
+view : Model -> Html a
+view model =
+    div []
+        [ h1
+            [ class "name-title" ]
+            [ text ("Hello, " ++ model.name) ]
+        , h2
+            [ class "counter-title" ]
+            [ text ("You are number " ++ (toString model.counter)) ]
+        ]

src/elm/Components/Input.elm

@@ -0,0 +1,54 @@
+module Components.Input exposing (..)
+
+import Html exposing (input, Html)
+import Html.Attributes exposing (type_, value)
+import Html.Events exposing (onInput, onFocus, onBlur)
+
+
+-- MODEL
+
+
+type alias Model =
+    String
+
+
+init : Model -> ( Model, Cmd Msg )
+init text =
+    ( text, Cmd.none )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = Update Model
+    | Focus
+    | Blur
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        Update value ->
+            ( value, Cmd.none )
+
+        _ ->
+            ( model, Cmd.none )
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+    input
+        [ type_ "text"
+        , onInput Update
+        , onFocus Focus
+        , onBlur Blur
+        , value model
+        , Html.Attributes.placeholder "Max"
+        ]
+        []

src/elm/Main.elm

@@ -0,0 +1,103 @@
+module Main exposing (..)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (onClick)
+
+
+-- COMPONENTS
+
+import Components.Hello as Hello
+import Components.Input as Input
+
+
+-- APP
+
+
+main : Program Never Model Msg
+main =
+    Html.beginnerProgram { model = model, view = view, update = update }
+
+
+
+-- MODEL
+
+
+type alias Model =
+    { name : String
+    , counter : Int
+    , input : String
+    }
+
+
+model : Model
+model =
+    { name = "Astronaut"
+    , counter = 1
+    , input = ""
+    }
+
+
+
+-- UPDATE
+
+
+type Msg
+    = Change
+    | InputMsg Input.Msg
+
+
+update : Msg -> Model -> Model
+update msg model =
+    case msg of
+        Change ->
+            case model.input of
+                "" ->
+                    { model | name = "Astronaut", counter = model.counter + 1 }
+
+                input ->
+                    { model | name = input, counter = model.counter + 1 }
+
+        InputMsg inputMessage ->
+            case inputMessage of
+                Input.Update inputValue ->
+                    { model | input = inputValue }
+
+                _ ->
+                    model
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+    div [ class "container", style [ ( "margin-top", "30px" ), ( "text-align", "center" ) ] ]
+        [ div [ class "row" ]
+            [ div [ class "col-xs-12" ]
+                [ div [ class "jumbotron" ]
+                    [ Hello.view { name = model.name, counter = model.counter } -- ext 'hello' component (takes 'model' as arg)
+                    , Html.map InputMsg (Input.view model.input)
+                    , br [] []
+                    , button [ class "btn btn-primary btn-lg", style styles.button, onClick Change ]
+                        [ span [] [ text "Change Hello Name" ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+
+-- CSS STYLES
+
+
+styles : { button : List ( String, String ) }
+styles =
+    { button =
+        [ ( "margin-top", "20px" )
+        , ( "padding", "10px" )
+        , ( "border", "1px solid black" )
+        ]
+    }

src/static/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>elm-example</title>
+  <meta name="description" content="A simple example with elm and webpack." />
+  <meta name="author" content="Jeremy Zahner" />
+</head>
+
+<body>
+  <div id="main"></div>
+</body>
+
+</html>

src/static/index.js

@@ -0,0 +1,4 @@
+require( './styles/main.scss' );
+
+var Elm = require( '../elm/Main' );
+Elm.Main.embed( document.getElementById( 'main' ) );

src/static/styles/main.scss

@@ -0,0 +1,3 @@
+body {
+    background-color: silver;
+}