Uh oh!
There was an error while loading. Please reload this page.
feat(astro): Add CSR support - #3911
Conversation
🦋 Changeset detectedLatest commit: aadf639 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
9daf40b to
c892565Comparecf4f5c6 to
ecaac43Compare8bfae44 to
39df490Compare1b466bd to
3fec45bComparechore: Remove bundled file chore(astro): Add back missing declarations
wobsoriano
commented
Aug 20, 2024
!snapshot |
clerk-cookie
commented
Aug 20, 2024
Hey @wobsoriano - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/astro@1.1.0-snapshot.v17a4abb --save-exact
npm i @clerk/backend@1.7.0-snapshot.v17a4abb --save-exact
npm i @clerk/chrome-extension@1.2.2-snapshot.v17a4abb --save-exact
npm i @clerk/clerk-js@5.15.0-snapshot.v17a4abb --save-exact
npm i @clerk/dev-cli@0.0.7-snapshot.v17a4abb --save-exact
npm i @clerk/elements@0.14.0-snapshot.v17a4abb --save-exact
npm i @clerk/clerk-expo@2.2.0-snapshot.v17a4abb --save-exact
npm i @clerk/express@0.0.29-snapshot.v17a4abb --save-exact
npm i @clerk/fastify@1.0.31-snapshot.v17a4abb --save-exact
npm i @clerk/localizations@2.6.0-snapshot.v17a4abb --save-exact
npm i @clerk/nextjs@5.3.2-snapshot.v17a4abb --save-exact
npm i @clerk/clerk-react@5.4.2-snapshot.v17a4abb --save-exact
npm i @clerk/remix@4.2.15-snapshot.v17a4abb --save-exact
npm i @clerk/clerk-sdk-node@5.0.28-snapshot.v17a4abb --save-exact
npm i @clerk/shared@2.5.2-snapshot.v17a4abb --save-exact
npm i @clerk/tanstack-start@0.2.2-snapshot.v17a4abb --save-exact
npm i @clerk/testing@1.2.11-snapshot.v17a4abb --save-exact
npm i @clerk/themes@2.1.21-snapshot.v17a4abb --save-exact
npm i @clerk/types@4.14.0-snapshot.v17a4abb --save-exact |
Uh oh!
There was an error while loading. Please reload this page.
| * | ||
| * $isLoadedStore.subscribe((authloaded => console.log(loaded)) | ||
| */ | ||
| export const $isLoadedStore = computed([$csrState], state => state.isLoaded); |
There was a problem hiding this comment.
What's the reliability issue with $clerkStore ?
There was a problem hiding this comment.
This could be added as JSdoc for other maintainers
| <style> | ||
| clerk-signed-out[hidden] { | ||
| display: none !important; |
There was a problem hiding this comment.
In case someone would like to animate in/out the children of <SignedOut/> would this be possible ?
There was a problem hiding this comment.
Updated the control components to have class props so they can override it. We'll mention this in the CSR reference docs when added 👍🏼
If only there's a way to not have a wrapper element and dynamically render the contents, but sadly no because of how astro components works
| permission?: never; | ||
| }; | ||
| import { isStaticOutput } from "virtual:@clerk/astro/config"; | ||
| import type { ProtectProps } from '../../types'; |
There was a problem hiding this comment.
Does this work because we now expose @clerk/astro/types ?
There was a problem hiding this comment.
We are only copying the types.ts file to so that it can still be resolvable when published. We don't export the types in package.json still, though. I don't see any helpful type to export 🤔
| .addDependency('@clerk/types', clerkTypesLocal) | ||
| .addDependency('@clerk/localizations', clerkLocalizationLocal); | ||
| const astroStatic = astroNode.clone().setName('astro-static').useTemplate(templates['astro-static']); |
There was a problem hiding this comment.
Do we need to add an e2e template with hybrid and prerender = true ?
There was a problem hiding this comment.
That's a good to have but I think if we do hybrid test we can have both prerendered pages and just remove static e2e
There was a problem hiding this comment.
Removed static test in favor of hybrid output test
Co-authored-by: Lennart <lekoarts@gmail.com>
Description
This PR adds support for
staticandhybridoutputs in Astro by making our control components isomorphic. A basic e2e test has been added as well.Limitations:
hybridoutput, aisStaticprop is available to control which component to use. It's going to use CSR components by default (since pages are prerendered by default in hybrid output).Have to separate the web components to their own files instead of putting them inside theFixed here*CSR.astrocomponents because of some Vite issues. Please see ECO-17 for more info.Closes ECO-17
Checklist
npm testruns as expected.npm run buildruns as expected.Type of change