Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for more component types (Custom Element classes and D3 functions) #29

Open
pemrouz opened this issue Oct 30, 2016 · 0 comments

Comments

@pemrouz
Copy link
Collaborator

pemrouz commented Oct 30, 2016

Besides having both stateless and stateful components as pure functions of data, it would be good to also add support for the new Custom Elements style classes and the more traditional D3 components. D3 components should be straightforward given it was the source of the inspiration for the current components. Classes would be expected to have a similar declarative render function (draw) but also allows developers to more neatly setup other methods/accessors/lifecycle hooks/etc. This should also improve interop.

Classical D3 Component

function chart() {
  var width = 720, // default width
      height = 80; // default height

  function my() {
    // generate chart here, using `width` and `height`
  }

  my.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return my;
  };

  my.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return my;
  };

  return my;
}

Custom Element Class

class MyComponent extends HTMLElement {
  // can move name and other meta data here..
  name: 'my-component' 

  get width(){ 
    return this._width
  }

  set width(value){ 
    this._width = value
  }

  draw(node, data) {
    // update node
    jsx(node)`
      ...
    `
  }
}
@pemrouz pemrouz changed the title feat: add support for more component types (CE classes and D3 functions) feat: add support for more component types (Custom Element classes and D3 functions) Nov 30, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant