docs: crazy amounts of docs

1 files changed, 240 insertions, 26 deletions

diff --git a/docs/api/functions.md b/docs/api/functions.md
index 39f85cb..55fd701 100644
--- a/docs/api/functions.md
+++ b/docs/api/functions.md
@@ -5,19 +5,33 @@ type custom-property-name = `--${string}`
 type selector = string // Any css selector or identifier (used as id)
 type condition = string // empty string, 0, 'false', "'false'" and "\"false\"" are all false, the rest are fine. Don't ask.
 type duration = number | `${number}ms` | `${number}s`
+type pair = string: any
 ```
 
-## get-var
-Get css custom property from an element
+===
+
+
+## Core
+
+### get-var
+Get css custom property from an element. Basically var but evaluated lazily.
 
 NOTE: Avoid using `var` inside cssx expressions.
 
 ```typescript
 function get-var(custom-property-name): string
-function get-var(selector, custom-property-name): string
+function get-var(custom-property-name, default-value): string
+```
+
+Example -
+```css
+#my-element {
+  --cssx-text: get-var(--some-variable);
+}
 ```
 
-## update
+
+#### update
 Update a css custom property on an element
 
 ```typescript
@@ -25,24 +39,230 @@ function update(custom-property-name, string): void
 function update(selector, custom-property-name, string): string
 ```
 
+Example -
+```css
+#my-element {
+  --cssx-on-click: update(some-el, --text, attr(input-element, 'value'));
 
-## js-eval
-Evaluate any js expression. Easy escape hatch into writing the worst code humanly possible.
+  --cssx-children: input#input-element #some-el;
+}
 
-```typescript
-function js-eval(string): string
+#some-el { --text: "default"; }
+#some-el::after { content: var(--text); }
 ```
 
 
-## if
+### if
 If expression. You know how this one goes. If truthy, it'll pick the second argument, else the third.
 
 ```typescript
 function if(condition, any, any): any
 ```
 
+Example -
+```css
+#my-element {
+  --boolean: false;
+
+  --cssx-on-update:
+    update(background-color,
+      if(
+        get-var(--boolean)
+        'DarkGoldenRod',
+        'PapayaWhip'
+      )
+    );
+}
+```
+
+### map
+A constructor function to create a map of key value pairs.
+
+```typescript
+function map(...pair): map
+```
+
+Example -
+```css
+#my-element {
+  --cssx-children: instance(
+    div#some-element,
+    map(--prop1: "hello", --prop2: "world")
+  );
+}
+```
+
+### seq
+> WIP Docs
+
+### call
+Call a "function". A function is any series of expressions defined in a css custom property.
+
+NOTE: Every function call creates a new dom node for computing the result. Dom nodes are the call stack.
+
+```typescript
+function call(var-identifier, map): any
+```
+
+Example -
+```css
+#my-element {
+  --factorial: if(
+    js-expr(string(get-var(--n), '> 1')),
+    js-expr(string(
+      get-var(--n),
+      ' * ',
+      call(--factorial, map(--n: js-expr(string(get-var(--n), ' - 1'))))
+    )),
+    1
+  );
+
+  --cssx-on-mount: js-expr(string(
+    'console.log("',
+      call(--factorial, map(--n: 5)),
+    '")'
+  ));
+}
+```
+
+Or let's just go nuts with functions.
+Because we use named properties as arguments and css is cascading, all named properties are implicitly available to everything getting called.
+
+> Not a design choice, a design consequence.
+
+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.
+
+```css
+#my-element {
+  --binary-op:
+    func(--left, --op, --right)
+    js-expr(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: ' * '));
+
+  --factorial: if(call(--greater-than, map(--left: get-var(--n), --right: 1)),
+    call(--multiply, map(
+      --left: get-var(--n),
+      --right: call(--factorial,
+        map(--n: call(--minus,
+          map(--left: get-var(--n), --right: 1)))
+      )
+    )),
+    1
+  );
+}
+```
+
+### string
+Concatenate strings together / Cast a value to string explicitly
+
+```typescript
+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), '")'));
+}
+```
 
-## delay
+### quotify
+Add quotes around a value
+
+```typescript
+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)), ')'));
+}
+```
+
+
+### unquotify
+Remove quotes from a value. No example here, use your imagination.
+
+```typescript
+function quotify(string): string
+```
+
+
+### do
+Evaluate a series of expressions in sequence and return the last value.
+
+```css
+#my-element {
+  --cssx-on-mount:
+    if(get-var(--some-boolean),
+      do(
+        add-class(loading),
+        delay(1s),
+        remove-class(loading)
+      ),
+      noop(),
+    )
+  ;
+}
+```
+
+
+### try
+The standard try/catch as an expression. The error expression is scoped and gets access to a `--error` value.
+
+```css
+form#my-form {
+  --cssx-on-submit:
+    prevent-default()
+    add-class(form, 'submitting')
+    try(
+      do(
+        request('/your-api/some-api', 'POST'),
+        add-class(form, 'submitted')
+      ),
+      js-eval(string('alert("', get-var(--error), '")'))
+    )
+    remove-class(form, 'submitting')
+  ;
+}
+```
+
+### let
+Create a binding for use inside a scoped expression.
+
+`--random` is only available within the let binding
+```css
+#my-element {
+  --cssx-on-mount:
+    let(--random, js-eval('Math.random()'),
+      js-eval('alert("', get-var(--random),'")')
+    )
+  ;
+}
+```
+
+
+===
+
+
+## Others
+
+### js-eval
+Evaluate any js expression. Easy escape hatch directly to hell.
+
+```typescript
+function js-eval(string): string
+```
+
+### request
+> WIP Docs
+
+### delay
 Wait a bit.
 
 ```typescript
@@ -56,36 +276,30 @@ Examples for input -
 - `delay(0.5s)`: wait for 500 milliseconds
 
 
-## load-cssx
-
-
-## set-attr
-
-
-## attr
-
+===
 
-## prevent-default
 
+## DOM
 
-## request
+### load-cssx
+Load more of this abomination into your page
 
 
-## add-children
+### set-attr
 
 
-## remove-element
+### attr
 
 
-## call-method
+### add-children
 
 
-## map
+### remove-element
 
 
-## call
+### prevent-default
 
 
-## func
+### call-method