msw-dev-tool 1.1.5 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +266 -261
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/msw-dev-tool.css +1 -1
- package/dist/esm/index.js +267 -262
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/msw-dev-tool.css +1 -1
- package/package.json +2 -1
package/dist/cjs/index.js
CHANGED
|
@@ -5786,101 +5786,105 @@ var y = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
5786
5786
|
|
|
5787
5787
|
const o$7={asChild:{type:"boolean"}};
|
|
5788
5788
|
|
|
5789
|
-
const t$
|
|
5789
|
+
const t$8={width:{type:"string",className:"rt-r-w",customProperties:["--width"],responsive:!0},minWidth:{type:"string",className:"rt-r-min-w",customProperties:["--min-width"],responsive:!0},maxWidth:{type:"string",className:"rt-r-max-w",customProperties:["--max-width"],responsive:!0}};
|
|
5790
5790
|
|
|
5791
5791
|
const e$f={height:{type:"string",className:"rt-r-h",customProperties:["--height"],responsive:!0},minHeight:{type:"string",className:"rt-r-min-h",customProperties:["--min-height"],responsive:!0},maxHeight:{type:"string",className:"rt-r-max-h",customProperties:["--max-height"],responsive:!0}};
|
|
5792
5792
|
|
|
5793
|
-
const o$6=["gray","gold","bronze","brown","yellow","amber","orange","tomato","red","ruby","crimson","pink","plum","purple","violet","iris","indigo","blue","cyan","teal","jade","green","grass","lime","mint","sky"],e$e=["auto","gray","mauve","slate","sage","olive","sand"],r$
|
|
5793
|
+
const o$6=["gray","gold","bronze","brown","yellow","amber","orange","tomato","red","ruby","crimson","pink","plum","purple","violet","iris","indigo","blue","cyan","teal","jade","green","grass","lime","mint","sky"],e$e=["auto","gray","mauve","slate","sage","olive","sand"],r$c={color:{type:"enum",values:o$6,default:void 0}},s$5={color:{type:"enum",values:o$6,default:""}};
|
|
5794
5794
|
|
|
5795
5795
|
const o$5={highContrast:{type:"boolean",className:"rt-high-contrast",default:void 0}};
|
|
5796
5796
|
|
|
5797
|
-
const e$d=["normal","start","end","both"],r$
|
|
5797
|
+
const e$d=["normal","start","end","both"],r$b={trim:{type:"enum",className:"rt-r-lt",values:e$d,responsive:!0}};
|
|
5798
5798
|
|
|
5799
|
-
const e$c=["left","center","right"],t$
|
|
5799
|
+
const e$c=["left","center","right"],t$7={align:{type:"enum",className:"rt-r-ta",values:e$c,responsive:!0}};
|
|
5800
5800
|
|
|
5801
|
-
const e$b=["wrap","nowrap","pretty","balance"],r$
|
|
5801
|
+
const e$b=["wrap","nowrap","pretty","balance"],r$a={wrap:{type:"enum",className:"rt-r-tw",values:e$b,responsive:!0}};
|
|
5802
5802
|
|
|
5803
5803
|
const e$a={truncate:{type:"boolean",className:"rt-truncate"}};
|
|
5804
5804
|
|
|
5805
|
-
const e$9=["light","regular","medium","bold"],t$
|
|
5805
|
+
const e$9=["light","regular","medium","bold"],t$6={weight:{type:"enum",className:"rt-r-weight",values:e$9,responsive:!0}};
|
|
5806
5806
|
|
|
5807
|
-
const m$3=["h1","h2","h3","h4","h5","h6"],a$
|
|
5807
|
+
const m$3=["h1","h2","h3","h4","h5","h6"],a$8=["1","2","3","4","5","6","7","8","9"],n$7={as:{type:"enum",values:m$3,default:"h1"},...o$7,size:{type:"enum",className:"rt-r-size",values:a$8,default:"6",responsive:!0},...t$6,...t$7,...r$b,...e$a,...r$a,...r$c,...o$5};
|
|
5808
5808
|
|
|
5809
5809
|
const e$8=["initial","xs","sm","md","lg","xl"];
|
|
5810
5810
|
|
|
5811
5811
|
function e$7(n,r){return Object.prototype.hasOwnProperty.call(n,r)}
|
|
5812
5812
|
|
|
5813
|
-
function i$
|
|
5813
|
+
function i$5(e){return typeof e=="object"&&Object.keys(e).some(s=>e$8.includes(s))}
|
|
5814
5814
|
|
|
5815
|
-
function R$2({className:r,customProperties:n,...t}){const p=g({allowArbitraryValues:!0,className:r,...t}),e=m$2({customProperties:n,...t});return [p,e]}function g({allowArbitraryValues:r,value:n,className:t,propValues:p,parseValue:e=s=>s}){const s=[];if(n){if(typeof n=="string"&&p.includes(n))return l$3(t,n,e);if(i$
|
|
5815
|
+
function R$2({className:r,customProperties:n,...t}){const p=g({allowArbitraryValues:!0,className:r,...t}),e=m$2({customProperties:n,...t});return [p,e]}function g({allowArbitraryValues:r,value:n,className:t,propValues:p,parseValue:e=s=>s}){const s=[];if(n){if(typeof n=="string"&&p.includes(n))return l$3(t,n,e);if(i$5(n)){const i=n;for(const o in i){if(!e$7(i,o)||!e$8.includes(o))continue;const u=i[o];if(u!==void 0){if(p.includes(u)){const f=l$3(t,u,e),v=o==="initial"?f:`${o}:${f}`;s.push(v);}else if(r){const f=o==="initial"?t:`${o}:${t}`;s.push(f);}}}return s.join(" ")}if(r)return t}}function l$3(r,n,t){const p=r?"-":"",e=t(n),s=e?.startsWith("-"),i=s?"-":"",o=s?e?.substring(1):e;return `${i}${r}${p}${o}`}function m$2({customProperties:r,value:n,propValues:t,parseValue:p=e=>e}){let e={};if(!(!n||typeof n=="string"&&t.includes(n))){if(typeof n=="string"&&(e=Object.fromEntries(r.map(s=>[s,n]))),i$5(n)){const s=n;for(const i in s){if(!e$7(s,i)||!e$8.includes(i))continue;const o=s[i];if(!t.includes(o))for(const u of r)e={[i==="initial"?u:`${u}-${i}`]:o,...e};}}for(const s in e){const i=e[s];i!==void 0&&(e[s]=p(i));}return e}}
|
|
5816
5816
|
|
|
5817
5817
|
function l$2(...t){let e={};for(const n of t)n&&(e={...e,...n});return Object.keys(e).length?e:void 0}
|
|
5818
5818
|
|
|
5819
|
-
function N(...r){return Object.assign({},...r)}function v(r,...m){let t,l;const a={...r},f=N(...m);for(const n in f){let s=a[n];const e=f[n];if(e.default!==void 0&&s===void 0&&(s=e.default),e.type==="enum"&&![e.default,...e.values].includes(s)&&!i$
|
|
5819
|
+
function N(...r){return Object.assign({},...r)}function v(r,...m){let t,l;const a={...r},f=N(...m);for(const n in f){let s=a[n];const e=f[n];if(e.default!==void 0&&s===void 0&&(s=e.default),e.type==="enum"&&![e.default,...e.values].includes(s)&&!i$5(s)&&(s=e.default),a[n]=s,"className"in e&&e.className){delete a[n];const u="responsive"in e;if(!s||i$5(s)&&!u)continue;if(i$5(s)&&(e.default!==void 0&&s.initial===void 0&&(s.initial=e.default),e.type==="enum"&&([e.default,...e.values].includes(s.initial)||(s.initial=e.default))),e.type==="enum"){const i=g({allowArbitraryValues:!1,value:s,className:e.className,propValues:e.values,parseValue:e.parseValue});t=y(t,i);continue}if(e.type==="string"||e.type==="enum | string"){const i=e.type==="string"?[]:e.values,[d,y$1]=R$2({className:e.className,customProperties:e.customProperties,propValues:i,parseValue:e.parseValue,value:s});l=l$2(l,y$1),t=y(t,d);continue}if(e.type==="boolean"&&s){t=y(t,e.className);continue}}}return a.className=y(t,r.className),a.style=l$2(l,r.style),a}
|
|
5820
5820
|
|
|
5821
|
-
const e$6=["0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8","-9"],r$
|
|
5821
|
+
const e$6=["0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8","-9"],r$9={m:{type:"enum | string",values:e$6,responsive:!0,className:"rt-r-m",customProperties:["--m"]},mx:{type:"enum | string",values:e$6,responsive:!0,className:"rt-r-mx",customProperties:["--ml","--mr"]},my:{type:"enum | string",values:e$6,responsive:!0,className:"rt-r-my",customProperties:["--mt","--mb"]},mt:{type:"enum | string",values:e$6,responsive:!0,className:"rt-r-mt",customProperties:["--mt"]},mr:{type:"enum | string",values:e$6,responsive:!0,className:"rt-r-mr",customProperties:["--mr"]},mb:{type:"enum | string",values:e$6,responsive:!0,className:"rt-r-mb",customProperties:["--mb"]},ml:{type:"enum | string",values:e$6,responsive:!0,className:"rt-r-ml",customProperties:["--ml"]}};
|
|
5822
5822
|
|
|
5823
|
-
const r$
|
|
5823
|
+
const r$8=React__namespace.forwardRef((p,t)=>{const{children:e,className:s,asChild:a,as:n="h1",color:i,...m}=v(p,n$7,r$9);return React__namespace.createElement(Root$5,{"data-accent-color":i,...m,ref:t,className:y("rt-Heading",s)},a?e:React__namespace.createElement(n,null,e))});r$8.displayName="Heading";
|
|
5824
5824
|
|
|
5825
|
-
const m$1=["span","div","label","p"],a$
|
|
5825
|
+
const m$1=["span","div","label","p"],a$7=["1","2","3","4","5","6","7","8","9"],n$6={as:{type:"enum",values:m$1,default:"span"},...o$7,size:{type:"enum",className:"rt-r-size",values:a$7,responsive:!0},...t$6,...t$7,...r$b,...e$a,...r$a,...r$c,...o$5};
|
|
5826
5826
|
|
|
5827
|
-
const p$
|
|
5827
|
+
const p$b=React__namespace.forwardRef((t,r)=>{const{children:e,className:s,asChild:m,as:a="span",color:n,...P}=v(t,n$6,r$9);return React__namespace.createElement(Root$5,{"data-accent-color":n,...P,ref:r,className:y("rt-Text",s)},m?e:React__namespace.createElement(a,null,e))});p$b.displayName="Text";
|
|
5828
5828
|
|
|
5829
|
-
function a$
|
|
5829
|
+
function a$6(e){switch(e){case"tomato":case"red":case"ruby":case"crimson":case"pink":case"plum":case"purple":case"violet":return "mauve";case"iris":case"indigo":case"blue":case"sky":case"cyan":return "slate";case"teal":case"jade":case"mint":case"green":return "sage";case"grass":case"lime":return "olive";case"yellow":case"amber":case"orange":case"brown":case"gold":case"bronze":return "sand";case"gray":return "gray"}}
|
|
5830
5830
|
|
|
5831
|
-
const e$5=["none","small","medium","large","full"],r$
|
|
5831
|
+
const e$5=["none","small","medium","large","full"],r$7={radius:{type:"enum",values:e$5,default:void 0}};
|
|
5832
5832
|
|
|
5833
|
-
const p$
|
|
5833
|
+
const p$a=["inherit","light","dark"],t$5=["solid","translucent"],n$5=["90%","95%","100%","105%","110%"],s$4={...o$7,hasBackground:{type:"boolean",default:!0},appearance:{type:"enum",values:p$a,default:"inherit"},accentColor:{type:"enum",values:o$6,default:"indigo"},grayColor:{type:"enum",values:e$e,default:"auto"},panelBackground:{type:"enum",values:t$5,default:"translucent"},radius:{type:"enum",values:e$5,default:"medium"},scaling:{type:"enum",values:n$5,default:"100%"}};
|
|
5834
5834
|
|
|
5835
|
-
const d$3=()=>{},P$1=React__namespace.createContext(void 0);const R$1=React__namespace.forwardRef((a,s)=>React__namespace.useContext(P$1)===void 0?React__namespace.createElement(Provider,{delayDuration:200},React__namespace.createElement(Provider$1,{dir:"ltr"},React__namespace.createElement(I,{...a,ref:s}))):React__namespace.createElement(A,{...a,ref:s}));R$1.displayName="Theme";const I=React__namespace.forwardRef((a,s)=>{const{appearance:r=s$4.appearance.default,accentColor:c=s$4.accentColor.default,grayColor:l=s$4.grayColor.default,panelBackground:p=s$4.panelBackground.default,radius:n=s$4.radius.default,scaling:t=s$4.scaling.default,hasBackground:i=s$4.hasBackground.default,...u}=a,[h,m]=React__namespace.useState(r);React__namespace.useEffect(()=>m(r),[r]);const[y,g]=React__namespace.useState(c);React__namespace.useEffect(()=>g(c),[c]);const[v,C]=React__namespace.useState(l);React__namespace.useEffect(()=>C(l),[l]);const[k,f]=React__namespace.useState(p);React__namespace.useEffect(()=>f(p),[p]);const[B,x]=React__namespace.useState(n);React__namespace.useEffect(()=>x(n),[n]);const[T,b]=React__namespace.useState(t);return React__namespace.useEffect(()=>b(t),[t]),React__namespace.createElement(A,{...u,ref:s,isRoot:!0,hasBackground:i,appearance:h,accentColor:y,grayColor:v,panelBackground:k,radius:B,scaling:T,onAppearanceChange:m,onAccentColorChange:g,onGrayColorChange:C,onPanelBackgroundChange:f,onRadiusChange:x,onScalingChange:b})});I.displayName="ThemeRoot";const A=React__namespace.forwardRef((a,s)=>{const r=React__namespace.useContext(P$1),{asChild:c,isRoot:l,hasBackground:p,appearance:n=r?.appearance??s$4.appearance.default,accentColor:t=r?.accentColor??s$4.accentColor.default,grayColor:i=r?.resolvedGrayColor??s$4.grayColor.default,panelBackground:u=r?.panelBackground??s$4.panelBackground.default,radius:h=r?.radius??s$4.radius.default,scaling:m=r?.scaling??s$4.scaling.default,onAppearanceChange:y$1=d$3,onAccentColorChange:g=d$3,onGrayColorChange:v=d$3,onPanelBackgroundChange:C=d$3,onRadiusChange:k=d$3,onScalingChange:f=d$3,...B}=a,x=c?Root$5:"div",T=i==="auto"?a$
|
|
5835
|
+
const d$3=()=>{},P$1=React__namespace.createContext(void 0);const R$1=React__namespace.forwardRef((a,s)=>React__namespace.useContext(P$1)===void 0?React__namespace.createElement(Provider,{delayDuration:200},React__namespace.createElement(Provider$1,{dir:"ltr"},React__namespace.createElement(I,{...a,ref:s}))):React__namespace.createElement(A,{...a,ref:s}));R$1.displayName="Theme";const I=React__namespace.forwardRef((a,s)=>{const{appearance:r=s$4.appearance.default,accentColor:c=s$4.accentColor.default,grayColor:l=s$4.grayColor.default,panelBackground:p=s$4.panelBackground.default,radius:n=s$4.radius.default,scaling:t=s$4.scaling.default,hasBackground:i=s$4.hasBackground.default,...u}=a,[h,m]=React__namespace.useState(r);React__namespace.useEffect(()=>m(r),[r]);const[y,g]=React__namespace.useState(c);React__namespace.useEffect(()=>g(c),[c]);const[v,C]=React__namespace.useState(l);React__namespace.useEffect(()=>C(l),[l]);const[k,f]=React__namespace.useState(p);React__namespace.useEffect(()=>f(p),[p]);const[B,x]=React__namespace.useState(n);React__namespace.useEffect(()=>x(n),[n]);const[T,b]=React__namespace.useState(t);return React__namespace.useEffect(()=>b(t),[t]),React__namespace.createElement(A,{...u,ref:s,isRoot:!0,hasBackground:i,appearance:h,accentColor:y,grayColor:v,panelBackground:k,radius:B,scaling:T,onAppearanceChange:m,onAccentColorChange:g,onGrayColorChange:C,onPanelBackgroundChange:f,onRadiusChange:x,onScalingChange:b})});I.displayName="ThemeRoot";const A=React__namespace.forwardRef((a,s)=>{const r=React__namespace.useContext(P$1),{asChild:c,isRoot:l,hasBackground:p,appearance:n=r?.appearance??s$4.appearance.default,accentColor:t=r?.accentColor??s$4.accentColor.default,grayColor:i=r?.resolvedGrayColor??s$4.grayColor.default,panelBackground:u=r?.panelBackground??s$4.panelBackground.default,radius:h=r?.radius??s$4.radius.default,scaling:m=r?.scaling??s$4.scaling.default,onAppearanceChange:y$1=d$3,onAccentColorChange:g=d$3,onGrayColorChange:v=d$3,onPanelBackgroundChange:C=d$3,onRadiusChange:k=d$3,onScalingChange:f=d$3,...B}=a,x=c?Root$5:"div",T=i==="auto"?a$6(t):i,b=a.appearance==="light"||a.appearance==="dark",S=p===void 0?l||b:p;return React__namespace.createElement(P$1.Provider,{value:React__namespace.useMemo(()=>({appearance:n,accentColor:t,grayColor:i,resolvedGrayColor:T,panelBackground:u,radius:h,scaling:m,onAppearanceChange:y$1,onAccentColorChange:g,onGrayColorChange:v,onPanelBackgroundChange:C,onRadiusChange:k,onScalingChange:f}),[n,t,i,T,u,h,m,y$1,g,v,C,k,f])},React__namespace.createElement(x,{"data-is-root-theme":l?"true":"false","data-accent-color":t,"data-gray-color":T,"data-has-background":S?"true":"false","data-panel-background":u,"data-radius":h,"data-scaling":m,ref:s,...B,className:y("radix-themes",{light:n==="light",dark:n==="dark"},B.className)}))});A.displayName="ThemeImpl";
|
|
5836
5836
|
|
|
5837
5837
|
function d$2(i,e){const{asChild:r,children:c}=i;if(!r)return typeof e=="function"?e(c):e;const t=React__namespace.Children.only(c);return React__namespace.cloneElement(t,{children:typeof e=="function"?e(t.props.children):e})}
|
|
5838
5838
|
|
|
5839
5839
|
const e$4=Root$5;
|
|
5840
5840
|
|
|
5841
|
-
const s$3=["div","span"],o$4=["none","inline","inline-block","block","contents"],p$
|
|
5841
|
+
const s$3=["div","span"],o$4=["none","inline","inline-block","block","contents"],p$9={as:{type:"enum",values:s$3,default:"div"},...o$7,display:{type:"enum",className:"rt-r-display",values:o$4,responsive:!0}};
|
|
5842
5842
|
|
|
5843
|
-
const e$3=["0","1","2","3","4","5","6","7","8","9"],p$
|
|
5843
|
+
const e$3=["0","1","2","3","4","5","6","7","8","9"],p$8={p:{type:"enum | string",className:"rt-r-p",customProperties:["--p"],values:e$3,responsive:!0},px:{type:"enum | string",className:"rt-r-px",customProperties:["--pl","--pr"],values:e$3,responsive:!0},py:{type:"enum | string",className:"rt-r-py",customProperties:["--pt","--pb"],values:e$3,responsive:!0},pt:{type:"enum | string",className:"rt-r-pt",customProperties:["--pt"],values:e$3,responsive:!0},pr:{type:"enum | string",className:"rt-r-pr",customProperties:["--pr"],values:e$3,responsive:!0},pb:{type:"enum | string",className:"rt-r-pb",customProperties:["--pb"],values:e$3,responsive:!0},pl:{type:"enum | string",className:"rt-r-pl",customProperties:["--pl"],values:e$3,responsive:!0}};
|
|
5844
5844
|
|
|
5845
|
-
const r$
|
|
5845
|
+
const r$6=["visible","hidden","clip","scroll","auto"],i$4=["static","relative","absolute","fixed","sticky"],e$2=["0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8","-9"],p$7=["0","1"],n$4=["0","1"],u$3={...p$8,...t$8,...e$f,position:{type:"enum",className:"rt-r-position",values:i$4,responsive:!0},inset:{type:"enum | string",className:"rt-r-inset",customProperties:["--inset"],values:e$2,responsive:!0},top:{type:"enum | string",className:"rt-r-top",customProperties:["--top"],values:e$2,responsive:!0},right:{type:"enum | string",className:"rt-r-right",customProperties:["--right"],values:e$2,responsive:!0},bottom:{type:"enum | string",className:"rt-r-bottom",customProperties:["--bottom"],values:e$2,responsive:!0},left:{type:"enum | string",className:"rt-r-left",customProperties:["--left"],values:e$2,responsive:!0},overflow:{type:"enum",className:"rt-r-overflow",values:r$6,responsive:!0},overflowX:{type:"enum",className:"rt-r-ox",values:r$6,responsive:!0},overflowY:{type:"enum",className:"rt-r-oy",values:r$6,responsive:!0},flexBasis:{type:"string",className:"rt-r-fb",customProperties:["--flex-basis"],responsive:!0},flexShrink:{type:"enum | string",className:"rt-r-fs",customProperties:["--flex-shrink"],values:p$7,responsive:!0},flexGrow:{type:"enum | string",className:"rt-r-fg",customProperties:["--flex-grow"],values:n$4,responsive:!0},gridArea:{type:"string",className:"rt-r-ga",customProperties:["--grid-area"],responsive:!0},gridColumn:{type:"string",className:"rt-r-gc",customProperties:["--grid-column"],responsive:!0},gridColumnStart:{type:"string",className:"rt-r-gcs",customProperties:["--grid-column-start"],responsive:!0},gridColumnEnd:{type:"string",className:"rt-r-gce",customProperties:["--grid-column-end"],responsive:!0},gridRow:{type:"string",className:"rt-r-gr",customProperties:["--grid-row"],responsive:!0},gridRowStart:{type:"string",className:"rt-r-grs",customProperties:["--grid-row-start"],responsive:!0},gridRowEnd:{type:"string",className:"rt-r-gre",customProperties:["--grid-row-end"],responsive:!0}};
|
|
5846
5846
|
|
|
5847
|
-
const p$
|
|
5847
|
+
const p$6=React__namespace.forwardRef((r,s)=>{const{className:t,asChild:e,as:m="div",...a}=v(r,p$9,u$3,r$9);return React__namespace.createElement(e?e$4:m,{...a,ref:s,className:y("rt-Box",t)})});p$6.displayName="Box";
|
|
5848
5848
|
|
|
5849
|
-
const t$
|
|
5849
|
+
const t$4=["1","2","3","4"],a$5=["classic","solid","soft","surface","outline","ghost"],i$3={...o$7,size:{type:"enum",className:"rt-r-size",values:t$4,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a$5,default:"solid"},...s$5,...o$5,...r$7,loading:{type:"boolean",className:"rt-loading",default:!1}};
|
|
5850
5850
|
|
|
5851
|
-
const e$1=["0","1","2","3","4","5","6","7","8","9"],p$
|
|
5851
|
+
const e$1=["0","1","2","3","4","5","6","7","8","9"],p$5={gap:{type:"enum | string",className:"rt-r-gap",customProperties:["--gap"],values:e$1,responsive:!0},gapX:{type:"enum | string",className:"rt-r-cg",customProperties:["--column-gap"],values:e$1,responsive:!0},gapY:{type:"enum | string",className:"rt-r-rg",customProperties:["--row-gap"],values:e$1,responsive:!0}};
|
|
5852
5852
|
|
|
5853
|
-
const t$
|
|
5853
|
+
const t$3=["div","span"],p$4=["none","inline-flex","flex"],a$4=["row","column","row-reverse","column-reverse"],o$3=["start","center","end","baseline","stretch"],n$3=["start","center","end","between"],l$1=["nowrap","wrap","wrap-reverse"],u$2={as:{type:"enum",values:t$3,default:"div"},...o$7,display:{type:"enum",className:"rt-r-display",values:p$4,responsive:!0},direction:{type:"enum",className:"rt-r-fd",values:a$4,responsive:!0},align:{type:"enum",className:"rt-r-ai",values:o$3,responsive:!0},justify:{type:"enum",className:"rt-r-jc",values:n$3,parseValue:f$3,responsive:!0},wrap:{type:"enum",className:"rt-r-fw",values:l$1,responsive:!0},...p$5};function f$3(e){return e==="between"?"space-between":e}
|
|
5854
5854
|
|
|
5855
|
-
const p$
|
|
5855
|
+
const p$3=React__namespace.forwardRef((r,e)=>{const{className:s,asChild:t,as:m="div",...l}=v(r,u$2,u$3,r$9);return React__namespace.createElement(t?e$4:m,{...l,ref:e,className:y("rt-Flex",s)})});p$3.displayName="Flex";
|
|
5856
5856
|
|
|
5857
5857
|
const e=["1","2","3"],s$2={size:{type:"enum",className:"rt-r-size",values:e,default:"2",responsive:!0},loading:{type:"boolean",default:!0}};
|
|
5858
5858
|
|
|
5859
|
-
const s$1=React__namespace.forwardRef((i,o)=>{const{className:a,children:e,loading:t,...m}=v(i,s$2,r$
|
|
5859
|
+
const s$1=React__namespace.forwardRef((i,o)=>{const{className:a,children:e,loading:t,...m}=v(i,s$2,r$9);if(!t)return e;const r=React__namespace.createElement("span",{...m,ref:o,className:y("rt-Spinner",a)},React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}));return e===void 0?r:React__namespace.createElement(p$3,{asChild:!0,position:"relative",align:"center",justify:"center"},React__namespace.createElement("span",null,React__namespace.createElement("span",{"aria-hidden":!0,style:{display:"contents",visibility:"hidden"},inert:void 0},e),React__namespace.createElement(p$3,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},React__namespace.createElement("span",null,r))))});s$1.displayName="Spinner";
|
|
5860
5860
|
|
|
5861
5861
|
const d$1=Root$4;
|
|
5862
5862
|
|
|
5863
|
-
function s(e,t){if(e!==void 0)return typeof e=="string"?t(e):Object.fromEntries(Object.entries(e).map(([n,o])=>[n,t(o)]))}function r$
|
|
5863
|
+
function s(e,t){if(e!==void 0)return typeof e=="string"?t(e):Object.fromEntries(Object.entries(e).map(([n,o])=>[n,t(o)]))}function r$5(e){switch(e){case"1":return "1";case"2":case"3":return "2";case"4":return "3"}}
|
|
5864
5864
|
|
|
5865
|
-
const n$
|
|
5865
|
+
const n$2=React__namespace.forwardRef((t,p)=>{const{size:i=i$3.size.default}=t,{className:a,children:e,asChild:m,color:d,radius:l,disabled:s$2=t.loading,...u}=v(t,i$3,r$9),f=m?Root$5:"button";return React__namespace.createElement(f,{"data-disabled":s$2||void 0,"data-accent-color":d,"data-radius":l,...u,ref:p,className:y("rt-reset","rt-BaseButton",a),disabled:s$2},t.loading?React__namespace.createElement(React__namespace.Fragment,null,React__namespace.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},e),React__namespace.createElement(d$1,null,e),React__namespace.createElement(p$3,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},React__namespace.createElement("span",null,React__namespace.createElement(s$1,{size:s(i,r$5)})))):e)});n$2.displayName="BaseButton";
|
|
5866
5866
|
|
|
5867
|
-
const o$2=React__namespace.forwardRef(({className:e,...n},r)=>React__namespace.createElement(n$
|
|
5867
|
+
const o$2=React__namespace.forwardRef(({className:e,...n},r)=>React__namespace.createElement(n$2,{...n,ref:r,className:y("rt-Button",e)}));o$2.displayName="Button";
|
|
5868
5868
|
|
|
5869
|
-
const r$
|
|
5869
|
+
const r$4=["1","2","3","4"],t$2=["none","initial"],p$2=["left","center","right"],n$1={...o$7,size:{type:"enum",className:"rt-r-size",values:r$4,default:"4",responsive:!0},display:{type:"enum",className:"rt-r-display",values:t$2,parseValue:a$3,responsive:!0},align:{type:"enum",className:"rt-r-ai",values:p$2,parseValue:i$2,responsive:!0}};function a$3(e){return e==="initial"?"flex":e}function i$2(e){return e==="left"?"start":e==="right"?"end":e}
|
|
5870
|
+
|
|
5871
|
+
const p$1=React__namespace.forwardRef(({width:n,minWidth:s,maxWidth:i,height:m,minHeight:a,maxHeight:f,...P},l)=>{const{asChild:r,children:C,className:c,...y$1}=v(P,n$1,u$3,r$9),{className:d,style:h}=v({width:n,minWidth:s,maxWidth:i,height:m,minHeight:a,maxHeight:f},t$8,e$f),u=r?Root$5:"div";return React__namespace.createElement(u,{...y$1,ref:l,className:y("rt-Container",c)},d$2({asChild:r,children:C},v=>React__namespace.createElement("div",{className:y("rt-ContainerInner",d),style:h},v)))});p$1.displayName="Container";
|
|
5872
|
+
|
|
5873
|
+
const r$3=["1","2","3"],o$1=["vertical","horizontal","both"],t$1={...o$7,size:{type:"enum",className:"rt-r-size",values:r$3,default:"1",responsive:!0},...r$7,scrollbars:{type:"enum",values:o$1,default:"both"}};
|
|
5870
5874
|
|
|
5871
5875
|
function a$2(r){const{m:t,mx:m,my:o,mt:p,mr:n,mb:s,ml:e,...i}=r;return {m:t,mx:m,my:o,mt:p,mr:n,mb:s,ml:e,rest:i}}
|
|
5872
5876
|
|
|
5873
|
-
const r$2=r$
|
|
5877
|
+
const r$2=r$9.m.values;function S(s){const[e,t]=R$2({className:"rt-r-m",customProperties:["--margin"],propValues:r$2,value:s.m}),[a,o]=R$2({className:"rt-r-mx",customProperties:["--margin-left","--margin-right"],propValues:r$2,value:s.mx}),[l,i]=R$2({className:"rt-r-my",customProperties:["--margin-top","--margin-bottom"],propValues:r$2,value:s.my}),[p,u]=R$2({className:"rt-r-mt",customProperties:["--margin-top"],propValues:r$2,value:s.mt}),[n,c]=R$2({className:"rt-r-mr",customProperties:["--margin-right"],propValues:r$2,value:s.mr}),[g,P]=R$2({className:"rt-r-mb",customProperties:["--margin-bottom"],propValues:r$2,value:s.mb}),[N,C]=R$2({className:"rt-r-ml",customProperties:["--margin-left"],propValues:r$2,value:s.ml});return [y(e,a,l,p,n,g,N),l$2(t,o,i,u,c,P,C)]}
|
|
5874
5878
|
|
|
5875
5879
|
const c$2=React__namespace.forwardRef((n,S$1)=>{const{rest:f,...P}=a$2(n),[u,A]=S(P),{asChild:a,children:d,className:y$1,style:v,type:t,scrollHideDelay:N=t!=="scroll"?0:void 0,dir:V,size:i=t$1.size.default,radius:p=t$1.radius.default,scrollbars:l=t$1.scrollbars.default,...b}=f;return React__namespace.createElement(Root$1,{type:t,scrollHideDelay:N,className:y("rt-ScrollAreaRoot",u,y$1),style:l$2(A,v),asChild:a},d$2({asChild:a,children:d},g$1=>React__namespace.createElement(React__namespace.Fragment,null,React__namespace.createElement(Viewport,{...b,ref:S$1,className:"rt-ScrollAreaViewport"},g$1),React__namespace.createElement("div",{className:"rt-ScrollAreaViewportFocusRing"}),l!=="vertical"?React__namespace.createElement(Scrollbar,{"data-radius":p,orientation:"horizontal",className:y("rt-ScrollAreaScrollbar",g({className:"rt-r-size",value:i,propValues:t$1.size.values}))},React__namespace.createElement(Thumb,{className:"rt-ScrollAreaThumb"})):null,l!=="horizontal"?React__namespace.createElement(Scrollbar,{"data-radius":p,orientation:"vertical",className:y("rt-ScrollAreaScrollbar",g({className:"rt-r-size",value:i,propValues:t$1.size.values}))},React__namespace.createElement(Thumb,{className:"rt-ScrollAreaThumb"})):null,l==="both"?React__namespace.createElement(Corner,{className:"rt-ScrollAreaCorner"}):null)))});c$2.displayName="ScrollArea";
|
|
5876
5880
|
|
|
5877
|
-
const r$1=["1","2","3"],a$1=["surface","ghost"],o=["auto","fixed"],n={size:{type:"enum",className:"rt-r-size",values:r$1,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a$1,default:"ghost"},layout:{type:"enum",className:"rt-r-tl",values:o,responsive:!0}},i$1=["start","center","end","baseline"],u$1={align:{type:"enum",className:"rt-r-va",values:i$1,parseValue:l,responsive:!0}};function l(e){return {baseline:"baseline",start:"top",center:"middle",end:"bottom"}[e]}const p=["start","center","end"],f$2={justify:{type:"enum",className:"rt-r-ta",values:p,parseValue:c$1,responsive:!0},...t$
|
|
5881
|
+
const r$1=["1","2","3"],a$1=["surface","ghost"],o=["auto","fixed"],n={size:{type:"enum",className:"rt-r-size",values:r$1,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a$1,default:"ghost"},layout:{type:"enum",className:"rt-r-tl",values:o,responsive:!0}},i$1=["start","center","end","baseline"],u$1={align:{type:"enum",className:"rt-r-va",values:i$1,parseValue:l,responsive:!0}};function l(e){return {baseline:"baseline",start:"top",center:"middle",end:"bottom"}[e]}const p=["start","center","end"],f$2={justify:{type:"enum",className:"rt-r-ta",values:p,parseValue:c$1,responsive:!0},...t$8,...p$8};function c$1(e){return {start:"left",center:"center",end:"right"}[e]}
|
|
5878
5882
|
|
|
5879
|
-
const m=React__namespace.forwardRef((o,l)=>{const{layout:a,...r}=n,{className:C,children:c,layout:y$1,...i}=v(o,r,r$
|
|
5883
|
+
const m=React__namespace.forwardRef((o,l)=>{const{layout:a,...r}=n,{className:C,children:c,layout:y$1,...i}=v(o,r,r$9),w=g({value:y$1,className:n.layout.className,propValues:n.layout.values});return React__namespace.createElement("div",{ref:l,className:y("rt-TableRoot",C),...i},React__namespace.createElement(c$2,null,React__namespace.createElement("table",{className:y("rt-TableRootTable",w)},c)))});m.displayName="Table.Root";const d=React__namespace.forwardRef(({className:o,...l},a)=>React__namespace.createElement("thead",{...l,ref:a,className:y("rt-TableHeader",o)}));d.displayName="Table.Header";const b=React__namespace.forwardRef(({className:o,...l},a)=>React__namespace.createElement("tbody",{...l,ref:a,className:y("rt-TableBody",o)}));b.displayName="Table.Body";const P=React__namespace.forwardRef((o,l)=>{const{className:a,...r}=v(o,u$1);return React__namespace.createElement("tr",{...r,ref:l,className:y("rt-TableRow",a)})});P.displayName="Table.Row";const T=React__namespace.forwardRef((o,l)=>{const{className:a,...r}=v(o,f$2);return React__namespace.createElement("td",{className:y("rt-TableCell",a),ref:l,...r})});T.displayName="Table.Cell";const f$1=React__namespace.forwardRef((o,l)=>{const{className:a,...r}=v(o,f$2);return React__namespace.createElement("th",{className:y("rt-TableCell","rt-TableColumnHeaderCell",a),scope:"col",ref:l,...r})});f$1.displayName="Table.ColumnHeaderCell";const R=React__namespace.forwardRef((o,l)=>{const{className:a,...r}=v(o,f$2);return React__namespace.createElement("th",{className:y("rt-TableCell","rt-TableRowHeaderCell",a),scope:"row",ref:l,...r})});R.displayName="Table.RowHeaderCell";
|
|
5880
5884
|
|
|
5881
|
-
const r=["1","2","3"],t=["classic","surface","soft"],f={size:{type:"enum",className:"rt-r-size",values:r,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},...r$
|
|
5885
|
+
const r=["1","2","3"],t=["classic","surface","soft"],f={size:{type:"enum",className:"rt-r-size",values:r,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},...r$c,...r$7},a=["left","right"],i={side:{type:"enum",values:a},...r$c,gap:u$2.gap,px:p$8.px,pl:p$8.pl,pr:p$8.pr};
|
|
5882
5886
|
|
|
5883
|
-
const u=React__namespace.forwardRef((r,s)=>{const e=React__namespace.useRef(null),{children:l,className:i,color:p,radius:f$1,style:x,...P}=v(r,f,r$
|
|
5887
|
+
const u=React__namespace.forwardRef((r,s)=>{const e=React__namespace.useRef(null),{children:l,className:i,color:p,radius:f$1,style:x,...P}=v(r,f,r$9);return React__namespace.createElement("div",{"data-accent-color":p,"data-radius":f$1,style:x,className:y("rt-TextFieldRoot",i),onPointerDown:T=>{const n=T.target;if(n.closest("input, button, a"))return;const o=e.current;if(!o)return;const a=n.closest(`
|
|
5884
5888
|
.rt-TextFieldSlot[data-side='right'],
|
|
5885
5889
|
.rt-TextFieldSlot:not([data-side='right']) ~ .rt-TextFieldSlot:not([data-side='left'])
|
|
5886
5890
|
`)?o.value.length:0;requestAnimationFrame(()=>{try{o.setSelectionRange(a,a);}catch{}o.focus();});}},React__namespace.createElement("input",{spellCheck:"false",...P,ref:composeRefs$1(e,s),className:"rt-reset rt-TextFieldInput"}),l)});u.displayName="TextField.Root";const c=React__namespace.forwardRef((r,s)=>{const{className:e,color:l,side:i$1,...p}=v(r,i);return React__namespace.createElement("div",{"data-accent-color":l,"data-side":i$1,...p,ref:s,className:y("rt-TextFieldSlot",e)})});c.displayName="TextField.Slot";
|
|
@@ -27889,22 +27893,147 @@ const useHandlerStore = zustand.create((set, get) => ({
|
|
|
27889
27893
|
}));
|
|
27890
27894
|
const initMSWDevTool = useHandlerStore.getState().initMSWDevTool;
|
|
27891
27895
|
|
|
27896
|
+
const useFlattenHandlersTable = () => {
|
|
27897
|
+
const { flattenHandlers, handlerRowSelection, handleHandlerRowSelectionChange, } = useHandlerStore();
|
|
27898
|
+
const columnHelper = createColumnHelper();
|
|
27899
|
+
const columns = React.useMemo(() => {
|
|
27900
|
+
return [
|
|
27901
|
+
columnHelper.accessor("enabled", {
|
|
27902
|
+
header: ({ table }) => (React.createElement("input", { type: "checkbox", checked: table.getIsAllRowsSelected(), onChange: (e) => {
|
|
27903
|
+
e.stopPropagation();
|
|
27904
|
+
table.toggleAllRowsSelected(e.target.checked);
|
|
27905
|
+
} })),
|
|
27906
|
+
cell: ({ row }) => (React.createElement("input", { type: "checkbox", checked: row.getIsSelected(), onChange: (e) => {
|
|
27907
|
+
e.stopPropagation();
|
|
27908
|
+
row.toggleSelected(e.target.checked);
|
|
27909
|
+
} })),
|
|
27910
|
+
}),
|
|
27911
|
+
columnHelper.accessor("path", {
|
|
27912
|
+
header: "Protocol",
|
|
27913
|
+
cell: ({ row }) => {
|
|
27914
|
+
const protocol = new URL(row.original.path, location.href).protocol;
|
|
27915
|
+
return protocol;
|
|
27916
|
+
},
|
|
27917
|
+
id: "protocol",
|
|
27918
|
+
}),
|
|
27919
|
+
columnHelper.accessor("path", {
|
|
27920
|
+
header: "Host",
|
|
27921
|
+
cell: ({ row }) => {
|
|
27922
|
+
const host = new URL(row.original.path, location.href).host;
|
|
27923
|
+
return host;
|
|
27924
|
+
},
|
|
27925
|
+
id: "host",
|
|
27926
|
+
}),
|
|
27927
|
+
columnHelper.accessor("path", {
|
|
27928
|
+
header: "Path",
|
|
27929
|
+
cell: ({ row }) => {
|
|
27930
|
+
const path = new URL(row.original.path, location.href).pathname;
|
|
27931
|
+
return path;
|
|
27932
|
+
},
|
|
27933
|
+
id: "path",
|
|
27934
|
+
}),
|
|
27935
|
+
columnHelper.accessor("method", {
|
|
27936
|
+
header: "Method",
|
|
27937
|
+
cell: ({ row }) => row.original.method,
|
|
27938
|
+
}),
|
|
27939
|
+
];
|
|
27940
|
+
}, []);
|
|
27941
|
+
const table = useReactTable({
|
|
27942
|
+
columns,
|
|
27943
|
+
data: flattenHandlers,
|
|
27944
|
+
getCoreRowModel: getCoreRowModel(),
|
|
27945
|
+
state: {
|
|
27946
|
+
rowSelection: handlerRowSelection,
|
|
27947
|
+
},
|
|
27948
|
+
onRowSelectionChange: handleHandlerRowSelectionChange,
|
|
27949
|
+
getRowId: (row) => row.id,
|
|
27950
|
+
enableRowSelection: true,
|
|
27951
|
+
});
|
|
27952
|
+
return table;
|
|
27953
|
+
};
|
|
27954
|
+
|
|
27955
|
+
const useUiControlStore = zustand.create((set) => ({
|
|
27956
|
+
currentHandler: null,
|
|
27957
|
+
setDebuggerHandler: (handler) => set({ currentHandler: handler }),
|
|
27958
|
+
}));
|
|
27959
|
+
|
|
27960
|
+
const HttpControl = () => {
|
|
27961
|
+
const table = useFlattenHandlersTable();
|
|
27962
|
+
const { setDebuggerHandler } = useUiControlStore();
|
|
27963
|
+
return (React.createElement(p$3, { style: { flex: 3, overflowY: "auto" }, direction: "column", gap: "4" },
|
|
27964
|
+
React.createElement(r$8, { as: "h2", size: "5" }, "Handlers"),
|
|
27965
|
+
React.createElement(m, { onDragStart: (e) => e.stopPropagation(), style: { userSelect: "text" } },
|
|
27966
|
+
React.createElement(d, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(P, { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(f$1, { key: header.id }, header.isPlaceholder
|
|
27967
|
+
? null
|
|
27968
|
+
: flexRender(header.column.columnDef.header, header.getContext())))))))),
|
|
27969
|
+
React.createElement(b, null, table.getRowModel().rows.map((row) => (React.createElement(P, { key: row.id, align: "center", className: "msw-dt-http-control-row", onClick: () => {
|
|
27970
|
+
setDebuggerHandler(row.original.handler);
|
|
27971
|
+
} }, row.getVisibleCells().map((cell) => (React.createElement(T, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
|
|
27972
|
+
};
|
|
27973
|
+
|
|
27892
27974
|
const PathParamSetter = ({ paramValues, onParamChange, }) => {
|
|
27893
27975
|
return (paramValues &&
|
|
27894
|
-
Object.keys(paramValues).length > 0 && (React.createElement(
|
|
27895
|
-
React.createElement(
|
|
27896
|
-
React.createElement(p$
|
|
27897
|
-
React.createElement(Label, { htmlFor: `param-${key}`, style: {
|
|
27976
|
+
Object.keys(paramValues).length > 0 && (React.createElement(p$6, null,
|
|
27977
|
+
React.createElement(Label, null, "Path Parameters"),
|
|
27978
|
+
React.createElement(p$3, { direction: "column", gap: "2", py: "2" }, Object.entries(paramValues).map(([key, value]) => (React.createElement(p$3, { align: "center", gap: "2", key: key },
|
|
27979
|
+
React.createElement(Label, { htmlFor: `param-${key}`, style: { width: "160px" } },
|
|
27898
27980
|
key,
|
|
27899
27981
|
":"),
|
|
27900
27982
|
React.createElement(u, { id: `param-${key}`, type: "text", value: value, onChange: (e) => onParamChange(key, e.target.value), placeholder: "value of path param", style: {
|
|
27901
27983
|
padding: "4px 8px",
|
|
27902
27984
|
borderRadius: "4px",
|
|
27903
27985
|
border: "1px solid #ccc",
|
|
27904
|
-
width: "
|
|
27986
|
+
width: "180px",
|
|
27905
27987
|
} }))))))));
|
|
27906
27988
|
};
|
|
27907
27989
|
|
|
27990
|
+
const KeyValueInputList = ({ items, setItems, title, }) => {
|
|
27991
|
+
const id = React.useId();
|
|
27992
|
+
const [key, setKey] = React.useState("");
|
|
27993
|
+
const [value, setValue] = React.useState("");
|
|
27994
|
+
const handleAdd = () => {
|
|
27995
|
+
if (!key.trim() || !value.trim())
|
|
27996
|
+
return;
|
|
27997
|
+
setItems((prev) => ({
|
|
27998
|
+
...prev,
|
|
27999
|
+
[key]: value,
|
|
28000
|
+
}));
|
|
28001
|
+
setKey("");
|
|
28002
|
+
setValue("");
|
|
28003
|
+
};
|
|
28004
|
+
const handleDelete = (keyToDelete) => {
|
|
28005
|
+
setItems((prev) => {
|
|
28006
|
+
const newItems = { ...prev };
|
|
28007
|
+
delete newItems[keyToDelete];
|
|
28008
|
+
return newItems;
|
|
28009
|
+
});
|
|
28010
|
+
};
|
|
28011
|
+
return (React.createElement(p$6, null,
|
|
28012
|
+
React.createElement(Label, { htmlFor: id }, title),
|
|
28013
|
+
React.createElement(p$3, { align: "center", py: "2", gap: "2" },
|
|
28014
|
+
React.createElement(u, { type: "text", value: key, onChange: (e) => setKey(e.target.value), placeholder: "Key", style: {
|
|
28015
|
+
padding: "8px",
|
|
28016
|
+
borderRadius: "4px",
|
|
28017
|
+
border: "1px solid #ccc",
|
|
28018
|
+
width: "160px",
|
|
28019
|
+
}, id: id }),
|
|
28020
|
+
React.createElement(u, { type: "text", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Value", style: {
|
|
28021
|
+
padding: "8px",
|
|
28022
|
+
borderRadius: "4px",
|
|
28023
|
+
border: "1px solid #ccc",
|
|
28024
|
+
width: "180px",
|
|
28025
|
+
} }),
|
|
28026
|
+
React.createElement(o$2, { onClick: handleAdd, variant: "soft" }, "Add")),
|
|
28027
|
+
React.createElement(p$3, { direction: "column", gap: "1" }, Object.entries(items).map(([key, value]) => (React.createElement(p$3, { key: key, style: {
|
|
28028
|
+
backgroundColor: "#f5f5f5",
|
|
28029
|
+
borderRadius: "4px",
|
|
28030
|
+
width: "fit-content"
|
|
28031
|
+
}, align: "center", gap: "2", py: "1" },
|
|
28032
|
+
React.createElement("span", { style: { width: "160px", paddingLeft: "8px", boxSizing: "border-box" } }, key),
|
|
28033
|
+
React.createElement("span", { style: { width: "180px", paddingLeft: "8px", boxSizing: "border-box" } }, value),
|
|
28034
|
+
React.createElement(o$2, { onClick: () => handleDelete(key), variant: "soft", color: "crimson" }, "Delete")))))));
|
|
28035
|
+
};
|
|
28036
|
+
|
|
27908
28037
|
/**
|
|
27909
28038
|
* Replace path parameters with path object and formatted path
|
|
27910
28039
|
*/
|
|
@@ -27954,7 +28083,7 @@ const RequestPreview = ({ url, paramValues, headers = {}, searchParams = {}, })
|
|
|
27954
28083
|
setError(null);
|
|
27955
28084
|
fetch(totalUrl, {
|
|
27956
28085
|
headers: {
|
|
27957
|
-
|
|
28086
|
+
"Content-Type": "application/json",
|
|
27958
28087
|
...headers,
|
|
27959
28088
|
},
|
|
27960
28089
|
})
|
|
@@ -27968,27 +28097,23 @@ const RequestPreview = ({ url, paramValues, headers = {}, searchParams = {}, })
|
|
|
27968
28097
|
setLoading(false);
|
|
27969
28098
|
});
|
|
27970
28099
|
};
|
|
27971
|
-
return (React.createElement(p$
|
|
27972
|
-
React.createElement(r$
|
|
27973
|
-
React.createElement(p$
|
|
27974
|
-
fontFamily: "monospace",
|
|
27975
|
-
wordBreak: "break-all",
|
|
27976
|
-
} },
|
|
28100
|
+
return (React.createElement(p$6, null,
|
|
28101
|
+
React.createElement(r$8, { as: "h3", size: "3" }, "Response"),
|
|
28102
|
+
React.createElement(p$6, { py: "2" },
|
|
27977
28103
|
React.createElement(o$2, { onClick: handleFetch, disabled: loading, style: {
|
|
27978
28104
|
padding: "4px 12px",
|
|
27979
28105
|
borderRadius: "4px",
|
|
27980
|
-
|
|
27981
|
-
backgroundColor: loading ? "#f5f5f5" : "white",
|
|
28106
|
+
backgroundColor: loading ? "#f5f5f5" : undefined,
|
|
27982
28107
|
cursor: loading ? "not-allowed" : "pointer",
|
|
27983
|
-
} }, loading ? "Fetching..." : "Send Request"),
|
|
27984
|
-
error && (React.createElement(p$
|
|
28108
|
+
}, color: "gray", variant: "outline" }, loading ? "Fetching..." : "Send Request"),
|
|
28109
|
+
error && (React.createElement(p$6, { style: {
|
|
27985
28110
|
marginTop: "8px",
|
|
27986
28111
|
color: "#f44336",
|
|
27987
28112
|
backgroundColor: "#f5f5f5",
|
|
27988
28113
|
} },
|
|
27989
28114
|
"Error: ",
|
|
27990
28115
|
error.message)),
|
|
27991
|
-
response && (React.createElement(p$
|
|
28116
|
+
response && (React.createElement(p$6, { style: {
|
|
27992
28117
|
marginTop: "8px",
|
|
27993
28118
|
maxHeight: "200px",
|
|
27994
28119
|
overflow: "scroll",
|
|
@@ -28000,213 +28125,82 @@ const RequestPreview = ({ url, paramValues, headers = {}, searchParams = {}, })
|
|
|
28000
28125
|
borderRadius: "4px",
|
|
28001
28126
|
fontFamily: "monospace",
|
|
28002
28127
|
wordBreak: "break-all",
|
|
28128
|
+
fontSize: "0.8rem",
|
|
28003
28129
|
} }, JSON.stringify(response, null, 2)))))));
|
|
28004
28130
|
};
|
|
28005
28131
|
|
|
28006
|
-
const
|
|
28007
|
-
|
|
28008
|
-
const
|
|
28009
|
-
const
|
|
28010
|
-
if (!key.trim() || !value.trim())
|
|
28011
|
-
return;
|
|
28012
|
-
setItems((prev) => ({
|
|
28013
|
-
...prev,
|
|
28014
|
-
[key]: value,
|
|
28015
|
-
}));
|
|
28016
|
-
setKey("");
|
|
28017
|
-
setValue("");
|
|
28018
|
-
};
|
|
28019
|
-
const handleDelete = (keyToDelete) => {
|
|
28020
|
-
setItems((prev) => {
|
|
28021
|
-
const newItems = { ...prev };
|
|
28022
|
-
delete newItems[keyToDelete];
|
|
28023
|
-
return newItems;
|
|
28024
|
-
});
|
|
28025
|
-
};
|
|
28026
|
-
return (React.createElement("div", null,
|
|
28027
|
-
React.createElement("div", { style: {
|
|
28028
|
-
display: "flex",
|
|
28029
|
-
gap: "8px",
|
|
28030
|
-
width: "100%",
|
|
28031
|
-
alignItems: "center",
|
|
28032
|
-
} },
|
|
28033
|
-
React.createElement("input", { type: "text", value: key, onChange: (e) => setKey(e.target.value), placeholder: "Key", style: {
|
|
28034
|
-
padding: "8px",
|
|
28035
|
-
borderRadius: "4px",
|
|
28036
|
-
border: "1px solid #ccc",
|
|
28037
|
-
width: "100px",
|
|
28038
|
-
} }),
|
|
28039
|
-
React.createElement("input", { type: "text", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Value", style: {
|
|
28040
|
-
padding: "8px",
|
|
28041
|
-
borderRadius: "4px",
|
|
28042
|
-
border: "1px solid #ccc",
|
|
28043
|
-
width: "100px",
|
|
28044
|
-
} }),
|
|
28045
|
-
React.createElement("button", { onClick: handleAdd, style: {
|
|
28046
|
-
padding: "8px 16px",
|
|
28047
|
-
backgroundColor: "#0066ff",
|
|
28048
|
-
color: "white",
|
|
28049
|
-
border: "none",
|
|
28050
|
-
borderRadius: "4px",
|
|
28051
|
-
cursor: "pointer",
|
|
28052
|
-
} }, "Add")),
|
|
28053
|
-
React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, Object.entries(items).map(([key, value]) => (React.createElement("div", { key: key, style: {
|
|
28054
|
-
display: "flex",
|
|
28055
|
-
alignItems: "center",
|
|
28056
|
-
padding: "8px",
|
|
28057
|
-
backgroundColor: "#f5f5f5",
|
|
28058
|
-
borderRadius: "4px",
|
|
28059
|
-
gap: "8px",
|
|
28060
|
-
} },
|
|
28061
|
-
React.createElement("span", { style: { flex: 1 } }, key),
|
|
28062
|
-
React.createElement("span", { style: { flex: 1 } }, value),
|
|
28063
|
-
React.createElement("button", { onClick: () => handleDelete(key), style: {
|
|
28064
|
-
padding: "4px 8px",
|
|
28065
|
-
backgroundColor: "#ff4444",
|
|
28066
|
-
color: "white",
|
|
28067
|
-
border: "none",
|
|
28068
|
-
borderRadius: "4px",
|
|
28069
|
-
cursor: "pointer",
|
|
28070
|
-
} }, "Delete")))))));
|
|
28071
|
-
};
|
|
28072
|
-
|
|
28073
|
-
const PreviewHandler = ({ handler }) => {
|
|
28074
|
-
const path = handler.info.path;
|
|
28132
|
+
const HandlerDebugger = () => {
|
|
28133
|
+
var _a;
|
|
28134
|
+
const { currentHandler: handler } = useUiControlStore();
|
|
28135
|
+
const path = (_a = handler === null || handler === void 0 ? void 0 : handler.info.path) !== null && _a !== void 0 ? _a : "";
|
|
28075
28136
|
const url = new URL(String(path), location.href);
|
|
28076
28137
|
const { params } = msw.matchRequestUrl(url, path, url.origin);
|
|
28077
|
-
const [paramValues, setParamValues] = React.useState(
|
|
28078
|
-
? Object.keys(params).reduce((acc, key) => ({
|
|
28079
|
-
...acc,
|
|
28080
|
-
[key]: "",
|
|
28081
|
-
}), {})
|
|
28082
|
-
: undefined);
|
|
28138
|
+
const [paramValues, setParamValues] = React.useState(undefined);
|
|
28083
28139
|
const [headers, setHeaders] = React.useState({});
|
|
28084
28140
|
const [searchParams, setSearchParams] = React.useState({});
|
|
28141
|
+
/**
|
|
28142
|
+
* Initialize state to clear previous handler data
|
|
28143
|
+
*/
|
|
28144
|
+
React.useEffect(() => {
|
|
28145
|
+
if (params) {
|
|
28146
|
+
setParamValues(Object.keys(params).reduce((acc, key) => ({
|
|
28147
|
+
...acc,
|
|
28148
|
+
[key]: "",
|
|
28149
|
+
}), {}));
|
|
28150
|
+
}
|
|
28151
|
+
else {
|
|
28152
|
+
setParamValues(undefined);
|
|
28153
|
+
}
|
|
28154
|
+
setHeaders({});
|
|
28155
|
+
setSearchParams({});
|
|
28156
|
+
}, [handler]);
|
|
28085
28157
|
const handleParamChange = (key, value) => {
|
|
28086
28158
|
setParamValues((prev) => ({
|
|
28087
28159
|
...prev,
|
|
28088
28160
|
[key]: value,
|
|
28089
28161
|
}));
|
|
28090
28162
|
};
|
|
28091
|
-
|
|
28092
|
-
React.createElement(
|
|
28093
|
-
React.createElement(p$
|
|
28163
|
+
if (!handler)
|
|
28164
|
+
return (React.createElement(Container, null,
|
|
28165
|
+
React.createElement(p$b, null, "Select a handler from the table to debug")));
|
|
28166
|
+
return (React.createElement(Container, null,
|
|
28167
|
+
React.createElement(p$b, { className: "msw-dt-sub-text", style: { overflowX: "scroll" } }, url.toString()),
|
|
28094
28168
|
React.createElement(PathParamSetter, { paramValues: paramValues, onParamChange: handleParamChange }),
|
|
28095
|
-
React.createElement(
|
|
28096
|
-
React.createElement(KeyValueInputList, { items:
|
|
28097
|
-
React.createElement(r$7, { as: "h3" }, "Headers"),
|
|
28098
|
-
React.createElement(KeyValueInputList, { items: headers, setItems: setHeaders }),
|
|
28169
|
+
React.createElement(KeyValueInputList, { items: searchParams, setItems: setSearchParams, title: "Search Params" }),
|
|
28170
|
+
React.createElement(KeyValueInputList, { items: headers, setItems: setHeaders, title: "Headers" }),
|
|
28099
28171
|
React.createElement(RequestPreview, { url: url, paramValues: paramValues, headers: headers, searchParams: searchParams })));
|
|
28100
28172
|
};
|
|
28101
|
-
|
|
28102
|
-
|
|
28103
|
-
|
|
28104
|
-
|
|
28105
|
-
|
|
28106
|
-
return [
|
|
28107
|
-
columnHelper.accessor("enabled", {
|
|
28108
|
-
header: ({ table }) => (React.createElement("input", { type: "checkbox", checked: table.getIsAllRowsSelected(), onChange: (e) => table.toggleAllRowsSelected(e.target.checked) })),
|
|
28109
|
-
cell: ({ row }) => (React.createElement("input", { type: "checkbox", checked: row.getIsSelected(), onChange: (e) => row.toggleSelected(e.target.checked) })),
|
|
28110
|
-
}),
|
|
28111
|
-
columnHelper.accessor("path", {
|
|
28112
|
-
header: "Protocol",
|
|
28113
|
-
cell: ({ row }) => {
|
|
28114
|
-
const protocol = new URL(row.original.path, location.href).protocol;
|
|
28115
|
-
return protocol;
|
|
28116
|
-
},
|
|
28117
|
-
}),
|
|
28118
|
-
columnHelper.accessor("path", {
|
|
28119
|
-
header: "Host",
|
|
28120
|
-
cell: ({ row }) => {
|
|
28121
|
-
const host = new URL(row.original.path, location.href).host;
|
|
28122
|
-
return host;
|
|
28123
|
-
},
|
|
28124
|
-
}),
|
|
28125
|
-
columnHelper.accessor("path", {
|
|
28126
|
-
header: "Path",
|
|
28127
|
-
cell: ({ row }) => {
|
|
28128
|
-
const path = new URL(row.original.path, location.href).pathname;
|
|
28129
|
-
return path;
|
|
28130
|
-
},
|
|
28131
|
-
}),
|
|
28132
|
-
columnHelper.accessor("method", {
|
|
28133
|
-
header: "Method",
|
|
28134
|
-
cell: ({ row }) => row.original.method,
|
|
28135
|
-
}),
|
|
28136
|
-
columnHelper.accessor("handler", {
|
|
28137
|
-
header: "Preview",
|
|
28138
|
-
cell: ({ row }) => {
|
|
28139
|
-
const handler = row.original.handler;
|
|
28140
|
-
return (React.createElement(Dialog, null,
|
|
28141
|
-
React.createElement(DialogTrigger, null, "Preview"),
|
|
28142
|
-
React.createElement(DialogPortal, null,
|
|
28143
|
-
React.createElement(DialogOverlay, { style: {
|
|
28144
|
-
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
28145
|
-
inset: 0,
|
|
28146
|
-
position: "fixed",
|
|
28147
|
-
zIndex: 10001,
|
|
28148
|
-
} }),
|
|
28149
|
-
React.createElement(DialogContent, { style: {
|
|
28150
|
-
backgroundColor: "white",
|
|
28151
|
-
padding: "1rem",
|
|
28152
|
-
position: "fixed",
|
|
28153
|
-
zIndex: 99999,
|
|
28154
|
-
inset: 0,
|
|
28155
|
-
borderRadius: "8px",
|
|
28156
|
-
width: "320px",
|
|
28157
|
-
maxHeight: "500px",
|
|
28158
|
-
overflow: "scroll",
|
|
28159
|
-
} },
|
|
28160
|
-
React.createElement(p$1, { justify: "between", align: "center" },
|
|
28161
|
-
React.createElement(DialogTitle, null, "Preview Handler"),
|
|
28162
|
-
React.createElement(DialogClose, { style: {
|
|
28163
|
-
fontSize: "1.5rem",
|
|
28164
|
-
backgroundColor: "transparent",
|
|
28165
|
-
width: "2rem",
|
|
28166
|
-
height: "2rem",
|
|
28167
|
-
padding: 0,
|
|
28168
|
-
textAlign: "center",
|
|
28169
|
-
} }, "X")),
|
|
28170
|
-
React.createElement(PreviewHandler, { handler: handler })))));
|
|
28171
|
-
},
|
|
28172
|
-
}),
|
|
28173
|
-
];
|
|
28174
|
-
}, []);
|
|
28175
|
-
const table = useReactTable({
|
|
28176
|
-
columns,
|
|
28177
|
-
data: flattenHandlers,
|
|
28178
|
-
getCoreRowModel: getCoreRowModel(),
|
|
28179
|
-
state: {
|
|
28180
|
-
rowSelection: handlerRowSelection,
|
|
28181
|
-
},
|
|
28182
|
-
onRowSelectionChange: handleHandlerRowSelectionChange,
|
|
28183
|
-
getRowId: (row) => row.id,
|
|
28184
|
-
enableRowSelection: true,
|
|
28185
|
-
});
|
|
28186
|
-
return table;
|
|
28187
|
-
};
|
|
28188
|
-
|
|
28189
|
-
const HttpControl = () => {
|
|
28190
|
-
const table = useFlattenHandlersTable();
|
|
28191
|
-
const { resetMSWDevTool } = useHandlerStore();
|
|
28192
|
-
return (React.createElement(p$4, null,
|
|
28193
|
-
React.createElement(o$2, { onClick: () => resetMSWDevTool() }, "Reset Dev tool"),
|
|
28194
|
-
React.createElement(m, { onDragStart: (e) => e.stopPropagation(), style: { userSelect: 'text' } },
|
|
28195
|
-
React.createElement(d, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(P, { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(f$1, { key: header.id }, header.isPlaceholder
|
|
28196
|
-
? null
|
|
28197
|
-
: flexRender(header.column.columnDef.header, header.getContext())))))))),
|
|
28198
|
-
React.createElement(b, null, table.getRowModel().rows.map((row) => (React.createElement(P, { key: row.id, align: "center" }, row.getVisibleCells().map((cell) => (React.createElement(T, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
|
|
28173
|
+
const Container = ({ children }) => {
|
|
28174
|
+
return (React.createElement(p$1, { style: { flex: 2, userSelect: "text", overflowY: "auto" } },
|
|
28175
|
+
React.createElement(p$3, { direction: "column", gap: "4" },
|
|
28176
|
+
React.createElement(r$8, { as: "h2", size: "5" }, "Debugger"),
|
|
28177
|
+
children)));
|
|
28199
28178
|
};
|
|
28200
28179
|
|
|
28201
|
-
|
|
28202
|
-
|
|
28180
|
+
/**
|
|
28181
|
+
* - Because of `portal`, It should be used when rendering in an independent area.
|
|
28182
|
+
* - `Theme` has its own size, so the size must be cleared.
|
|
28183
|
+
*/
|
|
28184
|
+
const ThemeProvider = React.forwardRef(({ children }, ref) => {
|
|
28185
|
+
return (React.createElement(R$1, { ref: ref, style: {
|
|
28203
28186
|
minHeight: 0,
|
|
28204
28187
|
maxHeight: 0,
|
|
28205
28188
|
position: "fixed",
|
|
28206
28189
|
top: 0,
|
|
28207
28190
|
left: 0,
|
|
28208
28191
|
zIndex: 999,
|
|
28209
|
-
} },
|
|
28192
|
+
} }, children));
|
|
28193
|
+
});
|
|
28194
|
+
ThemeProvider.displayName = "ThemeProvider";
|
|
28195
|
+
|
|
28196
|
+
const ToolButtonGroup = () => {
|
|
28197
|
+
const { resetMSWDevTool } = useHandlerStore();
|
|
28198
|
+
return (React.createElement(p$3, { gap: "8", py: "4" },
|
|
28199
|
+
React.createElement(o$2, { onClick: () => resetMSWDevTool() }, "Reset Dev tool")));
|
|
28200
|
+
};
|
|
28201
|
+
|
|
28202
|
+
const MSWDevTool = () => {
|
|
28203
|
+
return (React.createElement(ThemeProvider, null,
|
|
28210
28204
|
React.createElement(Drawer.Root, null,
|
|
28211
28205
|
React.createElement(Drawer.Trigger, { asChild: true },
|
|
28212
28206
|
React.createElement(o$2, { style: {
|
|
@@ -28216,31 +28210,42 @@ const MSWDevTool = () => {
|
|
|
28216
28210
|
height: "3.5rem",
|
|
28217
28211
|
} }, "M")),
|
|
28218
28212
|
React.createElement(Drawer.Portal, null,
|
|
28219
|
-
React.createElement(
|
|
28220
|
-
|
|
28221
|
-
|
|
28222
|
-
|
|
28223
|
-
|
|
28224
|
-
|
|
28225
|
-
|
|
28226
|
-
|
|
28227
|
-
|
|
28228
|
-
|
|
28229
|
-
|
|
28230
|
-
|
|
28231
|
-
|
|
28232
|
-
|
|
28233
|
-
|
|
28234
|
-
|
|
28235
|
-
|
|
28236
|
-
|
|
28237
|
-
|
|
28238
|
-
|
|
28239
|
-
|
|
28240
|
-
|
|
28241
|
-
} }, "
|
|
28242
|
-
|
|
28243
|
-
|
|
28213
|
+
React.createElement(ThemeProvider, null,
|
|
28214
|
+
React.createElement(Drawer.Overlay, { style: {
|
|
28215
|
+
position: "fixed",
|
|
28216
|
+
top: 0,
|
|
28217
|
+
right: 0,
|
|
28218
|
+
bottom: 0,
|
|
28219
|
+
left: 0,
|
|
28220
|
+
backgroundColor: "rgba(0, 0, 0, 0.4)",
|
|
28221
|
+
} }),
|
|
28222
|
+
React.createElement(Drawer.Content, { style: {
|
|
28223
|
+
position: "fixed",
|
|
28224
|
+
bottom: 0,
|
|
28225
|
+
left: 0,
|
|
28226
|
+
right: 0,
|
|
28227
|
+
height: "80%",
|
|
28228
|
+
backgroundColor: "#FFF",
|
|
28229
|
+
outline: "none",
|
|
28230
|
+
padding: "2rem",
|
|
28231
|
+
display: "flex",
|
|
28232
|
+
flexDirection: "column",
|
|
28233
|
+
} },
|
|
28234
|
+
React.createElement(p$3, { align: "center", justify: "between" },
|
|
28235
|
+
React.createElement(Drawer.Title, { style: { margin: 0 } }, "MSW DEV TOOL"),
|
|
28236
|
+
React.createElement(Drawer.Close, { style: {
|
|
28237
|
+
fontSize: "1.5rem",
|
|
28238
|
+
backgroundColor: "transparent",
|
|
28239
|
+
width: "2rem",
|
|
28240
|
+
height: "2rem",
|
|
28241
|
+
padding: 0,
|
|
28242
|
+
textAlign: "center",
|
|
28243
|
+
} }, "X")),
|
|
28244
|
+
React.createElement(DialogDescription, { className: "msw-dt-sub-text", style: { display: "none" } }, "Dev tool to control mock logic, and monitor handler logic calls."),
|
|
28245
|
+
React.createElement(ToolButtonGroup, null),
|
|
28246
|
+
React.createElement(p$3, { gap: "6", style: { flex: 1, overflow: "hidden" } },
|
|
28247
|
+
React.createElement(HttpControl, null),
|
|
28248
|
+
React.createElement(HandlerDebugger, null))))))));
|
|
28244
28249
|
};
|
|
28245
28250
|
|
|
28246
28251
|
exports.MSWDevTool = MSWDevTool;
|