How do I share a variable from the ssr typescript with the client side typescript?
#how do I use Astro.params in <script> <script> ?
proud iris
marsh galeBOT
Hi @proud iris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Astro, the code in the frontmatter (between the --- fences) runs on the server and is not available in the browser. To send variables from the server to the client, you need a way to store your variables and then read them when JavaScript runs in the browser.
One way to do this is to use data-* attributes to store the value of variables in your HTML output. Scripts, including custom elements, can then read these attributes using an element’s dataset property once your HTML loads in the browser. Here's an example:
---const { message = 'Welcome, world!' } = Astro.props;---
<!-- Store the message prop as a data attribute. -->
<astro-greet data-message={message}>
<button>Say hi!</button>
</astro-greet>
<script>
class AstroGreet extends HTMLElement {
constructor() {
super();
// Read the message from the data attribute.
const message = this.dataset.message;
const button = this.querySelector('button');
button.addEventListener('click', () => {
alert(message);
});
}
}
customElements.define('astro-greet', AstroGreet);
</script>
In this example, a message prop is stored in a data-message attribute, so the custom element can read this.dataset.message and get the value of the prop in the browser (source (https://docs.astro.build/en/guides/client-side-scripts#pass-frontmatter-variables-to-scripts)).
Another way to pass server-side variables from your component frontmatter into the client <script> tags is by using define:vars={...}. Any JSON-serializable frontmatter variable is supported, including props passed to your component through Astro.props. Values are serialized with JSON.stringify(). However, using define:vars on a <script> tag implies the is:inline directive, which means your scripts won’t be bundled and will be inlined directly into the HTML (source (https://docs.astro.build/en/reference/directives-reference#definevars)).
Please note that exporting variables from Astro components isn't supported (source (https://github.com/withastro/astro/issues/8566)).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
proud iris
@marsh gale Property 'dataset' does not exist on type 'never'.ts(2339)
marsh galeBOT
Let me check the knowledge base for you. One moment! :books:
The error message Property 'dataset' does not exist on type 'never'.ts(2339) typically occurs when TypeScript cannot infer the correct type of an object, and defaults to the never type. In this case, it seems like TypeScript is unable to determine that this inside your custom element class refers to an instance of HTMLElement, which does have a dataset property.
To resolve this issue, you can explicitly tell TypeScript that this is of type HTMLElement by using a type assertion:
const message = (this as HTMLElement).dataset.message;
This tells TypeScript to treat this as an HTMLElement, and should allow you to access the dataset property without any type errors.