css-chain-test - npm Package Compare versions

Comparing version 1.0.13 to 1.1.0

dist/CssChain.js

@@ -1,2 +0,2 @@
-import{setProp as E}from"./ApiChain.js";export const map=(t,...e)=>Array.prototype.map.apply(t,e),csv=(t,...e)=>map(t,...e).join(","),collectionText=t=>map(t,e=>getNodeText(e)).join("");const y=()=>"",c=t=>Array.isArray(t),l=(t,e)=>typeof t===e,u=t=>l(t,"string"),x=t=>l(t,"number"),p=t=>l(t,"function"),w=t=>t&&t.nodeType,L=t=>t.getRootNode().host,m=t=>L(t)&&t.assignedNodes,S=(t,e)=>(t.forEach(e),t),N=t=>m(t)?t.assignedNodes().forEach(e=>e.remove()):t.innerHTML="",A={1:t=>t.assignedNodes?collectionText(t.assignedNodes())||collectionText(t.childNodes):["SCRIPT","AUDIO","STYLE","CANVAS","DATALIST","EMBED","OBJECT","PICTURE","IFRAME","METER","NOSCRIPT","SELECT","OPTGROUP","PROGRESS","TEMPLATE","VIDEO"].includes(t.nodeName)?"":t.innerText,3:t=>t.nodeValue,11:t=>collectionText(t.childNodes)};export const getNodeText=t=>(A[t.nodeType]||y)(t),setNodeText=(t,e)=>m(t)?t.assignedElements().forEach(r=>r.innerText=e):t.innerText=e,assignParent=(t,e)=>t.map(r=>e.appendChild(r)),collectionHtml=t=>map(t,e=>e.assignedElements?map(e.assignedElements(),r=>r.outerHTML).join(""):e.innerHTML).join(""),html2NodeArr=t=>{const e=document.createElement("div");e.innerHTML=t;const r=o=>{if(o.nodeType!==3)return o;const s=document.createElement("span");return s.append(o),s};return[...e.childNodes].map(o=>(o.remove(),o)).map(r)},addNodeHtml=(t,e)=>{const r=(s,n)=>n instanceof Node?n.remove()||s.append(n):html2NodeArr(n).forEach(i=>s.append(i)),o=s=>m(t)?t.assign(...t.assignedNodes(),...assignParent(S(html2NodeArr(s),n=>n.slot=t.name),t.getRootNode().host)):r(t,s);e instanceof NodeList||c(e)?[...e].forEach(o):o(e)},setNodeHtml=(t,e)=>{N(t),addNodeHtml(t,e)};class h extends Array{attr(...e){return e.length>1?((e[2]?this.$(e[2]):this).setAttribute(...e),this):this.getAttribute(...e)}prop(...e){return e.length>1?((e[2]?this.$(e[2]):this).forEach(r=>r[e[0]]=e[1]),this):this[0][e[0]]}forEach(...e){return Array.prototype.forEach.apply(this,e),this}map(...e){return map(this,...e)}push(...e){return Array.prototype.push.apply(this,e),this}querySelector(e){return new h().push(this.querySelectorAll(e)[0])}querySelectorAll(e){return this.reduce((r,o)=>r.push(...(o.shadowRoot||o).querySelectorAll(e)),new h)}$(...e){return e.length?this.querySelectorAll(...e):this}parent(e){const r=new Set,o=n=>r.has(n)?0:(r.add(n),n),s=n=>{for(;n=n.parentElement;)if(n.matches(e))return o(n)};return CssChain(this.map(e?s:n=>o(n.parentElement)).filter(n=>n))}on(...e){return this.addEventListener(...e)}append(e){return this.forEach(r=>addNodeHtml(r,e))}remove(...e){return e.length?p(e[1])?this.removeEventListener(...e):this.map(r=>r.matches(e[0])).filter(r=>r):(this.forEach(r=>r.remove()),new h)}clear(){return this.forEach(e=>N(e))}slot(...e){const r=this.map(o=>o.shadowRoot||o).$(e.length?csv(e[0].split(","),o=>['""',"''"].includes(o)||!o?"slot:not([name])":`slot[name="${o}"]`):"slot");return e.length===2?(r.html(e[1]),this):r}template(e){if(e===void 0){const o=this.$("[slot]").forEach(s=>s.remove());e=this.splice(0,this.length),this.push(document.createElement("span")),this.append(o)}else u(e)&&(e=this.$(e),e.remove());const r=CssChain(e.content||e).clone(this);return r.slot().forEach(o=>{const s=this.children.filter(n=>n.slot===o.name);s.length&&setNodeHtml(o,s)}),this.children.remove(),this.forEach((o,s)=>o.appendChild(r[s])),this}get innerText(){return this.text()}set innerText(e){return this.text(e)}text(e,r=void 0){const o=r?this.$(r):this;return e===void 0?collectionText(o):(o.forEach(p(e)?(s,n)=>setNodeText(s,e(s,n,o)):s=>setNodeText(s,e)),this)}get outerHTML(){return this.map(e=>e.outerHTML).join("")}set outerHTML(e){return this.forEach((r,o,s)=>{const n=r.parentNode;html2NodeArr(p(e)?e(r,o,s):e).forEach(i=>n.insertBefore(s[o]=i,r)),r.remove()})}get innerHTML(){return this.html()}set innerHTML(e){return this.html(e)}html(e,r=void 0){const o=r?this.$(r):this;return e===void 0?collectionHtml(o):(o.forEach(p(e)?(s,n)=>setNodeHtml(s,e(s,n,o)):s=>setNodeHtml(s,e)),this)}assignedElements(){return CssChain([].concat(...this.map(e=>e.assignedElements?e.assignedElements():[])))}assignedNodes(e){return CssChain([].concat(...this.map(r=>r.assignedNodes?r.assignedNodes(e):[])))}cloneNode(...e){return this.map(r=>r.cloneNode&&r.cloneNode(...e))}clone(e=1,r=void 0){let o=e;if(x(e)&&(o=Array.from({length:e},(n,i)=>i)),c(o)){const n=[];return this.forEach(i=>o.forEach((g,T)=>{const f=i.ownerDocument.importNode(i,!0),d=r&&r(f,g,T,o);u(d)?n.push(...html2NodeArr(d)):c(d)?n.push(...d):n.push(w(d)?d:f)})),CssChain(n)}const s=e;return this.map(n=>s?s.importNode(n,!0):n.cloneNode?n.cloneNode(!0):Object.assign({},n))}get firstElementChild(){return CssChain(this.map(e=>e.firstElementChild).filter(e=>e))}get firstChild(){return CssChain(this.map(e=>e.firstChild).filter(e=>e))}get childNodes(){return CssChain([].concat(...map(this,e=>[...e.childNodes||[]])))}get children(){return CssChain([].concat(...map(this,e=>[...e.children||[]])))}}const a=new Set,O=Object.getPrototypeOf({});export function applyPrototype(t,e){const r=u(t)?document.createElement(t):t;if(!a.has(r.tagName)){a.add(r.tagName);for(let o in r)o in e.prototype||E(r,o,e);for(let o;(o=Object.getPrototypeOf(r))!==O&&o!=null&&!a.has(o);){a.add(o);for(let s of Object.getOwnPropertyNames(o))s in e.prototype||E(r,s,e)}}}Object.getOwnPropertyNames(window).filter(t=>t.startsWith("HTML")&&t.endsWith("Element")&&t.length>11).map(t=>t.substring(4,t.length-7).toLowerCase()).forEach(t=>applyPrototype(document.createElement(t),h));export function CssChain(t,e=document,r=[]){const o=typeof t=="string"?e.querySelectorAll(t):c(t)?t:[t?t.shadowRoot||t:document];c(r)?r.length||(r=[...o].slice(0,256)):r=[r],r.forEach(n=>applyPrototype(n,h));const s=new h;return s.push(...o),s}export default CssChain;
+import{setProp as E}from"./ApiChain.js";export const map=(t,...e)=>Array.prototype.map.apply(t,e),csv=(t,...e)=>map(t,...e).join(","),collectionText=t=>map(t,e=>getNodeText(e)).join("");const y=()=>"",c=t=>Array.isArray(t),l=(t,e)=>typeof t===e,u=t=>l(t,"string"),x=t=>l(t,"number"),p=t=>l(t,"function"),L=t=>t&&t.nodeType,w=t=>t.getRootNode().host,m=t=>w(t)&&t.assignedNodes,S=(t,e)=>(t.forEach(e),t),N=t=>m(t)?t.assignedNodes().forEach(e=>e.remove()):t.innerHTML="",A={1:t=>t.assignedNodes?collectionText(t.assignedNodes())||collectionText(t.childNodes):["SCRIPT","AUDIO","STYLE","CANVAS","DATALIST","EMBED","OBJECT","PICTURE","IFRAME","METER","NOSCRIPT","SELECT","OPTGROUP","PROGRESS","TEMPLATE","VIDEO"].includes(t.nodeName)?"":t.innerText,3:t=>t.nodeValue,11:t=>collectionText(t.childNodes)};export const getNodeText=t=>(A[t.nodeType]||y)(t),setNodeText=(t,e)=>m(t)?t.assignedElements().forEach(r=>r.innerText=e):t.innerText=e,assignParent=(t,e)=>t.map(r=>e.appendChild(r)),collectionHtml=t=>map(t,e=>e.assignedElements?map(e.assignedElements(),r=>r.outerHTML).join(""):e.innerHTML).join(""),html2NodeArr=t=>{const e=document.createElement("div");e.innerHTML=t;const r=o=>{if(o.nodeType!==3)return o;const s=document.createElement("span");return s.append(o),s};return[...e.childNodes].map(o=>(o.remove(),o)).map(r)},addNodeHtml=(t,e)=>{const r=(s,n)=>n instanceof Node?n.remove()||s.append(n):html2NodeArr(n).forEach(i=>s.append(i)),o=s=>m(t)?t.assign(...t.assignedNodes(),...assignParent(S(html2NodeArr(s),n=>n.slot=t.name),t.getRootNode().host)):r(t,s);e instanceof NodeList||c(e)?[...e].forEach(o):o(e)},setNodeHtml=(t,e)=>{N(t),addNodeHtml(t,e)};class h extends Array{attr(...e){return e.length>1?((e[2]?this.$(e[2]):this).setAttribute(...e),this):this.getAttribute(...e)}prop(...e){return e.length>1?((e[2]?this.$(e[2]):this).forEach(r=>r[e[0]]=e[1]),this):this[0][e[0]]}forEach(...e){return Array.prototype.forEach.apply(this,e),this}map(...e){return map(this,...e)}push(...e){return Array.prototype.push.apply(this,e),this}querySelector(e){return new h().push(this.querySelectorAll(e)[0])}querySelectorAll(e){return this.reduce((r,o)=>r.push(...(o.shadowRoot||o).querySelectorAll(e)),new h)}$(...e){return e.length?this.querySelectorAll(...e):this}parent(e){const r=new Set,o=n=>r.has(n)?0:(r.add(n),n),s=n=>{for(;n=n.parentElement;)if(n.matches(e))return o(n)};return CssChain(this.map(e?s:n=>o(n.parentElement)).filter(n=>n))}on(...e){return this.addEventListener(...e)}append(e){return this.forEach(r=>addNodeHtml(r,e))}remove(...e){return e.length?p(e[1])?this.removeEventListener(...e):this.map(r=>r.matches(e[0])).filter(r=>r):(this.forEach(r=>r.remove()),new h)}erase(){return this.forEach(e=>N(e))}slots(...e){const r=this.map(o=>o.shadowRoot||o).$(e.length?csv(e[0].split(","),o=>['""',"''"].includes(o)||!o?"slot:not([name])":`slot[name="${o}"]`):"slot");return e.length===2?(r.html(e[1]),this):r}template(e){if(e===void 0){const o=this.$("[slot]").forEach(s=>s.remove());e=this.splice(0,this.length),this.push(document.createElement("span")),this.append(o)}else u(e)&&(e=this.$(e),e.remove());const r=CssChain(e.content||e).clone(this);return r.slots().forEach(o=>{const s=this.children.filter(n=>n.slot===o.name);s.length&&setNodeHtml(o,s)}),this.children.remove(),this.forEach((o,s)=>o.appendChild(r[s])),this}get innerText(){return this.txt()}set innerText(e){return this.txt(e)}txt(e,r=void 0){const o=r?this.$(r):this;return e===void 0?collectionText(o):(o.forEach(p(e)?(s,n)=>setNodeText(s,e(s,n,o)):s=>setNodeText(s,e)),this)}get outerHTML(){return this.map(e=>e.outerHTML).join("")}set outerHTML(e){return this.forEach((r,o,s)=>{const n=r.parentNode;html2NodeArr(p(e)?e(r,o,s):e).forEach(i=>n.insertBefore(s[o]=i,r)),r.remove()})}get innerHTML(){return this.html()}set innerHTML(e){return this.html(e)}html(e,r=void 0){const o=r?this.$(r):this;return e===void 0?collectionHtml(o):(o.forEach(p(e)?(s,n)=>setNodeHtml(s,e(s,n,o)):s=>setNodeHtml(s,e)),this)}assignedElements(e){return CssChain([].concat(...this.map(r=>r.assignedElements?r.assignedElements(e):[])))}assignedNodes(e){return CssChain([].concat(...this.map(r=>r.assignedNodes?r.assignedNodes(e):[])))}cloneNode(...e){return this.map(r=>r.cloneNode&&r.cloneNode(...e))}clone(e=1,r=void 0){let o=e;if(x(e)&&(o=Array.from({length:e},(n,i)=>i)),c(o)){const n=[];return this.forEach(i=>o.forEach((g,T)=>{const f=i.ownerDocument.importNode(i,!0),d=r&&r(f,g,T,o);u(d)?n.push(...html2NodeArr(d)):c(d)?n.push(...d):n.push(L(d)?d:f)})),CssChain(n)}const s=e;return this.map(n=>s?s.importNode(n,!0):n.cloneNode?n.cloneNode(!0):Object.assign({},n))}get firstElementChild(){return CssChain(this.map(e=>e.firstElementChild).filter(e=>e))}get firstChild(){return CssChain(this.map(e=>e.firstChild).filter(e=>e))}get childNodes(){return CssChain([].concat(...map(this,e=>[...e.childNodes||[]])))}get children(){return CssChain([].concat(...map(this,e=>[...e.children||[]])))}}const a=new Set,O=Object.getPrototypeOf({});export function applyPrototype(t,e){const r=u(t)?document.createElement(t):t;if(!a.has(r.tagName)){a.add(r.tagName);for(let o in r)o in e.prototype||E(r,o,e);for(let o;(o=Object.getPrototypeOf(r))!==O&&o!=null&&!a.has(o);){a.add(o);for(let s of Object.getOwnPropertyNames(o))s in e.prototype||E(r,s,e)}}}Object.getOwnPropertyNames(window).filter(t=>t.startsWith("HTML")&&t.endsWith("Element")&&t.length>11).map(t=>t.substring(4,t.length-7).toLowerCase()).forEach(t=>applyPrototype(document.createElement(t),h));export function CssChain(t,e=document,r=[]){const o=typeof t=="string"?e.querySelectorAll(t):c(t)?t:[t?t.shadowRoot||t:document];c(r)?r.length||(r=[...o].slice(0,256)):r=[r],r.forEach(n=>applyPrototype(n,h));const s=new h;return s.push(...o),s}export default CssChain;
 //# sourceMappingURL=CssChain.js.map

