[react-jss] Hooks (#1089)

* Revert "Revert "Add dynamic rules to static sheet"" This reverts commit 1e35967 * Fix adding dynamic rules to sheet * Fix a few tests * Fix tests * Format code * Add comments * Update changelog * Update size-snapshot * Initial draft * Add missing dependency * Fix some type issues * Rename hook folder to create-use-styles and hoc to with-styles * Unify some files * Fix imports * Fix some flow issues * Update size snapshots * Fix some eslint problems * Update packages/react-jss/src/create-use-styles.js Co-Authored-By: HenriBeck <[email protected]> * Update file names and default exports * Use type instead of interface * Fix linting * Fixed PR comments * Update size snapshots * fix linter, make all file names camel cased * Use state instead of relying on memo * Use is-in-browser package * Fix some type issues and add support for recreating the sheet when the theme changes * upgrade theming * add sheet to the registry when managing sheets, pass a theme when using one * Fixed all tests * Fix linting etc. * Use MIN_SAFE_INTEGER * remove the need for extra eslit rules * Add tests for hooks and fix some issue * Remove check for disableStylesGeneration * more explicit name for the hook * port class name prefix test * reuse tests between hooks and hocs * make dynamicStyles tests use hooks * generate dynamic styles test using HOC * migrate all dynamic styles tests to use createStyledComponent * refactor theming tests * Rewrite to useReducer * Fix JssProvider * port theming tests for hooks * move reducer to the module scope, since it doesn't need to be recreated * reset module Id * rename shallow-equal, add a note * hooks docs * better description * better wording * fix link
cssinjs · Jun 7, 2019 · b946dde · b946dde
1 parent ab8675a
commit b946dde
Show file tree

Hide file tree

Showing 35 changed files with 2,187 additions and 904 deletions.
diff --git a/docs/react-jss-hoc.md b/docs/react-jss-hoc.md
diff --git a/docs/react-jss.md b/docs/react-jss.md
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "eslint-config-jss": "^5.0.1",
     "eslint-config-prettier": "^2.9.0",
     "expect.js": "^0.3.1",
-    "flow-bin": "^0.83.0",
+    "flow-bin": "^0.94.0",
     "json-loader": "^0.5.4",
     "karma": "^1.3.0",
     "karma-benchmark": "^0.6.0",
@@ -87,8 +87,8 @@
     "pre-commit": "^1.1.3",
     "prettier": "^1.13.5",
     "raf": "^3.4.0",
-    "react": "^16.4.1",
-    "react-test-renderer": "^16.7.0",
+    "react": "^16.8.6",
+    "react-test-renderer": "^16.8.6",
     "rimraf": "^2.5.4",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.3.2",

diff --git a/packages/jss/.size-snapshot.json b/packages/jss/.size-snapshot.json
@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 59273,
-    "minified": 22057,
-    "gzipped": 6633
+    "bundled": 59266,
+    "minified": 22060,
+    "gzipped": 6635
   },
   "dist/jss.min.js": {
-    "bundled": 57866,
-    "minified": 21259,
-    "gzipped": 6269
+    "bundled": 57859,
+    "minified": 21262,
+    "gzipped": 6272
   },
   "dist/jss.cjs.js": {
-    "bundled": 54344,
-    "minified": 23853,
-    "gzipped": 6655
+    "bundled": 54337,
+    "minified": 23861,
+    "gzipped": 6658
   },
   "dist/jss.esm.js": {
-    "bundled": 53828,
-    "minified": 23429,
-    "gzipped": 6566,
+    "bundled": 53821,
+    "minified": 23437,
+    "gzipped": 6569,
     "treeshaked": {
       "rollup": {
-        "code": 19318,
+        "code": 19321,
         "import_statements": 281
       },
       "webpack": {
-        "code": 20740
+        "code": 20743
       }
     }
   }

diff --git a/packages/jss/src/PluginsRegistry.js b/packages/jss/src/PluginsRegistry.js
@@ -59,7 +59,6 @@ export default class PluginsRegistry {
       this.registry.onProcessRule[i](rule, sheet)
     }
 
-    // $FlowFixMe
     if (rule.style) this.onProcessStyle(rule.style, rule, sheet)
 
     rule.isProcessed = true

diff --git a/packages/jss/tests/unit/createGenerateId.js b/packages/jss/tests/unit/createGenerateId.js
@@ -2,7 +2,7 @@
 
 import expect from 'expect.js'
 import {createGenerateId} from '../../src'
-import {resetSheets} from '../../../../tests/utils'
+import {resetSheets, resetModuleId} from '../../../../tests/utils'
 
 const sheetMock = {
   options: {
@@ -12,20 +12,23 @@ const sheetMock = {
 }
 
 describe('Unit: jss - createGenerateId', () => {
-  beforeEach(resetSheets())
+  beforeEach(() => {
+    resetSheets()
+    resetModuleId()
+  })
 
   it('should return a function', () => {
     expect(createGenerateId()).to.be.a(Function)
   })
 
   it('should generate a non-production class name', () => {
     const generate = createGenerateId()
-    expect(generate({key: 'a'})).to.be('a-14-1')
+    expect(generate({key: 'a'})).to.be('a-0-1')
   })
 
   it('should add prefix a non-production class name', () => {
     const generate = createGenerateId()
-    expect(generate({key: 'a'}, sheetMock)).to.be('pa-14-0-1')
+    expect(generate({key: 'a'}, sheetMock)).to.be('pa-0-0-1')
   })
 
   it.skip('should increment jss lib version', () => {
@@ -35,11 +38,11 @@ describe('Unit: jss - createGenerateId', () => {
 
   it('should generate a minified class name', () => {
     const generate = createGenerateId({minify: true})
-    expect(generate()).to.be('c141')
+    expect(generate()).to.be('c01')
   })
 
   it('should add prefix a minified class name', () => {
     const generate = createGenerateId({minify: true})
-    expect(generate({key: 'a'}, sheetMock)).to.be('p1401')
+    expect(generate({key: 'a'}, sheetMock)).to.be('p001')
   })
 })
diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json
@@ -1,30 +1,30 @@
 {
   "dist/react-jss.js": {
-    "bundled": 110053,
-    "minified": 37477,
-    "gzipped": 12101
+    "bundled": 128759,
+    "minified": 44373,
+    "gzipped": 13874
   },
   "dist/react-jss.min.js": {
-    "bundled": 85529,
-    "minified": 30234,
-    "gzipped": 9928
+    "bundled": 96372,
+    "minified": 34480,
+    "gzipped": 11091
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 15587,
-    "minified": 7215,
-    "gzipped": 2499
+    "bundled": 21204,
+    "minified": 9854,
+    "gzipped": 3193
   },
   "dist/react-jss.esm.js": {
-    "bundled": 14906,
-    "minified": 6635,
-    "gzipped": 2384,
+    "bundled": 20353,
+    "minified": 9113,
+    "gzipped": 3072,
     "treeshaked": {
       "rollup": {
-        "code": 2018,
-        "import_statements": 457
+        "code": 2040,
+        "import_statements": 439
       },
       "webpack": {
-        "code": 3422
+        "code": 3470
       }
     }
   }

diff --git a/packages/react-jss/package.json b/packages/react-jss/package.json
@@ -43,10 +43,11 @@
   "dependencies": {
     "@babel/runtime": "^7.3.1",
     "hoist-non-react-statics": "^3.2.0",
+    "is-in-browser": "^1.1.3",
     "jss": "10.0.0-alpha.16",
     "jss-preset-default": "10.0.0-alpha.16",
     "prop-types": "^15.6.0",
-    "theming": "^3.0.3",
+    "theming": "3.2.0",
     "tiny-warning": "^1.0.2"
   },
   "devDependencies": {

diff --git a/packages/react-jss/src/JssContext.js b/packages/react-jss/src/JssContext.js
@@ -3,7 +3,7 @@ import React, {type Context} from 'react'
 import type {Context as JssContextValue} from './types'
 
 const JssContext: Context<JssContextValue> = React.createContext({
-  sheetOptions: {},
+  sheetOptions: {classNamePrefix: ''},
   disableStylesGeneration: false
 })
 

diff --git a/packages/react-jss/src/JssProvider.js b/packages/react-jss/src/JssProvider.js
@@ -10,7 +10,7 @@ import defaultJss, {
 } from 'jss'
 import type {Context, Managers} from './types'
 import JssContext from './JssContext'
-import memoize from './memoize-one'
+import shallowEqualObjects from './utils/shallowEqualObjects'
 
 /* eslint-disable react/require-default-props, react/no-unused-prop-types */
 
@@ -41,65 +41,70 @@ export default class JssProvider extends Component<Props> {
 
   managers: Managers = {}
 
-  createContext = memoize(
-    (outerContext: Context, props: Props): Context => {
-      const {registry, classNamePrefix, jss, generateId, disableStylesGeneration, media} = props
-      // Clone the outer context
-      const context = {...outerContext}
-
-      if (registry) {
-        context.registry = registry
-
-        // This way we identify a new request on the server, because user will create
-        // a new Registry instance for each.
-        if (registry !== this.registry) {
-          // We reset managers because we have to regenerate all sheets for the new request.
-          this.managers = {}
-          this.registry = registry
-        }
-      }
+  createContext = (outerContext: Context) => {
+    const {registry, classNamePrefix, jss, generateId, disableStylesGeneration, media} = this.props
 
-      context.managers = this.managers
+    // Clone the outer context
+    const context = {...outerContext}
 
-      if (generateId) {
-        context.sheetOptions.generateId = generateId
-      } else if (!context.sheetOptions.generateId) {
-        if (!this.generateId) {
-          this.generateId = createGenerateId(this.props.id)
-        }
-        context.sheetOptions.generateId = this.generateId
-      }
+    if (registry) {
+      context.registry = registry
 
-      // Merge the classname prefix
-      if (classNamePrefix) {
-        context.sheetOptions.classNamePrefix =
-          (context.sheetOptions.classNamePrefix || '') + classNamePrefix
+      // This way we identify a new request on the server, because user will create
+      // a new Registry instance for each.
+      if (registry !== this.registry) {
+        // We reset managers because we have to regenerate all sheets for the new request.
+        this.managers = {}
+        this.registry = registry
       }
+    }
 
-      if (media !== undefined) {
-        context.sheetOptions.media = media
-      }
+    context.managers = this.managers
 
-      if (jss) {
-        context.jss = jss
+    if (generateId) {
+      context.sheetOptions.generateId = generateId
+    } else if (!context.sheetOptions.generateId) {
+      if (!this.generateId) {
+        this.generateId = createGenerateId(this.props.id)
       }
+      context.sheetOptions.generateId = this.generateId
+    }
 
-      if (disableStylesGeneration !== undefined) {
-        context.disableStylesGeneration = disableStylesGeneration
-      }
+    // Merge the classname prefix
+    if (classNamePrefix) {
+      context.sheetOptions.classNamePrefix += classNamePrefix
+    }
+
+    if (media !== undefined) {
+      context.sheetOptions.media = media
+    }
 
-      return context
+    if (jss) {
+      context.jss = jss
     }
-  )
+
+    if (disableStylesGeneration !== undefined) {
+      context.disableStylesGeneration = disableStylesGeneration
+    }
+
+    if (this.prevContext && shallowEqualObjects(this.prevContext, context)) {
+      return this.prevContext
+    }
+
+    this.prevContext = context
+
+    return context
+  }
+
+  prevContext: Context
 
   generateId: ?GenerateId
 
   registry: ?SheetsRegistry
 
   renderProvider = (outerContext: Context) => {
     const {children} = this.props
-    // $FlowFixMe
-    const context: Context = this.createContext(outerContext, this.props)
+    const context: Context = this.createContext(outerContext)
 
     return <JssContext.Provider value={context}>{children}</JssContext.Provider>
   }

diff --git a/packages/react-jss/src/JssProvider.test.js b/packages/react-jss/src/JssProvider.test.js
@@ -7,7 +7,7 @@ import {create} from 'jss'
 import TestRenderer from 'react-test-renderer'
 import preset from 'jss-preset-default'
 
-import withStyles, {SheetsRegistry, JssProvider} from '.'
+import {SheetsRegistry, JssProvider, withStyles} from '.'
 
 const createGenerateId = () => {
   let counter = 0