[FEAT]: use RSCs in @dub/ui Fixes #572

versecafe · 2024-01-19T16:15:52Z

Fixes #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.

vercel · 2024-01-19T16:15:58Z

@versecafe is attempting to deploy a commit to the Elegance Team on Vercel.

A member of the Team first needs to authorize it.

versecafe · 2024-01-20T03:20:19Z

@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.

versecafe · 2024-01-29T17:45:28Z

@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

…/dub into pr/572

vercel · 2024-01-30T05:48:42Z

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

steven-tey · 2024-01-30T06:34:23Z

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?

versecafe · 2024-02-04T21:11:16Z

@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.

catch up to main

socket-security · 2024-03-08T02:24:03Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@next-auth/prisma-adapter@1.0.7	Transitive: environment, filesystem, shell	`+2`	19.8 MB	balazsorban
npm/@planetscale/database@1.16.0	network	`0`	49.4 kB	ayrton
npm/@splinetool/runtime@0.9.526	network	`+2`	6.16 MB	alelepd
npm/@stripe/stripe-js@1.54.2	None	`0`	428 kB	madhav-stripe
npm/@tailwindcss/forms@0.5.7	Transitive: environment, filesystem, network, shell, unsafe	`+107`	14.9 MB	thecrypticace
npm/@tailwindcss/typography@0.5.10	Transitive: environment, filesystem, network, shell, unsafe	`+110`	15.2 MB	thecrypticace
npm/@types/dotenv-flow@3.3.3	None	`0`	6.75 kB	types
npm/@types/html-escaper@3.0.2	None	`0`	2.77 kB	types
npm/@types/ms@0.7.34	None	`0`	3.2 kB	types
npm/@types/react-dom@18.2.21	None	`0`	34 kB	types
npm/@types/react-highlight-words@0.16.7	None	`0`	5.53 kB	types
npm/@types/react@18.2.64	None	`+3`	1.69 MB	types
npm/@types/topojson-client@3.1.4	None	`+2`	19.4 kB	types
npm/@upstash/ratelimit@0.3.10	Transitive: environment, network	`+3`	1.04 MB	mdogan
npm/@upstash/redis@1.28.4	environment, network	`+1`	762 kB	hezarfen
npm/@vercel/analytics@1.2.2	Transitive: environment, filesystem, network, shell, unsafe	`+2`	85.5 MB	vercel-release-bot
npm/@vercel/edge@0.3.4	None	`0`	27.2 kB	vercel-release-bot
npm/@vercel/speed-insights@1.0.10	Transitive: environment, filesystem, network, shell, unsafe	`+1`	85.5 MB	vercel-release-bot
npm/@visx/axis@2.18.0	Transitive: environment	`+27`	4.14 MB	christopher.card.williams
npm/@visx/event@2.17.0	None	`+1`	22.8 kB	christopher.card.williams
npm/@visx/geo@2.17.0	Transitive: environment	`+9`	759 kB	christopher.card.williams
npm/@visx/grid@2.18.0	Transitive: environment	`+26`	4.24 MB	christopher.card.williams
npm/@visx/responsive@2.17.0	Transitive: environment	`+5`	2.55 MB	christopher.card.williams
npm/@visx/scale@3.5.0	None	`+22`	2.09 MB	christopher.card.williams
npm/@visx/shape@2.18.0	Transitive: environment	`+23`	4.02 MB	christopher.card.williams
npm/@visx/tooltip@2.17.0	Transitive: environment	`+7`	372 kB	christopher.card.williams
npm/autoprefixer@10.4.18	environment Transitive: filesystem, shell	`+6`	416 kB	ai
npm/cloudinary@1.41.3	environment, filesystem, network Transitive: eval	`+4`	5.32 MB	cloudinary
npm/cmdk@0.2.1	None	`+18`	668 kB	paco
npm/concurrently@8.2.2	environment, filesystem	`+5`	12.8 MB	gustavohenke
npm/crisp-sdk-web@1.0.22	None	`0`	154 kB	crisp-dev
npm/dotenv-flow@4.1.0	environment, filesystem	`+1`	139 kB	kerimdzhanov
npm/fuse.js@6.6.2	None	`0`	392 kB	krisk
npm/github-slugger@2.0.0	None	`0`	15.9 kB	wooorm
npm/he@1.2.0	None	`0`	124 kB	mathias
npm/html-escaper@3.0.3	None	`0`	15.6 kB	webreflection
npm/js-cookie@3.0.5	None	`0`	26.2 kB	carhartl
npm/lucide-react@0.299.0	None	`0`	21 MB	ericfennis
npm/ms@2.1.3	None	`0`	6.72 kB	styfle
npm/nanoid@5.0.6	None	`0`	10.9 kB	ai
npm/next@13.5.4	environment, filesystem, network, shell, unsafe	`+26`	1.11 GB	vercel-release-bot
npm/next@14.2.0-canary.5	environment, filesystem, network, shell, unsafe	`0`	85.3 MB	vercel-release-bot
npm/node-html-parser@6.1.12	None	`+1`	289 kB	taoqf
npm/nodemailer@6.9.11	None	`0`	0 B
npm/openapi-types@12.1.3	None	`0`	32.7 kB	jsdevel
npm/openapi3-ts@4.2.2	None	`0`	250 kB	pjmolina
npm/papaparse@5.4.1	None	`0`	260 kB	pokoli
npm/postmark@4.0.2	None	`0`	335 kB	ibalosh
npm/prettier-plugin-organize-imports@3.2.4	environment Transitive: filesystem, unsafe	`+1`	8.41 MB	simonhaenisch
npm/prettier-plugin-tailwindcss@0.5.12	Transitive: environment, filesystem, unsafe	`+2`	11 MB	thecrypticace
npm/prettier@3.2.5	environment, filesystem, unsafe	`0`	8.39 MB	prettier-bot
npm/prisma@5.10.2	environment	`0`	11.2 MB	prismabot
npm/react-colorful@5.6.1	None	`0`	391 kB	omgovich
npm/react-dom-confetti@0.2.0	None	`0`	6.76 kB	daniel-lundin
npm/react-email@2.1.0	Transitive: environment, filesystem, network, shell, unsafe	`+40`	103 MB	gabrielmfern
npm/react-highlight-words@0.20.0	environment	`+2`	1.72 MB	sergei-startsev
npm/react-medium-image-zoom@5.1.10	None	`0`	84.6 kB	rpearce
npm/react-parallax-tilt@1.7.214	None	`0`	73.4 kB	marko424
npm/react-spring@9.7.3	environment	`0`	9.38 kB	tdfka_rick
npm/react-textarea-autosize@8.5.3	None	`0`	57.9 kB	react-textarea-autosize-release-bot
npm/react-tweet@3.2.0	None	`+2`	7.4 MB	lfades
npm/react@18.2.0	environment	`+2`	337 kB	gnoff
npm/rehype-autolink-headings@6.1.1	None	`+1`	46.6 kB	wooorm
npm/rehype-pretty-code@0.9.11	Transitive: filesystem, network	`+3`	16.8 MB	atomiks
npm/rehype-slug@5.1.0	None	`+1`	26.7 kB	wooorm
npm/remark-gfm@3.0.1	None	`0`	17 kB	wooorm
npm/shiki@0.14.7	filesystem, network	`+1`	15.9 MB	antfu
npm/sonner@0.5.0	None	`0`	145 kB	emilkowalski
npm/stripe@12.18.0	network, shell	`0`	3.57 MB	stripe-bindings
npm/swr@2.2.5	None	`0`	620 kB	vercel-release-bot
npm/tailwind-merge@2.2.1	None	`+2`	989 kB	dcas
npm/tailwind-scrollbar-hide@1.1.7	None	`0`	4.74 kB	reslear
npm/tailwindcss-radix@2.8.0	None	`0`	16.9 kB	ecklf
npm/tailwindcss@3.4.1	environment, filesystem Transitive: network, shell, unsafe	`+105`	14.8 MB	adamwathan
npm/topojson-client@3.1.0	None	`0`	67.6 kB	mbostock
npm/tsup@6.7.0	environment, eval, filesystem Transitive: network, shell, unsafe	`+57`	239 MB	egoist
npm/tsx@3.14.0	None	`0`	389 kB	hirokiosame
npm/turbo@1.12.5	None	`0`	0 B
npm/typescript@5.4.2	None	`0`	32.4 MB	typescript-bot
npm/unsplash-js@7.0.19	environment, network	`0`	330 kB	unsplash
npm/use-debounce@8.0.4	None	`0`	106 kB	xnimorz
npm/vaul@0.6.8	None	`+18`	810 kB	emilkowalski
npm/zod-error@1.5.0	None	`+1`	695 kB	andrewvo89
npm/zod-openapi@2.14.0	None	`+1`	831 kB	samchungy
npm/zod@3.22.4	None	`0`	628 kB	colinmcd94

