feat(astro): Add CSR support by wobsoriano · Pull Request #3911 · clerk/javascript

wobsoriano · 2024-08-06T19:24:51Z

Description

This PR adds support for static and hybrid outputs in Astro by making our control components isomorphic. A basic e2e test has been added as well.

Limitations:

For hybrid output, a isStatic prop 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 the *CSR.astro components because of some Vite issues. Please see ECO-17 for more info.~~ Fixed here

Closes ECO-17

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-06T19:24:55Z

🦋 Changeset detected

Latest commit: aadf639

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

This PR includes changesets to release 1 package

Name	Type
@clerk/astro	Minor

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

chore: Remove bundled file chore(astro): Add back missing declarations

…ect csr

…support-in-astro

wobsoriano · 2024-08-20T02:42:03Z

!snapshot

clerk-cookie · 2024-08-20T02:47:55Z

Hey @wobsoriano - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.1.0-snapshot.v17a4abb
@clerk/backend	1.7.0-snapshot.v17a4abb
@clerk/chrome-extension	1.2.2-snapshot.v17a4abb
@clerk/clerk-js	5.15.0-snapshot.v17a4abb
@clerk/dev-cli	0.0.7-snapshot.v17a4abb
@clerk/elements	0.14.0-snapshot.v17a4abb
@clerk/clerk-expo	2.2.0-snapshot.v17a4abb
@clerk/express	0.0.29-snapshot.v17a4abb
@clerk/fastify	1.0.31-snapshot.v17a4abb
@clerk/localizations	2.6.0-snapshot.v17a4abb
@clerk/nextjs	5.3.2-snapshot.v17a4abb
@clerk/clerk-react	5.4.2-snapshot.v17a4abb
@clerk/remix	4.2.15-snapshot.v17a4abb
@clerk/clerk-sdk-node	5.0.28-snapshot.v17a4abb
@clerk/shared	2.5.2-snapshot.v17a4abb
@clerk/tanstack-start	0.2.2-snapshot.v17a4abb
@clerk/testing	1.2.11-snapshot.v17a4abb
@clerk/themes	2.1.21-snapshot.v17a4abb
@clerk/types	4.14.0-snapshot.v17a4abb

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.1.0-snapshot.v17a4abb --save-exact

@clerk/backend

npm i @clerk/backend@1.7.0-snapshot.v17a4abb --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.2.2-snapshot.v17a4abb --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.15.0-snapshot.v17a4abb --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@0.0.7-snapshot.v17a4abb --save-exact

@clerk/elements

npm i @clerk/elements@0.14.0-snapshot.v17a4abb --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.2.0-snapshot.v17a4abb --save-exact

@clerk/express

npm i @clerk/express@0.0.29-snapshot.v17a4abb --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.31-snapshot.v17a4abb --save-exact

@clerk/localizations

npm i @clerk/localizations@2.6.0-snapshot.v17a4abb --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.3.2-snapshot.v17a4abb --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.4.2-snapshot.v17a4abb --save-exact

@clerk/remix

npm i @clerk/remix@4.2.15-snapshot.v17a4abb --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.28-snapshot.v17a4abb --save-exact

@clerk/shared

npm i @clerk/shared@2.5.2-snapshot.v17a4abb --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.2.2-snapshot.v17a4abb --save-exact

@clerk/testing

npm i @clerk/testing@1.2.11-snapshot.v17a4abb --save-exact

@clerk/themes

npm i @clerk/themes@2.1.21-snapshot.v17a4abb --save-exact

@clerk/types

npm i @clerk/types@4.14.0-snapshot.v17a4abb --save-exact

packages/astro/src/stores/internal.ts

panteliselef · 2024-08-21T09:17:52Z

packages/astro/src/stores/external.ts

