simplestyle-js 5.4.4 → 5.4.5-beta.1

package/dist/cjs/next/SimpleStyleProvider.cjs

@@ -9,12 +9,26 @@ Object.defineProperty(exports, "SimpleStyleProvider", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
 const _ClientBoundary = require("./ClientBoundary.cjs");
 function SimpleStyleProvider({ 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: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_ClientBoundary.ClientBoundary, {
-                rules: registry.getRulesById()
+                rules: rules
             }),
             children
         ]

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

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
 /**
  * Accumulates all CSS rules and writes
@@ -8,4 +8,4 @@ import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
  */
 export declare function SimpleStyleProvider({ children, registry, }: PropsWithChildren & {
     registry: SimpleStyleRegistry;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;

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/next/SimpleStyleProvider.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
 /**
  * Accumulates all CSS rules and writes
@@ -8,4 +8,4 @@ import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
  */
 export declare function SimpleStyleProvider({ children, registry, }: PropsWithChildren & {
     registry: SimpleStyleRegistry;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/next/SimpleStyleProvider.mjs

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { ClientBoundary } from './ClientBoundary.mjs';
 /**
  * Accumulates all CSS rules and writes
@@ -6,10 +7,23 @@ 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 }) {
+    /** 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: [
             /*#__PURE__*/ _jsx(ClientBoundary, {
-                rules: registry.getRulesById()
+                rules: rules
             }),
             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.4",
+  "version": "5.4.5-beta.1",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "type": "module",
   "repository": {