simplestyle-js 5.4.5-beta.0 → 5.4.5-beta.2

package/dist/cjs/makeStyles.cjs

@@ -9,61 +9,47 @@ Object.defineProperty(exports, "makeCssFuncs", {
     }
 });
 const _createStyles = require("./createStyles.cjs");
-function extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback) {
+function extractOverridesAndOpts(optsOrCallback, overridesOrCallback) {
     const opts = typeof optsOrCallback === 'function' ? optsOrCallback() : optsOrCallback;
     const overrides = typeof overridesOrCallback === 'function' ? overridesOrCallback() : overridesOrCallback;
-    const out = {
+    return {
         ...opts,
         ...overrides
     };
-    if (localRegistryOverride) out.registry = localRegistryOverride;
-    return out;
 }
 function makeCssFuncs(optsOrCallback) {
-    let localRegistryOverride = null;
     function wrappedCreateStyles(ruleId, rulesFnc, overridesOrCallback) {
         return (0, _createStyles.createStyles)(ruleId, ()=>{
-            const opts = extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback);
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
             return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
             'variables' in opts ? opts.variables : undefined);
-        }, ()=>extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback));
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
     function wrappedCreateKeyframes(ruleId, rulesFnc, overridesOrCallback) {
         return (0, _createStyles.keyframes)(ruleId, ()=>{
-            const opts = extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback);
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
             return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
             'variables' in opts ? opts.variables : undefined);
-        }, ()=>extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback));
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
     function wrappedRawStyles(ruleId, rulesFnc, overridesOrCallback) {
         return (0, _createStyles.rawStyles)(ruleId, ()=>{
-            const opts = extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback);
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
             return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
             'variables' in opts ? opts.variables : undefined);
-        }, ()=>extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback));
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
     function wrappedImports(ruleId, rulesFnc, overridesOrCallback) {
         return (0, _createStyles.imports)(ruleId, ()=>{
-            const opts = extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback);
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
             return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
             'variables' in opts ? opts.variables : undefined);
-        }, ()=>extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback));
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
-    /**
-   * this is a useful function to use if you are building a component library
-   * that is installed / shared in other packages, and these packages that
-   * use your component library are server-side rendered.
-   * this function should be called as the very first thing before any of your
-   * other component code is loaded, as this will ensure your CSS registry
-   * is clamped to the instance you need
-   */ const setRegistryOverride = (registry)=>{
-        localRegistryOverride = registry;
-    };
     return {
         createStyles: wrappedCreateStyles,
         imports: wrappedImports,
         keyframes: wrappedCreateKeyframes,
-        rawStyles: wrappedRawStyles,
-        setRegistryOverride
+        rawStyles: wrappedRawStyles
     };
 }

package/dist/cjs/makeStyles.d.ts

@@ -31,6 +31,5 @@ export declare function makeCssFuncs<V extends object | undefined | null | never
         stylesheet: string;
     };
     rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => string;
-    setRegistryOverride: (registry: Nullish<SimpleStyleRegistry>) => void;
 };
 export {};

package/dist/cjs/next/ClientBoundary.cjs

