seed carefully

README.md

@@ -1,8 +1,8 @@
-# `varam`
+# varam
 
-[**web sample**](https://ryanve.dev/varam)
+[🟣 **online**](https://ryanve.dev/varam)
 
-## change CSS `var` via URL param
+## change CSS var via URL param
 
 ### mention desired param
 
@@ -28,7 +28,7 @@ place `data-varam` on any scope to represent CSS `var`
 --ink: black;
 ```
 
-### `var` your style
+### var your style
 
 ```css
 background: var(--oil);
@@ -39,6 +39,7 @@ color: var(--ink);
 
 ```css
 font-size: var(--size, 1em);
+writing-mode: var(--mode, horizontal-tb);
 ```
 
 ### code hyperlinks with `&`
@@ -47,16 +48,43 @@ font-size: var(--size, 1em);
 ?oil=orange&ink=black
 ```
 
-### [javascript](varam.js)
+## [javascript](varam.js)
 
-loading [varam.js](varam.js) checks URL params and performantly updates `var` as needed
+### automagic
+
+🚥 `varam` automagically runs when you load [varam.js](varam.js)
+
+```html
+<script async src="varam.js"></script>
+```
+
+- URL params are read
+- CSS var are updated
+- async optional
+
+### performant updating
+
+```js
+varam(location.search)
+```
+
+### varam returns boolean
+
+- `true` when update was made
+- `false` when update needless
+
+### seed at your own risk
 
 ```html
+<script>window.varam = "?"</script>
 <script async src="varam.js"></script>
 ```
 
 ## technology
 
 - [`URLSearchParams`](https://mdn.io/URLSearchParams)
+- [`location`](https://mdn.io/window-location)
+- [`script`](https://mdn.io/the-script-element)
 - [`style`](https://mdn.io/CSSStyleDeclaration)
-- [`var`](https://mdn.io/css-var)
+- [`html`](index.html) [`data-`](https://mdn.io/data-attributes)
+- [`css`](www.css) [`var`](https://mdn.io/css-var)

varam.js

@@ -1,23 +1,23 @@
-!function() {
+!function(web) {
   var dash = "--"
   var word = /\S+/g
   var what = "data-varam"
   var where = "[data-varam]"
   var all = "querySelectorAll"
-  var par = "URLSearchParams" in window
-  var api = par ? varam : no
+  var par = web.URLSearchParams
 
   function varam(search) {
     var did = false
-    var url = new URLSearchParams(search)
+    var url = new par(search)
     var stack = document[all](where)
     each(stack, function(scope) {
       var keys = scope.getAttribute(what)
       keys = keys && keys.match(word)
       keys && each(keys, function(key) {
         var value = url.get(key)
         var relay = dash + key
-        did = fresh(scope.style, relay, value) || did
+        var style = scope.style
+        did = fresh(style, relay, value) || did
       })
     })
     return did
@@ -40,10 +40,16 @@
     while(i--) f(stack[i])
   }
 
-  api(location.search)
+  var api = par ? varam : no
+  var seed = web.varam
+  var seeded = typeof seed == "string"
+  seed = seeded && seed
+  api.seed = seed
+  api.seeded = seeded
   api.fresh = fresh
-  window.varam = api
-  typeof module == "undefined"
-    || module.exports
-    && (module.exports = api)
-}()
+  web.varam = api
+  api(seeded ? seed : location.search)
+  var common = typeof module != "undefined"
+  if (common && module.exports)
+    module.exports = api
+}(window)