I have a file that was given to me that was minified and compiled using webpack modules. I don’t know anything about those so I’m not sure how to go about editing the JS file without understanding what all the variables do.
I am trying to make all the navigation links unclickable and found the script where it creates the links but if I were to remove it or edit it, it edits all links including non nav ones. I am sure there are other area that creates the nav links itself but I can’t find it as I am not understanding what is being done with all the alphabet variables they have going on in this 131k line file.
Below code creates the data link and aria-current for the a tag
function A(e) {
var t = e.b, n = e.children, o = e.dark, a = e.isCurrentLesson, s = e.isTooltipEnabled, u = e.lessonId, c = e.onClick, l = e.onHideProgressTooltip, f = e.onNavigate, h = e.onShowProgressTooltip, v = e.restriction, y = e.showProgressDelay, b = e.style, _ = (0,
g.Tn)(), w = _.color, N = _.navigationStyle, A = N === T.Nu.IMAGE, P = N === T.Nu.ACCENT, L = N === T.Nu.ACCENT && (0,
x.LI)(w), I = N === T.Nu.TINT, M = (0, k.Zj)(), R = (0, d.useCallback)(function(e) {
c(e), a ? (e.preventDefault(), (0, m.lk)()) : f(u);
}, [ u, a, c, f ]), D = (0, d.useState)(!1), j = (0, i.Z)(D, 2), Z = j[0], B = j[1], F = (0,
d.useCallback)(function() {
Z || (null != y ? setTimeout(h, y) : h());
}, [ Z, y, h ]), q = (0, d.useCallback)(function(e) {
(0, E.$o)(e) && l();
}, [ l ]), U = (0, d.useCallback)(function() {
B(!0);
}, []), z = (0, d.useCallback)(function() {
B(!1);
}, []), H = null != (null == v ? void 0 : v.type), V = t("link", {
"accent-full": P,
"accent-full-dark": L,
"accent-tint": I,
active: a,
dark: o,
image: A,
light: !o,
restricted: H
}).toString();
return H ? C.createElement(O, (0, r.Z)({}, e, {
className: V,
style: b
})) : C.createElement(p.OL, {
"aria-current": "page",
className: V.toString(),
"data-link": "lesson-link-item course-links",
onBlur: s ? l : void 0,
onClick: R,
onFocus: s ? F : void 0,
onKeyDown: s ? q : void 0,
onMouseDown: s ? U : void 0,
onMouseUp: s ? z : void 0,
style: b,
tabIndex: M ? -1 : void 0,
to: (0, S.Jv)(u)
}, n);
}
Below code creates the a href
73727: function(e, t, n) {
"use strict";
n.d(t, {
OL: function() {
return y;
},
rU: function() {
return m;
}
});
var r = n(16550), i = n(94578), o = n(67294), a = n(68466), s = (n(45697), n(87462)), u = n(63366), c = n(2177);
o.Component;
o.Component;
var l = function(e, t) {
return "function" == typeof e ? e(t) : e;
}, d = function(e, t) {
return "string" == typeof e ? (0, a.ob)(e, null, null, t) : e;
}, f = function(e) {
return e;
}, p = o.forwardRef;
void 0 === p && (p = f);
var h = p(function(e, t) {
var n = e.innerRef, r = e.navigate, i = e.onClick, a = (0, u.Z)(e, [ "innerRef", "navigate", "onClick" ]), c = a.target, l = (0,
s.Z)({}, a, {
onClick: function(e) {
try {
i && i(e);
} catch (t) {
throw e.preventDefault(), t;
}
e.defaultPrevented || 0 !== e.button || c && "_self" !== c || function(e) {
return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
}(e) || (e.preventDefault(), r());
}
});
return l.ref = f !== p && t || n, o.createElement("a", l);
});
var m = p(function(e, t) {
var n = e.component, i = void 0 === n ? h : n, a = e.replace, m = e.to, v = e.innerRef, g = (0,
u.Z)(e, [ "component", "replace", "to", "innerRef" ]);
return o.createElement(r.s6.Consumer, null, function(e) {
e || (0, c.Z)(!1);
var n = e.history, r = d(l(m, e.location), e.location), u = r ? n.createHref(r) : "", h = (0,
s.Z)({}, g, {
href: u,
navigate: function() {
var t = l(m, e.location);
(a ? n.replace : n.push)(t);
}
});
return f !== p ? h.ref = t || v : h.innerRef = v, o.createElement(i, h);
});
}), v = function(e) {
return e;
}, g = o.forwardRef;
void 0 === g && (g = v);
var y = g(function(e, t) {
var n = e["aria-current"], i = void 0 === n ? "page" : n, a = e.activeClassName, f = void 0 === a ? "active" : a, p = e.activeStyle, h = e.className, y = e.exact, b = e.isActive, _ = e.location, w = e.sensitive, E = e.strict, k = e.style, x = e.to, S = e.innerRef, T = (0,
u.Z)(e, [ "aria-current", "activeClassName", "activeStyle", "className", "exact", "isActive", "location", "sensitive", "strict", "style", "to", "innerRef" ]);
return o.createElement(r.s6.Consumer, null, function(e) {
e || (0, c.Z)(!1);
var n = _ || e.location, a = d(l(x, n), n), u = a.pathname, C = u && u.replace(/([.+*?=^!:${}()[]|/\])/g, "\$1"), N = C ? (0,
r.LX)(n.pathname, {
path: C,
exact: y,
sensitive: w,
strict: E
}) : null, O = !!(b ? b(N, n) : N), A = O ? function() {
for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++) t[n] = arguments[n];
return t.filter(function(e) {
return e;
}).join(" ");
}(h, f) : h, P = O ? (0, s.Z)({}, k, {}, p) : k, L = (0, s.Z)({
"aria-current": O && i || null,
className: A,
style: P,
to: a
}, T);
return v !== g ? L.ref = t || S : L.innerRef = S, o.createElement(m, L);
});
});
},
I tried to beautify and unminify the minified file so it’s easier to read.
I was able to find how the navigation is created up to the a tag but am unable to edit the area where it creates the actual link which I believe to be the code above.
Is there a way to decompile the compiled JS file? I don’t know enough about JS or using webpack to figure out how to reverse engineer this.