@@ -10,11 +10,28 @@ Object.defineProperty(exports, "ClientBoundary", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-function ClientBoundary({ rules }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: rules.map(([ruleId, css])=>/*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-                id: ruleId,
-                children: css
-            }, ruleId))
+const _react = require("react");
+function ClientBoundary({ children, registry }) {
+    /** state */ const [rules, setRules] = (0, _react.useState)(null);
+    /** effects */ (0, _react.useEffect)(()=>{
+        const handleSettled = ()=>{
+            setRules(registry.getRulesById());
+        };
+        registry.on('settled', handleSettled);
+        return ()=>{
+            registry.off('settled', handleSettled);
+        };
+    }, [
+        registry
+    ]);
+    if (!rules) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            rules.map(([ruleId, css])=>/*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
+                    id: ruleId,
+                    children: css
+                }, ruleId)),
+            children
+        ]
     });
 }

package/dist/cjs/next/ClientBoundary.d.ts

@@ -1,4 +1,5 @@
+import { type PropsWithChildren } from 'react';
 import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
-export declare function ClientBoundary({ rules, }: {
-    rules: ReturnType<SimpleStyleRegistry['getRulesById']>;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function ClientBoundary({ children, registry, }: PropsWithChildren & {
+    registry: SimpleStyleRegistry;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/next/SimpleStyleProvider.cjs

@@ -11,12 +11,8 @@ Object.defineProperty(exports, "SimpleStyleProvider", {
 const _jsxruntime = require("react/jsx-runtime");
 const _ClientBoundary = require("./ClientBoundary.cjs");
 function SimpleStyleProvider({ children, registry }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ClientBoundary.ClientBoundary, {
-                rules: registry.getRulesById()
-            }),
-            children
-        ]
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ClientBoundary.ClientBoundary, {
+        registry: registry,
+        children: children
     });
 }

package/dist/cjs/simpleStyleRegistry.cjs

@@ -11,6 +11,8 @@ Object.defineProperty(exports, "SimpleStyleRegistry", {
 /* eslint-disable unicorn/prefer-query-selector */ const doc = globalThis.document;
 class SimpleStyleRegistry {
     sheets = new Map();
+    callbacks = [];
+    addTimeout = null;
     add(ruleId, contents) {
         if (this.sheets.has(ruleId) && doc) {
             const tag = doc.getElementById(ruleId);
@@ -19,6 +21,21 @@ class SimpleStyleRegistry {
             }
         }
         this.sheets.set(ruleId, contents);
+        this.callbacks.forEach((entry)=>{
+            if (entry.eventName === 'add') {
+                entry.callback.call(this, ruleId, contents);
+            }
+        });
+        if (this.addTimeout) {
+            clearTimeout(this.addTimeout);
+        }
+        this.addTimeout = setTimeout(()=>{
+            this.callbacks.forEach((entry)=>{
+                if (entry.eventName === 'settled') {
+                    entry.callback.call(this);
+                }
+            });
+        }, 50);
     }
     /**
    * returns the bare CSS to be injected into a <style /> tag
@@ -45,4 +62,22 @@ ${contents}`, '');
             ...this.sheets.entries()
         ];
     }
+    /**
+   * bind an event handler to one of the various events
+   * that occur on the registry
+   */ on(eventName, callback) {
+        // @ts-expect-error - gross typings
+        this.callbacks.push({
+            eventName,
+            callback
+        });
+    }
+    /**
+   * disconnects an event handler from the registry.
+   * if no callback is specified when calling off,
+   * all event handlers are unbound
+   */ off(eventName, callback) {
+        const cbIsFunc = typeof callback === 'function';
+        this.callbacks = this.callbacks.filter((entry)=>entry.eventName !== eventName && (cbIsFunc && entry.callback !== callback || !cbIsFunc));
+    }
 }

package/dist/cjs/simpleStyleRegistry.d.ts

@@ -1,3 +1,6 @@
+type AnyEventName = 'add' | 'settled';
+export type SimpleStyleRegistryAddEventCallback = (this: SimpleStyleRegistry, ruleId: string, contents: string) => void;
+export type SimpleStyleRegistrySettledEventCallback = (this: SimpleStyleRegistry) => void;
 /**
  * Acts as an accumulator for all
  * generated css that occurs via createStyles().
@@ -6,6 +9,8 @@
  */
 export declare class SimpleStyleRegistry {
     private sheets;
+    private callbacks;
+    private addTimeout;
     add(ruleId: string, contents: string): void;
     /**
      * returns the bare CSS to be injected into a <style /> tag
@@ -25,4 +30,16 @@ export declare class SimpleStyleRegistry {
      * won't work during local development
      */
     getRulesById(): [string, string][];
+    /**
+     * bind an event handler to one of the various events
+     * that occur on the registry
+     */
+    on<E extends AnyEventName, Cb = E extends 'add' ? SimpleStyleRegistryAddEventCallback : E extends 'settled' ? SimpleStyleRegistrySettledEventCallback : never>(eventName: E, callback: Cb): void;
+    /**
+     * disconnects an event handler from the registry.
+     * if no callback is specified when calling off,
+     * all event handlers are unbound
+     */
+    off<E extends AnyEventName, Cb = E extends 'add' ? SimpleStyleRegistryAddEventCallback : E extends 'settled' ? SimpleStyleRegistrySettledEventCallback : never>(eventName: E, callback?: Cb): void;
 }
+export {};

package/dist/esm/makeStyles.d.ts

@@ -31,6 +31,5 @@ export declare function makeCssFuncs<V extends object | undefined | null | never
         stylesheet: string;
     };
     rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => string;
-    setRegistryOverride: (registry: Nullish<SimpleStyleRegistry>) => void;
 };
 export {};

package/dist/esm/makeStyles.mjs

@@ -1,13 +1,11 @@
 import { createStyles, imports, keyframes, rawStyles } from './createStyles.mjs';
-function extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback) {
+function extractOverridesAndOpts(optsOrCallback, overridesOrCallback) {
     const opts = typeof optsOrCallback === 'function' ? optsOrCallback() : optsOrCallback;
     const overrides = typeof overridesOrCallback === 'function' ? overridesOrCallback() : overridesOrCallback;
-    const out = {
+    return {
         ...opts,
         ...overrides
     };
-    if (localRegistryOverride) out.registry = localRegistryOverride;
-    return out;
 }
 /**
  * Creates all of your CSS functions, createStyles, keframes and rawStyles,
@@ -16,50 +14,38 @@ function extractOverridesAndOpts(optsOrCallback, localRegistryOverride, override
  * they accept a function as the 2nd parameter, instead of the usual object.
  * The function will be provided with your variables
  */ export function makeCssFuncs(optsOrCallback) {
-    let localRegistryOverride = null;
     function wrappedCreateStyles(ruleId, rulesFnc, overridesOrCallback) {
         return createStyles(ruleId, ()=>{
-            const opts = extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback);
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
             return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
             'variables' in opts ? opts.variables : undefined);
-        }, ()=>extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback));
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
     function wrappedCreateKeyframes(ruleId, rulesFnc, overridesOrCallback) {
         return keyframes(ruleId, ()=>{
-            const opts = extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback);
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
             return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
             'variables' in opts ? opts.variables : undefined);
-        }, ()=>extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback));
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
     function wrappedRawStyles(ruleId, rulesFnc, overridesOrCallback) {
         return rawStyles(ruleId, ()=>{
-            const opts = extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback);
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
             return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
             'variables' in opts ? opts.variables : undefined);
-        }, ()=>extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback));
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
     function wrappedImports(ruleId, rulesFnc, overridesOrCallback) {
         return imports(ruleId, ()=>{
-            const opts = extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback);
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
             return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
             'variables' in opts ? opts.variables : undefined);
-        }, ()=>extractOverridesAndOpts(optsOrCallback, localRegistryOverride, overridesOrCallback));
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
-    /**
-   * this is a useful function to use if you are building a component library
-   * that is installed / shared in other packages, and these packages that
-   * use your component library are server-side rendered.
-   * this function should be called as the very first thing before any of your
-   * other component code is loaded, as this will ensure your CSS registry
-   * is clamped to the instance you need
-   */ const setRegistryOverride = (registry)=>{
-        localRegistryOverride = registry;
-    };
     return {
         createStyles: wrappedCreateStyles,
         imports: wrappedImports,
         keyframes: wrappedCreateKeyframes,
-        rawStyles: wrappedRawStyles,
-        setRegistryOverride
+        rawStyles: wrappedRawStyles
     };
 }

