Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/astro-community/flow
Use components to control flow in Astro.
https://github.com/astro-community/flow
astro javascript typescript
Last synced: about 1 month ago
JSON representation
Use components to control flow in Astro.
- Host: GitHub
- URL: https://github.com/astro-community/flow
- Owner: astro-community
- Created: 2022-07-26T13:39:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-13T22:29:53.000Z (over 1 year ago)
- Last Synced: 2024-10-10T08:59:59.499Z (about 1 month ago)
- Topics: astro, javascript, typescript
- Language: JavaScript
- Homepage: https://stackblitz.com/github/astro-community/flow
- Size: 37.1 KB
- Stars: 52
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Astro Flow 
**Astro Flow** lets you use components to control flow in **[Astro](https://astro.build)**.
[![NPM Version][npm-img]][npm-url]
[![NPM Downloads][download-img]][download-url]
[![Open in StackBlitz][stackblitz-img]][stackblitz-url]
The **``** component loops over iterable objects like Array, Map, Set, and so on.
```astro
---
import { For } from '@astropub/flow'
---
{item =>
{item.title}
}
```
The **`iterate()`** function provides the same functionality as a utility.
```astro
---
import { iterate } from '@astropub/flow'
---
{iterate(items, item =>
{item.title}
)}
```
The **``** component renders if the given conditions are truthy.
```astro
---
import { When } from '@astropub/flow'
---
Everything was Truthy!
Not everything was truthy...
```
The **``** component evaluates an expression and renders the **``** component that matches the expression's value.
```astro
---
import { Switch, Case } from '@astropub/flow'
---
Positive
Truly Positive
Negative
Really Negative
Default
Definitely Default
```
## Usage
Add **Astro Flow** to your project.
```shell
npm install @astropub/flow
```
Use **Astro Flow** in your project.
```astro
---
import { Case, For, Switch } from '@astropub/flow'
---
{
(item) =>
{item.title}
}
Things are true.
Positive
Truly Positive
Negative
Really Negative
Default
Definitely Default
```
Enjoy!
## Project Structure
Inside of this Astro project, you'll see the following folders and files:
```
/
├── demo/
│ ├── public/
│ └── src/
│ └── pages/
├── index.astro
│ └── ...etc
└── packages/
└── flow/
├── package.json
└── ...etc
```
This project uses **workspaces** to develop a single package, `@astropub/flow`.
It also includes a minimal Astro project, `demo`, for developing and demonstrating the component.
## Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
|:----------------|:---------------------------------------------|
| `npm install` | Installs dependencies |
| `npm run start` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run serve` | Preview your build locally, before deploying |
Want to learn more?
Read the [Astro documentation][docs-url] or jump into the [Astro Discord][chat-url].
[chat-url]: https://astro.build/chat
[docs-url]: https://github.com/withastro/astro
[npm-img]: https://img.shields.io/npm/v/@astropub/flow?color=%23444&label=&labelColor=%23CB0000&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE1MCAxNTAgNDAwIDQwMCIgZmlsbD0iI0ZGRiI+PHBhdGggZD0iTTE1MCA1NTBoMjAwVjI1MGgxMDB2MzAwaDEwMFYxNTBIMTUweiIvPjwvc3ZnPg==&style=for-the-badge
[npm-url]: https://www.npmjs.com/package/@astropub/flow
[stackblitz-img]: https://img.shields.io/badge/-Open%20in%20Stackblitz-%231374EF?color=%23444&labelColor=%231374EF&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDggMTIgMTgiIGhlaWdodD0iMTgiIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0xMCAxNy42aDUuMmwtMyA3LjRMMjIgMTQuNGgtNS4ybDMtNy40TDEwIDE3LjZaIi8+PC9zdmc+&style=for-the-badge
[stackblitz-url]: https://stackblitz.com/github/astro-community/flow
[download-url]: https://www.npmjs.com/package/@astropub/flow
[download-img]: https://img.shields.io/badge/dynamic/json?url=https://api.npmjs.org/downloads/point/last-week/@astropub/flow&query=downloads&label=⇓+week&color=%23444&labelColor=%23EEd100&style=for-the-badge