How to use the skatejs.withComponent function in skatejs

// @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>

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 Namecard extends withComponent() {
  render() {
    return outdent`
      
        <h1></h1>
        
      
    `;
  }
}

class Nametag extends withComponent() {
  static props = {
    name: { ...props.string, default: 'John Doe' },
    description: { ...props.string, default: 'Web Components enthusiast' }
  };
  render({ name, description }) {

It's used to test unupgraded behavior. */}
        
      
    );
  }
}
customElements.define("component-with-unregistered", ComponentWithUnregistered);

export class ComponentWithImperativeEvent extends withComponent(withPreact()) {
  constructor() {
    super();
    this.state = { eventHandled: false };
    this.handleRef = this.handleRef.bind(this);
    this.handleTestEvent = this.handleTestEvent.bind(this);
  }
  handleRef(el) {
    if (el) {
      el.addEventListener("camelEvent", this.handleTestEvent);
    }
  }
  handleTestEvent(e) {
    this.state = Object.assign({}, this.state, { eventHandled: true });
  }
  render({ state }) {
    return (

clearInterval(this.interval);
  }
  render({ state }) {
    return (
      <div>
        {state.count}
      </div>
    );
  }
}
customElements.define(
  "component-with-children-rerender",
  ComponentWithChildrenRerender
);

export class ComponentWithDifferentViews extends withComponent(withPreact()) {
  constructor() {
    super();
    this.state = { showWC: true };
  }
  toggle() {
    this.state = Object.assign({}, this.state, { showWC: !this.state.showWC });
  }
  render({ state }) {
    return (
      <div>
        {state.showWC ? (
          
        ) : (
          <div id="dummy">Dummy view</div>
        )}
      </div>

}
}
customElements.define("component-without-children", ComponentWithoutChildren);

export class ComponentWithChildren extends withComponent(withPreact()) {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}
customElements.define("component-with-children", ComponentWithChildren);

export class ComponentWithChildrenRerender extends withComponent(withPreact()) {
  constructor() {
    super();
    this.state = { count: 1 };
  }
  connected() {
    Promise.resolve().then(
      _ =&gt;
        (this.state = Object.assign({}, this.state, {
          count: (this.state.count += 1)
        }))
    );
  }
  disconnected() {
    clearInterval(this.interval);
  }
  render({ state }) {

}
  render({ state }) {
    return (
      <div>
        <div id="handled">{state.eventHandled.toString()}</div>
        
      </div>
    );
  }
}
customElements.define(
  "component-with-imperative-event",
  ComponentWithImperativeEvent
);

class ComponentWithDeclarativeEvent extends withComponent(withPreact()) {
  constructor() {
    super();
    this.state = {
      lowercaseHandled: false,
      kebabHandled: false,
      camelHandled: false,
      capsHandled: false,
      pascalHandled: false
    };
    this.handleLowercaseEvent = this.handleLowercaseEvent.bind(this);
    this.handleKebabEvent = this.handleKebabEvent.bind(this);
    this.handleCamelEvent = this.handleCamelEvent.bind(this);
    this.handleCapsEvent = this.handleCapsEvent.bind(this);
    this.handlePascalEvent = this.handlePascalEvent.bind(this);
  }
  handleLowercaseEvent(e) {

/** @jsx h */

import { props, withComponent } from 'skatejs';
import withPreact from '@skatejs/renderer-preact';
import { h } from 'preact';

class WithPreact extends withComponent(withPreact()) {
  static props = {
    name: props.string
  };
  render({ name }) {
    return <span>Hello, {name}!</span>;
  }
}

customElements.define('with-preact', WithPreact);

import "ce-with-children";
import "ce-with-properties";
import "ce-with-event";

export class ComponentWithoutChildren extends withComponent(withPreact()) {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}
customElements.define("component-without-children", ComponentWithoutChildren);

export class ComponentWithChildren extends withComponent(withPreact()) {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}
customElements.define("component-with-children", ComponentWithChildren);

export class ComponentWithChildrenRerender extends withComponent(withPreact()) {
  constructor() {
    super();
    this.state = { count: 1 };
  }
  connected() {

import { props, withComponent } from 'skatejs';

class WithComponent extends withComponent() {
  static get props() {
    return {
      name: props.string
    };
  }
  render({ name }) {
    return `Hello, ${this.name}!`;
  }
}

customElements.define('with-component', WithComponent);