@acusti/styling 0.7.2 → 1.0.0-rc.0

package/src/style-registry.test.ts

@@ -1,129 +0,0 @@
-// @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

@@ -1,115 +0,0 @@
-type StyleRegistry = Map<
-    string,
-    Map<Document | 'global', { element: HTMLStyleElement | null; referenceCount: number }>
->;
-
-const styleRegistry: StyleRegistry = new Map();
-
-type Payload = { ownerDocument: Document | 'global'; styles: string };
-
-export const getRegisteredStyles = ({ ownerDocument, styles }: Payload) => {
-    if (!styles) return null;
-    const stylesMap = styleRegistry.get(styles);
-    if (!stylesMap) return null;
-    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;
-
-    const existingStylesItem = getRegisteredStyles({ ownerDocument, styles });
-    if (existingStylesItem) {
-        existingStylesItem.referenceCount++;
-        return;
-    }
-
-    if (ownerDocument === 'global') {
-        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');
-    element.setAttribute('data-ukt-styling', '');
-    element.innerHTML = styles;
-    ownerDocument.head.appendChild(element);
-    const stylesItem = { element, referenceCount: 1 };
-
-    const stylesMap = styleRegistry.get(styles);
-    if (stylesMap) {
-        stylesMap.set(ownerDocument, stylesItem);
-        return;
-    }
-
-    styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
-};
-
-export const unregisterStyles = ({ ownerDocument, styles }: Payload) => {
-    if (!styles) return;
-
-    const stylesItem = getRegisteredStyles({ ownerDocument, styles });
-    if (!stylesItem) return;
-
-    stylesItem.referenceCount--;
-    if (stylesItem.referenceCount) return;
-
-    // If no more references to these styles in this document, remove <style> element from the DOM
-    if (stylesItem.element) {
-        const { parentElement } = stylesItem.element;
-        if (parentElement) {
-            parentElement.removeChild(stylesItem.element);
-        }
-    }
-
-    // Then remove the document Map
-    const stylesMap = styleRegistry.get(styles)!;
-    stylesMap.delete(ownerDocument);
-
-    if (stylesMap.size) return;
-    // If no more references to these styles in any document, remove it entirely
-    styleRegistry.delete(styles);
-};
-
-type UpdatePayload = { ownerDocument: Document; previousStyles: string; styles: string };
-
-export const updateStyles = ({
-    ownerDocument,
-    previousStyles,
-    styles,
-}: UpdatePayload) => {
-    if (previousStyles === styles) return;
-
-    const stylesMap = styleRegistry.get(previousStyles);
-    const stylesItem = stylesMap?.get(ownerDocument);
-    if (stylesMap && stylesItem?.element && stylesItem?.referenceCount === 1) {
-        // Mutate existing <style> element with updated styles
-        stylesItem.element.innerHTML = styles;
-        styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
-        // Cleanup previous stylesMap
-        stylesMap.delete(ownerDocument);
-        if (!stylesMap.size) {
-            styleRegistry.delete(previousStyles);
-        }
-        return;
-    }
-
-    if (previousStyles) {
-        unregisterStyles({ ownerDocument, styles: previousStyles });
-    }
-
-    registerStyles({ ownerDocument, styles });
-};
-
-export const getStyleRegistryKeys = () => styleRegistry.keys();
-
-export const clearRegistry = () => {
-    styleRegistry.clear();
-};