Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Vue & Svelte server renderer types #12776

Merged
merged 3 commits into from
Jan 2, 2025
Merged

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.

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
4 checks passed
@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