Thanks to visit codestin.com
Credit goes to github.com

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

Support framework frames for Marko #4430

Merged
jasonLaster merged 4 commits into from
Oct 20, 2017
Merged

Support framework frames for Marko #4430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f00214
added marko to library frames
Oct 18, 2017
f385875
code simplified
Oct 18, 2017
9b92c3e
refactoring library map
Oct 20, 2017
35a6354
moving great before react
Oct 20, 2017
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 @@ -52,6 +52,7 @@ const svg = {
express: require("./express.svg"),
pug: require("./pug.svg"),
extjs: require("./sencha-extjs.svg"),
marko: require("./marko.svg"),
showSources: require("./showSources.svg"),
showOutline: require("./showOutline.svg")
};
Expand Down
62 changes: 62 additions & 0 deletions assets/images/marko.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.
244 changes: 89 additions & 155 deletions src/utils/frame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { get } from "lodash";
import { isEnabled } from "devtools-config";
import { endTruncateStr } from "./utils";
import { getFilename } from "./source";
import { findIndex } from "lodash";
import { find, findIndex } from "lodash";

import type { Frame } from "debugger-html";
import type { LocalFrame } from "../components/SecondaryPanes/Frames/types";
Expand All @@ -13,164 +13,96 @@ function getFrameUrl(frame) {
return get(frame, "source.url", "") || "";
}

function isBackbone(frame) {
return getFrameUrl(frame).match(/backbone/i);
}

function isJQuery(frame) {
return getFrameUrl(frame).match(/jquery/i);
}

function isReact(frame) {
return getFrameUrl(frame).match(/react/i);
}

function isImmutable(frame) {
return getFrameUrl(frame).match(/immutable/i);
}

function isWebpack(frame) {
return getFrameUrl(frame).match(/webpack\/bootstrap/i);
}

function isNodeInternal(frame) {
// starts with "internal/" OR no path, just "timers.js", "url.js" etc
// (normally frameUrl will be a FQ pathname)
return /(^internal\/|^[^.\/]+\.js)/.test(getFrameUrl(frame));
}

function isExpress(frame) {
return /node_modules\/express/.test(getFrameUrl(frame));
}

function isPug(frame) {
return /node_modules\/pug/.test(getFrameUrl(frame));
}

function isExtJs(frame) {
return /\/ext-all[\.\-]/.test(getFrameUrl(frame));
}

function isUnderscore(frame) {
return getFrameUrl(frame).match(/underscore/i);
}

function isLodash(frame) {
return getFrameUrl(frame).match(/lodash/i);
}

function isEmber(frame) {
return getFrameUrl(frame).match(/ember/i);
}

function isChoo(frame) {
return getFrameUrl(frame).match(/choo/i);
}

function isVueJS(frame) {
return getFrameUrl(frame).match(/vue\.js/i);
}

function isRxJs(frame) {
return getFrameUrl(frame).match(/rxjs/i);
}

function isAngular(frame) {
return getFrameUrl(frame).match(/angular/i);
}

function isRedux(frame) {
return getFrameUrl(frame).match(/redux/i);
}

function isDojo(frame) {
return getFrameUrl(frame).match(/dojo/i);
}

function isPreact(frame) {
return getFrameUrl(frame).match(/preact/i);
}
const libraryMap = [
{
label: "Backbone",
pattern: /backbone/i
},
{
label: "jQuery",
pattern: /jquery/i
},
{
label: "Preact",
pattern: /preact/i
},
{
label: "React",
pattern: /react/i
},
{
label: "Immutable",
pattern: /immutable/i
},
{
label: "Webpack",
pattern: /webpack\/bootstrap/i
},
{
label: "Node",
pattern: /(^internal\/|^[^.\/]+\.js)/
},
{
label: "Express",
pattern: /node_modules\/express/
},
{
label: "Pug",
pattern: /node_modules\/pug/
},
{
label: "ExtJS",
pattern: /\/ext-all[\.\-]/
},
{
label: "Underscore",
pattern: /underscore/i
},
{
label: "Lodash",
pattern: /lodash/i
},
{
label: "Ember",
pattern: /ember/i
},
{
label: "Choo",
pattern: /choo/i
},
{
label: "VueJS",
pattern: /vue\.js/i
},
{
label: "RxJS",
pattern: /rxjs/i
},
{
label: "Angular",
pattern: /angular/i
},
{
label: "Redux",
pattern: /redux/i
},
{
label: "Dojo",
pattern: /dojo/i
},
{
label: "Marko",
pattern: /marko/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)

if (isBackbone(frame)) {
return "Backbone";
}

if (isJQuery(frame)) {
return "jQuery";
}

// Needs to remain before "react", otherwise "react" can also match "preact"
if (isPreact(frame)) {
return "Preact";
}

if (isReact(frame)) {
return "React";
}

if (isWebpack(frame)) {
return "Webpack";
}

if (isNodeInternal(frame)) {
return "Node";
}

if (isExpress(frame)) {
return "Express";
}

if (isChoo(frame)) {
return "Choo";
}

if (isPug(frame)) {
return "Pug";
}

if (isExtJs(frame)) {
return "ExtJS";
}

if (isUnderscore(frame)) {
return "Underscore";
}

if (isLodash(frame)) {
return "Lodash";
}

if (isEmber(frame)) {
return "Ember";
}

if (isVueJS(frame)) {
return "VueJS";
}

if (isRxJs(frame)) {
return "RxJS";
}

if (isAngular(frame)) {
return "Angular";
}

if (isRedux(frame)) {
return "Redux";
}

if (isDojo(frame)) {
return "Dojo";
}

if (isImmutable(frame)) {
return "Immutable";
}
const frameUrl = getFrameUrl(frame);
const match = find(libraryMap, o => frameUrl.match(o.pattern));
return match && match.label;
}

const displayNameMap = {
Expand Down Expand Up @@ -310,7 +242,9 @@ export function collapseFrames(frames: Frame[]) {
}

function collapseLastFrames(frames) {
const index = findIndex(frames, isWebpack);
const index = findIndex(frames, frame =>
getFrameUrl(frame).match(/webpack\/bootstrap/i)
);

if (index == -1) {
return { newFrames: frames, lastGroup: [] };
Expand Down