Improving the state of type definitions

Right now the typing situation is a mess. We have:

• Internal Flow typings within our core modules, which get stripped when we make a build.
• When we do a sync to www, we need to manually re-create the Flow type definitions for the synced modules.
• Open source doesn’t get any type definitions.
• Autocomplete within the playground and other modules is broken.

Looking into all of this more, it seems the reason for much of the problems is because we alias our Flow logic in our flow config file (.flowconfig).

module.name_mapper='^lexical$' -> '<PROJECT_ROOT>/packages/lexical/src/index.js'

module.name_mapper='^lexical/HeadingNode' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalHeadingNode.js'
module.name_mapper='^lexical/QuoteNode' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalQuoteNode.js'
module.name_mapper='^lexical/CodeNode' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalCodeNode.js'
module.name_mapper='^lexical/LinkNode' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalLinkNode.js'
module.name_mapper='^lexical/AutoLinkNode' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalAutoLinkNode.js'
module.name_mapper='^lexical/HashtagNode' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalHashtagNode.js'
module.name_mapper='^lexical/CodeHighlightNode' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalCodeHighlightNode.js'
module.name_mapper='^lexical/OverflowNode' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalOverflowNode.js'
module.name_mapper='^lexical/ExtendedNodes' -> '<PROJECT_ROOT>/packages/lexical/src/nodes/extended/LexicalExtendedNodes.js'

I feel that we should remove the aliasing on our Flow config entirely and instead we should opt to manually create flow definition files in each of the packages. So for example in packages/lexical, you’d have a Lexical.js.flow file, to match the corresponding Lexical.js build from dist. We’d need a flow definition file for each module we export to npm/sync, so we’d also have packages/lexical/HeadingNode.js.flow, packages/lexical-react/PlainTextPlugin.js.flow etc.

You’re probably, wondering what this affords us?

• We no longer need to create flow definitions on www, and instead we can sync these files to www as part of our sync script.
• It keeps the Flow definitions up-to-date as part of PRs that change, rather than the responsibility of the person doing the sync.
• It might fix all the autocomplete issues that we’re experiencing as it will make our github repo work as if the packages are black boxes.
• We can also publish the Flow definition files to npm so folks in open source can consume the typings.
• In the future when we move to TS, we can probably auto-generate the Flow definition files from our Typescript typings, and patch any bits up manually.

Thoughts?

[fantactuka]

We no longer need to create flow definitions on www, and instead we can sync these files to www as part of our sync script.

I think this one overweights other arguments quite a bit, manual flow create/update step is very error prone and hard to control

[trueadm]

@fantactuka We still need to update the flow definition file on github manually, but it’s a much smoother experience than doing later.