View full report↗︎

socket-security · 2024-03-08T02:24:06Z

🚨 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/next@13.5.4	Note: Can be disabled by setting the environment variable NEXT_TELEMETRY_DISABLED=1 . See https://nextjs.org/telemetry for more information	`packages/utils/package.json`
Install scripts	npm/prisma@5.10.2	Install script: preinstall Source: `node scripts/preinstall-entry.js`	`apps/web/package.json`
Telemetry	npm/next@14.2.0-canary.5	Note: Can be disabled by setting the environment variable NEXT_TELEMETRY_DISABLED=1 . See https://nextjs.org/telemetry for more information	`apps/web/package.json`

View full report↗︎

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/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

@SocketSecurity ignore npm/next@13.5.4
@SocketSecurity ignore npm/prisma@5.10.2
@SocketSecurity ignore npm/next@14.2.0-canary.5

versecafe · 2024-03-08T02:28:31Z

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

versecafe · 2024-03-08T02:32:00Z

@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?

CLAassistant · 2024-03-12T19:55:54Z

All committers have signed the CLA.

versecafe added 2 commits January 19, 2024 11:00

use RSCs in @dub/ui

7534bba

remove accidental temp comment from readme

e3d5016

versecafe marked this pull request as draft January 19, 2024 16:16