dist/CssChainElement.js

@@ -5,3 +5,3 @@ import e from"./CssChain.js";export class CssChainElement extends HTMLElement{constructor(){super();this.title="Hey there",this.counter=0;const t=document.createElement("div");t.innerHTML=this.template,this.attachShadow({mode:"open"}).appendChild(t),this.$("button").addEventListener("click",()=>this.__increment())}get template(){return`
 <input /><button>\u{1F6D2}</button>
-`}$(...t){return e(this.shadowRoot).$(...t)}__increment(){const t=this.$().slot().text();this.$("b").innerHTML+=`<span>${t}</span>`,this.counter=this.$("input").value=this.$("span").length}}
+`}$(...t){return e(this.shadowRoot).$(...t)}__increment(){const t=this.$().slots().txt();this.$("b").innerHTML+=`<span>${t}</span>`,this.counter=this.$("input").value=this.$("span").length}}
 //# sourceMappingURL=CssChainElement.js.map

dist/PokeApi-Explorer.js

@@ -1,2 +0,2 @@
-var w=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var x=(s,e)=>{var l={};for(var n in s)A.call(s,n)&&e.indexOf(n)<0&&(l[n]=s[n]);if(s!=null&&w)for(var n of w(s))e.indexOf(n)<0&&P.call(s,n)&&(l[n]=s[n]);return l};import B from"https://unpkg.com/slotted-element@1.0.3/fetch-element.js";import{CssChain as u}from"https://unpkg.com/css-chain@1/CssChain.js";const f=(s,e,l="")=>s.map(e).join(l),k=s=>s&&s.endsWith&&["png","gif","svg"].find(e=>s.endsWith(e));window.customElements.define("pokemon-link-element",class extends HTMLElement{connectedCallback(){const e=u(this),l=t=>e.$(t),n=e.attr("name"),p=e.attr("url");if(k(p)){debugger;return e.html(`<img title="${n}" src="${p}">`)}e.html(`<a href="${p}">${n}</a><dl></dl>`),l("a").on("click",async t=>{if(t.preventDefault(),this.loaded)return l("dl").clear(),this.loaded=0;this.loaded=1;const r=await(await fetch(p)).json();l("dl").html(m(r))});function m(t,r=""){if(t==null||typeof t=="string"||typeof t=="number")return k(t)?`<img title="${r}
+var w=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var x=(s,e)=>{var l={};for(var n in s)A.call(s,n)&&e.indexOf(n)<0&&(l[n]=s[n]);if(s!=null&&w)for(var n of w(s))e.indexOf(n)<0&&P.call(s,n)&&(l[n]=s[n]);return l};import B from"https://unpkg.com/slotted-element@1.0.3/fetch-element.js";import{CssChain as u}from"./CssChain.js";const f=(s,e,l="")=>s.map(e).join(l),k=s=>s&&s.endsWith&&["png","gif","svg"].find(e=>s.endsWith(e));window.customElements.define("pokemon-link-element",class extends HTMLElement{connectedCallback(){const e=u(this),l=t=>e.$(t),n=e.attr("name"),p=e.attr("url");if(k(p)){debugger;return e.html(`<img title="${n}" src="${p}">`)}e.html(`<a href="${p}">${n}</a><dl></dl>`),l("a").on("click",async t=>{if(t.preventDefault(),this.loaded)return l("dl").erase(),this.loaded=0;this.loaded=1;const r=await(await fetch(p)).json();l("dl").html(m(r))});function m(t,r=""){if(t==null||typeof t=="string"||typeof t=="number")return k(t)?`<img title="${r}
 ${t}" src="${t}">`:r?`<span><code>${r}</code> : <val>${t}</val></span>`:`<val>${t}</val>`;if(Array.isArray(t))return`<fieldset><legend>${r}</legend>${f(t,m,"<hr/>")}</fieldset>`;let o=[],i=Object.keys(t);const $=t.name&&t.url&&k(t.url)?`<img title="${n}" src="${p}"/>`:`<pokemon-link-element name="${t.name}" url="${t.url}"></pokemon-link-element> `;if(i.length===2&&t.name&&t.url)o.push($);else{r&&(o.push("<fieldset>"),o.push(`<legend>${r}</legend>`));for(let a in t)switch(a){case"name":if(t.url)break;case"url":t.url&&t.name&&o.push($);break;default:Array.isArray(t[a])?o.push(`<fieldset><legend>${a}</legend>${f(t[a],d=>m(d),"<hr/>")}</fieldset>`):o.push(m(t[a],a))}r&&o.push("</fieldset>")}return o.join("")}}}),window.customElements.define("pokemon-info-element",class extends B{render(e){const o=e.sprites,{other:l,versions:n}=o,p=x(o,["other","versions"]),m=(i,$)=>`<fieldset><legend>${i}</legend>
@@ -18,3 +18,3 @@ ${f(Object.entries($),([a,d])=>d?typeof d=="string"?`<img src="${d}" title="${a}"/>`:m(a,d):"")}</fieldset>`,t=()=>`<fieldset><legend>abilities</legend>
                     ${m("versions",n)}
-                    `}});let c=0,h=10;const C=async()=>(await fetch(`https://pokeapi.co/api/v2/pokemon?limit=${h}&offset=${c}`)).json(),E=u(),y=async s=>u("pokemon-info-element").attr("src",s.url),I=s=>(e=>(e.pop(),e.pop()))(s.url.split("/")),j=s=>`https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/${I(s)}.svg`,g=E.slot("slot-select"),b=g.parent().$("dl"),v=async()=>{const s=await C();return b.clear(),c?b.append(g.clone(s.results,(e,l,n)=>u(e).prop("hidden",!1).prop("checked",!n,"input").prop("src",j(l),"img").on("click",()=>y(l)).slot("index",c+n).slot("name",l.name))):s.results.forEach((e,l)=>{const n=g.clone();n.hidden=!1,n.$("input").checked=!l,n.slot("index").innerText=c+l,n.slot("name").innerText=e.name,n.on("click",()=>y(e)),n.$("img").src=j(e),b.append(n)}),y(s.results[0]),prevBtn.disabled=c<=0,nextBtn.disabled=c+h>=s.count,s};g.remove();const L=await v();E.slot("counter").text(L.count),prevBtn.onclick=()=>v(c-=h),nextBtn.onclick=()=>v(c+=h);
+                    `}});let c=0,h=10;const C=async()=>(await fetch(`https://pokeapi.co/api/v2/pokemon?limit=${h}&offset=${c}`)).json(),E=u(),y=async s=>u("pokemon-info-element").attr("src",s.url),I=s=>(e=>(e.pop(),e.pop()))(s.url.split("/")),j=s=>`https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/${I(s)}.svg`,g=E.slots("slot-select"),b=g.parent().$("dl"),v=async()=>{const s=await C();return b.erase(),c?b.append(g.clone(s.results,(e,l,n)=>u(e).prop("hidden",!1).prop("checked",!n,"input").prop("src",j(l),"img").on("click",()=>y(l)).slots("index",""+(c+n)).slots("name",l.name))):s.results.forEach((e,l)=>{const n=g.clone();n.hidden=!1,n.$("input").checked=!l,n.slots("index").innerText=""+(c+l),n.slots("name").innerText=e.name,n.on("click",()=>y(e)),n.$("img").src=j(e),b.append(n)}),y(s.results[0]),prevBtn.disabled=c<=0,nextBtn.disabled=c+h>=s.count,s};g.remove();const L=await v();E.slots("counter").txt(L.count),prevBtn.onclick=()=>v(c-=h),nextBtn.onclick=()=>v(c+=h);
 //# sourceMappingURL=PokeApi-Explorer.js.map

