msw-dev-tool 1.0.0 → 1.0.1
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 +31 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/store/uiControlStore.d.ts +8 -0
- package/dist/cjs/types/ui/DevToolContent/DevToolContentContainer.d.ts +2 -0
- package/dist/esm/index.js +31 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/store/uiControlStore.d.ts +8 -0
- package/dist/esm/types/ui/DevToolContent/DevToolContentContainer.d.ts +2 -0
- package/package.json +5 -3
package/dist/cjs/index.js
CHANGED
|
@@ -2,8 +2,36 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var reactDom = require('react-dom');
|
|
5
|
+
var zustand = require('zustand');
|
|
6
|
+
|
|
7
|
+
const useUiControlStore = zustand.create((set) => ({
|
|
8
|
+
isOpen: false,
|
|
9
|
+
openModal: () => set({ isOpen: true }),
|
|
10
|
+
closeModal: () => set({ isOpen: false }),
|
|
11
|
+
toggleModal: () => set((state) => ({ isOpen: !state.isOpen })),
|
|
12
|
+
}));
|
|
13
|
+
|
|
14
|
+
const DevToolContentContainer = () => {
|
|
15
|
+
const { toggleModal } = useUiControlStore();
|
|
16
|
+
return reactDom.createPortal(React.createElement("div", { style: {
|
|
17
|
+
width: "100%",
|
|
18
|
+
padding: "1.5rem",
|
|
19
|
+
position: "absolute",
|
|
20
|
+
top: 0,
|
|
21
|
+
left: 0,
|
|
22
|
+
border: "1px solid black",
|
|
23
|
+
boxSizing: "border-box",
|
|
24
|
+
zIndex: 1000,
|
|
25
|
+
backgroundColor: "white",
|
|
26
|
+
color: "black",
|
|
27
|
+
} },
|
|
28
|
+
React.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
|
|
29
|
+
React.createElement("p", null, "MSW DEV TOOL"),
|
|
30
|
+
React.createElement("button", { onClick: toggleModal }, "X"))), document.body);
|
|
31
|
+
};
|
|
5
32
|
|
|
6
33
|
const MSWDevTool = () => {
|
|
34
|
+
const { isOpen, toggleModal } = useUiControlStore();
|
|
7
35
|
return reactDom.createPortal(React.createElement(React.Fragment, null,
|
|
8
36
|
React.createElement("div", { style: {
|
|
9
37
|
position: "absolute",
|
|
@@ -18,7 +46,9 @@ const MSWDevTool = () => {
|
|
|
18
46
|
fontSize: "30px",
|
|
19
47
|
textAlign: "center",
|
|
20
48
|
cursor: "pointer",
|
|
21
|
-
|
|
49
|
+
zIndex: 999,
|
|
50
|
+
}, onClick: toggleModal }, "M"),
|
|
51
|
+
isOpen && React.createElement(DevToolContentContainer, null)), document.body);
|
|
22
52
|
};
|
|
23
53
|
|
|
24
54
|
exports.MSWDevTool = MSWDevTool;
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/ui/MSWDevTool.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport const MSWDevTool = () => {\n return createPortal(\n <>\n <div\n style={{\n position: \"absolute\",\n top: \"10px\",\n left: \"10px\",\n borderRadius: \"50%\",\n border: \"1px solid black\",\n backgroundColor: \"white\",\n color: \"black\",\n width: \"50px\",\n height: \"50px\",\n fontSize: \"30px\",\n textAlign: \"center\",\n cursor: \"pointer\",\n }}\n >\n M\n </div>\n </>,\n document.body\n );\n};\n"],"names":["createPortal"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/store/uiControlStore.ts","../../src/ui/DevToolContent/DevToolContentContainer.tsx","../../src/ui/MSWDevTool.tsx"],"sourcesContent":["import { create } from \"zustand\";\n\nexport type UiControlState = {\n isOpen: boolean;\n openModal: () => void;\n closeModal: () => void;\n toggleModal: () => void;\n};\n\nconst useUiControlStore = create<UiControlState>((set) => ({\n isOpen: false,\n openModal: () => set({ isOpen: true }),\n closeModal: () => set({ isOpen: false }),\n toggleModal: () => set((state) => ({ isOpen: !state.isOpen })),\n}));\n\nexport default useUiControlStore;\n","import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport useUiControlStore from \"../../store/uiControlStore\";\n\nexport const DevToolContentContainer = () => {\n const { toggleModal } = useUiControlStore();\n return createPortal(\n <div\n style={{\n width: \"100%\",\n padding: \"1.5rem\",\n position: \"absolute\",\n top: 0,\n left: 0,\n border: \"1px solid black\",\n boxSizing: \"border-box\",\n zIndex: 1000,\n backgroundColor: \"white\",\n color: \"black\",\n }}\n >\n <div style={{display:\"flex\",justifyContent:\"space-between\"}}>\n <p>MSW DEV TOOL</p>\n <button onClick={toggleModal}>X</button>\n </div>\n </div>,\n document.body\n );\n};\n","import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport useUiControlStore from \"../store/uiControlStore\";\nimport { DevToolContentContainer } from \"./DevToolContent/DevToolContentContainer\";\n\nexport const MSWDevTool = () => {\n const { isOpen, toggleModal } = useUiControlStore();\n return createPortal(\n <>\n <div\n style={{\n position: \"absolute\",\n top: \"10px\",\n left: \"10px\",\n borderRadius: \"50%\",\n border: \"1px solid black\",\n backgroundColor: \"white\",\n color: \"black\",\n width: \"50px\",\n height: \"50px\",\n fontSize: \"30px\",\n textAlign: \"center\",\n cursor: \"pointer\",\n zIndex:999,\n }}\n onClick={toggleModal}\n >\n M\n </div>\n {isOpen && <DevToolContentContainer />}\n </>,\n document.body\n );\n};\n"],"names":["create","createPortal"],"mappings":";;;;;;AASA,MAAM,iBAAiB,GAAGA,cAAM,CAAiB,CAAC,GAAG,MAAM;AACzD,IAAA,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IACtC,UAAU,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;AAC/D,CAAA,CAAC,CAAC;;ACVI,MAAM,uBAAuB,GAAG,MAAK;AACxC,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAC;AAC9C,IAAA,OAAOC,qBAAY,CACjB,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,eAAe,EAAE,OAAO;AACxB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA,EAAA;QAEF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAC,EAAA;YACxD,KAAmB,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,cAAA,CAAA;YACnB,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,WAAW,EAAY,EAAA,GAAA,CAAA,CACrC,CACD,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ,CAAC;;ACvBM,MAAM,UAAU,GAAG,MAAK;IAC7B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAC;AACpD,IAAA,OAAOA,qBAAY,CACjB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,GAAG,EAAE,MAAM;AACX,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,MAAM,EAAE,iBAAiB;AACzB,gBAAA,eAAe,EAAE,OAAO;AACxB,gBAAA,KAAK,EAAE,OAAO;AACd,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,QAAQ,EAAE,MAAM;AAChB,gBAAA,SAAS,EAAE,QAAQ;AACnB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,MAAM,EAAC,GAAG;aACX,EACD,OAAO,EAAE,WAAW,EAGhB,EAAA,GAAA,CAAA;QACL,MAAM,IAAI,KAAC,CAAA,aAAA,CAAA,uBAAuB,EAAG,IAAA,CAAA,CACrC,EACH,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type UiControlState = {
|
|
2
|
+
isOpen: boolean;
|
|
3
|
+
openModal: () => void;
|
|
4
|
+
closeModal: () => void;
|
|
5
|
+
toggleModal: () => void;
|
|
6
|
+
};
|
|
7
|
+
declare const useUiControlStore: import("zustand").UseBoundStore<import("zustand").StoreApi<UiControlState>>;
|
|
8
|
+
export default useUiControlStore;
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,35 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
+
import { create } from 'zustand';
|
|
4
|
+
|
|
5
|
+
const useUiControlStore = create((set) => ({
|
|
6
|
+
isOpen: false,
|
|
7
|
+
openModal: () => set({ isOpen: true }),
|
|
8
|
+
closeModal: () => set({ isOpen: false }),
|
|
9
|
+
toggleModal: () => set((state) => ({ isOpen: !state.isOpen })),
|
|
10
|
+
}));
|
|
11
|
+
|
|
12
|
+
const DevToolContentContainer = () => {
|
|
13
|
+
const { toggleModal } = useUiControlStore();
|
|
14
|
+
return createPortal(React.createElement("div", { style: {
|
|
15
|
+
width: "100%",
|
|
16
|
+
padding: "1.5rem",
|
|
17
|
+
position: "absolute",
|
|
18
|
+
top: 0,
|
|
19
|
+
left: 0,
|
|
20
|
+
border: "1px solid black",
|
|
21
|
+
boxSizing: "border-box",
|
|
22
|
+
zIndex: 1000,
|
|
23
|
+
backgroundColor: "white",
|
|
24
|
+
color: "black",
|
|
25
|
+
} },
|
|
26
|
+
React.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
|
|
27
|
+
React.createElement("p", null, "MSW DEV TOOL"),
|
|
28
|
+
React.createElement("button", { onClick: toggleModal }, "X"))), document.body);
|
|
29
|
+
};
|
|
3
30
|
|
|
4
31
|
const MSWDevTool = () => {
|
|
32
|
+
const { isOpen, toggleModal } = useUiControlStore();
|
|
5
33
|
return createPortal(React.createElement(React.Fragment, null,
|
|
6
34
|
React.createElement("div", { style: {
|
|
7
35
|
position: "absolute",
|
|
@@ -16,7 +44,9 @@ const MSWDevTool = () => {
|
|
|
16
44
|
fontSize: "30px",
|
|
17
45
|
textAlign: "center",
|
|
18
46
|
cursor: "pointer",
|
|
19
|
-
|
|
47
|
+
zIndex: 999,
|
|
48
|
+
}, onClick: toggleModal }, "M"),
|
|
49
|
+
isOpen && React.createElement(DevToolContentContainer, null)), document.body);
|
|
20
50
|
};
|
|
21
51
|
|
|
22
52
|
export { MSWDevTool };
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/ui/MSWDevTool.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport const MSWDevTool = () => {\n return createPortal(\n <>\n <div\n style={{\n position: \"absolute\",\n top: \"10px\",\n left: \"10px\",\n borderRadius: \"50%\",\n border: \"1px solid black\",\n backgroundColor: \"white\",\n color: \"black\",\n width: \"50px\",\n height: \"50px\",\n fontSize: \"30px\",\n textAlign: \"center\",\n cursor: \"pointer\",\n }}\n >\n M\n </div>\n </>,\n document.body\n );\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/store/uiControlStore.ts","../../src/ui/DevToolContent/DevToolContentContainer.tsx","../../src/ui/MSWDevTool.tsx"],"sourcesContent":["import { create } from \"zustand\";\n\nexport type UiControlState = {\n isOpen: boolean;\n openModal: () => void;\n closeModal: () => void;\n toggleModal: () => void;\n};\n\nconst useUiControlStore = create<UiControlState>((set) => ({\n isOpen: false,\n openModal: () => set({ isOpen: true }),\n closeModal: () => set({ isOpen: false }),\n toggleModal: () => set((state) => ({ isOpen: !state.isOpen })),\n}));\n\nexport default useUiControlStore;\n","import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport useUiControlStore from \"../../store/uiControlStore\";\n\nexport const DevToolContentContainer = () => {\n const { toggleModal } = useUiControlStore();\n return createPortal(\n <div\n style={{\n width: \"100%\",\n padding: \"1.5rem\",\n position: \"absolute\",\n top: 0,\n left: 0,\n border: \"1px solid black\",\n boxSizing: \"border-box\",\n zIndex: 1000,\n backgroundColor: \"white\",\n color: \"black\",\n }}\n >\n <div style={{display:\"flex\",justifyContent:\"space-between\"}}>\n <p>MSW DEV TOOL</p>\n <button onClick={toggleModal}>X</button>\n </div>\n </div>,\n document.body\n );\n};\n","import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport useUiControlStore from \"../store/uiControlStore\";\nimport { DevToolContentContainer } from \"./DevToolContent/DevToolContentContainer\";\n\nexport const MSWDevTool = () => {\n const { isOpen, toggleModal } = useUiControlStore();\n return createPortal(\n <>\n <div\n style={{\n position: \"absolute\",\n top: \"10px\",\n left: \"10px\",\n borderRadius: \"50%\",\n border: \"1px solid black\",\n backgroundColor: \"white\",\n color: \"black\",\n width: \"50px\",\n height: \"50px\",\n fontSize: \"30px\",\n textAlign: \"center\",\n cursor: \"pointer\",\n zIndex:999,\n }}\n onClick={toggleModal}\n >\n M\n </div>\n {isOpen && <DevToolContentContainer />}\n </>,\n document.body\n );\n};\n"],"names":[],"mappings":";;;;AASA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,CAAC,GAAG,MAAM;AACzD,IAAA,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IACtC,UAAU,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;AAC/D,CAAA,CAAC,CAAC;;ACVI,MAAM,uBAAuB,GAAG,MAAK;AACxC,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAC;AAC9C,IAAA,OAAO,YAAY,CACjB,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,eAAe,EAAE,OAAO;AACxB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA,EAAA;QAEF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAC,EAAA;YACxD,KAAmB,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,cAAA,CAAA;YACnB,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,WAAW,EAAY,EAAA,GAAA,CAAA,CACrC,CACD,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ,CAAC;;ACvBM,MAAM,UAAU,GAAG,MAAK;IAC7B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAC;AACpD,IAAA,OAAO,YAAY,CACjB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,GAAG,EAAE,MAAM;AACX,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,MAAM,EAAE,iBAAiB;AACzB,gBAAA,eAAe,EAAE,OAAO;AACxB,gBAAA,KAAK,EAAE,OAAO;AACd,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,QAAQ,EAAE,MAAM;AAChB,gBAAA,SAAS,EAAE,QAAQ;AACnB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,MAAM,EAAC,GAAG;aACX,EACD,OAAO,EAAE,WAAW,EAGhB,EAAA,GAAA,CAAA;QACL,MAAM,IAAI,KAAC,CAAA,aAAA,CAAA,uBAAuB,EAAG,IAAA,CAAA,CACrC,EACH,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type UiControlState = {
|
|
2
|
+
isOpen: boolean;
|
|
3
|
+
openModal: () => void;
|
|
4
|
+
closeModal: () => void;
|
|
5
|
+
toggleModal: () => void;
|
|
6
|
+
};
|
|
7
|
+
declare const useUiControlStore: import("zustand").UseBoundStore<import("zustand").StoreApi<UiControlState>>;
|
|
8
|
+
export default useUiControlStore;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "msw-dev-tool",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
16
|
"react": "^18.0.0",
|
|
17
|
-
"react-dom": "^18.0.0"
|
|
17
|
+
"react-dom": "^18.0.0",
|
|
18
|
+
"zustand": "^5.0.2"
|
|
18
19
|
},
|
|
19
20
|
"devDependencies": {
|
|
20
21
|
"@rollup/plugin-commonjs": "^24.0.1",
|
|
@@ -29,6 +30,7 @@
|
|
|
29
30
|
"rollup-plugin-dts": "^5.3.1",
|
|
30
31
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
31
32
|
"tslib": "^2.8.1",
|
|
32
|
-
"typescript": "^5.2.2"
|
|
33
|
+
"typescript": "^5.2.2",
|
|
34
|
+
"zustand": "^5.0.2"
|
|
33
35
|
}
|
|
34
36
|
}
|