[!WARNING]
This package is deprecated. Use https://inox-tools.fryuni.dev/request-state instead.
This is an Astro integration that allows you to avoid hydration mismatches by getting the data on both server and client using an AsyncLocalStorage.
When using the Cloudflare adapter, you'll need to enable AsyncLocalStorage manually.
- All data must be serializable
- The data will be be made static on prerendered pages
Install the integration automatically using the Astro CLI:
pnpm astro add astro-alsnpx astro add astro-alsyarn astro add astro-alsOr install it manually:
- Install the required dependencies
pnpm add astro-alsnpm install astro-alsyarn add astro-als- Add the integration to your astro config
+import als from "astro-als";
export default defineConfig({
integrations: [
+ als(),
],
});In your project root, create a new als.config.ts file:
// als.config.ts
import { defineAlsConfig } from "astro-als/config";
export default defineAlsConfig({
seedData(context) {
return {
// Your serializable data here
};
},
});This code will be run in a post middleware. The best practise is to only use the seedData function to return data without causing any side-effects.
In a shared layout, import AlsSerialize.astro:
---
// src/layouts/Layout.astro
import AlsSerialize from "astro-als/AlsSerialize.astro"
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<AlsSerialize />
</head>
<body>
<slot />
</body>
</html>You can now import the data server (within a request) and client side using getAlsData:
<script setup lang="ts">
// src/components/Test.vue
import { getAlsData } from "als:astro";
const data = getAlsData();
</script>
<template>
<pre>{{ JSON.stringify(data, null, 2) }}</pre>
</template>---
// src/pages/index.astro
import Layout from "../layouts/Layout.astro";
import Test from "../components/Test.vue";
---
<Layout title="Welcome to Astro.">
<Test client:load />
</Layout>
Here is the TypeScript type:
export type Options = {
configFile?: string;
cliendId?: string;
disableConfigValidation?: boolean;
}Config file path for the integration, relative to the root directory. Defaults to "als.config".
import als from "astro-als";
export default defineConfig({
integrations: [
als({
configFile: "./my-custom-config.mjs"
}),
],
});Id used in the DOM to store the data. Defaults to "astro-als-data".
import als from "astro-als";
export default defineConfig({
integrations: [
als({
clientId: "my-custom-id"
}),
],
});Disables validation of the ALS Config file, eg. when there are conflicts with other packages. Defaults to false.
import als from "astro-als";
export default defineConfig({
integrations: [
als({
disableConfigValidation: true
}),
],
});This package is structured as a monorepo:
-
playgroundcontains code for testing the package -
packagecontains the actual package
Install dependencies using pnpm:
pnpm i --frozen-lockfileStart the playground and package watcher:
pnpm devYou can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.
MIT Licensed. Made with ❤️ by Florian Lefebvre.