Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

Support framework frames for Preact #4296

Merged
merged 1 commit into from
Oct 5, 2017
Merged

Support framework frames for Preact #4296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/images/Svg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const svg = {
pause: require("./pause.svg"),
"pause-exceptions": require("./pause-exceptions.svg"),
plus: require("./plus.svg"),
preact: require("./preact.svg"),
prettyPrint: require("./prettyPrint.svg"),
react: require("./react.svg"),
"regex-match": require("./regex-match.svg"),
Expand Down
9 changes: 9 additions & 0 deletions assets/images/preact.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/utils/frame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ function isDojo(frame) {
return getFrameUrl(frame).match(/dojo/i);
}

function isPreact(frame) {
return getFrameUrl(frame).match(/preact/i);
}

export function getLibraryFromUrl(frame: Frame) {
// @TODO each of these fns calls getFrameUrl, just call it once
// (assuming there's not more complex logic to identify a lib)
Expand All @@ -95,6 +99,11 @@ export function getLibraryFromUrl(frame: Frame) {
return "jQuery";
}

// Needs to remain before "react", otherwise "react" can also match "preact"
Copy link
Contributor

@bomsy bomsy Oct 5, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ohana54 We could make react more specific by maybe changing the react regex to /^react/i

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I'm not mistaken, we check the entire url, which means react can be anywhere in the url and not just in the beginning. We can try to get the filename from the url and then it would be easier.

Copy link
Contributor

@bomsy bomsy Oct 5, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

my bad ! ur right. what of this /(react)/i instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would create a capture group, but still match react as part of preact.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The closest thing I found is reverse look-ahead (use look-ahead after reversing the string) but I think it's too complex.

if (isPreact(frame)) {
return "Preact";
}

if (isReact(frame)) {
return "React";
}
Expand Down
21 changes: 20 additions & 1 deletion src/utils/tests/frame.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
import {
simplifyDisplayName,
formatDisplayName,
formatCopyName
formatCopyName,
getLibraryFromUrl
} from "../frame";

const cases = {
Expand Down Expand Up @@ -99,4 +100,22 @@ describe("function names", () => {
expect(formatCopyName(frame)).toEqual("child (todo-view.js#12)");
});
});

describe("getLibraryFromUrl", () => {
describe("When Preact is on the frame", () => {
it("should return Preact and not React", () => {
const frame = {
displayName: "name",
location: {
line: 12
},
source: {
url: "https://cdnjs.cloudflare.com/ajax/libs/preact/8.2.5/preact.js"
}
};

expect(getLibraryFromUrl(frame)).toEqual("Preact");
});
});
});
});