use styled components and improve error handling

README.md

@@ -3,6 +3,8 @@
 
 A static site generator made in Nix.
 
+This is currently very experimental / subject to change.
+
 ## Why
 
 Clearly there aren't already enough web frameworks out there.

flake.nix

@@ -21,7 +21,7 @@
 
     packages.${system} = {
       default = nixite.mkSite (nixite.site.applyStyle ./testing/src/style.css {
-        "index.html" = with nixite.elems; (doc
+        "index.html" = with nixite.elems; (doc [
           [
             (title "Nixite")
           ]
@@ -33,9 +33,10 @@
               "item 2"
               "item 3"
             ])
-          ]));
+          ])
+        ]);
         blog = {
-          "index.html" = with nixite.elems; (doc
+          "index.html" = with nixite.elems; (doc [
             [
               (title "A post")
             ]
@@ -44,7 +45,8 @@
                 This is a post
               '')
               (link "/" "Home")
-            ]));
+            ])
+          ]);
         };
       });
 

nixite/elems.nix

@@ -1,42 +1,41 @@
 let
   html = import ./html.nix;
-in {
-  p = child:
-    html.tag "p" {} child;
-
-  div = child:
-    html.tag "div" {} child;
-
-  section = child:
-    html.tag "section" {} child;
-
-  span = child:
-    html.tag "span" {} child;
-
-  main = child:
-    html.tag "main" {} child;
-
-  h = v: child:
-    html.tag "h${toString v}" {} child;
-
-  title = child:
-    html.tag "title" {} child;
-
-  link = href: child:
-    html.tag "a" {inherit href;} child;
-
-  stylesheet = path:
-    html.tag "link" {
-      rel = "stylesheet";
-      href = path;
-    } "";
-
-  list = elems: html.tag "ul" {} (map (e: html.tag "li" {} e) elems);
-
-  doc = head: body:
-    assert builtins.isList head;
-      html.tag "html" {lang = "en";} [
-        (html.tag "head" {} head)
-        (html.tag "body" {} body)
+  s = import ./style.nix;
+in
+  (s.styled "p" "p" {} {})
+  (s.styled "div" "div" {} {})
+  (s.styled "section" "section" {} {})
+  (s.styled "span" "span" {} {})
+  (s.styled "main" "main" {} {})
+  (s.styled "article" "article" {} {})
+  (s.styled "title" "title" {} {})
+  (s.styled "h1" "h1" {} {})
+  (s.styled "h2" "h2" {} {})
+  (s.styled "h3" "h3" {} {})
+  (s.styled "list" "ul" {
+    __child = child:
+      assert builtins.isList child; (map (html.tag "li" {}) child);
+  } {})
+  (s.styled "doc" "html" {
+    __child = child:
+      assert builtins.isList child;
+      assert builtins.length child == 2;
+      assert builtins.isList (builtins.elemAt child 0); [
+        (html.tag "head" {} (builtins.elemAt child 0))
+        (html.tag "body" {} (builtins.elemAt child 1))
       ];
-}
+    lang = "en";
+  } {})
+  // {
+    h = v: child:
+      html.tag "h${toString v}" {} child;
+
+    link = href: child:
+      html.tag "a" {inherit href;} child;
+
+    stylesheet = path:
+      html.tag "link" {
+        rel = "stylesheet";
+        href = path;
+      } "";
+  }

nixite/html.nix

@@ -9,8 +9,10 @@ rec {
   writeAttrs = attrs:
     toString (builtins.attrValues (
       builtins.mapAttrs (key: value:
-        if (builtins.substring 0 2 key) == "__" then ""
-          else ''${key}="${toString value}"'') attrs
+        if (builtins.substring 0 2 key) == "__"
+        then ""
+        else ''${key}="${toString value}"'')
+      attrs
     ));
 
   tag = tag: attrs: child: {

nixite/md.nix

@@ -18,7 +18,7 @@ in rec {
       else builtins.stringLength (builtins.elemAt m 0);
   in
     if m == null
-    then elems.p block
+    then elems.p {} block
     else elems.h h (builtins.elemAt m 1);
 
   heading = block: builtins.match "(#+) (.*)" block;

nixite/style.nix

@@ -8,16 +8,19 @@ let
       // {style = self.style + new.style;};
   };
 
-  mkStyle = identifier: styles: if styles == {} then "" else ''
-    ${identifier} {
-      ${toString (builtins.attrValues (
-      builtins.mapAttrs (
-        key: value: ''${key}: ${value};''
-      )
-      styles
-    ))}
-    }
-  '';
+  mkStyle = identifier: styles:
+    if styles == {}
+    then ""
+    else ''
+      ${identifier} {
+        ${toString (builtins.attrValues (
+        builtins.mapAttrs (
+          key: value: ''${key}: ${value};''
+        )
+        styles
+      ))}
+      }
+    '';
 
   mkIdentifier = tag: {
     class ? [],
@@ -33,11 +36,16 @@ let
     )
     + id;
 in {
-  styled = name: tag: cprops: styles:
-    let
-      custom = cprops.__child or (child: child);
-    in{
-      ${name} = props: child: (html.tag tag (props // cprops) (custom child));
+  styled = name: tag: cprops: styles: let
+    custom = cprops.__child or (child: child);
+  in
+    {
+      ${name} = props:
+        if builtins.isAttrs props
+        then (child: (html.tag tag (props // cprops) (custom child)))
+        else if builtins.isString props || builtins.isList props
+        then (html.tag tag cprops (custom props))
+        else throw "Call element with attributes and child.";
 
       style = mkStyle (mkIdentifier tag cprops) styles;
     }

testing/elems.test.nix

@@ -6,23 +6,23 @@ in
   with elems; [
     (it "makes a p tag" {
       expected = html.tag "p" {} "foobar";
-      actual = p "foobar";
+      actual = p {} "foobar";
     })
     (it "makes a div tag" {
       expected = html.tag "div" {} "foobar";
-      actual = div "foobar";
+      actual = div {} "foobar";
     })
     (it "makes a section tag" {
       expected = html.tag "section" {} "foobar";
-      actual = section "foobar";
+      actual = section {} "foobar";
     })
     (it "makes a span tag" {
       expected = html.tag "span" {} "foobar";
-      actual = span "foobar";
+      actual = span {} "foobar";
     })
     (it "makes a main tag" {
       expected = html.tag "main" {} ["yeet"];
-      actual = main ["yeet"];
+      actual = main {} ["yeet"];
     })
     (it "makes an h1 tag" {
       expected = html.tag "h1" {} "foobar";
@@ -34,7 +34,7 @@ in
     })
     (it "makes a title tag" {
       expected = html.tag "title" {} "foobar";
-      actual = title "foobar";
+      actual = title {} "foobar";
     })
     (it "makes an a tag" {
       expected = html.tag "a" {href = "https://example.com";} "example";
@@ -48,18 +48,21 @@ in
       actual = stylesheet "/style";
     })
     (it "makes a list" {
-      expected = html.tag "ul" {} [
+      expected = toString (html.tag "ul" {} [
         (html.tag "li" {} "foo")
         (html.tag "li" {} "bar")
         (html.tag "li" {} "baz")
-      ];
-      actual = list ["foo" "bar" "baz"];
+      ]);
+      actual = toString (list {} ["foo" "bar" "baz"]);
     })
     (it "makes an html doc" {
-      expected = html.tag "html" {lang = "en";} [
-        (html.tag "head" {} ["foo"])
-        (html.tag "body" {} "bar")
-      ];
-      actual = doc ["foo"] "bar";
+      expected = toString (html.tag "html" {
+          __child = "";
+          lang = "en";
+        } [
+          (html.tag "head" {} ["foo"])
+          (html.tag "body" {} "bar")
+        ]);
+      actual = toString (doc {} [["foo"] "bar"]);
     })
   ]

testing/md.test.nix

@@ -10,7 +10,7 @@ in
 
     (assert mdBlock "# heading 1" == elems.h 1 "heading 1"; "makes h1 tag")
     (assert mdBlock "## subheading" == elems.h 2 "subheading"; "makes h2 tag")
-    (assert mdBlock "some paragraph" == elems.p "some paragraph"; "makes p tag")
+    (assert mdBlock "some paragraph" == elems.p {} "some paragraph"; "makes p tag")
 
     (it "processes md block" {
       actual = readMd ''
@@ -21,7 +21,7 @@ in
       expected = [
         (elems.h 1 "foo bar")
         ""
-        (elems.p "lorem ipsum\n")
+        (elems.p {} "lorem ipsum\n")
       ];
     })
   ]

testing/site.test.nix

@@ -1,4 +1,5 @@
 let
+  html = import ../nixite/html.nix;
   elems = import ../nixite/elems.nix;
   site = import ../nixite/site.nix;
   it = import ./it.nix;
@@ -6,9 +7,15 @@ in
   with site; [
     (it "applies a style" {
       expected = {
-        "index.html" = with elems; (doc [(title "foobar") (stylesheet "/style.css")] [(main "something")]);
+        "index.html" = html.tag "html" {} [
+          (html.tag "head" {} [(elems.title {} "foobar") (elems.stylesheet "/style.css")])
+          (elems.main {} "something")
+        ];
         blog = {
-          "index.html" = with elems; (doc [(title "foobar") (stylesheet "/style.css")] [(main "blogy blog")]);
+          "index.html" = html.tag "html" {} [
+            (html.tag "head" {} [(elems.title {} "foobar") (elems.stylesheet "/style.css")])
+            (elems.main {} "blogy blog")
+          ];
         };
         "style.css" = ''
           this is a stylesheet
@@ -18,9 +25,15 @@ in
         applyStyle ''
           this is a stylesheet
         '' {
-          "index.html" = with elems; (doc [(title "foobar")] [(main "something")]);
+          "index.html" = html.tag "html" {} [
+            (html.tag "head" {} [(elems.title {} "foobar")])
+            (elems.main {} "something")
+          ];
           blog = {
-            "index.html" = with elems; (doc [(title "foobar")] [(main "blogy blog")]);
+            "index.html" = html.tag "html" {} [
+              (html.tag "head" {} [(elems.title {} "foobar")])
+              (elems.main {} "blogy blog")
+            ];
           };
         };
     })

testing/style.test.nix

@@ -24,15 +24,17 @@ let
     })
     (style.styled "list" "ul" {
       __child = child:
-        assert builtins.isList child;
-        (map (html.tag "li" {}) child);
-    } {})
-  ;
+        assert builtins.isList child; (map (html.tag "li" {}) child);
+    } {});
 in [
   (it "makes a p component" {
     expected = html.tag "p" {} "yes";
     actual = my.p {} "yes";
   })
+  (it "does not error without attrs" {
+    expected = html.tag "p" {} "yes";
+    actual = my.p "yes";
+  })
   (it "makes a component" {
     expected = html.tag "div" {class = ["something"];} "foobar";
     actual = my.div {} "foobar";
@@ -53,7 +55,7 @@ in [
       (html.tag "li" {} "1")
       (html.tag "li" {} "2")
     ]);
-    actual = toString ( my.list {} ["1" "2"] );
+    actual = toString (my.list {} ["1" "2"]);
   })
   (it "combines attrs" {
     expected = html.tag "div" {