# Bio: introduction to typed components.
## 0.0.0.2021
this part of the specifications will only deal with the types of components. To know the overall structure of a component, [please follow the link here](./structure.component.md).
### 3.1
> Supported types:
> - `app` (application): the component at the root of the application
> - `component`: basic component with a template and a script element
> - `async`: provides asynchrone contexts
> - `store`: provides reactive data to all parent components
> - `router`: a router for the application, can choose between the child components depending on the url
> - `gl` (three.js based): a three.js
> - `controller`
#### Details
App Component
> Bio will use the component, whose type is `app`, as the root of the application. this component cannot be imported into any other component. This component can expose the tag for better search engine optimization.
> - usage: `export app `
> - syntax: `ExportStatement AppStatement Node NodeClosing`
```ts
export app
Hello World
```
Component
> A basic component can only expose an optional template ([see here](./template.md)) or an optional script ([see here](./template.md)).
```ts
export component
List of users:
${user.name}
```
Async Component
> Some users will want to incorporate asynchronous methods and have these methods influence the rendering and editing process of the component. This is made possible with async components.
> Such as, for example, the elements of a component that do not show until a promise is resolved or the ability to wait for the resolution of a child component or the possibility to defer the rendering of a child component.
```ts
export async setTimeout(resolve, 1500))}>
```
Store Component
> A store component is a single component, without duplication, throughout the application, it extends and exposes its data to all connected components, in other words where the store component is imported.
```ts
import component { UserController } from '@/examples/ogone.revision-b.3/app/controllers/ControllerUser.bio'
export store (this.isOpen = !this.isOpen)}
@void checkController={async () => await UserController.get('/')} />
```
Router Component
> A router component is a component that uses the value of the application url. It will choose among its child components, the one that matches and matches the most with the url of the application. The router will be able to expose the URL parameters to the selected child component.
```ts
import component { Route2 } from '@/examples/ogone.revision-b.3/app/pages/Body.bio';
import component { Route404 } from '@/examples/ogone.revision-b.3/app/components/404.bio';
export router
```
Controller Component
> TODO
GL Component
> TODO
### 3.2
> the `ComponentTypeStatement` token is one of the supported types