How to use omio - 10 common examples

To help you get started, we’ve selected a few omio examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Tencent / omi / packages / omi-ssr / src / server.js View on Github external
//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 = {
github Tencent / omi / packages / omi-ssr / src / routes / not-found / not-found.js View on Github external
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>
    );
  }
})
github wechat-miniprogram / kbone / examples / demo6 / src / components / todo-footer / index.js View on Github external
import { define, h } from 'omio'
import './index.css'

define('todo-footer', _ =&gt; {

  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>
github Tencent / omi / packages / omi-ssr / src / routes / home / my-home.js View on Github external
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>
github Tencent / omi / packages / omi-ssr / src / routes / detail / my-detail.js View on Github external
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>
  }
})
github Tencent / omi / packages / omi-kbone / src / components / index / index.js View on Github external
import { define, h, rpx } from 'omio'
import '../game'
import './_index.css'

define('my-index', ({ store }) =&gt; (
  <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>
), {
github Tencent / omi / packages / omi-ssr-simple / src / my-element.js View on Github external
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>
  }
github Tencent / omi / packages / omi-kbone / src / components / game / index.js View on Github external
import { define, h, rpx } from 'omio'
import './_index.css'

define('my-game', _ =&gt; (
  <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'))
  })
github Tencent / omi / packages / omi-ssr / src / my-html.js View on Github external
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>
github Tencent / omi / packages / omi-kbone / src / index.js View on Github external
export default function createApp() {
  const container = document.createElement('div')
  container.id = 'app'
  document.body.appendChild(container)

  render(, '#app', store)
}

omio

Omi for old browsers(IE8+).

MIT
Latest version published 4 years ago

Package Health Score

60 / 100
Full package analysis