From 4a8e3d204c6b05bc65b9317196e5415077a98aa1 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Fri, 25 Aug 2023 19:22:19 +0530 Subject: docs: more docs --- docs/api/functions.md | 16 ++++++++-------- docs/how-it-works.md | 23 +++++++++++------------ docs/recipies.md | 2 +- 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 ``` -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 { -- cgit v1.3.1