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[]) => boolean context?: 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

rmIEFP

• 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>
    }
  }

HF.camel2kebab

• 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`

OC.makeFC

• 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

OC.reactive

• desc: generate some reactive data
• usecase: https://codepen.io/w-xuefeng/pen/ZEKNyLm
• preview: https://codepen.io/w-xuefeng/full/ZEKNyLm

OC.createContext

• desc: generate Provider/Consumer ComponentConstructor
• usecase: https://codepen.io/w-xuefeng/pen/LYyxqLo
• preview: https://codepen.io/w-xuefeng/full/LYyxqLo

OC.useContext

• desc: context Consumer Hooks
• usecase: https://codepen.io/w-xuefeng/pen/LYyxqLo
• preview: https://codepen.io/w-xuefeng/full/LYyxqLo

OH.useMemo

• desc: computed and memorize result at same dependencies
• usecase: https://codepen.io/w-xuefeng/pen/mdmZJQb
• preview: https://codepen.io/w-xuefeng/full/mdmZJQb

OH.useEffect

• desc: It is similar to React.useEffect, but the context needs to be passed in manually
• usecase: https://codepen.io/w-xuefeng/pen/KKmjJJa
• preview: https://codepen.io/w-xuefeng/full/KKmjJJa