How to use skatejs - 10 common examples

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)

};
      render() {
        return h('div', {}, `Hello, ${this.name}`);
      }
    }
  );
}
{
  // https://github.com/skatejs/skatejs#counter
  customElements.define(
    'x-counter',
    class extends Component<{ count: number }> {
      static props: ComponentProps = {
        // By declaring the property an attribute, we can now pass an initial value
        // for the count as part of the HTML.
        count: { ...skate.props.number, ...{ attribute: true } }
      };

      count: number;
      intervalID?: NodeJS.Timer;

      connected() {
        // We use a symbol so we don't pollute the element's namespace.
        this.intervalID = setInterval(() => ++this.count, 1000);
      }
      disconnected() {
        // If we didn't clean up after ourselves, we'd continue to render
        // unnecessarily.
        if (this.intervalID) {
          clearInterval(this.intervalID);
        }
      }

for (let name in previousProps) {
          if (previousProps[name] !== (this as any)[name]) {
            return true;
          }
        }

        return false;
      }
    }
  );

  type ElemProps = { str: string; arr: string[] };
  class Elem extends Component {
    static props: ComponentProps = {
      str: skate.props.string,
      arr: skate.props.array
    };

    str: string;
    arr: string[];

    render() {
      return h('div', {}, 'testing');
    }
  }

  customElements.define('x-element', Elem);

  const elem = new Elem();

  // Re-renders:
  elem.str = 'updated';

// surprises (or uglier code that conditionally checks for both forms of the
    // spec).
    const Component = Vue.extend( vueComponent )

    // map from Vue prop types to SkateJS prop types
    const vuePropTypes = makeVuePropTypes( vueComponent.props )

    // contains scope ID of this element's Vue component as well as sub component
    // IDs
    const scopeIds = getAllScopeIds( vueComponent )

    // this will contain all CSS rules for this element's Vue component and
    // sub-components
    let matchingRules = null

    return class VueWebComponent extends withUpdate( withRenderer( ElementClass ) ) {

        constructor(...args) {
            super(...args)

            console.log(' --- VueWebComponent.constructor')

            this.vue_instance = new Component
            this.vue_instancePromise = null
            this.vue_mounted = false
        }

        /**
         * Define a renderer that mounts a Vue component in this element's shadow
         * root.
         */
        renderer( root, render ) {

// @jsx React.createElement

import { props, withComponent } from 'skatejs';
import withReact from '@skatejs/renderer-react';
import React from 'react';

class WithReact extends withComponent(withReact()) {
  static get props() {
    return {
      name: props.string
    };
  }
  render({ name }) {
    return <span>Hello, {name}!</span>;
  }
}

customElements.define('with-react', WithReact);

<div>
        
      </div>
    );
  }
}
customElements.define("component-with-properties", ComponentWithProperties);

export class ComponentWithUnregistered extends withComponent(withPreact()) {
  render() {
    const data = {
      bool: true,
      num: 42,
      str: "Skate",
      arr: ["S", "k", "a", "t", "e"],
      obj: { org: "skatejs", repo: "skatejs" }
    };
    return (
      <div>
        {/* This element doesn't actually exist.
        It's used to test unupgraded behavior. */}
        </div>

self.toggleSearch();
    });
    window.addEventListener('message', this.receiveIframeMessage, false);
  }

  _stateChanged(state) {
    // throw new Error('_stateChanged() not implemented', this);
    this.triggerUpdate();
  }

  rendered() {
    this.inputElement = this.querySelector('.js-c-typeahead__input');
  }

  static props = {
    maxResults: props.string,
    placeholder: props.string,
    hideClearButton: props.boolean,
    clearButtonText: props.string,
  };

  onInput = e => {
    const value = e.target.value;

    this.setState({
      value: value,
    });

    this.onSuggestionsFetchRequested({ value }); // re-render search results immediately based on latest input value
  };

  toggleSearch() {

import { store } from '../../store.js'; // connect to the Redux store.
import { updateDrawerState } from '../../actions/app.js'; // redux actions
import { BaseComponent } from '../base-component.js';

@define
class InfoToggle extends BaseComponent {
  static is = 'pl-toggle-info';

  constructor(self) {
    self = super(self);
    return self;
  }

  static props = {
    _drawerOpened: props.boolean,
  };

  _stateChanged(state) {
    this._drawerOpened = state.app.drawerOpened;
    this.isViewallPage = state.app.isViewallPage;
  }

  render({ _drawerOpened, isViewallPage }) {
    return (
      <button class="pl-c-tools__action"> store.dispatch(updateDrawerState(!_drawerOpened))}
      &gt;
        <span class="pl-c-tools__action-text">
          {_drawerOpened
            ? `Hide ${isViewallPage ? 'all ' : ''}Pattern Info`</span></button>

window.addEventListener('message', this.receiveIframeMessage, false);
  }

  _stateChanged(state) {
    // throw new Error('_stateChanged() not implemented', this);
    this.triggerUpdate();
  }

  rendered() {
    this.inputElement = this.querySelector('.js-c-typeahead__input');
  }

  static props = {
    maxResults: props.string,
    placeholder: props.string,
    hideClearButton: props.boolean,
    clearButtonText: props.string,
  };

  onInput = e => {
    const value = e.target.value;

    this.setState({
      value: value,
    });

    this.onSuggestionsFetchRequested({ value }); // re-render search results immediately based on latest input value
  };

  toggleSearch() {
    if (!this.state.isOpen) {
      this.openSearch();