@acusti/styling 0.7.0 → 0.7.2

package/dist/Style.js.flow

@@ -9,5 +9,5 @@ import * as React from "react";
 declare type Props = {|
   children: string,
 |};
-declare var Style: (x: Props) => React.JSX.Element | null;
+declare var Style: (x: Props) => React.Node | null;
 declare export default typeof Style;

package/dist/style-registry.d.ts

@@ -14,4 +14,6 @@ type UpdatePayload = {
     styles: string;
 };
 export declare const updateStyles: ({ ownerDocument, previousStyles, styles, }: UpdatePayload) => void;
+export declare const getStyleRegistryKeys: () => IterableIterator<string>;
+export declare const clearRegistry: () => void;
 export {};

package/dist/style-registry.js

@@ -8,6 +8,8 @@ export const getRegisteredStyles = ({ ownerDocument, styles }) => {
         return null;
     return (_a = stylesMap.get(ownerDocument)) !== null && _a !== void 0 ? _a : null;
 };
+// NOTE a more idiomatic API than (register|unregister)Styles would be
+// to make registerStyles a thunk that returns a cleanup function
 export const registerStyles = ({ ownerDocument, styles }) => {
     if (!styles)
         return;
@@ -17,7 +19,15 @@ export const registerStyles = ({ ownerDocument, styles }) => {
         return;
     }
     if (ownerDocument === 'global') {
-        styleRegistry.set(styles, new Map([[ownerDocument, { element: null, referenceCount: 1 }]]));
+        const stylesItem = { element: null, referenceCount: 1 };
+        let stylesMap = styleRegistry.get(styles);
+        if (stylesMap) {
+            stylesMap.set(ownerDocument, stylesItem);
+        }
+        else {
+            stylesMap = new Map([[ownerDocument, stylesItem]]);
+        }
+        styleRegistry.set(styles, stylesMap);
         return;
     }
     const element = ownerDocument.createElement('style');
@@ -77,4 +87,8 @@ export const updateStyles = ({ ownerDocument, previousStyles, styles, }) => {
     }
     registerStyles({ ownerDocument, styles });
 };
+export const getStyleRegistryKeys = () => styleRegistry.keys();
+export const clearRegistry = () => {
+    styleRegistry.clear();
+};
 //# sourceMappingURL=style-registry.js.map

package/dist/style-registry.js.flow

@@ -21,3 +21,5 @@ declare type UpdatePayload = {|
   styles: string,
 |};
 declare export var updateStyles: (x: UpdatePayload) => void;
+declare export var getStyleRegistryKeys: () => IterableIterator<string>;
+declare export var clearRegistry: () => void;

package/dist/style-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-registry.js","sourceRoot":"","sources":["../src/style-registry.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"style-registry.js","sourceRoot":"","sources":["../src/style-registry.ts"],"names":[],"mappings":"AAKA,MAAM,aAAa,GAAkB,IAAI,GAAG,EAAE,CAAC;AAI/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAW,EAAE,EAAE;;IACtE,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzB,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAC5B,OAAO,MAAA,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,mCAAI,IAAI,CAAC;AAChD,CAAC,CAAC;AAEF,sEAAsE;AACtE,iEAAiE;AACjE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAW,EAAE,EAAE;IACjE,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1E,IAAI,kBAAkB,EAAE,CAAC;QACrB,kBAAkB,CAAC,cAAc,EAAE,CAAC;QACpC,OAAO;IACX,CAAC;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;QAC7B,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC;QACxD,IAAI,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC1C,IAAI,SAAS,EAAE,CAAC;YACZ,SAAS,CAAC,GAAG,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACJ,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;QACvD,CAAC;QACD,aAAa,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACrC,OAAO;IACX,CAAC;IAED,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC;IAElD,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE,CAAC;QACZ,SAAS,CAAC,GAAG,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QACzC,OAAO;IACX,CAAC;IAED,aAAa,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAW,EAAE,EAAE;IACnE,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,MAAM,UAAU,GAAG,mBAAmB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAClE,IAAI,CAAC,UAAU;QAAE,OAAO;IAExB,UAAU,CAAC,cAAc,EAAE,CAAC;IAC5B,IAAI,UAAU,CAAC,cAAc;QAAE,OAAO;IAEtC,8FAA8F;IAC9F,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,MAAM,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;QAC7C,IAAI,aAAa,EAAE,CAAC;YAChB,aAAa,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAClD,CAAC;IACL,CAAC;IAED,+BAA+B;IAC/B,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAE,CAAC;IAC7C,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAEhC,IAAI,SAAS,CAAC,IAAI;QAAE,OAAO;IAC3B,4EAA4E;IAC5E,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACjC,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,aAAa,EACb,cAAc,EACd,MAAM,GACM,EAAE,EAAE;IAChB,IAAI,cAAc,KAAK,MAAM;QAAE,OAAO;IAEtC,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IACjD,IAAI,SAAS,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAA,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,cAAc,MAAK,CAAC,EAAE,CAAC;QACvE,sDAAsD;QACtD,UAAU,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC;QACtC,aAAa,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,6BAA6B;QAC7B,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QAChC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YAClB,aAAa,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACzC,CAAC;QACD,OAAO;IACX,CAAC;IAED,IAAI,cAAc,EAAE,CAAC;QACjB,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,cAAc,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;AAE/D,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,aAAa,CAAC,KAAK,EAAE,CAAC;AAC1B,CAAC,CAAC"}

