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

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

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

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

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

• 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