feat (core): support to props.children

[maechabin]

I wanted to use JSX with Augular. So this ng-vdom is very cool for me and I wanted to contribute.

I made it support to props.children like React, so that "transclusion" can be done. props.children is now available for class, function and angular components.

Example:

/** Parent Component */
@Component({
  selector: 'app-root',
  template: '',
})
export class AppComponent extends Renderable {
  render() {
    return (
      <div>
        {/** Function Component */}
        <FunctionComponent>
          <p>Here is</p>
          <p>Children</p>
        </FunctionComponent>

        {/** Class Component */}
        <ClassComponent>
          <p>Here is</p>
          <p>Children</p>
        </ClassComponent>

        {/** Angular Component */}
        <AngularComponent>
          <p>Here is</p>
          <p>Children</p>
        </AngularComponent>
      </div>
    )
  }
}

/** Function Component */
function FunctionComponent({children}) {
  return (
    <div>
      <h2>Function Component</h2>
      {children[0]}
      {children[1]}
      {/** Even {children} is OK. */}
    </div>
  )
}

/** Class Component */
class ClassComponent extends Component {
  render() {
    const { children } = this.props
    return (
      <div>
        <h2>Class Component</h2>
        <div>{children}</div>
      </div>
    )
  }
}

/** Angular Component */
@Component({
  template: '',
})
export class AngularComponent extends Renderable {
  @Input() children: any

  render() {
    return (
      <div>
        <h2>Angular Component</h2>
        <div>{this.children}</div>
      </div>
    )
  }
}

Result:

<div>
  <div>
    <h2>Function Component</h2>
    <div>
      <p>Here is</p> <!-- <== props.children -->
      <p>Children</p> <!-- <== props.children -->
    </div>
  </div>

  <div>
    <h2>Class Component</h2>
    <div>
      <p>Here is</p> <!-- <== props.children -->
      <p>Children</p> <!-- <== props.children -->
    </div>
  </div>

  <div>
    <h2>Angular Component</h2>
    <div>
      <p>Here is</p> <!-- <== props.children -->
      <p>Children</p> <!-- <== props.children -->
    </div>
  </div>
</div>

Unit testing is also supported. App.component is also updated. Could you check my pull request?

Thank you.

[codecov[bot]]

Codecov Report

Merging #85 into master will decrease coverage by 4.04%. The diff coverage is 72.41%.

@@            Coverage Diff             @@
##           master      #85      +/-   ##
==========================================
- Coverage   90.33%   86.29%   -4.05%     
==========================================
  Files          19       21       +2     
  Lines         538      620      +82     
  Branches       78       96      +18     
==========================================
+ Hits          486      535      +49     
- Misses         28       51      +23     
- Partials       24       34      +10

Impacted Files	Coverage Δ
projects/core/src/shared/types.ts	100% <ø> (ø)	:arrow_up:
projects/core/src/shared/factory.ts	100% <100%> (ø)	:arrow_up:
...rojects/core/src/instructions/angular-component.ts	92.22% <60%> (-2.1%)	:arrow_down:
...ojects/core/src/instructions/function-component.ts	92% <66.66%> (-8%)	:arrow_down:
projects/core/src/instructions/util.ts	83.33% <71.42%> (-3.63%)	:arrow_down:
projects/core/src/instructions/class-component.ts	93.33% <77.77%> (-6.67%)	:arrow_down:
projects/core/src/integration/container.ts	45.65% <0%> (ø)
projects/core/src/integration/renderable.ts	95% <0%> (ø)
projects/core/src/shared/render-kit.ts	100% <0%> (+6.66%)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 9983c54...7ec2b79. Read the comment docs.

[LayZeeDK]

@trotyl what do you think?