Skip to content
This repository has been archived by the owner on Nov 18, 2024. It is now read-only.

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

🚀 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
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
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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants