Optimize images#1367
Conversation
Primitives shouldn't be aware of any Clerk-specific logic. All the image optimizatiion logic is now extracted into its own makeResponsive HOC.
🦋 Changeset detectedLatest commit: 7fcea03 The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
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 |
![jit-ci[bot]](https://avatars.githubusercontent.com/in/142441?s=60&v=4){kind=small}
nikosdouvlis
changed the title
| th: React.JSX.IntrinsicElements['th']; | ||
| tr: React.JSX.IntrinsicElements['tr']; | ||
| td: React.JSX.IntrinsicElements['td']; | ||
| }; |
There was a problem hiding this comment.
❓ Couldn't we use Pick<React.JSX.IntrinsicElements, 'div' | 'input' | ...> ?
There was a problem hiding this comment.
Sorry @dimkl, not sure I get the question here :(
This is not used as a union but rather as a map internally, so changing this would probably mean a bigger refactor of the styled-system types.
| srcUrl.searchParams.append('height', optimizedHeight.toString()); | ||
| src = srcUrl.toString(); | ||
| } | ||
| const src = imageUrl; |
There was a problem hiding this comment.
🙃 could we drop this line and use the imageUrl instead of src?
| optimize, | ||
| rounded = true, | ||
| imageFetchSize = 64, | ||
| imageFetchSize = 80, |
| initials?: string; | ||
| imageUrl?: string | null; | ||
| imageFetchSize?: number; | ||
| optimize?: boolean; |
There was a problem hiding this comment.
❓ isn't this a breaking change? Couldn't someone use our components (eg OrganizationAvatar) with the optimize prop?
There was a problem hiding this comment.
This is just an internal prop, not really needed right now as the new worker and HOC handles this automatically
| 'https://img.clerk.dev/', | ||
| 'https://img.clerkstage.dev/', | ||
| 'https://img.lclclerk.com/', | ||
| ]; |
There was a problem hiding this comment.
🙃 i would keep it in shared (and also keep the isClerkImage and the below Framework agnostic utilities).
There was a problem hiding this comment.
This makes sense to me, however, I think these are specific enough to have them colocated with the HOC
|
This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
3 participants
Type of change
Packages affected
@clerk/clerk-js@clerk/clerk-react@clerk/nextjs@clerk/remix@clerk/types@clerk/themes@clerk/localizations@clerk/clerk-expo@clerk/backend@clerk/clerk-sdk-node@clerk/shared@clerk/fastify@clerk/chrome-extensiongatsby-plugin-clerkbuild/tooling/choreDescription
npm testruns as expected.npm run buildruns as expected.This is the complimentary clerk-js work , for more information and examples go to: https://github.com/clerkinc/cloudflare-workers/pull/31
Introduce a makeResponsive HOC that adds the
srcsetattribute on all images served by the img-service worker.Primitives shouldn't be aware of any Clerk-specific logic. All the image optimization logic is now extracted into its own makeResponsive HOC.
Apart from resizing te image, more optimizations are now enabled:
Before:
After:
