@bacons/expo-metro-runtime
Version:
Tools for making experimental Metro bundler features work
179 lines • 7.8 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LogBoxInspectorReactFrames = void 0;
/**
* Copyright (c) Evan Bacon.
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const react_1 = __importDefault(require("react"));
const react_2 = require("react");
const react_views_1 = require("@bacons/react-views");
const openFileInEditor_1 = __importDefault(require("../modules/openFileInEditor"));
const LogBoxButton_1 = require("../UI/LogBoxButton");
const LogBoxInspectorSection_1 = require("./LogBoxInspectorSection");
const LogBoxStyle = __importStar(require("../UI/LogBoxStyle"));
const constants_1 = require("../UI/constants");
const BEFORE_SLASH_RE = /^(.*)[\\/]/;
// Taken from React https://github.com/facebook/react/blob/206d61f72214e8ae5b935f0bf8628491cb7f0797/packages/react-devtools-shared/src/backend/describeComponentFrame.js#L27-L41
function getPrettyFileName(path) {
let fileName = path.replace(BEFORE_SLASH_RE, '');
// In DEV, include code for a common special case:
// prefer "folder/index.js" instead of just "index.js".
if (/^index\./.test(fileName)) {
const match = path.match(BEFORE_SLASH_RE);
if (match) {
const pathBeforeSlash = match[1];
if (pathBeforeSlash) {
const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
// Note the below string contains a zero width space after the "/" character.
// This is to prevent browsers like Chrome from formatting the file name as a link.
// (Since this is a source link, it would not work to open the source file anyway.)
fileName = folderName + '/' + fileName;
}
}
}
return fileName;
}
function LogBoxInspectorReactFrames(props) {
const [collapsed, setCollapsed] = (0, react_2.useState)(true);
if (props.log.componentStack == null || props.log.componentStack.length < 1) {
return null;
}
console.log('componentStack', props.log.componentStack);
function getStackList() {
if (collapsed) {
return props.log.componentStack.slice(0, 3);
}
else {
return props.log.componentStack;
}
}
function getCollapseMessage() {
if (props.log.componentStack.length <= 3) {
return;
}
const count = props.log.componentStack.length - 3;
if (collapsed) {
return `See ${count} more components`;
}
else {
return `Collapse ${count} components`;
}
}
return (react_1.default.createElement(LogBoxInspectorSection_1.LogBoxInspectorSection, { heading: "Component Stack" },
getStackList().map((frame, index) => (react_1.default.createElement(react_views_1.View
// Unfortunately we don't have a unique identifier for stack traces.
, {
// Unfortunately we don't have a unique identifier for stack traces.
key: index, style: componentStyles.frameContainer },
react_1.default.createElement(LogBoxButton_1.LogBoxButton, { backgroundColor: {
default: 'transparent',
pressed: LogBoxStyle.getBackgroundColor(1),
}, onPress:
// Older versions of DevTools do not provide full path.
// This will not work on Windows, remove check once the
// DevTools return the full file path.
frame.fileName.startsWith('/')
? () => { var _a, _b; return (0, openFileInEditor_1.default)(frame.fileName, (_b = (_a = frame.location) === null || _a === void 0 ? void 0 : _a.row) !== null && _b !== void 0 ? _b : 1); }
: undefined, style: componentStyles.frame },
react_1.default.createElement(react_views_1.View, { style: componentStyles.component },
react_1.default.createElement(react_views_1.Text, { style: componentStyles.frameName },
react_1.default.createElement(react_views_1.Text, { style: componentStyles.bracket }, '<'),
frame.content,
react_1.default.createElement(react_views_1.Text, { style: componentStyles.bracket }, ' />'))),
react_1.default.createElement(react_views_1.Text, { style: componentStyles.frameLocation },
getPrettyFileName(frame.fileName),
frame.location ? `:${frame.location.row}` : ''))))),
react_1.default.createElement(react_views_1.View, { style: componentStyles.collapseContainer },
react_1.default.createElement(LogBoxButton_1.LogBoxButton, { backgroundColor: {
default: 'transparent',
pressed: LogBoxStyle.getBackgroundColor(1),
}, onPress: () => setCollapsed(!collapsed), style: componentStyles.collapseButton },
react_1.default.createElement(react_views_1.Text, { style: componentStyles.collapse }, getCollapseMessage())))));
}
exports.LogBoxInspectorReactFrames = LogBoxInspectorReactFrames;
const componentStyles = react_views_1.StyleSheet.create({
collapseContainer: {
marginLeft: 15,
flexDirection: 'row',
},
collapseButton: {
borderRadius: 5,
},
collapse: {
color: LogBoxStyle.getTextColor(0.7),
fontSize: 12,
fontWeight: '300',
lineHeight: 20,
marginTop: 0,
paddingVertical: 5,
paddingHorizontal: 10,
},
frameContainer: {
flexDirection: 'row',
paddingHorizontal: 15,
},
frame: {
flex: 1,
paddingVertical: 4,
paddingHorizontal: 10,
borderRadius: 5,
},
component: {
flexDirection: 'row',
paddingRight: 10,
},
frameName: {
fontFamily: constants_1.CODE_FONT,
color: LogBoxStyle.getTextColor(1),
fontSize: 14,
includeFontPadding: false,
lineHeight: 18,
},
bracket: {
fontFamily: constants_1.CODE_FONT,
color: LogBoxStyle.getTextColor(0.4),
fontSize: 14,
fontWeight: '500',
includeFontPadding: false,
lineHeight: 18,
},
frameLocation: {
color: LogBoxStyle.getTextColor(0.7),
fontSize: 12,
fontWeight: '300',
includeFontPadding: false,
lineHeight: 16,
paddingLeft: 10,
},
});
//# sourceMappingURL=LogBoxInspectorReactFrames.js.map