How to use omio - 10 common examples

//fetch,
      // The twins below are wild, be careful!
      pathname: req.path,
      query: req.query
    };

    const route = await router.resolve(context);

    if (route.redirect) {
      res.redirect(route.status || 302, route.redirect);
      return;
    }

    const data = { ...route };

    const obj = Omi.renderToString(route.component, {}, { data: route.data })


    const scripts = new Set();
    const addChunk = chunk => {
      if (chunks[chunk]) {
        chunks[chunk].forEach(asset => scripts.add(asset));
      } else if (__DEV__) {
        throw new Error(`Chunk with name '${chunk}' cannot be found`);
      }
    };
    addChunk('client');
    if (route.chunk) addChunk(route.chunk);
    if (route.chunks) route.chunks.forEach(addChunk);

    data.scripts = Array.from(scripts);
    data.app = {

import { WeElement, define } from 'omio'

define('not-found', class extends WeElement {

  static css = require('./_not-found.css')

  render() {
    return (
      <div class="root">
        <div class="container">
          <h1>{this.props.title}</h1>
          <p>Sorry, the page you were trying to view does not exist.</p>
        </div>
      </div>
    );
  }
})

import { define, h } from 'omio'
import './index.css'

define('todo-footer', _ => {

  const { data, filter, clear } = _.store

  const { left, type, done } = data

  return <div class="footer">
    <div class="todo-count"> </div>
    <div class="filters">
      <div data-filter="all" class="ib">
        
      </div>
      <div data-filter="active" class="ib">
        
      </div>
      <div data-filter="done" class="ib">
        </div></div></div>

import { WeElement, define } from 'omio'

define('my-home', class extends WeElement {
  install() {
    this.data = { liked: false }
  }

  static css = require('./_my-home.css')

  render() {

    return <div class="root">
      <div class="container">
        <h1>{this.props.title}</h1>
        <p>This is an example of <a href="https://github.com/Tencent/omi"> Omi Framework</a> server side rendering </p>
        <p>{this.data.liked ? 'You liked omi.' : <button> {
          this.data.liked = true
          this.update()
        }} &gt;{this.store.data.name}</button>}</p></div></div>

import { WeElement, define } from 'omio'

define('my-detail', class extends WeElement {
  static css = require('./_my-detail.css')

  render(props) {

    return <div class="root">
      <div class="container">
        <h1>{props.title}</h1>
        <p>This is detail page render by <a href="https://github.com/Tencent/omi"> Omi Framework</a>.</p>
        <p>【{this.store.data.id}】{this.store.data.detail}</p>
        <a href="/">Go back Home</a>
      </div>
    </div>
  }
})

import { define, h, rpx } from 'omio'
import '../game'
import './_index.css'

define('my-index', ({ store }) => (
  <div class="container">
    <h1>OMI SNAKE</h1>

    

    <div class="ctrl">
      <div class="btn cm-btn cm-btn-dir up"><i></i><em></em><span>Up</span></div>
      <div class="btn cm-btn cm-btn-dir down"><i></i><em></em><span>Down</span></div>
      <div class="btn cm-btn cm-btn-dir left"><i></i><em></em><span>Left</span></div>
      <div class="btn cm-btn cm-btn-dir right"><i></i><em></em><span>Right</span></div>
      <div class="btn cm-btn space"><i></i><span>加速/减速</span></div>
      <div class="btn reset small"><i></i><span>Reset</span></div>
      <div class="btn pp small"><i></i><span>{store.data.paused ? 'Play' : 'Pause'}</span></div>
    </div>
  </div>
), {

import { WeElement, define } from 'omio'

define('my-element', class extends WeElement {
  install() {
    this.data = { liked: false }
  }

  static css = 'button{ color: red; }'

  render() {
    if (this.data.liked) {
      return 'You liked this.'
    }

    return <button> {
      this.data.liked = true
      this.update()
    }} &gt;Like</button>
  }

import { define, h, rpx } from 'omio'
import './_index.css'

define('my-game', _ => (
  <div class="game">
    {_.store.data.map.map(row =&gt; {
      return <p>
        {row.map(col =&gt; {
          if (col) {
            return <b class="s"></b>
          }
          return <b></b>
        })}
      </p>
    })}
  </div>
), {
    use: ['map'],
    css: ("undefined" != typeof wx &amp;&amp; wx.getSystemInfoSync) ? '' : rpx(require('./_index.css'))
  })

import { WeElement, define } from 'omio'

define('my-html', class extends WeElement {
  
  static defaultProps = {
    styles: [],
    scripts: [],
  };

  render() {
    const { title, description, styles, scripts, app, children, css, scriptData } = this.props;
    return (
      
        
          
          
          <title>{title}</title>

export default function createApp() {
  const container = document.createElement('div')
  container.id = 'app'
  document.body.appendChild(container)

  render(, '#app', store)
}