Omi - Web Components Framework

import{render,signal,tag,Component,h}from'omi'constcount=signal(0)functionadd(){count.value++}functionsub(){count.value--}@tag('counter-demo')exportclassCounterDemoextendsComponent{staticcss='span { color: red; }'render(){return(<><buttononClick={sub}>-</button><span>{count.value}</span><buttononClick={add}>+</button></>)}}

import{h}from'omi'import'./counter-demo'render(<counter-demo/>,document.body)// orimport{CounterDemo,Other}from'./counter-demo'// Prevent tree Shaking when importing other thingsrender(<CounterDemo/>,document.body)// ordocument.body.appendChild(document.createElement('counter-demo'))

Install

npm i omi

$ npx omi-cli init my-app# or create js project by: npx omi-cli init-js my-app$cd my-app           $ npm start# develop$ npm run build# release

$ npx omi-cli init-spa my-app  $cd my-app           $ npm start# develop$ npm run build# release

Packages

Usage

TodoApp with reactivity functions

import{render,signal,computed,tag,Component,h}from'omi'consttodos=signal([{text:'Learn OMI',completed:true},{text:'Learn Web Components',completed:false},{text:'Learn JSX',completed:false},{text:'Learn Signal',completed:false}])constcompletedCount=computed(()=>{returntodos.value.filter(todo=>todo.completed).length})constnewItem=signal('')functionaddTodo(){// api atodos.value.push({text:newItem.value,completed:false})todos.update()// Trigger UI auto update// api b, same as api a// todos.value = [...todos.value, { text: newItem.value, completed: false }]newItem.value=''// Changing the value type can automatically update the UI}functionremoveTodo(index:number){todos.value.splice(index,1)todos.update()// Trigger UI auto update}@tag('todo-list')classTodoListextendsComponent{onInput=(event:Event)=>{consttarget=event.targetasHTMLInputElementnewItem.value=target.value}render(){return(<><inputtype="text"value={newItem.value}onInput={this.onInput}/><buttononClick={addTodo}>Add</button><ul>{todos.value.map((todo,index)=>{return(<li><label><inputtype="checkbox"checked={todo.completed}onInput={()=>{todo.completed=!todo.completedtodos.update()// Trigger UI auto update}}/>{todo.completed ?<s>{todo.text}</s> :todo.text}</label>{' '}<buttononClick={()=>removeTodo(index)}>❌</button></li>)})}</ul><p>Completed count:{completedCount.value}</p></>)}}render(<todo-list/>,document.body)

Auto Import h

import{defineConfig}from'vite'exportdefaultdefineConfig({esbuild:{jsxInject:"import { h } from 'omi'",jsxFactory:"h",jsxFragment:"h.f"}})

Define Cross Framework Component

import{tag,Component,h,bind}from'omi'@tag('my-counter')classMyCounterextendsComponent{staticprops={count:{type:Number,default:0,changed(newValue,oldValue){this.state.count=newValuethis.update()}}}state={count:null}install(){this.state.count=this.props.count}  @bindsub(){this.state.count--this.update()this.fire('change',this.state.count)}  @bindadd(){this.state.count++this.update()this.fire('change',this.state.count)}render(){return(<><buttononClick={this.sub}>-</button><span>{this.state.count}</span><buttononClick={this.add}>+</button></>)}}

Using in Vue3

<script setup>import {ref }from'vue'// import omi componentimport'./my-counter'defineProps({  msg:String,})constcount=ref(0)constchange= (e)=> {count.value=e.detail}</script><template>  <h1>{{ msg }}</h1>  <my-counter@change="change":count="count" />  <p>    【Omi】   </p>  <divclass="card">    <buttontype="button"@click="count++">count is {{ count }}</button>    <p>     【Vue】     </p>  </div></template>

this.fire('count-change',this.state.count)

<my-counter@count-change="change":count="count"/>

Using in React

import{useState,useRef,useEffect}from'react'importuseEventListenerfrom'@use-it/event-listener'import'./my-counter'functionApp(){const[count,setCount]=useState(100)constmyCounterRef=useRef(null)useEffect(()=>{constcounter=myCounterRef.currentif(counter){consthandleChange=(evt)=>{setCount(evt.detail)}counter.addEventListener('change',handleChange)return()=>{counter.removeEventListener('change',handleChange)}}},[])return(<><h1>Omi + React</h1><my-countercount={count}ref={myCounterRef}></my-counter><divclassName="card"><buttononClick={()=>setCount((count)=>count+1)}>          count is{count}</button></div></>)}exportdefaultApp

Contributors

License