Rename style “registry” → “cache”

acusti · Sep 2, 2024 · da19135 · da19135
1 parent e8c5c05
commit da19135
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/packages/styling/src/useStyles.test.tsx b/packages/styling/src/useStyles.test.tsx
@@ -4,20 +4,20 @@ import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import Style from './Style.js';
-import { getStyleRegistry } from './useStyles.js';
+import { getStyleCache } from './useStyles.js';
 
 describe('@acusti/styling', () => {
     describe('useStyles.ts', () => {
         const mockStylesA = '.test-a {\n  color: cyan;\n}';
         const mockStylesB = '.test-b {\n  padding: 10px;\n}';
 
-        // reset styleRegistry before each test
+        // reset styleCache before each test
         beforeEach(() => {
-            getStyleRegistry().clear();
+            getStyleCache().clear();
         });
 
         it('should cache minified styles in the registry keyed by the style string', () => {
-            const styleRegistry = getStyleRegistry();
+            const styleCache = getStyleCache();
 
             const { rerender } = render(
                 <React.Fragment>
@@ -26,38 +26,38 @@ describe('@acusti/styling', () => {
                 </React.Fragment>,
             );
 
-            let stylesItemA = styleRegistry.get(mockStylesA);
+            let stylesItemA = styleCache.get(mockStylesA);
             expect(stylesItemA?.referenceCount).toBe(2);
             expect(stylesItemA?.styles).toBe('.test-a{color:cyan}');
-            expect(styleRegistry.size).toBe(1);
+            expect(styleCache.size).toBe(1);
 
             rerender(<Style>{mockStylesA}</Style>);
             expect(stylesItemA?.referenceCount).toBe(1);
-            expect(stylesItemA).toBe(styleRegistry.get(mockStylesA));
-            expect(styleRegistry.size).toBe(1);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            expect(styleCache.size).toBe(1);
 
             rerender(<Style>{mockStylesB}</Style>);
-            stylesItemA = styleRegistry.get(mockStylesA);
+            stylesItemA = styleCache.get(mockStylesA);
             expect(stylesItemA).toBe(undefined);
-            let stylesItemB = styleRegistry.get(mockStylesB);
+            let stylesItemB = styleCache.get(mockStylesB);
             expect(stylesItemB?.referenceCount).toBe(1);
-            expect(styleRegistry.size).toBe(1);
+            expect(styleCache.size).toBe(1);
 
             rerender(
                 <React.Fragment>
                     <Style>{mockStylesA}</Style>
                     <Style>{mockStylesB}</Style>
                 </React.Fragment>,
             );
-            stylesItemA = styleRegistry.get(mockStylesA);
+            stylesItemA = styleCache.get(mockStylesA);
             expect(stylesItemA?.referenceCount).toBe(1);
-            expect(stylesItemA).toBe(styleRegistry.get(mockStylesA));
-            stylesItemB = styleRegistry.get(mockStylesB);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            stylesItemB = styleCache.get(mockStylesB);
             expect(stylesItemB?.referenceCount).toBe(1);
-            expect(styleRegistry.size).toBe(2);
+            expect(styleCache.size).toBe(2);
 
             rerender(<div />);
-            expect(styleRegistry.size).toBe(0);
+            expect(styleCache.size).toBe(0);
         });
 
         it('should sanitize styles used as href prop if no href prop provided', () => {

diff --git a/packages/styling/src/useStyles.ts b/packages/styling/src/useStyles.ts
@@ -2,21 +2,21 @@ import { useEffect, useState } from 'react';
 
 import { minifyStyles } from './minifyStyles.js';
 
-type StyleRegistry = Map<
+type StyleCache = Map<
     string,
     { href: string; referenceCount: number; styles: string }
 >;
 
-const styleRegistry: StyleRegistry = new Map();
+const styleCache: StyleCache = new Map();
 
-export const getStyleRegistry = () => styleRegistry;
+export const getStyleCache = () => styleCache;
 
 export function useStyles(styles: string, initialHref?: string) {
     const [stylesItem, setStylesItem] = useState(() => {
         if (!styles) return { href: '', referenceCount: 0, styles: '' };
 
         const key = initialHref ?? styles;
-        let item = styleRegistry.get(key);
+        let item = styleCache.get(key);
 
         if (item) {
             item.referenceCount++;
@@ -27,7 +27,7 @@ export function useStyles(styles: string, initialHref?: string) {
                 referenceCount: 1,
                 styles: minified,
             };
-            styleRegistry.set(key, item);
+            styleCache.set(key, item);
         }
 
         return item;
@@ -38,27 +38,27 @@ export function useStyles(styles: string, initialHref?: string) {
 
         const key = initialHref ?? styles;
 
-        if (!styleRegistry.get(key)) {
+        if (!styleCache.get(key)) {
             const minified = minifyStyles(styles);
             const item = {
                 href: sanitizeHref(initialHref ?? minified),
                 referenceCount: 1,
                 styles: minified,
             };
-            styleRegistry.set(key, item);
+            styleCache.set(key, item);
             setStylesItem(item);
         }
 
         return () => {
-            const existingItem = styleRegistry.get(styles);
+            const existingItem = styleCache.get(styles);
             if (existingItem) {
                 existingItem.referenceCount--;
                 if (!existingItem.referenceCount) {
                     // TODO try scheduling this via setTimeout
                     // and add another referenceCount check
                     // to deal with instance where existing <Style>
                     // component is moved in the tree or re-keyed
-                    styleRegistry.delete(styles);
+                    styleCache.delete(styles);
                 }
             }
         };