docs: more docs

3 files changed, 20 insertions, 21 deletions

diff --git a/docs/api/functions.md b/docs/api/functions.md
index 55fd701..e7bce4f 100644
--- a/docs/api/functions.md
+++ b/docs/api/functions.md
@@ -108,16 +108,16 @@ Example -
 ```css
 #my-element {
   --factorial: if(
-    js-expr(string(get-var(--n), '> 1')),
-    js-expr(string(
+    js-eval(string(get-var(--n), '> 1')),
+    js-eval(string(
       get-var(--n),
       ' * ',
-      call(--factorial, map(--n: js-expr(string(get-var(--n), ' - 1'))))
+      call(--factorial, map(--n: js-eval(string(get-var(--n), ' - 1'))))
     )),
     1
   );
 
-  --cssx-on-mount: js-expr(string(
+  --cssx-on-mount: js-eval(string(
     'console.log("',
       call(--factorial, map(--n: 5)),
     '")'
@@ -132,13 +132,13 @@ Because we use named properties as arguments and css is cascading, all named pro
 
 So `--left` and `--right` is implicitly available to `--binary-op`.
 
-> NOTE: `func` in `--binary-op` doesn't do anything. It's to make the developer feel better.
+NOTE: `func` in `--binary-op` doesn't do anything. It's to make the developer feel better.
 
 ```css
 #my-element {
   --binary-op:
     func(--left, --op, --right)
-    js-expr(string(get-var(--left), get-var(--op), get-var(--right)));
+    js-eval(string(get-var(--left), get-var(--op), get-var(--right)));
   --greater-than: call(--binary-op, map(--op: ' >= '));
   --minus: call(--binary-op, map(--op: ' - '));
   --multiply: call(--binary-op, map(--op: ' * '));
@@ -166,7 +166,7 @@ function string(...string): string
 ```css
 #my-element {
   --log-stuff: 'Stuff to log to console';
-  --cssx-on-mount: js-expr(string('console.log("', get-var(--log-stuff), '")'));
+  --cssx-on-mount: js-eval(string('console.log("', get-var(--log-stuff), '")'));
 }
 ```
 
@@ -180,7 +180,7 @@ function quotify(string): `'${string}'`
 ```css
 #my-element {
   --log-stuff: 'Stuff to log to console';
-  --cssx-on-mount: js-expr(string('console.log(', quotify(get-var(--log-stuff)), ')'));
+  --cssx-on-mount: js-eval(string('console.log(', quotify(get-var(--log-stuff)), ')'));
 }
 ```
 
diff --git a/docs/how-it-works.md b/docs/how-it-works.md
index c4d6fe3..585b8cc 100644
--- a/docs/how-it-works.md
+++ b/docs/how-it-works.md
@@ -1,6 +1,8 @@
 # How does it work?
 Who knows really? It's just magic for the most part.
 
+===
+
 ## Creating the dom tree
 
 Everything starts with the `body` element (by default).
@@ -29,9 +31,6 @@ Let's go deeper...
 
 Now `my-element`, gets 2 children. You can probably figure out what those would look like.
 
-> NOTE: The styles for `#my-element` has to be loaded into the dom before the
-
-
 You may have already noticed a problem here. If you don't override the --cssx-children property, wouldn't all children of body get access to that?
 
 Well yeah, which is why, we have a `.cssx-layer` element between the parent and children. This element wraps all children and makes it so all the cssx property are unset. This can occasionally make styling a bit difficult but that's a YOU problem for trying to use this.
@@ -77,18 +76,18 @@ This is by far the most "fun" aspect of this project. Take a look at the docs fo
 ```css
 #my-element {
   --factorial:
-    func(--n)
+    func(--n: number)
     if(
-      js-expr(string(get-var(--n), '> 1')),
-      js-expr(string(
+      js-eval(string(get-var(--n), '> 1')),
+      js-eval(string(
         get-var(--n),
         ' * ',
-        call(--factorial, map(--n: js-expr(string(get-var(--n), ' - 1'))))
+        call(--factorial, map(--n: js-eval(string(get-var(--n), ' - 1'))))
       )),
       1
     );
 
-  --cssx-on-mount: js-expr(string(
+  --cssx-on-mount: js-eval(string(
     'console.log("',
       call(--factorial, map(--n: 5)),
     '")'
@@ -97,6 +96,7 @@ This is by far the most "fun" aspect of this project. Take a look at the docs fo
 ```
 
 NOTE: `func` is noop and just exists for documentation. You can also do `func(--a: string, --b: number)` and it'll be valid syntax but ignored at evaluation. So basically, typescript.
+NOTE: If you come at me with how using `js-eval` is cheating, I won't be responsible for your injuries. JS-in-CSS is the future.
 
 The way this works is that it creates a new dom element inside the caller (`#my-element`), which then becomes the scope for the function.
 Whatever arguments are passed to call will be added as css properties to this dom element.
@@ -121,10 +121,9 @@ This means that with `call(--factorial, map(--n: 5))` the dom tree would look so
 </div>
 ```
 
-This is the call stack. This is immedietely deleted as soon as the required computation is completed.
+This is the call stack. This is immedietely deleted as soon as the required computation is completed. Not performing any tail-call optimizations for this to make it use just the one element, but if you're interested in giving it a shot, it should be fairly straight-forward to implement.
 
-> PRO TIP 1: If you want the tree to persist even after the function is evaluated for debugging, add the `data-debug-stack` attribute to the caller element
+> PRO TIP 1: If you want the tree to persist even after the function is evaluated (for debugging), add the `data-debug-stack` attribute to the caller element
 > PRO TIP 2: You could style these nodes to have this tree show up in the ui and use the `--cssx-text` property to display the arguments for each recursive function call
-> PRO TIP 3: If you're running into infinite loops, good luck. Also, you can add `delay(1s)` at the start to slow things down to debug.
-
+> PRO TIP 3: If you're running into infinite loops, good luck. Also, you can add `delay(1s)` at the start of the function to slow things down to debug.
 
diff --git a/docs/recipies.md b/docs/recipies.md
index 133f69f..c034ca4 100644
--- a/docs/recipies.md
+++ b/docs/recipies.md
@@ -49,7 +49,7 @@ NOTE: Try to avoid doing this. Please refer to [./security.md](./security.md) fo
 ```css
 #my-element {
   --cssx-on-mount: update(--random, '0');
-  --cssx-on-update: delay(500ms) update(--random, js-expr('Math.random()'));
+  --cssx-on-update: delay(500ms) update(--random, js-eval('Math.random()'));
 }
 
 #my-element::after {