package/dist/style-registry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/style-registry.test.js

@@ -0,0 +1,114 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from 'vitest';
+import { clearRegistry, getRegisteredStyles, getStyleRegistryKeys, registerStyles, unregisterStyles, updateStyles, } from './style-registry.js';
+describe('@acusti/styling', () => {
+    describe('style-registry.ts', () => {
+        const mockStyles = '.test { color: red; }';
+        // reset styleRegistry before each test
+        beforeEach(clearRegistry);
+        describe('registerStyles', () => {
+            it('should add styles to the registry keyed by the style string', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                registerStyles(payload);
+                const styleRegistryKeys = getStyleRegistryKeys();
+                const keysArray = [...styleRegistryKeys];
+                expect(keysArray.length).toBe(1);
+                expect(keysArray[0]).toBe(mockStyles);
+                const result = getRegisteredStyles(payload);
+                expect(result.element).toBeDefined();
+                expect(result.referenceCount).toBe(1);
+            });
+            it('should allow registering styles without a DOM via ownerDocument: "global"', () => {
+                const payload = Object.freeze({
+                    ownerDocument: 'global',
+                    styles: mockStyles,
+                });
+                registerStyles(payload);
+                const registryKeys = [...getStyleRegistryKeys()];
+                expect(registryKeys.length).toBe(1);
+                expect(registryKeys[0]).toBe(mockStyles);
+                const result = getRegisteredStyles(payload);
+                expect(result.element).toBeNull();
+                expect(result.referenceCount).toBe(1);
+            });
+        });
+        describe('getRegisteredStyles', () => {
+            it('should retrieve registered styles', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                registerStyles(payload);
+                const result = getRegisteredStyles(payload);
+                expect(result.element.tagName).toBe('STYLE');
+                expect(result.referenceCount).toBe(1);
+            });
+        });
+        describe('unregisterStyles', () => {
+            it('should remove styles from the registry if no other references to same styles exist', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                const otherPayload = Object.freeze({
+                    ownerDocument: 'global',
+                    styles: mockStyles,
+                });
+                registerStyles(payload);
+                registerStyles(otherPayload);
+                expect(getStyleRegistryKeys().next().value).toBe(mockStyles);
+                expect(getRegisteredStyles(payload).referenceCount).toBe(1);
+                expect(getRegisteredStyles(otherPayload).referenceCount).toBe(1);
+                unregisterStyles(payload);
+                // style registry for this style should still exist
+                expect(getStyleRegistryKeys().next().value).toBe(mockStyles);
+                // but this document’s styles item should be cleared
+                expect(getRegisteredStyles(payload)).toBeNull();
+                unregisterStyles(otherPayload);
+                // now the style registry should be empty
+                expect([...getStyleRegistryKeys()].length).toBe(0);
+            });
+        });
+        describe('updateStyles', () => {
+            it('should update styles in the registry, reusing the existing DOM element if no other reference', () => {
+                const previousStyles = '.previous { color: blue; }';
+                const payload = {
+                    ownerDocument: document,
+                    styles: previousStyles,
+                };
+                registerStyles(payload);
+                const previousStylesItem = getRegisteredStyles(payload);
+                expect(previousStylesItem.element.innerText).toBe(previousStyles);
+                updateStyles({
+                    ownerDocument: document,
+                    previousStyles,
+                    styles: mockStyles,
+                });
+                const stylesItem = getRegisteredStyles({
+                    ownerDocument: document,
+                    styles: mockStyles,
+                });
+                expect(previousStylesItem.element).toBe(stylesItem.element);
+                expect(stylesItem.element.innerText).toBe(mockStyles);
+                expect(getRegisteredStyles(payload)).toBeNull();
+            });
+            it('should update styles in the registry, creating a new DOM element if there are other references', () => {
+                const previousStyles = '.previous { color: blue; }';
+                const payload = { ownerDocument: document, styles: previousStyles };
+                registerStyles(payload);
+                // create multiple references to the same styles and document
+                registerStyles(payload);
+                const previousStylesItem = getRegisteredStyles(payload);
+                expect(previousStylesItem.referenceCount).toBe(2);
+                expect(previousStylesItem.element.innerText).toBe(previousStyles);
+                updateStyles({
+                    ownerDocument: document,
+                    previousStyles,
+                    styles: mockStyles,
+                });
+                const stylesItem = getRegisteredStyles({
+                    ownerDocument: document,
+                    styles: mockStyles,
+                });
+                expect(previousStylesItem.element).not.toBe(stylesItem.element);
+                expect(stylesItem.element.innerText).toBe(mockStyles);
+                expect(getRegisteredStyles(payload).referenceCount).toBe(1);
+            });
+        });
+    });
+});
+//# sourceMappingURL=style-registry.test.js.map

