How to use the skatejs.define function in skatejs

touched?: boolean
}
export class MaterialInput extends InputComponent {
  // now our MaterialInput has all <input> default behaviours and props

  type?: string
  foo() {
    this.props.touched

    console.log(
      this.type
    )
  }
}

define(MaterialInput)
//

this.myBoolean = true

    console.log(this.props) // { myArray: [], myBoolean: true }

    this.props = { myArray: ['hello'] }
    // or just directly
    this.myArray = ['hello']

    console.log(this.props) // { myArray: ['hello'], myBoolean: true }

    // this will not trigger re-render
    this.someNonPublicApiProp = 'Im David'
  }
}

export default define(MyComponent)

export type Props = {}
export class MyComponent extends Component {
  static get is() { return 'my-cmp' }
  get renderRoot() {
    return this
  }
  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}

export default define(MyComponent)

import { define } from 'skatejs';
import '../../components/layout';
import '../../components/marked';
import { Component } from '../../utils';

export default define(
  class extends Component {
    static is = 'x-pages-utils-index';
    render() {
      return this.$`
      
        

const {
  url_to_domain,
} = require('libs_common/domain_utils')

const {
  get_seconds_spent_on_domain_today,
} = require('libs_common/time_spent_utils')

const update_page = (elem) => {
  get_seconds_spent_on_domain_today(elem.site, (seconds_spent) => {
    elem.seconds = seconds_spent
  })
}

skate.define('countdown-display', {
  props: {
    site: { default: url_to_domain(window.location.href) },
    seconds: { default: 0 },
  },
  render: (elem) => {
    return (
    <div style="background-color: green; position: fixed; color: white; width: 100px; height: 50px; top: 0px; right: 0px; z-index: 99999">
    Spent {elem.seconds} seconds on {elem.site}
    </div>
    )
  },
  attached: (elem) =&gt; {
    update_page(elem)
    setInterval(() =&gt; update_page(elem), 1000)
  },
})

const Slant = define(
  class extends HTMLElement {
    static is = "x-slant";
    connectedCallback() {
      const slot = document.createElement("slot");
      const em = document.createElement("em");

      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(em);
      em.appendChild(slot);
    }
  }
);

const Centered = define(
  class extends HTMLElement {
    static is = "x-centered";
    connectedCallback() {
      const slot = document.createElement("slot");
      const style = document.createElement("style");

      style.innerHTML = `
			:host {
				text-align: center;
			}
    `;

      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(style);
      this.shadowRoot.appendChild(slot);
    }

class Hello extends Component {
  renderCallback() {
    return (
      <span>
        Hello,{" "}
        
          
        !
      </span>
    );
  }
}

[Yell, Hello].forEach(define);

module.exports = define(
  class Index extends Component {
    renderCallback() {
      return (
        <div>
          <h1>SkateJS</h1>
          <p>
            World
          </p>
        </div>
      );
    }
  }
);

renderCallback() {
      return (
        
          <h1>
            
          </h1>
          
            
          
        
      );
    }
  }
);

module.exports = define(
  class extends Component {
    static props = {
      name: { ...props.string, default: "John Doe" },
      description: { ...props.string, default: "Web Components enthusiast" }
    };
    renderCallback({ name, description }) {
      return (
        
          <p>
            {description}
          </p>
          <strong>
            {name}
          </strong>
        
      );

const {
  url_to_domain,
} = require('libs_common/domain_utils')

const {
  get_seconds_spent_on_domain_today,
} = require('libs_common/time_spent_utils')

const update_page = (elem) => {
  get_seconds_spent_on_domain_today(elem.site, (seconds_spent) => {
    elem.seconds = seconds_spent
  })
}

skate.define('jsx-control-statements-example', {
  props: {
    site: { default: url_to_domain(window.location.href) },
    seconds: { default: 0 },
    example_array: { default: ['foo', 'bar', 'baz', 'qux']},
  },
  render: (elem) => {
    const elem_style = {
      'background-color': 'green',
      'position': 'fixed',
      'color': 'white',
      'width': '100px',
      'top': '0px',
      'right': '0px',
      'z-index': 99999,
    }
    return (

import { define } from 'skatejs';
import { Component } from '../utils';

export default define(
  class extends Component {
    static is = 'x-notfound';
    render() {
      return this.$`
      <h2>Not found!</h2>
      <p>The requested page couldn't be found.</p>
    `;
    }
  }
);