Omi-tools NPM | npm.io

omi-tools

Auxiliary tools for omi

tools	params	returns	desc
rmIEFP	props: object	props(without internal events):object	remove internal events from props
HF.camel2kebab	name(camelCase/PascalCase): string	name(kebabCase): string	convert camelCase or PascalCase to kebabCase
OC.makeFC	`tagName`: `string`,`render`: `(props: Omi.OmiProps<Props>, store: Store) => JSX.Element`,`lifeTimes?`: `Partial<IOmiLifetimes<Props, Store>>`,`extraStore?`: `Store`	`FunctionComponent`: `FCConstructor<Props, Store>`	generate a component or element in the form of render-function declaration
OC.reactive	`data`: `object`	`hooks`: `Function`	generate some reactive data
OC.createContext	`defaultValue`: any	`IOmiContext<T>`: {`Provider`: `ProviderConstructor<T>`, `Consumer`: `ConsumerConstructor`}	generate Provider/Consumer ComponentConstructor
OC.useContext	`context`: {`Provider`: `ProviderConstructor<T>`, `Consumer`: `ConsumerConstructor`}	`value`: T	Context Consumer Hooks
OH.useMemo	`callback`: `() => T`,`deps`: `any[]`,`shouldUpdated?`: `(prevDeps: any[], nextDeps: any[]) => booleancontext?`: `WeElement Context`	`computedData`: `T`	computed and memorize result at same dependencies
OH.useEffect	`callback`: `() => T`,`deps`: `any[]`,`context?`: `WeElement Context`	void	It is similar to React.useEffect, but the `context` needs to be passed in manually

Explanation

desc: remove internal events like onClick from props to avoid multiple binding times

usecase:

import { Component, h, tag } from 'omi'
import { rmIEFP } from 'omi-tools'
import css from '_style.less'

const tagName = 'o-title'

interface ITitleProps {
  className?: string
  style?: string
  title: string
  onClick?: (e: MouseEvent) => void
}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      [tagName]: Omi.Props & Partial<ITitleProps>
    }
  }
}

@tag(tagName)
export default class Title extends Component<ITitleProps> {
  static css = css
  render(props: Omi.OmiProps<ITitleProps>) {
    return <h1 {...rmIEFP(props)}>{props.title}</h1>
  }
}

desc: convert variable name from camelCase or PascalCase form to kebabCase form

usecase:

import { HF } from 'omi-tools'
const tagName = HF.camel2kebab('MyCustomElementName');
// > tagName: `my-custom-element-name`

desc: generate a component or element in the form of render-function declaration

usecase:

import { OC, rmIEFP } from 'omi-tools'
import css from '_style.less'

const tagName = 'o-h1-title'

interface ITitleProps {
  className?: string
  style?: string
  title: string
  onClick?: (e: MouseEvent) => void
}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      [tagName]: Omi.Props & Partial<ITitleProps>
    }
  }
}

const Title = OC.makeFC<ITitleProps>(
  tagName,
  props => <h1 {...rmIEFP(props)}>{props.title}</h1>,
  { staticCss: css }
)

export default Title