Rename StyleManager and StyleRegistry

packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js

@@ -43,7 +43,7 @@ const pointerEventsCss =
   `.${pointerEvents.boxNone} > *{pointer-events:auto;}\n` +
   `.${pointerEvents.boxOnly} > *{pointer-events:none;}`;
 
-export default class StyleManager {
+export default class StyleSheetManager {
   cache = null;
   mainSheet = null;
 

packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js

@@ -18,7 +18,7 @@ import I18nManager from '../I18nManager';
 import i18nStyle from './i18nStyle';
 import { prefixInlineStyles } from '../../modules/prefixStyles';
 import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
-import StyleManager from './StyleManager';
+import StyleSheetManager from './StyleSheetManager';
 
 const emptyObject = {};
 
@@ -29,12 +29,12 @@ const createCacheKey = id => {
 
 const classListToString = list => list.join(' ').trim();
 
-export default class StyleRegistry {
+export default class StyleSheetRegistry {
   cache = { ltr: {}, rtl: {} };
-  styleManager = new StyleManager();
+  styleSheetManager = new StyleSheetManager();
 
   getStyleSheets() {
-    return this.styleManager.getStyleSheets();
+    return this.styleSheetManager.getStyleSheets();
   }
 
   /**
@@ -54,7 +54,7 @@ export default class StyleRegistry {
       Object.keys(domStyle).forEach(styleProp => {
         const value = domStyle[styleProp];
         if (value != null) {
-          this.styleManager.setDeclaration(styleProp, value);
+          this.styleSheetManager.setDeclaration(styleProp, value);
         }
       });
       this.cache[dir][id] = true;
@@ -112,7 +112,7 @@ export default class StyleRegistry {
     // Preserves unrecognized class names.
     const { classList: rnClassList, style: rnStyle } = rdomClassList.reduce(
       (styleProps, className) => {
-        const { prop, value } = this.styleManager.getDeclaration(className);
+        const { prop, value } = this.styleSheetManager.getDeclaration(className);
         if (prop) {
           styleProps.style[prop] = value;
         } else {
@@ -132,7 +132,7 @@ export default class StyleRegistry {
     // Next class names take priority over current inline styles
     const style = { ...rdomStyle };
     rdomClassListNext.forEach(className => {
-      const { prop } = this.styleManager.getDeclaration(className);
+      const { prop } = this.styleSheetManager.getDeclaration(className);
       if (style[prop]) {
         style[prop] = '';
       }
@@ -158,7 +158,7 @@ export default class StyleRegistry {
       (props, styleProp) => {
         const value = domStyle[styleProp];
         if (value != null) {
-          const className = this.styleManager.getClassName(styleProp, value);
+          const className = this.styleSheetManager.getClassName(styleProp, value);
           if (className) {
             props.classList.push(className);
           } else {

packages/react-native-web/src/exports/StyleSheet/__tests__/StyleManager-test.js

@@ -1,39 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import StyleManager from '../StyleManager';
-
-let styleManager;
-
-describe('apis/StyleSheet/StyleManager', () => {
-  beforeEach(() => {
-    styleManager = new StyleManager();
-  });
-
-  test('getClassName', () => {
-    expect(styleManager.getClassName('pointerEvents', 'box-only')).toMatchSnapshot();
-    const className = styleManager.setDeclaration('width', '100px');
-    expect(styleManager.getClassName('width', '100px')).toEqual(className);
-  });
-
-  test('getDeclaration', () => {
-    const className = styleManager.setDeclaration('width', '100px');
-    expect(styleManager.getDeclaration(className)).toEqual({
-      prop: 'width',
-      value: '100px'
-    });
-  });
-
-  test('getStyleSheetHtml', () => {
-    expect(styleManager.getStyleSheetHtml()).toMatchSnapshot();
-    styleManager.setDeclaration('width', '100px');
-    expect(styleManager.getStyleSheetHtml()).toMatchSnapshot();
-  });
-
-  test('setDeclaration', () => {
-    styleManager.mainSheet.sheet.insertRule = (rule, position) => {
-      // check for regressions in CSS write path (e.g., 0 => 0px)
-      expect(rule.indexOf('-webkit-flex-shrink:0;')).not.toEqual(-1);
-    };
-    styleManager.setDeclaration('flexShrink', 0);
-  });
-});

packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetManager-test.js

@@ -0,0 +1,39 @@
+/* eslint-env jasmine, jest */
+
+import StyleSheetManager from '../StyleSheetManager';
+
+let styleSheetManager;
+
+describe('apis/StyleSheet/StyleSheetManager', () => {
+  beforeEach(() => {
+    styleSheetManager = new StyleSheetManager();
+  });
+
+  test('getClassName', () => {
+    expect(styleSheetManager.getClassName('pointerEvents', 'box-only')).toMatchSnapshot();
+    const className = styleSheetManager.setDeclaration('width', '100px');
+    expect(styleSheetManager.getClassName('width', '100px')).toEqual(className);
+  });
+
+  test('getDeclaration', () => {
+    const className = styleSheetManager.setDeclaration('width', '100px');
+    expect(styleSheetManager.getDeclaration(className)).toEqual({
+      prop: 'width',
+      value: '100px'
+    });
+  });
+
+  test('getStyleSheetHtml', () => {
+    expect(styleSheetManager.getStyleSheetHtml()).toMatchSnapshot();
+    styleSheetManager.setDeclaration('width', '100px');
+    expect(styleSheetManager.getStyleSheetHtml()).toMatchSnapshot();
+  });
+
+  test('setDeclaration', () => {
+    styleSheetManager.mainSheet.sheet.insertRule = (rule, position) => {
+      // check for regressions in CSS write path (e.g., 0 => 0px)
+      expect(rule.indexOf('-webkit-flex-shrink:0;')).not.toEqual(-1);
+    };
+    styleSheetManager.setDeclaration('flexShrink', 0);
+  });
+});

packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js

@@ -1,18 +1,18 @@
 /* eslint-env jasmine, jest */
 
 import I18nManager from '../../I18nManager';
-import StyleRegistry from '../StyleRegistry';
+import StyleSheetRegistry from '../StyleSheetRegistry';
 
-let styleRegistry;
+let styleSheetRegistry;
 
-describe('apis/StyleSheet/StyleRegistry', () => {
+describe('apis/StyleSheet/StyleSheetRegistry', () => {
   beforeEach(() => {
-    styleRegistry = new StyleRegistry();
+    styleSheetRegistry = new StyleSheetRegistry();
   });
 
   test('register', () => {
     const style = { opacity: 0 };
-    const id = styleRegistry.register(style);
+    const id = styleSheetRegistry.register(style);
     expect(typeof id === 'number').toBe(true);
   });
 
@@ -27,40 +27,40 @@ describe('apis/StyleSheet/StyleRegistry', () => {
 
     const testResolve = (a, b, c) => {
       // no common properties, different resolving order, same result
-      const resolve1 = styleRegistry.resolve([a, b]);
+      const resolve1 = styleSheetRegistry.resolve([a, b]);
       expect(resolve1).toMatchSnapshot();
-      const resolve2 = styleRegistry.resolve([b, a]);
+      const resolve2 = styleSheetRegistry.resolve([b, a]);
       expect(resolve1).toEqual(resolve2);
 
       // common properties, different resolving order, different result
-      const resolve3 = styleRegistry.resolve([a, b, c]);
+      const resolve3 = styleSheetRegistry.resolve([a, b, c]);
       expect(resolve3).toMatchSnapshot();
-      const resolve4 = styleRegistry.resolve([c, a, b]);
+      const resolve4 = styleSheetRegistry.resolve([c, a, b]);
       expect(resolve4).toMatchSnapshot();
       expect(resolve3).not.toEqual(resolve4);
     };
 
     test('with register, resolves to className', () => {
-      const a = styleRegistry.register(styleA);
-      const b = styleRegistry.register(styleB);
-      const c = styleRegistry.register(styleC);
+      const a = styleSheetRegistry.register(styleA);
+      const b = styleSheetRegistry.register(styleB);
+      const c = styleSheetRegistry.register(styleC);
       testResolve(a, b, c);
     });
 
     test('with register before RTL, resolves to className', () => {
-      const a = styleRegistry.register({ left: '12.34%' });
-      const b = styleRegistry.register({ textAlign: 'left' });
-      const c = styleRegistry.register({ marginLeft: 10 });
+      const a = styleSheetRegistry.register({ left: '12.34%' });
+      const b = styleSheetRegistry.register({ textAlign: 'left' });
+      const c = styleSheetRegistry.register({ marginLeft: 10 });
       I18nManager.forceRTL(true);
-      const resolved = styleRegistry.resolve([a, b, c]);
+      const resolved = styleSheetRegistry.resolve([a, b, c]);
       I18nManager.forceRTL(false);
       expect(resolved).toMatchSnapshot();
     });
 
     test('with register, resolves to mixed', () => {
       const a = styleA;
-      const b = styleRegistry.register(styleB);
-      const c = styleRegistry.register(styleC);
+      const b = styleSheetRegistry.register(styleB);
+      const c = styleSheetRegistry.register(styleC);
       testResolve(a, b, c);
     });
 
@@ -72,20 +72,20 @@ describe('apis/StyleSheet/StyleRegistry', () => {
   describe('resolveStateful', () => {
     test('preserves unrelated class names', () => {
       const domStyleProps = { classList: ['unknown-class-1', 'unknown-class-2'], style: {} };
-      const domStyleNextProps = styleRegistry.resolveStateful({}, domStyleProps);
+      const domStyleNextProps = styleSheetRegistry.resolveStateful({}, domStyleProps);
       expect(domStyleNextProps).toMatchSnapshot();
     });
 
     test('preserves unrelated inline styles', () => {
       const domStyleProps = { classList: [], style: { fontSize: '20px' } };
-      const domStyleNextProps = styleRegistry.resolveStateful({ opacity: 1 }, domStyleProps);
+      const domStyleNextProps = styleSheetRegistry.resolveStateful({ opacity: 1 }, domStyleProps);
       expect(domStyleNextProps).toMatchSnapshot();
     });
 
     test('next class names have priority over current inline styles', () => {
       const domStyleProps = { classList: [], style: { opacity: 0.5 } };
-      const nextStyle = styleRegistry.register({ opacity: 1 });
-      const domStyleNextProps = styleRegistry.resolveStateful(nextStyle, domStyleProps);
+      const nextStyle = styleSheetRegistry.register({ opacity: 1 });
+      const domStyleNextProps = styleSheetRegistry.resolveStateful(nextStyle, domStyleProps);
       expect(domStyleNextProps).toMatchSnapshot();
     });
 
@@ -95,7 +95,7 @@ describe('apis/StyleSheet/StyleRegistry', () => {
         classList: [],
         style: { opacity: 0.5, WebkitTransform: 'scale(1)', transform: 'scale(1)' }
       };
-      const domStyleNextProps = styleRegistry.resolveStateful(
+      const domStyleNextProps = styleSheetRegistry.resolveStateful(
         { opacity: 1, transform: [{ scale: 2 }] },
         domStyleProps
       );

packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`apis/StyleSheet/StyleManager getClassName 1`] = `"rn-pointerEvents-ah5dr5"`;
+exports[`apis/StyleSheet/StyleSheetManager getClassName 1`] = `"rn-pointerEvents-ah5dr5"`;
 
-exports[`apis/StyleSheet/StyleManager getStyleSheetHtml 1`] = `
+exports[`apis/StyleSheet/StyleSheetManager getStyleSheetHtml 1`] = `
 "<style id=\\"react-native-stylesheet-static\\">
 html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 body{margin:0;}
@@ -22,7 +22,7 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
 </style>"
 `;
 
-exports[`apis/StyleSheet/StyleManager getStyleSheetHtml 2`] = `
+exports[`apis/StyleSheet/StyleSheetManager getStyleSheetHtml 2`] = `
 "<style id=\\"react-native-stylesheet-static\\">
 html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 body{margin:0;}

packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetRegistry-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`apis/StyleSheet/StyleRegistry resolve with register before RTL, resolves to className 1`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve with register before RTL, resolves to className 1`] = `
 Object {
   "classList": Array [
     "rn-marginRight-zso239",
@@ -11,7 +11,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 1`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to className 1`] = `
 Object {
   "classList": Array [
     "rn-borderTopColor-1gxhl28",
@@ -31,7 +31,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 2`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to className 2`] = `
 Object {
   "classList": Array [
     "rn-borderTopColor-1gxhl28",
@@ -51,7 +51,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 3`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to className 3`] = `
 Object {
   "classList": Array [
     "rn-borderTopColor-1gxhl28",
@@ -71,7 +71,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 1`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to mixed 1`] = `
 Object {
   "classList": Array [
     "rn-left-1tsx3h3",
@@ -93,7 +93,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 2`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to mixed 2`] = `
 Object {
   "classList": Array [
     "rn-left-1tsx3h3",
@@ -115,7 +115,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 3`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to mixed 3`] = `
 Object {
   "classList": Array [
     "rn-left-1tsx3h3",
@@ -137,7 +137,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 1`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve without register, resolves to inline styles 1`] = `
 Object {
   "classList": Array [
     "rn-pointerEvents-ah5dr5",
@@ -159,7 +159,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 2`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve without register, resolves to inline styles 2`] = `
 Object {
   "classList": Array [
     "rn-pointerEvents-ah5dr5",
@@ -181,7 +181,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 3`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolve without register, resolves to inline styles 3`] = `
 Object {
   "classList": Array [
     "rn-pointerEvents-ah5dr5",
@@ -203,7 +203,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolveStateful next class names have priority over current inline styles 1`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolveStateful next class names have priority over current inline styles 1`] = `
 Object {
   "className": "rn-opacity-6dt33c",
   "style": Object {
@@ -212,7 +212,7 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolveStateful next inline styles have priority over current inline styles 1`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolveStateful next inline styles have priority over current inline styles 1`] = `
 Object {
   "className": "",
   "style": Object {
@@ -223,14 +223,14 @@ Object {
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolveStateful preserves unrelated class names 1`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolveStateful preserves unrelated class names 1`] = `
 Object {
   "className": "unknown-class-1 unknown-class-2",
   "style": Object {},
 }
 `;
 
-exports[`apis/StyleSheet/StyleRegistry resolveStateful preserves unrelated inline styles 1`] = `
+exports[`apis/StyleSheet/StyleSheetRegistry resolveStateful preserves unrelated inline styles 1`] = `
 Object {
   "className": "",
   "style": Object {

packages/react-native-web/src/exports/StyleSheet/index.js

@@ -12,7 +12,7 @@
 import flattenStyle from './flattenStyle';
 import getHairlineWidth from './getHairlineWidth';
 import modality from '../../modules/modality';
-import StyleRegistry from './registry';
+import StyleSheetRegistry from './registry';
 
 // initialize focus-ring fix
 modality();
@@ -32,7 +32,7 @@ const absoluteFillObject = {
   top: 0,
   bottom: 0
 };
-const absoluteFill = StyleRegistry.register(absoluteFillObject);
+const absoluteFill = StyleSheetRegistry.register(absoluteFillObject);
 
 const StyleSheet = {
   absoluteFill,
@@ -51,13 +51,13 @@ const StyleSheet = {
         const StyleSheetValidation = require('./StyleSheetValidation').default;
         StyleSheetValidation.validateStyle(key, styles);
       }
-      result[key] = StyleRegistry.register(styles[key]);
+      result[key] = StyleSheetRegistry.register(styles[key]);
     });
     return result;
   },
   flatten: flattenStyle,
   getStyleSheets() {
-    return StyleRegistry.getStyleSheets();
+    return StyleSheetRegistry.getStyleSheets();
   },
   hairlineWidth: getHairlineWidth()
 };

packages/react-native-web/src/exports/StyleSheet/registry.js

@@ -8,6 +8,6 @@
  * @flow
  */
 
-import StyleRegistry from './StyleRegistry';
-const registry = new StyleRegistry();
+import StyleSheetRegistry from './StyleSheetRegistry';
+const registry = new StyleSheetRegistry();
 export default registry;

packages/react-native-web/src/modules/NativeMethodsMixin/index.js

@@ -13,7 +13,7 @@
 import createDOMProps from '../createDOMProps';
 import findNodeHandle from '../../exports/findNodeHandle';
 import i18nStyle from '../../exports/StyleSheet/i18nStyle';
-import StyleRegistry from '../../exports/StyleSheet/registry';
+import styleSheetRegistry from '../../exports/StyleSheet/registry';
 import UIManager from '../../exports/UIManager';
 
 const hyphenPattern = /-([a-z])/g;
@@ -129,7 +129,7 @@ const NativeMethodsMixin = {
     };
     // Next DOM state
     const domProps = createDOMProps(null, props, style =>
-      StyleRegistry.resolveStateful(style, domStyleProps, { i18n: false })
+      styleSheetRegistry.resolveStateful(style, domStyleProps, { i18n: false })
     );
     UIManager.updateView(node, domProps, this);
   }

packages/react-native-web/src/modules/createDOMProps/index.js

@@ -10,7 +10,7 @@
 
 import AccessibilityUtil from '../AccessibilityUtil';
 import StyleSheet from '../../exports/StyleSheet';
-import StyleRegistry from '../../exports/StyleSheet/registry';
+import StyleSheetRegistry from '../../exports/StyleSheet/registry';
 
 const emptyObject = {};
 
@@ -53,7 +53,7 @@ const pointerEventsStyles = StyleSheet.create({
   }
 });
 
-const defaultStyleResolver = style => StyleRegistry.resolve(style);
+const defaultStyleResolver = style => StyleSheetRegistry.resolve(style);
 
 const createDOMProps = (component, props, styleResolver) => {
   if (!styleResolver) {