How to inline css and js in html using @rspack/plugin-html #3126

isBatak · 2023-05-11T14:23:13Z

isBatak
May 11, 2023

I'm setting up Figma plugin repo using rspack.
To actually initialize ui part of the plugin all the js and css chunks has to be inlined in the html.

This is the current output:

I want to have just the code.js and the ui.js and ui.css inlined in the ui.html.
Is that possible to do?

Config rspack.config.js:

const HtmlPlugin = require('@rspack/plugin-html').default;
const path = require('path');

const isProduction = process.env.NODE_ENV === 'production';
const extensions = ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.json', '.css'];

/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = {
  mode: isProduction ? 'production' : 'development',
  devtool: isProduction ? false : 'inline-source-map',
  entry: {
    ui: './src/app/index.tsx',
    code: './src/plugin/code.ts',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['postcss-loader'],
        type: 'css',
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
      },
    ],
  },
  resolve: {
    extensions,
    tsConfigPath: path.resolve(__dirname, 'tsconfig.json'),
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },

  plugins: [
    new HtmlPlugin({
      template: './src/app/index.ejs',
      filename: 'ui.html',
      chunks: ['ui'],
      cache: false,
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
      templateParameters: (compilation, assets, assetTags, options) => {
        return {
          inlineJS: compilation.assets['ui.js'].source(), // this part works in Webpack but not in the Rspack
        };
      },
    }),
  ],
};

html template index.ejs

<!DOCTYPE html>
<html class="dark">
  <head>
    <meta charset="utf-8" />
    <% if (inlineJS) { %>
    <script type="text/javascript">
      <%= inlineJS %>
    </script>
    <% } %>
  </head>
  <body>
    <div id="__plugin"></div>
  </body>
</html>

hardfist · 2023-05-12T06:22:20Z

hardfist
May 12, 2023
Maintainer

i test it in latest rspack version and it works, can you provide a minimal demo

0 replies

isBatak · 2023-05-14T20:28:07Z

isBatak
May 14, 2023
Author

Hi, thx for the quick reply and the solution.
I tried this solution but I still have some problems.
Here is the minimal reproduction repo https://github.com/isBatak/figma-plugin-starter

When I start the dev server I get this error:

Error: Parse Error: <t9.length;i++)rt(t9[i],e);i=r;break;case"source":rt("error",e),i=r;break;case"img":case"image":case"link":rt("error",e),rt("load",e),i=r;break;case"details":rt("toggle",e),i=r;break;case"input":J(e,r),i=Z(e,r),rt("invalid",e);break;case"option":default:i=r;break;case"select":e._wrapperState={wasMultiple:!!r.multiple},i=B({},r,{value:void 0}),rt("invalid",e);break;case"textarea":eo(e,r),i=eu(e,r),rt("invalid",e)}for(s in ew(t,i),d=i)if(d.hasOwnProperty(s)){var m=d[s];"style"===s?eb(e,m):"dangerouslySetInnerHTML"===s?null!=(m=m?m.__html:void 0)&&em(e,m):"children"===s?"string"==typeof m?("textarea"!==t||""!==m)&&eh(e,m):"number"==typeof m&&eh(e,""+m):"suppressContentEditableWarning"!==s&&"suppressHydrationWarning"!==s&&"autoFocus"!==s&&(p.hasOwnProperty(s)?null!=m&&"onScroll"===s&&rt("scroll",e):null!=m&&_(e,s,m,c))}switch(t){case"input":Y(e),et(e,r,!1);break;case"textarea":Y(e),es(e);break;case"option":null!=r.value&&e.setAttribute("value",""+q(r.value));break;case"select":e.multiple=!!r.multiple,null!=(s=r.value)?ea(e,!!r.multiple,s,!1):null!=r.defaultValue&&ea(e,!!r.multiple,r.defaultValue,!0);break;default:"function"==typeof i.onClick&&(e.onclick=rg)}switch(t){case"button":case"input":case"select":case"textarea":r=!!r.autoFocus;break e;case"img":r=!0;break e;default:r=!1}}r&&(n.flags|=4)}null!==n.ref&&(n.flags|=512,n.flags|=2097152)}return uz(n),null;case 6:if(e&&null!=n.stateNode)o(e,n,e.memoizedProps,r);else{if("string"!=typeof r&&null===n.stateNode)throw Error(f(166));if(t=l7(l9.current),l7(l6.current),ly(n)){if(r=n.stateNode,t=n.memoizedProps,r[rz]=n,(s=r.nodeValue!==t)&&null!==(e=ls))switch(e.tag){case 3:rh(r.nodeValue,t,0!=(1&e.mode));break;case 5:!0!==e.memoizedProps.suppressHydrationWarning&&rh(r.nodeValue,t,0!=(1&e.mode))}s&&(n.flags|=4)}else(r=(9===t.nodeType?t:t.ownerDocument).createTextNode(r))[rz]=n,n.stateNode=r}return uz(n),null;case 13:if(rA(al),r=n.memoizedState,null===e||null!==e.memoizedState&&null!==e.memoizedState.dehydrated){if(lf&&null!==lc&&0!=(1&n.mode)&&0==(128&n.flags))lb(),lk(),n.flags|=98560,s=!1;else if(s=ly(n),null!==r&&null!==r.dehydrated){if(null===e){if(!s)throw Error(f(318));if(!(s=null!==(s=n.memoizedState)?s.dehydrated:null))throw Error(f(317));s[rz]=n}else lk(),0==(128&n.flags)&&(n.memoizedState=null),n.flags|=4;uz(n),s=!1}else null!==ld&&(o_(ld),ld=null),s=!0;if(!s)return 65536&n.flags?n:null}if(0!=(128&n.flags))return n.lanes=t,n;return(r=null!==r)!=(null!==e&&null!==e.memoizedState)&&r&&(n.child.flags|=8192,0!=(1&n.mode)&&(null===e||0!=(1&al.current)?0===u7&&(u7=3):oM())),null!==n.updateQueue&&(n.flags|=4),uz(n),null;case 4:return an(),a(e,n),null===e&&ra(n.stateNode.containerInfo),uz(n),null;case 10:return lz(n.type._context),uz(n),null;case 19:if(rA(al),null===(s=n.memoizedState))return uz(n),null;if(r=0!=(128&n.flags),null===(c=s.rendering)){if(r)uN(s,!1);else{if(0!==u7||null!==e&&0!=(128&e.flags))for(e=n.child;null!==e;){if(null!==(c=aa(e))){for(n.flags|=128,uN(s,!1),null!==(r=c.updateQueue)&&(n.updateQueue=r,n.flags|=4),n.subtreeFlags=0,r=t,t=n.child;null!==t;)s=t,e=r,s.flags&=14680066,null===(c=s.alternate)?(s.childLanes=0,s.lanes=e,s.child=null,s.subtreeFlags=0,s.memoizedProps=null,s.memoizedState=null,s.updateQueue=null,s.dependencies=null,s.stateNode=null):(s.childLanes=c.childLanes,s.lanes=c.lanes,s.child=c.child,s.subtreeFlags=0,s.deletions=null,s.memoizedProps=c.memoizedProps,s.memoizedState=c.memoizedState,s.updateQueue=c.updateQueue,s.type=c.type,e=c.dependencies,s.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),t=t.sibling;return rB(al,1&al.current|2),n.child}e=e.sibling}null!==s.tail&&eJ()>oo&&(n.flags|=128,r=!0,uN(s,!1),n.lanes=4194304)}}else{if(!r){if(null!==(e=aa(c))){if(n.flags|=128,r=!0,null!==(t=e.updateQueue)&&(n.updateQueue=t,n.flags|=4),uN(s,!0),null===s.tail&&"hidden"===s.tailMode&&!c.alternate&&!lf)return uz(n),null}else 2*eJ()-s.renderingStartTime>oo&&1073741824!==t&&(n.flags|=128,r=!0,uN(s,!1),n.lanes=4194304)}s.isBackwards?(c.sibling=n.child,n.child=c):(null!==(t=s.last)?t.sibling=c:n.child=c,s.last=c)}if(null!==s.tail)return n=s.tail,s.rendering=n,s.tail=n.sibling,s.renderingStartTime=eJ(),n.sibling=null,t=al.current,rB(al,r?1&t|2:1&t),n;return uz(n),null;case 22:case 23:return oT(),r=null!==n.memoizedState,null!==e&&null!==e.memoizedState!==r&&(n.flags|=8192),r&&0!=(1&n.mode)?0!=(1073741824&u5)&&(uz(n),6&n.subtreeFlags&&(n.flags|=8192)):uz(n),null;case 24:case 25:return null}throw Error(f(156,n.tag))}(t,n,u5))){u8=t;return}}else{if(null!==(t=function(e,n){switch(li(n),n.tag){case 1:return rY(n.type)&&rX(),65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 3:return an(),rA(rQ),rA(rW),ao(),0!=(65536&(e=n.flags))&&0==(128&e)?(n.flags=-65537&e|128,n):null;case 5:return ar(n),null;case 13:if(rA(al),null!==(e=n.memoizedState)&&null!==e.dehydrated){if(null===n.alternate)throw Error(f(340));lk()}return 65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 19:return rA(al),null;case 4:return an(),null;case 10:return lz(n.type._context),null;case 22:case 23:return oT(),null;default:return null}}(t,n))){t.flags&=32767,u8=t;return}if(null!==e)e.flags|=32768,e.subtreeFlags=0,e.deletions=null;else{u7=6,u8=null;return}}if(null!==(n=n.sibling)){u8=n;return}u8=n=e}while(null!==n);0===u7&&(u7=5)}function oU(e,n,t){var r=nc,l=u2.transition;try{u2.transition=null,nc=1,function(e,n,t,r){do oj();while(null!==op);if(0!=(6&u3))throw Error(f(327));t=e.finishedWork;var l=e.finishedLanes;if(null===t)return;if(e.finishedWork=null,e.finishedLanes=0,t===e.current)throw Error(f(177));e.callbackNode=null,e.callbackPriority=0;var a=t.lanes|t.childLanes;if(!function(e,n){var t=e.pendingLanes&~n;e.pendingLanes=n,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=n,e.mutableReadLanes&=n,e.entangledLanes&=n,n=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0<t;){var l=31-e9(t),a=1<<l;n[l]=0,r[l]=-1,e[l]=-1,t&=~a}}(e,a),e===u4&&(u8=u4=null,u6=0),0==(2064&t.subtreeFlags)&&0==(2064&t.flags)||od||(od=!0,function(e,n){eY(e,n)}(e3,function(){return oj(),null})),a=0!=(15990&t.flags),0!=(15990&t.subtreeFlags)||a){a=u2.transition,u2.transition=null;var u,o,i,s=nc;nc=1;var c=u3;u3|=4,u1.current=null,!function(e,n){if(rv=nF,t$(e=tV())){if("selectionStart"in e)var t={start:e.selectionStart,end:e.selectionEnd};else e:{var r=(t=(t=e.ownerDocument)&&t.defaultView||window).getSelection&&t.getSelection();if(r&&0!==r.rangeCount){t=r.anchorNode;var l,a=r.anchorOffset,u=r.focusNode;r=r.focusOffset;try{t.nodeType,u.nodeType}catch(e){t=null;break e}var o=0,i=-1,s=-1,c=0,d=0,p=e,m=null;n:for(;;){for(;p!==t||0!==a&&3!==p.nodeType||(i=o+a),p!==u||0!==r&&3!==p.nodeType||(s=o+r),3===p.nodeType&&(o+=p.nodeValue.length),null!==(l=p.firstChild);){;m=p,p=l}for(;;){if(p===e)break n;if(m===t&&++c===a&&(i=o),m===u&&++d===r&&(s=o),null!==(l=p.nextSibling))break;m=(p=m).parentNode}p=l}t=-1===i||-1===s?null:{start:i,end:s}}else t=null}t=t||{start:0,end:0}}else t=null;for(ry={focusedElem:e,selectionRange:t},nF=!1,uO=n;null!==uO;)if(e=(n=uO).child,0!=(1028&n.subtreeFlags)&&null!==e)e.return=n,uO=e;else for(;null!==uO;){n=uO;try{var h=n.alternate;if(0!=(1024&n.flags))switch(n.tag){case 0:case 11:case 15:case 5:case 6:case 4:case 17:break;case 1:if(null!==h){var g=h.memoizedProps,v=h.memoizedState,y=n.stateNode,b=y.getSnapshotBeforeUpdate(n.elementType===n.type?g:lx(n.type,g),v);y.__reactInternalSnapshotBeforeUpdate=b}break;case 3:var k=n.stateNode.containerInfo;1===k.nodeType?k.textContent="":9===k.nodeType&&k.documentElement&&k.removeChild(k.documentElement);break;default:throw Error(f(163))}}catch(e){o$(n,n.return,e)}if(null!==(e=n.sibling)){e.return=n.return,uO=e;break}uO=n.return}h=uD,uD=!1}(e,t),uK(t,e),!function(e){var n=tV(),t=e.focusedElem,r=e.selectionRange;if(n!==t&&t&&t.ownerDocument&&function e(n,t){return!!n&&!!t&&(n===t||(!n||3!==n.nodeType)&&(t&&3===t.nodeType?e(n,t.parentNode):"contains"in n?n.contains(t):!!n.compareDocumentPosition&&!!(16&n.compareDocumentPosition(t))))}(t.ownerDocument.documentElement,t)){if(null!==r&&t$(t)){if(n=r.start,void 0===(e=r.end)&&(e=n),"selectionStart"in t)t.selectionStart=n,t.selectionEnd=Math.min(e,t.value.length);else if((e=(n=t.ownerDocument||document)&&n.defaultView||window).getSelection){e=e.getSelection();var l=t.textContent.length,a=Math.min(r.start,l);r=void 0===r.end?a:Math.min(r.end,l),!e.extend&&a>r&&(l=r,r=a,a=l),l=tj(t,a);var u=tj(t,r);l&&u&&(1!==e.rangeCount||e.anchorNode!==l.node||e.anchorOffset!==l.offset||e.focusNode!==u.node||e.focusOffset!==u.offset)&&((n=n.createRange()).setStart(l.node,l.offset),e.removeAllRanges(),a>r?(e.addRange(n),e.extend(u.node,u.offset)):(n.setEnd(u.node,u.offset),e.addRange(n)))}}for(n=[],e=t;e=e.parentNode;)1===e.nodeType&&n.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof t.focus&&t.focus(),t=0;t<n.length;t++)(e=n[t]).element.scrollLeft=e.left,e.element.scrollTop=e.top}}(ry),nF=!!rv,ry=rv=null,e.current=t,u=t,o=e,i=l,uO=u,function e(n,t,r){for(var l=0!=(1&n.mode);null!==uO;){var a=uO,u=a.child;if(22===a.tag&&l){var o=null!==a.memoizedState||uT;if(!o){var i=a.alternate,s=null!==i&&null!==i.memoizedState||uL;i=uT;var c=uL;if(uT=o,(uL=s)&&!c)for(uO=a;null!==uO;)s=(o=uO).child,22===o.tag&&null!==o.memoizedState?uZ(a):null!==s?(s.return=o,uO=s):uZ(a);for(;null!==u;)uO=u,e(u,t,r),u=u.sibling;uO=a,uT=i,uL=c}uX(n,t,r)}else 0!=(8772&a.subtreeFlags)&&null!==u?(u.return=a,uO=u):uX(n,t,r)}}(u,o,i),eZ(),u3=c,nc=s,u2.transition=a}else e.current=t;if(od&&(od=!1,op=e,om=l),0===(a=e.pendingLanes)&&(of=null),!function(e){if(e5&&"function"==typeof e5.onCommitFiberRoot)try{e5.onCommitFiberRoot(e6,e,void 0,128==(128&e.current.flags))}catch(e){}}(t.stateNode,r),oS(e,eJ()),null!==n)for(r=e.onRecoverableError,t=0;t<n.length;t++)r((l=n[t]).value,{componentStack:l.stack,digest:l.digest});if(os)throw os=!1,e=oc,oc=null,e;0!=(1&om)&&0!==e.tag&&oj(),0!=(1&(a=e.pendingLanes))?e===og?oh++:(oh=0,og=e):oh=0,r8()}(e,n,t,r)}finally{u2.transition=l,nc=r}return null}function oj(){if(null!==op){var e=nf(om),n=u2.transition,t=nc;try{if(u2.transition=null,nc=16>e?16:e,null===op)var r=!1;else{if(e=op,op=null,om=0,0!=(6&u3))throw Error(f(331));var l=u3;for(u3|=4,uO=e.current;null!==uO;){var a=uO,u=a.child;if(0!=(16&uO.flags)){var o=a.deletions;if(null!==o){for(var i=0;i<o.length;i++){var s=o[i];for(uO=s;null!==uO;){var c=uO;switch(c.tag){case 0:case 11:case 15:uI(8,c,a)}var d=c.child;if(null!==d)d.return=c,uO=d;else for(;null!==uO;){var p=(c=uO).sibling,m=c.return;if(!function e(n){var t=n.alternate;null!==t&&(n.alternate=null,e(t)),n.child=null,n.deletions=null,n.sibling=null,5===n.tag&&null!==(t=n.stateNode)&&(delete t[rz],delete t[rT],delete t[rR],delete t[rO],delete t[rM]),n.stateNode=null,n.return=null,n.dependencies=null,n.memoizedProps=null,n.memoizedState=null,n.pendingProps=null,n.stateNode=null,n.updateQueue=null}(c),c===s){uO=null;break}if(null!==p){p.return=m,uO=p;break}uO=m}}}var h=a.alternate;if(null!==h){var g=h.child;if(null!==g){h.child=null;do{var v=g.sibling;g.sibling=null,g=v}while(null!==g)}}uO=a}}if(0!=(2064&a.subtreeFlags)&&null!==u)u.return=a,uO=u;else n:for(;null!==uO;){if(a=uO,0!=(2048&a.flags))switch(a.tag){case 0:case 11:case 15:uI(9,a,a.return)}var y=a.sibling;if(null!==y){y.return=a.return,uO=y;break n}uO=a.return}}var b=e.current;for(uO=b;null!==uO;){var k=(u=uO).child;if(0!=(2064&u.subtreeFlags)&&null!==k)k.return=u,uO=k;else n:for(u=b;null!==uO;){if(o=uO,0!=(2048&o.flags))try{switch(o.tag){case 0:case 11:case 15:uU(9,o)}}catch(e){o$(o,o.return,e)}if(o===u){uO=null;break n}var w=o.sibling;if(null!==w){w.return=o.return,uO=w;break n}uO=o.return}}if(u3=l,r8(),e5&&"function"==typeof e5.onPostCommitFiberRoot)try{e5.onPostCommitFiberRoot(e6,e)}catch(e){}r=!0}return r}finally{nc=t,u2.transition=n}}return!1}function oV(e,n,t){n=a6(t,n),n=ue(e,n,1),e=l$(e,n,1),n=ob(),null!==e&&(ni(e,1,n),oS(e,n))}function o$(e,n,t){if(3===e.tag)oV(e,e,t);else for(;null!==n;){if(3===n.tag){oV(n,e,t);break}if(1===n.tag){var r=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===of||!of.has(r))){e=a6(t,e),e=un(n,e,1),n=l$(n,e,1),e=ob(),null!==n&&(ni(n,1,e),oS(n,e));break}}n=n.return}}function oA(e,n,t){var r=e.pingCache;null!==r&&r.delete(n),n=ob(),e.pingedLanes|=e.suspendedLanes&t,u4===e&&(u6&t)===t&&(4===u7||3===u7&&(130023424&u6)===u6&&500>eJ()-ou?oL(e,0):or|=t),oS(e,n)}function oB(e,n){0===n&&(0==(1&e.mode)?n=1:(n=nt,0==(130023424&(nt<<=1))&&(nt=4194304)));var t=ob();null!==(e=lD(e,n))&&(ni(e,n,t),oS(e,t))}function oH(e){var n=e.memoizedState,t=0;null!==n&&(t=n.retryLane),oB(e,t)}function oW(e,n){var t=0;switch(e.tag){case 13:var r=e.stateNode,l=e.memoizedState;null!==l&&(t=l.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(f(314))}null!==r&&r.delete(n),oB(e,t)}function oQ(e,n){return eY(e,n)}function oq(e,n,t,r){this.tag=e,this.key=t,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=n,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function oK(e,n,t,r){return new oq(e,n,t,r)}function oY(e){return!(!(e=e.prototype)||!e.isReactComponent)}i=function(e,n,t){if(null!==e){if(e.memoizedProps!==n.pendingProps||rQ.current)uu=!0;else{if(0==(e.lanes&t)&&0==(128&n.flags))return uu=!1,function(e,n,t){switch(n.tag){case 3:ug(n),lk();break;case 5:at(n);break;case 1:rY(n.type)&&rJ(n);break;case 4:ae(n,n.stateNode.containerInfo);break;case 10:var r=n.type._context,l=n.memoizedProps.value;rB(lE,r._currentValue),r._currentValue=l;break;case 13:if(null!==(r=n.memoizedState)){if(null!==r.dehydrated)return rB(al,1&al.current),n.flags|=128,null;if(0!=(t&n.child.childLanes))return uk(e,n,t);return rB(al,1&al.current),null!==(e=uP(e,n,t))?e.sibling:null}rB(al,1&al.current);break;case 19:if(r=0!=(t&n.childLanes),0!=(128&e.flags)){if(r)return u_(e,n,t);n.flags|=128}if(null!==(l=n.memoizedState)&&(l.rendering=null,l.tail=null,l.lastEffect=null),rB(al,al.current),!r)return null;break;case 22:case 23:return n.lanes=0,uf(e,n,t)}return uP(e,n,t)}(e,n,t);uu=0!=(131072&e.flags)}}else uu=!1,lf&&0!=(1048576&n.flags)&&lu(n,r7,n.index);switch(n.lanes=0,n.tag){case 2:var r=n.type;uC(e,n),e=n.pendingProps;var l=rK(n,rW.current);lL(n,t),l=ak(null,n,r,e,l,t);var a=aw();return n.flags|=1,"object"==typeof l&&null!==l&&"function"==typeof l.render&&void 0===l.$$typeof?(n.tag=1,n.memoizedState=null,n.updateQueue=null,rY(r)?(a=!0,rJ(n)):a=!1,n.memoizedState=null!==l.state&&void 0!==l.state?l.state:null,lU(n),l.updater=lK,n.stateNode=l,l._reactInternals=n,lZ(n,r,e,t),n=uh(null,n,r,!0,a,t)):(n.tag=0,lf&&a&&lo(n),uo(null,n,l,t),n=n.child),n;case 16:r=n.elementType;e:{switch(uC(e,n),e=n.pendingProps,r=(l=r._init)(r._payload),n.type=r,l=n.tag=function(e){if("function"==typeof e)return oY(e)?1:0;if(null!=e){if((e=e.$$typeof)===M)return 11;if(e===I)return 14}return 2}(r),e=lx(r,e),l){case 0:n=up(null,n,r,e,t);break e;case 1:n=um(null,n,r,e,t);break e;case 11:n=ui(null,n,r,e,t);break e;case 14:n=us(null,n,r,lx(r.type,e),t);break e}throw Error(f(306,r,""))}return n;case 0:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:lx(r,l),up(e,n,r,l,t);case 1:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:lx(r,l),um(e,n,r,l,t);case 3:e:{if(ug(n),null===e)throw Error(f(387));r=n.pendingProps,l=(a=n.memoizedState).element,lj(e,n),lH(n,r,null,t);var u=n.memoizedState;if(r=u.element,a.isDehydrated){if(a={element:r,isDehydrated:!1,cache:u.cache,pendingSuspenseBoundaries:u.pendingSuspenseBoundaries,transitions:u.transitions},n.updateQueue.baseState=a,n.memoizedState=a,256&n.flags){l=a6(Error(f(423)),n),n=uv(e,n,r,t,l);break e}if(r!==l){l=a6(Error(f(424)),n),n=uv(e,n,r,t,l);break e}else for(lc=rC(n.stateNode.containerInfo.firstChild),ls=n,lf=!0,ld=null,t=l4(n,null,r,t),n.child=t;t;)t.flags=-3&t.flags|4096,t=t.sibling}else{if(lk(),r===l){n=uP(e,n,t);break e}uo(e,n,r,t)}n=n.child}return n;case 5:return at(n),null===e&&lg(n),r=n.type,l=n.pendingProps,a=null!==e?e.memoizedProps:null,u=l.children,rb(r,l)?u=null:null!==a&&rb(r,a)&&(n.flags|=32),ud(e,n),uo(e,n,u,t),n.child;case 6:return null===e&&lg(n),null;case 13:return uk(e,n,t);case 4:return ae(n,n.stateNode.containerInfo),r=n.pendingProps,null===e?n.child=l3(n,null,r,t):uo(e,n,r,t),n.child;case 11:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:lx(r,l),ui(e,n,r,l,t);case 7:return uo(e,n,n.pendingProps,t),n.child;case 8:case 12:return uo(e,n,n.pendingProps.children,t),n.child;case 10:e:{if(r=n.type._context,l=n.pendingProps,a=n.memoizedProps,u=l.value,rB(lE,r._currentValue),r._currentValue=u,null!==a){if(tD(a.value,u)){if(a.children===l.children&&!rQ.current){n=uP(e,n,t);break e}}else for(null!==(a=n.child)&&(a.return=n);null!==a;){var o=a.dependencies;if(null!==o){u=a.child;for(var i=o.firstContext;null!==i;){if(i.context===r){if(1===a.tag){(i=lV(-1,t&-t)).tag=2;var s=a.updateQueue;if(null!==s){var c=(s=s.shared).pending;null===c?i.next=i:(i.next=c.next,c.next=i),s.pending=i}}a.lanes|=t,null!==(i=a.alternate)&&(i.lanes|=t),lT(a.return,t,n),o.lanes|=t;break}i=i.next}}else if(10===a.tag)u=a.type===n.type?null:a.child;else if(18===a.tag){if(null===(u=a.return))throw Error(f(341));u.lanes|=t,null!==(o=u.alternate)&&(o.lanes|=t),lT(u,t,n),u=a.sibling}else u=a.child;if(null!==u)u.return=a;else for(u=a;null!==u;){if(u===n){u=null;break}if(null!==(a=u.sibling)){a.return=u.return,u=a;break}u=u.return}a=u}}uo(e,n,l.children,t),n=n.child}return n;case 9:return l=n.type,r=n.pendingProps.children,lL(n,t),l=lR(l),r=r(l),n.flags|=1,uo(e,n,r,t),n.child;case 14:return l=lx(r=n.type,n.pendingProps),l=lx(r.type,l),us(e,n,r,l,t);case 15:return uc(e,n,n.type,n.pendingProps,t);case 17:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:lx(r,l),uC(e,n),n.tag=1,rY(r)?(e=!0,rJ(n)):e=!1,lL(n,t),lX(n,r,l),lZ(n,r,l,t),uh(null,n,r,!0,e,t);case 19:return u_(e,n,t);case 22:return uf(e,n,t)}throw Error(f(156,n.tag))};function oX(e,n){var t=e.alternate;return null===t?((t=oK(e.tag,n,e.key,e.mode)).elementType=e.elementType,t.type=e.type,t.stateNode=e.stateNode,t.alternate=e,e.alternate=t):(t.pendingProps=n,t.type=e.type,t.flags=0,t.subtreeFlags=0,t.deletions=null),t.flags=14680064&e.flags,t.childLanes=e.childLanes,t.lanes=e.lanes,t.child=e.child,t.memoizedProps=e.memoizedProps,t.memoizedState=e.memoizedState,t.updateQueue=e.updateQueue,n=e.dependencies,t.dependencies=null===n?null:{lanes:n.lanes,firstContext:n.firstContext},t.sibling=e.sibling,t.index=e.index,t.ref=e.ref,t}function oG(e,n,t,r,l,a){var u=2;if(r=e,"function"==typeof e)oY(e)&&(u=1);else if("string"==typeof e)u=5;else e:switch(e){case z:return oZ(t.children,l,a,n);case T:u=8,l|=8;break;case L:return(e=oK(12,t,n,2|l)).elementType=L,e.lanes=a,e;case F:return(e=oK(13,t,n,l)).elementType=F,e.lanes=a,e;case D:return(e=oK(19,t,n,l)).elementType=D,e.lanes=a,e;case j:return oJ(t,l,a,n);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case R:u=10;break e;case O:u=9;break e;case M:u=11;break e;case I:u=14;break e;case U:u=16,r=null;break e}throw Error(f(130,null==e?e:typeof e,""))}return(n=oK(u,t,n,l)).elementType=e,n.type=r,n.lanes=a,n}function oZ(e,n,t,r){return(e=oK(7,e,r,n)).lanes=t,e}function oJ(e,n,t,r){return(e=oK(22,e,r,n)).elementType=j,e.lanes=t,e.stateNode={isHidden:!1},e}function o0(e,n,t){return(e=oK(6,e,null,n)).lanes=t,e}function o1(e,n,t){return(n=oK(4,null!==e.children?e.children:[],e.key,n)).lanes=t,n.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},n}function o2(e,n,t,r,l){this.tag=n,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=no(0),this.expirationTimes=no(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=no(0),this.identifierPrefix=r,this.onRecoverableError=l,this.mutableSourceEagerHydrationData=null}function o3(e,n,t,r,l,a,u,o,i){return e=new o2(e,n,t,o,i),1===n?(n=1,!0===a&&(n|=8)):n=0,a=oK(3,null,null,n),e.current=a,a.stateNode=e,a.memoizedState={element:r,isDehydrated:t,cache:null,transitions:null,pendingSuspenseBoundaries:null},lU(a),e}function o4(e){if(!e)return rH;e=e._reactInternals;e:{if(eW(e)!==e||1!==e.tag)throw Error(f(170));var n=e;do{switch(n.tag){case 3:n=n.stateNode.context;break e;case 1:if(rY(n.type)){n=n.stateNode.__reactInternalMemoizedMergedChildContext;break e}}n=n.return}while(null!==n);throw Error(f(171))}if(1===e.tag){var t=e.type;if(rY(t))return rZ(e,t,n)}return n}function o8(e,n,t,r,l,a,u,o,i){return(e=o3(t,r,!0,e,l,a,u,o,i)).context=o4(null),t=e.current,r=ob(),(a=lV(r,l=ok(t))).callback=null!=n?n:null,l$(t,a,l),e.current.lanes=l,ni(e,l,r),oS(e,r),e}function o6(e,n,t,r){var l=n.current,a=ob(),u=ok(l);return t=o4(t),null===n.context?n.context=t:n.pendingContext=t,(n=lV(a,u)).payload={element:e},null!==(r=void 0===r?null:r)&&(n.callback=r),null!==(e=l$(l,n,u))&&(ow(e,l,u,a),lA(e,l,u)),u}function o5(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function o9(e,n){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var t=e.retryLane;e.retryLane=0!==t&&t<n?t:n}}function o7(e,n){o9(e,n),(e=e.alternate)&&o9(e,n)}var ie="function"==typeof reportError?reportError:function(e){console.error(e)};function it(e){this._internalRoot=e}function ir(e){this._internalRoot=e}function il(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType)}function ia(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function iu(){}ir.prototype.render=it.prototype.render=function(e){var n=this._internalRoot;if(null===n)throw Error(f(409));o6(e,n,null,null)},ir.prototype.unmount=it.prototype.unmount=function(){var e=this._internalRoot;if(null!==e){this._internalRoot=null;var n=e.containerInfo;oz(function(){o6(null,e,null,null)}),n[rL]=null}},ir.prototype.unstable_scheduleHydration=function(e){if(e){var n=nh();e={blockedOn:null,target:e,priority:n};for(var t=0;t<nE.length&&0!==n&&n<nE[t].priority;t++);nE.splice(t,0,e),0===t&&nN(e)}};function io(e,n,t,r,l){var a=t._reactRootContainer;if(a){var u=a;if("function"==typeof l){var o=l;l=function(){var e=o5(u);o.call(e)}}o6(n,u,e,l)}else u=function(e,n,t,r,l){if(l){if("function"==typeof r){var a=r;r=function(){var e=o5(u);a.call(e)}}var u=o8(n,r,e,0,null,!1,!1,"",iu);return e._reactRootContainer=u,e[rL]=u.current,ra(8===e.nodeType?e.parentNode:e),oz(),u}for(;l=e.lastChild;)e.removeChild(l);if("function"==typeof r){var o=r;r=function(){var e=o5(i);o.call(e)}}var i=o3(e,0,!1,null,null,!1,!1,"",iu);return e._reactRootContainer=i,e[rL]=i.current,ra(8===e.nodeType?e.parentNode:e),oz(function(){o6(n,i,t,r)}),i}(t,n,e,l,r);return o5(u)}nd=function(e){switch(e.tag){case 3:var n=e.stateNode;if(n.current.memoizedState.isDehydrated){var t=nr(n.pendingLanes);0!==t&&(ns(n,1|t),oS(n,eJ()),0==(6&u3)&&(oo=eJ()+500,r8()))}break;case 13:oz(function(){var n=lD(e,1);null!==n&&ow(n,e,1,ob())}),o7(e,1)}},np=function(e){if(13===e.tag){var n=lD(e,134217728);null!==n&&ow(n,e,134217728,ob()),o7(e,134217728)}},nm=function(e){if(13===e.tag){var n=ok(e),t=lD(e,n);null!==t&&ow(t,e,n,ob()),o7(e,n)}},nh=function(){return nc},ng=function(e,n){var t=nc;try{return nc=e,n()}finally{nc=t}},e_=function(e,n,t){switch(n){case"input":if(en(e,t),n=t.name,"radio"===t.type&&null!=n){for(t=e;t.parentNode;)t=t.parentNode;for(t=t.querySelectorAll("input[name="+JSON.stringify(""+n)+'][type="radio"]'),n=0;n<t.length;n++){var r=t[n];if(r!==e&&r.form===e.form){var l=rU(r);if(!l)throw Error(f(90));X(r),en(r,l)}}}break;case"textarea":ei(e,t);break;case"select":null!=(n=t.value)&&ea(e,!!t.multiple,n,!1)}},eL=oN,eR=oz;var ii={findFiberByHostInstance:rF,bundleType:0,version:"18.2.0",rendererPackageName:"react-dom"},is={bundleType:ii.bundleType,version:ii.version,rendererPackageName:ii.rendererPackageName,rendererConfig:ii.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:C.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=eK(e))?null:e.stateNode},findFiberByHostInstance:ii.findFiberByHostInstance||function(){return null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null,reconcilerVersion:"18.2.0-next-9e3b772b8-20220608"};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var ic=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!ic.isDisabled&&ic.supportsFiber)try{e6=ic.inject(is),e5=ic}catch(e){}}n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED={usingClientEntryPoint:!1,Events:[rD,rI,rU,ez,eT,oN]},n.createPortal=function(e,n){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!il(n))throw Error(f(200));return function(e,n,t){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:N,key:null==r?null:""+r,children:e,containerInfo:n,implementation:null}}(e,n,null,t)},n.createRoot=function(e,n){if(!il(e))throw Error(f(299));var t=!1,r="",l=ie;return null!=n&&(!0===n.unstable_strictMode&&(t=!0),void 0!==n.identifierPrefix&&(r=n.identifierPrefix),void 0!==n.onRecoverableError&&(l=n.onRecoverableError)),n=o3(e,1,!1,null,null,t,!1,r,l),e[rL]=n.current,ra(8===e.nodeType?e.parentNode:e),new it(n)},n.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var n=e._reactInternals;if(void 0===n){if("function"==typeof e.render)throw Error(f(188));throw Error(f(268,e=Object.keys(e).join(",")))}return e=null===(e=eK(n))?null:e.stateNode},n.flushSync=function(e){return oz(e)},n.hydrate=function(e,n,t){if(!ia(n))throw Error(f(200));return io(null,e,n,!0,t)},n.hydrateRoot=function(e,n,t){if(!il(e))throw Error(f(405));var r=null!=t&&t.hydratedSources||null,l=!1,a="",u=ie;if(null!=t&&(!0===t.unstable_strictMode&&(l=!0),void 0!==t.identifierPrefix&&(a=t.identifierPrefix),void 0!==t.onRecoverableError&&(u=t.onRecoverableError)),n=o8(n,null,e,1,null!=t?t:null,l,!1,a,u),e[rL]=n.current,ra(e),r)for(e=0;e<r.length;e++)l=(l=(t=r[e])._getVersion)(t._source),null==n.mutableSourceEagerHydrationData?n.mutableSourceEagerHydrationData=[t,l]:n.mutableSourceEagerHydrationData.push(t,l);return new ir(n)},n.render=function(e,n,t){if(!ia(n))throw Error(f(200));return io(null,e,n,!1,t)},n.unmountComponentAtNode=function(e){if(!ia(e))throw Error(f(40));return!!e._reactRootContainer&&(oz(function(){io(null,null,e,!1,function(){e._reactRootContainer=null,e[rL]=null})}),!0)},n.unstable_batchedUpdates=oN,n.unstable_renderSubtreeIntoContainer=function(e,n,t,r){if(!ia(t))throw Error(f(200));if(null==e||void 0===e._reactInternals)throw Error(f(38));return io(e,n,t,!1,r)},n.version="18.2.0-next-9e3b772b8-20220608"},514:function(e,n,t){"use strict";var r=t("994");n.createRoot=r.createRoot,n.hydrateRoot=r.hydrateRoot},994:function(e,n,t){"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(e){console.error(e)}}(),e.exports=t("836")},488:function(e,n,t){"use strict";var r=t("950"),l=Symbol.for("react.element"),a=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,o=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function s(e,n,t){var r,a={},s=null,c=null;for(r in void 0!==t&&(s=""+t),void 0!==n.key&&(s=""+n.key),void 0!==n.ref&&(c=n.ref),n)u.call(n,r)&&!i.hasOwnProperty(r)&&(a[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===a[r]&&(a[r]=n[r]);return{$$typeof:l,type:e,key:s,ref:c,props:a,_owner:o.current}}n.Fragment=a,n.jsx=s,n.jsxs=s},478:function(e,n,t){"use strict";var r=Symbol.for("react.element"),l=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),u=Symbol.for("react.strict_mode"),o=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),m=Symbol.iterator,h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},g=Object.assign,v={};function y(e,n,t){this.props=e,this.context=n,this.refs=v,this.updater=t||h}function b(){}function k(e,n,t){this.props=e,this.context=n,this.refs=v,this.updater=t||h}y.prototype.isReactComponent={},y.prototype.setState=function(e,n){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,n,"setState")},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=y.prototype;var w=k.prototype=new b;w.constructor=k,g(w,y.prototype),w.isPureReactComponent=!0;var S=Array.isArray,x=Object.prototype.hasOwnProperty,E={current:null},_={key:!0,ref:!0,__self:!0,__source:!0};function C(e,n,t){var l,a={},u=null,o=null;if(null!=n)for(l in void 0!==n.ref&&(o=n.ref),void 0!==n.key&&(u=""+n.key),n)x.call(n,l)&&!_.hasOwnProperty(l)&&(a[l]=n[l]);var i=arguments.length-2;if(1===i)a.children=t;else if(1<i){for(var s=Array(i),c=0;c<i;c++)s[c]=arguments[c+2];a.children=s}if(e&&e.defaultProps)for(l in i=e.defaultProps)void 0===a[l]&&(a[l]=i[l]);return{$$typeof:r,type:e,key:u,ref:o,props:a,_owner:E.current}}function P(e){return"object"==typeof e&&null!==e&&e.$$typeof===r}var N=/\/+/g;function z(e,n){var t,r;return"object"==typeof e&&null!==e&&null!=e.key?(t=""+e.key,r={"=":"=0",":":"=2"},"$"+t.replace(/[=:]/g,function(e){return r[e]})):n.toString(36)}function T(e,n,t){if(null==e)return e;var a=[],u=0;return!function e(n,t,a,u,o){var i,s,c,f=typeof n;("undefined"===f||"boolean"===f)&&(n=null);var d=!1;if(null===n)d=!0;else switch(f){case"string":case"number":d=!0;break;case"object":switch(n.$$typeof){case r:case l:d=!0}}if(d){;return o=o(d=n),n=""===u?"."+z(d,0):u,S(o)?(a="",null!=n&&(a=n.replace(N,"$&/")+"/"),e(o,t,a,"",function(e){return e})):null!=o&&(P(o)&&(i=o,s=a+(!o.key||d&&d.key===o.key?"":(""+o.key).replace(N,"$&/")+"/")+n,o={$$typeof:r,type:i.type,key:s,ref:i.ref,props:i.props,_owner:i._owner}),t.push(o)),1}if(d=0,u=""===u?".":u+":",S(n))for(var p=0;p<n.length;p++){f=n[p];var h=u+z(f,p);d+=e(f,t,a,h,o)}else{;if("function"==typeof(h=null===(c=n)||"object"!=typeof c?null:"function"==typeof(c=m&&c[m]||c["@@iterator"])?c:null))for(n=h.call(n),p=0;!(f=n.next()).done;)h=u+z(f=f.value,p++),d+=e(f,t,a,h,o);else if("object"===f)throw Error("Objects are not valid as a React child (found: "+("[object Object]"===(t=String(n))?"object with keys {"+Object.keys(n).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.")}return d}(e,a,"","",function(e){return n.call(t,e,u++)}),a}function L(e){if(-1===e._status){var n=e._result;(n=n()).then(function(n){(0===e._status||-1===e._status)&&(e._status=1,e._result=n)},function(n){(0===e._status||-1===e._status)&&(e._status=2,e._result=n)}),-1===e._status&&(e._status=0,e._result=n)}if(1===e._status)return e._result.default;throw e._result}var R={current:null},O={transition:null};n.Children={map:T,forEach:function(e,n,t){T(e,function(){n.apply(this,arguments)},t)},count:function(e){var n=0;return T(e,function(){n++}),n},toArray:function(e){return T(e,function(e){return e})||[]},only:function(e){if(!P(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},n.Component=y,n.Fragment=a,n.Profiler=o,n.PureComponent=k,n.StrictMode=u,n.Suspense=f,n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED={ReactCurrentDispatcher:R,ReactCurrentBatchConfig:O,ReactCurrentOwner:E},n.cloneElement=function(e,n,t){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var l=g({},e.props),a=e.key,u=e.ref,o=e._owner;if(null!=n){if(void 0!==n.ref&&(u=n.ref,o=E.current),void 0!==n.key&&(a=""+n.key),e.type&&e.type.defaultProps)var i=e.type.defaultProps;for(s in n)x.call(n,s)&&!_.hasOwnProperty(s)&&(l[s]=void 0===n[s]&&void 0!==i?i[s]:n[s])}var s=arguments.length-2;if(1===s)l.children=t;else if(1<s){i=Array(s);for(var c=0;c<s;c++)i[c]=arguments[c+2];l.children=i}return{$$typeof:r,type:e.type,key:a,ref:u,props:l,_owner:o}},n.createContext=function(e){return(e={$$typeof:s,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:i,_context:e},e.Consumer=e},n.createElement=C,n.createFactory=function(e){var n=C.bind(null,e);return n.type=e,n},n.createRef=function(){return{current:null}},n.forwardRef=function(e){return{$$typeof:c,render:e}},n.isValidElement=P,n.lazy=function(e){return{$$typeof:p,_payload:{_status:-1,_result:e},_init:L}},n.memo=function(e,n){return{$$typeof:d,type:e,compare:void 0===n?null:n}},n.startTransition=function(e){var n=O.transition;O.transition={};try{e()}finally{O.transition=n}},n.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")},n.useCallback=function(e,n){return R.current.useCallback(e,n)},n.useContext=function(e){return R.current.useContext(e)},n.useDebugValue=function(){},n.useDeferredValue=function(e){return R.current.useDeferredValue(e)},n.useEffect=function(e,n){return R.current.useEffect(e,n)},n.useId=function(){return R.current.useId()},n.useImperativeHandle=function(e,n,t){return R.current.useImperativeHandle(e,n,t)},n.useInsertionEffect=function(e,n){return R.current.useInsertionEffect(e,n)},n.useLayoutEffect=function(e,n){return R.current.useLayoutEffect(e,n)},n.useMemo=function(e,n){return R.current.useMemo(e,n)},n.useReducer=function(e,n,t){return R.current.useReducer(e,n,t)},n.useRef=function(e){return R.current.useRef(e)},n.useState=function(e){return R.current.useState(e)},n.useSyncExternalStore=function(e,n,t){return R.current.useSyncExternalStore(e,n,t)},n.useTransition=function(){return R.current.useTransition()},n.version="18.2.0"},950:function(e,n,t){"use strict";e.exports=t("478")},51:function(e,n,t){"use strict";e.exports=t("488")},979:function(e,n,t){"use strict";function r(e,n){var t=e.length;e.push(n);e:for(;0<t;){var r=t-1>>>1,l=e[r];if(0<u(l,n))e[r]=n,e[t]=l,t=r;else break e}}function l(e){return 0===e.length?null:e[0]}function a(e){if(0===e.length)return null;var n=e[0],t=e.pop();if(t!==n){e[0]=t;e:for(var r=0,l=e.length,a=l>>>1;r<a;){var o=2*(r+1)-1,i=e[o],s=o+1,c=e[s];if(0>u(i,t))s<l&&0>u(c,i)?(e[r]=c,e[s]=t,r=s):(e[r]=i,e[o]=t,r=o);else if(s<l&&0>u(c,t))e[r]=c,e[s]=t,r=s;else break e}}return n}function u(e,n){var t=e.sortIndex-n.sortIndex;return 0!==t?t:e.id-n.id}if("object"==typeof performance&&"function"==typeof performance.now){var o,i=performance;n.unstable_now=function(){return i.now()}}else{var s=Date,c=s.now();n.unstable_now=function(){return s.now()-c}}var f=[],d=[],p=1,m=null,h=3,g=!1,v=!1,y=!1,b="function"==typeof setTimeout?setTimeout:null,k="function"==typeof clearTimeout?clearTimeout:null,w="undefined"!=typeof setImmediate?setImmediate:null;function S(e){for(var n=l(d);null!==n;){if(null===n.callback)a(d);else if(n.startTime<=e)a(d),n.sortIndex=n.expirationTime,r(f,n);else break;n=l(d)}}function x(e){if(y=!1,S(e),!v){if(null!==l(f))v=!0,M(E);else{var n=l(d);null!==n&&F(x,n.startTime-e)}}}function E(e,t){v=!1,y&&(y=!1,k(P),P=-1),g=!0;var r=h;try{for(S(t),m=l(f);null!==m&&(!(m.expirationTime>t)||e&&!T());){var u=m.callback;if("function"==typeof u){m.callback=null,h=m.priorityLevel;var o=u(m.expirationTime<=t);t=n.unstable_now(),"function"==typeof o?m.callback=o:m===l(f)&&a(f),S(t)}else a(f);m=l(f)}if(null!==m)var i=!0;else{var s=l(d);null!==s&&F(x,s.startTime-t),i=!1}return i}finally{m=null,h=r,g=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var _=!1,C=null,P=-1,N=5,z=-1;function T(){return!(n.unstable_now()-z<N)}function L(){if(null!==C){var e=n.unstable_now();z=e;var t=!0;try{t=C(!0,e)}finally{t?o():(_=!1,C=null)}}else _=!1}if("function"==typeof w)o=function(){w(L)};else if("undefined"!=typeof MessageChannel){var R=new MessageChannel,O=R.port2;R.port1.onmessage=L,o=function(){O.postMessage(null)}}else o=function(){b(L,0)};function M(e){C=e,_||(_=!0,o())}function F(e,t){P=b(function(){e(n.unstable_now())},t)}n.unstable_IdlePriority=5,n.unstable_ImmediatePriority=1,n.unstable_LowPriority=4,n.unstable_NormalPriority=3,n.unstable_Profiling=null,n.unstable_UserBlockingPriority=2,n.unstable_cancelCallback=function(e){e.callback=null},n.unstable_continueExecution=function(){v||g||(v=!0,M(E))},n.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):N=0<e?Math.floor(1e3/e):5},n.unstable_getCurrentPriorityLevel=function(){return h},n.unstable_getFirstCallbackNode=function(){return l(f)},n.unstable_next=function(e){switch(h){case 1:case 2:case 3:var n=3;break;default:n=h}var t=h;h=n;try{return e()}finally{h=t}},n.unstable_pauseExecution=function(){},n.unstable_requestPaint=function(){},n.unstable_runWithPriority=function(e,n){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var t=h;h=e;try{return n()}finally{h=t}},n.unstable_scheduleCallback=function(e,t,a){var u=n.unstable_now();switch(a="object"==typeof a&&null!==a?"number"==typeof(a=a.delay)&&0<a?u+a:u:u,e){case 1:var o=-1;break;case 2:o=250;break;case 5:o=1073741823;break;case 4:o=1e4;break;default:o=5e3}return o=a+o,e={id:p++,callback:t,priorityLevel:e,startTime:a,expirationTime:o,sortIndex:-1},a>u?(e.sortIndex=a,r(d,e),null===l(f)&&e===l(d)&&(y?(k(P),P=-1):y=!0,F(x,a-u))):(e.sortIndex=o,r(f,e),v||g||(v=!0,M(E))),e},n.unstable_shouldYield=T,n.unstable_wrapCallback=function(e){var n=h;return function(){var t=h;h=n;try{return e.apply(this,arguments)}finally{h=t}}}},364:function(e,n,t){"use strict";e.exports=t("979")},286:function(e,n,t){},996:function(e,n,t){},147:function(e,n,t){},674:function(e,n,t){},173:function(e,n,t){},341:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return l}});var r=t("51"),l=function(){return(0,r.jsx)("div",{children:"Hello Plugin!"})}},625:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=t("51"),l=t("514"),a=t.ir(t("341"));t("147"),document.addEventListener("DOMContentLoaded",function(){let e=document.getElementById("__plugin"),n=(0,l.createRoot)(e);n.render((0,r.jsx)(a.default,{}))})}},n={};function t(r){var l=n[r];if(void 0!==l)return l.exports;var a=n[r]={exports:{}};return e[r](a,a.exports,t),a.exports}!function(){function e(n){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(e=function(e){return e?r:t})(n)}t.ir=function(n,t){if(!t&&n&&n.__esModule)return n;if(null===n||"object"!=typeof n&&"function"!=typeof n)return{default:n};var r=e(t);if(r&&r.has(n))return r.get(n);var l={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in n)if("default"!==u&&Object.prototype.hasOwnProperty.call(n,u)){var o=a?Object.getOwnPropertyDescriptor(n,u):null;o&&(o.get||o.set)?Object.defineProperty(l,u,o):l[u]=n[u]}return l.default=n,r&&r.set(n,l),l}}(),t("625")}();
    </script>
    
  <script defer src="ui.js"></script><link href="ui.css" rel="stylesheet"></head>
  <body>
    <div id="__plugin"></div>
  </body>
</html>
    at HTMLParser.parse (/Users/ivicabatinic/Documents/projects/DEV_PLAYGROUND/figma-plugin-starter/node_modules/.pnpm/[email protected]/node_modules/html-minifier-terser/dist/htmlminifier.cjs:250:15)
    at minifyHTML (/Users/ivicabatinic/Documents/projects/DEV_PLAYGROUND/figma-plugin-starter/node_modules/.pnpm/[email protected]/node_modules/html-minifier-terser/dist/htmlminifier.cjs:1769:3)
    at Object.minify (/Users/ivicabatinic/Documents/projects/DEV_PLAYGROUND/figma-plugin-starter/node_modules/.pnpm/[email protected]/node_modules/html-minifier-terser/dist/htmlminifier.cjs:1854:18)

9 replies

isBatak May 16, 2023
Author

It's something that gets bundled with react-dom/client createRoot function.
If I comment out these two lines it will build the output.

// src/app/index.tsx

import { createRoot } from 'react-dom/client';
import App from './components/App';

import '@/panda/styles.css';

document.addEventListener('DOMContentLoaded', function () {
  const container = document.getElementById('__plugin') as HTMLElement;
  // TODO: figure this out
  // const root = createRoot(container);
  // root.render(<App />);
});

but still there are ui.css and ui.js files in the dist folder

and this inside bundled html:

<script defer="defer" src="ui.js"></script>
<link href="ui.css" rel="stylesheet" />

How can I exclude them form the output?

hardfist May 16, 2023
Maintainer

use inject:false to remove from html and use compilation.deleteAsset to remove from dist

plugins: [
    new HtmlPlugin({
      template: './src/app/index.ejs',
      filename: 'ui.html',
      chunks: ['ui'],
      cache: false,
      inject: false, // remove from html
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
      templateParameters: (compilation) => {
        const res = {
          inlineCss: compilation.assets['ui.css'].source(),
          inlineJS: compilation.assets['ui.js'].source(),
        }; // remove from the dist
        compilation.deleteAsset('ui.css');
        compilation.deleteAsset('ui.js');
        return res;
      },
    }),
  ],

isBatak May 17, 2023
Author

It works! Thx!

xfsnowind Aug 2, 2023

Hi, @isBatak why do you comment these two lines, if you do that, there would be no entry attached to the page, it would be empty.

I tried your repo and uncomment it, it comes the build error.

xfsnowind Aug 3, 2023

@hardfist but the content being written into html is the stringfied javascript script which would be injected between the <script> in the html file. If we escape this js content, it would be able to be run as script.

Hi, thx for the quick reply and the solution. I tried this solution but I still have some problems. Here is the minimal reproduction repo isBatak/figma-plugin-starter
When I start the dev server I get this error:

Error: Parse Error: <t9.length;i++)rt(t9[i],e);i=r;break;case"source":rt("error",e),i=r;break;case"img":case"image":case"link":rt("error",e),rt("load",e),i=r;break;case"details":rt("toggle",e),i=r;break;case"input":J(e,r),i=Z(e,r),rt("invalid",e);break;case"option":default:i=r;break;case"select":e._wrapperState={wasMultiple:!!r.multiple},i=B({},r,{value:void 0}),rt("invalid",e);break;case"textarea":eo(e,r),i=eu(e,r),rt("invalid",e)}for(s in ew(t,i),d=i)if(d.hasOwnProperty(s)){var m=d[s];"style"===s?eb(e,m):"dangerouslySetInnerHTML"===s?null!=(m=m?m.__html:void 0)&&em(e,m):"children"===s?"string"==typeof m?("textarea"!==t||""!==m)&&eh(e,m):"number"==typeof m&&eh(e,""+m):"suppressContentEditableWarning"!==s&&"suppressHydrationWarning"!==s&&"autoFocus"!==s&&(p.hasOwnProperty(s)?null!=m&&"onScroll"===s&&rt("scroll",e):null!=m&&_(e,s,m,c))}switch(t){case"input":Y(e),et(e,r,!1);break;case"textarea":Y(e),es(e);break;case"option":null!=r.value&&e.setAttribute("value",""+q(r.value));break;case"select":e.multiple=!!r.multiple,null!=(s=r.value)?ea(e,!!r.multiple,s,!1):null!=r.defaultValue&&ea(e,!!r.multiple,r.defaultValue,!0);break;default:"function"==typeof i.onClick&&(e.onclick=rg)}switch(t){case"button":case"input":case"select":case"textarea":r=!!r.autoFocus;break e;case"img":r=!0;break e;default:r=!1}}r&&(n.flags|=4)}null!==n.ref&&(n.flags|=512,n.flags|=2097152)}return uz(n),null;case 6:if(e&&null!=n.stateNode)o(e,n,e.memoizedProps,r);else{if("string"!=typeof r&&null===n.stateNode)throw Error(f(166));if(t=l7(l9.current),l7(l6.current),ly(n)){if(r=n.stateNode,t=n.memoizedProps,r[rz]=n,(s=r.nodeValue!==t)&&null!==(e=ls))switch(e.tag){case 3:rh(r.nodeValue,t,0!=(1&e.mode));break;case 5:!0!==e.memoizedProps.suppressHydrationWarning&&rh(r.nodeValue,t,0!=(1&e.mode))}s&&(n.flags|=4)}else(r=(9===t.nodeType?t:t.ownerDocument).createTextNode(r))[rz]=n,n.stateNode=r}return uz(n),null;case 13:if(rA(al),r=n.memoizedState,null===e||null!==e.memoizedState&&null!==e.memoizedState.dehydrated){if(lf&&null!==lc&&0!=(1&n.mode)&&0==(128&n.flags))lb(),lk(),n.flags|=98560,s=!1;else if(s=ly(n),null!==r&&null!==r.dehydrated){if(null===e){if(!s)throw Error(f(318));if(!(s=null!==(s=n.memoizedState)?s.dehydrated:null))throw Error(f(317));s[rz]=n}else lk(),0==(128&n.flags)&&(n.memoizedState=null),n.flags|=4;uz(n),s=!1}else null!==ld&&(o_(ld),ld=null),s=!0;if(!s)return 65536&n.flags?n:null}if(0!=(128&n.flags))return n.lanes=t,n;return(r=null!==r)!=(null!==e&&null!==e.memoizedState)&&r&&(n.child.flags|=8192,0!=(1&n.mode)&&(null===e||0!=(1&al.current)?0===u7&&(u7=3):oM())),null!==n.updateQueue&&(n.flags|=4),uz(n),null;case 4:return an(),a(e,n),null===e&&ra(n.stateNode.containerInfo),uz(n),null;case 10:return lz(n.type._context),uz(n),null;case 19:if(rA(al),null===(s=n.memoizedState))return uz(n),null;if(r=0!=(128&n.flags),null===(c=s.rendering)){if(r)uN(s,!1);else{if(0!==u7||null!==e&&0!=(128&e.flags))for(e=n.child;null!==e;){if(null!==(c=aa(e))){for(n.flags|=128,uN(s,!1),null!==(r=c.updateQueue)&&(n.updateQueue=r,n.flags|=4),n.subtreeFlags=0,r=t,t=n.child;null!==t;)s=t,e=r,s.flags&=14680066,null===(c=s.alternate)?(s.childLanes=0,s.lanes=e,s.child=null,s.subtreeFlags=0,s.memoizedProps=null,s.memoizedState=null,s.updateQueue=null,s.dependencies=null,s.stateNode=null):(s.childLanes=c.childLanes,s.lanes=c.lanes,s.child=c.child,s.subtreeFlags=0,s.deletions=null,s.memoizedProps=c.memoizedProps,s.memoizedState=c.memoizedState,s.updateQueue=c.updateQueue,s.type=c.type,e=c.dependencies,s.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),t=t.sibling;return rB(al,1&al.current|2),n.child}e=e.sibling}null!==s.tail&&eJ()>oo&&(n.flags|=128,r=!0,uN(s,!1),n.lanes=4194304)}}else{if(!r){if(null!==(e=aa(c))){if(n.flags|=128,r=!0,null!==(t=e.updateQueue)&&(n.updateQueue=t,n.flags|=4),uN(s,!0),null===s.tail&&"hidden"===s.tailMode&&!c.alternate&&!lf)return uz(n),null}else 2*eJ()-s.renderingStartTime>oo&&1073741824!==t&&(n.flags|=128,r=!0,uN(s,!1),n.lanes=4194304)}s.isBackwards?(c.sibling=n.child,n.child=c):(null!==(t=s.last)?t.sibling=c:n.child=c,s.last=c)}if(null!==s.tail)return n=s.tail,s.rendering=n,s.tail=n.sibling,s.renderingStartTime=eJ(),n.sibling=null,t=al.current,rB(al,r?1&t|2:1&t),n;return uz(n),null;case 22:case 23:return oT(),r=null!==n.memoizedState,null!==e&&null!==e.memoizedState!==r&&(n.flags|=8192),r&&0!=(1&n.mode)?0!=(1073741824&u5)&&(uz(n),6&n.subtreeFlags&&(n.flags|=8192)):uz(n),null;case 24:case 25:return null}throw Error(f(156,n.tag))}(t,n,u5))){u8=t;return}}else{if(null!==(t=function(e,n){switch(li(n),n.tag){case 1:return rY(n.type)&&rX(),65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 3:return an(),rA(rQ),rA(rW),ao(),0!=(65536&(e=n.flags))&&0==(128&e)?(n.flags=-65537&e|128,n):null;case 5:return ar(n),null;case 13:if(rA(al),null!==(e=n.memoizedState)&&null!==e.dehydrated){if(null===n.alternate)throw Error(f(340));lk()}return 65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 19:return rA(al),null;case 4:return an(),null;case 10:return lz(n.type._context),null;case 22:case 23:return oT(),null;default:return null}}(t,n))){t.flags&=32767,u8=t;return}if(null!==e)e.flags|=32768,e.subtreeFlags=0,e.deletions=null;else{u7=6,u8=null;return}}if(null!==(n=n.sibling)){u8=n;return}u8=n=e}while(null!==n);0===u7&&(u7=5)}function oU(e,n,t){var r=nc,l=u2.transition;try{u2.transition=null,nc=1,function(e,n,t,r){do oj();while(null!==op);if(0!=(6&u3))throw Error(f(327));t=e.finishedWork;var l=e.finishedLanes;if(null===t)return;if(e.finishedWork=null,e.finishedLanes=0,t===e.current)throw Error(f(177));e.callbackNode=null,e.callbackPriority=0;var a=t.lanes|t.childLanes;if(!function(e,n){var t=e.pendingLanes&~n;e.pendingLanes=n,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=n,e.mutableReadLanes&=n,e.entangledLanes&=n,n=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0<t;){var l=31-e9(t),a=1<<l;n[l]=0,r[l]=-1,e[l]=-1,t&=~a}}(e,a),e===u4&&(u8=u4=null,u6=0),0==(2064&t.subtreeFlags)&&0==(2064&t.flags)||od||(od=!0,function(e,n){eY(e,n)}(e3,function(){return oj(),null})),a=0!=(15990&t.flags),0!=(15990&t.subtreeFlags)||a){a=u2.transition,u2.transition=null;var u,o,i,s=nc;nc=1;var c=u3;u3|=4,u1.current=null,!function(e,n){if(rv=nF,t$(e=tV())){if("selectionStart"in e)var t={start:e.selectionStart,end:e.selectionEnd};else e:{var r=(t=(t=e.ownerDocument)&&t.defaultView||window).getSelection&&t.getSelection();if(r&&0!==r.rangeCount){t=r.anchorNode;var l,a=r.anchorOffset,u=r.focusNode;r=r.focusOffset;try{t.nodeType,u.nodeType}catch(e){t=null;break e}var o=0,i=-1,s=-1,c=0,d=0,p=e,m=null;n:for(;;){for(;p!==t||0!==a&&3!==p.nodeType||(i=o+a),p!==u||0!==r&&3!==p.nodeType||(s=o+r),3===p.nodeType&&(o+=p.nodeValue.length),null!==(l=p.firstChild);){;m=p,p=l}for(;;){if(p===e)break n;if(m===t&&++c===a&&(i=o),m===u&&++d===r&&(s=o),null!==(l=p.nextSibling))break;m=(p=m).parentNode}p=l}t=-1===i||-1===s?null:{start:i,end:s}}else t=null}t=t||{start:0,end:0}}else t=null;for(ry={focusedElem:e,selectionRange:t},nF=!1,uO=n;null!==uO;)if(e=(n=uO).child,0!=(1028&n.subtreeFlags)&&null!==e)e.return=n,uO=e;else for(;null!==uO;){n=uO;try{var h=n.alternate;if(0!=(1024&n.flags))switch(n.tag){case 0:case 11:case 15:case 5:case 6:case 4:case 17:break;case 1:if(null!==h){var g=h.memoizedProps,v=h.memoizedState,y=n.stateNode,b=y.getSnapshotBeforeUpdate(n.elementType===n.type?g:lx(n.type,g),v);y.__reactInternalSnapshotBeforeUpdate=b}break;case 3:var k=n.stateNode.containerInfo;1===k.nodeType?k.textContent="":9===k.nodeType&&k.documentElement&&k.removeChild(k.documentElement);break;default:throw Error(f(163))}}catch(e){o$(n,n.return,e)}if(null!==(e=n.sibling)){e.return=n.return,uO=e;break}uO=n.return}h=uD,uD=!1}(e,t),uK(t,e),!function(e){var n=tV(),t=e.focusedElem,r=e.selectionRange;if(n!==t&&t&&t.ownerDocument&&function e(n,t){return!!n&&!!t&&(n===t||(!n||3!==n.nodeType)&&(t&&3===t.nodeType?e(n,t.parentNode):"contains"in n?n.contains(t):!!n.compareDocumentPosition&&!!(16&n.compareDocumentPosition(t))))}(t.ownerDocument.documentElement,t)){if(null!==r&&t$(t)){if(n=r.start,void 0===(e=r.end)&&(e=n),"selectionStart"in t)t.selectionStart=n,t.selectionEnd=Math.min(e,t.value.length);else if((e=(n=t.ownerDocument||document)&&n.defaultView||window).getSelection){e=e.getSelection();var l=t.textContent.length,a=Math.min(r.start,l);r=void 0===r.end?a:Math.min(r.end,l),!e.extend&&a>r&&(l=r,r=a,a=l),l=tj(t,a);var u=tj(t,r);l&&u&&(1!==e.rangeCount||e.anchorNode!==l.node||e.anchorOffset!==l.offset||e.focusNode!==u.node||e.focusOffset!==u.offset)&&((n=n.createRange()).setStart(l.node,l.offset),e.removeAllRanges(),a>r?(e.addRange(n),e.extend(u.node,u.offset)):(n.setEnd(u.node,u.offset),e.addRange(n)))}}for(n=[],e=t;e=e.parentNode;)1===e.nodeType&&n.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof t.focus&&t.focus(),t=0;t<n.length;t++)(e=n[t]).element.scrollLeft=e.left,e.element.scrollTop=e.top}}(ry),nF=!!rv,ry=rv=null,e.current=t,u=t,o=e,i=l,uO=u,function e(n,t,r){for(var l=0!=(1&n.mode);null!==uO;){var a=uO,u=a.child;if(22===a.tag&&l){var o=null!==a.memoizedState||uT;if(!o){var i=a.alternate,s=null!==i&&null!==i.memoizedState||uL;i=uT;var c=uL;if(uT=o,(uL=s)&&!c)for(uO=a;null!==uO;)s=(o=uO).child,22===o.tag&&null!==o.memoizedState?uZ(a):null!==s?(s.return=o,uO=s):uZ(a);for(;null!==u;)uO=u,e(u,t,r),u=u.sibling;uO=a,uT=i,uL=c}uX(n,t,r)}else 0!=(8772&a.subtreeFlags)&&null!==u?(u.return=a,uO=u):uX(n,t,r)}}(u,o,i),eZ(),u3=c,nc=s,u2.transition=a}else e.current=t;if(od&&(od=!1,op=e,om=l),0===(a=e.pendingLanes)&&(of=null),!function(e){if(e5&&"function"==typeof e5.onCommitFiberRoot)try{e5.onCommitFiberRoot(e6,e,void 0,128==(128&e.current.flags))}catch(e){}}(t.stateNode,r),oS(e,eJ()),null!==n)for(r=e.onRecoverableError,t=0;t<n.length;t++)r((l=n[t]).value,{componentStack:l.stack,digest:l.digest});if(os)throw os=!1,e=oc,oc=null,e;0!=(1&om)&&0!==e.tag&&oj(),0!=(1&(a=e.pendingLanes))?e===og?oh++:(oh=0,og=e):oh=0,r8()}(e,n,t,r)}finally{u2.transition=l,nc=r}return null}function oj(){if(null!==op){var e=nf(om),n=u2.transition,t=nc;try{if(u2.transition=null,nc=16>e?16:e,null===op)var r=!1;else{if(e=op,op=null,om=0,0!=(6&u3))throw Error(f(331));var l=u3;for(u3|=4,uO=e.current;null!==uO;){var a=uO,u=a.child;if(0!=(16&uO.flags)){var o=a.deletions;if(null!==o){for(var i=0;i<o.length;i++){var s=o[i];for(uO=s;null!==uO;){var c=uO;switch(c.tag){case 0:case 11:case 15:uI(8,c,a)}var d=c.child;if(null!==d)d.return=c,uO=d;else for(;null!==uO;){var p=(c=uO).sibling,m=c.return;if(!function e(n){var t=n.alternate;null!==t&&(n.alternate=null,e(t)),n.child=null,n.deletions=null,n.sibling=null,5===n.tag&&null!==(t=n.stateNode)&&(delete t[rz],delete t[rT],delete t[rR],delete t[rO],delete t[rM]),n.stateNode=null,n.return=null,n.dependencies=null,n.memoizedProps=null,n.memoizedState=null,n.pendingProps=null,n.stateNode=null,n.updateQueue=null}(c),c===s){uO=null;break}if(null!==p){p.return=m,uO=p;break}uO=m}}}var h=a.alternate;if(null!==h){var g=h.child;if(null!==g){h.child=null;do{var v=g.sibling;g.sibling=null,g=v}while(null!==g)}}uO=a}}if(0!=(2064&a.subtreeFlags)&&null!==u)u.return=a,uO=u;else n:for(;null!==uO;){if(a=uO,0!=(2048&a.flags))switch(a.tag){case 0:case 11:case 15:uI(9,a,a.return)}var y=a.sibling;if(null!==y){y.return=a.return,uO=y;break n}uO=a.return}}var b=e.current;for(uO=b;null!==uO;){var k=(u=uO).child;if(0!=(2064&u.subtreeFlags)&&null!==k)k.return=u,uO=k;else n:for(u=b;null!==uO;){if(o=uO,0!=(2048&o.flags))try{switch(o.tag){case 0:case 11:case 15:uU(9,o)}}catch(e){o$(o,o.return,e)}if(o===u){uO=null;break n}var w=o.sibling;if(null!==w){w.return=o.return,uO=w;break n}uO=o.return}}if(u3=l,r8(),e5&&"function"==typeof e5.onPostCommitFiberRoot)try{e5.onPostCommitFiberRoot(e6,e)}catch(e){}r=!0}return r}finally{nc=t,u2.transition=n}}return!1}function oV(e,n,t){n=a6(t,n),n=ue(e,n,1),e=l$(e,n,1),n=ob(),null!==e&&(ni(e,1,n),oS(e,n))}function o$(e,n,t){if(3===e.tag)oV(e,e,t);else for(;null!==n;){if(3===n.tag){oV(n,e,t);break}if(1===n.tag){var r=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===of||!of.has(r))){e=a6(t,e),e=un(n,e,1),n=l$(n,e,1),e=ob(),null!==n&&(ni(n,1,e),oS(n,e));break}}n=n.return}}function oA(e,n,t){var r=e.pingCache;null!==r&&r.delete(n),n=ob(),e.pingedLanes|=e.suspendedLanes&t,u4===e&&(u6&t)===t&&(4===u7||3===u7&&(130023424&u6)===u6&&500>eJ()-ou?oL(e,0):or|=t),oS(e,n)}function oB(e,n){0===n&&(0==(1&e.mode)?n=1:(n=nt,0==(130023424&(nt<<=1))&&(nt=4194304)));var t=ob();null!==(e=lD(e,n))&&(ni(e,n,t),oS(e,t))}function oH(e){var n=e.memoizedState,t=0;null!==n&&(t=n.retryLane),oB(e,t)}function oW(e,n){var t=0;switch(e.tag){case 13:var r=e.stateNode,l=e.memoizedState;null!==l&&(t=l.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(f(314))}null!==r&&r.delete(n),oB(e,t)}function oQ(e,n){return eY(e,n)}function oq(e,n,t,r){this.tag=e,this.key=t,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=n,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function oK(e,n,t,r){return new oq(e,n,t,r)}function oY(e){return!(!(e=e.prototype)||!e.isReactComponent)}i=function(e,n,t){if(null!==e){if(e.memoizedProps!==n.pendingProps||rQ.current)uu=!0;else{if(0==(e.lanes&t)&&0==(128&n.flags))return uu=!1,function(e,n,t){switch(n.tag){case 3:ug(n),lk();break;case 5:at(n);break;case 1:rY(n.type)&&rJ(n);break;case 4:ae(n,n.stateNode.containerInfo);break;case 10:var r=n.type._context,l=n.memoizedProps.value;rB(lE,r._currentValue),r._currentValue=l;break;case 13:if(null!==(r=n.memoizedState)){if(null!==r.dehydrated)return rB(al,1&al.current),n.flags|=128,null;if(0!=(t&n.child.childLanes))return uk(e,n,t);return rB(al,1&al.current),null!==(e=uP(e,n,t))?e.sibling:null}rB(al,1&al.current);break;case 19:if(r=0!=(t&n.childLanes),0!=(128&e.flags)){if(r)return u_(e,n,t);n.flags|=128}if(null!==(l=n.memoizedState)&&(l.rendering=null,l.tail=null,l.lastEffect=null),rB(al,al.current),!r)return null;break;case 22:case 23:return n.lanes=0,uf(e,n,t)}return uP(e,n,t)}(e,n,t);uu=0!=(131072&e.flags)}}else uu=!1,lf&&0!=(1048576&n.flags)&&lu(n,r7,n.index);switch(n.lanes=0,n.tag){case 2:var r=n.type;uC(e,n),e=n.pendingProps;var l=rK(n,rW.current);lL(n,t),l=ak(null,n,r,e,l,t);var a=aw();return n.flags|=1,"object"==typeof l&&null!==l&&"function"==typeof l.render&&void 0===l.$$typeof?(n.tag=1,n.memoizedState=null,n.updateQueue=null,rY(r)?(a=!0,rJ(n)):a=!1,n.memoizedState=null!==l.state&&void 0!==l.state?l.state:null,lU(n),l.updater=lK,n.stateNode=l,l._reactInternals=n,lZ(n,r,e,t),n=uh(null,n,r,!0,a,t)):(n.tag=0,lf&&a&&lo(n),uo(null,n,l,t),n=n.child),n;case 16:r=n.elementType;e:{switch(uC(e,n),e=n.pendingProps,r=(l=r._init)(r._payload),n.type=r,l=n.tag=function(e){if("function"==typeof e)return oY(e)?1:0;if(null!=e){if((e=e.$$typeof)===M)return 11;if(e===I)return 14}return 2}(r),e=lx(r,e),l){case 0:n=up(null,n,r,e,t);break e;case 1:n=um(null,n,r,e,t);break e;case 11:n=ui(null,n,r,e,t);break e;case 14:n=us(null,n,r,lx(r.type,e),t);break e}throw Error(f(306,r,""))}return n;case 0:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:lx(r,l),up(e,n,r,l,t);case 1:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:lx(r,l),um(e,n,r,l,t);case 3:e:{if(ug(n),null===e)throw Error(f(387));r=n.pendingProps,l=(a=n.memoizedState).element,lj(e,n),lH(n,r,null,t);var u=n.memoizedState;if(r=u.element,a.isDehydrated){if(a={element:r,isDehydrated:!1,cache:u.cache,pendingSuspenseBoundaries:u.pendingSuspenseBoundaries,transitions:u.transitions},n.updateQueue.baseState=a,n.memoizedState=a,256&n.flags){l=a6(Error(f(423)),n),n=uv(e,n,r,t,l);break e}if(r!==l){l=a6(Error(f(424)),n),n=uv(e,n,r,t,l);break e}else for(lc=rC(n.stateNode.containerInfo.firstChild),ls=n,lf=!0,ld=null,t=l4(n,null,r,t),n.child=t;t;)t.flags=-3&t.flags|4096,t=t.sibling}else{if(lk(),r===l){n=uP(e,n,t);break e}uo(e,n,r,t)}n=n.child}return n;case 5:return at(n),null===e&&lg(n),r=n.type,l=n.pendingProps,a=null!==e?e.memoizedProps:null,u=l.children,rb(r,l)?u=null:null!==a&&rb(r,a)&&(n.flags|=32),ud(e,n),uo(e,n,u,t),n.child;case 6:return null===e&&lg(n),null;case 13:return uk(e,n,t);case 4:return ae(n,n.stateNode.containerInfo),r=n.pendingProps,null===e?n.child=l3(n,null,r,t):uo(e,n,r,t),n.child;case 11:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:lx(r,l),ui(e,n,r,l,t);case 7:return uo(e,n,n.pendingProps,t),n.child;case 8:case 12:return uo(e,n,n.pendingProps.children,t),n.child;case 10:e:{if(r=n.type._context,l=n.pendingProps,a=n.memoizedProps,u=l.value,rB(lE,r._currentValue),r._currentValue=u,null!==a){if(tD(a.value,u)){if(a.children===l.children&&!rQ.current){n=uP(e,n,t);break e}}else for(null!==(a=n.child)&&(a.return=n);null!==a;){var o=a.dependencies;if(null!==o){u=a.child;for(var i=o.firstContext;null!==i;){if(i.context===r){if(1===a.tag){(i=lV(-1,t&-t)).tag=2;var s=a.updateQueue;if(null!==s){var c=(s=s.shared).pending;null===c?i.next=i:(i.next=c.next,c.next=i),s.pending=i}}a.lanes|=t,null!==(i=a.alternate)&&(i.lanes|=t),lT(a.return,t,n),o.lanes|=t;break}i=i.next}}else if(10===a.tag)u=a.type===n.type?null:a.child;else if(18===a.tag){if(null===(u=a.return))throw Error(f(341));u.lanes|=t,null!==(o=u.alternate)&&(o.lanes|=t),lT(u,t,n),u=a.sibling}else u=a.child;if(null!==u)u.return=a;else for(u=a;null!==u;){if(u===n){u=null;break}if(null!==(a=u.sibling)){a.return=u.return,u=a;break}u=u.return}a=u}}uo(e,n,l.children,t),n=n.child}return n;case 9:return l=n.type,r=n.pendingProps.children,lL(n,t),l=lR(l),r=r(l),n.flags|=1,uo(e,n,r,t),n.child;case 14:return l=lx(r=n.type,n.pendingProps),l=lx(r.type,l),us(e,n,r,l,t);case 15:return uc(e,n,n.type,n.pendingProps,t);case 17:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:lx(r,l),uC(e,n),n.tag=1,rY(r)?(e=!0,rJ(n)):e=!1,lL(n,t),lX(n,r,l),lZ(n,r,l,t),uh(null,n,r,!0,e,t);case 19:return u_(e,n,t);case 22:return uf(e,n,t)}throw Error(f(156,n.tag))};function oX(e,n){var t=e.alternate;return null===t?((t=oK(e.tag,n,e.key,e.mode)).elementType=e.elementType,t.type=e.type,t.stateNode=e.stateNode,t.alternate=e,e.alternate=t):(t.pendingProps=n,t.type=e.type,t.flags=0,t.subtreeFlags=0,t.deletions=null),t.flags=14680064&e.flags,t.childLanes=e.childLanes,t.lanes=e.lanes,t.child=e.child,t.memoizedProps=e.memoizedProps,t.memoizedState=e.memoizedState,t.updateQueue=e.updateQueue,n=e.dependencies,t.dependencies=null===n?null:{lanes:n.lanes,firstContext:n.firstContext},t.sibling=e.sibling,t.index=e.index,t.ref=e.ref,t}function oG(e,n,t,r,l,a){var u=2;if(r=e,"function"==typeof e)oY(e)&&(u=1);else if("string"==typeof e)u=5;else e:switch(e){case z:return oZ(t.children,l,a,n);case T:u=8,l|=8;break;case L:return(e=oK(12,t,n,2|l)).elementType=L,e.lanes=a,e;case F:return(e=oK(13,t,n,l)).elementType=F,e.lanes=a,e;case D:return(e=oK(19,t,n,l)).elementType=D,e.lanes=a,e;case j:return oJ(t,l,a,n);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case R:u=10;break e;case O:u=9;break e;case M:u=11;break e;case I:u=14;break e;case U:u=16,r=null;break e}throw Error(f(130,null==e?e:typeof e,""))}return(n=oK(u,t,n,l)).elementType=e,n.type=r,n.lanes=a,n}function oZ(e,n,t,r){return(e=oK(7,e,r,n)).lanes=t,e}function oJ(e,n,t,r){return(e=oK(22,e,r,n)).elementType=j,e.lanes=t,e.stateNode={isHidden:!1},e}function o0(e,n,t){return(e=oK(6,e,null,n)).lanes=t,e}function o1(e,n,t){return(n=oK(4,null!==e.children?e.children:[],e.key,n)).lanes=t,n.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},n}function o2(e,n,t,r,l){this.tag=n,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=no(0),this.expirationTimes=no(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=no(0),this.identifierPrefix=r,this.onRecoverableError=l,this.mutableSourceEagerHydrationData=null}function o3(e,n,t,r,l,a,u,o,i){return e=new o2(e,n,t,o,i),1===n?(n=1,!0===a&&(n|=8)):n=0,a=oK(3,null,null,n),e.current=a,a.stateNode=e,a.memoizedState={element:r,isDehydrated:t,cache:null,transitions:null,pendingSuspenseBoundaries:null},lU(a),e}function o4(e){if(!e)return rH;e=e._reactInternals;e:{if(eW(e)!==e||1!==e.tag)throw Error(f(170));var n=e;do{switch(n.tag){case 3:n=n.stateNode.context;break e;case 1:if(rY(n.type)){n=n.stateNode.__reactInternalMemoizedMergedChildContext;break e}}n=n.return}while(null!==n);throw Error(f(171))}if(1===e.tag){var t=e.type;if(rY(t))return rZ(e,t,n)}return n}function o8(e,n,t,r,l,a,u,o,i){return(e=o3(t,r,!0,e,l,a,u,o,i)).context=o4(null),t=e.current,r=ob(),(a=lV(r,l=ok(t))).callback=null!=n?n:null,l$(t,a,l),e.current.lanes=l,ni(e,l,r),oS(e,r),e}function o6(e,n,t,r){var l=n.current,a=ob(),u=ok(l);return t=o4(t),null===n.context?n.context=t:n.pendingContext=t,(n=lV(a,u)).payload={element:e},null!==(r=void 0===r?null:r)&&(n.callback=r),null!==(e=l$(l,n,u))&&(ow(e,l,u,a),lA(e,l,u)),u}function o5(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function o9(e,n){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var t=e.retryLane;e.retryLane=0!==t&&t<n?t:n}}function o7(e,n){o9(e,n),(e=e.alternate)&&o9(e,n)}var ie="function"==typeof reportError?reportError:function(e){console.error(e)};function it(e){this._internalRoot=e}function ir(e){this._internalRoot=e}function il(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType)}function ia(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function iu(){}ir.prototype.render=it.prototype.render=function(e){var n=this._internalRoot;if(null===n)throw Error(f(409));o6(e,n,null,null)},ir.prototype.unmount=it.prototype.unmount=function(){var e=this._internalRoot;if(null!==e){this._internalRoot=null;var n=e.containerInfo;oz(function(){o6(null,e,null,null)}),n[rL]=null}},ir.prototype.unstable_scheduleHydration=function(e){if(e){var n=nh();e={blockedOn:null,target:e,priority:n};for(var t=0;t<nE.length&&0!==n&&n<nE[t].priority;t++);nE.splice(t,0,e),0===t&&nN(e)}};function io(e,n,t,r,l){var a=t._reactRootContainer;if(a){var u=a;if("function"==typeof l){var o=l;l=function(){var e=o5(u);o.call(e)}}o6(n,u,e,l)}else u=function(e,n,t,r,l){if(l){if("function"==typeof r){var a=r;r=function(){var e=o5(u);a.call(e)}}var u=o8(n,r,e,0,null,!1,!1,"",iu);return e._reactRootContainer=u,e[rL]=u.current,ra(8===e.nodeType?e.parentNode:e),oz(),u}for(;l=e.lastChild;)e.removeChild(l);if("function"==typeof r){var o=r;r=function(){var e=o5(i);o.call(e)}}var i=o3(e,0,!1,null,null,!1,!1,"",iu);return e._reactRootContainer=i,e[rL]=i.current,ra(8===e.nodeType?e.parentNode:e),oz(function(){o6(n,i,t,r)}),i}(t,n,e,l,r);return o5(u)}nd=function(e){switch(e.tag){case 3:var n=e.stateNode;if(n.current.memoizedState.isDehydrated){var t=nr(n.pendingLanes);0!==t&&(ns(n,1|t),oS(n,eJ()),0==(6&u3)&&(oo=eJ()+500,r8()))}break;case 13:oz(function(){var n=lD(e,1);null!==n&&ow(n,e,1,ob())}),o7(e,1)}},np=function(e){if(13===e.tag){var n=lD(e,134217728);null!==n&&ow(n,e,134217728,ob()),o7(e,134217728)}},nm=function(e){if(13===e.tag){var n=ok(e),t=lD(e,n);null!==t&&ow(t,e,n,ob()),o7(e,n)}},nh=function(){return nc},ng=function(e,n){var t=nc;try{return nc=e,n()}finally{nc=t}},e_=function(e,n,t){switch(n){case"input":if(en(e,t),n=t.name,"radio"===t.type&&null!=n){for(t=e;t.parentNode;)t=t.parentNode;for(t=t.querySelectorAll("input[name="+JSON.stringify(""+n)+'][type="radio"]'),n=0;n<t.length;n++){var r=t[n];if(r!==e&&r.form===e.form){var l=rU(r);if(!l)throw Error(f(90));X(r),en(r,l)}}}break;case"textarea":ei(e,t);break;case"select":null!=(n=t.value)&&ea(e,!!t.multiple,n,!1)}},eL=oN,eR=oz;var ii={findFiberByHostInstance:rF,bundleType:0,version:"18.2.0",rendererPackageName:"react-dom"},is={bundleType:ii.bundleType,version:ii.version,rendererPackageName:ii.rendererPackageName,rendererConfig:ii.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:C.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=eK(e))?null:e.stateNode},findFiberByHostInstance:ii.findFiberByHostInstance||function(){return null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null,reconcilerVersion:"18.2.0-next-9e3b772b8-20220608"};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var ic=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!ic.isDisabled&&ic.supportsFiber)try{e6=ic.inject(is),e5=ic}catch(e){}}n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED={usingClientEntryPoint:!1,Events:[rD,rI,rU,ez,eT,oN]},n.createPortal=function(e,n){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!il(n))throw Error(f(200));return function(e,n,t){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:N,key:null==r?null:""+r,children:e,containerInfo:n,implementation:null}}(e,n,null,t)},n.createRoot=function(e,n){if(!il(e))throw Error(f(299));var t=!1,r="",l=ie;return null!=n&&(!0===n.unstable_strictMode&&(t=!0),void 0!==n.identifierPrefix&&(r=n.identifierPrefix),void 0!==n.onRecoverableError&&(l=n.onRecoverableError)),n=o3(e,1,!1,null,null,t,!1,r,l),e[rL]=n.current,ra(8===e.nodeType?e.parentNode:e),new it(n)},n.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var n=e._reactInternals;if(void 0===n){if("function"==typeof e.render)throw Error(f(188));throw Error(f(268,e=Object.keys(e).join(",")))}return e=null===(e=eK(n))?null:e.stateNode},n.flushSync=function(e){return oz(e)},n.hydrate=function(e,n,t){if(!ia(n))throw Error(f(200));return io(null,e,n,!0,t)},n.hydrateRoot=function(e,n,t){if(!il(e))throw Error(f(405));var r=null!=t&&t.hydratedSources||null,l=!1,a="",u=ie;if(null!=t&&(!0===t.unstable_strictMode&&(l=!0),void 0!==t.identifierPrefix&&(a=t.identifierPrefix),void 0!==t.onRecoverableError&&(u=t.onRecoverableError)),n=o8(n,null,e,1,null!=t?t:null,l,!1,a,u),e[rL]=n.current,ra(e),r)for(e=0;e<r.length;e++)l=(l=(t=r[e])._getVersion)(t._source),null==n.mutableSourceEagerHydrationData?n.mutableSourceEagerHydrationData=[t,l]:n.mutableSourceEagerHydrationData.push(t,l);return new ir(n)},n.render=function(e,n,t){if(!ia(n))throw Error(f(200));return io(null,e,n,!1,t)},n.unmountComponentAtNode=function(e){if(!ia(e))throw Error(f(40));return!!e._reactRootContainer&&(oz(function(){io(null,null,e,!1,function(){e._reactRootContainer=null,e[rL]=null})}),!0)},n.unstable_batchedUpdates=oN,n.unstable_renderSubtreeIntoContainer=function(e,n,t,r){if(!ia(t))throw Error(f(200));if(null==e||void 0===e._reactInternals)throw Error(f(38));return io(e,n,t,!1,r)},n.version="18.2.0-next-9e3b772b8-20220608"},514:function(e,n,t){"use strict";var r=t("994");n.createRoot=r.createRoot,n.hydrateRoot=r.hydrateRoot},994:function(e,n,t){"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(e){console.error(e)}}(),e.exports=t("836")},488:function(e,n,t){"use strict";var r=t("950"),l=Symbol.for("react.element"),a=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,o=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function s(e,n,t){var r,a={},s=null,c=null;for(r in void 0!==t&&(s=""+t),void 0!==n.key&&(s=""+n.key),void 0!==n.ref&&(c=n.ref),n)u.call(n,r)&&!i.hasOwnProperty(r)&&(a[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===a[r]&&(a[r]=n[r]);return{$$typeof:l,type:e,key:s,ref:c,props:a,_owner:o.current}}n.Fragment=a,n.jsx=s,n.jsxs=s},478:function(e,n,t){"use strict";var r=Symbol.for("react.element"),l=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),u=Symbol.for("react.strict_mode"),o=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),m=Symbol.iterator,h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},g=Object.assign,v={};function y(e,n,t){this.props=e,this.context=n,this.refs=v,this.updater=t||h}function b(){}function k(e,n,t){this.props=e,this.context=n,this.refs=v,this.updater=t||h}y.prototype.isReactComponent={},y.prototype.setState=function(e,n){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,n,"setState")},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=y.prototype;var w=k.prototype=new b;w.constructor=k,g(w,y.prototype),w.isPureReactComponent=!0;var S=Array.isArray,x=Object.prototype.hasOwnProperty,E={current:null},_={key:!0,ref:!0,__self:!0,__source:!0};function C(e,n,t){var l,a={},u=null,o=null;if(null!=n)for(l in void 0!==n.ref&&(o=n.ref),void 0!==n.key&&(u=""+n.key),n)x.call(n,l)&&!_.hasOwnProperty(l)&&(a[l]=n[l]);var i=arguments.length-2;if(1===i)a.children=t;else if(1<i){for(var s=Array(i),c=0;c<i;c++)s[c]=arguments[c+2];a.children=s}if(e&&e.defaultProps)for(l in i=e.defaultProps)void 0===a[l]&&(a[l]=i[l]);return{$$typeof:r,type:e,key:u,ref:o,props:a,_owner:E.current}}function P(e){return"object"==typeof e&&null!==e&&e.$$typeof===r}var N=/\/+/g;function z(e,n){var t,r;return"object"==typeof e&&null!==e&&null!=e.key?(t=""+e.key,r={"=":"=0",":":"=2"},"$"+t.replace(/[=:]/g,function(e){return r[e]})):n.toString(36)}function T(e,n,t){if(null==e)return e;var a=[],u=0;return!function e(n,t,a,u,o){var i,s,c,f=typeof n;("undefined"===f||"boolean"===f)&&(n=null);var d=!1;if(null===n)d=!0;else switch(f){case"string":case"number":d=!0;break;case"object":switch(n.$$typeof){case r:case l:d=!0}}if(d){;return o=o(d=n),n=""===u?"."+z(d,0):u,S(o)?(a="",null!=n&&(a=n.replace(N,"$&/")+"/"),e(o,t,a,"",function(e){return e})):null!=o&&(P(o)&&(i=o,s=a+(!o.key||d&&d.key===o.key?"":(""+o.key).replace(N,"$&/")+"/")+n,o={$$typeof:r,type:i.type,key:s,ref:i.ref,props:i.props,_owner:i._owner}),t.push(o)),1}if(d=0,u=""===u?".":u+":",S(n))for(var p=0;p<n.length;p++){f=n[p];var h=u+z(f,p);d+=e(f,t,a,h,o)}else{;if("function"==typeof(h=null===(c=n)||"object"!=typeof c?null:"function"==typeof(c=m&&c[m]||c["@@iterator"])?c:null))for(n=h.call(n),p=0;!(f=n.next()).done;)h=u+z(f=f.value,p++),d+=e(f,t,a,h,o);else if("object"===f)throw Error("Objects are not valid as a React child (found: "+("[object Object]"===(t=String(n))?"object with keys {"+Object.keys(n).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.")}return d}(e,a,"","",function(e){return n.call(t,e,u++)}),a}function L(e){if(-1===e._status){var n=e._result;(n=n()).then(function(n){(0===e._status||-1===e._status)&&(e._status=1,e._result=n)},function(n){(0===e._status||-1===e._status)&&(e._status=2,e._result=n)}),-1===e._status&&(e._status=0,e._result=n)}if(1===e._status)return e._result.default;throw e._result}var R={current:null},O={transition:null};n.Children={map:T,forEach:function(e,n,t){T(e,function(){n.apply(this,arguments)},t)},count:function(e){var n=0;return T(e,function(){n++}),n},toArray:function(e){return T(e,function(e){return e})||[]},only:function(e){if(!P(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},n.Component=y,n.Fragment=a,n.Profiler=o,n.PureComponent=k,n.StrictMode=u,n.Suspense=f,n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED={ReactCurrentDispatcher:R,ReactCurrentBatchConfig:O,ReactCurrentOwner:E},n.cloneElement=function(e,n,t){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var l=g({},e.props),a=e.key,u=e.ref,o=e._owner;if(null!=n){if(void 0!==n.ref&&(u=n.ref,o=E.current),void 0!==n.key&&(a=""+n.key),e.type&&e.type.defaultProps)var i=e.type.defaultProps;for(s in n)x.call(n,s)&&!_.hasOwnProperty(s)&&(l[s]=void 0===n[s]&&void 0!==i?i[s]:n[s])}var s=arguments.length-2;if(1===s)l.children=t;else if(1<s){i=Array(s);for(var c=0;c<s;c++)i[c]=arguments[c+2];l.children=i}return{$$typeof:r,type:e.type,key:a,ref:u,props:l,_owner:o}},n.createContext=function(e){return(e={$$typeof:s,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:i,_context:e},e.Consumer=e},n.createElement=C,n.createFactory=function(e){var n=C.bind(null,e);return n.type=e,n},n.createRef=function(){return{current:null}},n.forwardRef=function(e){return{$$typeof:c,render:e}},n.isValidElement=P,n.lazy=function(e){return{$$typeof:p,_payload:{_status:-1,_result:e},_init:L}},n.memo=function(e,n){return{$$typeof:d,type:e,compare:void 0===n?null:n}},n.startTransition=function(e){var n=O.transition;O.transition={};try{e()}finally{O.transition=n}},n.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")},n.useCallback=function(e,n){return R.current.useCallback(e,n)},n.useContext=function(e){return R.current.useContext(e)},n.useDebugValue=function(){},n.useDeferredValue=function(e){return R.current.useDeferredValue(e)},n.useEffect=function(e,n){return R.current.useEffect(e,n)},n.useId=function(){return R.current.useId()},n.useImperativeHandle=function(e,n,t){return R.current.useImperativeHandle(e,n,t)},n.useInsertionEffect=function(e,n){return R.current.useInsertionEffect(e,n)},n.useLayoutEffect=function(e,n){return R.current.useLayoutEffect(e,n)},n.useMemo=function(e,n){return R.current.useMemo(e,n)},n.useReducer=function(e,n,t){return R.current.useReducer(e,n,t)},n.useRef=function(e){return R.current.useRef(e)},n.useState=function(e){return R.current.useState(e)},n.useSyncExternalStore=function(e,n,t){return R.current.useSyncExternalStore(e,n,t)},n.useTransition=function(){return R.current.useTransition()},n.version="18.2.0"},950:function(e,n,t){"use strict";e.exports=t("478")},51:function(e,n,t){"use strict";e.exports=t("488")},979:function(e,n,t){"use strict";function r(e,n){var t=e.length;e.push(n);e:for(;0<t;){var r=t-1>>>1,l=e[r];if(0<u(l,n))e[r]=n,e[t]=l,t=r;else break e}}function l(e){return 0===e.length?null:e[0]}function a(e){if(0===e.length)return null;var n=e[0],t=e.pop();if(t!==n){e[0]=t;e:for(var r=0,l=e.length,a=l>>>1;r<a;){var o=2*(r+1)-1,i=e[o],s=o+1,c=e[s];if(0>u(i,t))s<l&&0>u(c,i)?(e[r]=c,e[s]=t,r=s):(e[r]=i,e[o]=t,r=o);else if(s<l&&0>u(c,t))e[r]=c,e[s]=t,r=s;else break e}}return n}function u(e,n){var t=e.sortIndex-n.sortIndex;return 0!==t?t:e.id-n.id}if("object"==typeof performance&&"function"==typeof performance.now){var o,i=performance;n.unstable_now=function(){return i.now()}}else{var s=Date,c=s.now();n.unstable_now=function(){return s.now()-c}}var f=[],d=[],p=1,m=null,h=3,g=!1,v=!1,y=!1,b="function"==typeof setTimeout?setTimeout:null,k="function"==typeof clearTimeout?clearTimeout:null,w="undefined"!=typeof setImmediate?setImmediate:null;function S(e){for(var n=l(d);null!==n;){if(null===n.callback)a(d);else if(n.startTime<=e)a(d),n.sortIndex=n.expirationTime,r(f,n);else break;n=l(d)}}function x(e){if(y=!1,S(e),!v){if(null!==l(f))v=!0,M(E);else{var n=l(d);null!==n&&F(x,n.startTime-e)}}}function E(e,t){v=!1,y&&(y=!1,k(P),P=-1),g=!0;var r=h;try{for(S(t),m=l(f);null!==m&&(!(m.expirationTime>t)||e&&!T());){var u=m.callback;if("function"==typeof u){m.callback=null,h=m.priorityLevel;var o=u(m.expirationTime<=t);t=n.unstable_now(),"function"==typeof o?m.callback=o:m===l(f)&&a(f),S(t)}else a(f);m=l(f)}if(null!==m)var i=!0;else{var s=l(d);null!==s&&F(x,s.startTime-t),i=!1}return i}finally{m=null,h=r,g=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var _=!1,C=null,P=-1,N=5,z=-1;function T(){return!(n.unstable_now()-z<N)}function L(){if(null!==C){var e=n.unstable_now();z=e;var t=!0;try{t=C(!0,e)}finally{t?o():(_=!1,C=null)}}else _=!1}if("function"==typeof w)o=function(){w(L)};else if("undefined"!=typeof MessageChannel){var R=new MessageChannel,O=R.port2;R.port1.onmessage=L,o=function(){O.postMessage(null)}}else o=function(){b(L,0)};function M(e){C=e,_||(_=!0,o())}function F(e,t){P=b(function(){e(n.unstable_now())},t)}n.unstable_IdlePriority=5,n.unstable_ImmediatePriority=1,n.unstable_LowPriority=4,n.unstable_NormalPriority=3,n.unstable_Profiling=null,n.unstable_UserBlockingPriority=2,n.unstable_cancelCallback=function(e){e.callback=null},n.unstable_continueExecution=function(){v||g||(v=!0,M(E))},n.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):N=0<e?Math.floor(1e3/e):5},n.unstable_getCurrentPriorityLevel=function(){return h},n.unstable_getFirstCallbackNode=function(){return l(f)},n.unstable_next=function(e){switch(h){case 1:case 2:case 3:var n=3;break;default:n=h}var t=h;h=n;try{return e()}finally{h=t}},n.unstable_pauseExecution=function(){},n.unstable_requestPaint=function(){},n.unstable_runWithPriority=function(e,n){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var t=h;h=e;try{return n()}finally{h=t}},n.unstable_scheduleCallback=function(e,t,a){var u=n.unstable_now();switch(a="object"==typeof a&&null!==a?"number"==typeof(a=a.delay)&&0<a?u+a:u:u,e){case 1:var o=-1;break;case 2:o=250;break;case 5:o=1073741823;break;case 4:o=1e4;break;default:o=5e3}return o=a+o,e={id:p++,callback:t,priorityLevel:e,startTime:a,expirationTime:o,sortIndex:-1},a>u?(e.sortIndex=a,r(d,e),null===l(f)&&e===l(d)&&(y?(k(P),P=-1):y=!0,F(x,a-u))):(e.sortIndex=o,r(f,e),v||g||(v=!0,M(E))),e},n.unstable_shouldYield=T,n.unstable_wrapCallback=function(e){var n=h;return function(){var t=h;h=n;try{return e.apply(this,arguments)}finally{h=t}}}},364:function(e,n,t){"use strict";e.exports=t("979")},286:function(e,n,t){},996:function(e,n,t){},147:function(e,n,t){},674:function(e,n,t){},173:function(e,n,t){},341:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return l}});var r=t("51"),l=function(){return(0,r.jsx)("div",{children:"Hello Plugin!"})}},625:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=t("51"),l=t("514"),a=t.ir(t("341"));t("147"),document.addEventListener("DOMContentLoaded",function(){let e=document.getElementById("__plugin"),n=(0,l.createRoot)(e);n.render((0,r.jsx)(a.default,{}))})}},n={};function t(r){var l=n[r];if(void 0!==l)return l.exports;var a=n[r]={exports:{}};return e[r](a,a.exports,t),a.exports}!function(){function e(n){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(e=function(e){return e?r:t})(n)}t.ir=function(n,t){if(!t&&n&&n.__esModule)return n;if(null===n||"object"!=typeof n&&"function"!=typeof n)return{default:n};var r=e(t);if(r&&r.has(n))return r.get(n);var l={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in n)if("default"!==u&&Object.prototype.hasOwnProperty.call(n,u)){var o=a?Object.getOwnPropertyDescriptor(n,u):null;o&&(o.get||o.set)?Object.defineProperty(l,u,o):l[u]=n[u]}return l.default=n,r&&r.set(n,l),l}}(),t("625")}();
    </script>
    
  <script defer src="ui.js"></script><link href="ui.css" rel="stylesheet"></head>
  <body>
    <div id="__plugin"></div>
  </body>
</html>
    at HTMLParser.parse (/Users/ivicabatinic/Documents/projects/DEV_PLAYGROUND/figma-plugin-starter/node_modules/.pnpm/[email protected]/node_modules/html-minifier-terser/dist/htmlminifier.cjs:250:15)
    at minifyHTML (/Users/ivicabatinic/Documents/projects/DEV_PLAYGROUND/figma-plugin-starter/node_modules/.pnpm/[email protected]/node_modules/html-minifier-terser/dist/htmlminifier.cjs:1769:3)
    at Object.minify (/Users/ivicabatinic/Documents/projects/DEV_PLAYGROUND/figma-plugin-starter/node_modules/.pnpm/[email protected]/node_modules/html-minifier-terser/dist/htmlminifier.cjs:1854:18)

the parse error is caused by your script contains c.createElement("div")).innerHTML = "<script></script>" which should be escaped before inject into html, otherwise it will cause html parse error

Uh oh!

How to inline css and js in html using @rspack/plugin-html #3126

Uh oh!

Uh oh!

isBatak May 11, 2023

Replies: 2 comments · 9 replies

Uh oh!

hardfist May 12, 2023 Maintainer

Uh oh!

Uh oh!

isBatak May 14, 2023 Author

Uh oh!

isBatak May 16, 2023 Author

Uh oh!

hardfist May 16, 2023 Maintainer

Uh oh!

isBatak May 17, 2023 Author

Uh oh!

xfsnowind Aug 2, 2023

Uh oh!

Uh oh!

xfsnowind Aug 3, 2023

isBatak
May 11, 2023

Replies: 2 comments 9 replies

hardfist
May 12, 2023
Maintainer

isBatak
May 14, 2023
Author

isBatak May 16, 2023
Author

hardfist May 16, 2023
Maintainer

isBatak May 17, 2023
Author