dub
dub copied to clipboard
dubinc
[FEAT]: use RSCs in @dub/ui Fixes
Fixes https://github.com/dubinc/dub/issues/567
Goal
Reduce client side load and improve initial input delay times by taking advantage of RSCs in Next rather than having tsup apply a "use client"; banner over the entire package. Relies on
/** @type {import('next').NextConfig} */
module.exports = {
transpilePackages: ["@dub/ui"],
...
}
This can be continually improved by more carefully crafting components to minimize client code inside in things such as the Nav & Suspense boundaries setup in preparation for ppr becoming stable.
@versecafe is attempting to deploy a commit to the Elegance Team on Vercel.
A member of the Team first needs to authorize it.
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
@steven-tey This should be good to go, everything compiles and works in local testing without issue and all components that are portable to RSCs without a major refactor have been moved.
@subh-cs When you have some time could you review this and what's your opinion on bumping the package version to 0.1.0 as the transpile step is a breaking change for any external user not that I think there are any but just in case
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| dub | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jan 30, 2024 6:36am |
This looks great, thank you! Curious to know what the approximate improvement in initial input delay time would be with this change – were you able to run any benchmarks for this?
@steven-tey Not sure on the exact reduction testing FID has been a bit annoying, but when using artificial throttling for "low end mobile" on chrome dev tools there was a decent improvement in page load and responsiveness, This should be stable to merge but also could use improvements on splitting bigger portions like the Nav & Footer into client and server components before hand if that would be preferred.
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/@boxyhq/[email protected], npm/@dub/[email protected], npm/@next-auth/[email protected], npm/@planetscale/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@splinetool/[email protected], npm/@stripe/[email protected], npm/@tailwindcss/[email protected], npm/@tailwindcss/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@upstash/[email protected], npm/@upstash/[email protected], npm/@vercel/[email protected], npm/@vercel/[email protected], npm/@vercel/[email protected], npm/@visx/[email protected], npm/@visx/[email protected], npm/@visx/[email protected], npm/@visx/[email protected], npm/@visx/[email protected], npm/@visx/[email protected], npm/@visx/[email protected], npm/@visx/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]
![socket-security[bot] avatar](https://avatars.githubusercontent.com/in/156372?v=4 "Published by a pub.dev verified publisher"){kind=small}
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎
To accept the risk, merge this PR and you will not be notified again.
| Alert | Package | Note | Source |
|---|---|---|---|
| Telemetry | npm/[email protected] |
| |
| Install scripts | npm/[email protected] |
| |
| Telemetry | npm/[email protected] |
|
Next steps
What is telemetry?
This package contains telemetry which tracks how it is used.
Most telemetry comes with settings to disable it. Consider disabling telemetry if you do not want to be tracked.
What is an install script?
Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.
Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.
Take a deeper look at the dependency
Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.
Remove the package
If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.
Mark a package as acceptable risk
To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all
@SocketSecurity ignore npm/[email protected]@SocketSecurity ignore npm/[email protected]@SocketSecurity ignore npm/[email protected]
Reactions to setting off a giant socket security report without ever adding a new package
- break lock file during tiny merge conflict
- "this is fine just run
pnpm i - "oh no oh no this just flagged dozens of package changes"
- realize it's just minor version bumps allowed by the package json specifications
@steven-tey would this be good to merge as all components are now client or server and properly being bundled as RSCs and client components or do you want me to go break down some of the larger portions like Nav and Footer into client server splits since they are larger components that load on most every page?
