Feature/docs and updates

build/polyclass.browser-core.js

@@ -233,17 +233,17 @@ console.log(blendedcolor, blendedcolor2)
 })();
 
 /**
- * A DynamicCSSStyleSheet allows the developer to manipulate the
- * CSS Style objects within the sheet, rather than switching classes
- * or using JS.
- *
- * When installed the stylesheet acts behaves like a standard stylesheet
- * We can add, update, and remove active style definitions, immediately
- * affecting the view.
- *
- * This is very useful for complex or dynamic CSS definitions, such as
- * a `path()` or font packages. We can couple view changes with style attributes
- * without a middle-man
+ A DynamicCSSStyleSheet allows the developer to manipulate the
+ CSS Style objects within the sheet, rather than switching classes
+ or using JS.
+
+ When installed the stylesheet acts behaves like a standard stylesheet
+ We can add, update, and remove active style definitions, immediately
+ affecting the view.
+
+ This is very useful for complex or dynamic CSS definitions, such as
+ a `path()` or font packages. We can couple view changes with style attributes
+ without a middle-man
  */
 class RenderArray extends Array {
     renderAll() {
@@ -449,10 +449,10 @@ class DynamicCSSStyleSheet {
     }
 
     _getIndexBySelector(selector, sheet)  {
-        let c = 0 
+        let c = 0
         for(let rule of sheet.cssRules) {
             if(selector == rule.selectorText) {
-                return c 
+                return c
             }
             c++;
         }
@@ -633,6 +633,7 @@ class ClassGraph {
     constructor(conf) {
         this.conf = conf || {}
 
+        this.announce('wake')
         /*
             A simple key -> function dictionary to capture special (simple)
             keys during the translate value phase.
@@ -641,7 +642,7 @@ class ClassGraph {
         this.translateMap = {
             // 'var': this.variableDigest,
         }
-
+        this.reducers = []
         if(this.conf.addons !== false) {
             this.installAddons(this.getPreAddons())
         }
@@ -651,8 +652,38 @@ class ClassGraph {
         this.aliasMap = {}
         this.parentSelector = conf?.parentSelector
         this.processAliases(this.conf?.aliases)
+        this.announce('ready')
+    }
+
+    announce(name) {
+        let e = new CustomEvent(`classgraph-${name}`, {
+            detail: {
+                entity: this
+            }
+        })
+        dispatchEvent(e)
     }
+    /* Insert a literal translation to the translateMap for detection single
+    words within a class string. for example detect `var` in "color-var-foo"
+
+        const variableDigest2 =  function(splitObj, inStack, outStack, currentIndex) {
+            /* Convert the value keys to a var representation.
+                 `var-name-switch` -> [var, name, switch]
+             to
+                 `var(--name-switch)`
+            *\/
 
+            let keys = inStack.slice(currentIndex)
+            let k1 = keys.slice(1)
+            let word = `var(--${k1.join("-")})`
+
+            outStack.push(word)
+            // return [inStack, outStack, currentIndex]
+            return [[], outStack, currentIndex + k1.length]
+        }
+
+        cg.insertTranslator('var', variableDigest2)
+    */
     insertTranslator(key, func) {
         this.translateMap[key] = func
     }
@@ -925,8 +956,8 @@ class ClassGraph {
         values = this.forwardReduceValues(
                      props
                     , values
-                    , vg.microGraph
-                    , vg.words
+                    // , vg.microGraph
+                    // , vg.words
                 )
 
         let r = {
@@ -941,7 +972,13 @@ class ClassGraph {
     }
 
     forwardReduceValues(props, values, graph, words) {
-        return values
+        let loopProps = props;
+        let loopValues = values;
+        for(let reducer of this.reducers) {
+            let r = reducer(loopProps, loopValues)//, graph, words)
+            loopValues = r
+        }
+        return loopValues
     }
 
     minorCapture(str, sep=this.sep, safe=true) {
@@ -1724,12 +1761,13 @@ class ClassGraph {
 // }
 
 
+/* DOM Loader
 
-/*
-    Upon document load, process and *[polyclass] entity. Similar to process()
+Upon document load, process and *[polyclass] entity. Similar to process()
+
+    <body polyclass></body>
 */
 const autoActivator = function(watch=document){
-
     watch.addEventListener('DOMContentLoaded', function(){
         onDomLoaded()
     }.bind(this))