Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

speed up runtime by removing the styled proxy #84

Open
jantimon opened this issue Mar 31, 2024 · 1 comment
Open

speed up runtime by removing the styled proxy #84

jantimon opened this issue Mar 31, 2024 · 1 comment
Labels
performance possible performance improvements

Comments

@jantimon
Copy link
Owner

Right now in next-yak, we use Proxy to provide the same API like styled components.
It lets devs write code like styled.div to style any html element tag or even custom elements.

Unfortunately according to https://romgrk.com/posts/optimizing-javascript proxies prevent compiler optimization and therefore might slow down our runtime during SSR and hydration.

As next-yak compiles the code anyway we can change the components from styled.div`... to styled("div", ...).

@jantimon
Copy link
Owner Author

jantimon commented Jul 9, 2024

probably we could go a step further:

import { styled } from "next-yak";

const Button = styled.button`...`

could be compiled to (at least for all currently known tags)

import { _styled_button } from "next-yak/internal";

const Button = _styled_button`...`

This would:

  • minify even better (c.button becomes just n)
  • reduce garbage collection as factories stay defined
  • dead code eliminate unused tags
  • dead code eliminate the proxy (if only known tags are used)

@jantimon jantimon added the performance possible performance improvements label Jul 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
performance possible performance improvements
Projects
None yet
Development

No branches or pull requests

1 participant