asm-dom

Features

• Easier setup using only C++
• VNodes are now normalized only when needed, improving performance

Fixes

• refs are now correctly called with null on callback change

Breaking changes

• No need to import 'asm-dom/cpp/' (or asm-dom.js) in javascript to prepare asm-dom and getting started

• toHTML API in C++ changes its signature as follow

   // before
   // std::string toHTML(const VNode* const vnode);
  
   // now
   std::string toHTML(VNode* const vnode);
  

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]

This release allows you to use asm-dom to render WebComponents from both Javascript and C++

// C++
VNode* vnode = h("hello-component",
  Data(
    Attrs {
      {"name", "World"}
    }
  )
);

// javascript
const vnode = h("hello-component", {
  name: 'World',
});

Also, there are some improvement to the JS APIs, now you don't need to use the special raw prop to set value, checked or callbacks anymore. asm-dom is now able to automatically recognize them:

// asm-dom >= 0.5.0
const vnode = h('input', {
  className: 'input-class',
  value: 'foo',
  onchange: onChange,
});

// asm-dom < 0.5.0
const vnode = h('input', {
  className: 'input-class',
  raw: {
    value: 'foo',
    onchange: onChange,
  },
});

Bugfixes

• asm-dom can now be used as a Javascript module without an arraybuffer-loader

Breaking changes

None

With this release you can now implement SSR (Server Side Rendering) with asm-dom. It adds 2 new functions:

• toHTML that renders a vnode to HTML string. This is particularly useful if you want to generate HTML on the server.
• toVNode to convert a DOM node into a virtual node. This is especially good for patching over an pre-existing, server-side generated content.

Bugfixes

• Fix a diff problem with checked prop in JS API
• Fix boolean attributes truthy value: true is now set as empty string and not "true" (https://www.w3.org/TR/html5/infrastructure.html#sec-boolean-attributes)

Breaking changes

None

This release makes asm-dom usable as a C++ library, in this way you can compile an entire Web App to WebAssembly 🎉

Breaking changes

• removeChild and replaceChild APIs are no longer available

This release contains a new option for the init function: unsafePatch.
This allows you to implement some interesting mechanisms to patch trees and so on. This might be a useful feature if you want to develop e library to build components for example.

Also, for the same reason, there are 2 new APIs to manipulate trees: removeChild and replaceChild