Skip to content

Fix Vue & Svelte server renderer types#12776

Merged
ematipico merged 3 commits intowithastro:mainfrom
aminevg:main
Jan 2, 2025
Merged

Fix Vue & Svelte server renderer types#12776
ematipico merged 3 commits intowithastro:mainfrom
aminevg:main

Conversation

@aminevg
Copy link
Contributor

@aminevg aminevg commented Dec 18, 2024

Changes

When using Astro's container API outside of vite/vitest, renderers have to be manually imported and stored inside the container (as per docs).

import reactRenderer from "@astrojs/react/server.js";
import vueRenderer from "@astrojs/vue/server.js";
import mdxRenderer from "@astrojs/mdx/server.js";

const container = await experimental_AstroContainer.create();
container.addServerRenderer({renderer: vueRenderer});
container.addServerRenderer({renderer: mdxRenderer});

container.addServerRenderer({ renderer: reactRenderer });
container.addClientRenderer({ name: "@astrojs/react", entrypoint: "@astrojs/react/client.js" });

However, importing the Vue and Svelte server renderers results in a Typescript error:

import reactRenderer from "@astrojs/react/server.js"; // no error
import vueRenderer from "@astrojs/vue/server.js"; // error: 'vueRenderer' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.
import svelteRenderer from "@astrojs/svelte/server.js"; // error: 'vueRenderer' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

const container = await experimental_AstroContainer.create();
container.addServerRenderer({renderer: reactRenderer}); // no error
container.addServerRenderer({renderer: vueRenderer}); // error: Argument of type '{ renderer: any; }' is not assignable to parameter of type 'AddServerRenderer'.
container.addServerRenderer({renderer: svelteRenderer}); // error: Argument of type '{ renderer: any; }' is not assignable to parameter of type 'AddServerRenderer'.

This PR fixes the Vue & Svelte server renderer types (server.d.ts) to be more in line with React's types and fix the Typescript errors.

Testing

This was tested with a local project using the above code snippets.
(Could a test be written for the types?)

Docs

No documentation change needed as far as I can tell.

@changeset-bot
Copy link

changeset-bot bot commented Dec 18, 2024

🦋 Changeset detected

Latest commit: 12bec1d

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added pkg: svelte Related to Svelte (scope) pkg: vue Related to Vue (scope) pkg: integration Related to any renderer integration (scope) labels Dec 18, 2024
@ematipico
Copy link
Member

Thank you @aminevg, can you please add a changeset?

Copy link
Member

@ematipico ematipico left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fix looks good, but we miss the changeset

@ematipico ematipico merged commit 8809b85 into withastro:main Jan 2, 2025
@astrobot-houston astrobot-houston mentioned this pull request Jan 2, 2025
@aminevg
Copy link
Contributor Author

aminevg commented Jan 2, 2025

@ematipico Thank you! I'll make sure to include a changeset next time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg: integration Related to any renderer integration (scope) pkg: svelte Related to Svelte (scope) pkg: vue Related to Vue (scope)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants