diff --git a/.gitignore b/.gitignore index 6450dde..99e92d7 100644 --- a/.gitignore +++ b/.gitignore @@ -30,3 +30,7 @@ yarn-error.log* # vscode .vscode + +# generated js +scripts/build-webpack5.js +plugins/react-server-dom-webpack-plugin.js \ No newline at end of file diff --git a/build-old/client1.main.js b/build-old/client1.main.js new file mode 100644 index 0000000..b51f429 --- /dev/null +++ b/build-old/client1.main.js @@ -0,0 +1,72 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["client1"],{ + +/***/ "./src/EditButton.client.js": +/*!**********************************!*\ + !*** ./src/EditButton.client.js ***! + \**********************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return EditButton; }); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js"); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _LocationContext_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./LocationContext.client */ "./src/LocationContext.client.js"); + + +var _jsxFileName = "/Users/yin-shaochen/src/github.com/michenly/server-components-demo/src/EditButton.client.js"; + +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + + +function EditButton(_ref) { + var noteId = _ref.noteId, + children = _ref.children; + + var _useLocation = Object(_LocationContext_client__WEBPACK_IMPORTED_MODULE_3__["useLocation"])(), + _useLocation2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_1__["default"])(_useLocation, 2), + setLocation = _useLocation2[1]; + + var _useTransition = Object(react__WEBPACK_IMPORTED_MODULE_2__["useTransition"])(), + _useTransition2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_1__["default"])(_useTransition, 2), + isPending = _useTransition2[0], + startTransition = _useTransition2[1]; + + var isDraft = noteId == null; + return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("button", { + className: ['edit-button', isDraft ? 'edit-button--solid' : 'edit-button--outline'].join(' '), + disabled: isPending, + onClick: function onClick() { + startTransition(function () { + setLocation(function (loc) { + return { + selectedId: noteId, + isEditing: true, + searchText: loc.searchText + }; + }); + }); + }, + role: "menuitem", + children: children + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 18, + columnNumber: 5 + }, this); +} + +/***/ }) + +}]); +//# sourceMappingURL=client1.main.js.map \ No newline at end of file diff --git a/build-old/client1.main.js.map b/build-old/client1.main.js.map new file mode 100644 index 0000000..58ddb2b --- /dev/null +++ b/build-old/client1.main.js.map @@ -0,0 +1 @@ +{"version":3,"file":"client1.main.js","sources":["webpack:///./src/EditButton.client.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport {useTransition} from 'react';\n\nimport {useLocation} from './LocationContext.client';\n\nexport default function EditButton({noteId, children}) {\n const [, setLocation] = useLocation();\n const [isPending, startTransition] = useTransition();\n const isDraft = noteId == null;\n return (\n {\n startTransition(() => {\n setLocation((loc) => ({\n selectedId: noteId,\n isEditing: true,\n searchText: loc.searchText,\n }));\n });\n }}\n role=\"menuitem\">\n {children}\n \n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AAEA;AAIA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAHA;AAAA;AAKA;AACA;AACA;AAfA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBA;;;;A","sourceRoot":""} \ No newline at end of file diff --git a/build-old/client3.main.js b/build-old/client3.main.js new file mode 100644 index 0000000..f538dad --- /dev/null +++ b/build-old/client3.main.js @@ -0,0 +1,560 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["client3"],{ + +/***/ "./src/NoteEditor.client.js": +/*!**********************************!*\ + !*** ./src/NoteEditor.client.js ***! + \**********************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return NoteEditor; }); +/* harmony import */ var _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"); +/* harmony import */ var _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js"); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_asyncToGenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"); +/* harmony import */ var _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__); +/* harmony import */ var react_server_dom_webpack__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-server-dom-webpack */ "./node_modules/react-server-dom-webpack/index.js"); +/* harmony import */ var react_server_dom_webpack__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_server_dom_webpack__WEBPACK_IMPORTED_MODULE_5__); +/* harmony import */ var _NotePreview__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./NotePreview */ "./src/NotePreview.js"); +/* harmony import */ var _Cache_client__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Cache.client */ "./src/Cache.client.js"); +/* harmony import */ var _LocationContext_client__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./LocationContext.client */ "./src/LocationContext.client.js"); + + + + +var _jsxFileName = "/Users/yin-shaochen/src/github.com/michenly/server-components-demo/src/NoteEditor.client.js"; + +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + + + + + +function NoteEditor(_ref) { + var noteId = _ref.noteId, + initialTitle = _ref.initialTitle, + initialBody = _ref.initialBody; + var refresh = Object(_Cache_client__WEBPACK_IMPORTED_MODULE_7__["useRefresh"])(); + + var _useState = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(initialTitle), + _useState2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useState, 2), + title = _useState2[0], + setTitle = _useState2[1]; + + var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(initialBody), + _useState4 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useState3, 2), + body = _useState4[0], + setBody = _useState4[1]; + + var _useLocation = Object(_LocationContext_client__WEBPACK_IMPORTED_MODULE_8__["useLocation"])(), + _useLocation2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useLocation, 2), + location = _useLocation2[0], + setLocation = _useLocation2[1]; + + var _useTransition = Object(react__WEBPACK_IMPORTED_MODULE_4__["useTransition"])(), + _useTransition2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useTransition, 2), + isNavigating = _useTransition2[0], + startNavigating = _useTransition2[1]; + + var _useMutation = useMutation({ + endpoint: noteId !== null ? "/notes/".concat(noteId) : "/notes", + method: noteId !== null ? 'PUT' : 'POST' + }), + _useMutation2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useMutation, 2), + isSaving = _useMutation2[0], + saveNote = _useMutation2[1]; + + var _useMutation3 = useMutation({ + endpoint: "/notes/".concat(noteId), + method: 'DELETE' + }), + _useMutation4 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useMutation3, 2), + isDeleting = _useMutation4[0], + deleteNote = _useMutation4[1]; + + function handleSave() { + return _handleSave.apply(this, arguments); + } + + function _handleSave() { + _handleSave = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_asyncToGenerator__WEBPACK_IMPORTED_MODULE_2__["default"])( /*#__PURE__*/_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee() { + var payload, requestedLocation, response; + return _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + payload = { + title: title, + body: body + }; + requestedLocation = { + selectedId: noteId, + isEditing: false, + searchText: location.searchText + }; + _context.next = 4; + return saveNote(payload, requestedLocation); + + case 4: + response = _context.sent; + navigate(response); + + case 6: + case "end": + return _context.stop(); + } + } + }, _callee); + })); + return _handleSave.apply(this, arguments); + } + + function handleDelete() { + return _handleDelete.apply(this, arguments); + } + + function _handleDelete() { + _handleDelete = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_asyncToGenerator__WEBPACK_IMPORTED_MODULE_2__["default"])( /*#__PURE__*/_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee2() { + var payload, requestedLocation, response; + return _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee2$(_context2) { + while (1) { + switch (_context2.prev = _context2.next) { + case 0: + payload = {}; + requestedLocation = { + selectedId: null, + isEditing: false, + searchText: location.searchText + }; + _context2.next = 4; + return deleteNote(payload, requestedLocation); + + case 4: + response = _context2.sent; + navigate(response); + + case 6: + case "end": + return _context2.stop(); + } + } + }, _callee2); + })); + return _handleDelete.apply(this, arguments); + } + + function navigate(response) { + var cacheKey = response.headers.get('X-Location'); + var nextLocation = JSON.parse(cacheKey); + var seededResponse = Object(react_server_dom_webpack__WEBPACK_IMPORTED_MODULE_5__["createFromReadableStream"])(response.body); + startNavigating(function () { + refresh(cacheKey, seededResponse); + setLocation(nextLocation); + }); + } + + var isDraft = noteId === null; + return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("div", { + className: "note-editor", + children: [/*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("form", { + className: "note-editor-form", + autoComplete: "off", + onSubmit: function onSubmit(e) { + return e.preventDefault(); + }, + children: [/*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("label", { + className: "offscreen", + htmlFor: "note-title-input", + children: "Enter a title for your note" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 70, + columnNumber: 9 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("input", { + id: "note-title-input", + type: "text", + value: title, + onChange: function onChange(e) { + setTitle(e.target.value); + } + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 73, + columnNumber: 9 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("label", { + className: "offscreen", + htmlFor: "note-body-input", + children: "Enter the body for your note" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 81, + columnNumber: 9 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("textarea", { + id: "note-body-input", + value: body, + onChange: function onChange(e) { + setBody(e.target.value); + } + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 84, + columnNumber: 9 + }, this)] + }, void 0, true, { + fileName: _jsxFileName, + lineNumber: 66, + columnNumber: 7 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("div", { + className: "note-editor-preview", + children: [/*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("div", { + className: "note-editor-menu", + role: "menubar", + children: [/*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("button", { + className: "note-editor-done", + disabled: isSaving || isNavigating, + onClick: function onClick() { + return handleSave(); + }, + role: "menuitem", + children: [/*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("img", { + src: "checkmark.svg", + width: "14px", + height: "10px", + alt: "", + role: "presentation" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 99, + columnNumber: 13 + }, this), "Done"] + }, void 0, true, { + fileName: _jsxFileName, + lineNumber: 94, + columnNumber: 11 + }, this), !isDraft && /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("button", { + className: "note-editor-delete", + disabled: isDeleting || isNavigating, + onClick: function onClick() { + return handleDelete(); + }, + role: "menuitem", + children: [/*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("img", { + src: "cross.svg", + width: "10px", + height: "10px", + alt: "", + role: "presentation" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 114, + columnNumber: 15 + }, this), "Delete"] + }, void 0, true, { + fileName: _jsxFileName, + lineNumber: 109, + columnNumber: 13 + }, this)] + }, void 0, true, { + fileName: _jsxFileName, + lineNumber: 93, + columnNumber: 9 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("div", { + className: "label label--preview", + role: "status", + children: "Preview" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 125, + columnNumber: 9 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("h1", { + className: "note-title", + children: title + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 128, + columnNumber: 9 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])(_NotePreview__WEBPACK_IMPORTED_MODULE_6__["default"], { + title: title, + body: body + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 129, + columnNumber: 9 + }, this)] + }, void 0, true, { + fileName: _jsxFileName, + lineNumber: 92, + columnNumber: 7 + }, this)] + }, void 0, true, { + fileName: _jsxFileName, + lineNumber: 65, + columnNumber: 5 + }, this); +} + +function useMutation(_ref2) { + var endpoint = _ref2.endpoint, + method = _ref2.method; + + var _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(false), + _useState6 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useState5, 2), + isSaving = _useState6[0], + setIsSaving = _useState6[1]; + + var _useState7 = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(false), + _useState8 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useState7, 2), + didError = _useState8[0], + setDidError = _useState8[1]; + + var _useState9 = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(null), + _useState10 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_3__["default"])(_useState9, 2), + error = _useState10[0], + setError = _useState10[1]; + + if (didError) { + // Let the nearest error boundary handle errors while saving. + throw error; + } + + function performMutation(_x, _x2) { + return _performMutation.apply(this, arguments); + } + + function _performMutation() { + _performMutation = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_asyncToGenerator__WEBPACK_IMPORTED_MODULE_2__["default"])( /*#__PURE__*/_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee3(payload, requestedLocation) { + var response; + return _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee3$(_context3) { + while (1) { + switch (_context3.prev = _context3.next) { + case 0: + setIsSaving(true); + _context3.prev = 1; + _context3.next = 4; + return fetch("".concat(endpoint, "?location=").concat(encodeURIComponent(JSON.stringify(requestedLocation))), { + method: method, + body: JSON.stringify(payload), + headers: { + 'Content-Type': 'application/json' + } + }); + + case 4: + response = _context3.sent; + + if (response.ok) { + _context3.next = 11; + break; + } + + _context3.t0 = Error; + _context3.next = 9; + return response.text(); + + case 9: + _context3.t1 = _context3.sent; + throw new _context3.t0(_context3.t1); + + case 11: + return _context3.abrupt("return", response); + + case 14: + _context3.prev = 14; + _context3.t2 = _context3["catch"](1); + setDidError(true); + setError(_context3.t2); + + case 18: + _context3.prev = 18; + setIsSaving(false); + return _context3.finish(18); + + case 21: + case "end": + return _context3.stop(); + } + } + }, _callee3, null, [[1, 14, 18, 21]]); + })); + return _performMutation.apply(this, arguments); + } + + return [isSaving, performMutation]; +} + +/***/ }), + +/***/ "./src/NotePreview.js": +/*!****************************!*\ + !*** ./src/NotePreview.js ***! + \****************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return NotePreview; }); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js"); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _TextWithMarkdown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TextWithMarkdown */ "./src/TextWithMarkdown.js"); + +var _jsxFileName = "/Users/yin-shaochen/src/github.com/michenly/server-components-demo/src/NotePreview.js"; + +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +function NotePreview(_ref) { + var body = _ref.body; + return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("div", { + className: "note-preview", + children: /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])(_TextWithMarkdown__WEBPACK_IMPORTED_MODULE_1__["default"], { + text: body + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 14, + columnNumber: 7 + }, this) + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 13, + columnNumber: 5 + }, this); +} + +/***/ }), + +/***/ "./src/TextWithMarkdown.js": +/*!*********************************!*\ + !*** ./src/TextWithMarkdown.js ***! + \*********************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return TextWithMarkdown; }); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js"); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var marked__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! marked */ "./node_modules/marked/lib/marked.js"); +/* harmony import */ var marked__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(marked__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var sanitize_html__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! sanitize-html */ "./node_modules/sanitize-html/index.js"); +/* harmony import */ var sanitize_html__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(sanitize_html__WEBPACK_IMPORTED_MODULE_2__); + +var _jsxFileName = "/Users/yin-shaochen/src/github.com/michenly/server-components-demo/src/TextWithMarkdown.js"; + +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + + +var allowedTags = sanitize_html__WEBPACK_IMPORTED_MODULE_2___default.a.defaults.allowedTags.concat(['img', 'h1', 'h2', 'h3']); +var allowedAttributes = Object.assign({}, sanitize_html__WEBPACK_IMPORTED_MODULE_2___default.a.defaults.allowedAttributes, { + img: ['alt', 'src'] +}); +function TextWithMarkdown(_ref) { + var text = _ref.text; + return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("div", { + className: "text-with-markdown", + dangerouslySetInnerHTML: { + __html: sanitize_html__WEBPACK_IMPORTED_MODULE_2___default()(marked__WEBPACK_IMPORTED_MODULE_1___default()(text), { + allowedTags: allowedTags, + allowedAttributes: allowedAttributes + }) + } + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 28, + columnNumber: 5 + }, this); +} + +/***/ }), + +/***/ 1: +/*!***************************!*\ + !*** colorette (ignored) ***! + \***************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +/* (ignored) */ + +/***/ }), + +/***/ 2: +/*!**************************************!*\ + !*** ./terminal-highlight (ignored) ***! + \**************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +/* (ignored) */ + +/***/ }), + +/***/ 3: +/*!*******************************!*\ + !*** source-map-js (ignored) ***! + \*******************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +/* (ignored) */ + +/***/ }), + +/***/ 4: +/*!**********************!*\ + !*** path (ignored) ***! + \**********************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +/* (ignored) */ + +/***/ }), + +/***/ 5: +/*!*********************!*\ + !*** url (ignored) ***! + \*********************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +/* (ignored) */ + +/***/ }), + +/***/ 6: +/*!********************!*\ + !*** fs (ignored) ***! + \********************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +/* (ignored) */ + +/***/ }) + +}]); +//# sourceMappingURL=client3.main.js.map \ No newline at end of file diff --git a/build-old/client3.main.js.map b/build-old/client3.main.js.map new file mode 100644 index 0000000..28f63a2 --- /dev/null +++ b/build-old/client3.main.js.map @@ -0,0 +1 @@ +{"version":3,"file":"client3.main.js","sources":["webpack:///./src/NoteEditor.client.js","webpack:///./src/NotePreview.js","webpack:///./src/TextWithMarkdown.js","webpack:///colorette (ignored)","webpack:///./terminal-highlight (ignored)","webpack:///source-map-js (ignored)","webpack:///path (ignored)","webpack:///url (ignored)","webpack:///fs (ignored)"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport {useState, useTransition} from 'react';\nimport {createFromReadableStream} from 'react-server-dom-webpack';\n\nimport NotePreview from './NotePreview';\nimport {useRefresh} from './Cache.client';\nimport {useLocation} from './LocationContext.client';\n\nexport default function NoteEditor({noteId, initialTitle, initialBody}) {\n const refresh = useRefresh();\n const [title, setTitle] = useState(initialTitle);\n const [body, setBody] = useState(initialBody);\n const [location, setLocation] = useLocation();\n const [isNavigating, startNavigating] = useTransition();\n const [isSaving, saveNote] = useMutation({\n endpoint: noteId !== null ? `/notes/${noteId}` : `/notes`,\n method: noteId !== null ? 'PUT' : 'POST',\n });\n const [isDeleting, deleteNote] = useMutation({\n endpoint: `/notes/${noteId}`,\n method: 'DELETE',\n });\n\n async function handleSave() {\n const payload = {title, body};\n const requestedLocation = {\n selectedId: noteId,\n isEditing: false,\n searchText: location.searchText,\n };\n const response = await saveNote(payload, requestedLocation);\n navigate(response);\n }\n\n async function handleDelete() {\n const payload = {};\n const requestedLocation = {\n selectedId: null,\n isEditing: false,\n searchText: location.searchText,\n };\n const response = await deleteNote(payload, requestedLocation);\n navigate(response);\n }\n\n function navigate(response) {\n const cacheKey = response.headers.get('X-Location');\n const nextLocation = JSON.parse(cacheKey);\n const seededResponse = createFromReadableStream(response.body);\n startNavigating(() => {\n refresh(cacheKey, seededResponse);\n setLocation(nextLocation);\n });\n }\n\n const isDraft = noteId === null;\n return (\n
\n e.preventDefault()}>\n \n {\n setTitle(e.target.value);\n }}\n />\n \n {\n setBody(e.target.value);\n }}\n />\n \n
\n
\n handleSave()}\n role=\"menuitem\">\n \n Done\n \n {!isDraft && (\n handleDelete()}\n role=\"menuitem\">\n \n Delete\n \n )}\n
\n
\n Preview\n
\n

