How to use the omi.define function in omi

import {
    h,
    render,
    define,
} from 'omi';
import oApp from './oApp.omi'
import stores from './stores/stores'
define('o-app', oApp)
render(h('o-app'), 'body', stores)

import { WeElement, define, render } from 'omi'
import 'omi-router'

let currentPage = null
let stackList = []

window.stackList = stackList
define('o-router', class extends WeElement {

  _firstTime = true

  installed() {
    const root = document.querySelector('#app')
    let main
    this.props.routes.forEach(current => {
      route(current.path, (evt) => {
        current.componentLoader()
          .then(res => {
            const arr = current.path.replace(/pages/, 'page').split('/')
            const selector = current.path.replace(/\//g, '-')
            routeUpdate({ nodeName: arr[1] + '-' + arr[2], attributes: { className: selector } }, selector, evt.byNative, root)
          }).catch(res => {
            console.log(res)
          })

import { define, WeElement } from 'omi'
import logo from './logo.png'
import style from './_index.css'
import normalizeStyle from '../../../assets/_normalize.css'

define('app-frame', class extends WeElement {
  static get data() {
    return { name: '' }
  }

  static observe = true

  data = {
    name: 'Omi SPA'
  }

  css() {
    return normalizeStyle + style
  }

  install() {}

import Taro, { internal_safe_get, internal_get_original, internal_inline_style } from "@tarojs/taro";
import { render, WeElement, define } from 'omi';

define('my-counter', class extends WeElement {
  static properties = {};
  static $$events = ["sub", "add"];
  $usedState = ["count"];

  _constructor(props) {
    super._constructor(props);
  }

  count = 1;

  //You can also pass strings directly
  css = "span{\n        color: red;\n      }";

  sub = () => {
    this.count--;
    this.update();

import { define, WeElement } from 'omi'
import style from './_index.scss'

define('ow-list-item', class extends WeElement {
  css() {
    return style
  }
  render(props) {
    let border =
    this.parentNode.className === 'ow-item'
        ? 'border-bottom-1px'
        : 'border-1px'
    return (
      <li>
        {props.icon ? <img src="{props.icon}"> : null}
        <span class="title">{props.title}</span>
        <span class="content">{props.content}</span>
        {props.access ? <i> : null}
      </i></li><i>
    )</i>

import { define, WeElement, extractClass } from 'omi'
import css from './_index.css'

define('o-switch', class extends WeElement {
  static css = css

  onChange = () => {
    this.fire('change', this._ele.checked)
  }
  render(props) {
    if (props.checked) {
      return (
        <label for="{`x_${this.elementId}`}">
          <input id="{`x_${this.elementId}`}"> {
              this._ele = e
            }}
            class="weui-switch-cp__input"
            type="checkbox"</label>

import { define, WeElement } from 'omi'
import css from './_index.css'
import '../../icon'

define('tree-node', class extends WeElement {

  dropHandler(evt) {
    this.getRootInstance(this.parent).moveNode(parseInt(evt.dataTransfer.getData("node-id")), parseInt(evt.target.dataset['nodeId']))
    this.node && this.node.classList.remove('drag-over')
    evt.stopPropagation()
    evt.preventDefault()

  }

  getRootInstance(parent) {
    if (parent.moveNode) {
      return parent
    } else {
      return this.getRootInstance(parent.parent)
    }

import { define, WeElement, extractClass } from 'omi'
import css from './_index.css'

define('o-tab', class extends WeElement {
  static css = css

  onClick = index => {
    this.props.onChange(index)
  }

  render(props) {
    return (
      <ul>
        {props.children.map((item, index) =&gt; {
          const props = {}
          const isActive = item.attributes &amp;&amp; item.attributes.active

          if (isActive) {
            props.class = 'active'
          } else {</ul>

import { render, define, WeElement } from 'omi'
import '../../src/index'
import omiUrl from './omi.jpg'

define('my-app', class extends WeElement {
  static observe = true

  data = {
    scale: 0.5
  }

  css() {
    return `
        div{
          width: 400px;
          height: 400px;
          text-align: center;
        }
        label {
          font-size: 3rem;
          --sprite-anchor: 0.5, 0.5;

import { define, WeElement } from 'omi'
import css from './_index.css'

define('o-prompt', class extends WeElement {
  close = () => {
    this.input.value = ''
    this.props.onClose && this.props.onClose()
  }

  confirm = () => {
    this.inputValue = this.input.value
    this.input.value = ''
    this.props.onConfirm && this.props.onConfirm()
  }

  static css = css

  afterUpdate(){
    if(this.props.show){
      this.input.focus()