Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider exporting Fbt, FbtParam, FbtPlural #202

Open
alexandernanberg opened this issue Mar 17, 2021 · 6 comments
Open

Consider exporting Fbt, FbtParam, FbtPlural #202

alexandernanberg opened this issue Mar 17, 2021 · 6 comments

Comments

@alexandernanberg
Copy link
Contributor

🚀 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
Copy link
Contributor Author

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
Copy link
Contributor

mrtnzlml commented Apr 6, 2021

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
Copy link
Contributor

retyui commented Aug 24, 2021

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
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor

retyui commented Oct 9, 2021

// 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',
    },
  ],

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants