feat: cold components

Author: theKashey

Diff for: README.md

@@ -320,6 +320,30 @@ console.log(element.type instanceof Component) // true
 
 This is something we did not solve yet.
 
+#### Disabling type change
+
+It is possible to disable React-Hot-Loader for a specific component, especially to
+enable common way to type comparison.
+
+```js
+import { cold } from 'react-hot-loader';
+
+cold(SomeComponent) // this component will ignored by React-Hot-Loader
+<SomeComponent />.type === SomeComponent // true
+```
+
+##### Experimental
+
+_Cold_ all components from node_modules. Will not work for HOC or dynamically created Components.
+
+```js
+import { setConfig, cold } from 'react-hot-loader'
+setConfig({
+  onComponentRegister: (type, name, file) =>
+    file.indexOf('node_modules') > 0 && cold(type),
+})
+```
+
 ### Webpack ExtractTextPlugin
 
 Webpack ExtractTextPlugin is not compatible with React Hot Loader. Please disable it in development:

Diff for: src/configuration.js

@@ -1,7 +1,15 @@
 const configuration = {
+  // Log level
   logLevel: 'error',
+
+  // Allows using SFC without changes. leading to some components not updated
   pureSFC: false,
+
+  // Allows SFC to be used, enables "intermediate" components used by Relay, should be disabled for Preact
   allowSFC: true,
+
+  // Hook on babel component register.
+  onComponentRegister: false,
 }
 
 export default configuration

Diff for: src/reactHotLoader.js

@@ -7,11 +7,15 @@ import {
   getProxyByType,
   getProxyById,
   createProxyForType,
+  isTypeBlacklisted,
 } from './reconciler/proxies'
+import configuration from './configuration'
+import logger from './logger'
+
 import { preactAdapter } from './adapters/preact'
 
 function resolveType(type) {
-  if (!isCompositeComponent(type)) return type
+  if (!isCompositeComponent(type) || isTypeBlacklisted(type)) return type
 
   const proxy = reactHotLoader.disableProxyCreation
     ? getProxyByType(type)
@@ -32,11 +36,25 @@ const reactHotLoader = {
       const id = `${fileName}#${uniqueLocalName}`
 
       if (getProxyById(id)) {
-        // component got replaced. Need to reconsile
+        // component got replaced. Need to reconcile
         incrementGeneration()
       }
 
+      if (configuration.onComponentRegister) {
+        configuration.onComponentRegister(type, uniqueLocalName, fileName)
+      }
+
       updateProxyById(id, type)
+
+      if (isTypeBlacklisted(type)) {
+        logger.error(
+          'React-hot-loader: Cold component',
+          uniqueLocalName,
+          'at',
+          fileName,
+          'has been updated',
+        )
+      }
     }
   },
 

Diff for: src/reconciler/proxies.js

@@ -2,6 +2,7 @@ import createProxy from '../proxy'
 import { resetClassProxies } from '../proxy/createClassProxy'
 
 let proxiesByID
+let blackListedProxies
 let idsByType
 
 let elementCount = 0
@@ -33,9 +34,13 @@ export const updateProxyById = (id, type) => {
 export const createProxyForType = type =>
   getProxyByType(type) || updateProxyById(generateTypeId(), type)
 
+export const isTypeBlacklisted = type => blackListedProxies.has(type)
+export const blacklistByType = type => blackListedProxies.set(type, true)
+
 export const resetProxies = () => {
   proxiesByID = {}
   idsByType = new WeakMap()
+  blackListedProxies = new WeakMap()
   resetClassProxies()
 }
 

Diff for: src/utils.dev.js

@@ -1,4 +1,4 @@
-import { getProxyByType } from './reconciler/proxies'
+import { blacklistByType, getProxyByType } from './reconciler/proxies'
 import { hotComponentCompare } from './reconciler/hotReplacementRender'
 import configuration from './configuration'
 
@@ -13,4 +13,6 @@ export const areComponentsEqual = (a, b) =>
 export const compareOrSwap = (oldType, newType) =>
   hotComponentCompare(oldType, newType)
 
+export const cold = type => blacklistByType(type)
+
 export const setConfig = config => Object.assign(configuration, config)

Diff for: src/utils.prod.js

@@ -1,2 +1,3 @@
 export const areComponentsEqual = (a, b) => a === b
 export const setConfig = () => {}
+export const cold = () => {}

Diff for: test/utils.test.js

@@ -1,9 +1,13 @@
 import React, { Component } from 'react'
 import reactHotLoader from '../src/reactHotLoader'
-import { areComponentsEqual } from '../src/utils.dev'
+import { areComponentsEqual, cold } from '../src/utils.dev'
+import configuration from '../src/configuration'
+import logger from '../src/logger'
 
 reactHotLoader.patch(React)
 
+jest.mock('../src/logger')
+
 describe('utils (dev)', () => {
   describe('areComponentsEqual', () => {
     const createClasses = () => {
@@ -63,4 +67,60 @@ describe('utils (dev)', () => {
 
     describe('function based', () => testSuite(createStateless))
   })
+
+  describe('cold', () => {
+    it('should disable RHL for "cold" Components', () => {
+      const Component1 = () => <div>42</div>
+      const Component2 = () => <div>42</div>
+
+      reactHotLoader.register(Component1, 'Class1', 'util.dev')
+      reactHotLoader.register(Component2, 'Class2', 'util.dev')
+
+      cold(Component1)
+
+      const element1 = <Component1 />
+      const element2 = <Component2 />
+
+      expect(Component1 === element1.type).toBe(true)
+      expect(Component2 === element2.type).toBe(false)
+
+      expect(areComponentsEqual(Component1, element1.type)).toBe(true)
+      expect(areComponentsEqual(Component2, element2.type)).toBe(true)
+    })
+
+    it('should components by fileName', () => {
+      const Component1 = () => <div>42</div>
+      const Component2 = () => <div>42</div>
+
+      configuration.onComponentRegister = (type, name, file) => {
+        if (file === 'oneFile') cold(type)
+      }
+
+      reactHotLoader.register(Component1, 'Class1', 'oneFile')
+      reactHotLoader.register(Component2, 'Class2', 'anotherFile')
+
+      const element1 = <Component1 />
+      const element2 = <Component2 />
+
+      expect(Component1 === element1.type).toBe(true)
+      expect(Component2 === element2.type).toBe(false)
+
+      expect(areComponentsEqual(Component1, element1.type)).toBe(true)
+      expect(areComponentsEqual(Component2, element2.type)).toBe(true)
+    })
+
+    it('should report on cold update', () => {
+      const Component1 = () => <div>42</div>
+      cold(Component1)
+      reactHotLoader.register(Component1, 'Cold', 'Winter')
+
+      expect(logger.error).toHaveBeenCalledWith(
+        `React-hot-loader: Cold component`,
+        'Cold',
+        'at',
+        'Winter',
+        'has been updated',
+      )
+    })
+  })
 })