search

seek-oss / playroom

Design with JSX, powered by your own component library.
MIT License
4.45k stars 183 forks source link

Code given to frames aren't compressed #297

Closed itsdouges closed 7 months ago

itsdouges commented 8 months ago

Hi folks 👋 — the query param given to the frame HTML isn't compressed, meaning the total amount of code able to be given to it is dramatically reduced. Even worse when it comes out with a ton of extra comments.

Here's an example URL which ends up being over 8k+ chars in length, meaning Cloudfront can't parse it. I'm going to try and patch package a fix where both ends of playroom encode/decode it using what's already available for the top level document.

https://design-system-docs-bifrost.stg-east.frontend.public.atl-paas.net/playroom/frame_bifrost?themeName=%242dark&code=%2F*%23__PURE__*%2FReact.createElement(React.Fragment%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(PageLayoutLeftSideBar%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigation%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationContent%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationSection%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(HomeIcon%2C%20null)%0A%7D%2C%20%22Home%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(SwitcherIcon%2C%20null)%0A%7D%2C%20%22Projects%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(FilterIcon%2C%20null)%0A%7D%2C%20%22Filters%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(PeopleIcon%2C%20null)%0A%7D%2C%20%22Teams%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(MoreVerticalIcon%2C%20null)%0A%7D%2C%20%22More%22))%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationSection%2C%20%7B%0A%20%20title%3A%20%22Starred%22%0A%7D%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20isSelected%3A%20true%2C%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22battery%22%0A%20%20%7D)%0A%7D%2C%20%22Dagobah%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22cloud%22%0A%20%20%7D)%0A%7D%2C%20%22Coruscant%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22drill%22%0A%20%20%7D)%0A%7D%2C%20%22Hoth%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22koala%22%0A%20%20%7D)%0A%7D%2C%20%22Jedha%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22ui%22%0A%20%20%7D)%0A%7D%2C%20%22Starkiller%20base%22))%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationSection%2C%20%7B%0A%20%20title%3A%20%22Recent%22%0A%7D%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22koala%22%0A%20%20%7D)%0A%7D%2C%20%22Jedha%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22ui%22%0A%20%20%7D)%0A%7D%2C%20%22Starkiller%20base%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22wallet%22%0A%20%20%7D)%0A%7D%2C%20%22Alderaan%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationButtonItem%2C%20%7B%0A%20%20iconBefore%3A%20%2F*%23__PURE__*%2FReact.createElement(ProjectIcon%2C%20%7B%0A%20%20%20%20variant%3A%20%22yeti%22%0A%20%20%7D)%0A%7D%2C%20%22Jakku%22)))%2C%20%2F*%23__PURE__*%2FReact.createElement(SideNavigationFooter%2C%20null%2C%20%22Upgrade%20to%20Jira%20Premium%22)))%2C%20%2F*%23__PURE__*%2FReact.createElement(PageLayoutMain%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(Box%2C%20%7B%0A%20%20paddingInline%3A%20%22space.300%22%2C%0A%20%20paddingBlock%3A%20%22space.200%22%0A%7D%2C%20%2F*%23__PURE__*%2FReact.createElement(Breadcrumbs%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22Projects%22%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22Design%20System%20Project%22%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22DS%20Fundamentals%20Board%22%0A%7D))%2C%20%2F*%23__PURE__*%2FReact.createElement(Stack%2C%20%7B%0A%20%20space%3A%20%22space.200%22%0A%7D%2C%20%2F*%23__PURE__*%2FReact.createElement(Heading%2C%20%7B%0A%20%20variant%3A%20%22xlarge%22%0A%7D%2C%20%22Design%20System%20Fundamentals%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(Textfield%2C%20%7B%0A%20%20placeholder%3A%20%22Search%20this%20board...%22%2C%0A%20%20elemAfterInput%3A%20%2F*%23__PURE__*%2FReact.createElement(SearchIcon%2C%20%7B%0A%20%20%20%20size%3A%20%22small%22%0A%20%20%7D)%2C%0A%20%20width%3A%20200%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(Breadcrumbs%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22Projects%22%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22Design%20System%20Project%22%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22DS%20Fundamentals%20Board%22%0A%7D))%2C%20%2F*%23__PURE__*%2FReact.createElement(Stack%2C%20%7B%0A%20%20space%3A%20%22space.200%22%0A%7D%2C%20%2F*%23__PURE__*%2FReact.createElement(Heading%2C%20%7B%0A%20%20variant%3A%20%22xlarge%22%0A%7D%2C%20%22Design%20System%20Fundamentals%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(Textfield%2C%20%7B%0A%20%20placeholder%3A%20%22Search%20this%20board...%22%2C%0A%20%20elemAfterInput%3A%20%2F*%23__PURE__*%2FReact.createElement(SearchIcon%2C%20%7B%0A%20%20%20%20size%3A%20%22small%22%0A%20%20%7D)%2C%0A%20%20width%3A%20200%0A%7D)%2C%20%22Content%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(Breadcrumbs%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22Projects%22%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22Design%20System%20Project%22%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22DS%20Fundamentals%20Board%22%0A%7D))%2C%20%2F*%23__PURE__*%2FReact.createElement(Stack%2C%20%7B%0A%20%20space%3A%20%22space.200%22%0A%7D%2C%20%2F*%23__PURE__*%2FReact.createElement(Heading%2C%20%7B%0A%20%20variant%3A%20%22xlarge%22%0A%7D%2C%20%22Design%20System%20Fundamentals%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(Textfield%2C%20%7B%0A%20%20placeholder%3A%20%22Search%20this%20board...%22%2C%0A%20%20elemAfterInput%3A%20%2F*%23__PURE__*%2FReact.createElement(SearchIcon%2C%20%7B%0A%20%20%20%20size%3A%20%22small%22%0A%20%20%7D)%2C%0A%20%20width%3A%20200%0A%7D)%2C%20%22Content%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(Breadcrumbs%2C%20null%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22Projects%22%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22Design%20System%20Project%22%0A%7D)%2C%20%2F*%23__PURE__*%2FReact.createElement(BreadcrumbsItem%2C%20%7B%0A%20%20href%3A%20%22%22%2C%0A%20%20text%3A%20%22DS%20Fundamentals%20Board%22%0A%7D))%2C%20%2F*%23__PURE__*%2FReact.createElement(Stack%2C%20%7B%0A%20%20space%3A%20%22space.200%22%0A%7D%2C%20%2F*%23__PURE__*%2FReact.createElement(Heading%2C%20%7B%0A%20%20variant%3A%20%22xlarge%22%0A%7D%2C%20%22Design%20System%20Fundamentals%22)%2C%20%2F*%23__PURE__*%2FReact.createElement(Textfield%2C%20%7B%0A%20%20placeholder%3A%20%22Search%20this%20board...%22%2C%0A%20%20elemAfterInput%3A%20%2F*%23__PURE__*%2FReact.createElement(SearchIcon%2C%20%7B%0A%20%20%20%20size%3A%20%22small%22%0A%20%20%7D)%2C%0A%20%20width%3A%20200%0A%7D)%2C%20%22Content%22)))))%3B
itsdouges commented 8 months ago

Path forward is to patch both ends:

This would be a breaking change for anyone using a custom frameSrc function.

katiedavis commented 8 months ago

@itsdouges did you end up having any success here?

itsdouges commented 8 months ago

Yes I was able to patch package and move forward with success. I can put a pull request up if folks are interested.

katiedavis commented 8 months ago

Yes I was able to patch package and move forward with success. I can put a pull request up if folks are interested.

I can’t speak for the seek folks but I sure would be!

mrm007 commented 7 months ago

There's https://github.com/seek-oss/playroom/pull/304 open if you'd like to chime in.

mrm007 commented 7 months ago

@itsdouges @katiedavis thanks for reporting. We released https://github.com/seek-oss/playroom/releases/tag/v0.34.0 with fixes and performance improvements.