Proper prioritization of children over spread

Author: ryansolid

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "dom-expressions",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.14.11",
+  "version": "0.14.12",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.7.7",
-    "babel-plugin-jsx-dom-expressions": "0.14.12",
+    "babel-plugin-jsx-dom-expressions": "0.14.15",
     "coveralls": "3.0.9",
     "jest": "24.9.0",
     "s-js": "~0.4.9"

package.json

@@ -15,7 +15,12 @@ declare module "dom-expressions-runtime" {
   ): any;
   export function delegateEvents(eventNames: string[]): void;
   export function clearDelegatedEvents(): void;
-  export function spread(node: Element, accessor: any, isSVG: Boolean): void;
+  export function spread(
+    node: Element,
+    accessor: any,
+    isSVG?: Boolean,
+    skipChildren?: Boolean
+  ): void;
   export function classList(
     node: Element,
     value: { [k: string]: boolean },

runtime.d.ts

@@ -14,7 +14,12 @@ export function createComponent(
 ): any;
 export function delegateEvents(eventNames: string[]): void;
 export function clearDelegatedEvents(): void;
-export function spread(node: Element, accessor: any, isSVG: Boolean): void;
+export function spread(
+  node: Element,
+  accessor: any,
+  isSVG?: Boolean,
+  skipChildren?: Boolean
+): void;
 export function classList(
   node: Element,
   value: { [k: string]: boolean },

template/runtime.d.ts

@@ -65,10 +65,10 @@ export function classList(node, value, prev) {
   }
 }
 
-export function spread(node, accessor, isSVG) {
+export function spread(node, accessor, isSVG, skipChildren) {
   if (typeof accessor === 'function') {
-    wrap(current => spreadExpression(node, accessor(), current, isSVG));
-  } else spreadExpression(node, accessor, undefined, isSVG);
+    wrap(current => spreadExpression(node, accessor(), current, isSVG, skipChildren));
+  } else spreadExpression(node, accessor, undefined, isSVG, skipChildren);
 }
 
 export function insert(parent, accessor, marker, initial) {
@@ -180,9 +180,9 @@ function eventHandler(e) {
   }
 }
 
-function spreadExpression(node, props, prevProps = {}, isSVG) {
+function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
   let info;
-  if ("children" in props) {
+  if (!skipChildren && "children" in props) {
     wrap(() =>
       (prevProps.children = insertExpression(
         node,

template/runtime.ejs

@@ -18,4 +18,22 @@ describe("create element with various spreads", () => {
     expect(span.__click).toBeDefined();
     disposer();
   });
+
+  it("should properly prioritize children over spread", () => {
+    let span, disposer;
+
+    const Component = props => <span {...props}>Holla</span>;
+
+    S.root(dispose => {
+      disposer = dispose;
+      <Component ref={span} onClick={() => console.log("click")}>
+        Hi
+      </Component>;
+    });
+
+    expect(span).toBeDefined();
+    expect(span.textContent).toBe("Holla");
+    expect(span.__click).toBeDefined();
+    disposer();
+  });
 });