https://github.com/jlarmstrongiv/mr-world
The global variable integration for Astro 🌐
https://github.com/jlarmstrongiv/mr-world
astro astro-component astro-integration astrojs deserialize global globalthis globalvariable globalvariables mr-world serialize window withastro
Last synced: 5 months ago
JSON representation
The global variable integration for Astro 🌐
- Host: GitHub
- URL: https://github.com/jlarmstrongiv/mr-world
- Owner: jlarmstrongiv
- License: mit
- Created: 2023-08-01T04:47:07.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-22T21:48:37.000Z (5 months ago)
- Last Synced: 2024-11-22T22:32:15.636Z (5 months ago)
- Topics: astro, astro-component, astro-integration, astrojs, deserialize, global, globalthis, globalvariable, globalvariables, mr-world, serialize, window, withastro
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/mr-world
- Size: 875 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `mr-world` The global variable integration for Astro
It’s never a matter of old and new. It’s only about patterns.
—Mr. World, American Gods
---
## Motivation
Provide an integration for Astro to define global variables that work in:
- [Astro middleware](https://docs.astro.build/en/guides/middleware/)
- [Astro endpoints](/Users/jlarmst/Desktop/code/astro/astro-global-testing/README.md)
- [Astro components](https://docs.astro.build/en/core-concepts/astro-syntax/)
- [Astro `.astro` pages](https://docs.astro.build/en/core-concepts/astro-pages/)
- [Astro props](https://docs.astro.build/en/core-concepts/astro-components/#component-props)
- [Astro `.mdx` files](https://docs.astro.build/en/guides/markdown-content/)
- [UI Framework props](https://docs.astro.build/en/core-concepts/framework-components/)
- [Script tags](https://docs.astro.build/en/guides/client-side-scripts/)
## Quick start
### Install
Install via [npm](https://www.npmjs.com/package/mr-world):
```shell
npm install mr-world
```
### Configure
In your Astro [config](https://docs.astro.build/en/guides/configuring-astro/#supported-config-file-types) file:
```ts
import { defineConfig } from "astro/config";
import { mrWorld } from "mr-world/integration";
export default defineConfig({
site: "https://example.com",
integrations: [
mrWorld({
id: "DEFAULT_LOCALE",
useEffect: () => {
// set global properties and functions
globalThis.DEFAULT_LOCALE = "en";
return () => {
// cleanup side effects
};
},
}),
],
});
```
In your Astro [`env.d.ts`](https://docs.astro.build/en/guides/typescript/#extending-window-and-globalthis) file:
```ts
declare module globalThis {
var DEFAULT_LOCALE: "en";
}
```
#### Configure script tags
In the head of your document:
```astro
---
import { Serialize } from "mr-world/serialize";
---
```
After your `` component:
```html
import { deserialize } from "mr-world/deserialize";
const data = await deserialize({
id: "locale",
});
```
You can pass a custom serializer as props or a custom deserializer in parameters. Custom serializers may support nested structures or other data types like `Date` or `ArrayBuffer`:
- [typeson](https://www.npmjs.com/package/typeson)
- [devalue](https://www.npmjs.com/package/devalue)
By default, `JSON.stringify` and `JSON.parse` are used as serializers.
## License
MIT Licensed
## Contributing
PRs welcome! Thank you for your help.