staging via meta for the win

README.md

@@ -58,22 +58,48 @@ writing-mode: var(--mode, horizontal-tb);
 <script async src="varam.js"></script>
 ```
 
-- URL params are read
-- CSS var are updated
-- async optional
+- URL params are read and only read
+- CSS var are updated where matching
+- async or defer to your desire
 
-### performant updating
+### updating
 
-```js
-varam(location.search)
-```
+- performant updating
+- we minimize reflow
+- [just load the script](#automagic) to go with the flow with real URL
+- [updaters](#updaters) return [boolean](#boolean) whether reflow expected
+- update if you change dom (otherwise no need)
+
+### updaters
+
+- `varam.flow()` automagic does `varam(location.search)` with real URL
+- `varam.reset()` to reset state like `varam("")`  but leave URL alone
+- `varam.fresh(...)` is how varam performantly interacts with style
 
-### varam returns boolean
+### boolean
 
 - `true` when update was made
 - `false` when update needless
 
-### [seed carefully](../../pull/2)
+### help
+
+`varam.help()` for help in your console
+
+### diagnostic
+
+- `varam.meta` content interpreted
+- `varam.state` latest state
+- `varam.via` paramethod `"flow"` or `"meta"`
+
+### [staging](../../pull/8)
+
+- default checks `location.search` **not meta**
+- staging meta simulates alternate search
+- **skip this** unless you're staging
+
+```html
+<meta name="varam" content="oil=purple">
+```
 
 ## technology
 

index.html

@@ -10,6 +10,9 @@
 <meta name="author" content="ryanve">
 <meta name="description" content="change CSS var via URL param javascript">
 
+<!-- staging -->
+<!-- <meta name="varam" content="oil=purple"> -->
+
 <link rel="stylesheet" href="www.css">
 <link rel="license" href="LICENSE.txt">
 <link rel="help" href="https://github.io/ryanve/varam">

varam.js

@@ -1,15 +1,18 @@
-!function(web) {
+//ryanve.dev/varam
+!function(web, dom) {
+  var empty = ""
   var dash = "--"
   var word = /\S+/g
   var what = "data-varam"
   var where = "[data-varam]"
-  var all = "querySelectorAll"
+  var first = dom.querySelector || no
   var par = web.URLSearchParams
+  var api = par ? varam : no
 
   function varam(search) {
     var did = false
     var url = new par(search)
-    var stack = document[all](where)
+    var stack = dom.querySelectorAll(where)
     each(stack, function(scope) {
       var keys = scope.getAttribute(what)
       keys = keys && keys.match(word)
@@ -20,13 +23,27 @@
         did = fresh(style, relay, value) || did
       })
     })
+    api.state = url.toString()
     return did
   }
 
   function no() {
     return false
   }
 
+  function flow() {
+    return api(location.search)
+  }
+
+  function reset() {
+    return api(empty)
+  }
+
+  function help() {
+    console.dir(api)
+    return api.state
+  }
+
   function fresh(style, relay, value) {
     var prev = style.getPropertyValue(relay)
     var next = value
@@ -40,16 +57,21 @@
     while(i--) f(stack[i])
   }
 
-  var api = par ? varam : no
-  var seed = web.varam
+  var like = "meta[name=varam][content]"
+  var elmo = first.call(dom, like)
+  var seed = elmo && elmo.content
   var seeded = typeof seed == "string"
   seed = seeded && seed
-  api.seed = seed
-  api.seeded = seeded
+  api.flow = par ? flow : no
   api.fresh = fresh
+  api.help = help
+  api.reset = par ? reset : no
+  api.state = empty
+  par && api(seeded ? seed : location.search)
+  api.meta = seeded ? api.state : false
+  api.via = seeded ? "meta" : "flow"
   web.varam = api
-  api(seeded ? seed : location.search)
   var common = typeof module != "undefined"
   if (common && module.exports)
     module.exports = api
-}(window)
+}(window, document)