(core) - keep types consistent on vnodes

.changeset/lazy-walls-fold.md

@@ -0,0 +1,5 @@
+---
+'@prefresh/core': patch
+---
+
+Prevent double HOC's from duplicating components by having the types match up for Preact

packages/core/src/constants.js

@@ -11,3 +11,4 @@ export const VNODE_CHILDREN = '__k';
 export const HOOK_VALUE = '__';
 export const HOOK_ARGS = '__H';
 export const HOOK_CLEANUP = '__c';
+export const VNODE_PARENT = '__';

packages/core/src/index.js

@@ -17,6 +17,7 @@ import {
   HOOK_ARGS,
   HOOK_VALUE,
   HOOK_CLEANUP,
+  VNODE_PARENT,
 } from './constants';
 import { computeKey } from './computeKey';
 import { vnodesForComponent, mappedVNodes } from './runtime/vnodesForComponent';
@@ -56,11 +57,9 @@ function replaceComponent(OldType, NewType, resetHookState) {
   pendingUpdates = pendingUpdates.filter(p => p[0] !== OldType);
 
   vnodes.forEach(vnode => {
-    // update the type in-place to reference the new component
     vnode.type = NewType;
-
     if (vnode[VNODE_COMPONENT]) {
-      vnode[VNODE_COMPONENT].constructor = vnode.type;
+      vnode[VNODE_COMPONENT].constructor = NewType;
 
       try {
         if (vnode[VNODE_COMPONENT] instanceof OldType) {
@@ -99,6 +98,22 @@ function replaceComponent(OldType, NewType, resetHookState) {
         vnode[VNODE_COMPONENT].constructor = NewType;
       }
 
+      if (
+        vnode[VNODE_PARENT] &&
+        vnode[VNODE_PARENT][VNODE_CHILDREN] &&
+        vnode[VNODE_PARENT][VNODE_CHILDREN].length
+      ) {
+        vnode[VNODE_PARENT][VNODE_CHILDREN].forEach(child => {
+          if (
+            child &&
+            typeof child.type === 'function' &&
+            child.type === OldType
+          ) {
+            child.type = NewType;
+          }
+        });
+      }
+
       if (resetHookState) {
         if (
           vnode[VNODE_COMPONENT][COMPONENT_HOOKS] &&
@@ -164,16 +179,11 @@ function replaceComponent(OldType, NewType, resetHookState) {
             }
           );
 
-          vnode[VNODE_COMPONENT][COMPONENT_HOOKS][HOOKS_LIST].forEach(
-            hook => {
-              if (
-                hook.__H &&
-                Array.isArray(hook.__H)
-              ) {
-                hook.__H = undefined;
-              }
+          vnode[VNODE_COMPONENT][COMPONENT_HOOKS][HOOKS_LIST].forEach(hook => {
+            if (hook.__H && Array.isArray(hook.__H)) {
+              hook.__H = undefined;
             }
-          );
+          });
         }
       }
 

test/constants.js

@@ -33,7 +33,7 @@ exports.binArgs = {
 };
 
 exports.goMessage = {
-  vite: 'running',
+  vite: 'ready',
   snowpack: 'Server started',
   webpack: 'successfully',
   nollup: 'Compiled',

test/fixture/next-webpack5/src/app.jsx

@@ -1,11 +1,12 @@
-import { useCounter } from './useCounter'
 import { h } from 'preact'
+import { setup } from 'goober';
 import { Greeting } from './greeting.jsx';
 import { StoreProvider } from './context.jsx';
 import { Products } from './products.jsx';
 import { Effect } from './effect.jsx';
+// import { List } from './list.jsx';
+import { useCounter } from './useCounter'
 import { Style } from './styles';
-import { setup } from 'goober';
 
 setup(h);
 
@@ -28,6 +29,7 @@ export function App(props) {
         <Products />
       </StoreProvider>
       <Effect />
+      {/* <List /> */}
     </Style>
   )
 }

test/fixture/next-webpack5/src/hoc.jsx

@@ -0,0 +1,3 @@
+import { h } from 'preact';
+
+export const applyHOC = (Component) => (props) => <Component {...props} HOCApplied={true} />

test/fixture/next-webpack5/src/list.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+import Item from './listItem.jsx'
+
+const items = [0, 1, 2, 3]
+
+export const List = () => {
+  return <div id="item-list">{items.map(item => <Item key={`item-${item}`} index={item}/>)}</div>
+}

test/fixture/next-webpack5/src/listItem.jsx

@@ -0,0 +1,12 @@
+import { h, Component } from 'preact'
+import { applyHOC } from './hoc.jsx'
+
+class ListItem extends Component {
+  render() {
+    return <div>item {this.props.index}</div>
+  }
+}
+
+const WrappedListItem = applyHOC(ListItem)
+
+export default WrappedListItem

test/fixture/next/src/app.jsx

@@ -1,11 +1,12 @@
-import { useCounter } from './useCounter'
+import { setup } from 'goober';
 import { h } from 'preact'
 import { Greeting } from './greeting.jsx';
 import { StoreProvider } from './context.jsx';
 import { Products } from './products.jsx';
 import { Effect } from './effect.jsx';
+// import { List } from './list.jsx';
 import { Style } from './styles';
-import { setup } from 'goober';
+import { useCounter } from './useCounter';
 
 setup(h);
 
@@ -28,6 +29,7 @@ export function App(props) {
         <Products />
       </StoreProvider>
       <Effect />
+      {/* <List /> */}
     </Style>
   )
 }

test/fixture/next/src/hoc.jsx

@@ -0,0 +1,3 @@
+import { h } from 'preact';
+
+export const applyHOC = (Component) => (props) => <Component {...props} HOCApplied={true} />

test/fixture/next/src/list.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+import Item from './listItem.jsx'
+
+const items = [0, 1, 2, 3]
+
+export const List = () => {
+  return <div id="item-list">{items.map(item => <Item key={`item-${item}`} index={item}/>)}</div>
+}

test/fixture/next/src/listItem.jsx

@@ -0,0 +1,12 @@
+import { h, Component } from 'preact'
+import { applyHOC } from './hoc.jsx'
+
+class ListItem extends Component {
+  render() {
+    return <div>item {this.props.index}</div>
+  }
+}
+
+const WrappedListItem = applyHOC(ListItem)
+
+export default WrappedListItem

test/fixture/nollup/src/app.jsx

@@ -1,11 +1,12 @@
 import { h } from 'preact';
-import { useCounter } from './useCounter'
+import { setup } from 'goober';
 import { Greeting } from './greeting.jsx';
 import { StoreProvider } from './context.jsx';
 import { Products } from './products.jsx';
 import { Effect } from './effect.jsx';
+// import { List } from './list.jsx';
 import { Style } from './styles';
-import { setup } from 'goober';
+import { useCounter } from './useCounter'
 
 setup(h);
 
@@ -28,6 +29,7 @@ export function App(props) {
         <Products />
       </StoreProvider>
       <Effect />
+      {/* <List /> */}
     </Style>
   )
 }

test/fixture/nollup/src/hoc.jsx

@@ -0,0 +1,3 @@
+import { h } from 'preact';
+
+export const applyHOC = (Component) => (props) => <Component {...props} HOCApplied={true} />

test/fixture/nollup/src/list.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+import Item from './listItem.jsx'
+
+const items = [0, 1, 2, 3]
+
+export const List = () => {
+  return <div id="item-list">{items.map(item => <Item key={`item-${item}`} index={item}/>)}</div>
+}

test/fixture/nollup/src/listItem.jsx

@@ -0,0 +1,12 @@
+import { h, Component } from 'preact'
+import { applyHOC } from './hoc.jsx'
+
+class ListItem extends Component {
+  render() {
+    return <div>item {this.props.index}</div>
+  }
+}
+
+const WrappedListItem = applyHOC(ListItem)
+
+export default WrappedListItem

test/fixture/snowpack/src/app.jsx

@@ -1,11 +1,12 @@
-import { useCounter } from './useCounter'
 import { h } from 'preact'
+import { setup } from 'goober';
 import { StoreProvider } from './context';
 import { Products } from './products';
 import { Greeting } from './greeting';
 import { Effect } from './effect';
-import { setup } from 'goober';
 import { Style } from './styles';
+// import { List } from './list';
+import { useCounter } from './useCounter'
 
 setup(h);
 
@@ -28,6 +29,7 @@ export function App(props) {
         <Products />
       </StoreProvider>
       <Effect />
+      {/* <List /> */}
     </Style>
   )
 }

test/fixture/snowpack/src/hoc.jsx

@@ -0,0 +1,3 @@
+import { h } from 'preact';
+
+export const applyHOC = (Component) => (props) => <Component {...props} HOCApplied={true} />

test/fixture/snowpack/src/list.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+import Item from './listItem.jsx'
+
+const items = [0, 1, 2, 3]
+
+export const List = () => {
+  return <div id="item-list">{items.map(item => <Item key={`item-${item}`} index={item}/>)}</div>
+}

test/fixture/snowpack/src/listItem.jsx

@@ -0,0 +1,12 @@
+import { h, Component } from 'preact'
+import { applyHOC } from './hoc.jsx'
+
+class ListItem extends Component {
+  render() {
+    return <div>item {this.props.index}</div>
+  }
+}
+
+const WrappedListItem = applyHOC(ListItem)
+
+export default WrappedListItem

test/fixture/vite/src/app.jsx

@@ -1,11 +1,12 @@
 import { h } from 'preact';
-import { useCounter } from './useCounter';
+import { setup } from 'goober';
 import { StoreProvider } from './context';
 import { Products } from './products';
 import { Greeting } from './greeting';
 import { Effect } from './effect';
-import { setup } from 'goober';
 import { Style } from './styles';
+import { List } from './list';
+import { useCounter } from './useCounter';
 
 setup(h);
 
@@ -28,6 +29,7 @@ export function App(props) {
         <Products />
       </StoreProvider>
       <Effect />
+      <List />
     </Style>
   )
 }

test/fixture/vite/src/hoc.jsx

@@ -0,0 +1,3 @@
+import { h } from 'preact';
+
+export const applyHOC = (Component) => (props) => <Component {...props} HOCApplied={true} />

test/fixture/vite/src/list.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+import Item from './listItem.jsx'
+
+const items = [0, 1, 2, 3]
+
+export const List = () => {
+  return <div id="item-list">{items.map(item => <Item key={`item-${item}`} index={item}/>)}</div>
+}

test/fixture/vite/src/listItem.jsx

@@ -0,0 +1,12 @@
+import { h, Component } from 'preact'
+import { applyHOC } from './hoc.jsx'
+
+class ListItem extends Component {
+  render() {
+    return <div>item {this.props.index}</div>
+  }
+}
+
+const WrappedListItem = applyHOC(ListItem)
+
+export default WrappedListItem

test/fixture/web-dev-server/src/app.jsx

@@ -1,11 +1,12 @@
 import { h } from 'preact';
+import { setup } from 'goober';
 import { useCounter } from './useCounter'
 import { StoreProvider } from './context';
 import { Products } from './products'
 import { Greeting } from './greeting';
 import { Effect } from './effect';
-import { setup } from 'goober';
 import { Style } from './styles';
+// import { List } from './list';
 
 setup(h);
 
@@ -28,6 +29,7 @@ export function App(props) {
         <Products />
       </StoreProvider>
       <Effect />
+      {/* <List /> */}
     </Style>
   )
 }

test/fixture/web-dev-server/src/hoc.jsx

@@ -0,0 +1,3 @@
+import { h } from 'preact';
+
+export const applyHOC = (Component) => (props) => <Component {...props} HOCApplied={true} />

test/fixture/web-dev-server/src/list.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+import Item from './listItem.jsx'
+
+const items = [0, 1, 2, 3]
+
+export const List = () => {
+  return <div id="item-list">{items.map(item => <Item key={`item-${item}`} index={item}/>)}</div>
+}

test/fixture/web-dev-server/src/listItem.jsx

@@ -0,0 +1,12 @@
+import { h, Component } from 'preact'
+import { applyHOC } from './hoc.jsx'
+
+class ListItem extends Component {
+  render() {
+    return <div>item {this.props.index}</div>
+  }
+}
+
+const WrappedListItem = applyHOC(ListItem)
+
+export default WrappedListItem