General review. Component parts

(MainElement.js)

---

State:

  data = {
    text: 'Click me',
    newText: 'Hey, I am SJS!',
    color: 'green',
    childProp: 'Child prop!', // state field for prop to child
    font: '35px',
  }

---

Template engine:

  template = {
    id: 'MainApp',
    node: 'div',
    content: () => this.data.text, // dynamic binding to state
    events: [
      {
        type: 'click', // HTML DOM Event
        name: 'changeText', // which method to use? State his name
        isSelf: true, // do event just for this node
      },
    ],
  }

---

Methods:

  methods = {
    changeText: () => { 
      this.changeData({ // dynamic method for changing state
        text: this.data.newText,
        childProp: 'Hello world', // update component state + child prop
      })
    },
  }

---

Styles:

  styles = {
    color: () => this.data.color, // dynamically binding styles to state
    fontSize: () => this.data.font, // too ^
    display: 'flex',
    flexDirection: 'column',
  }

---

Children:

  childList = [
    {
      component: ThirdApp,
      props: { // props to ThirdApp component
        msg: () => this.data.childProp,
      },
      emitEvents: { // emit events from ThirdApp component
        newEmit: emitData => this.changeData({ text: emitData }),
      },
    },
  ]

// or simple way:
  childList = [
    { component: ThirdApp}
  ]

---

Lifecycle:

  created() {
    console.log('created!')
  }

  mounted() {
    console.log('mounted!')
  }

---

Total view:

import Sjs_el from '../../sjs/element/Sjs_el'
import ThirdApp from './MainElement/ThirdElement'

class MainElement extends Sjs_el {
  constructor() {
    super()
  }

  data = {
    text: 'Click me',
    newText: 'Hey, I am SJS!',
    color: 'green',
    childProp: 'Child prop!', // state field for prop to child
    font: '35px',
  }

  styles = {
    color: () => this.data.color, // dynamically binding styles to state
    fontSize: () => this.data.font, // too ^
    display: 'flex',
    flexDirection: 'column',
  }

  template = {
    id: 'MainApp',
    node: 'div',
    content: () => this.data.text, // dynamic binding to state
    events: [
      {
        type: 'click', // HTML DOM Event
        name: 'changeText', // which method to use? State his name
        isSelf: true, // do event just for this node
      },
    ],
  }

  childList = [
    {
      component: ThirdApp,
      props: { // props to ThirdApp component
        msg: () => this.data.childProp,
      },
      emitEvents: { // emit events from ThirdApp component
        newEmit: emitData => this.changeData({ text: emitData }),
      },
    },
  ]

  methods = {
    changeText: () => { 
      this.changeData({ // dynamic method for changing state
        text: this.data.newText,
        childProp: 'Hello world', // update component state + child prop
      })
    },
  }

  created() {
    console.log('created!')
  }

  mounted() {
    console.log('mounted!')
  }

}

export default MainElement

---

Init App:

(main.js)

import Sjs from '../sjs/Sjs'
import MainElement from './elements/MainElement'
import SecondElement from './elements/SecondElement'

  // array of neighbors, you can pass one element or array of elements
new Sjs().init('app', [MainElement, SecondElement])

---