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
• Astro endpoints
• Astro components
• Astro .astro pages
• Astro props
• Astro .mdx files
• UI Framework props
• Script tags

Quick start

Install

Install via npm:

npm install mr-world

Configure

In your Astro config file:

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 file:

declare module globalThis {
  var DEFAULT_LOCALE: "en";
}

Configure script tags

In the head of your document:

---
import { Serialize } from "mr-world/serialize";
---

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

After your <Serialize /> component:

<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
• devalue

By default, JSON.stringify and JSON.parse are used as serializers.

License

MIT Licensed

Contributing

PRs welcome! Thank you for your help.