Typed tags. Version bump 0.4.0

README.md

@@ -6,7 +6,7 @@ This library provides [Nitrogen](https://nitrogenproject.com/)-like templating f
 
 ### Generate HTML
 
-Each `Nitroux` function represents an HTML tag and generates HTML content. Example:
+Each `Nitroux` function represents an HTML tag and generates HTML content:
 
 ```elixir
 iex> Nitroux.hr()
@@ -41,6 +41,16 @@ iex> Nitroux.div(html: p("hello world"))
 "<div><p>hello world</p></div/>"
 ```
 
+### Use typed version
+
+If you want additional type hints and don't mind additional verbosity, use `Nitroux.HtmlTypedTags` module. Instead of `html` key in keyword parameters, content is passed via a second parameter, which can be either a tag or a list of tags. 
+
+```elixir
+iex> Nitroux.HtmlTypedTags.div([class: "red"], Nitroux.HtmlTypedTags.p([], "hello world"))
+"<div class=\"red\"><p>hello world</p></div/>"
+```
+
+
 ## Rationale
 
 Take this HTML as an example:
@@ -53,7 +63,7 @@ Take this HTML as an example:
 </ul>
 ```
 
-We usually don't think of HTML as code, but if we were to treat it as such, would have to admit that this example does not adhere to the DRY (Don't Repeat Yourself) principle. Nitroux solves this problem by allowing us to think of HTML as code, while keeping our maintenance burden to the minimum. The above example becomes:
+We usually don't think of HTML as code, but if we were to treat it as such, we would have to admit that this example does not adhere to the DRY (Don't Repeat Yourself) principle. Nitroux solves this problem by allowing us to think of HTML as code, while keeping our maintenance burden to the minimum. The above example becomes:
 
 ```elixir
   import Nitroux
@@ -88,7 +98,7 @@ by adding `nitroux` to your list of dependencies in `mix.exs`:
 ```elixir
 def deps do
   [
-    {:nitroux, "~> 0.3"}
+    {:nitroux, "~> 0.4"}
   ]
 end
 ```

generator.js

@@ -45,8 +45,8 @@ const fs = require("fs");
   } else {
     console.log("No rows found in the table.");
   }
-  const outputFilePath = "lib/nitroux/html_tags.ex";
-  const wrappedElement = `
+  let outputFilePath = "lib/nitroux/html_tags.ex";
+  let wrappedElement = `
     defmodule Nitroux.HtmlTags do
 
     # AUTO GENERATED. DO NOT EDIT
@@ -57,7 +57,7 @@ const fs = require("fs");
         ${extractedElements
           .map((e) => {
               return `
-                @spec ${e}(String.t() | Nitroux.Types.GlobalAttributes.t) :: binary
+                @spec ${e}(map() | [Nitroux.Utils.tag()] | Nitroux.Utils.tag()) :: Nitroux.Utils.tag()
                 def ${e}(attrs), do: "${e}" |> tag(attrs ${voidElements.includes(e) ? ", false" : ""})
             `
           })
@@ -67,7 +67,30 @@ const fs = require("fs");
     end
   `;
   fs.writeFileSync(outputFilePath, wrappedElement);
+
 
+  outputFilePath = "lib/nitroux/html_typed_tags.ex";
+  wrappedElement = `
+    defmodule Nitroux.HtmlTypedTags do
+
+    # AUTO GENERATED. DO NOT EDIT
+
+    defmacro __using__(_opts) do
+    quote do
+    import Nitroux.Utils
+        ${extractedElements
+          .map((e) => {
+              return `
+                @spec ${e}(Nitroux.Types.GlobalAttributes.t(), [Nitroux.Utils.tag()] | Nitroux.Utils.tag()) :: [Nitroux.Utils.tag()] | Nitroux.Utils.tag()
+                def ${e}(attrs, content), do: "${e}" |> tag(attrs, content ${voidElements.includes(e) ? ", false" : ""})
+            `
+          })
+          .join("\n")}
+    end
+    end
+    end
+  `;
+  fs.writeFileSync(outputFilePath, wrappedElement);
   // Close the browser
   await browser.close();
 })();