Idea for defining web components

draft.jsc

// Javascript component draft
// pure js with 3 new declarations Props, Styles and Template

import Link from 'link-component';
import PropTypes from 'prop-types';

Props engine PropTypes {
  text: string = 'Hello'
}

// Module is component scope
const state = {
  active: false
}

// Standard event handlers for component
const onClick = evt => {
  console.log('Root's element onClick');
  // bad idea :)
  update state.active = !state.active;
}

// some component method
const fooHandler = evt => {
  evt.preventDefault();
  console.log('Inner's element onClick');
}

// Render may use vars from Props declatation
Template engine JSX {
  <Root>
    <h1>{text}</h1>
    <MyLink onClick={fooHandler}>Click me</MyLink>
  </Root>
}

// And styles :)
Styles {
  .root {
    color: black;
    :active {
      color: red;
    }
  }
  .my-link {
    border: 1px solid red;
  }
}