UNPKG

@tenoxui/browser

Version:

A JavaScript library for creating highly customized, flexible, and extensible utility-first CSS framework

5 lines (4 loc) 4.23 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("tenoxui"),T=require("@tenoxui/moxie");function S(l){return l.replace(/\\3(\d) /g,"$1").replace(/\\([#{}.:;?%&,@+*~'"!^$[\]()=>|/])/g,"$1")}class n extends x.TenoxUI{constructor({moxie:e=T.TenoxUI,tabSize:s=2,values:t={},classes:i={},aliases:r={},property:a={},variants:o={},safelist:h=[],typeOrder:c=[],breakpoints:d={},moxieOptions:u={},selectorPrefix:p="",prefixLoaderOptions:f={},reservedVariantChars:m=[],apply:y={},watch:E=!0,debounceDelay:b=10,processExisting:C=!0,selector:v="[class]",styleId:g="tenoxui-browser-id"}={}){super({moxie:e,values:t,aliases:r,classes:i,tabSize:s,property:a,variants:o,safelist:h,typeOrder:c,breakpoints:d,moxieOptions:u,selectorPrefix:p,prefixLoaderOptions:f,reservedVariantChars:m}),this.apply=y,this.watch=E,this.styleId=g,this.selector=v,this.updateTimeout=null,this.debounceDelay=b,this.processExisting=C,this.observer=null,this.styleElement=null,this.isInitialized=!1,this.processedClasses=new Set}init(){return this.isInitialized?(console.warn("TenoxUI is already initialized"),this):(this.createStyleElement(),this.processExisting&&this.scanAndProcessClasses(),this.watch&&this.startObserving(),this.isInitialized=!0,this)}createStyleElement(){return this.styleElement=document.getElementById(this.styleId),this.styleElement||(this.styleElement=document.createElement("style"),this.styleElement.id=this.styleId,this.styleElement.setAttribute("data-tenoxui","true"),document.head.appendChild(this.styleElement)),this.styleElement}scanAndProcessClasses(){const e=document.querySelectorAll(this.selector),s=new Set;e.forEach(t=>{const i=t.classList;i.length>0&&i.forEach(r=>{r.trim()&&s.add(r)})}),s.size>0&&this.processClasses(Array.from(s))}createStyles(e){const s=this.render(this.apply);return this.injectCSS(s+` `+e)}processClasses(e){const s=e.filter(t=>!this.processedClasses.has(t));s.length!==0&&(s.forEach(t=>this.processedClasses.add(t)),this.createStyles(this.render(s)))}injectCSS(e){return this.styleElement&&e.trim()&&(this.styleElement.textContent+=` `+e),this}startObserving(){if(!window.MutationObserver){console.warn("MutationObserver not supported, dynamic class detection disabled");return}this.observer=new MutationObserver(e=>{this.debouncedUpdate(()=>{this.handleMutations(e)})}),this.observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]})}handleMutations(e){const s=new Set;e.forEach(t=>{if(t.type==="attributes"&&t.attributeName==="class"){const i=t.target;i.classList&&i.classList.forEach(r=>{r.trim()&&!this.processedClasses.has(r)&&s.add(r)})}t.type==="childList"&&t.addedNodes.length>0&&t.addedNodes.forEach(i=>{i.nodeType===Node.ELEMENT_NODE&&this.extractClassesFromElement(i,s)})}),s.size>0&&this.processClasses(Array.from(s))}extractClassesFromElement(e,s){e.classList&&e.classList.forEach(i=>{i.trim()&&!this.processedClasses.has(i)&&s.add(i)}),e.querySelectorAll("[class]").forEach(i=>{i.classList.forEach(r=>{r.trim()&&!this.processedClasses.has(r)&&s.add(r)})})}debouncedUpdate(e){this.updateTimeout&&clearTimeout(this.updateTimeout),this.updateTimeout=setTimeout(e,this.debounceDelay)}addClass(...e){const s=[];for(const t of e)Array.isArray(t)?s.push(...t):t&&s.push(t);return this.processClasses(s),this}rescan(){return this.scanAndProcessClasses(),this}refresh(){return this.processedClasses.clear(),this.styleElement&&(this.styleElement.textContent=""),this.scanAndProcessClasses(),this}stopObserving(){return this.observer&&(this.observer.disconnect(),this.observer=null),this}destroy(){return this.stopObserving(),this.styleElement&&(this.styleElement.remove(),this.styleElement=null),this.updateTimeout&&(clearTimeout(this.updateTimeout),this.updateTimeout=null),this.processedClasses.clear(),this.isInitialized=!1,this}status(){const e=Array.from(this.processedClasses),s=this.getRulesData(e),t=this.process(e);return{processedClasses:[e.length,e],validClasses:[s.length,t?t.map(i=>S(i.className)):[]],isObserving:!!this.observer,isInitialized:this.isInitialized,styleElementExists:!!this.styleElement}}}exports.TenoxUI=n;exports.default=n; //# sourceMappingURL=index.cjs.js.map