From 3c08354f2a858ba502f7579b3c34620f1efe8eff Mon Sep 17 00:00:00 2001 From: VibhorCodecianGupta Date: Fri, 18 Dec 2020 04:27:25 +0530 Subject: [PATCH] wip: e2e test --- .../__tests__/injectHookVariableNames-test.js | 288 ++++++++++ .../src/__tests__/resources/bundle.js | 492 ++++++++++++++++++ .../src/__tests__/resources/bundle.js.map | 1 + .../src/__tests__/setupTests.js | 10 + packages/react-devtools-shared/src/utils.js | 3 +- 5 files changed, 792 insertions(+), 2 deletions(-) create mode 100644 packages/react-devtools-shared/src/__tests__/resources/bundle.js create mode 100644 packages/react-devtools-shared/src/__tests__/resources/bundle.js.map diff --git a/packages/react-devtools-shared/src/__tests__/injectHookVariableNames-test.js b/packages/react-devtools-shared/src/__tests__/injectHookVariableNames-test.js index f4a5177fefdcd..d57a30ec9f4f0 100644 --- a/packages/react-devtools-shared/src/__tests__/injectHookVariableNames-test.js +++ b/packages/react-devtools-shared/src/__tests__/injectHookVariableNames-test.js @@ -12,10 +12,298 @@ import { filterMemberWithHookVariableName, getHookNodeWithInjectedVariableName, isNonDeclarativePrimitiveHook, + injectHookVariableNamesFunction, } from 'react-devtools-shared/src/utils'; + describe('injectHookVariableNamesFunction', () => { + it('should test injectHookVariableNamesFunction', async done => { + const fetch = global.fetch + const hookLog = [ + { + 'id':0, + 'isStateEditable':true, + 'name':'State', + 'value':false, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':151, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':89 + } + }, + { + 'id':1, + 'isStateEditable':true, + 'name':'State', + 'value':0, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':152, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':62 + } + }, + { + 'id':2, + 'isStateEditable':true, + 'name':'State', + 'value':2, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':160, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':63 + } + }, + { + 'id':null, + 'isStateEditable':false, + 'name':'CustomHook', + 'subHooks':[ + { + 'id':3, + 'isStateEditable':false, + 'name':'Ref', + 'value':null, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':115, + 'functionName':'useCustomHook', + 'fileName':'/resources/bundle.js', + 'columnNumber':65 + } + }, + { + 'id':4, + 'isStateEditable':false, + 'name':'Ref', + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':116, + 'functionName':'useCustomHook', + 'fileName':'/resources/bundle.js', + 'columnNumber':65 + } + } + ], + 'hookSource':{ + 'lineNumber':163, + 'columnNumber':23, + 'functionName':'Button', + 'fileName':'/resources/bundle.js' + } + }, + { + 'id':null, + 'isStateEditable':false, + 'name':'CustomHook', + 'subHooks':[ + { + 'id':5, + 'isStateEditable':false, + 'name':'Ref', + 'value':null, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':115, + 'functionName':'useCustomHook', + 'fileName':'/resources/bundle.js', + 'columnNumber':65 + } + }, + { + 'id':6, + 'isStateEditable':false, + 'name':'Ref', + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':116, + 'functionName':'useCustomHook', + 'fileName':'/resources/bundle.js', + 'columnNumber':65 + } + } + ], + 'hookSource':{ + 'lineNumber':164, + 'columnNumber':35, + 'functionName':'Button', + 'fileName':'/resources/bundle.js' + } + }, + { + 'id':null, + 'isStateEditable':false, + 'name':'CustomHook', + 'subHooks':[ + { + 'id':7, + 'isStateEditable':false, + 'name':'Ref', + 'value':null, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':115, + 'functionName':'useCustomHook', + 'fileName':'/resources/bundle.js', + 'columnNumber':65 + } + }, + { + 'id':8, + 'isStateEditable':false, + 'name':'Ref', + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':116, + 'functionName':'useCustomHook', + 'fileName':'/resources/bundle.js', + 'columnNumber':65 + } + } + ], + 'hookSource':{ + 'lineNumber':168, + 'columnNumber':3, + 'functionName':'Button', + 'fileName':'/resources/bundle.js' + } + }, + { + 'id':9, + 'isStateEditable':false, + 'name':'Ref', + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':169, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':64 + } + }, + { + 'id':10, + 'isStateEditable':true, + 'name':'State', + 'value':0, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':170, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':72 + } + }, + { + 'id':11, + 'isStateEditable':true, + 'name':'State', + 'value':1, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':171, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':89 + } + }, + { + 'id':12, + 'isStateEditable':true, + 'name':'State', + 'value':1, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':172, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':82 + } + }, + { + 'id':13, + 'isStateEditable':true, + 'name':'State', + 'value':true, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':173, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':66 + } + }, + { + 'id':14, + 'isStateEditable':true, + 'name':'State', + 'value':0, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':174, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':85 + } + }, + { + 'id':15, + 'isStateEditable':false, + 'name':'Effect', + 'value':{ + + }, + 'subHooks':[ + + ], + 'hookSource':{ + 'lineNumber':175, + 'functionName':'Button', + 'fileName':'/resources/bundle.js', + 'columnNumber':58 + } + } + ] + const newHookLog = await injectHookVariableNamesFunction(hookLog); + expect(newHookLog).toHaveLength(hookLog.length); + done(); + }) + it('should identify variable names in destructed syntax', async done => { const componentSnippet = ` const Example = () => { diff --git a/packages/react-devtools-shared/src/__tests__/resources/bundle.js b/packages/react-devtools-shared/src/__tests__/resources/bundle.js new file mode 100644 index 0000000000000..0789819f1da60 --- /dev/null +++ b/packages/react-devtools-shared/src/__tests__/resources/bundle.js @@ -0,0 +1,492 @@ +(this["webpackJsonpsample"] = this["webpackJsonpsample"] || []).push([["main"],{ + + /***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/App.css": + /*!************************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css ***! + \************************************************************************************************************************/ + /*! no static exports found */ + /***/ (function(module, exports, __webpack_require__) { + + // Imports + var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js"); + exports = ___CSS_LOADER_API_IMPORT___(false); + // Module + exports.push([module.i, ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n", ""]); + // Exports + module.exports = exports; + + + /***/ }), + + /***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css": + /*!**************************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css ***! + \**************************************************************************************************************************/ + /*! no static exports found */ + /***/ (function(module, exports, __webpack_require__) { + + // Imports + var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js"); + exports = ___CSS_LOADER_API_IMPORT___(false); + // Module + exports.push([module.i, "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n", ""]); + // Exports + module.exports = exports; + + + /***/ }), + + /***/ "./src/App.css": + /*!*********************!*\ + !*** ./src/App.css ***! + \*********************/ + /*! no static exports found */ + /***/ (function(module, exports, __webpack_require__) { + + + var content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./App.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/App.css"); + + if(typeof content === 'string') content = [[module.i, content, '']]; + + var transform; + var insertInto; + + + + var options = {"hmr":true} + + options.transform = transform + options.insertInto = undefined; + + var update = __webpack_require__(/*! ../node_modules/style-loader/lib/addStyles.js */ "./node_modules/style-loader/lib/addStyles.js")(content, options); + + if(content.locals) module.exports = content.locals; + + if(true) { + module.hot.accept(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./App.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/App.css", function() { + var newContent = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./App.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/App.css"); + + if(typeof newContent === 'string') newContent = [[module.i, newContent, '']]; + + var locals = (function(a, b) { + var key, idx = 0; + + for(key in a) { + if(!b || a[key] !== b[key]) return false; + idx++; + } + + for(key in b) idx--; + + return idx === 0; + }(content.locals, newContent.locals)); + + if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.'); + + update(newContent); + }); + + module.hot.dispose(function() { update(); }); + } + + /***/ }), + + /***/ "./src/App.js": + /*!********************!*\ + !*** ./src/App.js ***! + \********************/ + /*! exports provided: default */ + /***/ (function(module, __webpack_exports__, __webpack_require__) { + + "use strict"; + __webpack_require__.r(__webpack_exports__); + /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); + /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); + /* harmony import */ var _logo_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./logo.svg */ "./src/logo.svg"); + /* harmony import */ var _logo_svg__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_logo_svg__WEBPACK_IMPORTED_MODULE_1__); + /* harmony import */ var _App_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./App.css */ "./src/App.css"); + /* harmony import */ var _App_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_App_css__WEBPACK_IMPORTED_MODULE_2__); + var _jsxFileName = "/Users/zomato/Desktop/work/sample/src/App.js"; + + + + + function useCustomHook() { + const x = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); + const y = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(); + return [x, y]; + } + + const Example = (props, ref) => { + const [flag, toggleFlag] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); + const inputRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(); + Object(react__WEBPACK_IMPORTED_MODULE_0__["useDebugValue"])(flag ? 'Set' : 'Reset'); // useImperativeHandle(ref, () => ({ + // focus: () => { + // inputRef.current.focus(); + // } + // })); + + Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { + toggleFlag(true); + }, []); + Object(react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"])(() => { + console.log(flag); + }); + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { + ref: inputRef, + __self: undefined, + __source: { + fileName: _jsxFileName, + lineNumber: 27, + columnNumber: 10 + } + }); + }; + + function Button() { + // const initHook = () => { // eslint-disable-line react-hooks/rules-of-hooks + // const r = useRef(null); // eslint-disable-line react-hooks/rules-of-hooks + // } // eslint-disable-line react-hooks/rules-of-hooks + // initHook(); + const [toggleIf, setToggleIf] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); + const state = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(() => 0); + const number = state[0]; + const setNumber = state[1]; + const [number2, setNumber2] = state; // if (true) { // eslint-disable-line react-hooks/rules-of-hooks + // const state4 = React.useState(() => 0) // eslint-disable-line react-hooks/rules-of-hooks + // const [number1, setNumber1] = state4 // eslint-disable-line react-hooks/rules-of-hooks + // } + + const state3 = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(() => 2); + const state3val = state3[0], + state3Set = state3[1]; + const customState = useCustomHook(); + const [customState1, setFunc] = useCustomHook(); + const a = customState[0]; + const b = customState[1]; + const [c, d] = customState; + useCustomHook(); + const someRef = react__WEBPACK_IMPORTED_MODULE_0___default.a.useRef(); + const state2 = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(0); + const [newState, setNewState] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(() => 1); + const [newState1, setNewState2] = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(() => 1); + const flagState = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(true), + [ticker, setTicker] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(0); + Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { + console.log('useEffect breaks everything ffs'); + }, []); + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { + onClick: () => setNumber(number + 1), + value: number, + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 81, + columnNumber: 3 + } + }, number); + } + + function App() { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { + className: "App", + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 87, + columnNumber: 5 + } + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("header", { + className: "App-header", + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 88, + columnNumber: 7 + } + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { + src: _logo_svg__WEBPACK_IMPORTED_MODULE_1___default.a, + className: "App-logo", + alt: "logo", + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 89, + columnNumber: 9 + } + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", { + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 90, + columnNumber: 9 + } + }, "Edit ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("code", { + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 91, + columnNumber: 16 + } + }, "src/App.js"), " and save to reload."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", { + className: "App-link", + href: "https://reactjs.org", + target: "_blank", + rel: "noopener noreferrer", + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 93, + columnNumber: 9 + } + }, "Learn React"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Button, { + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 101, + columnNumber: 9 + } + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Example, { + __self: this, + __source: { + fileName: _jsxFileName, + lineNumber: 102, + columnNumber: 9 + } + }))); + } + + /* harmony default export */ __webpack_exports__["default"] = (App); + + /***/ }), + + /***/ "./src/index.css": + /*!***********************!*\ + !*** ./src/index.css ***! + \***********************/ + /*! no static exports found */ + /***/ (function(module, exports, __webpack_require__) { + + + var content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./index.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css"); + + if(typeof content === 'string') content = [[module.i, content, '']]; + + var transform; + var insertInto; + + + + var options = {"hmr":true} + + options.transform = transform + options.insertInto = undefined; + + var update = __webpack_require__(/*! ../node_modules/style-loader/lib/addStyles.js */ "./node_modules/style-loader/lib/addStyles.js")(content, options); + + if(content.locals) module.exports = content.locals; + + if(true) { + module.hot.accept(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./index.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css", function() { + var newContent = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./index.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css"); + + if(typeof newContent === 'string') newContent = [[module.i, newContent, '']]; + + var locals = (function(a, b) { + var key, idx = 0; + + for(key in a) { + if(!b || a[key] !== b[key]) return false; + idx++; + } + + for(key in b) idx--; + + return idx === 0; + }(content.locals, newContent.locals)); + + if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.'); + + update(newContent); + }); + + module.hot.dispose(function() { update(); }); + } + + /***/ }), + + /***/ "./src/index.js": + /*!**********************!*\ + !*** ./src/index.js ***! + \**********************/ + /*! no exports provided */ + /***/ (function(module, __webpack_exports__, __webpack_require__) { + + "use strict"; + __webpack_require__.r(__webpack_exports__); + /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); + /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); + /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js"); + /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__); + /* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./index.css */ "./src/index.css"); + /* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_index_css__WEBPACK_IMPORTED_MODULE_2__); + /* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./App */ "./src/App.js"); + /* harmony import */ var _serviceWorker__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./serviceWorker */ "./src/serviceWorker.js"); + var _jsxFileName = "/Users/zomato/Desktop/work/sample/src/index.js"; + + + + + + react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.StrictMode, { + __self: undefined, + __source: { + fileName: _jsxFileName, + lineNumber: 8, + columnNumber: 3 + } + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_App__WEBPACK_IMPORTED_MODULE_3__["default"], { + __self: undefined, + __source: { + fileName: _jsxFileName, + lineNumber: 9, + columnNumber: 5 + } + })), document.getElementById('root')); // If you want your app to work offline and load faster, you can change + // unregister() to register() below. Note this comes with some pitfalls. + // Learn more about service workers: https://bit.ly/CRA-PWA + + _serviceWorker__WEBPACK_IMPORTED_MODULE_4__["unregister"](); + + /***/ }), + + /***/ "./src/logo.svg": + /*!**********************!*\ + !*** ./src/logo.svg ***! + \**********************/ + /*! no static exports found */ + /***/ (function(module, exports, __webpack_require__) { + + module.exports = __webpack_require__.p + "static/media/logo.5d5d9eef.svg"; + + /***/ }), + + /***/ "./src/serviceWorker.js": + /*!******************************!*\ + !*** ./src/serviceWorker.js ***! + \******************************/ + /*! exports provided: register, unregister */ + /***/ (function(module, __webpack_exports__, __webpack_require__) { + + "use strict"; + __webpack_require__.r(__webpack_exports__); + /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "register", function() { return register; }); + /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "unregister", function() { return unregister; }); + // This optional code is used to register a service worker. + // register() is not called by default. + // This lets the app load faster on subsequent visits in production, and gives + // it offline capabilities. However, it also means that developers (and users) + // will only see deployed updates on subsequent visits to a page, after all the + // existing tabs open on the page have been closed, since previously cached + // resources are updated in the background. + // To learn more about the benefits of this model and instructions on how to + // opt-in, read https://bit.ly/CRA-PWA + const isLocalhost = Boolean(window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)); + function register(config) { + if (false) {} + } + + function registerValidSW(swUrl, config) { + navigator.serviceWorker.register(swUrl).then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + + if (installingWorker == null) { + return; + } + + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log('New content is available and will be used when all ' + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'); // Execute callback + + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); // Execute callback + + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }).catch(error => { + console.error('Error during service worker registration:', error); + }); + } + + function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl, { + headers: { + 'Service-Worker': 'script' + } + }).then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + + if (response.status === 404 || contentType != null && contentType.indexOf('javascript') === -1) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }).catch(() => { + console.log('No internet connection found. App is running in offline mode.'); + }); + } + + function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }).catch(error => { + console.error(error.message); + }); + } + } + + /***/ }), + + /***/ 1: + /*!**************************************************************************************************************!*\ + !*** multi (webpack)/hot/dev-server.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/index.js ***! + \**************************************************************************************************************/ + /*! no static exports found */ + /***/ (function(module, exports, __webpack_require__) { + + __webpack_require__(/*! /Users/zomato/Desktop/work/sample/node_modules/webpack/hot/dev-server.js */"./node_modules/webpack/hot/dev-server.js"); + __webpack_require__(/*! /Users/zomato/Desktop/work/sample/node_modules/react-dev-utils/webpackHotDevClient.js */"./node_modules/react-dev-utils/webpackHotDevClient.js"); + module.exports = __webpack_require__(/*! /Users/zomato/Desktop/work/sample/src/index.js */"./src/index.js"); + + + /***/ }) + + },[[1,"runtime-main",0]]]); + //# sourceMappingURL=bundle.js.map diff --git a/packages/react-devtools-shared/src/__tests__/resources/bundle.js.map b/packages/react-devtools-shared/src/__tests__/resources/bundle.js.map new file mode 100644 index 0000000000000..440a331892fdc --- /dev/null +++ b/packages/react-devtools-shared/src/__tests__/resources/bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"static/js/main.chunk.js","sources":["/Users/zomato/Desktop/work/sample/src/App.css","/Users/zomato/Desktop/work/sample/src/index.css","webpack:///./src/App.css?4433","/Users/zomato/Desktop/work/sample/src/App.js","webpack:///./src/index.css?f3f6","/Users/zomato/Desktop/work/sample/src/index.js","/Users/zomato/Desktop/work/sample/src/logo.svg","/Users/zomato/Desktop/work/sample/src/serviceWorker.js"],"sourcesContent":["// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".App {\\n text-align: center;\\n}\\n\\n.App-logo {\\n height: 40vmin;\\n pointer-events: none;\\n}\\n\\n@media (prefers-reduced-motion: no-preference) {\\n .App-logo {\\n animation: App-logo-spin infinite 20s linear;\\n }\\n}\\n\\n.App-header {\\n background-color: #282c34;\\n min-height: 100vh;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n font-size: calc(10px + 2vmin);\\n color: white;\\n}\\n\\n.App-link {\\n color: #61dafb;\\n}\\n\\n@keyframes App-logo-spin {\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \"body {\\n margin: 0;\\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\\n sans-serif;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n}\\n\\ncode {\\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\\n monospace;\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n","\nvar content = require(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./App.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./App.css\", function() {\n\t\tvar newContent = require(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./App.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import React, {useState, useEffect, useRef, useDebugValue, useImperativeHandle, useLayoutEffect} from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction useCustomHook() {\n const x = useRef(null)\n const y = useRef()\n\n return [x,y];\n}\n\nconst Example = (props, ref) => {\n const [flag, toggleFlag] = useState(false);\n const inputRef = useRef();\n useDebugValue(flag ? 'Set' : 'Reset');\n // useImperativeHandle(ref, () => ({\n // focus: () => {\n // inputRef.current.focus();\n // }\n // }));\n useEffect(() => {\n toggleFlag(true);\n }, []);\n useLayoutEffect(() => {\n console.log(flag)\n });\n return ;\n};\n\nfunction Button() {\n\n // const initHook = () => { // eslint-disable-line react-hooks/rules-of-hooks\n // const r = useRef(null); // eslint-disable-line react-hooks/rules-of-hooks\n // } // eslint-disable-line react-hooks/rules-of-hooks\n // initHook();\n\n const [toggleIf, setToggleIf] = useState(false);\n\n const state = React.useState(() => 0)\n const number = state[0]\n const setNumber = state[1]\n\n const [number2, setNumber2] = state\n\n // if (true) { // eslint-disable-line react-hooks/rules-of-hooks\n // const state4 = React.useState(() => 0) // eslint-disable-line react-hooks/rules-of-hooks\n // const [number1, setNumber1] = state4 // eslint-disable-line react-hooks/rules-of-hooks\n // }\n\n const state3 = React.useState(() => 2)\n const state3val = state3[0], state3Set = state3[1]\n \n const customState = useCustomHook();\n \n const [customState1, setFunc] = useCustomHook();\n \n const a = customState[0];\n const b = customState[1];\n\n const [c,d] = customState;\n\n useCustomHook();\n \n \n const someRef = React.useRef()\n \n const state2 = useState(0)\n \n const [newState, setNewState] = useState(() => 1)\n \n const [newState1, \n setNewState2] = React.useState(() => 1)\n\n const flagState = React.useState(true), [ticker, setTicker] = useState(0);\n\n useEffect(() => {\n console.log('useEffect breaks everything ffs')\n },[]);\n\n return (\n \n )\n}\n\nfunction App() {\n return (\n
\n
\n \"logo\"\n

\n Edit src/App.js and save to reload.\n

\n \n Learn React\n \n
\n
\n );\n}\n\nexport default App;\n","\nvar content = require(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./index.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./index.css\", function() {\n\t\tvar newContent = require(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./index.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n","module.exports = __webpack_public_path__ + \"static/media/logo.5d5d9eef.svg\";","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;AC5CA;;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAEA;AAEA;AACA;AAEA;AAEA;AAGA;AAEA;AAEA;AAEA;AAGA;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAJA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;;;;;;;;;;;AC3GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AAAA;;;;;;;;;;;AChBA;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAGA;AAEA;AAKA;AACA,eA8BA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AADA;AAIA;AACA;AACA;AAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;A","sourceRoot":""} diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js index e1f7f13f76b2c..3eaffd607f94c 100644 --- a/packages/react-devtools-shared/src/__tests__/setupTests.js +++ b/packages/react-devtools-shared/src/__tests__/setupTests.js @@ -91,6 +91,16 @@ env.beforeEach(() => { global.agent = agent; global.bridge = bridge; global.store = store; + + const readFileSync = require('fs').readFileSync; + async function mockFetch(url) { + return { + ok: true, + status: 200, + text: async () => readFileSync(__dirname + url, 'utf-8') + } + } + global.fetch = mockFetch; }); env.afterEach(() => { delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index a9384881efd29..7076874b69ac1 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -845,7 +845,7 @@ function getUniqueFileNames(hookLog: HooksTree): string[] { * @param {string} url * @returns Promisfied URL and its contents */ -function fetchFile(url: string): Promise { +export function fetchFile(url: string): Promise { return new Promise((resolve, reject) => { fetch(url).then((res) => { if (res.ok) { @@ -1435,7 +1435,6 @@ export function mergeVariableNamesIntoHookLog(oldHookLog: HooksTree, newHookLog: }; export function injectHookVariableNamesFunction(hookLog: HooksTree): Promise { - console.log('injectHookVariableNamesFunction called with', hookLog); const uniqueFilenames = getUniqueFileNames(hookLog); // To create a one-to-one mapping b/w source map URLs and source file URLs.