You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
19 KiB
1 line
19 KiB
2 years ago
|
{"version":3,"file":"devtools.js","sources":["src/constants.js","devtools/devtools.js","devtools/index.js"],"sourcesContent":["// render modes\n\nexport const NO_RENDER = 0;\nexport const SYNC_RENDER = 1;\nexport const FORCE_RENDER = 2;\nexport const ASYNC_RENDER = 3;\n\n\nexport const ATTR_KEY = '__preactattr_';\n\n// DOM properties that should NOT have \"px\" added when numeric\nexport const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;\n\n","/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */\n\nimport { options } from 'preact';\n\n// Internal helpers from preact\nimport { ATTR_KEY } from '../src/constants';\n\n/**\n * Return a ReactElement-compatible object for the current state of a preact\n * component.\n */\nfunction createReactElement(component) {\n\treturn {\n\t\ttype: component.constructor,\n\t\tkey: component.key,\n\t\tref: null, // Unsupported\n\t\tprops: component.props\n\t};\n}\n\n/**\n * Create a ReactDOMComponent-compatible object for a given DOM node rendered\n * by preact.\n *\n * This implements the subset of the ReactDOMComponent interface that\n * React DevTools requires in order to display DOM nodes in the inspector with\n * the correct type and properties.\n *\n * @param {Node} node\n */\nfunction createReactDOMComponent(node) {\n\tconst childNodes = node.nodeType === Node.ELEMENT_NODE ?\n\t\tArray.from(node.childNodes) : [];\n\n\tconst isText = node.nodeType === Node.TEXT_NODE;\n\n\treturn {\n\t\t// --- ReactDOMComponent interface\n\t\t_currentElement: isText ? node.textContent : {\n\t\t\ttype: node.nodeName.toLowerCase(),\n\t\t\tprops: node[ATTR_KEY]\n\t\t},\n\t\t_renderedChildren: childNodes.map(child => {\n\t\t\tif (child._component) {\n\t\t\t\treturn updateReactComponent(child._component);\n\t\t\t}\n\t\t\treturn updateReactComponent(child);\n\t\t}),\n\t\t_stringText: isText ? node.textContent : null,\n\n\t\t// --- Additional properties used by preact devtools\n\n\t\t// A flag indicating whether the devtools have been notified about the\n\t\t// existence of this component instance yet.\n\t\t// This is used to send the appropriate notifications when DOM components\n\t\t// are added or updated between composite component updates.\n\t\t_inDevTools: false,\n\t\tnode\n\t};\n}\n\n/**\n * Return the name of a component created by a `ReactElement`-like object.\n *\n * @param {ReactElement} element\n */\nfunction typeName(element) {\n\tif (typeof element.type === 'function') {\n\t\treturn element.type.displayName || element.type.name;\n\t}\n\treturn element.type;\n}\n\n/**\n * Return a ReactCompositeComponent-compatible object for a given preact\n * component instance.\n *\n * This implements the subset of the ReactCompositeComponent interface that\n * the DevTools requires in order to walk the component tree and inspect the\n * component's properties.\n *\n * See https://github.com/facebook/react-devtools/blob/e31ec5825342eda570acfc9bcb43a44258fceb28/backend/getData.js\n */\nfunction createReactCompositeComponent(component) {\n\tconst _currentElement = createReactElement(component);\n\tconst node = component.base;\n\n\tlet instance = {\n\t\t// --- ReactDOMComponent properties\n\t\tgetName() {\n\t\t\treturn typeName(_currentElement);\n\t\t},\n\t\t_currentElement: createReactElement(component),\n\t\tprops: component.props,\n\t\tstate: component.state,\n\t\tforceUpdate: component.forceUpdate && component.forceUpdate.bind(component),\n\t\tsetState: component.setState && component.setState.bind(component),\n\n\t\t// --- Additional properties used by preact devtools\n\t\tnode\n\t};\n\n\t// React DevTools exposes the `_instance` field of the selected item in the\n\t// component tree as `$r` in the console. `_instance` must refer to a\n\t// React Component (or compatible) class instance with `props` and `state`\n\t// fields and `setState()`, `forceUpdate()` methods.\n\tinstance._instance = component;\n\n\t// If the root node returned by this component instance's render function\n\t// was itself a composite component, there will be a `_component` property\n\t// containing the child co
|