You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

95 lines
4.0 KiB

4 years ago
  1. import { SlotBindingData, AttributeExpressionData } from '@riotjs/dom-bindings'
  2. // This interface is only exposed and any Riot component will receive the following properties
  3. export interface RiotCoreComponent<Props = object, State = object> {
  4. // automatically generated on any component instance
  5. readonly props: Props
  6. readonly root: HTMLElement
  7. readonly name?: string
  8. // TODO: add the @riotjs/dom-bindings types
  9. readonly slots: SlotBindingData[]
  10. mount(
  11. element: HTMLElement,
  12. initialState?: State,
  13. parentScope?: object
  14. ): RiotComponent<Props, State>
  15. update(
  16. newState?: Partial<State>,
  17. parentScope?: object
  18. ): RiotComponent<Props, State>
  19. unmount(keepRootElement: boolean): RiotComponent<Props, State>
  20. // Helpers
  21. $(selector: string): HTMLElement
  22. $$(selector: string): [HTMLElement]
  23. }
  24. // Riot Pure Component interface that should be used together with riot.pure
  25. export interface RiotPureComponent<Context = object> {
  26. mount(
  27. element: HTMLElement,
  28. context?: Context,
  29. ): RiotPureComponent<Context>
  30. update(
  31. context?: Context,
  32. ): RiotPureComponent<Context>
  33. unmount(keepRootElement: boolean): RiotPureComponent<Context>
  34. }
  35. export interface PureComponentFactoryFunction<InitialProps = any, Context = object> {
  36. ({slots, attributes, props}:{ slots?: SlotBindingData[], attributes?: AttributeExpressionData[], props?: InitialProps; }): RiotPureComponent<Context>
  37. }
  38. // This object interface is created anytime a riot file will be compiled into javascript
  39. export interface RiotComponentShell<Props = object, State = object> {
  40. readonly css?: string
  41. readonly exports?: () => RiotComponentExport<Props, State>|object
  42. readonly name?: string
  43. // TODO: add the @riotjs/dom-bindings types
  44. template(): any
  45. }
  46. // Interface that can be used when creating the components export
  47. export interface RiotComponentExport<Props = object, State = object> {
  48. // optional on the component object
  49. state?: State
  50. // optional alias to map the children component names
  51. components?: {
  52. [key: string]: RiotComponentShell<Props, State>
  53. }
  54. // state handling methods
  55. shouldUpdate?(newProps: Props, currentProps: Props): boolean
  56. // lifecycle methods
  57. onBeforeMount?(currentProps: Props, currentState: State): void
  58. onMounted?(currentProps: Props, currentState: State): void
  59. onBeforeUpdate?(currentProps: Props, currentState: State): void
  60. onUpdated?(currentProps: Props, currentState: State): void
  61. onBeforeUnmount?(currentProps: Props, currentState: State): void
  62. onUnmounted?(currentProps: Props, currentState: State): void
  63. [key: string]: any
  64. }
  65. // All the RiotComponent Public interface properties are optional
  66. export interface RiotComponent<Props = object, State = object> extends RiotCoreComponent<Props, State>, RiotComponentExport<Props, State> {}
  67. export type RegisteredComponentsMap = Map<string, () => RiotComponent>
  68. export type ComponentEnhancer = <Props, State>(component: RiotComponent<Props, State>) => RiotComponent<Props, State>
  69. export type InstalledPluginsSet = Set<ComponentEnhancer>
  70. export function register<Props, State>(componentName: string, shell: RiotComponentShell<Props, State>): RegisteredComponentsMap
  71. export function unregister(componentName: string): RegisteredComponentsMap
  72. export function mount<Props = object, State = object>(selector: string, initialProps?: Props, componentName?: string): RiotComponent<Props, State>[]
  73. export function unmount(selector: string, keepRootElement: boolean):HTMLElement[]
  74. export function install(plugin: ComponentEnhancer):InstalledPluginsSet
  75. export function uninstall(plugin: ComponentEnhancer):InstalledPluginsSet
  76. export function component<Props , State>(shell: RiotComponentShell<Props, State>):(
  77. el: HTMLElement,
  78. initialProps?: Props,
  79. meta?: { slots: SlotBindingData[]; attributes: AttributeExpressionData[]; }
  80. ) => RiotComponent<Props, State>
  81. export function pure<InitialProps = object, Context = object, FactoryFunction = PureComponentFactoryFunction<InitialProps, Context>>(func: FactoryFunction): FactoryFunction
  82. export const version: string