versecafe changed the title ~~[WIP] use RSCs in @dub/ui~~ [WIP] use RSCs in @dub/ui Fixes https://github.com/dubinc/dub/issues/567 Jan 19, 2024

versecafe changed the title ~~[WIP] use RSCs in @dub/ui Fixes https://github.com/dubinc/dub/issues/567~~ [WIP] use RSCs in @dub/ui Fixes [https://github.com/dubinc/dub/issues/567](567) Jan 19, 2024

versecafe changed the title ~~[WIP] use RSCs in @dub/ui Fixes [https://github.com/dubinc/dub/issues/567](567)~~ [WIP] use RSCs in @dub/ui Fixes Jan 19, 2024

final UI component that can be moved

9dd7fed

versecafe marked this pull request as ready for review January 20, 2024 03:20

versecafe changed the title ~~[WIP] use RSCs in @dub/ui Fixes~~ [FEAT]: use RSCs in @dub/ui Fixes Jan 20, 2024

versecafe added 3 commits January 20, 2024 17:51

clean unused code and document change

c6aa72f

typo cleanup

7ce96c1

Merge branch 'dubinc:main' into use-rscs-in-ui-package

16a75db

steven-tey added 2 commits January 29, 2024 21:48

Merge branch 'main' into pr/572

71725e5

Merge branch 'use-rscs-in-ui-package' of https://github.com/versecafe…

fc51c6b

…/dub into pr/572

vercel bot had a problem deploying to Preview January 30, 2024 05:53 Failure

Update pnpm-lock.yaml

bcadf64

vercel bot deployed to Preview January 30, 2024 06:00 View deployment

small fixes

e825fe8

vercel bot deployed to Preview January 30, 2024 06:36 View deployment

Merge branch 'dubinc:main' into use-rscs-in-ui-package

f33ee0a

versecafe added 4 commits February 4, 2024 23:08

Merge branch 'main' into use-rscs-in-ui-package

f27e581

Merge branch 'main' into use-rscs-in-ui-package

dbcefa5

Merge branch 'use-rscs-in-ui-package' into main

6d12d19

Merge pull request #2 from versecafe/main

6166e0a

catch up to main

ready for merge with main mar 7 2024

7ce453d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEAT]: use RSCs in @dub/ui Fixes #572

[FEAT]: use RSCs in @dub/ui Fixes #572

[FEAT]: use RSCs in @dub/ui Fixes #572

Are you sure you want to change the base?

[FEAT]: use RSCs in @dub/ui Fixes #572

Conversation

Fixes #567

Goal

Next steps

Reactions to setting off a giant socket security report without ever adding a new package