[ARCHIVED] 2020 Roadmap

version 1

Will be adding custom syntax to v1! ✔️

• This way you can use whatever you like to represent event-handling, props, etc. This should remove some cases where the syntax of Domponent may collide with a template language.

Will be adding much needed integration tests ✔️

• As it stands, the library does not have enough integration tests. They're a pain to write, but I'll do them.

More doc examples!

• Mustache
• ASP
• Twig

version 2

Potentially create a $refs Object to store data-ref and data-ref-array elements ✔️

• This could organize the components better and automate garbage collection

Investigate element attribute binding

• maybe through a directive like data-attr-bind='{"class": "|state.field:classname|"}'

An alternative to attribute binding would be individual watchers for props and state fields ✔️

• Perhaps create a watch function that does a pre and post function per prop or state field. ✔️
• A watch would fire for that individual field. So you could keep your rerendering logic around that field more organized as opposed to everything in stateDidUpdate ✔️
• Alternatively, I could create a useHook module to bring in, in a similar way to React

watch(){
  return {
    count: {
      pre(){
        // my update
      },
      post(){
        // my update
      }
    }
  }
}

• I could also add computed to it. Like in Vue
• NEED TO ADD FOR props AS WELL ✔️

Potentially add data-if and data-show/data-hide ❌

• data-if would remove sections of the component from the DOM depending on component state/props
• data-show and data-hide would add a conditional class to the DOM element depending on state/props

allow state and props binding to render HTML ❌

• potentially add data-html tag to allow props and state to render HTML.
• potentially add option binding value data-bind="state:Counter.count,html"
• potentially allow state and props fields to be flagged in constructor
• WHAT IS THE MOST SECURE WAY TO DO THIS? 3rd argument to setState?

this.setState({}, cb, true|[])

array is string of field names to render innerHTML for during that particular setState. If set to true all fields will set innerHTML

Add additional exponent method to parse a section of html and create a new component and method to bind more to current component. This will aid in adding html dynamically that needs domponent functionality

• addHTML and removeHTML could be methods to which accept a container element and wire up all the event listeners and new components within that region.
• alter current component utilities to allow for a dynamic root element. This should promote reuse of utilities