omi-tools
TypeScript icon, indicating that this package has built-in type declarations

1.0.35 • Public • Published

omi-tools

Auxiliary tools for omi

NPM version NPM downloads

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

OC.createContext

OC.useContext

OH.useMemo

OH.useEffect

Readme

Keywords

Package Sidebar

Install

npm i omi-tools

Weekly Downloads

1

Version

1.0.35

License

MIT

Unpacked Size

32.4 kB

Total Files

31

Last publish

Collaborators

  • w-xuefeng