Remove date-fns dependency and reduce bundle size

[jahirfiquitiva]

This PR removes date-fns (~17.2 kB) and instead uses Intl.DateTimeFormat formatToParts, while keeping the same functionality and date format.

This could be a follow-up PR to #162 . I decided to create a new PR instead of updating the other one just so you could consider both options. I personally like this one better, as it's not using any dependency.

Also, special thanks to @arturocr for his comment and explanation which helped writing this PR.

Before

vite-app

vite-app:build: dist/index.html                   0.46 kB │ gzip:  0.30 kB
vite-app:build: dist/assets/index-154eb8fc.css   15.31 kB │ gzip:  3.29 kB
vite-app:build: dist/assets/index-91d57498.js   261.96 kB │ gzip: 83.23 kB

create-react-app

create-react-app:build: File sizes after gzip:
create-react-app:build: 
create-react-app:build:   68.2 kB (+3.77 kB)  build/static/js/main.8f7cde5d.js
create-react-app:build:   3.6 kB              build/static/css/main.732631ea.css

custom-tweet-dub

custom-tweet-dub:build: Route (app)                              Size     First Load JS
custom-tweet-dub:build: ┌ ○ /_not-found                          869 B          82.8 kB
custom-tweet-dub:build: ├ λ /light/[tweet]                       142 B           105 kB
custom-tweet-dub:build: └ ○ /light/mdx                           142 B           105 kB
custom-tweet-dub:build: + First Load JS shared by all            81.9 kB
custom-tweet-dub:build:   ├ chunks/0d9284fb-226a6bff1f0a31d6.js  53.3 kB
custom-tweet-dub:build:   ├ chunks/275-74368ff2a8347781.js       26.7 kB
custom-tweet-dub:build:   ├ chunks/main-app-b0a70ce855865355.js  219 B
custom-tweet-dub:build:   └ chunks/webpack-e329e726fc3d270d.js   1.74 kB

next-app

next-app:build: Route (app)                                Size     First Load JS
next-app:build: ┌ ○ /_not-found                            869 B          82.9 kB
next-app:build: ├ λ /api/tweet/[id]                        0 B                0 B
next-app:build: ├ λ /light/[tweet]                         5.27 kB         103 kB
next-app:build: ├ λ /light/cache/[tweet]                   285 B            98 kB
next-app:build: ├ ○ /light/mdx                             4.5 kB          102 kB
next-app:build: ├ λ /light/suspense/[tweet]                285 B            98 kB
next-app:build: └ λ /light/vercel-kv/[tweet]               285 B            98 kB
next-app:build: + First Load JS shared by all              82 kB
next-app:build:   ├ chunks/0d9284fb-ae7416485c018808.js    53.3 kB
next-app:build:   ├ chunks/275-8345a966cc84c9c7.js         26.7 kB
next-app:build:   ├ chunks/main-app-b0a70ce855865355.js    219 B
next-app:build:   └ chunks/webpack-e8fd018a1be7e4a4.js     1.82 kB
next-app:build: 
next-app:build: Route (pages)                              Size     First Load JS
next-app:build: ┌   /_app                                  0 B              79 kB
next-app:build: ├ ● /dark/[tweet]                          370 B          98.4 kB
next-app:build: ├   └ css/ced5d7019021380c.css             3.4 kB
next-app:build: └ ○ /dark/swr/[tweet]                      665 B          98.7 kB
next-app:build:     └ css/16ccfc9048631897.css             3.44 kB
next-app:build: + First Load JS shared by all              79.3 kB
next-app:build:   ├ chunks/framework-928b21e391283e8e.js   45.2 kB
next-app:build:   ├ chunks/main-5bb35c8745301dd4.js        31.7 kB
next-app:build:   ├ chunks/pages/_app-950debd3bbe9d167.js  297 B
next-app:build:   ├ chunks/webpack-e8fd018a1be7e4a4.js     1.82 kB
next-app:build:   └ css/34eb5f2b26f01226.css               263 B

After

vite-app (~12.02% smaller)

vite-app:build: dist/index.html                   0.46 kB │ gzip:  0.30 kB
vite-app:build: dist/assets/index-154eb8fc.css   15.31 kB │ gzip:  3.29 kB
vite-app:build: dist/assets/index-e4a4c849.js   221.34 kB │ gzip: 73.79 kB

create-react-app (~17.89% smaller)