{title}

\n \n
\n
\n );\n}\n\nfunction useMutation({endpoint, method}) {\n const [isSaving, setIsSaving] = useState(false);\n const [didError, setDidError] = useState(false);\n const [error, setError] = useState(null);\n if (didError) {\n // Let the nearest error boundary handle errors while saving.\n throw error;\n }\n\n async function performMutation(payload, requestedLocation) {\n setIsSaving(true);\n try {\n const response = await fetch(\n `${endpoint}?location=${encodeURIComponent(\n JSON.stringify(requestedLocation)\n )}`,\n {\n method,\n body: JSON.stringify(payload),\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n );\n if (!response.ok) {\n throw new Error(await response.text());\n }\n return response;\n } catch (e) {\n setDidError(true);\n setError(e);\n } finally {\n setIsSaving(false);\n }\n }\n\n return [isSaving, performMutation];\n}\n","/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport TextWithMarkdown from './TextWithMarkdown';\n\nexport default function NotePreview({body}) {\n return (\n
\n \n
\n );\n}\n","/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport marked from 'marked';\nimport sanitizeHtml from 'sanitize-html';\n\nconst allowedTags = sanitizeHtml.defaults.allowedTags.concat([\n 'img',\n 'h1',\n 'h2',\n 'h3',\n]);\nconst allowedAttributes = Object.assign(\n {},\n sanitizeHtml.defaults.allowedAttributes,\n {\n img: ['alt', 'src'],\n }\n);\n\nexport default function TextWithMarkdown({text}) {\n return (\n \n );\n}\n","/* (ignored) */","/* (ignored) */","/* (ignored) */","/* (ignored) */","/* (ignored) */","/* (ignored) */"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AADA;AAOA;AACA;AAFA;AANA;AAAA;AAAA;AACA;AADA;AAWA;AACA;AAFA;AAVA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAHA;AAFA;AAAA;AACA;AADA;AAOA;AACA;AACA;AATA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAfA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AA0BA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAHA;AAFA;AAAA;AACA;AADA;AAOA;AACA;AACA;AATA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA1BA;AAAA;AACA;AAoCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAHA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AANA;AAAA;AAAA;AAAA;AAAA;AAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;AACA;AACA;AALA;AAAA;AAAA;AAAA;AAAA;AAlBA;AAAA;AAAA;AAAA;AAAA;AA0BA;AAAA;AACA;AAAA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AAJA;AAMA;AACA;AACA;AACA;AACA;AALA;AAAA;AAAA;AAAA;AAAA;AALA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AACA;AAAA;AAAA;AACA;AAJA;AAMA;AACA;AACA;AACA;AACA;AALA;AAAA;AAAA;AAAA;AAAA;AALA;AAAA;AAAA;AAAA;AAAA;AAhBA;AAAA;AAAA;AAAA;AAAA;AAgCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AArCA;AAAA;AAAA;AAAA;AAAA;AA3BA;AAAA;AAAA;AAAA;AAAA;AAoEA;AACA;AACA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AARA;AAAA;AAAA;AACA;AADA;AAAA;AASA;AAAA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAQA;AACA;AACA;AACA;AADA;AAHA;AACA;AARA;AAGA;AACA;AAJA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AACA;AADA;AAAA;AAAA;AAoBA;AACA;AACA;AAtBA;AAAA;AAuBA;AAvBA;AACA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AATA;AAAA;AACA;AAmCA;AACA;;;;;;;;;;;;;;;;;;;;AC3KA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AADA;AAAA;AAAA;AAAA;AAAA;AAIA;;;;;;;;;;;;;;;;;;;;;;;AChBA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAMA;AAIA;AADA;AAKA;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAFA;AADA;AAFA;AAAA;AAAA;AAAA;AAAA;AAUA;;;;;;;;;;;ACrCA;;;;;;;;;;;ACAA;;;;;;;;;;;ACAA;;;;;;;;;;;ACAA;;;;;;;;;;;ACAA;;;;;;;;;;;ACAA;;;;A","sourceRoot":""} \ No newline at end of file diff --git a/build-old/client5.main.js b/build-old/client5.main.js new file mode 100644 index 0000000..d894321 --- /dev/null +++ b/build-old/client5.main.js @@ -0,0 +1,215 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["client5"],{ + +/***/ "./node_modules/@babel/runtime/helpers/esm/defineProperty.js": +/*!*******************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/defineProperty.js ***! + \*******************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _defineProperty; }); +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/esm/objectSpread2.js": +/*!******************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js ***! + \******************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _objectSpread2; }); +/* harmony import */ var _babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/defineProperty */ "./node_modules/@babel/runtime/helpers/esm/defineProperty.js"); + + +function ownKeys(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + if (enumerableOnly) symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + }); + keys.push.apply(keys, symbols); + } + + return keys; +} + +function _objectSpread2(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + + if (i % 2) { + ownKeys(Object(source), true).forEach(function (key) { + Object(_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__["default"])(target, key, source[key]); + }); + } else if (Object.getOwnPropertyDescriptors) { + Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); + } else { + ownKeys(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + } + + return target; +} + +/***/ }), + +/***/ "./src/SearchField.client.js": +/*!***********************************!*\ + !*** ./src/SearchField.client.js ***! + \***********************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return SearchField; }); +/* harmony import */ var _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/objectSpread2 */ "./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js"); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__); +/* harmony import */ var _LocationContext_client__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./LocationContext.client */ "./src/LocationContext.client.js"); +/* harmony import */ var _Spinner__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Spinner */ "./src/Spinner.js"); + + + +var _jsxFileName = "/Users/yin-shaochen/src/github.com/michenly/server-components-demo/src/SearchField.client.js"; + +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + + + +function SearchField() { + var _useState = Object(react__WEBPACK_IMPORTED_MODULE_3__["useState"])(''), + _useState2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_2__["default"])(_useState, 2), + text = _useState2[0], + setText = _useState2[1]; + + var _useTransition = Object(react__WEBPACK_IMPORTED_MODULE_3__["useTransition"])(), + _useTransition2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_2__["default"])(_useTransition, 2), + isSearching = _useTransition2[0], + startSearching = _useTransition2[1]; + + var _useLocation = Object(_LocationContext_client__WEBPACK_IMPORTED_MODULE_4__["useLocation"])(), + _useLocation2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_2__["default"])(_useLocation, 2), + setLocation = _useLocation2[1]; + + return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("form", { + className: "search", + role: "search", + onSubmit: function onSubmit(e) { + return e.preventDefault(); + }, + children: [/*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("label", { + className: "offscreen", + htmlFor: "sidebar-search-input", + children: "Search for a note by title" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 20, + columnNumber: 7 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("input", { + id: "sidebar-search-input", + placeholder: "Search", + value: text, + onChange: function onChange(e) { + var newText = e.target.value; + setText(newText); + startSearching(function () { + setLocation(function (loc) { + return Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__["default"])(Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__["default"])({}, loc), {}, { + searchText: newText + }); + }); + }); + } + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 23, + columnNumber: 7 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])(_Spinner__WEBPACK_IMPORTED_MODULE_5__["default"], { + active: isSearching + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 38, + columnNumber: 7 + }, this)] + }, void 0, true, { + fileName: _jsxFileName, + lineNumber: 19, + columnNumber: 5 + }, this); +} + +/***/ }), + +/***/ "./src/Spinner.js": +/*!************************!*\ + !*** ./src/Spinner.js ***! + \************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Spinner; }); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js"); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__); + +var _jsxFileName = "/Users/yin-shaochen/src/github.com/michenly/server-components-demo/src/Spinner.js"; + +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ +function Spinner(_ref) { + var _ref$active = _ref.active, + active = _ref$active === void 0 ? true : _ref$active; + return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("div", { + className: ['spinner', active && 'spinner--active'].join(' '), + role: "progressbar", + "aria-busy": active ? 'true' : 'false' + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 11, + columnNumber: 5 + }, this); +} + +/***/ }) + +}]); +//# sourceMappingURL=client5.main.js.map \ No newline at end of file diff --git a/build-old/client5.main.js.map b/build-old/client5.main.js.map new file mode 100644 index 0000000..78b903f --- /dev/null +++ b/build-old/client5.main.js.map @@ -0,0 +1 @@ +{"version":3,"file":"client5.main.js","sources":["webpack:///./node_modules/@babel/runtime/helpers/esm/defineProperty.js","webpack:///./node_modules/@babel/runtime/helpers/esm/objectSpread2.js","webpack:///./src/SearchField.client.js","webpack:///./src/Spinner.js"],"sourcesContent":["export default function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}","import defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\n\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n if (enumerableOnly) symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n });\n keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nexport default function _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i] != null ? arguments[i] : {};\n\n if (i % 2) {\n ownKeys(Object(source), true).forEach(function (key) {\n defineProperty(target, key, source[key]);\n });\n } else if (Object.getOwnPropertyDescriptors) {\n Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));\n } else {\n ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n }\n\n return target;\n}","/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport {useState, useTransition} from 'react';\n\nimport {useLocation} from './LocationContext.client';\nimport Spinner from './Spinner';\n\nexport default function SearchField() {\n const [text, setText] = useState('');\n const [isSearching, startSearching] = useTransition();\n const [, setLocation] = useLocation();\n return (\n
e.preventDefault()}>\n \n {\n const newText = e.target.value;\n setText(newText);\n startSearching(() => {\n setLocation((loc) => ({\n ...loc,\n searchText: newText,\n }));\n });\n }}\n />\n \n \n );\n}\n","/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nexport default function Spinner({active = true}) {\n return (\n \n );\n}\n"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;ACbA;AAAA;AAAA;AAAA;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;;;;;;;;;;;;;;;;;;;;;;;;;;;AClCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AAGA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAFA;AAAA;AAIA;AACA;AAbA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAnBA;AAAA;AAAA;AAAA;AAAA;AAsBA;;;;;;;;;;;;;;;;;;;ACxCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AAHA;AAAA;AAAA;AAAA;AAAA;AAMA;;;;A","sourceRoot":""} \ No newline at end of file diff --git a/build-old/client6.main.js b/build-old/client6.main.js new file mode 100644 index 0000000..a09e82c --- /dev/null +++ b/build-old/client6.main.js @@ -0,0 +1,131 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["client6"],{ + +/***/ "./src/SidebarNote.client.js": +/*!***********************************!*\ + !*** ./src/SidebarNote.client.js ***! + \***********************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return SidebarNote; }); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js"); +/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _LocationContext_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./LocationContext.client */ "./src/LocationContext.client.js"); + + +var _jsxFileName = "/Users/yin-shaochen/src/github.com/michenly/server-components-demo/src/SidebarNote.client.js"; + +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + + +function SidebarNote(_ref) { + var id = _ref.id, + title = _ref.title, + children = _ref.children, + expandedChildren = _ref.expandedChildren; + + var _useLocation = Object(_LocationContext_client__WEBPACK_IMPORTED_MODULE_3__["useLocation"])(), + _useLocation2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_1__["default"])(_useLocation, 2), + location = _useLocation2[0], + setLocation = _useLocation2[1]; + + var _useTransition = Object(react__WEBPACK_IMPORTED_MODULE_2__["useTransition"])(), + _useTransition2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_1__["default"])(_useTransition, 2), + isPending = _useTransition2[0], + startTransition = _useTransition2[1]; + + var _useState = Object(react__WEBPACK_IMPORTED_MODULE_2__["useState"])(false), + _useState2 = Object(_Users_yin_shaochen_src_github.com_michenly_server_components_demo_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_1__["default"])(_useState, 2), + isExpanded = _useState2[0], + setIsExpanded = _useState2[1]; + + var isActive = id === location.selectedId; // Animate after title is edited. + + var itemRef = Object(react__WEBPACK_IMPORTED_MODULE_2__["useRef"])(null); + var prevTitleRef = Object(react__WEBPACK_IMPORTED_MODULE_2__["useRef"])(title); + Object(react__WEBPACK_IMPORTED_MODULE_2__["useEffect"])(function () { + if (title !== prevTitleRef.current) { + prevTitleRef.current = title; + itemRef.current.classList.add('flash'); + } + }, [title]); + return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("div", { + ref: itemRef, + onAnimationEnd: function onAnimationEnd() { + itemRef.current.classList.remove('flash'); + }, + className: ['sidebar-note-list-item', isExpanded ? 'note-expanded' : ''].join(' '), + children: [children, /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("button", { + className: "sidebar-note-open", + style: { + backgroundColor: isPending ? 'var(--gray-80)' : isActive ? 'var(--tertiary-blue)' : '', + border: isActive ? '1px solid var(--primary-border)' : '1px solid transparent' + }, + onClick: function onClick() { + startTransition(function () { + setLocation(function (loc) { + return { + selectedId: id, + isEditing: false, + searchText: loc.searchText + }; + }); + }); + }, + children: "Open note for preview" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 40, + columnNumber: 7 + }, this), /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("button", { + className: "sidebar-note-toggle-expand", + onClick: function onClick(e) { + e.stopPropagation(); + setIsExpanded(!isExpanded); + }, + children: isExpanded ? /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("img", { + src: "chevron-down.svg", + width: "10px", + height: "10px", + alt: "Collapse" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 70, + columnNumber: 11 + }, this) : /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("img", { + src: "chevron-up.svg", + width: "10px", + height: "10px", + alt: "Expand" + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 77, + columnNumber: 11 + }, this) + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 63, + columnNumber: 7 + }, this), isExpanded && expandedChildren] + }, void 0, true, { + fileName: _jsxFileName, + lineNumber: 30, + columnNumber: 5 + }, this); +} + +/***/ }) + +}]); +//# sourceMappingURL=client6.main.js.map \ No newline at end of file diff --git a/build-old/client6.main.js.map b/build-old/client6.main.js.map new file mode 100644 index 0000000..fae01fd --- /dev/null +++ b/build-old/client6.main.js.map @@ -0,0 +1 @@ +{"version":3,"file":"client6.main.js","sources":["webpack:///./src/SidebarNote.client.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport {useState, useRef, useEffect, useTransition} from 'react';\n\nimport {useLocation} from './LocationContext.client';\n\nexport default function SidebarNote({id, title, children, expandedChildren}) {\n const [location, setLocation] = useLocation();\n const [isPending, startTransition] = useTransition();\n const [isExpanded, setIsExpanded] = useState(false);\n const isActive = id === location.selectedId;\n\n // Animate after title is edited.\n const itemRef = useRef(null);\n const prevTitleRef = useRef(title);\n useEffect(() => {\n if (title !== prevTitleRef.current) {\n prevTitleRef.current = title;\n itemRef.current.classList.add('flash');\n }\n }, [title]);\n\n return (\n {\n itemRef.current.classList.remove('flash');\n }}\n className={[\n 'sidebar-note-list-item',\n isExpanded ? 'note-expanded' : '',\n ].join(' ')}>\n {children}\n {\n startTransition(() => {\n setLocation((loc) => ({\n selectedId: id,\n isEditing: false,\n searchText: loc.searchText,\n }));\n });\n }}>\n Open note for preview\n \n {\n e.stopPropagation();\n setIsExpanded(!isExpanded);\n }}>\n {isExpanded ? (\n \n ) : (\n \"Expand\"\n )}\n \n {isExpanded && expandedChildren}\n \n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AAGA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AALA;AAWA;AACA;AACA;AAKA;AANA;AAUA;AACA;AACA;AAAA;AACA;AACA;AACA;AAHA;AAAA;AAKA;AACA;AApBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AACA;AACA;AACA;AALA;AAQA;AACA;AACA;AACA;AAJA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAdA;AAAA;AAAA;AAAA;AAAA;AAjCA;AAAA;AAAA;AAAA;AAAA;AAqDA;;;;A","sourceRoot":""} \ No newline at end of file diff --git a/build-old/index.html b/build-old/index.html new file mode 100644 index 0000000..590848d --- /dev/null +++ b/build-old/index.html @@ -0,0 +1,32 @@ + + + + + + + + React Notes + + +
+ + + diff --git a/build-old/main.js b/build-old/main.js new file mode 100644 index 0000000..a6ef946 --- /dev/null +++ b/build-old/main.js @@ -0,0 +1,35391 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // install a JSONP callback for chunk loading +/******/ function webpackJsonpCallback(data) { +/******/ var chunkIds = data[0]; +/******/ var moreModules = data[1]; +/******/ +/******/ +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0, resolves = []; +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) { +/******/ resolves.push(installedChunks[chunkId][0]); +/******/ } +/******/ installedChunks[chunkId] = 0; +/******/ } +/******/ for(moduleId in moreModules) { +/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { +/******/ modules[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(parentJsonpFunction) parentJsonpFunction(data); +/******/ +/******/ while(resolves.length) { +/******/ resolves.shift()(); +/******/ } +/******/ +/******/ }; +/******/ +/******/ +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // Promise = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ "main": 0 +/******/ }; +/******/ +/******/ +/******/ +/******/ // script path function +/******/ function jsonpScriptSrc(chunkId) { +/******/ return __webpack_require__.p + "" + chunkId + ".main.js" +/******/ } +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // This file contains only the entry chunk. +/******/ // The chunk loading function for additional chunks +/******/ __webpack_require__.e = function requireEnsure(chunkId) { +/******/ var promises = []; +/******/ +/******/ +/******/ // JSONP chunk loading for javascript +/******/ +/******/ var installedChunkData = installedChunks[chunkId]; +/******/ if(installedChunkData !== 0) { // 0 means "already installed". +/******/ +/******/ // a Promise means "currently loading". +/******/ if(installedChunkData) { +/******/ promises.push(installedChunkData[2]); +/******/ } else { +/******/ // setup Promise in chunk cache +/******/ var promise = new Promise(function(resolve, reject) { +/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; +/******/ }); +/******/ promises.push(installedChunkData[2] = promise); +/******/ +/******/ // start chunk loading +/******/ var script = document.createElement('script'); +/******/ var onScriptComplete; +/******/ +/******/ script.charset = 'utf-8'; +/******/ script.timeout = 120; +/******/ if (__webpack_require__.nc) { +/******/ script.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ script.src = jsonpScriptSrc(chunkId); +/******/ +/******/ // create error before stack unwound to get useful stacktrace later +/******/ var error = new Error(); +/******/ onScriptComplete = function (event) { +/******/ // avoid mem leaks in IE. +/******/ script.onerror = script.onload = null; +/******/ clearTimeout(timeout); +/******/ var chunk = installedChunks[chunkId]; +/******/ if(chunk !== 0) { +/******/ if(chunk) { +/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); +/******/ var realSrc = event && event.target && event.target.src; +/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; +/******/ error.name = 'ChunkLoadError'; +/******/ error.type = errorType; +/******/ error.request = realSrc; +/******/ chunk[1](error); +/******/ } +/******/ installedChunks[chunkId] = undefined; +/******/ } +/******/ }; +/******/ var timeout = setTimeout(function(){ +/******/ onScriptComplete({ type: 'timeout', target: script }); +/******/ }, 120000); +/******/ script.onerror = script.onload = onScriptComplete; +/******/ document.head.appendChild(script); +/******/ } +/******/ } +/******/ return Promise.all(promises); +/******/ }; +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // on error function for async loading +/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; +/******/ +/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; +/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); +/******/ jsonpArray.push = webpackJsonpCallback; +/******/ jsonpArray = jsonpArray.slice(); +/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); +/******/ var parentJsonpFunction = oldJsonpFunction; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 0); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js": +/*!*********************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js ***! + \*********************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _arrayLikeToArray; }); +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; + } + + return arr2; +} + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js": +/*!*******************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js ***! + \*******************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _arrayWithHoles; }); +function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; +} + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js": +/*!*************************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js ***! + \*************************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _iterableToArrayLimit; }); +function _iterableToArrayLimit(arr, i) { + if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; +} + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/esm/nonIterableRest.js": +/*!********************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/nonIterableRest.js ***! + \********************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _nonIterableRest; }); +function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js": +/*!******************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js ***! + \******************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _slicedToArray; }); +/* harmony import */ var _babel_runtime_helpers_esm_arrayWithHoles__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/arrayWithHoles */ "./node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js"); +/* harmony import */ var _babel_runtime_helpers_esm_iterableToArrayLimit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/iterableToArrayLimit */ "./node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js"); +/* harmony import */ var _babel_runtime_helpers_esm_unsupportedIterableToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/esm/unsupportedIterableToArray */ "./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js"); +/* harmony import */ var _babel_runtime_helpers_esm_nonIterableRest__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/esm/nonIterableRest */ "./node_modules/@babel/runtime/helpers/esm/nonIterableRest.js"); + + + + +function _slicedToArray(arr, i) { + return Object(_babel_runtime_helpers_esm_arrayWithHoles__WEBPACK_IMPORTED_MODULE_0__["default"])(arr) || Object(_babel_runtime_helpers_esm_iterableToArrayLimit__WEBPACK_IMPORTED_MODULE_1__["default"])(arr, i) || Object(_babel_runtime_helpers_esm_unsupportedIterableToArray__WEBPACK_IMPORTED_MODULE_2__["default"])(arr, i) || Object(_babel_runtime_helpers_esm_nonIterableRest__WEBPACK_IMPORTED_MODULE_3__["default"])(); +} + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js": +/*!*******************************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js ***! + \*******************************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _unsupportedIterableToArray; }); +/* harmony import */ var _babel_runtime_helpers_esm_arrayLikeToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/arrayLikeToArray */ "./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js"); + +function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return Object(_babel_runtime_helpers_esm_arrayLikeToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return Object(_babel_runtime_helpers_esm_arrayLikeToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(o, minLen); +} + +/***/ }), + +/***/ "./node_modules/object-assign/index.js": +/*!*********************************************!*\ + !*** ./node_modules/object-assign/index.js ***! + \*********************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/* +object-assign +(c) Sindre Sorhus +@license MIT +*/ + + +/* eslint-disable no-unused-vars */ +var getOwnPropertySymbols = Object.getOwnPropertySymbols; +var hasOwnProperty = Object.prototype.hasOwnProperty; +var propIsEnumerable = Object.prototype.propertyIsEnumerable; + +function toObject(val) { + if (val === null || val === undefined) { + throw new TypeError('Object.assign cannot be called with null or undefined'); + } + + return Object(val); +} + +function shouldUseNative() { + try { + if (!Object.assign) { + return false; + } + + // Detect buggy property enumeration order in older V8 versions. + + // https://bugs.chromium.org/p/v8/issues/detail?id=4118 + var test1 = new String('abc'); // eslint-disable-line no-new-wrappers + test1[5] = 'de'; + if (Object.getOwnPropertyNames(test1)[0] === '5') { + return false; + } + + // https://bugs.chromium.org/p/v8/issues/detail?id=3056 + var test2 = {}; + for (var i = 0; i < 10; i++) { + test2['_' + String.fromCharCode(i)] = i; + } + var order2 = Object.getOwnPropertyNames(test2).map(function (n) { + return test2[n]; + }); + if (order2.join('') !== '0123456789') { + return false; + } + + // https://bugs.chromium.org/p/v8/issues/detail?id=3056 + var test3 = {}; + 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { + test3[letter] = letter; + }); + if (Object.keys(Object.assign({}, test3)).join('') !== + 'abcdefghijklmnopqrst') { + return false; + } + + return true; + } catch (err) { + // We don't expect any of the above to throw, but better to be safe. + return false; + } +} + +module.exports = shouldUseNative() ? Object.assign : function (target, source) { + var from; + var to = toObject(target); + var symbols; + + for (var s = 1; s < arguments.length; s++) { + from = Object(arguments[s]); + + for (var key in from) { + if (hasOwnProperty.call(from, key)) { + to[key] = from[key]; + } + } + + if (getOwnPropertySymbols) { + symbols = getOwnPropertySymbols(from); + for (var i = 0; i < symbols.length; i++) { + if (propIsEnumerable.call(from, symbols[i])) { + to[symbols[i]] = from[symbols[i]]; + } + } + } + } + + return to; +}; + + +/***/ }), + +/***/ "./node_modules/process/browser.js": +/*!*****************************************!*\ + !*** ./node_modules/process/browser.js ***! + \*****************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +// shim for using process in browser +var process = module.exports = {}; + +// cached from whatever global is present so that test runners that stub it +// don't break things. But we need to wrap it in a try catch in case it is +// wrapped in strict mode code which doesn't define any globals. It's inside a +// function because try/catches deoptimize in certain engines. + +var cachedSetTimeout; +var cachedClearTimeout; + +function defaultSetTimout() { + throw new Error('setTimeout has not been defined'); +} +function defaultClearTimeout () { + throw new Error('clearTimeout has not been defined'); +} +(function () { + try { + if (typeof setTimeout === 'function') { + cachedSetTimeout = setTimeout; + } else { + cachedSetTimeout = defaultSetTimout; + } + } catch (e) { + cachedSetTimeout = defaultSetTimout; + } + try { + if (typeof clearTimeout === 'function') { + cachedClearTimeout = clearTimeout; + } else { + cachedClearTimeout = defaultClearTimeout; + } + } catch (e) { + cachedClearTimeout = defaultClearTimeout; + } +} ()) +function runTimeout(fun) { + if (cachedSetTimeout === setTimeout) { + //normal enviroments in sane situations + return setTimeout(fun, 0); + } + // if setTimeout wasn't available but was latter defined + if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) { + cachedSetTimeout = setTimeout; + return setTimeout(fun, 0); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedSetTimeout(fun, 0); + } catch(e){ + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedSetTimeout.call(null, fun, 0); + } catch(e){ + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error + return cachedSetTimeout.call(this, fun, 0); + } + } + + +} +function runClearTimeout(marker) { + if (cachedClearTimeout === clearTimeout) { + //normal enviroments in sane situations + return clearTimeout(marker); + } + // if clearTimeout wasn't available but was latter defined + if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) { + cachedClearTimeout = clearTimeout; + return clearTimeout(marker); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedClearTimeout(marker); + } catch (e){ + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedClearTimeout.call(null, marker); + } catch (e){ + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error. + // Some versions of I.E. have different rules for clearTimeout vs setTimeout + return cachedClearTimeout.call(this, marker); + } + } + + + +} +var queue = []; +var draining = false; +var currentQueue; +var queueIndex = -1; + +function cleanUpNextTick() { + if (!draining || !currentQueue) { + return; + } + draining = false; + if (currentQueue.length) { + queue = currentQueue.concat(queue); + } else { + queueIndex = -1; + } + if (queue.length) { + drainQueue(); + } +} + +function drainQueue() { + if (draining) { + return; + } + var timeout = runTimeout(cleanUpNextTick); + draining = true; + + var len = queue.length; + while(len) { + currentQueue = queue; + queue = []; + while (++queueIndex < len) { + if (currentQueue) { + currentQueue[queueIndex].run(); + } + } + queueIndex = -1; + len = queue.length; + } + currentQueue = null; + draining = false; + runClearTimeout(timeout); +} + +process.nextTick = function (fun) { + var args = new Array(arguments.length - 1); + if (arguments.length > 1) { + for (var i = 1; i < arguments.length; i++) { + args[i - 1] = arguments[i]; + } + } + queue.push(new Item(fun, args)); + if (queue.length === 1 && !draining) { + runTimeout(drainQueue); + } +}; + +// v8 likes predictible objects +function Item(fun, array) { + this.fun = fun; + this.array = array; +} +Item.prototype.run = function () { + this.fun.apply(null, this.array); +}; +process.title = 'browser'; +process.browser = true; +process.env = {}; +process.argv = []; +process.version = ''; // empty string to avoid regexp issues +process.versions = {}; + +function noop() {} + +process.on = noop; +process.addListener = noop; +process.once = noop; +process.off = noop; +process.removeListener = noop; +process.removeAllListeners = noop; +process.emit = noop; +process.prependListener = noop; +process.prependOnceListener = noop; + +process.listeners = function (name) { return [] } + +process.binding = function (name) { + throw new Error('process.binding is not supported'); +}; + +process.cwd = function () { return '/' }; +process.chdir = function (dir) { + throw new Error('process.chdir is not supported'); +}; +process.umask = function() { return 0; }; + + +/***/ }), + +/***/ "./node_modules/react-dom/cjs/react-dom.development.js": +/*!*************************************************************!*\ + !*** ./node_modules/react-dom/cjs/react-dom.development.js ***! + \*************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/** @license React vundefined + * react-dom.development.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + + +if (true) { + (function() { +'use strict'; + +var React = __webpack_require__(/*! react */ "./node_modules/react/index.js"); +var _assign = __webpack_require__(/*! object-assign */ "./node_modules/object-assign/index.js"); +var Scheduler = __webpack_require__(/*! scheduler */ "./node_modules/scheduler/index.js"); + +var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + +// by calls to these methods by a Babel plugin. +// +// In PROD (or in packages without access to React internals), +// they are left as they are instead. + +function warn(format) { + { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + printWarning('warn', format, args); + } +} +function error(format) { + { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + + printWarning('error', format, args); + } +} + +function printWarning(level, format, args) { + // When changing this logic, you might want to also + // update consoleWithStackDev.www.js as well. + { + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var stack = ReactDebugCurrentFrame.getStackAddendum(); + + if (stack !== '') { + format += '%s'; + args = args.concat([stack]); + } + + var argsWithFormat = args.map(function (item) { + return '' + item; + }); // Careful: RN currently depends on this prefix + + argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it + // breaks IE9: https://github.com/facebook/react/issues/13610 + // eslint-disable-next-line react-internal/no-production-logging + + Function.prototype.apply.call(console[level], console, argsWithFormat); + } +} + +var FunctionComponent = 0; +var ClassComponent = 1; +var IndeterminateComponent = 2; // Before we know whether it is function or class + +var HostRoot = 3; // Root of a host tree. Could be nested inside another node. + +var HostPortal = 4; // A subtree. Could be an entry point to a different renderer. + +var HostComponent = 5; +var HostText = 6; +var Fragment = 7; +var Mode = 8; +var ContextConsumer = 9; +var ContextProvider = 10; +var ForwardRef = 11; +var Profiler = 12; +var SuspenseComponent = 13; +var MemoComponent = 14; +var SimpleMemoComponent = 15; +var LazyComponent = 16; +var IncompleteClassComponent = 17; +var DehydratedFragment = 18; +var SuspenseListComponent = 19; +var ScopeComponent = 21; +var OffscreenComponent = 22; +var LegacyHiddenComponent = 23; +var CacheComponent = 24; + +// Filter certain DOM attributes (e.g. src, href) if their values are empty strings. + +var enableProfilerTimer = true; // Record durations for commit and passive effects phases. + +var enableProfilerCommitHooks = true; // Phase param passed to onRender callback differentiates between an "update" and a "cascading-update". +var enableNewReconciler = false; +var warnAboutStringRefs = false; +var enableLazyContextPropagation = false; + +var allNativeEvents = new Set(); +/** + * Mapping from registration name to event name + */ + + +var registrationNameDependencies = {}; +/** + * Mapping from lowercase registration names to the properly cased version, + * used to warn in the case of missing event handlers. Available + * only in true. + * @type {Object} + */ + +var possibleRegistrationNames = {} ; // Trust the developer to only use possibleRegistrationNames in true + +function registerTwoPhaseEvent(registrationName, dependencies) { + registerDirectEvent(registrationName, dependencies); + registerDirectEvent(registrationName + 'Capture', dependencies); +} +function registerDirectEvent(registrationName, dependencies) { + { + if (registrationNameDependencies[registrationName]) { + error('EventRegistry: More than one plugin attempted to publish the same ' + 'registration name, `%s`.', registrationName); + } + } + + registrationNameDependencies[registrationName] = dependencies; + + { + var lowerCasedName = registrationName.toLowerCase(); + possibleRegistrationNames[lowerCasedName] = registrationName; + + if (registrationName === 'onDoubleClick') { + possibleRegistrationNames.ondblclick = registrationName; + } + } + + for (var i = 0; i < dependencies.length; i++) { + allNativeEvents.add(dependencies[i]); + } +} + +var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined'); + +var hasOwnProperty = Object.prototype.hasOwnProperty; + +// A reserved attribute. +// It is handled by React separately and shouldn't be written to the DOM. +var RESERVED = 0; // A simple string attribute. +// Attributes that aren't in the filter are presumed to have this type. + +var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called +// "enumerated" attributes with "true" and "false" as possible values. +// When true, it should be set to a "true" string. +// When false, it should be set to a "false" string. + +var BOOLEANISH_STRING = 2; // A real boolean attribute. +// When true, it should be present (set either to an empty string or its name). +// When false, it should be omitted. + +var BOOLEAN = 3; // An attribute that can be used as a flag as well as with a value. +// When true, it should be present (set either to an empty string or its name). +// When false, it should be omitted. +// For any other value, should be present with that value. + +var OVERLOADED_BOOLEAN = 4; // An attribute that must be numeric or parse as a numeric. +// When falsy, it should be removed. + +var NUMERIC = 5; // An attribute that must be positive numeric or parse as a positive numeric. +// When falsy, it should be removed. + +var POSITIVE_NUMERIC = 6; + +/* eslint-disable max-len */ +var ATTRIBUTE_NAME_START_CHAR = ":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD"; +/* eslint-enable max-len */ + +var ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + "\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040"; +var VALID_ATTRIBUTE_NAME_REGEX = new RegExp('^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$'); +var illegalAttributeNameCache = {}; +var validatedAttributeNameCache = {}; +function isAttributeNameSafe(attributeName) { + if (hasOwnProperty.call(validatedAttributeNameCache, attributeName)) { + return true; + } + + if (hasOwnProperty.call(illegalAttributeNameCache, attributeName)) { + return false; + } + + if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) { + validatedAttributeNameCache[attributeName] = true; + return true; + } + + illegalAttributeNameCache[attributeName] = true; + + { + error('Invalid attribute name: `%s`', attributeName); + } + + return false; +} +function shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag) { + if (propertyInfo !== null) { + return propertyInfo.type === RESERVED; + } + + if (isCustomComponentTag) { + return false; + } + + if (name.length > 2 && (name[0] === 'o' || name[0] === 'O') && (name[1] === 'n' || name[1] === 'N')) { + return true; + } + + return false; +} +function shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag) { + if (propertyInfo !== null && propertyInfo.type === RESERVED) { + return false; + } + + switch (typeof value) { + case 'function': // $FlowIssue symbol is perfectly valid here + + case 'symbol': + // eslint-disable-line + return true; + + case 'boolean': + { + if (isCustomComponentTag) { + return false; + } + + if (propertyInfo !== null) { + return !propertyInfo.acceptsBooleans; + } else { + var prefix = name.toLowerCase().slice(0, 5); + return prefix !== 'data-' && prefix !== 'aria-'; + } + } + + default: + return false; + } +} +function shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag) { + if (value === null || typeof value === 'undefined') { + return true; + } + + if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag)) { + return true; + } + + if (isCustomComponentTag) { + return false; + } + + if (propertyInfo !== null) { + + switch (propertyInfo.type) { + case BOOLEAN: + return !value; + + case OVERLOADED_BOOLEAN: + return value === false; + + case NUMERIC: + return isNaN(value); + + case POSITIVE_NUMERIC: + return isNaN(value) || value < 1; + } + } + + return false; +} +function getPropertyInfo(name) { + return properties.hasOwnProperty(name) ? properties[name] : null; +} + +function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL, removeEmptyString) { + this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN; + this.attributeName = attributeName; + this.attributeNamespace = attributeNamespace; + this.mustUseProperty = mustUseProperty; + this.propertyName = name; + this.type = type; + this.sanitizeURL = sanitizeURL; + this.removeEmptyString = removeEmptyString; +} // When adding attributes to this list, be sure to also add them to +// the `possibleStandardNames` module to ensure casing and incorrect +// name warnings. + + +var properties = {}; // These props are reserved by React. They shouldn't be written to the DOM. + +var reservedProps = ['children', 'dangerouslySetInnerHTML', // TODO: This prevents the assignment of defaultValue to regular +// elements (not just inputs). Now that ReactDOMInput assigns to the +// defaultValue property -- do we need this? +'defaultValue', 'defaultChecked', 'innerHTML', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'style']; +reservedProps.forEach(function (name) { + properties[name] = new PropertyInfoRecord(name, RESERVED, false, // mustUseProperty + name, // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // A few React string attributes have a different name. +// This is a mapping from React prop names to the attribute names. + +[['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor', 'for'], ['httpEquiv', 'http-equiv']].forEach(function (_ref) { + var name = _ref[0], + attributeName = _ref[1]; + properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty + attributeName, // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // These are "enumerated" HTML attributes that accept "true" and "false". +// In React, we let users pass `true` and `false` even though technically +// these aren't boolean attributes (they are coerced to strings). + +['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (name) { + properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty + name.toLowerCase(), // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // These are "enumerated" SVG attributes that accept "true" and "false". +// In React, we let users pass `true` and `false` even though technically +// these aren't boolean attributes (they are coerced to strings). +// Since these are SVG attributes, their attribute names are case-sensitive. + +['autoReverse', 'externalResourcesRequired', 'focusable', 'preserveAlpha'].forEach(function (name) { + properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty + name, // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // These are HTML boolean attributes. + +['allowFullScreen', 'async', // Note: there is a special case that prevents it from being written to the DOM +// on the client side because the browsers are inconsistent. Instead we call focus(). +'autoFocus', 'autoPlay', 'controls', 'default', 'defer', 'disabled', 'disablePictureInPicture', 'disableRemotePlayback', 'formNoValidate', 'hidden', 'loop', 'noModule', 'noValidate', 'open', 'playsInline', 'readOnly', 'required', 'reversed', 'scoped', 'seamless', // Microdata +'itemScope'].forEach(function (name) { + properties[name] = new PropertyInfoRecord(name, BOOLEAN, false, // mustUseProperty + name.toLowerCase(), // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // These are the few React props that we set as DOM properties +// rather than attributes. These are all booleans. + +['checked', // Note: `option.selected` is not updated if `select.multiple` is +// disabled with `removeAttribute`. We have special logic for handling this. +'multiple', 'muted', 'selected' // NOTE: if you add a camelCased prop to this list, +// you'll need to set attributeName to name.toLowerCase() +// instead in the assignment below. +].forEach(function (name) { + properties[name] = new PropertyInfoRecord(name, BOOLEAN, true, // mustUseProperty + name, // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // These are HTML attributes that are "overloaded booleans": they behave like +// booleans, but can also accept a string value. + +['capture', 'download' // NOTE: if you add a camelCased prop to this list, +// you'll need to set attributeName to name.toLowerCase() +// instead in the assignment below. +].forEach(function (name) { + properties[name] = new PropertyInfoRecord(name, OVERLOADED_BOOLEAN, false, // mustUseProperty + name, // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // These are HTML attributes that must be positive numbers. + +['cols', 'rows', 'size', 'span' // NOTE: if you add a camelCased prop to this list, +// you'll need to set attributeName to name.toLowerCase() +// instead in the assignment below. +].forEach(function (name) { + properties[name] = new PropertyInfoRecord(name, POSITIVE_NUMERIC, false, // mustUseProperty + name, // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // These are HTML attributes that must be numbers. + +['rowSpan', 'start'].forEach(function (name) { + properties[name] = new PropertyInfoRecord(name, NUMERIC, false, // mustUseProperty + name.toLowerCase(), // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); +var CAMELIZE = /[\-\:]([a-z])/g; + +var capitalize = function (token) { + return token[1].toUpperCase(); +}; // This is a list of all SVG attributes that need special casing, namespacing, +// or boolean value assignment. Regular attributes that just accept strings +// and have the same names are omitted, just like in the HTML attribute filter. +// Some of these attributes can be hard to find. This list was created by +// scraping the MDN documentation. + + +['accent-height', 'alignment-baseline', 'arabic-form', 'baseline-shift', 'cap-height', 'clip-path', 'clip-rule', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'dominant-baseline', 'enable-background', 'fill-opacity', 'fill-rule', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-name', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'horiz-adv-x', 'horiz-origin-x', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start', 'overline-position', 'overline-thickness', 'paint-order', 'panose-1', 'pointer-events', 'rendering-intent', 'shape-rendering', 'stop-color', 'stop-opacity', 'strikethrough-position', 'strikethrough-thickness', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration', 'text-rendering', 'underline-position', 'underline-thickness', 'unicode-bidi', 'unicode-range', 'units-per-em', 'v-alphabetic', 'v-hanging', 'v-ideographic', 'v-mathematical', 'vector-effect', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'word-spacing', 'writing-mode', 'xmlns:xlink', 'x-height' // NOTE: if you add a camelCased prop to this list, +// you'll need to set attributeName to name.toLowerCase() +// instead in the assignment below. +].forEach(function (attributeName) { + var name = attributeName.replace(CAMELIZE, capitalize); + properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty + attributeName, null, // attributeNamespace + false, // sanitizeURL + false); +}); // String SVG attributes with the xlink namespace. + +['xlink:actuate', 'xlink:arcrole', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type' // NOTE: if you add a camelCased prop to this list, +// you'll need to set attributeName to name.toLowerCase() +// instead in the assignment below. +].forEach(function (attributeName) { + var name = attributeName.replace(CAMELIZE, capitalize); + properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty + attributeName, 'http://www.w3.org/1999/xlink', false, // sanitizeURL + false); +}); // String SVG attributes with the xml namespace. + +['xml:base', 'xml:lang', 'xml:space' // NOTE: if you add a camelCased prop to this list, +// you'll need to set attributeName to name.toLowerCase() +// instead in the assignment below. +].forEach(function (attributeName) { + var name = attributeName.replace(CAMELIZE, capitalize); + properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty + attributeName, 'http://www.w3.org/XML/1998/namespace', false, // sanitizeURL + false); +}); // These attribute exists both in HTML and SVG. +// The attribute name is case-sensitive in SVG so we can't just use +// the React name like we do for attributes that exist only in HTML. + +['tabIndex', 'crossOrigin'].forEach(function (attributeName) { + properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty + attributeName.toLowerCase(), // attributeName + null, // attributeNamespace + false, // sanitizeURL + false); +}); // These attributes accept URLs. These must not allow javascript: URLS. +// These will also need to accept Trusted Types object in the future. + +var xlinkHref = 'xlinkHref'; +properties[xlinkHref] = new PropertyInfoRecord('xlinkHref', STRING, false, // mustUseProperty +'xlink:href', 'http://www.w3.org/1999/xlink', true, // sanitizeURL +false); +['src', 'href', 'action', 'formAction'].forEach(function (attributeName) { + properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty + attributeName.toLowerCase(), // attributeName + null, // attributeNamespace + true, // sanitizeURL + true); +}); + +// and any newline or tab are filtered out as if they're not part of the URL. +// https://url.spec.whatwg.org/#url-parsing +// Tab or newline are defined as \r\n\t: +// https://infra.spec.whatwg.org/#ascii-tab-or-newline +// A C0 control is a code point in the range \u0000 NULL to \u001F +// INFORMATION SEPARATOR ONE, inclusive: +// https://infra.spec.whatwg.org/#c0-control-or-space + +/* eslint-disable max-len */ + +var isJavaScriptProtocol = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i; +var didWarn = false; + +function sanitizeURL(url) { + { + if (!didWarn && isJavaScriptProtocol.test(url)) { + didWarn = true; + + error('A future version of React will block javascript: URLs as a security precaution. ' + 'Use event handlers instead if you can. If you need to generate unsafe HTML try ' + 'using dangerouslySetInnerHTML instead. React was passed %s.', JSON.stringify(url)); + } + } +} + +/** + * Get the value for a property on a node. Only used in DEV for SSR validation. + * The "expected" argument is used as a hint of what the expected value is. + * Some properties have multiple equivalent values. + */ +function getValueForProperty(node, name, expected, propertyInfo) { + { + if (propertyInfo.mustUseProperty) { + var propertyName = propertyInfo.propertyName; + return node[propertyName]; + } else { + if ( propertyInfo.sanitizeURL) { + // If we haven't fully disabled javascript: URLs, and if + // the hydration is successful of a javascript: URL, we + // still want to warn on the client. + sanitizeURL('' + expected); + } + + var attributeName = propertyInfo.attributeName; + var stringValue = null; + + if (propertyInfo.type === OVERLOADED_BOOLEAN) { + if (node.hasAttribute(attributeName)) { + var value = node.getAttribute(attributeName); + + if (value === '') { + return true; + } + + if (shouldRemoveAttribute(name, expected, propertyInfo, false)) { + return value; + } + + if (value === '' + expected) { + return expected; + } + + return value; + } + } else if (node.hasAttribute(attributeName)) { + if (shouldRemoveAttribute(name, expected, propertyInfo, false)) { + // We had an attribute but shouldn't have had one, so read it + // for the error message. + return node.getAttribute(attributeName); + } + + if (propertyInfo.type === BOOLEAN) { + // If this was a boolean, it doesn't matter what the value is + // the fact that we have it is the same as the expected. + return expected; + } // Even if this property uses a namespace we use getAttribute + // because we assume its namespaced name is the same as our config. + // To use getAttributeNS we need the local name which we don't have + // in our config atm. + + + stringValue = node.getAttribute(attributeName); + } + + if (shouldRemoveAttribute(name, expected, propertyInfo, false)) { + return stringValue === null ? expected : stringValue; + } else if (stringValue === '' + expected) { + return expected; + } else { + return stringValue; + } + } + } +} +/** + * Get the value for a attribute on a node. Only used in DEV for SSR validation. + * The third argument is used as a hint of what the expected value is. Some + * attributes have multiple equivalent values. + */ + +function getValueForAttribute(node, name, expected) { + { + if (!isAttributeNameSafe(name)) { + return; + } // If the object is an opaque reference ID, it's expected that + // the next prop is different than the server value, so just return + // expected + + + if (isOpaqueHydratingObject(expected)) { + return expected; + } + + if (!node.hasAttribute(name)) { + return expected === undefined ? undefined : null; + } + + var value = node.getAttribute(name); + + if (value === '' + expected) { + return expected; + } + + return value; + } +} +/** + * Sets the value for a property on a node. + * + * @param {DOMElement} node + * @param {string} name + * @param {*} value + */ + +function setValueForProperty(node, name, value, isCustomComponentTag) { + var propertyInfo = getPropertyInfo(name); + + if (shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag)) { + return; + } + + if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) { + value = null; + } // If the prop isn't in the special list, treat it as a simple attribute. + + + if (isCustomComponentTag || propertyInfo === null) { + if (isAttributeNameSafe(name)) { + var _attributeName = name; + + if (value === null) { + node.removeAttribute(_attributeName); + } else { + node.setAttribute(_attributeName, '' + value); + } + } + + return; + } + + var mustUseProperty = propertyInfo.mustUseProperty; + + if (mustUseProperty) { + var propertyName = propertyInfo.propertyName; + + if (value === null) { + var type = propertyInfo.type; + node[propertyName] = type === BOOLEAN ? false : ''; + } else { + // Contrary to `setAttribute`, object properties are properly + // `toString`ed by IE8/9. + node[propertyName] = value; + } + + return; + } // The rest are treated as attributes with special cases. + + + var attributeName = propertyInfo.attributeName, + attributeNamespace = propertyInfo.attributeNamespace; + + if (value === null) { + node.removeAttribute(attributeName); + } else { + var _type = propertyInfo.type; + var attributeValue; + + if (_type === BOOLEAN || _type === OVERLOADED_BOOLEAN && value === true) { + // If attribute type is boolean, we know for sure it won't be an execution sink + // and we won't require Trusted Type here. + attributeValue = ''; + } else { + // `setAttribute` with objects becomes only `[object]` in IE8/9, + // ('' + value) makes it output the correct toString()-value. + { + attributeValue = '' + value; + } + + if (propertyInfo.sanitizeURL) { + sanitizeURL(attributeValue.toString()); + } + } + + if (attributeNamespace) { + node.setAttributeNS(attributeNamespace, attributeName, attributeValue); + } else { + node.setAttribute(attributeName, attributeValue); + } + } +} + +// ATTENTION +// When adding new symbols to this file, +// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols' +// The Symbol used to tag the ReactElement-like types. If there is no native Symbol +// nor polyfill, then a plain number is used for performance. +var REACT_ELEMENT_TYPE = 0xeac7; +var REACT_PORTAL_TYPE = 0xeaca; +var REACT_FRAGMENT_TYPE = 0xeacb; +var REACT_STRICT_MODE_TYPE = 0xeacc; +var REACT_PROFILER_TYPE = 0xead2; +var REACT_PROVIDER_TYPE = 0xeacd; +var REACT_CONTEXT_TYPE = 0xeace; +var REACT_FORWARD_REF_TYPE = 0xead0; +var REACT_SUSPENSE_TYPE = 0xead1; +var REACT_SUSPENSE_LIST_TYPE = 0xead8; +var REACT_MEMO_TYPE = 0xead3; +var REACT_LAZY_TYPE = 0xead4; +var REACT_SCOPE_TYPE = 0xead7; +var REACT_OPAQUE_ID_TYPE = 0xeae0; +var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1; +var REACT_OFFSCREEN_TYPE = 0xeae2; +var REACT_LEGACY_HIDDEN_TYPE = 0xeae3; +var REACT_CACHE_TYPE = 0xeae4; + +if (typeof Symbol === 'function' && Symbol.for) { + var symbolFor = Symbol.for; + REACT_ELEMENT_TYPE = symbolFor('react.element'); + REACT_PORTAL_TYPE = symbolFor('react.portal'); + REACT_FRAGMENT_TYPE = symbolFor('react.fragment'); + REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode'); + REACT_PROFILER_TYPE = symbolFor('react.profiler'); + REACT_PROVIDER_TYPE = symbolFor('react.provider'); + REACT_CONTEXT_TYPE = symbolFor('react.context'); + REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref'); + REACT_SUSPENSE_TYPE = symbolFor('react.suspense'); + REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list'); + REACT_MEMO_TYPE = symbolFor('react.memo'); + REACT_LAZY_TYPE = symbolFor('react.lazy'); + REACT_SCOPE_TYPE = symbolFor('react.scope'); + REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id'); + REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode'); + REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen'); + REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden'); + REACT_CACHE_TYPE = symbolFor('react.cache'); +} + +var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; +var FAUX_ITERATOR_SYMBOL = '@@iterator'; +function getIteratorFn(maybeIterable) { + if (maybeIterable === null || typeof maybeIterable !== 'object') { + return null; + } + + var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]; + + if (typeof maybeIterator === 'function') { + return maybeIterator; + } + + return null; +} + +// Helpers to patch console.logs to avoid logging during side-effect free +// replaying on render function. This currently only patches the object +// lazily which won't cover if the log function was extracted eagerly. +// We could also eagerly patch the method. +var disabledDepth = 0; +var prevLog; +var prevInfo; +var prevWarn; +var prevError; +var prevGroup; +var prevGroupCollapsed; +var prevGroupEnd; + +function disabledLog() {} + +disabledLog.__reactDisabledLog = true; +function disableLogs() { + { + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + prevLog = console.log; + prevInfo = console.info; + prevWarn = console.warn; + prevError = console.error; + prevGroup = console.group; + prevGroupCollapsed = console.groupCollapsed; + prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 + + var props = { + configurable: true, + enumerable: true, + value: disabledLog, + writable: true + }; // $FlowFixMe Flow thinks console is immutable. + + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props + }); + /* eslint-enable react-internal/no-production-logging */ + } + + disabledDepth++; + } +} +function reenableLogs() { + { + disabledDepth--; + + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + var props = { + configurable: true, + enumerable: true, + writable: true + }; // $FlowFixMe Flow thinks console is immutable. + + Object.defineProperties(console, { + log: _assign({}, props, { + value: prevLog + }), + info: _assign({}, props, { + value: prevInfo + }), + warn: _assign({}, props, { + value: prevWarn + }), + error: _assign({}, props, { + value: prevError + }), + group: _assign({}, props, { + value: prevGroup + }), + groupCollapsed: _assign({}, props, { + value: prevGroupCollapsed + }), + groupEnd: _assign({}, props, { + value: prevGroupEnd + }) + }); + /* eslint-enable react-internal/no-production-logging */ + } + + if (disabledDepth < 0) { + error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.'); + } + } +} + +var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; +var prefix; +function describeBuiltInComponentFrame(name, source, ownerFn) { + { + if (prefix === undefined) { + // Extract the VM specific prefix used by each line. + try { + throw Error(); + } catch (x) { + var match = x.stack.trim().match(/\n( *(at )?)/); + prefix = match && match[1] || ''; + } + } // We use the prefix to ensure our stacks line up with native stack frames. + + + return '\n' + prefix + name; + } +} +var reentry = false; +var componentFrameCache; + +{ + var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; + componentFrameCache = new PossiblyWeakMap(); +} + +function describeNativeComponentFrame(fn, construct) { + // If something asked for a stack inside a fake render, it should get ignored. + if ( !fn || reentry) { + return ''; + } + + { + var frame = componentFrameCache.get(fn); + + if (frame !== undefined) { + return frame; + } + } + + var control; + reentry = true; + var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined. + + Error.prepareStackTrace = undefined; + var previousDispatcher; + + { + previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function + // for warnings. + + ReactCurrentDispatcher.current = null; + disableLogs(); + } + + try { + // This should throw. + if (construct) { + // Something should be setting the props in the constructor. + var Fake = function () { + throw Error(); + }; // $FlowFixMe + + + Object.defineProperty(Fake.prototype, 'props', { + set: function () { + // We use a throwing setter instead of frozen or non-writable props + // because that won't throw in a non-strict mode function. + throw Error(); + } + }); + + if (typeof Reflect === 'object' && Reflect.construct) { + // We construct a different control for this case to include any extra + // frames added by the construct call. + try { + Reflect.construct(Fake, []); + } catch (x) { + control = x; + } + + Reflect.construct(fn, [], Fake); + } else { + try { + Fake.call(); + } catch (x) { + control = x; + } + + fn.call(Fake.prototype); + } + } else { + try { + throw Error(); + } catch (x) { + control = x; + } + + fn(); + } + } catch (sample) { + // This is inlined manually because closure doesn't do it for us. + if (sample && control && typeof sample.stack === 'string') { + // This extracts the first frame from the sample that isn't also in the control. + // Skipping one frame that we assume is the frame that calls the two. + var sampleLines = sample.stack.split('\n'); + var controlLines = control.stack.split('\n'); + var s = sampleLines.length - 1; + var c = controlLines.length - 1; + + while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { + // We expect at least one stack frame to be shared. + // Typically this will be the root most one. However, stack frames may be + // cut off due to maximum stack limits. In this case, one maybe cut off + // earlier than the other. We assume that the sample is longer or the same + // and there for cut off earlier. So we should find the root most frame in + // the sample somewhere in the control. + c--; + } + + for (; s >= 1 && c >= 0; s--, c--) { + // Next we find the first one that isn't the same which should be the + // frame that called our sample function and the control. + if (sampleLines[s] !== controlLines[c]) { + // In V8, the first line is describing the message but other VMs don't. + // If we're about to return the first line, and the control is also on the same + // line, that's a pretty good indicator that our sample threw at same line as + // the control. I.e. before we entered the sample frame. So we ignore this result. + // This can happen if you passed a class to function component, or non-function. + if (s !== 1 || c !== 1) { + do { + s--; + c--; // We may still have similar intermediate frames from the construct call. + // The next one that isn't the same should be our match though. + + if (c < 0 || sampleLines[s] !== controlLines[c]) { + // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. + var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); + + { + if (typeof fn === 'function') { + componentFrameCache.set(fn, _frame); + } + } // Return the line we found. + + + return _frame; + } + } while (s >= 1 && c >= 0); + } + + break; + } + } + } + } finally { + reentry = false; + + { + ReactCurrentDispatcher.current = previousDispatcher; + reenableLogs(); + } + + Error.prepareStackTrace = previousPrepareStackTrace; + } // Fallback to just using the name if we couldn't make it throw. + + + var name = fn ? fn.displayName || fn.name : ''; + var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ''; + + { + if (typeof fn === 'function') { + componentFrameCache.set(fn, syntheticFrame); + } + } + + return syntheticFrame; +} + +function describeClassComponentFrame(ctor, source, ownerFn) { + { + return describeNativeComponentFrame(ctor, true); + } +} +function describeFunctionComponentFrame(fn, source, ownerFn) { + { + return describeNativeComponentFrame(fn, false); + } +} + +function shouldConstruct(Component) { + var prototype = Component.prototype; + return !!(prototype && prototype.isReactComponent); +} + +function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) { + + if (type == null) { + return ''; + } + + if (typeof type === 'function') { + { + return describeNativeComponentFrame(type, shouldConstruct(type)); + } + } + + if (typeof type === 'string') { + return describeBuiltInComponentFrame(type); + } + + switch (type) { + case REACT_SUSPENSE_TYPE: + return describeBuiltInComponentFrame('Suspense'); + + case REACT_SUSPENSE_LIST_TYPE: + return describeBuiltInComponentFrame('SuspenseList'); + } + + if (typeof type === 'object') { + switch (type.$$typeof) { + case REACT_FORWARD_REF_TYPE: + return describeFunctionComponentFrame(type.render); + + case REACT_MEMO_TYPE: + // Memo may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn); + + case REACT_LAZY_TYPE: + { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; + + try { + // Lazy may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn); + } catch (x) {} + } + } + } + + return ''; +} + +function describeFiber(fiber) { + var owner = fiber._debugOwner ? fiber._debugOwner.type : null ; + var source = fiber._debugSource ; + + switch (fiber.tag) { + case HostComponent: + return describeBuiltInComponentFrame(fiber.type); + + case LazyComponent: + return describeBuiltInComponentFrame('Lazy'); + + case SuspenseComponent: + return describeBuiltInComponentFrame('Suspense'); + + case SuspenseListComponent: + return describeBuiltInComponentFrame('SuspenseList'); + + case FunctionComponent: + case IndeterminateComponent: + case SimpleMemoComponent: + return describeFunctionComponentFrame(fiber.type); + + case ForwardRef: + return describeFunctionComponentFrame(fiber.type.render); + + case ClassComponent: + return describeClassComponentFrame(fiber.type); + + default: + return ''; + } +} + +function getStackByFiberInDevAndProd(workInProgress) { + try { + var info = ''; + var node = workInProgress; + + do { + info += describeFiber(node); + node = node.return; + } while (node); + + return info; + } catch (x) { + return '\nError generating stack: ' + x.message + '\n' + x.stack; + } +} + +function getWrappedName(outerType, innerType, wrapperName) { + var displayName = outerType.displayName; + + if (displayName) { + return displayName; + } + + var functionName = innerType.displayName || innerType.name || ''; + return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName; +} // Keep in sync with react-reconciler/getComponentNameFromFiber + + +function getContextName(type) { + return type.displayName || 'Context'; +} // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. + + +function getComponentNameFromType(type) { + if (type == null) { + // Host root, text node or just invalid type. + return null; + } + + { + if (typeof type.tag === 'number') { + error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.'); + } + } + + if (typeof type === 'function') { + return type.displayName || type.name || null; + } + + if (typeof type === 'string') { + return type; + } + + switch (type) { + case REACT_FRAGMENT_TYPE: + return 'Fragment'; + + case REACT_PORTAL_TYPE: + return 'Portal'; + + case REACT_PROFILER_TYPE: + return 'Profiler'; + + case REACT_STRICT_MODE_TYPE: + return 'StrictMode'; + + case REACT_SUSPENSE_TYPE: + return 'Suspense'; + + case REACT_SUSPENSE_LIST_TYPE: + return 'SuspenseList'; + + case REACT_CACHE_TYPE: + return 'Cache'; + } + + if (typeof type === 'object') { + switch (type.$$typeof) { + case REACT_CONTEXT_TYPE: + var context = type; + return getContextName(context) + '.Consumer'; + + case REACT_PROVIDER_TYPE: + var provider = type; + return getContextName(provider._context) + '.Provider'; + + case REACT_FORWARD_REF_TYPE: + return getWrappedName(type, type.render, 'ForwardRef'); + + case REACT_MEMO_TYPE: + var outerName = type.displayName || null; + + if (outerName !== null) { + return outerName; + } + + return getComponentNameFromType(type.type) || 'Memo'; + + case REACT_LAZY_TYPE: + { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; + + try { + return getComponentNameFromType(init(payload)); + } catch (x) { + return null; + } + } + } + } + + return null; +} + +function getWrappedName$1(outerType, innerType, wrapperName) { + var functionName = innerType.displayName || innerType.name || ''; + return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName); +} // Keep in sync with shared/getComponentNameFromType + + +function getContextName$1(type) { + return type.displayName || 'Context'; +} + +function getComponentNameFromFiber(fiber) { + var tag = fiber.tag, + type = fiber.type; + + switch (tag) { + case CacheComponent: + return 'Cache'; + + case ContextConsumer: + var context = type; + return getContextName$1(context) + '.Consumer'; + + case ContextProvider: + var provider = type; + return getContextName$1(provider._context) + '.Provider'; + + case DehydratedFragment: + return 'DehydratedFragment'; + + case ForwardRef: + return getWrappedName$1(type, type.render, 'ForwardRef'); + + case Fragment: + return 'Fragment'; + + case HostComponent: + // Host component type is the display name (e.g. "div", "View") + return type; + + case HostPortal: + return 'Portal'; + + case HostRoot: + return 'Root'; + + case HostText: + return 'Text'; + + case LazyComponent: + // Name comes from the type in this case; we don't have a tag. + return getComponentNameFromType(type); + + case LegacyHiddenComponent: + return 'LegacyHidden'; + + case Mode: + if (type === REACT_STRICT_MODE_TYPE) { + // Don't be less specific than shared/getComponentNameFromType + return 'StrictMode'; + } + + return 'Mode'; + + case OffscreenComponent: + return 'Offscreen'; + + case Profiler: + return 'Profiler'; + + case ScopeComponent: + return 'Scope'; + + case SuspenseComponent: + return 'Suspense'; + + case SuspenseListComponent: + return 'SuspenseList'; + // The display name for this tags come from the user-provided type: + + case ClassComponent: + case FunctionComponent: + case IncompleteClassComponent: + case IndeterminateComponent: + case MemoComponent: + case SimpleMemoComponent: + if (typeof type === 'function') { + return type.displayName || type.name || null; + } + + if (typeof type === 'string') { + return type; + } + + break; + } + + return null; +} + +var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; +var current = null; +var isRendering = false; +function getCurrentFiberOwnerNameInDevOrNull() { + { + if (current === null) { + return null; + } + + var owner = current._debugOwner; + + if (owner !== null && typeof owner !== 'undefined') { + return getComponentNameFromFiber(owner); + } + } + + return null; +} + +function getCurrentFiberStackInDev() { + { + if (current === null) { + return ''; + } // Safe because if current fiber exists, we are reconciling, + // and it is guaranteed to be the work-in-progress version. + + + return getStackByFiberInDevAndProd(current); + } +} + +function resetCurrentFiber() { + { + ReactDebugCurrentFrame.getCurrentStack = null; + current = null; + isRendering = false; + } +} +function setCurrentFiber(fiber) { + { + ReactDebugCurrentFrame.getCurrentStack = getCurrentFiberStackInDev; + current = fiber; + isRendering = false; + } +} +function setIsRendering(rendering) { + { + isRendering = rendering; + } +} +function getIsRendering() { + { + return isRendering; + } +} + +// Flow does not allow string concatenation of most non-string types. To work +// around this limitation, we use an opaque type that can only be obtained by +// passing the value through getToStringValue first. +function toString(value) { + return '' + value; +} +function getToStringValue(value) { + switch (typeof value) { + case 'boolean': + case 'number': + case 'object': + case 'string': + case 'undefined': + return value; + + default: + // function, symbol are assigned as empty strings + return ''; + } +} + +var hasReadOnlyValue = { + button: true, + checkbox: true, + image: true, + hidden: true, + radio: true, + reset: true, + submit: true +}; +function checkControlledValueProps(tagName, props) { + { + if (!(hasReadOnlyValue[props.type] || props.onChange || props.onInput || props.readOnly || props.disabled || props.value == null)) { + error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.'); + } + + if (!(props.onChange || props.readOnly || props.disabled || props.checked == null)) { + error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.'); + } + } +} + +function isCheckable(elem) { + var type = elem.type; + var nodeName = elem.nodeName; + return nodeName && nodeName.toLowerCase() === 'input' && (type === 'checkbox' || type === 'radio'); +} + +function getTracker(node) { + return node._valueTracker; +} + +function detachTracker(node) { + node._valueTracker = null; +} + +function getValueFromNode(node) { + var value = ''; + + if (!node) { + return value; + } + + if (isCheckable(node)) { + value = node.checked ? 'true' : 'false'; + } else { + value = node.value; + } + + return value; +} + +function trackValueOnNode(node) { + var valueField = isCheckable(node) ? 'checked' : 'value'; + var descriptor = Object.getOwnPropertyDescriptor(node.constructor.prototype, valueField); + var currentValue = '' + node[valueField]; // if someone has already defined a value or Safari, then bail + // and don't track value will cause over reporting of changes, + // but it's better then a hard failure + // (needed for certain tests that spyOn input values and Safari) + + if (node.hasOwnProperty(valueField) || typeof descriptor === 'undefined' || typeof descriptor.get !== 'function' || typeof descriptor.set !== 'function') { + return; + } + + var get = descriptor.get, + set = descriptor.set; + Object.defineProperty(node, valueField, { + configurable: true, + get: function () { + return get.call(this); + }, + set: function (value) { + currentValue = '' + value; + set.call(this, value); + } + }); // We could've passed this the first time + // but it triggers a bug in IE11 and Edge 14/15. + // Calling defineProperty() again should be equivalent. + // https://github.com/facebook/react/issues/11768 + + Object.defineProperty(node, valueField, { + enumerable: descriptor.enumerable + }); + var tracker = { + getValue: function () { + return currentValue; + }, + setValue: function (value) { + currentValue = '' + value; + }, + stopTracking: function () { + detachTracker(node); + delete node[valueField]; + } + }; + return tracker; +} + +function track(node) { + if (getTracker(node)) { + return; + } // TODO: Once it's just Fiber we can move this to node._wrapperState + + + node._valueTracker = trackValueOnNode(node); +} +function updateValueIfChanged(node) { + if (!node) { + return false; + } + + var tracker = getTracker(node); // if there is no tracker at this point it's unlikely + // that trying again will succeed + + if (!tracker) { + return true; + } + + var lastValue = tracker.getValue(); + var nextValue = getValueFromNode(node); + + if (nextValue !== lastValue) { + tracker.setValue(nextValue); + return true; + } + + return false; +} + +function getActiveElement(doc) { + doc = doc || (typeof document !== 'undefined' ? document : undefined); + + if (typeof doc === 'undefined') { + return null; + } + + try { + return doc.activeElement || doc.body; + } catch (e) { + return doc.body; + } +} + +var didWarnValueDefaultValue = false; +var didWarnCheckedDefaultChecked = false; +var didWarnControlledToUncontrolled = false; +var didWarnUncontrolledToControlled = false; + +function isControlled(props) { + var usesChecked = props.type === 'checkbox' || props.type === 'radio'; + return usesChecked ? props.checked != null : props.value != null; +} +/** + * Implements an host component that allows setting these optional + * props: `checked`, `value`, `defaultChecked`, and `defaultValue`. + * + * If `checked` or `value` are not supplied (or null/undefined), user actions + * that affect the checked state or value will trigger updates to the element. + * + * If they are supplied (and not null/undefined), the rendered element will not + * trigger updates to the element. Instead, the props must change in order for + * the rendered element to be updated. + * + * The rendered element will be initialized as unchecked (or `defaultChecked`) + * with an empty value (or `defaultValue`). + * + * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html + */ + + +function getHostProps(element, props) { + var node = element; + var checked = props.checked; + + var hostProps = _assign({}, props, { + defaultChecked: undefined, + defaultValue: undefined, + value: undefined, + checked: checked != null ? checked : node._wrapperState.initialChecked + }); + + return hostProps; +} +function initWrapperState(element, props) { + { + checkControlledValueProps('input', props); + + if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnCheckedDefaultChecked) { + error('%s contains an input of type %s with both checked and defaultChecked props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the checked prop, or the defaultChecked prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component', props.type); + + didWarnCheckedDefaultChecked = true; + } + + if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue) { + error('%s contains an input of type %s with both value and defaultValue props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component', props.type); + + didWarnValueDefaultValue = true; + } + } + + var node = element; + var defaultValue = props.defaultValue == null ? '' : props.defaultValue; + node._wrapperState = { + initialChecked: props.checked != null ? props.checked : props.defaultChecked, + initialValue: getToStringValue(props.value != null ? props.value : defaultValue), + controlled: isControlled(props) + }; +} +function updateChecked(element, props) { + var node = element; + var checked = props.checked; + + if (checked != null) { + setValueForProperty(node, 'checked', checked, false); + } +} +function updateWrapper(element, props) { + var node = element; + + { + var controlled = isControlled(props); + + if (!node._wrapperState.controlled && controlled && !didWarnUncontrolledToControlled) { + error('A component is changing an uncontrolled input to be controlled. ' + 'This is likely caused by the value changing from undefined to ' + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components'); + + didWarnUncontrolledToControlled = true; + } + + if (node._wrapperState.controlled && !controlled && !didWarnControlledToUncontrolled) { + error('A component is changing a controlled input to be uncontrolled. ' + 'This is likely caused by the value changing from a defined to ' + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components'); + + didWarnControlledToUncontrolled = true; + } + } + + updateChecked(element, props); + var value = getToStringValue(props.value); + var type = props.type; + + if (value != null) { + if (type === 'number') { + if (value === 0 && node.value === '' || // We explicitly want to coerce to number here if possible. + // eslint-disable-next-line + node.value != value) { + node.value = toString(value); + } + } else if (node.value !== toString(value)) { + node.value = toString(value); + } + } else if (type === 'submit' || type === 'reset') { + // Submit/reset inputs need the attribute removed completely to avoid + // blank-text buttons. + node.removeAttribute('value'); + return; + } + + { + // When syncing the value attribute, the value comes from a cascade of + // properties: + // 1. The value React property + // 2. The defaultValue React property + // 3. Otherwise there should be no change + if (props.hasOwnProperty('value')) { + setDefaultValue(node, props.type, value); + } else if (props.hasOwnProperty('defaultValue')) { + setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); + } + } + + { + // When syncing the checked attribute, it only changes when it needs + // to be removed, such as transitioning from a checkbox into a text input + if (props.checked == null && props.defaultChecked != null) { + node.defaultChecked = !!props.defaultChecked; + } + } +} +function postMountWrapper(element, props, isHydrating) { + var node = element; // Do not assign value if it is already set. This prevents user text input + // from being lost during SSR hydration. + + if (props.hasOwnProperty('value') || props.hasOwnProperty('defaultValue')) { + var type = props.type; + var isButton = type === 'submit' || type === 'reset'; // Avoid setting value attribute on submit/reset inputs as it overrides the + // default value provided by the browser. See: #12872 + + if (isButton && (props.value === undefined || props.value === null)) { + return; + } + + var initialValue = toString(node._wrapperState.initialValue); // Do not assign value if it is already set. This prevents user text input + // from being lost during SSR hydration. + + if (!isHydrating) { + { + // When syncing the value attribute, the value property should use + // the wrapperState._initialValue property. This uses: + // + // 1. The value React property when present + // 2. The defaultValue React property when present + // 3. An empty string + if (initialValue !== node.value) { + node.value = initialValue; + } + } + } + + { + // Otherwise, the value attribute is synchronized to the property, + // so we assign defaultValue to the same thing as the value property + // assignment step above. + node.defaultValue = initialValue; + } + } // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug + // this is needed to work around a chrome bug where setting defaultChecked + // will sometimes influence the value of checked (even after detachment). + // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416 + // We need to temporarily unset name to avoid disrupting radio button groups. + + + var name = node.name; + + if (name !== '') { + node.name = ''; + } + + { + // When syncing the checked attribute, both the checked property and + // attribute are assigned at the same time using defaultChecked. This uses: + // + // 1. The checked React property when present + // 2. The defaultChecked React property when present + // 3. Otherwise, false + node.defaultChecked = !node.defaultChecked; + node.defaultChecked = !!node._wrapperState.initialChecked; + } + + if (name !== '') { + node.name = name; + } +} +function restoreControlledState(element, props) { + var node = element; + updateWrapper(node, props); + updateNamedCousins(node, props); +} + +function updateNamedCousins(rootNode, props) { + var name = props.name; + + if (props.type === 'radio' && name != null) { + var queryRoot = rootNode; + + while (queryRoot.parentNode) { + queryRoot = queryRoot.parentNode; + } // If `rootNode.form` was non-null, then we could try `form.elements`, + // but that sometimes behaves strangely in IE8. We could also try using + // `form.getElementsByName`, but that will only return direct children + // and won't include inputs that use the HTML5 `form=` attribute. Since + // the input might not even be in a form. It might not even be in the + // document. Let's just use the local `querySelectorAll` to ensure we don't + // miss anything. + + + var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]'); + + for (var i = 0; i < group.length; i++) { + var otherNode = group[i]; + + if (otherNode === rootNode || otherNode.form !== rootNode.form) { + continue; + } // This will throw if radio buttons rendered by different copies of React + // and the same name are rendered into the same form (same as #1939). + // That's probably okay; we don't support it just as we don't support + // mixing React radio buttons with non-React ones. + + + var otherProps = getFiberCurrentPropsFromNode(otherNode); + + if (!otherProps) { + { + throw Error( "ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported." ); + } + } // We need update the tracked value on the named cousin since the value + // was changed but the input saw no event or value set + + + updateValueIfChanged(otherNode); // If this is a controlled radio button group, forcing the input that + // was previously checked to update will cause it to be come re-checked + // as appropriate. + + updateWrapper(otherNode, otherProps); + } + } +} // In Chrome, assigning defaultValue to certain input types triggers input validation. +// For number inputs, the display value loses trailing decimal points. For email inputs, +// Chrome raises "The specified value is not a valid email address". +// +// Here we check to see if the defaultValue has actually changed, avoiding these problems +// when the user is inputting text +// +// https://github.com/facebook/react/issues/7253 + + +function setDefaultValue(node, type, value) { + if ( // Focused number inputs synchronize on blur. See ChangeEventPlugin.js + type !== 'number' || getActiveElement(node.ownerDocument) !== node) { + if (value == null) { + node.defaultValue = toString(node._wrapperState.initialValue); + } else if (node.defaultValue !== toString(value)) { + node.defaultValue = toString(value); + } + } +} + +var didWarnSelectedSetOnOption = false; +var didWarnInvalidChild = false; +var didWarnInvalidInnerHTML = false; +/** + * Implements an