cultureamp · cbrake · Nov 6, 2019
diff --git a/example-elm0.19.1-parcel/.gitignore b/example-elm0.19.1-parcel/.gitignore
@@ -0,0 +1,2 @@
+.cache
+dist
diff --git a/example-elm0.19.1-parcel/README.md b/example-elm0.19.1-parcel/README.md
@@ -0,0 +1,18 @@
+# Example using React, Elm, and Parcel bundler
+
+[Parcel](https://parceljs.org/) is a blazing fast, zero configiguration web
+application bundler. It has [built in support](https://parceljs.org/elm.html)
+for components written in Elm.
+
+## Build Instructions
+
+Run the following commands:
+
+```bash
+git clone https://github.com/evancz/react-elm-components.git
+cd react-elm-components/example-elm0.19.1-parcel
+npm install
+npm run start
+```
+
+Open http://localhost:1234/
diff --git a/example-elm0.19.1-parcel/elm.json b/example-elm0.19.1-parcel/elm.json
@@ -0,0 +1,24 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.2",
+            "elm/core": "1.0.2",
+            "elm/html": "1.0.0",
+            "elm/time": "1.0.0"
+        },
+        "indirect": {
+            "elm/json": "1.1.3",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
diff --git a/example-elm0.19.1-parcel/index.html b/example-elm0.19.1-parcel/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>React + Elm</title>
+	<link href="styles.css" rel="stylesheet" />
+</head>
+
+<body>
+	<div id="time"></div>
+	<script src="index.jsx"></script>
+</body>
+
+</html>
diff --git a/example-elm0.19.1-parcel/index.jsx b/example-elm0.19.1-parcel/index.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import EmojiPicker from "emojione-picker";
+import Elm from "react-elm-components";
+import Time from "./src/Main.elm";
+
+class ReactTimeExample extends React.Component {
+  render() {
+    return (
+      <div className="time-container">
+        <h2>The current time is:</h2>
+        <Elm src={Time.Elm.Main} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<ReactTimeExample />, document.getElementById("time"));
diff --git a/example-elm0.19.1-parcel/package.json b/example-elm0.19.1-parcel/package.json
@@ -0,0 +1,19 @@
+{
+  "scripts": {
+    "buildelm": "elm make --output=Time.js src/Main.elm",
+    "start": "parcel ./index.html",
+    "build": "rm -rf dist && parcel build --public-url / ./index.html",
+    "watch": "parcel watch --public-url / ./index.html"
+  },
+  "dependencies": {
+    "emojione-picker": "^2.2.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "react-elm-components": "^1.1.0"
+  },
+  "devDependencies": {
+    "elm-hot": "^1.1.3",
+    "node-elm-compiler": "^5.0.4",
+    "parcel-bundler": "^1.12.4"
+  }
+}
diff --git a/example-elm0.19.1-parcel/src/Main.elm b/example-elm0.19.1-parcel/src/Main.elm
@@ -0,0 +1,97 @@
+module Main exposing (Model, Msg(..), init, main, subscriptions, timeToString, update, view)
+
+import Browser
+import Html exposing (..)
+import Task
+import Time
+
+
+
+-- MAIN
+
+
+main =
+    Browser.element
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = subscriptions
+        }
+
+
+
+-- MODEL
+
+
+type alias Model =
+    { zone : Time.Zone
+    , time : Time.Posix
+    }
+
+
+init : () -> ( Model, Cmd Msg )
+init _ =
+    ( Model Time.utc (Time.millisToPosix 0)
+    , Task.perform AdjustTimeZone Time.here
+    )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = Tick Time.Posix
+    | AdjustTimeZone Time.Zone
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        Tick newTime ->
+            ( { model | time = newTime }
+            , Cmd.none
+            )
+
+        AdjustTimeZone newZone ->
+            ( { model | zone = newZone }
+            , Cmd.none
+            )
+
+
+
+-- SUBSCRIPTIONS
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Time.every 1000 Tick
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+    let
+        hour =
+            timeToString (Time.toHour model.zone model.time)
+
+        minute =
+            timeToString (Time.toMinute model.zone model.time)
+
+        second =
+            timeToString (Time.toSecond model.zone model.time)
+    in
+    case Time.posixToMillis model.time of
+        0 ->
+            h1 [] []
+
+        time ->
+            h1 [] [ text (hour ++ ":" ++ minute ++ ":" ++ second) ]
+
+
+timeToString : Int -> String
+timeToString int =
+    String.padLeft 2 '0' (String.fromInt int)
diff --git a/example-elm0.19.1-parcel/styles.css b/example-elm0.19.1-parcel/styles.css
@@ -0,0 +1,25 @@
+body {
+  margin: 0;
+  background-color: #5a6378;
+}
+
+.time-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.time-container h1 {
+  margin: 0;
+  font-size: 10vh;
+  color: white;
+}
+
+.time-container h2 {
+  margin: 0;
+  font-style: italic;
+  font-size: 3vh;
+  font-weight: 200;
+  color: white;
+}