+ *
+ * $isLoadedStore.subscribe((authloaded => console.log(loaded))
+ */
+export const $isLoadedStore = computed([$csrState], state => state.isLoaded);


What's the reliability issue with $clerkStore ?

panteliselef · 2024-08-21T09:18:54Z

packages/astro/src/integration/vite-plugin-astro-config.ts

This could be added as JSdoc for other maintainers

panteliselef · 2024-08-21T09:21:18Z

packages/astro/src/astro-components/control/SignedOutCSR.astro

+
+<style>
+  clerk-signed-out[hidden] {
+    display: none !important;


In case someone would like to animate in/out the children of <SignedOut/> would this be possible ?

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

panteliselef · 2024-08-21T09:23:06Z

packages/astro/src/astro-components/control/Protect.astro

-      permission?: never;
-    };
+import { isStaticOutput } from "virtual:@clerk/astro/config";
+import type { ProtectProps } from '../../types';


Does this work because we now expose @clerk/astro/types ?

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 🤔

panteliselef · 2024-08-21T09:24:27Z

integration/presets/astro.ts

  .addDependency('@clerk/types', clerkTypesLocal)
  .addDependency('@clerk/localizations', clerkLocalizationLocal);

+const astroStatic = astroNode.clone().setName('astro-static').useTemplate(templates['astro-static']);


Do we need to add an e2e template with hybrid and prerender = true ?

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

Removed static test in favor of hybrid output test

panteliselef

Great work !!

…support-in-astro

octoper

Great work! 🔥

Co-authored-by: Lennart <lekoarts@gmail.com>

wobsoriano force-pushed the rob/eco-17-explore-our-options-for-csr-only-support-in-astro branch from 9daf40b to c892565 Compare August 6, 2024 20:48

clerk-cookie added the integration label Aug 6, 2024

wobsoriano removed the integration label Aug 6, 2024

clerk-cookie added integration types clerk-js nextjs react expo elements labels Aug 6, 2024

wobsoriano force-pushed the rob/eco-17-explore-our-options-for-csr-only-support-in-astro branch from cf4f5c6 to ecaac43 Compare August 8, 2024 00:16

wobsoriano removed types clerk-js nextjs react expo integration elements labels Aug 8, 2024

clerk-cookie added the integration label Aug 8, 2024

wobsoriano changed the base branch from main to rob/eco-4-move-or-use-utilities-from-clerkshared August 8, 2024 16:37

wobsoriano force-pushed the rob/eco-17-explore-our-options-for-csr-only-support-in-astro branch from 8bfae44 to 39df490 Compare August 8, 2024 16:37

Base automatically changed from rob/eco-4-move-or-use-utilities-from-clerkshared to main August 9, 2024 14:14

wobsoriano force-pushed the rob/eco-17-explore-our-options-for-csr-only-support-in-astro branch from 1b466bd to 3fec45b Compare August 9, 2024 14:25

clerk deleted a comment from clerk-cookie Aug 12, 2024

wobsoriano added 5 commits August 12, 2024 19:41

chore(astro): Use shared data attribute builder for hotloading

68d1181

chore(astro): Use shared clerk-js hotload script

832d2dd

chore(astro): Clean up type ignores

982d455

chore(astro): Fix merge conflicts

22e7ceb

chore: Remove bundled file chore(astro): Add back missing declarations

chore(astro): Fix incorrect file name

98456b9

wobsoriano added 7 commits August 19, 2024 09:02

chore(astro): Make sure hidden attributes are not overridable

71c3070

chore(astro): Make sure hidden attributes are not overridable in prot…

e2f8279

…ect csr

Merge branch 'main' into rob/eco-17-explore-our-options-for-csr-only-…

ef87390

…support-in-astro

test(astro): Fix protect CSR tests

24df6df

chore(astro): Formatting fix

0ae1248

chore(astro): Remove unused util file

506bce7

chore(astro): Set initial resource values to undefined

17a4abb

clerk deleted a comment from clerk-cookie Aug 20, 2024

wobsoriano commented Aug 20, 2024

View reviewed changes

packages/astro/src/stores/internal.ts Show resolved Hide resolved

panteliselef reviewed Aug 21, 2024

View reviewed changes

wobsoriano added 7 commits August 21, 2024 08:27

chore(astro): Ignore ts files in components folder

a188cc8

chore(astro): TS errors clean up

db66adc

test(astro): Update static test to hybrid

0b65ac6

chore(astro): Update eslint ignores

6e1beeb

chore(astro): Simplify ignored files in tsconfig

eb0647c

chore(astro): Add JSDoc to vite plugin

fa723e4

chore(astro): Add classes to control components wrappers

7f20b12

panteliselef assigned wobsoriano Aug 22, 2024

panteliselef approved these changes Aug 22, 2024

View reviewed changes

LekoArts approved these changes Aug 22, 2024

View reviewed changes

Merge branch 'main' into rob/eco-17-explore-our-options-for-csr-only-…

d21a98a

…support-in-astro

octoper approved these changes Aug 22, 2024

View reviewed changes

test(astro): Rename hybrid test description

aadf639

wobsoriano merged commit e3cd92b into main Aug 22, 2024

wobsoriano deleted the rob/eco-17-explore-our-options-for-csr-only-support-in-astro branch August 22, 2024 12:08

clerk-cookie mentioned this pull request Aug 22, 2024

ci(repo): Version packages #3990

Merged

brkalow pushed a commit that referenced this pull request Aug 22, 2024

feat(astro): Add CSR support (#3911)

c2ef997

Co-authored-by: Lennart <lekoarts@gmail.com>

wobsoriano mentioned this pull request Aug 26, 2024

docs(astro): Add reference to hybrid rendering in Astro clerk/clerk-docs#1486

Merged

Conversation

wobsoriano commented Aug 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot bot commented Aug 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

wobsoriano commented Aug 20, 2024

Uh oh!

clerk-cookie commented Aug 20, 2024

Uh oh!

Uh oh!

panteliselef Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

panteliselef Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

panteliselef Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

wobsoriano Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

panteliselef Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

wobsoriano Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

panteliselef Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

wobsoriano Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

wobsoriano Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

panteliselef left a comment

Choose a reason for hiding this comment

Uh oh!

octoper left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

wobsoriano commented Aug 6, 2024 •

edited

Loading

changeset-bot bot commented Aug 6, 2024 •

edited

Loading

wobsoriano Aug 21, 2024 •

edited

Loading

wobsoriano Aug 21, 2024 •

edited

Loading

wobsoriano Aug 21, 2024 •

edited

Loading