{"id":13577510,"url":"https://github.com/astro-community/flow","last_synced_at":"2026-03-06T02:37:48.277Z","repository":{"id":49787297,"uuid":"518076781","full_name":"astro-community/flow","owner":"astro-community","description":"Use components to control flow in Astro.","archived":false,"fork":false,"pushed_at":"2023-03-13T22:29:53.000Z","size":38,"stargazers_count":58,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-02-16T18:09:59.066Z","etag":null,"topics":["astro","javascript","typescript"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/github/astro-community/flow","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/astro-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-07-26T13:39:21.000Z","updated_at":"2026-01-05T16:46:15.000Z","dependencies_parsed_at":"2024-01-16T20:28:13.094Z","dependency_job_id":"c3e8a5d1-036e-44c9-a48a-60c96ea385d5","html_url":"https://github.com/astro-community/flow","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":0.1333333333333333,"last_synced_commit":"a685fc65fbb94fb587a78a5799fb044750bccc13"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/astro-community/flow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astro-community%2Fflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astro-community%2Fflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astro-community%2Fflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astro-community%2Fflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/astro-community","download_url":"https://codeload.github.com/astro-community/flow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astro-community%2Fflow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30159653,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T22:39:40.138Z","status":"online","status_checked_at":"2026-03-06T02:00:08.268Z","response_time":250,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","javascript","typescript"],"created_at":"2024-08-01T15:01:22.053Z","updated_at":"2026-03-06T02:37:48.256Z","avatar_url":"https://github.com/astro-community.png","language":"JavaScript","readme":"# Astro Flow \u003cimg src=\"https://jonneal.dev/astro-logo.svg\" alt=\"\" width=\"90\" height=\"90\" align=\"right\"\u003e\n\n**Astro Flow** lets you use components to control flow in **[Astro](https://astro.build)**.\n\n[![NPM Version][npm-img]][npm-url]\n[![NPM Downloads][download-img]][download-url]\n[![Open in StackBlitz][stackblitz-img]][stackblitz-url]\n\nThe **`\u003cFor\u003e`** component loops over iterable objects like Array, Map, Set, and so on.\n\n```astro\n---\nimport { For } from '@astropub/flow'\n---\n\u003cFor of={items}\u003e{item =\u003e \u003ch2\u003e{item.title}\u003c/h2\u003e}\u003c/For\u003e\n```\n\nThe **`iterate()`** function provides the same functionality as a utility.\n\n```astro\n---\nimport { iterate } from '@astropub/flow'\n---\n{iterate(items, item =\u003e \u003ch2\u003e{item.title}\u003c/h2\u003e)}\n```\n\nThe **`\u003cWhen\u003e`** component renders if the given conditions are truthy.\n\n```astro\n---\nimport { When } from '@astropub/flow'\n---\n\u003cWhen test1={checkForTruthiness} test2={alsoCheckForTruthiness}\u003e\n  \u003cp\u003eEverything was Truthy!\u003c/p\u003e\n\n  \u003cFragment slot=\"else\"\u003e\n    \u003cp\u003eNot everything was truthy...\u003c/p\u003e\n  \u003c/Fragment\u003e\n\u003c/When\u003e\n```\n\nThe **`\u003cSwitch\u003e`** component evaluates an expression and renders the **`\u003cCase\u003e`** component that matches the expression's value.\n\n```astro\n---\nimport { Switch, Case } from '@astropub/flow'\n---\n\u003cSwitch of={null}\u003e\n  \u003cCase of={true}\u003e\n    \u003ch1\u003ePositive\u003c/h1\u003e\n    \u003ch2\u003eTruly Positive\u003c/h2\u003e\n  \u003c/Case\u003e\n  \u003cCase of={false}\u003e\n    \u003ch1\u003eNegative\u003c/h1\u003e\n    \u003ch2\u003eReally Negative\u003c/h2\u003e\n  \u003c/Case\u003e\n  \u003cCase default\u003e\n    \u003ch1\u003eDefault\u003c/h1\u003e\n    \u003ch2\u003eDefinitely Default\u003c/h2\u003e\n  \u003c/Case\u003e\n\u003c/Switch\u003e\n```\n\n## Usage\n\nAdd **Astro Flow** to your project.\n\n```shell\nnpm install @astropub/flow\n```\n\nUse **Astro Flow** in your project.\n\n```astro\n---\nimport { Case, For, Switch } from '@astropub/flow'\n---\n\u003cFor of={items}\u003e{\n  (item) =\u003e \u003ch2\u003e{item.title}\u003c/h2\u003e\n}\u003c/For\u003e\n\n\u003cWhen test={true}\u003e\n  \u003cp\u003eThings are true.\u003c/p\u003e\n\u003c/When\u003e\n\n\u003cSwitch of={null}\u003e\n  \u003cCase of={true}\u003e\n    \u003ch1\u003ePositive\u003c/h1\u003e\n    \u003ch2\u003eTruly Positive\u003c/h2\u003e\n  \u003c/Case\u003e\n  \u003cCase of={false}\u003e\n    \u003ch1\u003eNegative\u003c/h1\u003e\n    \u003ch2\u003eReally Negative\u003c/h2\u003e\n  \u003c/Case\u003e\n  \u003cCase default\u003e\n    \u003ch1\u003eDefault\u003c/h1\u003e\n    \u003ch2\u003eDefinitely Default\u003c/h2\u003e\n  \u003c/Case\u003e\n\u003c/Switch\u003e\n```\n\n\u003cbr /\u003e\n\nEnjoy!\n\n## Project Structure\n\nInside of this Astro project, you'll see the following folders and files:\n\n```\n/\n├── demo/\n│   ├── public/\n│   └── src/\n│       └── pages/\n            ├── index.astro\n│           └── ...etc\n└── packages/\n    └── flow/\n        ├── package.json\n        └── ...etc\n```\n\nThis project uses **workspaces** to develop a single package, `@astropub/flow`.\n\nIt also includes a minimal Astro project, `demo`, for developing and demonstrating the component.\n\n## Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command         | Action                                       |\n|:----------------|:---------------------------------------------|\n| `npm install`   | Installs dependencies                        |\n| `npm run start` | Starts local dev server at `localhost:3000`  |\n| `npm run build` | Build your production site to `./dist/`      |\n| `npm run serve` | Preview your build locally, before deploying |\n\nWant to learn more?\nRead the [Astro documentation][docs-url] or jump into the [Astro Discord][chat-url].\n\n[chat-url]: https://astro.build/chat\n[docs-url]: https://github.com/withastro/astro\n\n[npm-img]: https://img.shields.io/npm/v/@astropub/flow?color=%23444\u0026label=\u0026labelColor=%23CB0000\u0026logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE1MCAxNTAgNDAwIDQwMCIgZmlsbD0iI0ZGRiI+PHBhdGggZD0iTTE1MCA1NTBoMjAwVjI1MGgxMDB2MzAwaDEwMFYxNTBIMTUweiIvPjwvc3ZnPg==\u0026style=for-the-badge\n[npm-url]: https://www.npmjs.com/package/@astropub/flow\n[stackblitz-img]: https://img.shields.io/badge/-Open%20in%20Stackblitz-%231374EF?color=%23444\u0026labelColor=%231374EF\u0026logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDggMTIgMTgiIGhlaWdodD0iMTgiIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0xMCAxNy42aDUuMmwtMyA3LjRMMjIgMTQuNGgtNS4ybDMtNy40TDEwIDE3LjZaIi8+PC9zdmc+\u0026style=for-the-badge\n[stackblitz-url]: https://stackblitz.com/github/astro-community/flow\n[download-url]: https://www.npmjs.com/package/@astropub/flow\n[download-img]: https://img.shields.io/badge/dynamic/json?url=https://api.npmjs.org/downloads/point/last-week/@astropub/flow\u0026query=downloads\u0026label=⇓+week\u0026color=%23444\u0026labelColor=%23EEd100\u0026style=for-the-badge\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastro-community%2Fflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fastro-community%2Fflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastro-community%2Fflow/lists"}