package.json

@@ -10,5 +10,7 @@ {
     },
-    "version": "1.0.13",
+    "version": "1.1.0",
     "browser": "index.js",
     "module": "index.js",
+    "type": "module",
+    "types": "src/CssChain.d.ts",
     "exports": {
@@ -30,15 +32,17 @@ ".": "index.js"
         "test": "bash test.sh",
-        "test:watch": "web-test-runner --watch"
+        "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
     },
     "dependencies": {
-        "css-chain": "^1.0.13",
-        "lit": "^2.0.2"
+        "css-chain": "^1.1.0",
+        "lit": "^2.2.0"
     },
     "devDependencies": {
-        "@open-wc/testing": "^3.0.3",
+        "@open-wc/testing": "^3.0.4",
         "@web/dev-server": "^0.1.29",
-        "@web/test-runner": "^0.13.25",
-        "esbuild": "^0.14.11"
+        "@web/test-runner": "^0.13.27",
+        "concurrently": "^7.0.0",
+        "esbuild": "^0.14.23",
+        "typescript": "^4.5.5"
     },
     "customElements": "custom-elements.json"
 }

README.md

@@ -9,3 +9,3 @@ # CssChain & ApiChain test and \<css-chain> demo
 ## Live demo
-https://unpkg.com/css-chain-test@1.0.13/dist/demo.html
+https://unpkg.com/css-chain-test@1.1.0/dist/demo.html
 