package/dist/style-registry.test.js.flow

@@ -0,0 +1,6 @@
+/**
+ * Flowtype definitions for style-registry.test
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */

package/dist/style-registry.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-registry.test.js","sourceRoot":"","sources":["../src/style-registry.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,15 @@
 {
     "name": "@acusti/styling",
-    "version": "0.7.0",
+    "version": "0.7.2",
+    "type": "module",
+    "sideEffects": false,
+    "exports": "./dist/index.js",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
     "description": "React component that renders a CSS style string as a <style> element in the <head> of the document (with global style de-duplication)",
     "keywords": [
         "react",
@@ -13,15 +22,9 @@
         "ts",
         "flow"
     ],
-    "type": "module",
-    "sideEffects": false,
-    "exports": "./dist/index.js",
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "files": [
-        "dist",
-        "src"
-    ],
+    "scripts": {
+        "test": "vitest"
+    },
     "repository": {
         "type": "git",
         "url": "https://github.com/acusti/uikit.git",
@@ -34,7 +37,13 @@
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
     "devDependencies": {
+        "@testing-library/dom": "^9.3.1",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/react": "^18.2.45",
+        "happy-dom": "^12.10.3",
+        "react": "^18",
+        "react-dom": "^18",
         "typescript": "^5.3.3",
         "vitest": "^1.1.0"
     },

package/src/style-registry.test.ts

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import {
+    clearRegistry,
+    getRegisteredStyles,
+    getStyleRegistryKeys,
+    registerStyles,
+    unregisterStyles,
+    updateStyles,
+} from './style-registry.js';
+
+describe('@acusti/styling', () => {
+    describe('style-registry.ts', () => {
+        const mockStyles = '.test { color: red; }';
+
+        // reset styleRegistry before each test
+        beforeEach(clearRegistry);
+
+        describe('registerStyles', () => {
+            it('should add styles to the registry keyed by the style string', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                registerStyles(payload);
+                const styleRegistryKeys = getStyleRegistryKeys();
+                const keysArray = [...styleRegistryKeys];
+                expect(keysArray.length).toBe(1);
+                expect(keysArray[0]).toBe(mockStyles);
+                const result = getRegisteredStyles(payload);
+                expect(result!.element).toBeDefined();
+                expect(result!.referenceCount).toBe(1);
+            });
+
+            it('should allow registering styles without a DOM via ownerDocument: "global"', () => {
+                const payload = Object.freeze({
+                    ownerDocument: 'global',
+                    styles: mockStyles,
+                });
+                registerStyles(payload);
+                const registryKeys = [...getStyleRegistryKeys()];
+                expect(registryKeys.length).toBe(1);
+                expect(registryKeys[0]).toBe(mockStyles);
+                const result = getRegisteredStyles(payload);
+                expect(result!.element).toBeNull();
+                expect(result!.referenceCount).toBe(1);
+            });
+        });
+
+        describe('getRegisteredStyles', () => {
+            it('should retrieve registered styles', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                registerStyles(payload);
+                const result = getRegisteredStyles(payload);
+                expect(result!.element!.tagName).toBe('STYLE');
+                expect(result!.referenceCount).toBe(1);
+            });
+        });
+
+        describe('unregisterStyles', () => {
+            it('should remove styles from the registry if no other references to same styles exist', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                const otherPayload = Object.freeze({
+                    ownerDocument: 'global',
+                    styles: mockStyles,
+                });
+                registerStyles(payload);
+                registerStyles(otherPayload);
+                expect(getStyleRegistryKeys().next().value).toBe(mockStyles);
+                expect(getRegisteredStyles(payload)!.referenceCount).toBe(1);
+                expect(getRegisteredStyles(otherPayload)!.referenceCount).toBe(1);
+                unregisterStyles(payload);
+                // style registry for this style should still exist
+                expect(getStyleRegistryKeys().next().value).toBe(mockStyles);
+                // but this document’s styles item should be cleared
+                expect(getRegisteredStyles(payload)).toBeNull();
+                unregisterStyles(otherPayload);
+                // now the style registry should be empty
+                expect([...getStyleRegistryKeys()].length).toBe(0);
+            });
+        });
+
+        describe('updateStyles', () => {
+            it('should update styles in the registry, reusing the existing DOM element if no other reference', () => {
+                const previousStyles = '.previous { color: blue; }';
+                const payload = {
+                    ownerDocument: document,
+                    styles: previousStyles,
+                };
+                registerStyles(payload);
+                const previousStylesItem = getRegisteredStyles(payload)!;
+                expect(previousStylesItem.element!.innerText).toBe(previousStyles);
+                updateStyles({
+                    ownerDocument: document,
+                    previousStyles,
+                    styles: mockStyles,
+                });
+                const stylesItem = getRegisteredStyles({
+                    ownerDocument: document,
+                    styles: mockStyles,
+                })!;
+                expect(previousStylesItem.element).toBe(stylesItem.element);
+                expect(stylesItem.element!.innerText).toBe(mockStyles);
+                expect(getRegisteredStyles(payload)).toBeNull();
+            });
+
+            it('should update styles in the registry, creating a new DOM element if there are other references', () => {
+                const previousStyles = '.previous { color: blue; }';
+                const payload = { ownerDocument: document, styles: previousStyles };
+                registerStyles(payload);
+                // create multiple references to the same styles and document
+                registerStyles(payload);
+                const previousStylesItem = getRegisteredStyles(payload)!;
+                expect(previousStylesItem.referenceCount).toBe(2);
+                expect(previousStylesItem.element!.innerText).toBe(previousStyles);
+                updateStyles({
+                    ownerDocument: document,
+                    previousStyles,
+                    styles: mockStyles,
+                });
+                const stylesItem = getRegisteredStyles({
+                    ownerDocument: document,
+                    styles: mockStyles,
+                })!;
+                expect(previousStylesItem.element).not.toBe(stylesItem.element);
+                expect(stylesItem.element!.innerText).toBe(mockStyles);
+                expect(getRegisteredStyles(payload)!.referenceCount).toBe(1);
+            });
+        });
+    });
+});

