# mr-world

> The global variable integration for Astro 🌐

Latest version **0.0.14** (published 2025-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install mr-world
pnpm add mr-world
yarn add mr-world
bun add mr-world
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2025-03-06 |
| First published | 2023-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 23 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | John L. Armstrong IV |
| Maintainers | jlarmstrongiv |
| Keywords | mr-world, astro, astrojs, withastro, astro-integration, astro-component, global, globalThis, window, global variable, global variables, serialize, deserialize |

## Links

- npm: https://www.npmjs.com/package/mr-world
- Repository: https://github.com/jlarmstrongiv/mr-world
- Homepage: https://github.com/jlarmstrongiv/mr-world/#readme
- Issues: https://github.com/jlarmstrongiv/mr-world/issues
- npm.io page: https://npm.io/package/mr-world

## Recent versions

- 0.0.14 (latest) — 2025-03-06
- 0.0.13 — 2025-03-06
- 0.0.12 — 2024-02-28
- 0.0.11 — 2024-02-28
- 0.0.10 — 2023-11-28
- 0.0.9 — 2023-11-12
- 0.0.7 — 2023-09-05
- 0.0.5 — 2023-08-03
- 0.0.4 — 2023-08-01
- 0.0.3 — 2023-08-01
- 0.0.2 — 2023-08-01
- 0.0.1 — 2023-08-01
- 0.0.0 — 2023-08-01

## README

# `mr-world` The global variable integration for Astro

<p align="center">
  <a href="https://github.com/jlarmstrongiv/mr-world#readme" target="_blank">
    <img alt="mr-world" src="https://raw.githubusercontent.com/jlarmstrongiv/mr-world/HEAD/logos/mr-world.jpg" width="400" height="225" style="max-width: 100%; object-fit: cover;">
  </a>
</p>

<p align="center">
  It’s never a matter of old and new. It’s only about patterns.
  <br />
  —Mr. World, American Gods
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/mr-world"><img src="https://img.shields.io/npm/dt/mr-world.svg" alt="Total Downloads"></a>
  <!-- https://github.com/mr-world/mr-world/releases -->
  <a href="https://www.npmjs.com/package/mr-world?activeTab=versions"><img src="https://img.shields.io/npm/v/mr-world.svg" alt="Latest Release"></a>
  <a href="https://github.com/jlarmstrongiv/mr-world/blob/main/LICENSE.md"><img src="https://img.shields.io/npm/l/mr-world.svg" alt="License"></a>
</p>

---

## 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";
---

<Serialize id="locale" data={{ DEFAULT_LOCALE: "en" }} />
```

After your `<Serialize />` component:

```html
<script>
  import { deserialize } from "mr-world/deserialize";

  const data = await deserialize({
    id: "locale",
  });
</script>
```

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.

---
_Source: https://npm.io/package/mr-world · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._