create-react-app:build: File sizes after gzip:
create-react-app:build: 
create-react-app:build:   57 kB (-7.43 kB)  build/static/js/main.c5d2bee3.js
create-react-app:build:   3.59 kB (-3 B)    build/static/css/main.0895c9ce.css

custom-tweet-dub (~6.39% smaller)

custom-tweet-dub:build: Route (app)                              Size     First Load JS
custom-tweet-dub:build: ┌ ○ /_not-found                          869 B          82.8 kB
custom-tweet-dub:build: ├ λ /light/[tweet]                       142 B          98.5 kB
custom-tweet-dub:build: └ ○ /light/mdx                           142 B          98.5 kB
custom-tweet-dub:build: + First Load JS shared by all            81.9 kB
custom-tweet-dub:build:   ├ chunks/0d9284fb-226a6bff1f0a31d6.js  53.3 kB
custom-tweet-dub:build:   ├ chunks/275-74368ff2a8347781.js       26.7 kB
custom-tweet-dub:build:   ├ chunks/main-app-b0a70ce855865355.js  219 B
custom-tweet-dub:build:   └ chunks/webpack-5d6152e857f729eb.js   1.74 kB

next-app (~6.82% smaller)

next-app:build: Route (app)                                Size     First Load JS
next-app:build: ┌ ○ /_not-found                            869 B          82.9 kB
next-app:build: ├ λ /api/tweet/[id]                        0 B                0 B
next-app:build: ├ λ /light/[tweet]                         5.27 kB        96.4 kB
next-app:build: ├ λ /light/cache/[tweet]                   282 B          91.4 kB
next-app:build: ├ ○ /light/mdx                             4.5 kB         95.6 kB
next-app:build: ├ λ /light/suspense/[tweet]                282 B          91.4 kB
next-app:build: └ λ /light/vercel-kv/[tweet]               282 B          91.4 kB
next-app:build: + First Load JS shared by all              82 kB
next-app:build:   ├ chunks/0d9284fb-ae7416485c018808.js    53.3 kB
next-app:build:   ├ chunks/275-8345a966cc84c9c7.js         26.7 kB
next-app:build:   ├ chunks/main-app-b0a70ce855865355.js    219 B
next-app:build:   └ chunks/webpack-c08596f5127d957d.js     1.82 kB
next-app:build: 
next-app:build: Route (pages)                              Size     First Load JS
next-app:build: ┌   /_app                                  0 B              79 kB
next-app:build: ├ ● /dark/[tweet]                          368 B          91.8 kB
next-app:build: ├   └ css/ced5d7019021380c.css             3.4 kB
next-app:build: └ ○ /dark/swr/[tweet]                      665 B          92.1 kB
next-app:build:     └ css/16ccfc9048631897.css             3.44 kB
next-app:build: + First Load JS shared by all              79.3 kB
next-app:build:   ├ chunks/framework-928b21e391283e8e.js   45.2 kB
next-app:build:   ├ chunks/main-5bb35c8745301dd4.js        31.7 kB
next-app:build:   ├ chunks/pages/_app-950debd3bbe9d167.js  297 B
next-app:build:   ├ chunks/webpack-c08596f5127d957d.js     1.82 kB
next-app:build:   └ css/34eb5f2b26f01226.css               263 B

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-tweet-create-react-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2024 4:21pm
react-tweet-custom-tweet-dub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2024 4:21pm
react-tweet-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2024 4:21pm
react-tweet-vite-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2024 4:21pm

[vercel]

@jahirfiquitiva is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

[jahirfiquitiva]

I've been thinking this could probably no longer be a client component.

We're using a unique format for the date, and the tweet date will not change. 🤔

Open to discuss about it.

I created a custom server component for my website, implementing these changes so date-fns was not bundled, and it works just fine.

https://github.com/jahirfiquitiva/jahir.dev/blob/main/src/components/ui/blog/mdx/tweet/tweet-created-at.tsx

[lfades]

This was initially use client because the previous version of the X embedded tweet had relative times (like 5 days ago) and calculating the relative time in the server would end up in a cached and incorrect result.

Due to how it is today, it's most likely safe to make a server component and it's actually better to avoid running the logic behind the formatter in the browser.

[lfades]

I just saw that there's a comment in the component that talks exactly about this so yeah, it's better to make it a server component

[lfades]

Thank you for the PR. I Added some minor changes and it looks good to go!