@@ -158,5 +158,5 @@ # [CssChain](https://github.com/sashafirsov/css-chain/blob/main/CssChain.js)
 [npm-url]:        https://npmjs.org/package/css-chain-test
-[coverage-image]: https://unpkg.com/css-chain-test@1.0.13/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/css-chain-test@1.0.13/coverage/lcov-report/index.html
-[PokeApi-explorer-image]: https://unpkg.com/css-chain-test@1.0.13/src/PokeApi-Explorer.png
-[PokeApi-explorer-url]: https://unpkg.com/css-chain-test@1.0.13/src/PokeApi-Explorer.html
+[coverage-image]: https://unpkg.com/css-chain-test@1.1.0/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/css-chain-test@1.1.0/coverage/lcov-report/index.html
+[PokeApi-explorer-image]: https://unpkg.com/css-chain-test@1.1.0/src/PokeApi-Explorer.png
+[PokeApi-explorer-url]: https://unpkg.com/css-chain-test@1.1.0/src/PokeApi-Explorer.html

src/CssChainElement.js

@@ -30,3 +30,3 @@ import $ from './CssChain.js';
     __increment()
-    {   const slotContent = this.$().slot().text();
+    {   const slotContent = this.$().slots().txt();
         this.$('b').innerHTML += `<span>${ slotContent }</span>`;
@@ -33,0 +33,0 @@ this.counter = this.$('input').value = this.$('span').length;

src/PokeApi-Explorer.js

 import FetchElement from 'https://unpkg.com/slotted-element@1.0.3/fetch-element.js';
-import { CssChain as $$ } from "https://unpkg.com/css-chain@1/CssChain.js";
-// import { CssChain as $$ } from "./CssChain.js";
+// import { CssChain as $$ } from "https://unpkg.com/css-chain@1/CssChain.js";
+import { CssChain as $$ } from "./CssChain.js";
 
@@ -29,3 +29,3 @@ const arr2str = (arr,cb, separator='') => arr.map(cb).join(separator)
                 if(this.loaded)
-                    return $('dl').clear(), this.loaded=0;
+                    return $('dl').erase(), this.loaded=0;
                 this.loaded =1;
@@ -131,3 +131,3 @@ const d = await ( await fetch(url) ).json();
 ,   getImgByPokemon = p =>`https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/${getPokemonId(p)}.svg`
-,   $template = $.slot('slot-select')
+,   $template = $.slots('slot-select')
 ,   $listContainer = $template.parent().$('dl')
@@ -138,3 +138,3 @@ ,   renderList = async()=>
 
-        $listContainer.clear();
+        $listContainer.erase();
         // yield version
@@ -145,9 +145,9 @@
                 $template.clone( page.results, (cloned, p,i)=>
-                 $$(cloned)
-                        .prop('hidden', false )
-                        .prop('checked', !i, 'input')
-                        .prop('src', getImgByPokemon( p ), 'img')
-                        .on('click', ()=>onSelected(p) )
-                        .slot( 'index', offset + i )
-                        .slot( 'name', p.name ) ) );
+                $$(cloned)
+                    .prop('hidden', false )
+                    .prop('checked', !i, 'input')
+                    .prop('src', getImgByPokemon( p ), 'img')
+                    .on('click', ()=>onSelected(p) )
+                    .slots( 'index', ''+(offset + i) )
+                    .slots( 'name', p.name ) ) );
         else // same without call chain, just as show case of HTMLElement API in CssChain
