attr setter by with value callback

Author: sashafirsov

package-lock.json

@@ -23,7 +23,7 @@
     },
     "scripts": {
         "analyze": "cem analyze --litelement",
-        "build": "bash bin/build.sh",
+        "build": "bash types/types-generate.sh && bash bin/build.sh",
         "postinstall": "bash bin/postinstall.sh",
         "start": "wds",
         "test": "bash bin/test.sh",
@@ -36,8 +36,8 @@
     "devDependencies": {
         "@open-wc/testing": "3.2.0",
         "@web/dev-server": "0.3.0",
-        "@web/test-runner": "0.17.0",
-        "concurrently": "8.2.0",
+        "@web/test-runner": "^0.13.29",
+        "concurrently": "7.2.1",
         "esbuild": "0.18.17",
         "typescript": "5.1.6"
     },

package.json

@@ -22,8 +22,10 @@ export interface CssChainCollection<T> extends  Array<AnyElement&T>, AnyElement
     attr(name:string): CssChainCollection<T>;
     /** (alias for `setAttribute`) sets elements attribute, returns CssChain */
     attr(name:string, value:string): CssChainCollection<T>;
+    /** (alias for `setAttribute`) sets elements attribute with value from callback, returns CssChain */
+    attr(name:string, valueCallback:( (el:T, i:number, arr:CssChainCollection<T>)=>string) ): CssChainCollection<T>;
     /** (alias for `setAttribute`) sets `css`-defined sub-tree elements attribute, returns CssChain */
-    attr(name:string, value:string, css:string): CssChainCollection<T>;
+    attr(name:string, valueOrCallback:string | ( (el:T, i:number, arr:CssChainCollection<T>)=>string), css:string): CssChainCollection<T>;
     /** returns 1st element property value or `undefined` for empty collection */
     prop(name:string): any;
     /** sets elements attribute, returns CssChain */

src/CssChain.d.ts

@@ -89,14 +89,24 @@ function assignedNodesLight(f)
     class
 CssChainT extends Array
 {
-    attr(...args){  return args.length>1 ? (( args[2] ? this.$(args[2]) : this ).setAttribute(...args),this) : this.getAttribute(...args) }
-    prop(...args){  return args.length>1 ? (( args[2] ? this.$(args[2]) : this ).forEach( el=>el[args[0]]=args[1]),this ): this[0][args[0]] }
+    attr(...args)
+    {   if( args.length < 2 )
+            return this.getAttribute(...args);
+        let [k,v,s] = args
+        ,        $s = this.$(s);
+        if(isFn(v))
+            this.map(v).forEach((V,i)=>$s[i].setAttribute(k,V))
+        else
+            $s.setAttribute(...args);
+        return this
+    }
+    prop(...args){  return args.length>1 ? (this.$(args[2]).forEach( el=>el[args[0]]=args[1]),this ): this[0][args[0]] }
     forEach( ...args){ Array.prototype.forEach.apply(this,args); return this }
     map( ...args){ return map(this,...args) }
     push(...args){ Array.prototype.push.apply(this,args); return this; }
     querySelector(css){ return new CssChainT().push( this.querySelectorAll(css)[0] )  }
     querySelectorAll(css){ return this.reduce( ($,el)=> $.push(...(el.shadowRoot||el).querySelectorAll(css) ), new CssChainT()) }
-    $(...args){ return args.length ? this.querySelectorAll(...args) : this; }
+    $(...args){ return args.length && args[0] ? this.querySelectorAll(...args) : this; }
     parent(css)
     {   const s = new Set()
         , add = n=> s.has(n) ? 0 : (s.add(n), n)