cssx-framework - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

package.json

 {
   "name": "cssx-framework",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "A CSS driven web framework that compiles semi-standard CSS into HTML content + styles at runtime",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -167,2 +167,72 @@ # Overview
 </button>
+```
+
+To make shared functions, simply pull your event attribute definitions out into a mixin, and `@include` them like a normal mixin.
+
+> Note: Mixin params are determined at **compile time**, so ensure that your mixin functions cater for this.
+
+```scss
+@mixin testFunction() {
+    --onclick: "console.log('test');";
+    --onclick: "setInterval(() => {";
+    --onclick: "document.getElementById('picture-gallery').scrollBy({left: -25, behavior: 'smooth'})";
+    --onclick: "}, 100)";
+}
+
+button.anotherButton {
+    @include testFunction;
+    --text: "Click me again";
+}
+```
+
+#### Built-in Function Variables
+
+CSSX has some built-in function variables to simplify the code needed for event functions. They can be referenced for any event function and will be replaced via string replacement at compile time. The functionality of these built-in functions can be overidden by redefining a variable with the same name within your CSSX.
+
+These are defined below:
+
+```js
+const BUILT_IN_FUNCTIONS = {
+  '$setVariable': 'document.styleSheets[0].cssRules[0].style.setProperty',
+  '$getVariable': 'document.styleSheets[0].cssRules[0].style.getPropertyValue',
+  '$parseObject': 'JSON.parse',
+  '$stringifyObject': 'JSON.stringify',
+}
+```
+
+Example:
+
+```scss
+button {
+    --onclick: $getVariable('--object');
+    --text: "Click";
+    --type: "button";
+}
+```
+
+=>
+
+```html
+<button onclick="document.styleSheets[0].cssRules[0].style.getPropertyValue('--object')" type="button">
+    Click
+</button>
+```
+
+### Complex objects
+
+All variables used to interact with the UI in CSSX are managed as CSS variables (ie `--variable: value;`), and need to be defined as **immediate children of the root object**. As CSSX is a line-by-line framework, and isn't smart enough to understand complex object variables, these need to be defined as single line string values as well (ie `--form: {"name": null, "email": null};`).
+
+In order to perform any object manipulation, these variables will then need to be parsed to an object first.
+
+An example for alerting an object might be:
+
+```scss
+div.page {
+    --form: {"name": null, "email": null};
+
+    button {
+        --onclick: alert($parseObject($getVariable('--form')));
+        --type: "button";
+    }
+}
 ```

src/mixins.js

@@ -42,3 +42,3 @@ import { parseAttributeValue } from './html.js'
     trackedNode.attrs = trackedNode.attrs
-        .map(child => ({...child, value: parseAttributeValue(params[child.value] || child.value)}))
+        .map(child => ({...child, value: replaceParams(parseAttributeValue(params[child.value] || child.value), params)}))
   
@@ -45,0 +45,0 @@ // Recursively process children

src/tree.js

@@ -12,4 +12,4 @@ import { readFileSync } from 'fs'
 const isIncludeMixin = (text) => text.includes('@include')
-const isStartParentBlock = (text) => text.includes(CHARS.OPEN_BRACE)
-const isEndParentBlock = (text) => text.includes(CHARS.CLOSE_BRACE)
+const isStartParentBlock = (text) => text.trim().endsWith(CHARS.OPEN_BRACE)
+const isEndParentBlock = (text) => text.trim().endsWith(CHARS.CLOSE_BRACE)
 
@@ -16,0 +16,0 @@ /**

src/variables.js

@@ -7,2 +7,4 @@
   '$getVariable': 'document.styleSheets[0].cssRules[0].style.getPropertyValue',
+  '$parseObject': 'JSON.parse',
+  '$stringifyObject': 'JSON.stringify',
 }
@@ -9,0 +11,0 @@

No alert changes

Improved metrics

Total package byte prevSize

26911

9.8%

Lines of code

439

0.46%

Number of lines in readme file

237

41.92%

No dependency changes