WIP: Preact EX

examples/preact/src/App.js

@@ -3,12 +3,23 @@ import { hot } from 'react-hot-loader'
 import Counter from './Counter'
 import { Internal } from './Internal'
 
+const Inner = ({ children }) => <div>{children}</div>
+
+const indirect = {
+  element: () => (
+    <Inner>
+      indirect! <Counter />
+    </Inner>
+  ),
+}
+
 const App = () => (
   <h1>
-    Hello, world!!<br />
+    Hello, world!<br />
     <Internal />
     <br />
     <Counter />
+    <indirect.element />
   </h1>
 )
 

examples/preact/src/Counter.js

@@ -4,7 +4,7 @@ import { h, render, Component } from 'preact'
 /** @jsx h */
 
 class Counter extends Component {
-  state = { count: 0 }
+  state = { count: Math.round(Math.random() * 10) }
 
   componentDidMount() {
     this.interval = setInterval(
@@ -18,7 +18,7 @@ class Counter extends Component {
   }
 
   render() {
-    return <div>10:{this.state.count}</div>
+    return <div>100:{this.state.count}:1</div>
   }
 }
 

examples/preact/src/hotLoaderSetup.js

@@ -1,4 +1,34 @@
-import reactHotLoader from 'react-hot-loader'
-import preact from 'preact'
+import reactHotLoader, { compareOrSwap } from 'react-hot-loader'
+import preact, { setComponentComparator } from 'preact'
 
 reactHotLoader.inject(preact, 'h')
+
+setComponentComparator(compareOrSwap)
+//(oldC, newC) => compareOrSwap(oldC, Object.getPrototypeOf(newC)));
+
+// changes to preact
+
+/*
+
+
+var defaultComp = (a,b) => a===b;
+
+var componentComparator = defaultComp;
+
+var compareComponents = (oldComponent,newComponent) => componentComparator(oldC,newC);
+
+var setComponentComparator = comp => {componentComparator = comp || defaultComp};
+
+
+//
+
+return hydrating || compareComponents(node._componentConstructor, vnode.nodeName);
+
+//
+
+isDirectOwner = c && compareComponents(dom._componentConstructor, vnode.nodeName),
+
+
+
+
+ */

src/proxy/createClassProxy.js

@@ -225,40 +225,47 @@ function createClassProxy(InitialComponent, proxyKey, options) {
     // This function only gets called for the initial mount. The actual
     // rendered component instance will be the return value.
 
-    // eslint-disable-next-line func-names
-    ProxyFacade = function(props, context) {
-      const result = CurrentComponent(props, context)
-
-      // simple SFC
-      if (!CurrentComponent.contextTypes) {
-        if (!ProxyFacade.isStatelessFunctionalProxy) {
-          setSFPFlag(ProxyFacade, true)
-        }
-
-        return renderOptions.componentDidRender(result)
-      }
-      setSFPFlag(ProxyFacade, false)
-
-      // This is a Relay-style container constructor. We can't do the prototype-
-      // style wrapping for this as we do elsewhere, so just we just pass it
-      // through as-is.
-      if (isReactComponentInstance(result)) {
-        ProxyComponent = null
-        return result
-      }
-
-      // Otherwise, it's a normal functional component. Build the real proxy
-      // and use it going forward.
+    if (1) {
       ProxyComponent = proxyClassCreator(Component, postConstructionAction)
 
       defineProxyMethods(ProxyComponent)
+      ProxyFacade = ProxyComponent
+    } else {
+      // eslint-disable-next-line func-names
+      ProxyFacade = function(props, context) {
+        const result = CurrentComponent(props, context)
 
-      const determinateResult = new ProxyComponent(props, context)
+        // simple SFC
+        if (0 && !CurrentComponent.contextTypes) {
+          if (!ProxyFacade.isStatelessFunctionalProxy) {
+            setSFPFlag(ProxyFacade, true)
+          }
 
-      // Cache the initial render result so we don't call the component function
-      // a second time for the initial render.
-      determinateResult[CACHED_RESULT] = result
-      return determinateResult
+          return renderOptions.componentDidRender(result)
+        }
+        setSFPFlag(ProxyFacade, false)
+
+        // This is a Relay-style container constructor. We can't do the prototype-
+        // style wrapping for this as we do elsewhere, so just we just pass it
+        // through as-is.
+        if (isReactComponentInstance(result)) {
+          ProxyComponent = null
+          return result
+        }
+
+        // Otherwise, it's a normal functional component. Build the real proxy
+        // and use it going forward.
+        ProxyComponent = proxyClassCreator(Component, postConstructionAction)
+
+        defineProxyMethods(ProxyComponent)
+
+        const determinateResult = new ProxyComponent(props, context)
+
+        // Cache the initial render result so we don't call the component function
+        // a second time for the initial render.
+        determinateResult[CACHED_RESULT] = result
+        return determinateResult
+      }
     }
   }
 
@@ -360,7 +367,13 @@ function createClassProxy(InitialComponent, proxyKey, options) {
 
   update(InitialComponent)
 
-  proxy = { get, update }
+  const dereference = () => {
+    proxies.delete(InitialComponent)
+    proxies.delete(ProxyFacade)
+    proxies.delete(CurrentComponent)
+  }
+
+  proxy = { get, update, dereference }
 
   proxies.set(InitialComponent, proxy)
   proxies.set(ProxyFacade, proxy)

src/reconciler/hotReplacementRender.js

@@ -1,6 +1,6 @@
 import levenshtein from 'fast-levenshtein'
 import { PROXY_IS_MOUNTED, PROXY_KEY, UNWRAP_PROXY } from '../proxy'
-import { getIdByType, updateProxyById } from './proxies'
+import { getIdByType, getProxyByType, updateProxyById } from './proxies'
 import {
   updateInstance,
   getComponentDisplayName,
@@ -58,7 +58,7 @@ const haveTextSimilarity = (a, b) =>
 
 const equalClasses = (a, b) => {
   const prototypeA = a.prototype
-  const prototypeB = Object.getPrototypeOf(b.prototype)
+  const prototypeB = b.prototype // Object.getPrototypeOf(b.prototype)
 
   let hits = 0
   let misses = 0
@@ -348,6 +348,21 @@ const hotReplacementRender = (instance, stack) => {
   }
 }
 
+export const hotComponentCompare = (oldType, newType) => {
+  if (oldType === newType) {
+    return true
+  }
+
+  if (isSwappable(newType, oldType)) {
+    getProxyByType(newType[UNWRAP_PROXY]()).dereference()
+    updateProxyById(oldType[PROXY_KEY], newType[UNWRAP_PROXY]())
+    updateProxyById(newType[PROXY_KEY], oldType[UNWRAP_PROXY]())
+    return true
+  }
+
+  return false
+}
+
 export default (instance, stack) => {
   try {
     // disable reconciler to prevent upcoming components from proxying.

src/utils.dev.js

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