refactor: extract module code

build.sh

@@ -1,8 +1,8 @@
 #!/bin/bash -eu
 
-elm make --optimize --output=js/miu-demo.js src/Miu.elm
+elm make --optimize --output=js/miu-demo.js src/Miudemo.elm
 
-{ cat js/jquery.js js/jquery.markitup.js js/custom-element-markitup.js js/miu-demo.js ; echo 'Elm.Miu.init({node: document.getElementById("elm")});'; } | google-closure-compiler -W QUIET > out.js
+{ cat js/jquery.js js/jquery.markitup.js js/custom-element-markitup.js js/miu-demo.js ; echo 'Elm.Miudemo.init({node: document.getElementById("elm")});'; } | google-closure-compiler -W QUIET > out.js
 
 sh <(awk -f qq.awk miu-demo.qq.html | sed '1s/%%%/"%%%"/') > index.html
 

src/Markitup.elm

@@ -0,0 +1,32 @@
+module Markitup exposing(..)
+
+import Html exposing (Attribute, Html, a, br, div, h2, hr, p, text)
+import Html.Attributes exposing (href, property)
+import Html.Events exposing (on)
+import Json.Decode as JD exposing (Decoder)
+import Json.Encode as JE exposing (Value)
+
+
+{-| Here's our custom element, defined in js/custom-element-markitup.js
+-}
+markItUp : List (Attribute msg) -> List (Html msg) -> Html msg
+markItUp =
+    Html.node "markitup-textarea"
+
+
+{-| This is how you set the contents of the editor.
+-}
+editorValue : String -> Attribute msg
+editorValue value =
+    property "editorValue" <|
+        JE.string value
+
+
+{-| This is how you receive changes to the contents of the editor.
+-}
+onEditorChanged : (String -> msg) -> Attribute msg
+onEditorChanged tagger =
+    on "editorChanged" <|
+        JD.map tagger <|
+            JD.at [ "target", "editorValue" ]
+                JD.string

src/Miudemo.elm

@@ -1,4 +1,4 @@
-module Miu exposing (main)
+module Miudemo exposing (main)
 
 import Browser
 import Html exposing (Attribute, Html, a, br, div, h2, hr, p, text)
@@ -7,7 +7,7 @@ import Html.Events exposing (on)
 import Json.Decode as JD exposing (Decoder)
 import Json.Encode as JE exposing (Value)
 import Markdown
-
+import Markitup exposing (..)
 
 main =
     Browser.sandbox
@@ -33,31 +33,6 @@ update msg model =
             { model | value = value }
 
 
-{-| Here's our custom element, defined in js/custom-element-markitup.js
--}
-markItUp : List (Attribute msg) -> List (Html msg) -> Html msg
-markItUp =
-    Html.node "markitup-textarea"
-
-
-{-| This is how you set the contents of the editor.
--}
-editorValue : String -> Attribute msg
-editorValue value =
-    property "editorValue" <|
-        JE.string value
-
-
-{-| This is how you receive changes to the contents of the editor.
--}
-onEditorChanged : (String -> msg) -> Attribute msg
-onEditorChanged tagger =
-    on "editorChanged" <|
-        JD.map tagger <|
-            JD.at [ "target", "editorValue" ]
-                JD.string
-
-
 view : Model -> Html Msg
 view model =
     div []