@isotope/prototope-server
Version:
Server-Side Rendering (SSR) implementation for Prototope
7 lines (6 loc) • 3.33 kB
JavaScript
/*!
* @isotope/prototope-server v0.1.0
* (c) Arek Nawo <areknawo@areknawo.com> (areknawo.com)
* MIT-licensed
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).PrototopeServer={})}(this,(function(t){"use strict";class e{randomID(){return"_"+Math.random().toString(36).slice(2,11)}}class s extends e{constructor(t){super(),this.breakpoints={},this.breakpointsCount=0,this.listing={};const e=document.createElement("style");document.head.appendChild(e),this.config=t,this.styleSheet=e.sheet}addBreakpoint(t){this.styleSheet&&!this.breakpoints[t]&&(this.breakpoints[t]=this.styleSheet.cssRules[this.styleSheet.insertRule(`{}`,this.styleSheet.cssRules.length)],this.breakpointsCount+=1)}addRule(t,e={}){const s=e.className||this.randomID(),i=`${s}${e.selector?":"+e.selector:""}`,r=`${e.breakpoint?e.breakpoint+"-":""}${i}`;let n=this.styleSheet;if(e.breakpoint&&(this.breakpoints[e.breakpoint]||this.addBreakpoint(e.breakpoint),n=this.breakpoints[e.breakpoint]),!this.listing[r]){const t=n.cssRules.length-this.breakpointsCount;this.listing[r]=n.cssRules[n.insertRule(`.${i}{}`,t>0?t:0)]}return Object.assign(this.listing[r].style,t),s}getRule(t){const e=`${t.className}${t.selector?":"+t.selector:""}`,s=`${t.breakpoint?t.breakpoint+"-":""}${e}`,i=this.listing[s];return i?i.style:null}getCSS(){let t="";for(const e of this.styleSheet.cssRules)t+=e.cssText;return t}}const i={lg:1024,md:768,sm:640,xl:1280},r={dark:"#595b66",darker:"#1f2026",light:"#ecedef",lighter:"#f2f3f5",primary:"#e65100",secondary:"#ff9d00"},n=(t={},e)=>n=>{const o=(({breakpoints:t={},colors:e={}})=>({breakpoints:Object.assign(i,t),colors:Object.assign(r,e)}))(t),a=n.child("div",{context:{prototope:{config:o,data:{},registry:e?e(o):new s(o)}}});return{getCSS:()=>{const t=a.getContext("prototope");return t?t.registry.getCSS():""},node:a}};class o extends e{constructor(t){super(),this.breakpoints={},this.breakpointsCount=0,this.listing={},this.styles=[],this.config=t}addBreakpoint(t){this.breakpoints[t]||(this.breakpoints[t]=[],this.breakpointsCount+=1)}addRule(t,e={}){const s=e.className||this.randomID(),i=`${s}${e.selector?":"+e.selector:""}`,r=`${e.breakpoint?e.breakpoint+"-":""}${i}`;let{styles:n}=this;if(e.breakpoint&&(this.breakpoints[e.breakpoint]||this.addBreakpoint(e.breakpoint),n=this.breakpoints[e.breakpoint]),!this.listing[r]){const t=n.length-this.breakpointsCount,e={properties:{},selector:i};n.splice(t>0?t:0,0,e),this.listing[r]=e}return Object.assign(this.listing[r].properties,t),s}getRule(t){const e=`${t.className}${t.selector?":"+t.selector:""}`,s=`${t.breakpoint?t.breakpoint+"-":""}${e}`,i=this.listing[s];return i?i.properties:null}getCSS(){return`${this.parseStyleRules(this.styles)}${Object.entries(this.breakpoints).map(([t,e])=>`{${this.parseStyleRules(e||[])}}`).join("")}`}parseStyleProperties(t){return Object.entries(t).map(([t,e])=>`${t.replace(/[A-Z]/g,t=>"-"+t.toLowerCase())}:${e};`).join("")}parseStyleRules(t){return t.map(t=>`.${t.selector}{${this.parseStyleProperties(t.properties)}}`).join("")}}t.PrototopeServer=(t={})=>e=>n(t,t=>new o(t))(e),Object.defineProperty(t,"__esModule",{value:!0})}));