%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[83],{1129:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContextProvider=t.FrameContext=void 0;var r,o=n(0),a=(r=o)&&r.__esModule?r:{default:r};var i=void 0,s=void 0;"undefined"!==typeof document&&(i=document),"undefined"!==typeof window&&(s=window);var c=t.FrameContext=a.default.createContext({document:i,window:s}),l=c.Provider,p=c.Consumer;t.FrameContextProvider=l,t.FrameContextConsumer=p},1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return N}));var r=n(118),o=n(1100),a=n(1109),i=n(1090),s=n(1117),c=n(1119),l=n(5),p=n(0),d=n(1024),u=n(551),f=n(1087),m=n(1099),h=n(11),b=n(370),j=n(371),y=n(1131),x=n.n(y),v=n(1);const O=Object(d.a)({productionPrefix:"iframe-"});class g extends p.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(b.a)({...Object(u.a)(),plugins:[...Object(u.a)().plugins,Object(j.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(v.jsxs)(v.Fragment,{children:[Object(v.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(v.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(v.jsx)(x.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(v.jsx)(f.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(v.jsx)(m.a,{theme:n,children:Object(p.cloneElement)(e,{container:this.state.container})})}):null})}}var w=Object(h.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(g);function C(e){const[t,n]=Object(p.useState)(e.currentTabIndex),{component:d,raw:u,iframe:f,className:m}=e;return Object(v.jsxs)(a.a,{className:Object(l.a)(m,"shadow"),children:[Object(v.jsx)(o.a,{position:"static",color:"default",className:"shadow-0",children:Object(v.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(v.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(i.a,{children:"remove_red_eye"})}),u&&Object(v.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(i.a,{children:"code"})})]})}),Object(v.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(v.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(f?Object(v.jsx)(w,{children:Object(v.jsx)(d,{})}):Object(v.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(v.jsx)(d,{})}))}),Object(v.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:u&&Object(v.jsx)("div",{className:"flex flex-1",children:Object(v.jsx)(r.a,{component:"pre",className:"language-javascript w-full",children:u.default})})})]})]})}C.defaultProps={currentTabIndex:0};var N=C},1131:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContext=void 0;var r=n(1129);Object.defineProperty(t,"FrameContext",{enumerable:!0,get:function(){return r.FrameContext}}),Object.defineProperty(t,"FrameContextConsumer",{enumerable:!0,get:function(){return r.FrameContextConsumer}});var o,a=n(1132),i=(o=a)&&o.__esModule?o:{default:o};t.default=i.default},1132:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(0),i=d(a),s=d(n(22)),c=d(n(553)),l=n(1129),p=d(n(1133));function d(e){return e&&e.__esModule?e:{default:e}}var u=function(e){function t(e,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return r.handleLoad=function(){r.forceUpdate()},r._isMounted=!1,r}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,[{key:"componentDidMount",value:function(){this._isMounted=!0;var e=this.getDoc();e&&"complete"===e.readyState?this.forceUpdate():this.node.addEventListener("load",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.node.removeEventListener("load",this.handleLoad)}},{key:"getDoc",value:function(){return this.node?this.node.contentDocument:null}},{key:"getMountTarget",value:function(){var e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var e=this.getDoc();if(!e)return null;var t=this.props.contentDidMount,n=this.props.contentDidUpdate,r=e.defaultView||e.parentView,o=i.default.createElement(p.default,{contentDidMount:t,contentDidUpdate:n},i.default.createElement(l.FrameContextProvider,{value:{document:e,window:r}},i.default.createElement("div",{className:"frame-content"},this.props.children)));e.body.children.length<1&&(e.open("text/html","replace"),e.write(this.props.initialContent),e.close());var a=this.getMountTarget();return[s.default.createPortal(this.props.head,this.getDoc().head),s.default.createPortal(o,a)]}},{key:"render",value:function(){var e=this,t=r({},this.props,{children:void 0});return delete t.head,delete t.initialContent,delete t.mountTarget,delete t.contentDidMount,delete t.contentDidUpdate,i.default.createElement("iframe",r({},t,{ref:function(t){e.node=t}}),this.renderFrameContents())}}]),t}(a.Component);u.propTypes={style:c.default.object,head:c.default.node,initialContent:c.default.string,mountTarget:c.default.string,contentDidMount:c.default.func,contentDidUpdate:c.default.func,children:c.default.oneOfType([c.default.element,c.default.arrayOf(c.default.element)])},u.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'},t.default=u},1133:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=n(0),a=(i(o),i(n(553)));function i(e){return e&&e.__esModule?e:{default:e}}var s=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return o.Children.only(this.props.children)}}]),t}(o.Component);s.propTypes={children:a.default.element.isRequired,contentDidMount:a.default.func.isRequired,contentDidUpdate:a.default.func.isRequired},t.default=s},1179:function(e,t,n){"use strict";var r=n(2),o=n(7),a=n(0),i=n.n(a);function s(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=s(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}var c=function(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=s(e))&&(r&&(r+=" "),r+=t);return r},l=n(99),p=n.n(l),d=n(1043);function u(e){return function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=n.name,s=Object(o.a)(n,["name"]);var l,u=a,f="function"===typeof t?function(e){return{root:function(n){return t(Object(r.a)({theme:e},n))}}}:{root:t},m=Object(d.a)(f,Object(r.a)({Component:e,name:a||e.displayName,classNamePrefix:u},s));t.filterProps&&(l=t.filterProps,delete t.filterProps),t.propTypes&&(t.propTypes,delete t.propTypes);var h=i.a.forwardRef((function(t,n){var a=t.children,s=t.className,p=t.clone,d=t.component,u=Object(o.a)(t,["children","className","clone","component"]),f=m(t),h=c(f.root,s),b=u;if(l&&(b=function(e,t){var n={};return Object.keys(e).forEach((function(r){-1===t.indexOf(r)&&(n[r]=e[r])})),n}(b,l)),p)return i.a.cloneElement(a,Object(r.a)({className:c(a.props.className,h)},b));if("function"===typeof a)return a(Object(r.a)({className:h},b));var j=d||e;return i.a.createElement(j,Object(r.a)({ref:n,className:h},b),a)}));return p()(h,e),h}}var f=n(166);t.a=function(e){var t=u(e);return function(e,n){return t(e,Object(r.a)({defaultTheme:f.a},n))}}},1304:function(e,t,n){"use strict";var r=n(105),o=n(2),a=n(230);function i(e,t){var n={};return Object.keys(e).forEach((function(r){-1===t.indexOf(r)&&(n[r]=e[r])})),n}function s(e){var t=function(t){var n=e(t);return t.css?Object(o.a)({},Object(a.a)(n,e(Object(o.a)({theme:t.theme},t.css))),i(t.css,[e.filterProps])):t.sx?Object(o.a)({},Object(a.a)(n,e(Object(o.a)({theme:t.theme},t.sx))),i(t.sx,[e.filterProps])):n};return t.propTypes={},t.filterProps=["css","sx"].concat(Object(r.a)(e.filterProps)),t}var c=s;var l=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var r=function(e){return t.reduce((function(t,n){var r=n(e);return r?Object(a.a)(t,r):t}),{})};return r.propTypes={},r.filterProps=t.reduce((function(e,t){return e.concat(t.filterProps)}),[]),r},p=n(20),d=n(383);function u(e,t){return t&&"string"===typeof t?t.split(".").reduce((function(e,t){return e&&e[t]?e[t]:null}),e):null}var f=function(e){var t=e.prop,n=e.cssProperty,r=void 0===n?e.prop:n,o=e.themeKey,a=e.transform,i=function(e){if(null==e[t])return null;var n=e[t],i=u(e.theme,o)||{};return Object(d.a)(e,n,(function(e){var t;return"function"===typeof i?t=i(e):Array.isArray(i)?t=i[e]||e:(t=u(i,e)||e,a&&(t=a(t))),!1===r?t:Object(p.a)({},r,t)}))};return i.propTypes={},i.filterProps=[t],i};function m(e){return"number"!==typeof e?e:"".concat(e,"px solid")}var h=l(f({prop:"border",themeKey:"borders",transform:m}),f({prop:"borderTop",themeKey:"borders",transform:m}),f({prop:"borderRight",themeKey:"borders",transform:m}),f({prop:"borderBottom",themeKey:"borders",transform:m}),f({prop:"borderLeft",themeKey:"borders",transform:m}),f({prop:"borderColor",themeKey:"palette"}),f({prop:"borderRadius",themeKey:"shape"})),b=l(f({prop:"displayPrint",cssProperty:!1,transform:function(e){return{"@media print":{display:e}}}}),f({prop:"display"}),f({prop:"overflow"}),f({prop:"textOverflow"}),f({prop:"visibility"}),f({prop:"whiteSpace"})),j=l(f({prop:"flexBasis"}),f({prop:"flexDirection"}),f({prop:"flexWrap"}),f({prop:"justifyContent"}),f({prop:"alignItems"}),f({prop:"alignContent"}),f({prop:"order"}),f({prop:"flex"}),f({prop:"flexGrow"}),f({prop:"flexShrink"}),f({prop:"alignSelf"}),f({prop:"justifyItems"}),f({prop:"justifySelf"})),y=l(f({prop:"gridGap"}),f({prop:"gridColumnGap"}),f({prop:"gridRowGap"}),f({prop:"gridColumn"}),f({prop:"gridRow"}),f({prop:"gridAutoFlow"}),f({prop:"gridAutoColumns"}),f({prop:"gridAutoRows"}),f({prop:"gridTemplateColumns"}),f({prop:"gridTemplateRows"}),f({prop:"gridTemplateAreas"}),f({prop:"gridArea"})),x=l(f({prop:"position"}),f({prop:"zIndex",themeKey:"zIndex"}),f({prop:"top"}),f({prop:"right"}),f({prop:"bottom"}),f({prop:"left"})),v=l(f({prop:"color",themeKey:"palette"}),f({prop:"bgcolor",cssProperty:"backgroundColor",themeKey:"palette"})),O=f({prop:"boxShadow",themeKey:"shadows"});function g(e){return e<=1?"".concat(100*e,"%"):e}var w=f({prop:"width",transform:g}),C=f({prop:"maxWidth",transform:g}),N=f({prop:"minWidth",transform:g}),S=f({prop:"height",transform:g}),P=f({prop:"maxHeight",transform:g}),_=f({prop:"minHeight",transform:g}),D=(f({prop:"size",cssProperty:"width",transform:g}),f({prop:"size",cssProperty:"height",transform:g}),l(w,C,N,S,P,_,f({prop:"boxSizing"}))),T=n(1123),M=l(f({prop:"fontFamily",themeKey:"typography"}),f({prop:"fontSize",themeKey:"typography"}),f({prop:"fontStyle",themeKey:"typography"}),f({prop:"fontWeight",themeKey:"typography"}),f({prop:"letterSpacing"}),f({prop:"lineHeight"}),f({prop:"textAlign"})),R=n(1179),k=c(l(h,b,j,y,x,v,O,D,T.b,M)),F=Object(R.a)("div")(k,{name:"MuiBox"});t.a=F},2083:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return i}));n(0);var r=n(1111),o=n(1304),a=n(1);function i(){return Object(a.jsxs)("div",{children:[Object(a.jsx)(o.a,{p:2,bgcolor:"primary.main",color:"primary.contrastText",children:"Server and Client"}),Object(a.jsx)(r.a,{children:Object(a.jsx)(o.a,{p:2,bgcolor:"secondary.main",color:"primary.contrastText",children:"Client only"})})]})}},2084:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport NoSsr from \'@material-ui/core/NoSsr\';\nimport Box from \'@material-ui/core/Box\';\n\nexport default function SimpleNoSsr() {\n return (\n <div>\n <Box p={2} bgcolor="primary.main" color="primary.contrastText">\n Server and Client\n </Box>\n <NoSsr>\n <Box p={2} bgcolor="secondary.main" color="primary.contrastText">\n Client only\n </Box>\n </NoSsr>\n </div>\n );\n}\n'},2085:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var r=n(0),o=n.n(r),a=n(1072),i=n(1111),s=n(1);const c=Object(a.a)({container:{width:300,display:"flex",flexWrap:"wrap"}});function l(){return Array.from(new Array(5e3)).map(((e,t)=>Object(s.jsx)("span",{children:"."},t)))}function p(){const e=c(),[t,n]=o.a.useState({open:!1,defer:!1});return Object(s.jsxs)("div",{children:[Object(s.jsx)("button",{type:"button",onClick:()=>n({open:!t.open,defer:!1}),children:'Render NoSsr defer="false"'}),Object(s.jsx)("br",{}),Object(s.jsx)("button",{type:"button",onClick:()=>n({open:!t.open,defer:!0}),children:'Render NoSsr defer="true"'}),Object(s.jsx)("br",{}),Object(s.jsx)("br",{}),Object(s.jsx)("div",{className:e.container,children:t.open?Object(s.jsxs)(o.a.Fragment,{children:[Object(s.jsx)("div",{children:"Outside NoSsr"}),Object(s.jsxs)(i.a,{defer:t.defer,children:[".....Inside NoSsr",Object(s.jsx)(l,{})]})]}):null})]})}},2086:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport NoSsr from '@material-ui/core/NoSsr';\n\nconst useStyles = makeStyles({\n container: {\n width: 300,\n display: 'flex',\n flexWrap: 'wrap',\n },\n});\n\nfunction LargeTree() {\n return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);\n}\n\nexport default function FrameDeferring() {\n const classes = useStyles();\n const [state, setState] = React.useState({ open: false, defer: false });\n\n return (\n <div>\n <button\n type=\"button\"\n onClick={() =>\n setState({\n open: !state.open,\n defer: false,\n })\n }\n >\n {'Render NoSsr defer=\"false\"'}\n </button>\n <br />\n <button\n type=\"button\"\n onClick={() =>\n setState({\n open: !state.open,\n defer: true,\n })\n }\n >\n {'Render NoSsr defer=\"true\"'}\n </button>\n <br />\n <br />\n <div className={classes.container}>\n {state.open ? (\n <React.Fragment>\n <div>Outside NoSsr</div>\n <NoSsr defer={state.defer}>\n .....Inside NoSsr\n <LargeTree />\n </NoSsr>\n </React.Fragment>\n ) : null}\n </div>\n </div>\n );\n}\n"},2590:function(e,t,n){"use strict";n.r(t);var r=n(1130),o=n(1098),a=n(1090),i=n(194),s=n(1072),c=n(1);const l=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return l(),Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(c.jsxs)(o.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/no-ssr",target:"_blank",role:"button",children:[Object(c.jsx)(a.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"No SSR"}),Object(c.jsx)(i.a,{className:"description",children:"NoSsr purposely removes components from the subject of Server Side Rendering (SSR)."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"This component can be useful in a variety of situations:"}),Object(c.jsxs)("ul",{children:[Object(c.jsx)("li",{children:"Escape hatch for broken dependencies not supporting SSR."}),Object(c.jsx)("li",{children:"Improve the time-to-first paint on the client by only rendering above the fold."}),Object(c.jsx)("li",{children:"Reduce the rendering time on the server."}),Object(c.jsx)("li",{children:"Under too heavy server load, you can turn on service degradation."}),Object(c.jsxs)("li",{children:["Improve the time-to-interactive by only rendering what's important (with the"," ",Object(c.jsx)("code",{children:"defer"})," property)."]})]}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Client side deferring"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(r.a,{className:"my-24",iframe:!1,component:n(2083).default,raw:n(2084)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Frame deferring"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["In it's core, the NoSsr component purpose is to ",Object(c.jsx)("strong",{children:"defer rendering"}),". As it's illustrated in the previous demo, you can use it to defer the rendering from the server to the client."]}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["But you can also use it to defer the rendering within the client itself. You can"," ",Object(c.jsx)("strong",{children:"wait a screen frame"})," with the ",Object(c.jsx)("code",{children:"defer"})," property to render the children. React does"," ",Object(c.jsx)("a",{href:"https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects",children:"2 commits"})," ","instead of 1."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(r.a,{className:"my-24",iframe:!1,component:n(2085).default,raw:n(2086)})})]})}}}]);
Zerion Mini Shell 1.0