Code given to frames aren't compressed

[itsdouges]

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]

Path forward is to patch both ends:

• frame src

  playroom/src/Playroom/Frames/frameSrc.js

  Line 7 in 9de7d5e

  }?themeName=${encodeURIComponent(themeName)}&code=${encodeURIComponent(

• frame component

  playroom/src/Playroom/Frame.tsx

  Line 25 in 9de7d5e

  code: typeof rawParams.code === 'string' ? rawParams.code : '',

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

[katiedavis]

@itsdouges did you end up having any success here?

[itsdouges]

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

[katiedavis]

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]

There's #304 open if you'd like to chime in.

[mrm007]

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