@@ -159,4 +159,4 @@ page.results.forEach( (p,i)=>
                 $c.$('input').checked = !i;
-                $c.slot( 'index' ).innerText = offset + i;
-                $c.slot( 'name' ).innerText = p.name;
+                $c.slots( 'index' ).innerText = ''+(offset + i);
+                $c.slots( 'name' ).innerText = p.name;
                 $c.on('click', ()=>onSelected(p) )
@@ -175,4 +175,4 @@ $c.$('img').src = getImgByPokemon( p );
 const firstPage = await renderList()
-$.slot('counter').text( firstPage.count );
+$.slots('counter').txt( firstPage.count );
 prevBtn.onclick = ()=> renderList( offset-=limit );
 nextBtn.onclick = ()=> renderList( offset+=limit );

test/CssChain-helpers.test.js

@@ -58,9 +58,9 @@ import { fixture, expect } from '@open-wc/testing';
 
-        expect( collectionText(el.$().slot('')).trim()).to.eq('A');
-        expect( collectionText(el.$().slot('outer')) ).to.eq('A');
+        expect( collectionText(el.$().slots('')).trim()).to.eq('A');
+        expect( collectionText(el.$().slots('outer')) ).to.eq('A');
         // native access to slots content
         expect( collectionText([...el.querySelectorAll('[slot]')])).to.eq('AA');
 
-        el.$().slot('').innerText = 'B';
-        expect( collectionText(el.$().slot(',outer')).replace(/\s+/g,'') ).to.eq('BA');
+        el.$().slots('').innerText = 'B';
+        expect( collectionText(el.$().slots(',outer')).replace(/\s+/g,'') ).to.eq('BA');
     });
