astro-variables

This is an Astro integration that manages variables between server and client in Astro projects.

Usage

Prerequisites

TODO:

Installation

Install the integration automatically using the Astro CLI:

pnpm astro add astro-variables

npx astro add astro-variables

yarn astro add astro-variables

Or install it manually:

1. Install the required dependencies

pnpm add astro-variables

npm install astro-variables

yarn add astro-variables

2. Add the integration to your astro config

+import variables from "astro-variables";

export default defineConfig({
  integrations: [
+    variables(),
  ],
});

3. Add middleware

import { defineVariables } from "astro-variables";
import { sequence } from "astro:middleware";

const variables = defineVariables(async () => {
  return {
    hello: "Hello World",
    count: 1,
  };
});

export const onRequest = sequence(variables /** ...other middlewares */);

4. Use the variables in your components

---
import variables from 'astro:variables';

// Access the variables in your server-side code:

console.log(variables.hello, variables.count); // Get value by property
console.log(variables()); // Execute the function to get all variables
---

<p>Hello: {variables.hello}</p>
<p>Count: {variables.count}</p>
<p>All: {JSON.stringify(variables())}</p>

<script>
  // Access the variables in your client-side code:
  import variables from 'astro:variables';

  console.log(variables.hello, variables.count); // Get value by property
  console.log(variables()); // Execute the function to get all variables
</script>

## Contributing

This package is structured as a monorepo:

- `playground` contains code for testing the package
- `package` contains the actual package

Install dependencies using pnpm:

```bash
pnpm i --frozen-lockfile

Start the playground and package watcher:

pnpm dev

You can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.

Licensing

MIT Licensed. Made with ❤️ by varHarrie.

Acknowledgements

• Created using astro-integration-template.
• Inspired by the astro-global.