UNPKG

@xnocss/vue

Version:

vue plugin short class online parse

6 lines (5 loc) 11.1 kB
(function(D,E){typeof exports=="object"&&typeof module!="undefined"?module.exports=E():typeof define=="function"&&define.amd?define(E):(D=typeof globalThis!="undefined"?globalThis:D||self,D.XClassVue=E())})(this,function(){"use strict";var D=Object.defineProperty,E=(e,t,i)=>t in e?D(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,f=(e,t,i)=>(E(e,typeof t!="symbol"?t+"":t,i),i),A=(e,t,i)=>{if(!t.has(e))throw TypeError("Cannot "+i)},h=(e,t,i)=>(A(e,t,"read from private field"),i?i.call(e):t.get(e)),v=(e,t,i)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,i)},W=(e,t,i,l)=>(A(e,t,"write to private field"),l?l.call(e,i):t.set(e,i),i),L=(e,t,i)=>(A(e,t,"access private method"),i),w,S,C,R,j,M,x,b,N,T;const m=class{constructor(e={}){v(this,N),f(this,"title","XCLASS"),f(this,"version","1.0.0"),f(this,"isClearCache",!0),f(this,"cacheExpire",-1),f(this,"pseudoClassDefine",{}),f(this,"responsiveDefine",{}),f(this,"shortDefine",{}),f(this,"rules",[]),f(this,"themes",{}),f(this,"initialRenderNum",1e3),f(this,"debug",!1),v(this,w,new Map),v(this,S,new Map),v(this,C,new Map),v(this,R,null),v(this,j,new Map),v(this,M,null),v(this,x,{}),v(this,b,new Map),f(this,"intersectionCallback",y=>{y.forEach(O=>{let k=O.target;O.isIntersecting&&(this.initNode(k),h(this,R).unobserve(k))})});var t,i,l,r,s,n,a,c,d,g;this.title=(t=e==null?void 0:e.title)!=null?t:"XCLASS",this.version=(i=e==null?void 0:e.version)!=null?i:"1.0.0",this.isClearCache=(l=e==null?void 0:e.isClearCache)!=null?l:!0,this.cacheExpire=(r=e==null?void 0:e.cacheExpire)!=null?r:-1,this.pseudoClassDefine=(s=e==null?void 0:e.pseudoClassDefine)!=null?s:{},this.responsiveDefine=(n=e==null?void 0:e.responsiveDefine)!=null?n:{},this.shortDefine=(a=e==null?void 0:e.shortDefine)!=null?a:{},this.themes=(c=e==null?void 0:e.themes)!=null?c:{},this.rules=(d=e==null?void 0:e.rules)!=null?d:[],this.initialRenderNum=(e==null?void 0:e.initialRenderNum)||1e3,this.debug=(g=e==null?void 0:e.debug)!=null?g:!1,typeof window=="object"&&this.init()}init(){let e=this.title+"_"+this.version;this.isClearCache?m.removeStorages(new RegExp(`${this.title}_.*`)):m.removeStorages(new RegExp(`${this.title}_.*`),[e]);const t=function(r){const s=history[r],n=new Event(r);return function(){const a=s.apply(this,arguments);return n.arguments=arguments,window.dispatchEvent(n),a}};history.pushState=t("pushState"),history.replaceState=t("replaceState"),window.addEventListener("hashchange",()=>{h(this,b).clear()}),window.addEventListener("popstate",()=>{h(this,b).clear()}),window.addEventListener("pushState",()=>{h(this,b).clear()}),window.addEventListener("replaceState",()=>{h(this,b).clear()});let i=m.getStorage(e)||{};if(W(this,x,new Proxy(i,{get(r,s){return r[s]},set(r,s,n){return r[s]=n,m.setStorage(e,i,this.cacheExpire),!0}})),document.querySelectorAll(`style[title=${this.title}]`).length==0){let r=document.createElement("style");r.type="text/css",r.title=this.title,document.querySelector("head").appendChild(r)}let l=document.styleSheets;for(let r=l.length-1;r>=0;r--){let s=l.item(r);s.title==this.title&&W(this,M,s)}W(this,R,new IntersectionObserver(this.intersectionCallback,{rootMargin:"500px 0px"}))}bind(e,t){var i;if(h(this,b).set(e,t),e.getAttribute("guid")){this.initNode(e);return}h(this,b).size>this.initialRenderNum?(i=t==null?void 0:t.modifiers)!=null&&i.real||m.isInViewPort(e)?this.initNode(e):h(this,R).observe(e):this.initNode(e)}unbind(e){let t=e.getAttribute("uid");h(this,C).get(t)&&(h(this,C).get(t).disconnect(),h(this,C).delete(t))}initNode(e){let t=e.getAttribute("guid");if(t&&console.log("插件生成",t),!t){t=`${this.title}-${m.guid()}`;let r=document.createAttribute("uid");r.nodeValue=t,e.attributes.setNamedItem(r),this.handleDebug(h(this,b).get(e),t);let s=new Date().getTime();this.parseAndCreate(e),this.debug&&console.log("生成时间",t,new Date().getTime()-s)}var i={childList:!1,attributes:!0,subtree:!1};let l=new MutationObserver(()=>{let r=new Date().getTime();this.parseAndCreate(e),this.debug&&console.log("生成时间-",t,new Date().getTime()-r)});l.observe(e,i),h(this,C).set(t,l)}parseAndCreate(e){let t=this.parseStyle(e);this.createStyles(t,e)}parseStyle(e){let t=e.attributes,i=[];e.classList.forEach(s=>{i.push(s)});for(let s=0;s<t.length;s++)i.push(t[s].nodeName);let l=e.getAttribute("uid"),r=h(this,j).get(l);return r&&r.length==i.length&&r.filter(s=>!i.includes(s)).length==0?{}:(h(this,j).set(l,i.map(s=>s)),this.parseStyleNode(i,l))}createStyles(e,t){this.createStylesNode(e,t.getAttribute("uid"),t.tagName.toLocaleLowerCase()).forEach(i=>{i.forEach(l=>{this.insertStyle(l.selector,l.styleText,l.newStyleText)})}),this.debugConsole(t)}insertStyle(e,t,i){let l=h(this,M);if(l.title==this.title){let r=l.cssRules,s=!0;for(let n=0;n<r.length;n++){let a=r.item(n);if(!i&&a.type==1){if(a.selectorText==e&&a.cssText!=t){m.deleteRule(l,n),m.insertRule(l,e,t,n),s=!1;break}}else if(i&&a.type==4){for(let c=0;c<a.cssRules.length;c++){let d=a.cssRules.item(c);if(d.selectorText==e&&d.cssText!=t){m.deleteRule(l,n),m.insertRule(l,e,i,n),s=!1;break}}if(!s)break}}s&&m.insertRule(l,e,i||t,0)}}parseStyleNode(e,t){let i=[];e.forEach((r,s)=>{if(Object.keys(this.shortDefine).includes(r)){e.splice(s,1,"");let n=this.shortDefine[r]||[];typeof n=="string"&&(n=n.split(" ")),i.push(...n)}}),e=e.filter(r=>r),e.push(...i);let l={};return Object.keys(this.responsiveDefine).length>0?(Object.keys(this.responsiveDefine).forEach(r=>{l[this.responsiveDefine[r]]||(l[this.responsiveDefine[r]]=[]),e=e.filter(s=>s),l[this.responsiveDefine[r]].push(L(this,N,T).call(this,e.filter((s,n)=>{let a=s.startsWith(r);return a&&e.splice(n,1,""),a}).map(s=>s.replace(r,"")),t))}),e=e.filter(r=>r),l[""]=[L(this,N,T).call(this,e,t)]):l[""]=[L(this,N,T).call(this,e,t)],l}createStyleNode(e,t,i,l=""){var r;let s=`${i.toLocaleLowerCase()}[uid="${t}"]${l}`,n=((r=e==null?void 0:e.length)!=null?r:0)>0?` ${s}{ ${e.join("")} } `:"";return n?{selector:s,styleText:n}:void 0}createStylesNode(e,t,i){return e?Object.keys(e).map(l=>{let r=e[l].reduce((s,n)=>(Object.keys(n).forEach(a=>{s[a]||(s[a]=[]),s[a].push(...n[a])}),s),{});return Object.keys(r).map(s=>{try{let n=this.createStyleNode(r[s],t,i,s||"");if(n)return l&&(n.newStyleText=l+`{${n.styleText}}`),n}catch(n){console.error(n)}}).filter(s=>s)}).filter(l=>l.length>0):[]}handleDebug(e,t){if(this.debug)if(e.arg=="test"){let i=e.value||[];typeof i=="string"&&(i=i.split(" ")),h(this,w).set(t,i||[])}else h(this,w).delete(t)}debugCollect(e,t){if(this.debug&&h(this,w).get(e)){let i=h(this,w).get(e)||[];if(t){let l=t(i);h(this,S).get(e)||h(this,S).set(e,[]),l&&h(this,S).get(e).push(l)}}}debugConsole(e){if(this.debug){let t=e.getAttribute("uid");h(this,w).get(t)&&(console.log("测试结果",t,e),console.log(h(this,S).get(t)))}}static insertRule(e,t,i,l){e.insertRule&&i?e.insertRule(i,l):e.addRule&&i&&e.addRule(t,i,l)}static deleteRule(e,t){e.deleteRule?e.deleteRule(t):e.removeRule&&e.removeRule(t)}};let p=m;return w=new WeakMap,S=new WeakMap,C=new WeakMap,R=new WeakMap,j=new WeakMap,M=new WeakMap,x=new WeakMap,b=new WeakMap,N=new WeakSet,T=function(e,t){let i={},l=e.map((s,n)=>{let a=h(this,x)[s];return a&&(this.debugCollect(t,function(c){if(c.length==0)return["规则生成缓存",s,a];if(c.includes(s))return["规则生成缓存",s,a]}),e.splice(n,1,"")),a}).filter(s=>s);Object.keys(this.pseudoClassDefine).forEach(s=>{i[this.pseudoClassDefine[s]]||(i[this.pseudoClassDefine[s]]=[]),e=e.filter(a=>a);let n=e.filter((a,c)=>{let d=a.startsWith(s);return d&&e.splice(c,1,""),d}).map(a=>{let c=a.replace(s,""),d=h(this,x)[c];return d?(this.debugCollect(t,function(g){if(g.length==0)return["规则生成-缓存",a,d];if(g.includes(a))return["规则生成-缓存",a,d]}),[d]):this.rules.filter(g=>g[0].test(c)).map(g=>(d=g[1](g[0].exec(c),c,this.themes),h(this,x)[c]=d,this.debugCollect(t,function(y){if(y.length==0)return["规则生成",g[0],a,d];if(y.includes(a))return["规则生成",g[0],a,d]}),d))}).flat(1/0);i[this.pseudoClassDefine[s]].push(...n)}),e=e.filter(s=>s);let r=this.rules.map(s=>e.filter(n=>s[0].test(n)).map(n=>{let a=s[1](s[0].exec(n),n,this.themes);return h(this,x)[n]=a,this.debugCollect(t,function(c){if(c.length==0)return["规则生成",s[0],n,a];if(c.includes(n))return["规则生成",s[0],n,a]}),a})).flat(1/0);return i[""]=l.concat(r),i},f(p,"guid",()=>"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=Math.random()*16|0,i=e=="x"?t:t&3|8;return i.toString(16)})),f(p,"setStorage",(e,t,i=72e5)=>{let l={value:t,expire:i,timestamp:Date.now(),isForever:i==-1};window.localStorage.setItem(e,JSON.stringify(l))}),f(p,"getStorage",e=>{let t=window.localStorage.getItem(e);if(!t)return null;let i=JSON.parse(t);return!i.isForever&&Date.now()>i.expire+i.timestamp?(window.localStorage.removeItem(e),null):i.value}),f(p,"removeStorage",e=>{window.localStorage.removeItem(e)}),f(p,"removeStorages",(e,t=[])=>{Object.keys(window.localStorage).filter(i=>e.test(i)&&!t.includes(i)).forEach(i=>{window.localStorage.removeItem(i)})}),f(p,"isInViewPort",e=>{const t=window.innerWidth||document.documentElement.clientWidth,i=window.innerHeight||document.documentElement.clientHeight,{top:l,right:r,bottom:s,left:n}=e.getBoundingClientRect();return l>=0&&n>=0&&r<=t&&s<=i}),{install(e,t={presets:[],rules:[],pseudoClassDefine:{},responsiveDefine:{},shortDefine:{},themes:{},cacheExpire:-1,version:"1.0.0",debug:!1,clearCache:!0,initialRenderNum:1e3}){var c,d,g,y,O,k,V,X,P,_,q,F,H,J,z;let i=Object.assign(((d=(c=t==null?void 0:t.presets)==null?void 0:c.map(u=>u.rules||[]))==null?void 0:d.reduce((u,o)=>(u.push(...o),u),[]))||[],(t==null?void 0:t.rules)||[]),l=Object.assign(((y=(g=t==null?void 0:t.presets)==null?void 0:g.map(u=>u.pseudoClassDefine||{}))==null?void 0:y.reduce((u,o)=>(Object.assign(u,o),u),{}))||{},(t==null?void 0:t.pseudoClassDefine)||{}),r=Object.assign(((k=(O=t==null?void 0:t.presets)==null?void 0:O.map(u=>u.responsiveDefine||{}))==null?void 0:k.reduce((u,o)=>(Object.assign(u,o),u),{}))||{},(t==null?void 0:t.responsiveDefine)||{}),s=Object.assign(((X=(V=t==null?void 0:t.presets)==null?void 0:V.map(u=>u.shortDefine||{}))==null?void 0:X.reduce((u,o)=>(Object.assign(u,o),u),{}))||{},(t==null?void 0:t.shortDefine)||{}),n=Object.assign(((_=(P=t==null?void 0:t.presets)==null?void 0:P.map(u=>u.themes||{}))==null?void 0:_.reduce((u,o)=>(Object.assign(u,o),u),{}))||{},(t==null?void 0:t.themes)||{}),a=new p({rules:i,pseudoClassDefine:l,responsiveDefine:r,shortDefine:s,themes:n,cacheExpire:(q=t==null?void 0:t.runtime)==null?void 0:q.cacheExpire,version:(F=t==null?void 0:t.runtime)==null?void 0:F.version,debug:(H=t==null?void 0:t.runtime)==null?void 0:H.debug,clearCache:(J=t==null?void 0:t.runtime)==null?void 0:J.clearCache,initialRenderNum:(z=t==null?void 0:t.runtime)==null?void 0:z.initialRenderNum});e.version[0]==3?e.directive("xclass",{mounted(u,o,I,$){a.bind(u,o)},unmounted(u,o,I,$){a.unbind(u)}}):e.directive("xclass",{inserted(u,o,I,$){a.bind(u,o)},unbind(u,o,I,$){a.unbind(u)}})}}});