@@ -77,4 +77,4 @@ it( 'getNodeText(node) with slots',  async ()=>
         expect( getNodeText( $$('a',el)[0] )).to.eq('prefixBsuffix');
-        expect( getNodeText( el.$().slot('') ).replace(/\s+/g,'')).to.eq('prefixBsuffixdefaultslotreplacement');
-        expect( getNodeText( el.$().slot('outer') )).to.eq('outer replacement');
+        expect( getNodeText( el.$().slots('') ).replace(/\s+/g,'')).to.eq('prefixBsuffixdefaultslotreplacement');
+        expect( getNodeText( el.$().slots('outer') )).to.eq('outer replacement');
         expect( el.$('style').textContent).to.include('padding');
@@ -128,3 +128,3 @@ expect( getNodeText( el.$('style')[0])).to.eq('');
         expect( getNodeText( el )).to.eq('outer replacement');
-        setNodeText( el.$().slot('outer')[0], 'A' );
+        setNodeText( el.$().slots('outer')[0], 'A' );
         expect( getNodeText( el )).to.eq('A');
@@ -169,4 +169,4 @@ });
         expect( getNodeText( el )).to.eq('outer replacement');
-        setNodeHtml( el.$().slot('outer')[0], '<u>A</u>' );
-        expect(el.$().slot('outer').innerHTML).to.eq('<u slot="outer">A</u>');
+        setNodeHtml( el.$().slots('outer')[0], '<u>A</u>' );
+        expect(el.$().slots('outer').innerHTML).to.eq('<u slot="outer">A</u>');
     });
@@ -173,0 +173,0 @@ it( 'html2NodeArr(html) ',  async ()=>

test/CssChain-methods.test.js

@@ -208,5 +208,5 @@ import { fixture, expect } from '@open-wc/testing';
         expect( $$('a',el).innerText.trim() ).to.equal('a1a2');
-        expect( $$('a',el).text().trim() ).to.equal('a1a2');
+        expect( $$('a',el).txt().trim() ).to.equal('a1a2');
         expect( $$(el).innerText.replace(/\n/g,'') ).to.equal('da1a2D');
-        expect( $$(el).text().replace(/\n/g,'') ).to.equal('da1a2D');
+        expect( $$(el).txt().replace(/\n/g,'') ).to.equal('da1a2D');
     } );
@@ -223,3 +223,3 @@ it( 'set innerText', async ()=>
         const el = await fixture(html`<div>d<a title="#1">a1<hr/></a><a title="#2">a2<br/></a>D</div>`);
-        $$('a',el).text( (el,i,arr)=>`${i}. ${el.title} ${el.href} in arr[${arr.length}]`);
+        $$('a',el).txt( (el,i,arr)=>`${i}. ${el.title} ${el.href} in arr[${arr.length}]`);
         expect( $$('a',el).innerText            ).to.equal("0. #1 in arr[2]1. #2 in arr[2]");
@@ -447,7 +447,7 @@ expect( $$(el).innerText.replace(/\n/g,'') ).to.equal("d0. #1 in arr[2]1. #2 in arr[2]D");
     } );
