Draft-js: ContentBlock. Cannot implement

[steida]

v0.10.5

Monitor logs will go to /private/tmp/flow/zSUserszSsteidazSdevzSeste.monitor_log
Error: node_modules/draft-js/lib/ContentBlock.js.flow:54
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^^^^ ContentBlock. Cannot implement
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^ BlockNode
Property findEntityRanges is incompatible:
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^^^^ ContentBlock. Covariant property findEntityRanges incompatible with invariant use in
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^ BlockNode

Error: node_modules/draft-js/lib/ContentBlock.js.flow:54
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^^^^ ContentBlock. Cannot implement
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^ BlockNode
Property findStyleRanges is incompatible:
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^^^^ ContentBlock. Covariant property findStyleRanges incompatible with invariant use in
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^ BlockNode

Error: node_modules/draft-js/lib/ContentBlock.js.flow:54
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^^^^ ContentBlock. Cannot implement
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^ BlockNode
Property getCharacterList is incompatible:
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^^^^ ContentBlock. Covariant property getCharacterList incompatible with invariant use in
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^ BlockNode

Error: node_modules/draft-js/lib/ContentBlock.js.flow:54
54: class ContentBlock extends ContentBlockRecord implements BlockNode {
^^^^^^^^^^^^ ContentBlock. Cannot implement

[steida]

Temp fix (it contains another temp fix) in .flowconfig

[untyped]
; https://github.com/facebook/draft-js/issues/1496#issuecomment-353895318
.*/node_modules/draft-js/lib/DraftEditor.react.js.flow
; https://github.com/facebook/draft-js/issues/1621
.*/node_modules/draft-js/lib/ContentBlock.js.flow
.*/node_modules/draft-js/lib/ContentBlockNode.js.flow

[ericbiewener]

Getting the same thing, using flow 0.64.0.

[mitermayer]

Will look into this. cc @flarnie

[etrepum]

The tricky part about this one is that the error isn't present in the draft-js source tree, it only manifests in the distribution version due to the babel transform used by the gulp flow task.

The interface declaration for BlockNode.js looks like this:

export interface BlockNode {
  findEntityRanges(
    filterFn: (value: CharacterMetadata) => boolean,
    callback: (start: number, end: number) => void,
  ): void,

  /* ...rest of implementation elided */
}

The flow transform will output this:

export interface BlockNode {
  findEntityRanges: (
    filterFn: (value: CharacterMetadata) => boolean,
    callback: (start: number, end: number) => void,
  ) => void,

  /* ...rest of implementation elided */
}

There are basically three options to fix this:

1. Don't transform interface methods in this way in the first place
2. Transform interface methods as covariant function properties
3. Change the source definition to use covariant function properties instead of methods (PR #1683 takes this approach)

For 2 or 3 the output would look like this:

export interface BlockNode {
  +findEntityRanges: (
    filterFn: (value: CharacterMetadata) => boolean,
    callback: (start: number, end: number) => void,
  ) => void,

  /* ...rest of implementation elided */
}