jantimon/next-yak

speed up runtime by removing the styled proxy

jantimon opened this issue · 1 comments

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", ...).

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)