package/dist/esm/next/ClientBoundary.d.ts

@@ -1,4 +1,5 @@
+import { type PropsWithChildren } from 'react';
 import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
-export declare function ClientBoundary({ rules, }: {
-    rules: ReturnType<SimpleStyleRegistry['getRulesById']>;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function ClientBoundary({ children, registry, }: PropsWithChildren & {
+    registry: SimpleStyleRegistry;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/next/ClientBoundary.mjs

@@ -1,10 +1,27 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export function ClientBoundary({ rules }) {
-    return /*#__PURE__*/ _jsx(_Fragment, {
-        children: rules.map(([ruleId, css])=>/*#__PURE__*/ _jsx("style", {
-                id: ruleId,
-                children: css
-            }, ruleId))
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+export function ClientBoundary({ children, registry }) {
+    /** state */ const [rules, setRules] = useState(null);
+    /** effects */ useEffect(()=>{
+        const handleSettled = ()=>{
+            setRules(registry.getRulesById());
+        };
+        registry.on('settled', handleSettled);
+        return ()=>{
+            registry.off('settled', handleSettled);
+        };
+    }, [
+        registry
+    ]);
+    if (!rules) return null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            rules.map(([ruleId, css])=>/*#__PURE__*/ _jsx("style", {
+                    id: ruleId,
+                    children: css
+                }, ruleId)),
+            children
+        ]
     });
 }

package/dist/esm/next/SimpleStyleProvider.mjs

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ClientBoundary } from './ClientBoundary.mjs';
 /**
  * Accumulates all CSS rules and writes
@@ -6,12 +6,8 @@ import { ClientBoundary } from './ClientBoundary.mjs';
  * Use this for Next.js or other Next.js-like frameworks
  * that leverage React server components
  */ export function SimpleStyleProvider({ children, registry }) {
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(ClientBoundary, {
-                rules: registry.getRulesById()
-            }),
-            children
-        ]
+    return /*#__PURE__*/ _jsx(ClientBoundary, {
+        registry: registry,
+        children: children
     });
 }

package/dist/esm/simpleStyleRegistry.d.ts

@@ -1,3 +1,6 @@
+type AnyEventName = 'add' | 'settled';
+export type SimpleStyleRegistryAddEventCallback = (this: SimpleStyleRegistry, ruleId: string, contents: string) => void;
+export type SimpleStyleRegistrySettledEventCallback = (this: SimpleStyleRegistry) => void;
 /**
  * Acts as an accumulator for all
  * generated css that occurs via createStyles().
@@ -6,6 +9,8 @@
  */
 export declare class SimpleStyleRegistry {
     private sheets;
+    private callbacks;
+    private addTimeout;
     add(ruleId: string, contents: string): void;
     /**
      * returns the bare CSS to be injected into a <style /> tag
@@ -25,4 +30,16 @@ export declare class SimpleStyleRegistry {
      * won't work during local development
      */
     getRulesById(): [string, string][];
+    /**
+     * bind an event handler to one of the various events
+     * that occur on the registry
+     */
+    on<E extends AnyEventName, Cb = E extends 'add' ? SimpleStyleRegistryAddEventCallback : E extends 'settled' ? SimpleStyleRegistrySettledEventCallback : never>(eventName: E, callback: Cb): void;
+    /**
+     * disconnects an event handler from the registry.
+     * if no callback is specified when calling off,
+     * all event handlers are unbound
+     */
+    off<E extends AnyEventName, Cb = E extends 'add' ? SimpleStyleRegistryAddEventCallback : E extends 'settled' ? SimpleStyleRegistrySettledEventCallback : never>(eventName: E, callback?: Cb): void;
 }
+export {};

package/dist/esm/simpleStyleRegistry.mjs

@@ -6,6 +6,8 @@
  * React variant of this will come after the baseline one is created
  */ export class SimpleStyleRegistry {
     sheets = new Map();
+    callbacks = [];
+    addTimeout = null;
     add(ruleId, contents) {
         if (this.sheets.has(ruleId) && doc) {
             const tag = doc.getElementById(ruleId);
@@ -14,6 +16,21 @@
             }
         }
         this.sheets.set(ruleId, contents);
+        this.callbacks.forEach((entry)=>{
+            if (entry.eventName === 'add') {
+                entry.callback.call(this, ruleId, contents);
+            }
+        });
+        if (this.addTimeout) {
+            clearTimeout(this.addTimeout);
+        }
+        this.addTimeout = setTimeout(()=>{
+            this.callbacks.forEach((entry)=>{
+                if (entry.eventName === 'settled') {
+                    entry.callback.call(this);
+                }
+            });
+        }, 50);
     }
     /**
    * returns the bare CSS to be injected into a <style /> tag
@@ -40,4 +57,22 @@ ${contents}`, '');
             ...this.sheets.entries()
         ];
     }
+    /**
+   * bind an event handler to one of the various events
+   * that occur on the registry
+   */ on(eventName, callback) {
+        // @ts-expect-error - gross typings
+        this.callbacks.push({
+            eventName,
+            callback
+        });
+    }
+    /**
+   * disconnects an event handler from the registry.
+   * if no callback is specified when calling off,
+   * all event handlers are unbound
+   */ off(eventName, callback) {
+        const cbIsFunc = typeof callback === 'function';
+        this.callbacks = this.callbacks.filter((entry)=>entry.eventName !== eventName && (cbIsFunc && entry.callback !== callback || !cbIsFunc));
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "5.4.5-beta.0",
+  "version": "5.4.5-beta.2",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "type": "module",
   "repository": {