Fragment and ref

Features

• ref: a special callback that provides a way to access DOM nodes
• Fragments: a way to group a list of children without adding extra nodes to the DOM or to improve performance (check out DocumentFragments)

Here you can find an example of both:

// ref
// C++
VNode* vnode = h("div",
  Data(
    Callbacks {
      {"red", refCallback}
    }
  )
);

// with gccx
VNode* vnode = <div ref={refCallback} />

// javascript
const vnode = h("div", {
  ref: node => {
		console.log(node)
	},
});


// Fragments
// C++
asmdom::VNode* vnode = (
    h("",
        Children {
            h("div", std::string("Child 1")),
            h("div", std::string("Child 2")),
            h("div", std::string("Child 3"))
        }
    )
);

// with gccx
VNode* vnode = (
    <Fragment>
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
    </Fragment>
);

// javascript
const vnode = h('', [
  h('div', 'Child 1'),
  h('div', 'Child 2'),
  h('div', 'Child 3')
]);

Breaking changes

If you want to delete an entire vnode tree from memory as you do before, you cannot use the keyword delete but you have to use the new api deleteVNode. Keyword delete now deletes a single vnode from memory:

VNode* child1 = h("h1", string("Headline"));
VNode* child2 = h("p", string("A paragraph"));
VNode* vnode = h("div",
  Data(
    Attrs {
      {"id", "root"}
      {"style", "color: #000"}
    }
  ),
  Children {
    child1,
    child2,
  }
);

// delete vnode, child1 and child2 from memory
// asm-dom >= 0.6.0
deleteVNode(vnode);
// asm-dom < 0.6.0
// delete vnode;

// delete vnode but not child1 and child2 from memory
// asm-dom >= 0.6.0
// delete vnode;
// asm-dom < 0.6.0
// You cannot do that in [email protected]