Merge pull request #16 from danbugs/dan/v050

added insert_html, remove_html_children_of_id, render_html_loop, display_html_loop, and remove_html_with_class. renamed remove_html to remove_static_html. added more examples

README.md

@@ -55,11 +55,11 @@ html_t hello_world()
     // ^^^ functions that return content to be rendered 
     // must return the html_t or char* types
 
-    html_t tmp = malloc(128 * sizeof(char));
+    html_t tmp;
     // ^^^ you don't need to free this malloc,
     // the framework will do it for you.
 
-    sprintf(tmp, "%s", "Hello, World!");
+    asprintf(&tmp, "%s", "Hello, World!");
     // ^^^ this works because html_t expands 
     // to char*
 
@@ -96,7 +96,7 @@ To test the project, run: `tapm run`. Navigating to `http://127.0.0.1:4000` in y
 
 ![getting-started-1](https://i.imgur.com/zGWqSow.png)
 
-For a more complex example, view the project in the `example/` folder of the repo!
+For more complex examples, view the project in the `examples/` folder of the repo!
 
 ## Appendix
 
@@ -129,24 +129,30 @@ html_t html = HTML(
 );
 ```
 
-### Building from source
+...or:
 
-The root level `Makefile` was designed for POSIX-compliant systems — `tapm build` will not work on Windows outside of WSL.
-
-### Binding a C function to a DOM event
-
-![binding-a-c-function-to-a-dom-event](https://camo.githubusercontent.com/339f5dbb4a8a9945034f5b1ba5efc7e5e2780a5353361c2fbea52b5ae47c7c4b/68747470733a2f2f692e696d6775722e636f6d2f6c766e6f646e442e676966)
+```
+html_t html = HTMLIFY(" \
+<div> \
+  <h1 class='red'>${hello_world()}$</h1> \
+</div> \
+<style> \
+  .red { \
+    color: red; \
+  } \
+</style> \
+");
+```
 
 ### Returning other types as `html_t`
 
 ```
 EMSCRIPTEN_KEEPALIVE
 html_t add_two_numbers(int a, int b)
 {
-    char *tmp = malloc(128 * sizeof(int));
+    char *tmp;
     int result = a + b;
-    sprintf(tmp, "%d", result);
-    html_t expands to char*
+    asprintf(&tmp, "%d", result);
     return tmp;
 }
 ```
@@ -164,20 +170,6 @@ html_t hello_world()
 ```
 ... would also work. Thing is, it is not the best because the framework will try to free a pointer that wasn't malloc-ed. While this doesn't cause an error, I wouldn't call it a best practice.
 
-### Are you updating HTML you've already rendered?
-
-If that's the case, you must remove the old html before you update your state. For example, when updating the counter in `example/src/hello_world.c`, I do:
-
-```C
-EMSCRIPTEN_KEEPALIVE
-void increase_counter()
-{
-    remove_html(main_h);
-    counter++;
-    display_html(main_h);
-}
-```
-
 ### Notes to Self
 
 To check for any problems (i.e., mem leaks and whatnot) in the code at runtime, compile like so: `emcc hello_world.c ../../src/dcw.c --js-library ../../src/dcw.js -fsanitize=address -s ALLOW_MEMORY_GROWTH -s INITIAL_MEMORY=285212672 -gsource-map --source-map-base http://127.0.0.1:4000`. After that, run with: `tapm run`.

Tarantella.toml

@@ -1,6 +1,6 @@
 [package]
 name = "dcw"
-version = "0.4.0"  # format: major.minor.patch
+version = "0.5.0"  # format: major.minor.patch
 module_type = "side_module" # main_module || side_module
 build_dir = "build" # when modifying this field, change BUILD_DIR in the Makefile too
 releases_repo = "https://github.com/danbugs/dancing_web" # format: https://github.com/<owner>/<repo_name>

docs/dcw_8c__incl.map

@@ -1,11 +1,12 @@
-<map id="src/dcw.c" name="src/dcw.c">
-<area shape="rect" id="node1" title=" " alt="" coords="339,5,421,32"/>
-<area shape="rect" id="node2" href="$dcw_8h.html" title=" " alt="" coords="7,155,65,181"/>
-<area shape="rect" id="node3" href="$dcw__internal_8h.html" title=" " alt="" coords="25,80,143,107"/>
-<area shape="rect" id="node4" title=" " alt="" coords="167,80,273,107"/>
-<area shape="rect" id="node5" title=" " alt="" coords="298,80,369,107"/>
-<area shape="rect" id="node6" title=" " alt="" coords="393,80,460,107"/>
-<area shape="rect" id="node7" title=" " alt="" coords="485,80,555,107"/>
-<area shape="rect" id="node8" title=" " alt="" coords="579,80,650,107"/>
-<area shape="rect" id="node9" title=" " alt="" coords="675,80,755,107"/>
-</map>
+<map id="src/dcw.c" name="src/dcw.c">
+<area shape="rect" id="node1" title=" " alt="" coords="386,5,467,32"/>
+<area shape="rect" id="node2" href="$dcw_8h.html" title=" " alt="" coords="7,155,65,181"/>
+<area shape="rect" id="node3" href="$dcw__internal_8h.html" title=" " alt="" coords="25,80,143,107"/>
+<area shape="rect" id="node4" title=" " alt="" coords="167,80,273,107"/>
+<area shape="rect" id="node5" title=" " alt="" coords="298,80,369,107"/>
+<area shape="rect" id="node6" title=" " alt="" coords="393,80,460,107"/>
+<area shape="rect" id="node7" title=" " alt="" coords="485,80,555,107"/>
+<area shape="rect" id="node8" title=" " alt="" coords="579,80,650,107"/>
+<area shape="rect" id="node9" title=" " alt="" coords="675,80,757,107"/>
+<area shape="rect" id="node10" title=" " alt="" coords="781,80,861,107"/>
+</map>

docs/dcw_8c__incl.md5

@@ -1 +1 @@
-5ce12cf315bdc2fd53b0abe1d271605e
+a660977b8c4d102b08b7bf46ef82af80

docs/dcw_8h.html

@@ -92,12 +92,50 @@
 Macros</h2></td></tr>
 <tr class="memitem:af567bc1a447b57bc4f446b93f5a3e8d2"><td class="memItemLeft" align="right" valign="top">#define&#160;</td><td class="memItemRight" valign="bottom"><a class="el" href="dcw_8h.html#af567bc1a447b57bc4f446b93f5a3e8d2">html_t</a>&#160;&#160;&#160;char *</td></tr>
 <tr class="separator:af567bc1a447b57bc4f446b93f5a3e8d2"><td class="memSeparator" colspan="2">&#160;</td></tr>
-<tr class="memitem:adb7919934cdf0c9f8d1a017e77cd1b47"><td class="memItemLeft" align="right" valign="top">#define&#160;</td><td class="memItemRight" valign="bottom"><a class="el" href="dcw_8h.html#adb7919934cdf0c9f8d1a017e77cd1b47">HTML</a>(...)&#160;&#160;&#160;#__VA_ARGS__;</td></tr>
+<tr class="memitem:adb7919934cdf0c9f8d1a017e77cd1b47"><td class="memItemLeft" align="right" valign="top">#define&#160;</td><td class="memItemRight" valign="bottom"><a class="el" href="dcw_8h.html#adb7919934cdf0c9f8d1a017e77cd1b47">HTML</a>(...)&#160;&#160;&#160;#__VA_ARGS__</td></tr>
 <tr class="separator:adb7919934cdf0c9f8d1a017e77cd1b47"><td class="memSeparator" colspan="2">&#160;</td></tr>
+<tr class="memitem:a1265783e5741118f6b03f8b1b463ffbc"><td class="memItemLeft" align="right" valign="top"><a id="a1265783e5741118f6b03f8b1b463ffbc"></a>
+#define&#160;</td><td class="memItemRight" valign="bottom"><b>HTMLIFY</b>(str)&#160;&#160;&#160;(<a class="el" href="dcw_8h.html#af567bc1a447b57bc4f446b93f5a3e8d2">html_t</a>) str</td></tr>
+<tr class="separator:a1265783e5741118f6b03f8b1b463ffbc"><td class="memSeparator" colspan="2">&#160;</td></tr>
+<tr class="memitem:ad7bacf2541029a8abefd4b8fd5e47884"><td class="memItemLeft" align="right" valign="top">#define&#160;</td><td class="memItemRight" valign="bottom"><a class="el" href="dcw_8h.html#ad7bacf2541029a8abefd4b8fd5e47884">dbg</a>(to_print,  formatter)</td></tr>
+<tr class="separator:ad7bacf2541029a8abefd4b8fd5e47884"><td class="memSeparator" colspan="2">&#160;</td></tr>
 </table>
 <a name="details" id="details"></a><h2 class="groupheader">Detailed Description</h2>
 <div class="textblock"><p>Useful macros intended to be used by the end-user. </p>
 </div><h2 class="groupheader">Macro Definition Documentation</h2>
+<a id="ad7bacf2541029a8abefd4b8fd5e47884"></a>
+<h2 class="memtitle"><span class="permalink"><a href="#ad7bacf2541029a8abefd4b8fd5e47884">&#9670;&nbsp;</a></span>dbg</h2>
+
+<div class="memitem">
+<div class="memproto">
+      <table class="memname">
+        <tr>
+          <td class="memname">#define dbg</td>
+          <td>(</td>
+          <td class="paramtype">&#160;</td>
+          <td class="paramname">to_print, </td>
+        </tr>
+        <tr>
+          <td class="paramkey"></td>
+          <td></td>
+          <td class="paramtype">&#160;</td>
+          <td class="paramname">formatter&#160;</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>)</td>
+          <td></td><td></td>
+        </tr>
+      </table>
+</div><div class="memdoc">
+<b>Value:</b><div class="fragment"><div class="line">    {                                                     \</div>
+<div class="line">        printf(#to_print <span class="stringliteral">&quot;: &quot;</span> #formatter <span class="stringliteral">&quot;\n&quot;</span>, to_print); \</div>
+<div class="line">    }</div>
+</div><!-- fragment --><p>A utility function for easy debug. It prints the variable name and its' value. Usage: char *hello_world = "Hello, World!"; dbg(hello_world, d);</p>
+<p>Output: "hello_world: Hello, World!" </p>
+
+</div>
+</div>
 <a id="adb7919934cdf0c9f8d1a017e77cd1b47"></a>
 <h2 class="memtitle"><span class="permalink"><a href="#adb7919934cdf0c9f8d1a017e77cd1b47">&#9670;&nbsp;</a></span>HTML</h2>
 
@@ -109,7 +147,7 @@ <h2 class="memtitle"><span class="permalink"><a href="#adb7919934cdf0c9f8d1a017e
           <td>(</td>
           <td class="paramtype">&#160;</td>
           <td class="paramname"><em>...</em></td><td>)</td>
-          <td>&#160;&#160;&#160;#__VA_ARGS__;</td>
+          <td>&#160;&#160;&#160;#__VA_ARGS__</td>
         </tr>
       </table>
 </div><div class="memdoc">

docs/dcw_8h_source.html

@@ -73,21 +73,27 @@
 <div class="title">dcw.h</div>  </div>
 </div><!--header-->
 <div class="contents">
-<a href="dcw_8h.html">Go to the documentation of this file.</a><div class="fragment"><div class="line"><a name="l00001"></a><span class="lineno">    1</span>&#160;<span class="preprocessor">#pragma once</span></div>
-<div class="line"><a name="l00002"></a><span class="lineno">    2</span>&#160; </div>
-<div class="line"><a name="l00006"></a><span class="lineno">    6</span>&#160;<span class="comment">/*</span></div>
-<div class="line"><a name="l00007"></a><span class="lineno">    7</span>&#160;<span class="comment"> * Copyright 2021 Danilo Chiarlone</span></div>
-<div class="line"><a name="l00008"></a><span class="lineno">    8</span>&#160;<span class="comment"> * LICENSE: GNU AFFERO GENERAL PUBLIC LICENSE</span></div>
-<div class="line"><a name="l00009"></a><span class="lineno">    9</span>&#160;<span class="comment">*/</span></div>
-<div class="line"><a name="l00010"></a><span class="lineno">   10</span>&#160; </div>
-<div class="line"><a name="l00013"></a><span class="lineno"><a class="line" href="dcw_8h.html#af567bc1a447b57bc4f446b93f5a3e8d2">   13</a></span>&#160;<span class="preprocessor">#define html_t char *</span></div>
-<div class="line"><a name="l00014"></a><span class="lineno">   14</span>&#160; </div>
-<div class="line"><a name="l00017"></a><span class="lineno"><a class="line" href="dcw_8h.html#adb7919934cdf0c9f8d1a017e77cd1b47">   17</a></span>&#160;<span class="preprocessor">#define HTML(...) #__VA_ARGS__;</span></div>
-<div class="line"><a name="l00018"></a><span class="lineno">   18</span>&#160; </div>
-<div class="line"><a name="l00027"></a><span class="lineno"><a class="line" href="dcw_8c.html#ad7bacf2541029a8abefd4b8fd5e47884">   27</a></span>&#160;<span class="preprocessor">#define dbg(to_print, formatter)                          \</span></div>
-<div class="line"><a name="l00028"></a><span class="lineno">   28</span>&#160;<span class="preprocessor">    {                                                     \</span></div>
-<div class="line"><a name="l00029"></a><span class="lineno">   29</span>&#160;<span class="preprocessor">        printf(#to_print &quot;: &quot; #formatter &quot;\n&quot;, to_print); \</span></div>
-<div class="line"><a name="l00030"></a><span class="lineno">   30</span>&#160;<span class="preprocessor">    }</span></div>
+<a href="dcw_8h.html">Go to the documentation of this file.</a><div class="fragment"><div class="line"><a name="l00001"></a><span class="lineno">    1</span>&#160; </div>
+<div class="line"><a name="l00005"></a><span class="lineno">    5</span>&#160;<span class="comment">/*</span></div>
+<div class="line"><a name="l00006"></a><span class="lineno">    6</span>&#160;<span class="comment"> * Copyright 2021 Danilo Chiarlone</span></div>
+<div class="line"><a name="l00007"></a><span class="lineno">    7</span>&#160;<span class="comment"> * LICENSE: GNU AFFERO GENERAL PUBLIC LICENSE</span></div>
+<div class="line"><a name="l00008"></a><span class="lineno">    8</span>&#160;<span class="comment">*/</span></div>
+<div class="line"><a name="l00009"></a><span class="lineno">    9</span>&#160; </div>
+<div class="line"><a name="l00010"></a><span class="lineno">   10</span>&#160;<span class="preprocessor">#ifndef DCW_H</span></div>
+<div class="line"><a name="l00011"></a><span class="lineno">   11</span>&#160;<span class="preprocessor">#define DCW_H</span></div>
+<div class="line"><a name="l00012"></a><span class="lineno">   12</span>&#160; </div>
+<div class="line"><a name="l00015"></a><span class="lineno"><a class="line" href="dcw_8h.html#af567bc1a447b57bc4f446b93f5a3e8d2">   15</a></span>&#160;<span class="preprocessor">#define html_t char *</span></div>
+<div class="line"><a name="l00016"></a><span class="lineno">   16</span>&#160; </div>
+<div class="line"><a name="l00019"></a><span class="lineno"><a class="line" href="dcw_8h.html#adb7919934cdf0c9f8d1a017e77cd1b47">   19</a></span>&#160;<span class="preprocessor">#define HTML(...) #__VA_ARGS__</span></div>
+<div class="line"><a name="l00020"></a><span class="lineno">   20</span>&#160; </div>
+<div class="line"><a name="l00021"></a><span class="lineno">   21</span>&#160;<span class="preprocessor">#define HTMLIFY(str) (html_t) str</span></div>
+<div class="line"><a name="l00022"></a><span class="lineno">   22</span>&#160; </div>
+<div class="line"><a name="l00031"></a><span class="lineno"><a class="line" href="dcw_8h.html#ad7bacf2541029a8abefd4b8fd5e47884">   31</a></span>&#160;<span class="preprocessor">#define dbg(to_print, formatter)                          \</span></div>
+<div class="line"><a name="l00032"></a><span class="lineno">   32</span>&#160;<span class="preprocessor">    {                                                     \</span></div>
+<div class="line"><a name="l00033"></a><span class="lineno">   33</span>&#160;<span class="preprocessor">        printf(#to_print &quot;: &quot; #formatter &quot;\n&quot;, to_print); \</span></div>
+<div class="line"><a name="l00034"></a><span class="lineno">   34</span>&#160;<span class="preprocessor">    }</span></div>
+<div class="line"><a name="l00035"></a><span class="lineno">   35</span>&#160; </div>
+<div class="line"><a name="l00036"></a><span class="lineno">   36</span>&#160;<span class="preprocessor">#endif</span></div>
 </div><!-- fragment --></div><!-- contents -->
 <!-- start footer part -->
 <hr class="footer"/><address class="footer"><small>