-    it( 'clear()', async ()=>
+    it( 'erase()', async ()=>
     {
         const el = await fixture(html`<div>d<a>a1</a><a>a2</a>D</div>`);
         const $X = $$('a',el );
-        const $Y = $X.clear();
+        const $Y = $X.erase();
         expect( $X ).to.eq($Y);
@@ -457,3 +457,3 @@ expect( $X.innerHTML ).to.eq("");
         const $Z= $$(el);
-        $Z.clear();
+        $Z.erase();
         expect( $Z.innerHTML ).to.eq("");
@@ -466,3 +466,3 @@ expect( $Z.outerHTML ).to.eq("<div></div>");
         const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
-        const $X = $$('a',el ).text('Z');
+        const $X = $$('a',el ).txt('Z');
         expect( $X.length ).to.eq(2);
@@ -475,3 +475,3 @@ expect( $X.innerText ).to.eq("ZZ");
         const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
-        const $X = $$('a',el ).text( (el,i,arr)=>`${el.title}:${el.innerText}:${i}:${arr.length}`);
+        const $X = $$('a',el ).txt( (el,i,arr)=>`${el.title}:${el.innerText}:${i}:${arr.length}`);
         expect( $X.length ).to.eq(2);
@@ -484,3 +484,3 @@ expect( $X.innerText ).to.eq("A1:one:0:2A2:two:1:2");
         const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
-        const $X = $$(el).text('Z','a');
+        const $X = $$(el).txt('Z','a');
         expect( $X.length ).to.eq(1);
@@ -493,6 +493,6 @@ expect( $X[0].tagName ).to.eq('DIV');
         const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
-        const $X = $$(el).text(undefined,'a');
+        const $X = $$(el).txt(undefined,'a');
         expect( $X ).to.eq('a1a2');
-        expect( $$(el).text(undefined) ).to.eq('d a1 - a2 D');
-        expect( $$(el).text() ).to.eq('d a1 - a2 D');
+        expect( $$(el).txt(undefined) ).to.eq('d a1 - a2 D');
+        expect( $$(el).txt() ).to.eq('d a1 - a2 D');
     } );
@@ -503,3 +503,3 @@
         const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
-        const $X = $$( el ).text( (el,i,arr)=>`${el.title}:${el.innerText}:${i}:${arr.length}`, 'a');
+        const $X = $$( el ).txt( (el,i,arr)=>`${el.title}:${el.innerText}:${i}:${arr.length}`, 'a');
         expect( $X.length ).to.eq(1);
@@ -506,0 +506,0 @@ expect( $X[0].tagName ).to.eq('DIV');

test/CssChain-slots.test.js

@@ -27,7 +27,7 @@ import { fixture, expect } from '@open-wc/testing';
 
-        const $slots = el.$().slot();
+        const $slots = el.$().slots();
         expect( $slots.map( n=>n.name) ).to.eql(['', 'inner-1', 'inner-2', 'inner-2-1', 'inner-2-2', 'outer']);
 
         const checkDefaultSlots = $el=>
-        {   hasEachLine( $el.slot('').innerText,
+        {   hasEachLine( $el.slots('').innerText,
                 `default slot
@@ -38,9 +38,9 @@ inner 1
                 inner 2 in 2`);
-            expect( $el.slot('inner-1').innerText ).to.eq('inner 1');
-            hasEachLine($el.slot('inner-2').innerText ,
+            expect( $el.slots('inner-1').innerText ).to.eq('inner 1');
+            hasEachLine($el.slots('inner-2').innerText ,
                 `inner 2
                 inner 1 in 2
                 inner 2 in 2`);
-            expect( $el.slot('inner-2-1').innerText ).to.eq('inner 1 in 2');
-            expect( $el.slot('inner-2-2').innerText ).to.eq('inner 2 in 2');
+            expect( $el.slots('inner-2-1').innerText ).to.eq('inner 1 in 2');
+            expect( $el.slots('inner-2-2').innerText ).to.eq('inner 2 in 2');
         };
@@ -57,3 +57,3 @@ checkDefaultSlots( el.$() );
             outer slot`);
-        const $slots = el.$().slot();
+        const $slots = el.$().slots();
         expect( $slots.map( n=>n.name) ).to.eql(['', 'inner-1', 'inner-2', 'inner-2-1', 'inner-2-2', 'outer']);
@@ -63,10 +63,10 @@
         {
-            expect( $el.slot('').innerText ).to.eq('fallback');
-            expect( $el.slot('inner-1').innerText ).to.eq('inner 1');
-            hasEachLine($el.slot('inner-2').innerText ,
+            expect( $el.slots('').innerText ).to.eq('fallback');
+            expect( $el.slots('inner-1').innerText ).to.eq('inner 1');
+            hasEachLine($el.slots('inner-2').innerText ,
                 `inner 2
                 inner 1 in 2
                 inner 2 in 2`);
-            expect( $el.slot('inner-2-1').innerText ).to.eq('inner 1 in 2');
-            expect( $el.slot('inner-2-2').innerText ).to.eq('inner 2 in 2');
+            expect( $el.slots('inner-2-1').innerText ).to.eq('inner 1 in 2');
+            expect( $el.slots('inner-2-2').innerText ).to.eq('inner 2 in 2');
         };
@@ -80,3 +80,3 @@ checkDefaultSlots( el.$() );
         const el = await fixture(html`<slots-in-shadow><p>fallback</p></slots-in-shadow>`);
-        const $arr = el.$().slot('').assignedElements();
+        const $arr = el.$().slots('').assignedElements();
         expect( $arr.length).to.eq(1);
@@ -90,3 +90,3 @@ expect( $arr.tagName).to.eq('P');
         const el = await fixture(html`<slots-in-shadow>textnode<p>fallback</p></slots-in-shadow>`);
-        const $arr = el.$().slot('').assignedNodes();
+        const $arr = el.$().slots('').assignedNodes();
         expect( $arr.length).to.eq(2);
@@ -110,5 +110,5 @@ expect( $arr.innerText).to.eq('textnodefallback');
             outer slot`);
-        expect( el.$().slot('').innerText ).to.include('without name');
+        expect( el.$().slots('').innerText ).to.include('without name');
 
-        const $arr = el.$().slot('').assignedElements();
+        const $arr = el.$().slots('').assignedElements();
         expect( $arr.length).to.eq(2);
@@ -129,5 +129,5 @@ expect( $arr[0].tagName).to.eq('P');
             </slots-in-shadow>`);
-        expect( el.$().slot('outer').innerText ).to.eq('outer replacement');
+        expect( el.$().slots('outer').innerText ).to.eq('outer replacement');
 
-        const $arr = el.$().slot('outer').assignedElements();
+        const $arr = el.$().slots('outer').assignedElements();
         expect( $arr.length).to.eq(1);
@@ -154,9 +154,9 @@ expect( $arr[0].tagName).to.eq('DIV');
 
-        expect( el.$().slot('').innerText.trim() ).to.eq('A');
-        expect( el.$().slot('outer').innerText ).to.eq('A');
+        expect( el.$().slots('').innerText.trim() ).to.eq('A');
+        expect( el.$().slots('outer').innerText ).to.eq('A');
         // native access to slots content
         expect( [...el.querySelectorAll('[slot]')].map(s=>s.innerText).join('')).to.eq('AA');
 
-        el.$().slot('').innerText = 'B';
-        expect( el.$().slot(',outer').innerText.replace(/\s+/g,'') ).to.eq('BA');
+        el.$().slots('').innerText = 'B';
+        expect( el.$().slots(',outer').innerText.replace(/\s+/g,'') ).to.eq('BA');
 
@@ -180,12 +180,12 @@ });
 
-        expect( el.$().slot('').innerHTML).to.eq('<i slot="">A</i>');
-        expect( el.$().slot('outer').innerHTML).to.eq('<i slot="outer">A</i>');
+        expect( el.$().slots('').innerHTML).to.eq('<i slot="">A</i>');
+        expect( el.$().slots('outer').innerHTML).to.eq('<i slot="outer">A</i>');
         // native access to slots content
         expect( [...el.querySelectorAll('[slot]')].map(s=>s.outerHTML).join('') ).to.eq('<i slot="">A</i><i slot="outer">A</i>');
 
-        el.$().slot('').innerHTML = '<i>B</i>';
-        expect( el.$().slot(',outer').innerHTML).to.eq('<i slot="">B</i><i slot="outer">A</i>');
+        el.$().slots('').innerHTML = '<i>B</i>';
+        expect( el.$().slots(',outer').innerHTML).to.eq('<i slot="">B</i><i slot="outer">A</i>');
 
-        el.$().slot('outer,').html( (el,i)=>`<i>C${i}</i>`);
-        expect( el.$().slot(',outer').innerHTML).to.eq('<i slot="">C0</i><i slot="outer">C1</i>');
+        el.$().slots('outer,').html( (el,i)=>`<i>C${i}</i>`);
+        expect( el.$().slots(',outer').innerHTML).to.eq('<i slot="">C0</i><i slot="outer">C1</i>');
     });
@@ -202,3 +202,3 @@ it( 'slots(csv)',  async ()=>
 
-        const $arr = el.$().slot('inner-1,inner-2');
+        const $arr = el.$().slots('inner-1,inner-2');
         expect( $arr.length).to.eq(2);
@@ -215,7 +215,7 @@ expect( $arr.innerText).to.eq('S1S2');
 
-        const $arr = el.$().slot('outer,','<i>B</i>');
+        const $arr = el.$().slots('outer,','<i>B</i>');
         expect( $arr.tagName ).to.eq(undefined);// document fragment
         expect( $arr.length ).to.eq(1);
-        expect( $arr.slot('outer,').innerText.trim() ).to.eq('BB');
-        expect(  $arr.slot('outer,').innerHTML ).to.eq( '<i slot="">B</i><i slot="outer">B</i>' );
+        expect( $arr.slots('outer,').innerText.trim() ).to.eq('BB');
+        expect(  $arr.slots('outer,').innerHTML ).to.eq( '<i slot="">B</i><i slot="outer">B</i>' );
     });
@@ -231,6 +231,6 @@ it( 'slots(csv,text)',  async ()=>
         const $el = el.$()
-        ,    $arr = $el.slot('outer,','B');
+        ,    $arr = $el.slots('outer,','B');
         expect( $arr ).to.eq($el);
         expect( $arr.length ).to.eq(1);
-        expect( $arr.slot('outer,').innerText.trim() ).to.eq('BB');
+        expect( $arr.slots('outer,').innerText.trim() ).to.eq('BB');
     });
@@ -244,9 +244,9 @@ it( 'slots( csv, cb(el,i,arr) )',  async ()=>
             </slots-in-shadow>`);
-        expect( el.$().slot(',outer').innerText.replace(/\s+/g,'') ).to.eq('DEFAULTOUTER');
+        expect( el.$().slots(',outer').innerText.replace(/\s+/g,'') ).to.eq('DEFAULTOUTER');
 
-        const $arr = el.$().slot(',outer',(el,i,arr)=> '<b>'+i+'-'+slotText( el )+'-'+arr.length+'</b>');
+        const $arr = el.$().slots(',outer',(el,i,arr)=> '<b>'+i+'-'+slotText( el )+'-'+arr.length+'</b>');
         expect( $arr.length).to.eq(1);
-        expect( $arr.slot('outer,').innerText.trim() ).to.eq('0-DEFAULT-21-OUTER-2');
+        expect( $arr.slots('outer,').innerText.trim() ).to.eq('0-DEFAULT-21-OUTER-2');
     });
