I see some code using things like:
export interface Props { variable: string; }
And some just import like:
const { variable } = Astro.props;
What's the difference?
#Do you have to export props?
orchid swallow
hexed thunder
The props interface helps provide code completion in other Astro files when providing the component with the props
solid widget
@orchid swallow I do it with export interface. in my vs code then when in my fences i type import {componentName} it autocompletes the line for me, thus easiyl importing the respective component. Additionally i think, in the rendering tag of the component, vs code auto suggests the props to me when I put the cursor there
quartz ivy
To add my 2c, although I've seen the Props being "exported", I've never found that is needed in my use cases. Just interface Props {...} tends to work for me. I have no idea what the actual difference is though (or if it'll come back to bite me in the ... 😅 )
hexed thunder
Export means that you can construct an object with the prop type for that component
orchid swallow
Export means that you can construct an object with the prop type for that compon...
ELI5? 😅
hexed thunder
What?
thorn mulch
It doesn't change anything for the tooling if you export the props interface or not, it only matter if you want to import the type somewhere else
quartz ivy
Export means that you can construct an object with the prop type for that compon...
But in the context of an astro component, what's the difference? For example:
interface Props {
image: string;
altText: string;
imagePosition?: 'right' | 'left';
productName: string;
productCode: string;
}
still gives me the suggestions/autocomplete etc when imported from another component, I've no need to "export" it like I would a constant/function from a normal typescript file.
oohh.. crossover with @thorn mulch 😅
thorn mulch
The reason why there's confusion around if you need to export the interface or not is that our docs originally said you needed to
So, if you look at some old Astro code, it'll probably be exported (even though it doesn't change anything and never did)
(again, unless you want to import it in another file, of course)
quartz ivy
That would make sense. I did used to do it, but recently (can't remember when) forgot to add the export yet it still worked, so thought "Hey that less characters to type" 😉
hexed thunder
(again, unless you want to import it in another file, of course)
That’s what I meant
quartz ivy
Out of curiosity as I've never come across a use case myself, where else would you import an astro component, aside from another component?
thorn mulch
Inside .js and .ts files under certain usecases
For instance, if you're making a library, you'll most likely export the components from a .ts file somewhere in your project
quartz ivy
Ah ok... sounds like a more advanced case than I've needed then.
thorn mulch
Additionally, in the future when we have testing support, you'll need to import .astro files and pass them to functions
quartz ivy
Testing? What's that then? 😁
thorn mulch
In the future, we're planning for you to be able to do this:
import { expect, test } from 'vitest'
import { render } from 'astro/test'
import Greeting from './Greeting.astro'
test('Greeting', async () => {
const { container } = await render(<Greeting />)
expect(container).toBeDefined()
expect(container.textContent).toBe('Hello world')
})