reusable, extendable tags

flake.nix

@@ -10,30 +10,29 @@
       packages.${system} = {
         raw = nixite.mkSite (let
           readme = {
-            type = "link";
             name = "readme";
             content = nixite.md.mdToPage ./README.md;
           };
           markup = {
-            "test" = with nixite.elems;
+            "index.html" = with nixite.elems;
               let
-                blue = nixite.style.tag "span" "blue" {
+                blue = nixite.style.component span "blue" {
                   style = { color = "blue"; };
                 };
-                underblue = nixite.style.extend blue "under" {
+                underblue = nixite.style.component blue "under" {
                   style = { text-decoration = "underline"; };
                 };
               in (Doc { } [
-                [ (title { } "Nixite") ]
-                (main { } [
-                  (a { href = readme; } "Readme")
+                [ (title "Nixite") ]
+                (main [
+                  (a { href = nixite.site.link readme; } "Readme")
                   (a "/blog" "blog")
                   (List { } [ "item 1" "item 2" "item 3" ])
-                  (p { } [
+                  (p [
                     "check out my"
                     (blue "blue span")
                     "isn't it"
-                    (underblue "great!")
+                    (underblue { onclick = "alert(1)"; } "great!")
                   ])
                 ])
               ]);

nixite/html.nix

@@ -28,26 +28,28 @@ in rec {
         else
           keyvalue key value) attrs)));
 
-  tag = tag: {
-    inherit tag;
-    __toString = self: toString (self { } "");
-    __functor = self: attrs:
-      if !(builtins.isAttrs attrs) then
-        throw "HTML tag requires attribute set"
-      else {
-        inherit tag attrs;
+  tag = t: {
+    tag = t;
+    attrs = {};
     __toString = self: toString (self "");
     __functor = self: child:
-          if !(isTag child) then
+      (if !(isTag child) then
+        (if isSet child then
+          self // ({attrs = self.attrs // child;})
+        else
         throw "tag child must be tag, list, or string, got ${
           builtins.typeOf child
         }"
+        )
       else {
-            inherit tag attrs child;
+        tag = t;
+        attrs = self.attrs;
+        inherit child;
         __toString = toHTML;
+      });
   };
-      };
-  };
+
+  isSet = a: builtins.isAttrs a && !a ? __toString;
 
   isTag = tag:
     (builtins.isString tag || builtins.isList tag

nixite/site.nix

@@ -112,6 +112,8 @@ in rec {
     else
       [ ]);
 
+  link = {name, content}@page: page // {type = "link";};
+
   copyTo = prefix: site:
     builtins.toString (builtins.attrValues (builtins.mapAttrs (name: content:
       if builtins.isString content then ''

nixite/style.nix

@@ -1,5 +1,4 @@
 let
-  html = import ./html.nix;
 
   styleToString = identifier: styles:
     if !builtins.isAttrs styles then
@@ -21,7 +20,7 @@ let
       ({
         ${element.attrs.__id} = element.attrs.style or { };
       } // (if element.attrs ? __extends then {
-        ${element.attrs.__extends.attrs.__id} =
+        ${element.attrs.__extends.attrs.__id or element.attrs.__extends.tag} =
           element.attrs.__extends.attrs.style or { };
       } else
         { }))
@@ -42,10 +41,11 @@ let
     builtins.zipAttrsWith (name: value: builtins.elemAt value 0)
     (map getStyles elements);
 
-  mkProps = props: tag: class:
+  mkProps = tag: class: props:
     props // {
-      __id = "${tag}.${builtins.concatStringsSep "." class}";
-      class = class ++ (props.class or [ ]);
+      __id = "${tag.tag}.${class}";
+      __extends = tag;
+      class = ( tag.attrs.class or [] ) ++ [ class ] ++ (props.class or [ ]);
     };
 
   stylesToString = styles:
@@ -55,11 +55,6 @@ let
 in {
   inherit getStyle getStyles stylesToString;
 
-  extend = tag: class: props:
-    (html.tag tag.tag ((mkProps props tag.tag (tag.attrs.class ++ [ class ]))
-      // {
-        __extends = tag;
-      }));
-
-  tag = tag: class: props: (html.tag tag (mkProps props tag [ class ]));
+  component = tag: class: props:
+    tag ( mkProps tag class props );
 }

testing/html.test.nix

@@ -81,6 +81,12 @@ in with html; [
     expected = ''<p class="foobar"></p>'';
   }))
 
+  (it "can take many sets of props" (let p = tag "p";
+  in {
+    actual = toString (p { class = "foobar"; } { style = "a style"; });
+    expected = ''<p class="foobar" style="a style"></p>'';
+  }))
+
   (it "works recursively" (let
     attrs = { style = { foo = "bar"; }; };
     para = (tag "p" attrs);

testing/import.nix

@@ -1,4 +1,5 @@
 path:
+builtins.trace ( "testing " + builtins.baseNameOf path ) 
 ''
   echo
   echo 'TEST: ${builtins.baseNameOf path}'

testing/it.nix

@@ -4,7 +4,7 @@ msg:
 let
   preProcess = v:
     if removeDunders then
-      builtins.removeAttrs v [ "__toString" "__functor" ]
+      undunder v
     else if asString then
       toString v
     else if asJSON then
@@ -15,11 +15,14 @@ let
   a = preProcess actual;
   e = preProcess expected;
 
+  undunder = v: if builtins.isAttrs v then builtins.removeAttrs v [ "__toString" "__functor" ] else v;
+
+  out = (if safeToPrint then builtins.toJSON (undunder actual) else ''{"msg": "refusing to print"}'');
+
 in if (a == e) then ''
   echo 'it ${msg}'
 '' else
-  builtins.trace "FAILED ${msg}" builtins.trace
-  (if safeToPrint then builtins.toJSON actual else actual) builtins.trace
-  (if safeToPrint then builtins.toJSON expected else expected) ''
+  builtins.trace "FAILED ${msg}" ''
     echo FAILED ${msg} 
+    echo '${out}' | jq '.'
   ''

testing/site.test.nix

@@ -85,13 +85,13 @@ in with site; [
   })
 
   (it "gets all styles" {
-    expected = {
+    expected = {"p"={};"div"={};
       "p.class" = { color = "blue"; };
-      "a.class2" = { color = "green"; };
+      "div.class2" = { color = "green"; };
     };
     actual = getStyles (let
-      p = style.tag "p" "class" { style = { color = "blue"; }; };
-      g = style.tag "a" "class2" { style = { color = "green"; }; };
+      p = style.component elems.p "class" { style = { color = "blue"; }; };
+      g = style.component elems.div "class2" { style = { color = "green"; }; };
     in {
       "index.html" = p "";
       blog = { "index.html" = g ""; };

testing/style.test.nix

@@ -1,26 +1,27 @@
 let
   style = import ../nixite/style.nix;
+  elems = import ../nixite/elems.nix;
   it = import ./it.nix;
 
 in [
 
-  (it "fetches empty style" (let para = (style.tag "p" "para" { });
+  (it "fetches empty style" (let para = (style.component elems.p "para" { });
   in {
-    expected = { "p.para" = { }; };
+    expected = { "p" = {}; "p.para" = { }; };
     actual = style.getStyle (para "");
   }))
 
   (it "fetches style" (let
     attrs = { style = { foo = "bar"; }; };
-    para = (style.tag "p" "para" attrs);
+    para = (style.component elems.p "para" attrs);
   in {
-    expected = { "p.para" = attrs.style; };
+    expected = {"p" = {};  "p.para" = attrs.style; };
     actual = style.getStyle (para "");
   }))
 
   (it "appliess class" (let
     attrs = { style = { foo = "bar"; }; };
-    para = (style.tag "p" "para" attrs);
+    para = (style.component elems.p "para" attrs);
   in {
     expected = [ "para" ];
     actual = (para "").attrs.class;
@@ -31,7 +32,7 @@ in [
       style = { foo = "bar"; };
       class = [ "other" "class" ];
     };
-    para = (style.tag "p" "para" attrs);
+    para = (style.component elems.p "para" attrs);
   in {
     expected = [ "para" "other" "class" ];
     actual = (para "").attrs.class;
@@ -39,32 +40,32 @@ in [
 
   (it "fetches style for class" (let
     s = { foo = "bar"; };
-    para = (style.tag "p" "para" { style = s; });
+    para = (style.component elems.p "para" { style = s; });
   in {
-    expected = { "p.para" = s; };
+    expected = { "p" = {}; "p.para" = s; };
     actual = style.getStyle (para "");
   }))
 
   (it "fetches style recursively" (let
-    s = {
+    s = {"p" = {};"div" = {};
       "p.para" = { foo = "bar"; };
-      "a.link" = { this = "that"; };
+      "div.link" = { this = "that"; };
     };
-    para = (style.tag "p" "para" { style = s."p.para"; });
-    a = (style.tag "a" "link" { style = s."a.link"; });
+    para = (style.component elems.p "para" { style = s."p.para"; });
+    div = (style.component elems.div "link" { style = s."div.link"; });
   in {
     expected = s;
-    actual = style.getStyles (para (a "hello"));
+    actual = style.getStyles (para (div "hello"));
     removeDunders = true;
   }))
 
   (it "fetches style recursively through lists" (let
-    s = {
+    s = {"p" = {};"div" = {};
       "p.para" = { foo = "bar"; };
-      "a.link" = { this = "that"; };
+      "div.link" = { this = "that"; };
     };
-    para = (style.tag "p" "para" { style = s."p.para"; });
-    a = (style.tag "a" "link" { style = s."a.link"; });
+    para = (style.component elems.p "para" { style = s."p.para"; });
+    a = (style.component elems.div "link" { style = s."div.link"; });
   in {
     expected = s;
     actual = style.getStyles (para [ (a "hello") ]);
@@ -72,12 +73,12 @@ in [
   }))
 
   (it "fetches style recursively with repeats" (let
-    s = {
+    s = {"p" = {};"div" = {};
       "p.para" = { foo = "bar"; };
-      "a.link" = { this = "that"; };
+      "div.link" = { this = "that"; };
     };
-    para = (style.tag "p" "para" { style = s."p.para"; });
-    a = (style.tag "a" "link" { style = s."a.link"; });
+    para = (style.component elems.p "para" { style = s."p.para"; });
+    a = (style.component elems.div "link" { style = s."div.link"; });
   in {
     expected = s;
     actual = style.getStyles (para [ (a "hello") (a "hello") ]);
@@ -85,7 +86,7 @@ in [
   }))
 
   (it "converts styles to string" (let
-    s = {
+    s = {"p" = {};
       "p.para" = { foo = "bar"; };
       "a.link" = { this = "that"; };
     };
@@ -104,10 +105,10 @@ in [
   (it "extends styled tags" (let
     s = {
       "p.para" = { foo = "bar"; };
-      "p.para.oof" = { oof = "yes"; };
+      "p.oof" = { oof = "yes"; };
     };
-    para = (style.tag "p" "para" { style = s."p.para"; });
-    para2 = (style.extend para "oof" { style = s."p.para.oof"; });
+    para = (style.component elems.p "para" { style = s."p.para"; });
+    para2 = (style.component para "oof" { style = s."p.oof"; });
   in {
     expected = s;
     actual = style.getStyles (para2 "");
@@ -115,12 +116,12 @@ in [
   }))
 
   (it "extends styled tags classes" (let
-    s = {
+    s = {"p" = {}; "div" = {};
       "p.para" = { foo = "bar"; };
       "p.para.oof" = { oof = "yes"; };
     };
-    para = (style.tag "p" "para" { style = s."p.para"; });
-    para2 = (style.extend para "oof" { style = s."p.para.oof"; });
+    para = (style.component elems.p "para" { style = s."p.para"; });
+    para2 = (style.component para "oof" { style = s."p.para.oof"; });
   in {
     expected = [ "para" "oof" ];
     actual = (para2 "").attrs.class;