Consider exporting `Fbt`, `FbtParam`, `FbtPlural`

[alexandernanberg]

🚀 Feature Proposal

Export "empty" Fbt components

Motivation

Allow fbt to work better with TypeScript and friends. With this change types could be added to DefinentlyTyped and would make the setup a lot easier for TypeScript projects.

I think that it would make learning fbt easier in some sense too, using <fbt> and <fbt:param> throws people off when first seeing it.

Also if the babel-plugin was updated to I think we could remove the need for a auto-import option described in #194

Example

Please provide an example for how this feature would be used.

import {Fbt} from 'fbt'

function App() {
  return <Fbt desc="Greeting">Hello world</Fbt>
}

Pitch

I don't see how this could be solved outside of fbt

[alexandernanberg]

Actually I was able to get typings to work with namespaced elements (<fbt:param> etc), so just creating @types/fbt would solve a lot. Might pick that up once I have some extra time.

Atm I just copied https://gist.github.com/retyui/c3bd35220fb5c95c322df866834f0913#file-index-d-ts locally. And you can even make it work in plain JS projects in VSCode with a jsconfig.json file.

[mrtnzlml]

I'd like to support this proposal as well. Using JSXNamespacedName like fbt:param seems to be quite unconventional (even though valid) and it causes issues in various places like this one for example: jsx-eslint/eslint-plugin-react#2961

Having something which is more "reacty" would be very nice.

[retyui]

typescript 4.2 support XML syntax in JSX (<ftb:param>{...}</ftb:param>): microsoft/TypeScript#41601 (comment)

I think we can officially add ts defenintions for fbt package!

[alexandernanberg]

FYI I already have created @types/fbt, they are not perfect but works for my use cases. Feel free to send PRs improving them

[mrtnzlml]

I have another example where <fbt /> caused an issue: jsx-eslint/eslint-plugin-react#3080

Basically, there was a breaking change in eslint-plugin-react where they started ignoring lowercased JSX tags and as a consequence no-unused-vars started throwing an error everywhere FBT is used.

Cc @kayhadrin and @jrwats: do you have any thoughts on this issue? 🤔

[retyui]

// Before
import {fbt} from 'fbt';
<fbt/>;

// After
import {fbt} from 'fbt'; // never used, so eslint 100% right
React.createElement("fbt");

   // you can ignore it using rule options
  '@typescript-eslint/no-unused-vars': [
    'error',
    {
      varsIgnorePattern: 'fbt',
    },
  ],