package/src/style-registry.ts

@@ -14,6 +14,8 @@ export const getRegisteredStyles = ({ ownerDocument, styles }: Payload) => {
     return stylesMap.get(ownerDocument) ?? null;
 };
 
+// NOTE a more idiomatic API than (register|unregister)Styles would be
+// to make registerStyles a thunk that returns a cleanup function
 export const registerStyles = ({ ownerDocument, styles }: Payload) => {
     if (!styles) return;
 
@@ -24,10 +26,14 @@ export const registerStyles = ({ ownerDocument, styles }: Payload) => {
     }
 
     if (ownerDocument === 'global') {
-        styleRegistry.set(
-            styles,
-            new Map([[ownerDocument, { element: null, referenceCount: 1 }]]),
-        );
+        const stylesItem = { element: null, referenceCount: 1 };
+        let stylesMap = styleRegistry.get(styles);
+        if (stylesMap) {
+            stylesMap.set(ownerDocument, stylesItem);
+        } else {
+            stylesMap = new Map([[ownerDocument, stylesItem]]);
+        }
+        styleRegistry.set(styles, stylesMap);
         return;
     }
 
@@ -101,3 +107,9 @@ export const updateStyles = ({
 
     registerStyles({ ownerDocument, styles });
 };
+
+export const getStyleRegistryKeys = () => styleRegistry.keys();
+
+export const clearRegistry = () => {
+    styleRegistry.clear();
+};