search

aidenybai / million

Optimize React performance and make your React 70% faster in minutes, not months.
https://million.dev
MIT License
16.09k stars 561 forks source link

breaking: remove <slot /> (with less changes) #881

Closed Aslemammad closed 5 months ago

Aslemammad commented 6 months ago

Please describe the changes this PR makes and why it should be merged:

Status

Semantic versioning classification:

vercel[bot] commented 6 months ago

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

Name Status Preview Comments Updated (UTC)
million-kitchen-sink ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 29, 2024 4:56am
sink ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 29, 2024 4:56am
Aslemammad commented 6 months ago

After 12 days of trial and error.

Remaining: RSC in nextjs, for now, the idea was to try using unstable_postpone to postpone the rendering of million APIs to the client, but next sets the react versions explicitly and there's no way to try the experimental versions of react which have the postpone API.

Plus, there are some hacky things like setMounted which I don't like the look of it, using context might make more sense there so the user won't accidentally pass setMounted and break everything there, but it's just an experiment, so after review, I'll try fixing these things since there'd be more opinions on the look of the code.

This PR was tried on these demos: NextjsWithMillion (next 12), both For and block, in SSR/hydration/client million-dev-setup by Aiden for testing the minor compiler changes.

Concern: Other than the RSC part, I also use react-html-parser for SSR html -> jsx so I pass it to react temporarily to avoid hydration mismatches and errors, which works perfectly, but adds up to the size of million. One solution is to use the lib part of react-html-parser, but could not figure out the API properly, so for the sake of timing, I just skipped it. That might save so much space because we'll be able to skip the whole string -> html dom -> jsx and rather have html dom -> jsx conversion only.

If anyone has any other idea, please feel free to share.

tobySolutions commented 6 months ago

After 12 days of trial and error.

Remaining: RSC in nextjs, for now, the idea was to try using unstable_postpone to postpone the rendering of million APIs to the client, but next sets the react versions explicitly and there's no way to try the experimental versions of react which have the postpone API.

Plus, there are some hacky things like setMounted which I don't like the look of it, using context might make more sense there so the user won't accidentally pass setMounted and break everything there, but it's just an experiment, so after review, I'll try fixing these things since there'd be more opinions on the look of the code.

This PR was tried on these demos: NextjsWithMillion (next 12), both For and block, in SSR/hydration/client million-dev-setup by Aiden for testing the minor compiler changes.

Concern: Other than the RSC part, I also use react-html-parser for SSR html -> jsx so I pass it to react temporarily to avoid hydration mismatches and errors, which works perfectly, but adds up to the size of million. One solution is to use the lib part of react-html-parser, but could not figure out the API properly, so for the sake of timing, I just skipped it. That might save so much space because we'll be able to skip the whole string -> html dom -> jsx and rather have html dom -> jsx conversion only.

If anyone has any other idea, please feel free to share.

Thanks @Aslemammad for all the work, I don't exactly have ideas around this though; I could help by sending a tweet out, maybe, someone might have ideas though.

Aslemammad commented 6 months ago

@tobySolutions Toby, I appreciate that from you, feel free to do so! Thank you so much.

tobySolutions commented 6 months ago

@tobySolutions Toby, I appreciate that from you, feel free to do so! Thank you so much.

My pleasure, I just already did that. I hope one day when all this is done, you can explain most of these things to me. I'll try to read through the code though.

Aslemammad commented 6 months ago

For sure, I'd be happy to help!

On Fri, 12 Jan 2024, 23:00 Tobiloba Adedeji, @.***> wrote:

@tobySolutions https://github.com/tobySolutions Toby, I appreciate that from you, feel free to do so! Thank you so much.

My pleasure, I just already did that. I hope one day when all this is done, you can explain most of these things to me. I'll try to read through the code though.

— Reply to this email directly, view it on GitHub https://github.com/aidenybai/million/pull/881#issuecomment-1889839349, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJBMICFPKRUQD5RQVLGXYQDYOGFLZAVCNFSM6AAAAABBYL2BO2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBZHAZTSMZUHE . You are receiving this because you were mentioned.Message ID: @.***>

tobySolutions commented 6 months ago

For sure, I'd be happy to help! … On Fri, 12 Jan 2024, 23:00 Tobiloba Adedeji, @.> wrote: @tobySolutions https://github.com/tobySolutions Toby, I appreciate that from you, feel free to do so! Thank you so much. My pleasure, I just already did that. I hope one day when all this is done, you can explain most of these things to me. I'll try to read through the code though. — Reply to this email directly, view it on GitHub <#881 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJBMICFPKRUQD5RQVLGXYQDYOGFLZAVCNFSM6AAAAABBYL2BO2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBZHAZTSMZUHE . You are receiving this because you were mentioned.Message ID: @.>

Thanks Mohammad! You're doing great work.

aidenybai commented 6 months ago

@Aslemammad

Remaining: RSC in nextjs, for now, the idea was to try using unstable_postpone to postpone the rendering of million APIs to the client, but next sets the react versions explicitly and there's no way to try the experimental versions of react which have the postpone API.

Is there a workaround for this?

Plus, there are some hacky things like setMounted which I don't like the look of it, using context might make more sense there so the user won't accidentally pass setMounted and break everything there, but it's just an experiment, so after review, I'll try fixing these things since there'd be more opinions on the look of the code.

Please do use context here. I would be careful and think of any edge cases that potentially could break this.

This PR was tried on these demos: NextjsWithMillion (next 12), both For and block, in SSR/hydration/client million-dev-setup by Aiden for testing the minor compiler changes.

Can you run through the examples under packages/kitchen-sink and make sure nothing is broken?

Other than the RSC part, I also use react-html-parser for SSR html -> jsx so I pass it to react temporarily to avoid hydration mismatches and errors, which works perfectly, but adds up to the size of million. One solution is to use the lib part of react-html-parser, but could not figure out the API properly, so for the sake of timing, I just skipped it. That might save so much space because we'll be able to skip the whole string -> html dom -> jsx and rather have html dom -> jsx conversion only.

Can you document this out? I'm not sure I understand

Aslemammad commented 6 months ago

Is there a workaround for this?

Not yet, what we can do is just throw an error or show a warning when the user is using rsc with million!

Aslemammad commented 6 months ago

@aidenybai

Can you run through the examples under packages/kitchen-sink and make sure nothing is broken?

Yes sure

Can you document this out? I'm not sure I understand

sure, which part do you want me to document?

github-actions[bot] commented 5 months ago

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.