use modd and devd for the developer experience

BrianHicks · May 14, 2020 · 1960701 · 1960701
1 parent a654354
commit 1960701
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 7 deletions.
diff --git a/modd.conf b/modd.conf
@@ -0,0 +1,7 @@
+src/** vendor/** {
+    prep: ./script/build.sh
+}
+
+dist/** {
+    daemon: devd -m ./dist
+}
diff --git a/script/build.sh b/script/build.sh
@@ -9,7 +9,18 @@ elmFlags=--debug
 rule elm
   command = elm make \$elmFlags --output=\$out \$in
 
-build dist/elm.js: elm src/Main.elm | elm.json $(echo "$ELM_FILES" | tr '\n' ' ')
+rule minify
+  command = uglifyjs \$in > \$out
+
+rule copy
+  command = cp \$in \$out
+
+build dist/index.html: copy src/index.html
+build dist/script/custom-elements-builtin-bootstrap.js: minify src/custom-elements-builtin-bootstrap.js
+build dist/script/custom-elements-builtin.js: minify vendor/custom-elements-builtin.js
+build dist/script/elm.js: elm src/Main.elm | elm.json $(echo "$ELM_FILES" | tr '\n' ' ')
+build dist/script/index.js: copy src/index.js
+build dist/script/pouchdb.js: minify vendor/pouchdb-7.1.1.js
 EOF
 
 ninja "$@"
diff --git a/shell.nix b/shell.nix
@@ -22,5 +22,10 @@ stdenv.mkDerivation {
 
     # building
     ninja
+    nodePackages.uglify-js
+
+    # development
+    devd
+    modd
   ] ++ lib.optionals stdenv.isDarwin darwinDeps;
 }
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,7 @@
         <title>Notes</title>
     </head>
     <body>
-        <script src="/custom-elements-builtin.js"></script>
-        <script src="/index.js"></script>
+        <script src="/script/custom-elements-builtin-bootstrap.js"></script>
+        <!-- <script src="/script/index.js"></script> -->
     </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,6 @@
+import { PouchDB } from "pouchdb";
+import { Elm } from "./Main.elm";
+
 // custom element
 class NodeInput extends HTMLTextAreaElement {
   connectedCallback() {
@@ -29,10 +32,6 @@ class NodeInput extends HTMLTextAreaElement {
 
 customElements.define("node-input", NodeInput, { extends: "textarea" });
 
-// storage
-import PouchDB from "pouchdb";
-import { Elm } from "./Main.elm";
-
 var db = new PouchDB("notes");
 // TODO: set up syncing