@glitz/core - npm Package Compare versions

Comparing version 3.0.0-alpha.8 to 3.0.0-alpha.9

cjs/index.development.js

@@ -536,9 +536,9 @@ 'use strict';
 
-function createHashCounter(prefix) {
+function createHashCounter(prefix, count, offset, msb, power) {
     if (prefix === void 0) { prefix = ''; }
-    var count = 0;
-    var offset = 10;
-    var msb = 35;
-    var power = 1;
-    var increment = function () {
+    if (count === void 0) { count = 0; }
+    if (offset === void 0) { offset = 10; }
+    if (msb === void 0) { msb = 35; }
+    if (power === void 0) { power = 1; }
+    function increment() {
         var virtualCount = count + offset;
@@ -555,9 +555,6 @@ if (virtualCount === msb) {
         return prefix + virtualCount.toString(36);
-    };
+    }
     return Object.assign(increment, {
-        reset: function () {
-            count = 0;
-            offset = 10;
-            msb = 35;
-            power = 1;
+        clone: function () {
+            return createHashCounter(prefix, count, offset, msb, power);
         },
@@ -698,4 +695,4 @@ });
         var prefix = options.prefix;
-        var incrementClassNameHash = createHashCounter(prefix);
-        var incrementKeyframesHash = createHashCounter(prefix);
+        var classNameHash = createHashCounter(prefix);
+        var keyframesHash = createHashCounter(prefix);
         var mediaOrderOption = options.mediaOrder;
@@ -720,3 +717,3 @@ var mediaSheets = {};
                 insertStyleElement(element, insertBefore);
-                return (mediaInjectors[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
+                return (mediaInjectors[media] = new InjectorClient(element, classNameHash, keyframesHash));
             }
@@ -728,3 +725,3 @@ else {
                 var element = insertStyleElement(createStyleElement(media, identifier), initialMediaSheet);
-                return (plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
+                return (plain = new InjectorClient(element, classNameHash, keyframesHash));
             }
@@ -747,6 +744,6 @@ };
                     mediaSheets[media] = element;
-                    injector = mediaInjectors[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
+                    injector = mediaInjectors[media] = new InjectorClient(element, classNameHash, keyframesHash);
                 }
                 else {
-                    injector = plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
+                    injector = plain = new InjectorClient(element, classNameHash, keyframesHash);
                 }
@@ -785,13 +782,13 @@ hydrate(element.textContent, injector);
     __extends(InjectorServer, _super);
-    function InjectorServer(classNameHash, keyframesHash) {
+    function InjectorServer(classNameHash, keyframesHash, postInjection, plainFullIndex, selectorFullIndex, keyframesFullIndex, fontFaceFullIndex, plainHydrationIndex, selectorHydrationIndex, keyframesHydrationIndex, fontFaceHydrationIndex) {
+        if (postInjection === void 0) { postInjection = false; }
+        if (plainFullIndex === void 0) { plainFullIndex = {}; }
+        if (selectorFullIndex === void 0) { selectorFullIndex = {}; }
+        if (keyframesFullIndex === void 0) { keyframesFullIndex = {}; }
+        if (fontFaceFullIndex === void 0) { fontFaceFullIndex = []; }
+        if (plainHydrationIndex === void 0) { plainHydrationIndex = {}; }
+        if (selectorHydrationIndex === void 0) { selectorHydrationIndex = {}; }
+        if (keyframesHydrationIndex === void 0) { keyframesHydrationIndex = {}; }
+        if (fontFaceHydrationIndex === void 0) { fontFaceHydrationIndex = []; }
         var _this = this;
-        var plainFullIndex = {};
-        var selectorFullIndex = {};
-        var keyframesFullIndex = {};
-        var fontFaceFullIndex = [];
-        var plainHydrationIndex = {};
-        var selectorHydrationIndex = {};
-        var keyframesHydrationIndex = {};
-        var fontFaceHydrationIndex = [];
-        var forbidHydration = false;
         var plainResultIndex = {};
@@ -807,3 +804,3 @@ var selectorResultIndex = {};
             var _a, _b, _c;
-            forbidHydration = true;
+            postInjection = true;
             var full = selector ? (selectorFullIndex[selector] = (_a = selectorFullIndex[selector]) !== null && _a !== void 0 ? _a : {}) : plainFullIndex;
@@ -823,3 +820,3 @@ if (full[block]) {
         }, function (blockList) {
-            forbidHydration = true;
+            postInjection = true;
             if (keyframesFullIndex[blockList]) {
@@ -832,3 +829,3 @@ return keyframesFullIndex[blockList];
         }, function (block) {
-            forbidHydration = true;
+            postInjection = true;
             if (fontFaceFullIndex.indexOf(block) === -1) {
@@ -886,10 +883,13 @@ fontFaceFullIndex.push(block);
         };
-        function allowHydrationCheck() {
-            if (forbidHydration) {
-                throw new Error('Hydration is prohibited after injections');
-            }
+        function createPreActionCheck(action) {
+            return function () {
+                if (postInjection) {
+                    throw new Error(action + " is prohibited after injections");
+                }
+            };
         }
+        var preHydrationCheck = createPreActionCheck('Hydration');
         _this.hydrateClassName = function (body, className, suffix) {
             var _a, _b;
-            allowHydrationCheck();
+            preHydrationCheck();
             classNameHash();
@@ -903,3 +903,3 @@ var full = suffix ? (selectorFullIndex[suffix] = (_a = selectorFullIndex[suffix]) !== null && _a !== void 0 ? _a : {}) : plainFullIndex;
         _this.hydrateKeyframes = function (body, name) {
-            allowHydrationCheck();
+            preHydrationCheck();
             keyframesHash();
@@ -910,45 +910,10 @@ keyframesFullIndex[body] = name;
         _this.hydrateFontFace = function (body) {
-            allowHydrationCheck();
+            preHydrationCheck();
             fontFaceFullIndex.push(body);
             fontFaceHydrationIndex.push(body);
         };
-        _this.reset = function () {
-            var _a;
-            plainFullIndex = {};
-            selectorFullIndex = {};
-            keyframesFullIndex = {};
-            fontFaceFullIndex = [];
-            plainResultIndex = {};
-            selectorResultIndex = {};
-            keyframesResultIndex = {};
-            fontFaceResultIndex = [];
-            plainStreamIndex = {};
-            selectorStreamIndex = {};
-            keyframesStreamIndex = {};
-            fontFaceStreamIndex = [];
-            var shouldDelete = true;
-            for (var body in plainHydrationIndex) {
-                shouldDelete = false;
-                classNameHash();
-                plainFullIndex[body] = plainHydrationIndex[body];
-            }
-            for (var selector in selectorHydrationIndex) {
-                for (var body in selectorHydrationIndex[selector]) {
-                    shouldDelete = false;
-                    classNameHash();
-                    var index = (selectorFullIndex[selector] = (_a = selectorFullIndex[selector]) !== null && _a !== void 0 ? _a : {});
-                    index[body] = selectorHydrationIndex[selector][body];
-                }
-            }
-            for (var body in keyframesHydrationIndex) {
-                shouldDelete = false;
-                keyframesHash();
-                keyframesFullIndex[body] = keyframesHydrationIndex[body];
-            }
-            for (var _i = 0, fontFaceHydrationIndex_1 = fontFaceHydrationIndex; _i < fontFaceHydrationIndex_1.length; _i++) {
-                var body = fontFaceHydrationIndex_1[_i];
-                shouldDelete = false;
-                fontFaceFullIndex.push(body);
-            }
-            return shouldDelete;
+        var preCloningCheck = createPreActionCheck('Cloning');
+        _this.clone = function (classNameHashClone, keyframesHashClone) {
+            preCloningCheck();
+            return new InjectorServer(classNameHashClone, keyframesHashClone, postInjection, clone(plainHydrationIndex), clone(selectorHydrationIndex), clone(keyframesHydrationIndex), fontFaceHydrationIndex.slice(0), clone(plainHydrationIndex), clone(selectorHydrationIndex), clone(keyframesHydrationIndex), fontFaceHydrationIndex.slice(0));
         };
@@ -959,17 +924,26 @@ return _this;
 }(Injector));
+function clone(index) {
+    var copy = {};
+    for (var key in index) {
+        var value = index[key];
+        if (typeof value === 'string') {
+            copy[key] = value;
+        }
+        else {
+            copy[key] = clone(value);
+        }
+    }
+    return copy;
+}
 
 var GlitzServer = /** @class */ (function () {
-    function GlitzServer(options) {
-        var _this = this;
+    function GlitzServer(options, classNameHash, keyframesHash, plainInjector, mediaInjectors) {
         if (options === void 0) { options = {}; }
-        var prefix = options.prefix;
-        var incrementClassNameHash = createHashCounter(prefix);
-        var incrementKeyframesHash = createHashCounter(prefix);
-        var plain;
-        var mediaInjectors = {};
+        if (classNameHash === void 0) { classNameHash = createHashCounter(options.prefix); }
+        if (keyframesHash === void 0) { keyframesHash = createHashCounter(options.prefix); }
+        if (mediaInjectors === void 0) { mediaInjectors = {}; }
         var getInjector = function (media) {
             return media
-                ? (mediaInjectors[media] =
-                    mediaInjectors[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
-                : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+                ? (mediaInjectors[media] = mediaInjectors[media] || new InjectorServer(classNameHash, keyframesHash))
+                : (plainInjector = plainInjector || new InjectorServer(classNameHash, keyframesHash));
         };
@@ -981,4 +955,4 @@ this.injectStyle = createInjectStyle(getInjector, options.transformer);
             var markup = '';
-            if (plain) {
-                markup += "<style data-" + identifier + ">" + plain.getStyleResult() + "</style>";
+            if (plainInjector) {
+                markup += "<style data-" + identifier + ">" + plainInjector.getStyleResult() + "</style>";
             }
@@ -997,4 +971,4 @@ var medias = options.mediaOrder
             var css = '';
-            if (plain) {
-                css += plain.getStyleStream();
+            if (plainInjector) {
+                css += plainInjector.getStyleStream();
             }
@@ -1013,15 +987,10 @@ var medias = options.mediaOrder
         };
-        this.reset = function (preserveHydration) {
-            if (preserveHydration === void 0) { preserveHydration = true; }
-            _this.injectStyle = createInjectStyle(getInjector, options.transformer);
-            incrementClassNameHash.reset();
-            incrementKeyframesHash.reset();
-            if (!preserveHydration || (plain && plain.reset())) {
-                plain = undefined;
-            }
+        this.clone = function () {
+            var classNameHashClone = classNameHash.clone();
+            var keyframesHashClone = keyframesHash.clone();
+            var mediaInjectorsClone = {};
             for (var media in mediaInjectors) {
-                if (!preserveHydration || mediaInjectors[media].reset()) {
-                    delete mediaInjectors[media];
-                }
+                mediaInjectorsClone[media] = mediaInjectors[media].clone(classNameHashClone, keyframesHashClone);
             }
+            return new GlitzServer(options, classNameHashClone, keyframesHashClone, plainInjector === null || plainInjector === void 0 ? void 0 : plainInjector.clone(classNameHashClone, keyframesHashClone), mediaInjectorsClone);
         };
@@ -1036,4 +1005,4 @@ }
         var prefix = options.prefix;
-        var incrementClassNameHash = createHashCounter(prefix);
-        var incrementKeyframesHash = createHashCounter(prefix);
+        var classNameHash = createHashCounter(prefix);
+        var keyframesHash = createHashCounter(prefix);
         var plain;
@@ -1043,4 +1012,4 @@ var mediaIndex = {};
             return media
-                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
-                : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(classNameHash, keyframesHash))
+                : (plain = plain || new InjectorServer(classNameHash, keyframesHash));
         };
@@ -1047,0 +1016,0 @@ this.injectStyle = createInjectStyle(injector, options.transformer);

cjs/index.production.js

@@ -15,2 +15,2 @@ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])})(t,r)};
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */function t(t,r){function n(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}var r=function(){return(r=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function n(e){var t,r="";for(t in e){var n=e[t];if("object"==typeof n)for(var o=0,a=n;o<a.length;o++){r&&(r+=";"),r+=i(t,a[o])}else r&&(r+=";"),r+=i(t,n)}return r}function i(e,t){return f(e)+":"+t}var o=/(?:^(ms|moz|webkit))|[A-Z]/g,a={};function f(e){return e in a?a[e]:a[e]=e.replace(o,"-$&").toLowerCase()}function u(e){for(var t={},r=Object.keys(e),n=r.length;n>0;n--)t[r[n-1]]=e[r[n-1]];return t}function c(e,t){return e+"{"+t+"}"}function s(e,t,r){return void 0===r&&(r=""),"."+c(e+r,t)}function l(e,t){return"@keyframes "+c(e,t)}function v(e){return c("@font-face",e)}function d(e,t){return"@media "+c(e,t)}var y=function(e,t,r){this.injectClassName=function(t,r){var i=n(t);return e(i,r)},this.injectKeyframes=function(e){var r="";for(var i in e)r+=c(i,n(e[i]));return t(r)},this.injectFontFace=function(e){var t={};for(var i in e)"fontFamily"!==i&&(t[i]=e[i]);var o=e.fontFamily;t.fontFamily=o;var a=n(t);return r(a),o}},h="@".charCodeAt(0),p=":".charCodeAt(0),m="[".charCodeAt(0);function g(e,t){var r={},n=function(n){var o=function(a,f,c,s,l){var v,d,y;void 0===c&&(c={});for(var g="",O=Object.keys(a),S=j(r,s,l),b=O.length;b>0;b--){var w=O[b-1],x=a[w];if("function"==typeof x&&(x=x(f)),null===x&&(x=void 0),"@keyframes"===w&&(w="animationName"),"@font-face"===w&&(w="fontFamily"),"animationName"===w||"fontFamily"===w||"object"!=typeof x||Array.isArray(x)){var C=j(c,s,l);if(!(w in C)){if("object"==typeof x){if("animationName"===w){for(var F=[].concat(x),A=[],k=0;k<F.length;k++){var R=F[k];if("object"==typeof R){var N={};for(var _ in R){var z=u(i(R[_],f));N[_]=t?t(z):z}A[k]=e().injectKeyframes(N)}}x=1===A.length?A[0]:A}if("fontFamily"===w){A=[];for(var E=0,K=[].concat(x);E<K.length;E++){var M=K[E];if("object"==typeof M){var T=u(i(M,f)),D=e().injectFontFace(t?t(T):T);-1===A.indexOf(D)&&A.push(D)}else A.push(M)}x=A.join(",")}}var G={};if(C[w]=G[w]=x,void 0!==x&&n)if("string"==typeof x||"number"==typeof x){var I=S[w]=S[w]||{};if(x in I){g+=" "+I[x];continue}g+=" "+(I[x]=e(s).injectClassName(t?t(G):G,l))}else g+=" "+e(s).injectClassName(t?t(G):G,l)}}else{var L=w.charCodeAt(0);if(L!==h&&L!==p&&L!==m){var P=Object.keys(x);for(k=P.length;k>0;k--){var q=P[k-1],H=x[q],U=!1;if("y"===q||"xy"===q){U=!0;B=o(((v={})[w+"Top"]=H,v[w+"Bottom"]=H,v),f,c,s,l);n&&(g+=B)}if("x"===q||"xy"===q){U=!0;B=o(((d={})[w+"Left"]=H,d[w+"Right"]=H,d),f,c,s,l);n&&(g+=B)}if(!U){B=o(((y={})[w+q[0].toUpperCase()+q.slice(1)]=H,y),f,c,s,l);n&&(g+=B)}}}else{var B=o(x,f,c,L===h?w.slice(7):s,L===p||L===m?(null!=l?l:"")+w:l);n&&(g+=B)}}}return n?g:c};return o},i=n(!1),o=n(!0);return function(e,t){void 0===t&&(t={});for(var r={},n="",i=(e=Array.isArray(e)?e:[e]).length-1;i>=0;i--)n+=o(e[i],t,r);return n.slice(1)}}function j(e,t,r){var n=e;return t&&(n=n[t]=n[t]||{}),r?n[r]=n[r]||{}:n}function O(e,t){var r=e.cssRules.length;try{e.insertRule(t,r)}catch(e){}}function S(e,t){var r=document.createElement("style");return e&&(r.media=e),r.dataset[t]="",r}function b(e,t){return document.head.insertBefore(e,t),e}function w(e){void 0===e&&(e="");var t=0,r=10,n=35,i=1,o=function(){var a=t+r;return a===n&&(r+=9*(n+1),n=Math.pow(36,++i)-1),t++,373===a?o():e+a.toString(36)};return Object.assign(o,{reset:function(){t=0,r=10,n=35,i=1}})}var x=function(e){function r(t,r,n){var i=this,o={},a={},f={},u=[],c=t.sheet;if(!function(e){return!!e&&"cssRules"in e}(c))throw new Error("HTMLStyleElement was not inserted properly into DOM");return(i=e.call(this,(function(e,t){var n,i=t?a[t]=null!==(n=a[t])&&void 0!==n?n:{}:o;if(i[e])return i[e];var f=r();return i[e]=f,O(c,s(f,e,t)),f}),(function(e){if(f[e])return f[e];var t=n();return f[e]=t,O(c,l(t,e)),t}),(function(e){-1===u.indexOf(e)&&(u.push(e),O(c,v(e)))}))||this).injectRaw=function(e){O(c,e)},i.hydrateClassName=function(e,t,n){var i;r(),(n?a[n]=null!==(i=a[n])&&void 0!==i?i:{}:o)[e]=t},i.hydrateKeyframes=function(e,t){n(),f[e]=t},i.hydrateFontFace=function(e){u.push(e)},i}return t(r,e),r}(y),C="{".charCodeAt(0),F="}".charCodeAt(0),A=/\.([\w]+)((?::.+)|(\[.+\]))?/,k=/@keyframes (.+)/,R=/@media (.+)/;function N(e){return function(t,r,n){for(var i=0,o="",a="",f="",u="",c=0;c<t.length;c++){var s=t[c],l=s.charCodeAt(0);if(o+=s,l!==C||(i++,a?2!==i:1!==i)){if(l===F){if(i--,a&&0===i){a="";continue}if(a?1===i:0===i){var v=null!=r?r:e(a);d=void 0;if(d=A.exec(f))v.hydrateClassName(u,d[1],d[2]);else if(d=k.exec(f))v.hydrateKeyframes(u,d[1]);else{if("@font-face"!==f)throw new Error("Unsupported CSS selector when hydrating in Glitz");v.hydrateFontFace(u)}n&&n(v,o),o="",f="",u="";continue}}(a?i>1:i>0)?u+=s:f+=s}else{var d;(d=R.exec(f))&&(a=d[1],o="",f="")}}}}var _=function(e){void 0===e&&(e={});var t,r=e.prefix,n=w(r),i=w(r),o=e.mediaOrder,a={},f=null,u={},c=e.identifier||"glitz",s=function(e){if(e){if(u[e])return u[e];var r=a[e]=S(e,c),s=null;if(o){var l=Object.keys(a).sort(o);f=a[l[0]],s=a[l[l.indexOf(e)+1]]||null}return b(r,s),u[e]=new x(r,n,i)}return t||(r=b(S(e,c),f),t=new x(r,n,i))};this.injectStyle=g(s,e.transformer);var l=this.hydrate=N(s),v=document.head.querySelectorAll("style[data-"+c+"]");if(v)for(var d=0,y=v;d<y.length;d++){var h=(C=y[d]).media,p=void 0;h?(f||(f=C),a[h]=C,p=u[h]=new x(C,n,i)):p=t=new x(C,n,i),l(C.textContent,p)}var m=document.body.querySelectorAll("style[data-"+c+"]");if(m)for(var j=0,O=m;j<O.length;j++){var C;l((C=O[j]).textContent,void 0,(function(e,t){return e.injectRaw(t)})),C.parentNode.removeChild(C)}},z=function(e){function r(t,r){var n=this,i={},o={},a={},f=[],u={},c={},d={},y=[],h=!1,p={},m={},g={},j=[],O={},S={},b={},w=[];function x(){if(h)throw new Error("Hydration is prohibited after injections")}return(n=e.call(this,(function(e,r){var n,a,f;h=!0;var u=r?o[r]=null!==(n=o[r])&&void 0!==n?n:{}:i;if(u[e])return u[e];var c=t(),s=r?m[r]=null!==(a=m[r])&&void 0!==a?a:{}:p,l=r?S[r]=null!==(f=S[r])&&void 0!==f?f:{}:O;return u[e]=s[e]=l[e]=c,c}),(function(e){if(h=!0,a[e])return a[e];var t=r();return a[e]=g[e]=b[e]=t,t}),(function(e){h=!0,-1===f.indexOf(e)&&(f.push(e),j.push(e),w.push(e))}))||this).getStyleResult=function(){for(var e="",t=0,r=j;t<r.length;t++){e+=v(i=r[t])}for(var n in g)e+=l(g[n],n);for(var i in p)e+=s(p[i],i);for(var o in m){var a=m[o];for(var i in a)e+=s(a[i],i,o)}return e},n.getStyleStream=function(){var e="";if(w.length>0){for(var t=0,r=w;t<r.length;t++){e+=v(i=r[t])}w.splice(0,w.length)}for(var n in b)e+=l(b[n],n),delete b[n];for(var i in O)e+=s(O[i],i),delete O[i];for(var o in S){var a=S[o];for(var i in a)e+=s(a[i],i,o);delete S[o]}return e},n.hydrateClassName=function(e,r,n){var a,f;x(),t();var s=n?o[n]=null!==(a=o[n])&&void 0!==a?a:{}:i,l=n?c[n]=null!==(f=c[n])&&void 0!==f?f:{}:u;s[e]=l[e]=r},n.hydrateKeyframes=function(e,t){x(),r(),a[e]=t,d[e]=t},n.hydrateFontFace=function(e){x(),f.push(e),y.push(e)},n.reset=function(){var e;i={},o={},a={},f=[],p={},m={},g={},j=[],O={},S={},b={},w=[];var n=!0;for(var s in u)n=!1,t(),i[s]=u[s];for(var l in c)for(var s in c[l]){n=!1,t(),(o[l]=null!==(e=o[l])&&void 0!==e?e:{})[s]=c[l][s]}for(var s in d)n=!1,r(),a[s]=d[s];for(var v=0,h=y;v<h.length;v++){s=h[v];n=!1,f.push(s)}return n},n}return t(r,e),r}(y),E=function(e){var t=this;void 0===e&&(e={});var r,n=e.prefix,i=w(n),o=w(n),a={},f=function(e){return e?a[e]=a[e]||new z(i,o):r=r||new z(i,o)};this.injectStyle=g(f,e.transformer),this.hydrate=N(f);var u=e.identifier||"glitz";this.getStyleMarkup=function(){var t="";r&&(t+="<style data-"+u+">"+r.getStyleResult()+"</style>");for(var n=0,i=e.mediaOrder?Object.keys(a).sort(e.mediaOrder):Object.keys(a);n<i.length;n++){var o=i[n];t+="<style data-"+u+' media="'+o+'">'+a[o].getStyleResult()+"</style>"}return t},this.getStyleStream=function(){var t,n="";r&&(n+=r.getStyleStream());for(var i=0,o=e.mediaOrder?Object.keys(a).sort(e.mediaOrder):Object.keys(a);i<o.length;i++){var f=o[i];n+=d(f,a[f].getStyleStream())}if(n)return["style",(t={},t["data-"+u]="",t),n]},this.reset=function(n){for(var u in void 0===n&&(n=!0),t.injectStyle=g(f,e.transformer),i.reset(),o.reset(),(!n||r&&r.reset())&&(r=void 0),a)n&&!a[u].reset()||delete a[u]}},K=function(e){void 0===e&&(e={});var t,r=e.prefix,n=w(r),i=w(r),o={};this.injectStyle=g((function(e){return e?o[e]=o[e]||new z(n,i):t=t||new z(n,i)}),e.transformer),this.getStyle=function(){var r="";t&&(r+=t.getStyleResult());for(var n=0,i=e.mediaOrder?Object.keys(o).sort(e.mediaOrder):Object.keys(o);n<i.length;n++){var a=i[n];r+=d(a,o[a].getStyleResult())}return r}};function M(e){var t,r="";for(t in e){r&&(r+=" and ");var n=e[t];r+=!0===n?"("+f(t)+")":"("+f(t)+": "+n+")"}return r}exports.DEFAULT_HYDRATION_IDENTIFIER="glitz",exports.GlitzClient=_,exports.GlitzServer=E,exports.GlitzStatic=K,exports.compose=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.reduceRight((function(e,t){return function(r){return t(e(r))}}))},exports.media=function(e,t){var r;return(r={})["@media "+("string"==typeof e?e:M(e))]=t,r},exports.query=M,exports.selector=function(e,t){var n;return"string"==typeof e?((n={})[e]=t,n):e.reduce((function(e,n){var i;return r(r({},e),((i={})[n]=t,i))}),{})};
+***************************************************************************** */function t(t,r){function n(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}var r=function(){return(r=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function n(e){var t,r="";for(t in e){var n=e[t];if("object"==typeof n)for(var o=0,a=n;o<a.length;o++){r&&(r+=";"),r+=i(t,a[o])}else r&&(r+=";"),r+=i(t,n)}return r}function i(e,t){return f(e)+":"+t}var o=/(?:^(ms|moz|webkit))|[A-Z]/g,a={};function f(e){return e in a?a[e]:a[e]=e.replace(o,"-$&").toLowerCase()}function u(e){for(var t={},r=Object.keys(e),n=r.length;n>0;n--)t[r[n-1]]=e[r[n-1]];return t}function c(e,t){return e+"{"+t+"}"}function l(e,t,r){return void 0===r&&(r=""),"."+c(e+r,t)}function v(e,t){return"@keyframes "+c(e,t)}function s(e){return c("@font-face",e)}function d(e,t){return"@media "+c(e,t)}var y=function(e,t,r){this.injectClassName=function(t,r){var i=n(t);return e(i,r)},this.injectKeyframes=function(e){var r="";for(var i in e)r+=c(i,n(e[i]));return t(r)},this.injectFontFace=function(e){var t={};for(var i in e)"fontFamily"!==i&&(t[i]=e[i]);var o=e.fontFamily;t.fontFamily=o;var a=n(t);return r(a),o}},h="@".charCodeAt(0),p=":".charCodeAt(0),m="[".charCodeAt(0);function g(e,t){var r={},n=function(n){var o=function(a,f,c,l,v){var s,d,y;void 0===c&&(c={});for(var g="",O=Object.keys(a),w=j(r,l,v),b=O.length;b>0;b--){var S=O[b-1],x=a[S];if("function"==typeof x&&(x=x(f)),null===x&&(x=void 0),"@keyframes"===S&&(S="animationName"),"@font-face"===S&&(S="fontFamily"),"animationName"===S||"fontFamily"===S||"object"!=typeof x||Array.isArray(x)){var C=j(c,l,v);if(!(S in C)){if("object"==typeof x){if("animationName"===S){for(var F=[].concat(x),A=[],k=0;k<F.length;k++){var R=F[k];if("object"==typeof R){var N={};for(var _ in R){var z=u(i(R[_],f));N[_]=t?t(z):z}A[k]=e().injectKeyframes(N)}}x=1===A.length?A[0]:A}if("fontFamily"===S){A=[];for(var E=0,K=[].concat(x);E<K.length;E++){var M=K[E];if("object"==typeof M){var T=u(i(M,f)),D=e().injectFontFace(t?t(T):T);-1===A.indexOf(D)&&A.push(D)}else A.push(M)}x=A.join(",")}}var G={};if(C[S]=G[S]=x,void 0!==x&&n)if("string"==typeof x||"number"==typeof x){var I=w[S]=w[S]||{};if(x in I){g+=" "+I[x];continue}g+=" "+(I[x]=e(l).injectClassName(t?t(G):G,v))}else g+=" "+e(l).injectClassName(t?t(G):G,v)}}else{var L=S.charCodeAt(0);if(L!==h&&L!==p&&L!==m){var P=Object.keys(x);for(k=P.length;k>0;k--){var q=P[k-1],H=x[q],U=!1;if("y"===q||"xy"===q){U=!0;B=o(((s={})[S+"Top"]=H,s[S+"Bottom"]=H,s),f,c,l,v);n&&(g+=B)}if("x"===q||"xy"===q){U=!0;B=o(((d={})[S+"Left"]=H,d[S+"Right"]=H,d),f,c,l,v);n&&(g+=B)}if(!U){B=o(((y={})[S+q[0].toUpperCase()+q.slice(1)]=H,y),f,c,l,v);n&&(g+=B)}}}else{var B=o(x,f,c,L===h?S.slice(7):l,L===p||L===m?(null!=v?v:"")+S:v);n&&(g+=B)}}}return n?g:c};return o},i=n(!1),o=n(!0);return function(e,t){void 0===t&&(t={});for(var r={},n="",i=(e=Array.isArray(e)?e:[e]).length-1;i>=0;i--)n+=o(e[i],t,r);return n.slice(1)}}function j(e,t,r){var n=e;return t&&(n=n[t]=n[t]||{}),r?n[r]=n[r]||{}:n}function O(e,t){var r=e.cssRules.length;try{e.insertRule(t,r)}catch(e){}}function w(e,t){var r=document.createElement("style");return e&&(r.media=e),r.dataset[t]="",r}function b(e,t){return document.head.insertBefore(e,t),e}function S(e,t,r,n,i){return void 0===e&&(e=""),void 0===t&&(t=0),void 0===r&&(r=10),void 0===n&&(n=35),void 0===i&&(i=1),Object.assign((function o(){var a=t+r;return a===n&&(r+=9*(n+1),n=Math.pow(36,++i)-1),t++,373===a?o():e+a.toString(36)}),{clone:function(){return S(e,t,r,n,i)}})}var x=function(e){function r(t,r,n){var i=this,o={},a={},f={},u=[],c=t.sheet;if(!function(e){return!!e&&"cssRules"in e}(c))throw new Error("HTMLStyleElement was not inserted properly into DOM");return(i=e.call(this,(function(e,t){var n,i=t?a[t]=null!==(n=a[t])&&void 0!==n?n:{}:o;if(i[e])return i[e];var f=r();return i[e]=f,O(c,l(f,e,t)),f}),(function(e){if(f[e])return f[e];var t=n();return f[e]=t,O(c,v(t,e)),t}),(function(e){-1===u.indexOf(e)&&(u.push(e),O(c,s(e)))}))||this).injectRaw=function(e){O(c,e)},i.hydrateClassName=function(e,t,n){var i;r(),(n?a[n]=null!==(i=a[n])&&void 0!==i?i:{}:o)[e]=t},i.hydrateKeyframes=function(e,t){n(),f[e]=t},i.hydrateFontFace=function(e){u.push(e)},i}return t(r,e),r}(y),C="{".charCodeAt(0),F="}".charCodeAt(0),A=/\.([\w]+)((?::.+)|(\[.+\]))?/,k=/@keyframes (.+)/,R=/@media (.+)/;function N(e){return function(t,r,n){for(var i=0,o="",a="",f="",u="",c=0;c<t.length;c++){var l=t[c],v=l.charCodeAt(0);if(o+=l,v!==C||(i++,a?2!==i:1!==i)){if(v===F){if(i--,a&&0===i){a="";continue}if(a?1===i:0===i){var s=null!=r?r:e(a);d=void 0;if(d=A.exec(f))s.hydrateClassName(u,d[1],d[2]);else if(d=k.exec(f))s.hydrateKeyframes(u,d[1]);else{if("@font-face"!==f)throw new Error("Unsupported CSS selector when hydrating in Glitz");s.hydrateFontFace(u)}n&&n(s,o),o="",f="",u="";continue}}(a?i>1:i>0)?u+=l:f+=l}else{var d;(d=R.exec(f))&&(a=d[1],o="",f="")}}}}var _=function(e){void 0===e&&(e={});var t,r=e.prefix,n=S(r),i=S(r),o=e.mediaOrder,a={},f=null,u={},c=e.identifier||"glitz",l=function(e){if(e){if(u[e])return u[e];var r=a[e]=w(e,c),l=null;if(o){var v=Object.keys(a).sort(o);f=a[v[0]],l=a[v[v.indexOf(e)+1]]||null}return b(r,l),u[e]=new x(r,n,i)}return t||(r=b(w(e,c),f),t=new x(r,n,i))};this.injectStyle=g(l,e.transformer);var v=this.hydrate=N(l),s=document.head.querySelectorAll("style[data-"+c+"]");if(s)for(var d=0,y=s;d<y.length;d++){var h=(C=y[d]).media,p=void 0;h?(f||(f=C),a[h]=C,p=u[h]=new x(C,n,i)):p=t=new x(C,n,i),v(C.textContent,p)}var m=document.body.querySelectorAll("style[data-"+c+"]");if(m)for(var j=0,O=m;j<O.length;j++){var C;v((C=O[j]).textContent,void 0,(function(e,t){return e.injectRaw(t)})),C.parentNode.removeChild(C)}},z=function(e){function r(t,n,i,o,a,f,u,c,d,y,h){void 0===i&&(i=!1),void 0===o&&(o={}),void 0===a&&(a={}),void 0===f&&(f={}),void 0===u&&(u=[]),void 0===c&&(c={}),void 0===d&&(d={}),void 0===y&&(y={}),void 0===h&&(h=[]);var p=this,m={},g={},j={},O=[],w={},b={},S={},x=[];function C(e){return function(){if(i)throw new Error(e+" is prohibited after injections")}}(p=e.call(this,(function(e,r){var n,f,u;i=!0;var c=r?a[r]=null!==(n=a[r])&&void 0!==n?n:{}:o;if(c[e])return c[e];var l=t(),v=r?g[r]=null!==(f=g[r])&&void 0!==f?f:{}:m,s=r?b[r]=null!==(u=b[r])&&void 0!==u?u:{}:w;return c[e]=v[e]=s[e]=l,l}),(function(e){if(i=!0,f[e])return f[e];var t=n();return f[e]=j[e]=S[e]=t,t}),(function(e){i=!0,-1===u.indexOf(e)&&(u.push(e),O.push(e),x.push(e))}))||this).getStyleResult=function(){for(var e="",t=0,r=O;t<r.length;t++){e+=s(i=r[t])}for(var n in j)e+=v(j[n],n);for(var i in m)e+=l(m[i],i);for(var o in g){var a=g[o];for(var i in a)e+=l(a[i],i,o)}return e},p.getStyleStream=function(){var e="";if(x.length>0){for(var t=0,r=x;t<r.length;t++){e+=s(i=r[t])}x.splice(0,x.length)}for(var n in S)e+=v(S[n],n),delete S[n];for(var i in w)e+=l(w[i],i),delete w[i];for(var o in b){var a=b[o];for(var i in a)e+=l(a[i],i,o);delete b[o]}return e};var F=C("Hydration");p.hydrateClassName=function(e,r,n){var i,f;F(),t();var u=n?a[n]=null!==(i=a[n])&&void 0!==i?i:{}:o,l=n?d[n]=null!==(f=d[n])&&void 0!==f?f:{}:c;u[e]=l[e]=r},p.hydrateKeyframes=function(e,t){F(),n(),f[e]=t,y[e]=t},p.hydrateFontFace=function(e){F(),u.push(e),h.push(e)};var A=C("Cloning");return p.clone=function(e,t){return A(),new r(e,t,i,E(c),E(d),E(y),h.slice(0),E(c),E(d),E(y),h.slice(0))},p}return t(r,e),r}(y);function E(e){var t={};for(var r in e){var n=e[r];t[r]="string"==typeof n?n:E(n)}return t}var K=function e(t,r,n,i,o){void 0===t&&(t={}),void 0===r&&(r=S(t.prefix)),void 0===n&&(n=S(t.prefix)),void 0===o&&(o={});var a=function(e){return e?o[e]=o[e]||new z(r,n):i=i||new z(r,n)};this.injectStyle=g(a,t.transformer),this.hydrate=N(a);var f=t.identifier||"glitz";this.getStyleMarkup=function(){var e="";i&&(e+="<style data-"+f+">"+i.getStyleResult()+"</style>");for(var r=0,n=t.mediaOrder?Object.keys(o).sort(t.mediaOrder):Object.keys(o);r<n.length;r++){var a=n[r];e+="<style data-"+f+' media="'+a+'">'+o[a].getStyleResult()+"</style>"}return e},this.getStyleStream=function(){var e,r="";i&&(r+=i.getStyleStream());for(var n=0,a=t.mediaOrder?Object.keys(o).sort(t.mediaOrder):Object.keys(o);n<a.length;n++){var u=a[n];r+=d(u,o[u].getStyleStream())}if(r)return["style",(e={},e["data-"+f]="",e),r]},this.clone=function(){var a=r.clone(),f=n.clone(),u={};for(var c in o)u[c]=o[c].clone(a,f);return new e(t,a,f,null==i?void 0:i.clone(a,f),u)}},M=function(e){void 0===e&&(e={});var t,r=e.prefix,n=S(r),i=S(r),o={};this.injectStyle=g((function(e){return e?o[e]=o[e]||new z(n,i):t=t||new z(n,i)}),e.transformer),this.getStyle=function(){var r="";t&&(r+=t.getStyleResult());for(var n=0,i=e.mediaOrder?Object.keys(o).sort(e.mediaOrder):Object.keys(o);n<i.length;n++){var a=i[n];r+=d(a,o[a].getStyleResult())}return r}};function T(e){var t,r="";for(t in e){r&&(r+=" and ");var n=e[t];r+=!0===n?"("+f(t)+")":"("+f(t)+": "+n+")"}return r}exports.DEFAULT_HYDRATION_IDENTIFIER="glitz",exports.GlitzClient=_,exports.GlitzServer=K,exports.GlitzStatic=M,exports.compose=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.reduceRight((function(e,t){return function(r){return t(e(r))}}))},exports.media=function(e,t){var r;return(r={})["@media "+("string"==typeof e?e:T(e))]=t,r},exports.query=T,exports.selector=function(e,t){var n;return"string"==typeof e?((n={})[e]=t,n):e.reduce((function(e,n){var i;return r(r({},e),((i={})[n]=t,i))}),{})};

esnext/index.js

@@ -470,8 +470,4 @@ const DEFAULT_HYDRATION_IDENTIFIER = 'glitz';
 
-function createHashCounter(prefix = '') {
-    let count = 0;
-    let offset = 10;
-    let msb = 35;
-    let power = 1;
-    const increment = () => {
+function createHashCounter(prefix = '', count = 0, offset = 10, msb = 35, power = 1) {
+    function increment() {
         const virtualCount = count + offset;
@@ -488,9 +484,6 @@ if (virtualCount === msb) {
         return prefix + virtualCount.toString(36);
-    };
+    }
     return Object.assign(increment, {
-        reset() {
-            count = 0;
-            offset = 10;
-            msb = 35;
-            power = 1;
+        clone() {
+            return createHashCounter(prefix, count, offset, msb, power);
         },
@@ -624,4 +617,4 @@ });
         const prefix = options.prefix;
-        const incrementClassNameHash = createHashCounter(prefix);
-        const incrementKeyframesHash = createHashCounter(prefix);
+        const classNameHash = createHashCounter(prefix);
+        const keyframesHash = createHashCounter(prefix);
         const mediaOrderOption = options.mediaOrder;
@@ -646,3 +639,3 @@ const mediaSheets = {};
                 insertStyleElement(element, insertBefore);
-                return (mediaInjectors[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
+                return (mediaInjectors[media] = new InjectorClient(element, classNameHash, keyframesHash));
             }
@@ -654,3 +647,3 @@ else {
                 const element = insertStyleElement(createStyleElement(media, identifier), initialMediaSheet);
-                return (plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
+                return (plain = new InjectorClient(element, classNameHash, keyframesHash));
             }
@@ -672,6 +665,6 @@ };
                     mediaSheets[media] = element;
-                    injector = mediaInjectors[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
+                    injector = mediaInjectors[media] = new InjectorClient(element, classNameHash, keyframesHash);
                 }
                 else {
-                    injector = plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
+                    injector = plain = new InjectorClient(element, classNameHash, keyframesHash);
                 }
@@ -707,22 +700,13 @@ hydrate(element.textContent, injector);
 class InjectorServer extends Injector {
-    constructor(classNameHash, keyframesHash) {
-        let plainFullIndex = {};
-        let selectorFullIndex = {};
-        let keyframesFullIndex = {};
-        let fontFaceFullIndex = [];
-        const plainHydrationIndex = {};
-        const selectorHydrationIndex = {};
-        const keyframesHydrationIndex = {};
-        const fontFaceHydrationIndex = [];
-        let forbidHydration = false;
-        let plainResultIndex = {};
-        let selectorResultIndex = {};
-        let keyframesResultIndex = {};
-        let fontFaceResultIndex = [];
-        let plainStreamIndex = {};
-        let selectorStreamIndex = {};
-        let keyframesStreamIndex = {};
-        let fontFaceStreamIndex = [];
+    constructor(classNameHash, keyframesHash, postInjection = false, plainFullIndex = {}, selectorFullIndex = {}, keyframesFullIndex = {}, fontFaceFullIndex = [], plainHydrationIndex = {}, selectorHydrationIndex = {}, keyframesHydrationIndex = {}, fontFaceHydrationIndex = []) {
+        const plainResultIndex = {};
+        const selectorResultIndex = {};
+        const keyframesResultIndex = {};
+        const fontFaceResultIndex = [];
+        const plainStreamIndex = {};
+        const selectorStreamIndex = {};
+        const keyframesStreamIndex = {};
+        const fontFaceStreamIndex = [];
         super((block, selector) => {
-            forbidHydration = true;
+            postInjection = true;
             const full = selector ? (selectorFullIndex[selector] = selectorFullIndex[selector] ?? {}) : plainFullIndex;
@@ -742,3 +726,3 @@ if (full[block]) {
         }, blockList => {
-            forbidHydration = true;
+            postInjection = true;
             if (keyframesFullIndex[blockList]) {
@@ -751,3 +735,3 @@ return keyframesFullIndex[blockList];
         }, block => {
-            forbidHydration = true;
+            postInjection = true;
             if (fontFaceFullIndex.indexOf(block) === -1) {
@@ -803,9 +787,12 @@ fontFaceFullIndex.push(block);
         };
-        function allowHydrationCheck() {
-            if (forbidHydration) {
-                throw new Error('Hydration is prohibited after injections');
-            }
+        function createPreActionCheck(action) {
+            return () => {
+                if (postInjection) {
+                    throw new Error(`${action} is prohibited after injections`);
+                }
+            };
         }
+        const preHydrationCheck = createPreActionCheck('Hydration');
         this.hydrateClassName = (body, className, suffix) => {
-            allowHydrationCheck();
+            preHydrationCheck();
             classNameHash();
@@ -819,3 +806,3 @@ const full = suffix ? (selectorFullIndex[suffix] = selectorFullIndex[suffix] ?? {}) : plainFullIndex;
         this.hydrateKeyframes = (body, name) => {
-            allowHydrationCheck();
+            preHydrationCheck();
             keyframesHash();
@@ -826,58 +813,32 @@ keyframesFullIndex[body] = name;
         this.hydrateFontFace = body => {
-            allowHydrationCheck();
+            preHydrationCheck();
             fontFaceFullIndex.push(body);
             fontFaceHydrationIndex.push(body);
         };
-        this.reset = () => {
-            plainFullIndex = {};
-            selectorFullIndex = {};
-            keyframesFullIndex = {};
-            fontFaceFullIndex = [];
-            plainResultIndex = {};
-            selectorResultIndex = {};
-            keyframesResultIndex = {};
-            fontFaceResultIndex = [];
-            plainStreamIndex = {};
-            selectorStreamIndex = {};
-            keyframesStreamIndex = {};
-            fontFaceStreamIndex = [];
-            let shouldDelete = true;
-            for (const body in plainHydrationIndex) {
-                shouldDelete = false;
-                classNameHash();
-                plainFullIndex[body] = plainHydrationIndex[body];
-            }
-            for (const selector in selectorHydrationIndex) {
-                for (const body in selectorHydrationIndex[selector]) {
-                    shouldDelete = false;
-                    classNameHash();
-                    const index = (selectorFullIndex[selector] = selectorFullIndex[selector] ?? {});
-                    index[body] = selectorHydrationIndex[selector][body];
-                }
-            }
-            for (const body in keyframesHydrationIndex) {
-                shouldDelete = false;
-                keyframesHash();
-                keyframesFullIndex[body] = keyframesHydrationIndex[body];
-            }
-            for (const body of fontFaceHydrationIndex) {
-                shouldDelete = false;
-                fontFaceFullIndex.push(body);
-            }
-            return shouldDelete;
+        const preCloningCheck = createPreActionCheck('Cloning');
+        this.clone = (classNameHashClone, keyframesHashClone) => {
+            preCloningCheck();
+            return new InjectorServer(classNameHashClone, keyframesHashClone, postInjection, clone(plainHydrationIndex), clone(selectorHydrationIndex), clone(keyframesHydrationIndex), fontFaceHydrationIndex.slice(0), clone(plainHydrationIndex), clone(selectorHydrationIndex), clone(keyframesHydrationIndex), fontFaceHydrationIndex.slice(0));
         };
     }
 }
+function clone(index) {
+    const copy = {};
+    for (const key in index) {
+        const value = index[key];
+        if (typeof value === 'string') {
+            copy[key] = value;
+        }
+        else {
+            copy[key] = clone(value);
+        }
+    }
+    return copy;
+}
 
 class GlitzServer {
-    constructor(options = {}) {
-        const prefix = options.prefix;
-        const incrementClassNameHash = createHashCounter(prefix);
-        const incrementKeyframesHash = createHashCounter(prefix);
-        let plain;
-        const mediaInjectors = {};
+    constructor(options = {}, classNameHash = createHashCounter(options.prefix), keyframesHash = createHashCounter(options.prefix), plainInjector, mediaInjectors = {}) {
         const getInjector = (media) => media
-            ? (mediaInjectors[media] =
-                mediaInjectors[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
-            : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+            ? (mediaInjectors[media] = mediaInjectors[media] || new InjectorServer(classNameHash, keyframesHash))
+            : (plainInjector = plainInjector || new InjectorServer(classNameHash, keyframesHash));
         this.injectStyle = createInjectStyle(getInjector, options.transformer);
@@ -888,4 +849,4 @@ this.hydrate = createHydrate(getInjector);
             let markup = '';
-            if (plain) {
-                markup += `<style data-${identifier}>${plain.getStyleResult()}</style>`;
+            if (plainInjector) {
+                markup += `<style data-${identifier}>${plainInjector.getStyleResult()}</style>`;
             }
@@ -902,4 +863,4 @@ const medias = options.mediaOrder
             let css = '';
-            if (plain) {
-                css += plain.getStyleStream();
+            if (plainInjector) {
+                css += plainInjector.getStyleStream();
             }
@@ -917,14 +878,10 @@ const medias = options.mediaOrder
         };
-        this.reset = (preserveHydration = true) => {
-            this.injectStyle = createInjectStyle(getInjector, options.transformer);
-            incrementClassNameHash.reset();
-            incrementKeyframesHash.reset();
-            if (!preserveHydration || (plain && plain.reset())) {
-                plain = undefined;
-            }
+        this.clone = () => {
+            const classNameHashClone = classNameHash.clone();
+            const keyframesHashClone = keyframesHash.clone();
+            const mediaInjectorsClone = {};
             for (const media in mediaInjectors) {
-                if (!preserveHydration || mediaInjectors[media].reset()) {
-                    delete mediaInjectors[media];
-                }
+                mediaInjectorsClone[media] = mediaInjectors[media].clone(classNameHashClone, keyframesHashClone);
             }
+            return new GlitzServer(options, classNameHashClone, keyframesHashClone, plainInjector?.clone(classNameHashClone, keyframesHashClone), mediaInjectorsClone);
         };
@@ -937,9 +894,9 @@ }
         const prefix = options.prefix;
-        const incrementClassNameHash = createHashCounter(prefix);
-        const incrementKeyframesHash = createHashCounter(prefix);
+        const classNameHash = createHashCounter(prefix);
+        const keyframesHash = createHashCounter(prefix);
         let plain;
         const mediaIndex = {};
         const injector = (media) => media
-            ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
-            : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+            ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(classNameHash, keyframesHash))
+            : (plain = plain || new InjectorServer(classNameHash, keyframesHash));
         this.injectStyle = createInjectStyle(injector, options.transformer);
@@ -946,0 +903,0 @@ this.getStyle = () => {

mjs/index.js

@@ -532,9 +532,9 @@ var DEFAULT_HYDRATION_IDENTIFIER = 'glitz';
 
-function createHashCounter(prefix) {
+function createHashCounter(prefix, count, offset, msb, power) {
     if (prefix === void 0) { prefix = ''; }
-    var count = 0;
-    var offset = 10;
-    var msb = 35;
-    var power = 1;
-    var increment = function () {
+    if (count === void 0) { count = 0; }
+    if (offset === void 0) { offset = 10; }
+    if (msb === void 0) { msb = 35; }
+    if (power === void 0) { power = 1; }
+    function increment() {
         var virtualCount = count + offset;
@@ -551,9 +551,6 @@ if (virtualCount === msb) {
         return prefix + virtualCount.toString(36);
-    };
+    }
     return Object.assign(increment, {
-        reset: function () {
-            count = 0;
-            offset = 10;
-            msb = 35;
-            power = 1;
+        clone: function () {
+            return createHashCounter(prefix, count, offset, msb, power);
         },
@@ -694,4 +691,4 @@ });
         var prefix = options.prefix;
-        var incrementClassNameHash = createHashCounter(prefix);
-        var incrementKeyframesHash = createHashCounter(prefix);
+        var classNameHash = createHashCounter(prefix);
+        var keyframesHash = createHashCounter(prefix);
         var mediaOrderOption = options.mediaOrder;
@@ -716,3 +713,3 @@ var mediaSheets = {};
                 insertStyleElement(element, insertBefore);
-                return (mediaInjectors[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
+                return (mediaInjectors[media] = new InjectorClient(element, classNameHash, keyframesHash));
             }
@@ -724,3 +721,3 @@ else {
                 var element = insertStyleElement(createStyleElement(media, identifier), initialMediaSheet);
-                return (plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
+                return (plain = new InjectorClient(element, classNameHash, keyframesHash));
             }
@@ -743,6 +740,6 @@ };
                     mediaSheets[media] = element;
-                    injector = mediaInjectors[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
+                    injector = mediaInjectors[media] = new InjectorClient(element, classNameHash, keyframesHash);
                 }
                 else {
-                    injector = plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
+                    injector = plain = new InjectorClient(element, classNameHash, keyframesHash);
                 }
@@ -781,13 +778,13 @@ hydrate(element.textContent, injector);
     __extends(InjectorServer, _super);
-    function InjectorServer(classNameHash, keyframesHash) {
+    function InjectorServer(classNameHash, keyframesHash, postInjection, plainFullIndex, selectorFullIndex, keyframesFullIndex, fontFaceFullIndex, plainHydrationIndex, selectorHydrationIndex, keyframesHydrationIndex, fontFaceHydrationIndex) {
+        if (postInjection === void 0) { postInjection = false; }
+        if (plainFullIndex === void 0) { plainFullIndex = {}; }
+        if (selectorFullIndex === void 0) { selectorFullIndex = {}; }
+        if (keyframesFullIndex === void 0) { keyframesFullIndex = {}; }
+        if (fontFaceFullIndex === void 0) { fontFaceFullIndex = []; }
+        if (plainHydrationIndex === void 0) { plainHydrationIndex = {}; }
+        if (selectorHydrationIndex === void 0) { selectorHydrationIndex = {}; }
+        if (keyframesHydrationIndex === void 0) { keyframesHydrationIndex = {}; }
+        if (fontFaceHydrationIndex === void 0) { fontFaceHydrationIndex = []; }
         var _this = this;
-        var plainFullIndex = {};
-        var selectorFullIndex = {};
-        var keyframesFullIndex = {};
-        var fontFaceFullIndex = [];
-        var plainHydrationIndex = {};
-        var selectorHydrationIndex = {};
-        var keyframesHydrationIndex = {};
-        var fontFaceHydrationIndex = [];
-        var forbidHydration = false;
         var plainResultIndex = {};
@@ -803,3 +800,3 @@ var selectorResultIndex = {};
             var _a, _b, _c;
-            forbidHydration = true;
+            postInjection = true;
             var full = selector ? (selectorFullIndex[selector] = (_a = selectorFullIndex[selector]) !== null && _a !== void 0 ? _a : {}) : plainFullIndex;
@@ -819,3 +816,3 @@ if (full[block]) {
         }, function (blockList) {
-            forbidHydration = true;
+            postInjection = true;
             if (keyframesFullIndex[blockList]) {
@@ -828,3 +825,3 @@ return keyframesFullIndex[blockList];
         }, function (block) {
-            forbidHydration = true;
+            postInjection = true;
             if (fontFaceFullIndex.indexOf(block) === -1) {
@@ -882,10 +879,13 @@ fontFaceFullIndex.push(block);
         };
-        function allowHydrationCheck() {
-            if (forbidHydration) {
-                throw new Error('Hydration is prohibited after injections');
-            }
+        function createPreActionCheck(action) {
+            return function () {
+                if (postInjection) {
+                    throw new Error(action + " is prohibited after injections");
+                }
+            };
         }
+        var preHydrationCheck = createPreActionCheck('Hydration');
         _this.hydrateClassName = function (body, className, suffix) {
             var _a, _b;
-            allowHydrationCheck();
+            preHydrationCheck();
             classNameHash();
@@ -899,3 +899,3 @@ var full = suffix ? (selectorFullIndex[suffix] = (_a = selectorFullIndex[suffix]) !== null && _a !== void 0 ? _a : {}) : plainFullIndex;
         _this.hydrateKeyframes = function (body, name) {
-            allowHydrationCheck();
+            preHydrationCheck();
             keyframesHash();
@@ -906,45 +906,10 @@ keyframesFullIndex[body] = name;
         _this.hydrateFontFace = function (body) {
-            allowHydrationCheck();
+            preHydrationCheck();
             fontFaceFullIndex.push(body);
             fontFaceHydrationIndex.push(body);
         };
-        _this.reset = function () {
-            var _a;
-            plainFullIndex = {};
-            selectorFullIndex = {};
-            keyframesFullIndex = {};
-            fontFaceFullIndex = [];
-            plainResultIndex = {};
-            selectorResultIndex = {};
-            keyframesResultIndex = {};
-            fontFaceResultIndex = [];
-            plainStreamIndex = {};
-            selectorStreamIndex = {};
-            keyframesStreamIndex = {};
-            fontFaceStreamIndex = [];
-            var shouldDelete = true;
-            for (var body in plainHydrationIndex) {
-                shouldDelete = false;
-                classNameHash();
-                plainFullIndex[body] = plainHydrationIndex[body];
-            }
-            for (var selector in selectorHydrationIndex) {
-                for (var body in selectorHydrationIndex[selector]) {
-                    shouldDelete = false;
-                    classNameHash();
-                    var index = (selectorFullIndex[selector] = (_a = selectorFullIndex[selector]) !== null && _a !== void 0 ? _a : {});
-                    index[body] = selectorHydrationIndex[selector][body];
-                }
-            }
-            for (var body in keyframesHydrationIndex) {
-                shouldDelete = false;
-                keyframesHash();
-                keyframesFullIndex[body] = keyframesHydrationIndex[body];
-            }
-            for (var _i = 0, fontFaceHydrationIndex_1 = fontFaceHydrationIndex; _i < fontFaceHydrationIndex_1.length; _i++) {
-                var body = fontFaceHydrationIndex_1[_i];
-                shouldDelete = false;
-                fontFaceFullIndex.push(body);
-            }
-            return shouldDelete;
+        var preCloningCheck = createPreActionCheck('Cloning');
+        _this.clone = function (classNameHashClone, keyframesHashClone) {
+            preCloningCheck();
+            return new InjectorServer(classNameHashClone, keyframesHashClone, postInjection, clone(plainHydrationIndex), clone(selectorHydrationIndex), clone(keyframesHydrationIndex), fontFaceHydrationIndex.slice(0), clone(plainHydrationIndex), clone(selectorHydrationIndex), clone(keyframesHydrationIndex), fontFaceHydrationIndex.slice(0));
         };
@@ -955,17 +920,26 @@ return _this;
 }(Injector));
+function clone(index) {
+    var copy = {};
+    for (var key in index) {
+        var value = index[key];
+        if (typeof value === 'string') {
+            copy[key] = value;
+        }
+        else {
+            copy[key] = clone(value);
+        }
+    }
+    return copy;
+}
 
 var GlitzServer = /** @class */ (function () {
-    function GlitzServer(options) {
-        var _this = this;
+    function GlitzServer(options, classNameHash, keyframesHash, plainInjector, mediaInjectors) {
         if (options === void 0) { options = {}; }
-        var prefix = options.prefix;
-        var incrementClassNameHash = createHashCounter(prefix);
-        var incrementKeyframesHash = createHashCounter(prefix);
-        var plain;
-        var mediaInjectors = {};
+        if (classNameHash === void 0) { classNameHash = createHashCounter(options.prefix); }
+        if (keyframesHash === void 0) { keyframesHash = createHashCounter(options.prefix); }
+        if (mediaInjectors === void 0) { mediaInjectors = {}; }
         var getInjector = function (media) {
             return media
-                ? (mediaInjectors[media] =
-                    mediaInjectors[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
-                : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+                ? (mediaInjectors[media] = mediaInjectors[media] || new InjectorServer(classNameHash, keyframesHash))
+                : (plainInjector = plainInjector || new InjectorServer(classNameHash, keyframesHash));
         };
@@ -977,4 +951,4 @@ this.injectStyle = createInjectStyle(getInjector, options.transformer);
             var markup = '';
-            if (plain) {
-                markup += "<style data-" + identifier + ">" + plain.getStyleResult() + "</style>";
+            if (plainInjector) {
+                markup += "<style data-" + identifier + ">" + plainInjector.getStyleResult() + "</style>";
             }
@@ -993,4 +967,4 @@ var medias = options.mediaOrder
             var css = '';
-            if (plain) {
-                css += plain.getStyleStream();
+            if (plainInjector) {
+                css += plainInjector.getStyleStream();
             }
@@ -1009,15 +983,10 @@ var medias = options.mediaOrder
         };
-        this.reset = function (preserveHydration) {
-            if (preserveHydration === void 0) { preserveHydration = true; }
-            _this.injectStyle = createInjectStyle(getInjector, options.transformer);
-            incrementClassNameHash.reset();
-            incrementKeyframesHash.reset();
-            if (!preserveHydration || (plain && plain.reset())) {
-                plain = undefined;
-            }
+        this.clone = function () {
+            var classNameHashClone = classNameHash.clone();
+            var keyframesHashClone = keyframesHash.clone();
+            var mediaInjectorsClone = {};
             for (var media in mediaInjectors) {
-                if (!preserveHydration || mediaInjectors[media].reset()) {
-                    delete mediaInjectors[media];
-                }
+                mediaInjectorsClone[media] = mediaInjectors[media].clone(classNameHashClone, keyframesHashClone);
             }
+            return new GlitzServer(options, classNameHashClone, keyframesHashClone, plainInjector === null || plainInjector === void 0 ? void 0 : plainInjector.clone(classNameHashClone, keyframesHashClone), mediaInjectorsClone);
         };
@@ -1032,4 +1001,4 @@ }
         var prefix = options.prefix;
-        var incrementClassNameHash = createHashCounter(prefix);
-        var incrementKeyframesHash = createHashCounter(prefix);
+        var classNameHash = createHashCounter(prefix);
+        var keyframesHash = createHashCounter(prefix);
         var plain;
@@ -1039,4 +1008,4 @@ var mediaIndex = {};
             return media
-                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
-                : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(classNameHash, keyframesHash))
+                : (plain = plain || new InjectorServer(classNameHash, keyframesHash));
         };
@@ -1043,0 +1012,0 @@ this.injectStyle = createInjectStyle(injector, options.transformer);

package.json

 {
   "name": "@glitz/core",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
   "main": "./cjs/index.js",
@@ -28,3 +28,3 @@ "module": "./mjs/index.js",
   ],
-  "gitHead": "ca3efc96460d9213d1c775ea37501987eef81ab5"
+  "gitHead": "613d22cf266d505482e35b4ab91034dbfcd20391"
 }

types/server/GlitzServer.d.ts

@@ -11,4 +11,4 @@ import { Style, Theme } from '@glitz/type';
     }, string] | undefined;
-    reset: (preserveHydration?: boolean) => void;
+    clone: () => GlitzServer<TStyle>;
     constructor(options?: Options);
 }

types/server/InjectorServer.d.ts

 import Injector from '../core/Injector';
 import { HashCounter } from '../utils/hash';
+declare type Index<TValue = string> = Record<string, TValue>;
 export default class InjectorServer extends Injector {
@@ -9,4 +10,5 @@ getStyleResult: () => string;
     hydrateFontFace: (body: string) => void;
-    reset: () => boolean;
-    constructor(classNameHash: HashCounter, keyframesHash: HashCounter);
+    clone: (classNameHashClone: HashCounter, keyframesHashClone: HashCounter) => InjectorServer;
+    constructor(classNameHash: HashCounter, keyframesHash: HashCounter, postInjection?: boolean, plainFullIndex?: Index, selectorFullIndex?: Index<Index>, keyframesFullIndex?: Index, fontFaceFullIndex?: string[], plainHydrationIndex?: Index, selectorHydrationIndex?: Index<Index>, keyframesHydrationIndex?: Index, fontFaceHydrationIndex?: string[]);
 }
+export {};

types/utils/hash.d.ts

 export declare type HashCounter = {
     (): string;
-    reset(): void;
+    clone(): HashCounter;
 };
-export declare function createHashCounter(prefix?: string): HashCounter;
+export declare function createHashCounter(prefix?: string, count?: number, offset?: number, msb?: number, power?: number): HashCounter;

No alert changes

Worsened metrics

Total package byte prevSize

159904

decreased by-0.73%

Lines of code

3199

decreased by-2.97%

No dependency changes