Add explicit output

[paldepind]

This PR adds a output method and an output function.

output({ newName: originalName }, component);
component.output({ newName: originalName });

The mehods works similairly to the output property in the HTML element components. They take a component whose output is an object and returns a new component which only outputs the named properties under their new name.

Output created with output is considered explicit. When the output from an array of components is merged only explicit output is includeded.

div({ ... }, [
  fooComponent, // output from this component is not included
  output({ foo: "bar" }, barComponent) // this components `bar` property is included with the name `foo`
]);

Theses changes have a few important benefits:

• It is easy to rename the output of custom components.
• Since only explicitly mentioned output is combined when an array is turned into a component the risk of collisions and accidental inclusion of output is removed.

Here is an example where a custom component counter is included three times. The custom component has the output { count: Stream<number> }.

const listOfCounters = div([
  counter(0), // `output` is not used here so the `count` output will not be used
  counter(0).output({ count1: "count" }), // this custom components output is easily renamed
  counter(0).output({ count2: "count" }) // renaming avoids a collision
]);

Output created by specifying the output property to HTML components is marked explicit.

div([
  // The component created below will have `btnClick` as explicit output
  button({ output: { btnClick: "click" }}, "Click me"),
 // the above is equivalent to the following
  button("Click me").output({ btnClick: "click" })
]);

[codecov[bot]]

Codecov Report

Merging #65 into master will decrease coverage by 0.9%. The diff coverage is 100%.

Impacted Files	Coverage Δ
src/dom-builder.ts	98.38% <100%> (+0.01%)	:arrow_up:
src/utils.ts	69.56% <100%> (-12.66%)	:arrow_down:
src/component.ts	95.79% <100%> (+0.67%)	:arrow_up:

[limemloh]

This is great!!