-    it( 'slots().clear()',  async ()=>
+    it( 'slots().erase()',  async ()=>
     {
@@ -258,8 +258,8 @@ const el = await fixture(
             </slots-in-shadow>`);
-        expect( el.$().slot(',outer').innerText.replace(/\s+/g,'') ).to.eq('DEFAULTOUTER');
-        el.$().slot().clear();
+        expect( el.$().slots(',outer').innerText.replace(/\s+/g,'') ).to.eq('DEFAULTOUTER');
+        el.$().slots().erase();
         // clearing slots would reset to template values
-        expect( el.$().slot('outer').innerText).to.contain('outer slot');
-        expect( el.$().slot('').innerText).to.contain('default slot');
-        expect( el.$().slot(',outer').length).to.eq(2);
+        expect( el.$().slots('outer').innerText).to.contain('outer slot');
+        expect( el.$().slots('').innerText).to.contain('default slot');
+        expect( el.$().slots(',outer').length).to.eq(2);
     });
@@ -266,0 +266,0 @@

test/CssChain-template.test.js

@@ -58,8 +58,8 @@ import { fixture, expect } from '@open-wc/testing';
                 .to.equal( s
-                           && (  shadow.$('#host1').slot().find( e=>e.id===s)
-                                 || shadow.$('#host1').$('#host2').slot().find( e=>e.id===s)
+                           && (  shadow.$('#host1').slots().find( e=>e.id===s)
+                                 || shadow.$('#host1').$('#host2').slots().find( e=>e.id===s)
                                  || null
                            )
             );
-            expect(light.$('#'+k).parentElement || null).to.equal(s &&  light.$('#host1').slot().find( e=>e.id===s));
+            expect(light.$('#'+k).parentElement || null).to.equal(s &&  light.$('#host1').slots().find( e=>e.id===s));
             // node.assignedSlot in light DOM equals the parent slot
@@ -127,5 +127,5 @@ };
 
-        expect( shadow.$('#host1').text() ).to.equal( '#c1\n#c2\n#c3' );
-        expect( shadow.$('#host1').$('#host2').text() ).to.equal( '#c5\n#c6\n#c7' );
-        expect(  light.$('#host1').text() ).to.equal( '#c1\n#c5\n#c2\n#c6\n#c3\n#c7\n#s8' );
+        expect( shadow.$('#host1').txt() ).to.equal( '#c1\n#c2\n#c3' );
+        expect( shadow.$('#host1').$('#host2').txt() ).to.equal( '#c5\n#c6\n#c7' );
+        expect(  light.$('#host1').txt() ).to.equal( '#c1\n#c5\n#c2\n#c6\n#c3\n#c7\n#s8' );
     });
@@ -132,0 +132,0 @@ it('test("template")', async ()=>

ToDo.md

 prop( k, v, css ) - add css support
+dist/*.html not all functional

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 130 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3603541

increased by33%

Number of package files

1038

increased by16.76%

Lines of code

4889

increased by91.95%

Is type module

Yes

Worsened metrics

Dev dependency count

6

increased by50%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

866

increased by17.34%

Dependency changes

• Updatedcss-chain@^1.1.0

• Updatedlit@^2.2.0