hardcoded React UMD global #10
Comments
Thats a possibility, but I have to check the hardcoded name either way because of UMD. Theres another feature request that would solve this issue
So first identify the react require/import variable and rename it to |
|
What if the renaming of assignments to require() calls was extended to functions, classes, variables, properties, arguments, and everything else? See example That way the UMD global matchers can be replaced with something like This goes beyond the scope of this issue, but it would be a massive improvement. |
|
I published my decompiler that I used in the above example. I think it might be a good reference for adding this feature. |
|
I'm not sure of the exact way they go about resolving this, but I came across another tool today that seemed to handle embedded React pretty well: Digging through the code a little for stuff related to React/JSX lead me to this: |
|
Came across this issue again while testing the new v2.11.0 web IDE update today. Another tool originally struggled with this too (Ref) You can get the minimised code that I am testing against here (Ref) Loading that in the webcrack web IDE (Ref) with the following config:
You can see the issues related to this in files like
require.d(exports, {
Z: function () {
return a;
}
});
var r = require( /*webcrack:missing*/"./35250.js");
function a(e) {
var t;
var n = e.url;
var a = e.size;
var i = a === undefined ? 16 : a;
var s = e.className;
try {
t = new URL(n);
} catch (e) {
console.error(e);
return null;
}
return (0, r.jsx)("img", {
src: `https://icons.duckduckgo.com/ip3/${t.hostname}.ico`,
alt: "Favicon",
width: i,
height: i,
className: s
});
} |
That WIP (see #31) seems to have fixed the above Looking at that same original source file (Ref), in // 63390.js, line 5
import { jsxs, Fragment, jsx } from /*webcrack:missing*/"./35250.js";// 63390.js, lines 151-157
return jsxs(r ? "a" : "div", {
className: _Z("flex h-full w-full flex-col overflow-hidden rounded-md border border-black/10 bg-gray-50 shadow-[0_2px_24px_rgba(0,0,0,0.05)]", s),
href: r,
target: r ? "_blank" : "",
onClick: h,
children: [c && <H><div className="absolute inset-0"><img src={a} alt={`image of ${n}`} className="h-full w-full border-b border-black/10 object-cover" /></div></H>, <div className="flex flex-1 flex-col justify-between gap-1.5 p-3"><_Component65 $clamp={u !== undefined && u || c}>{n}</_Component65><div className="flex items-center gap-1">{i ? <_Z5 url={i} name={t} size={13} /> : <_Z6 url={r} size={13} />}<div className="text-[10px] leading-3 text-gray-500 line-clamp-1">{t}</div></div></div>]
});Contrasting this against DetailsSource (unpacked) // module-63390.js, lines 186-225
return (0, o.jsxs)(r ? "a" : "div", {
className: (0, l.Z)(
"flex h-full w-full flex-col overflow-hidden rounded-md border border-black/10 bg-gray-50 shadow-[0_2px_24px_rgba(0,0,0,0.05)]",
s
),
href: r,
target: r ? "_blank" : "",
onClick: h,
children: [
c &&
(0, o.jsx)(H, {
children: (0, o.jsx)("div", {
className: "absolute inset-0",
children: (0, o.jsx)("img", {
src: a,
alt: "image of ".concat(n),
className: "h-full w-full border-b border-black/10 object-cover",
}),
}),
}),
(0, o.jsxs)("div", {
className: "flex flex-1 flex-col justify-between gap-1.5 p-3",
children: [
(0, o.jsx)(z, { $clamp: (void 0 !== u && u) || c, children: n }),
(0, o.jsxs)("div", {
className: "flex items-center gap-1",
children: [
i
? (0, o.jsx)(R.Z, { url: i, name: t, size: 13 })
: (0, o.jsx)(U.Z, { url: r, size: 13 }),
(0, o.jsx)("div", {
className: "text-[10px] leading-3 text-gray-500 line-clamp-1",
children: t,
}),
],
}),
],
}),
],
});Transformed (unminified) // module-63390.js, lines 213-252
return jsxs(url ? "a" : "div", {
className: Z$0(
"flex h-full w-full flex-col overflow-hidden rounded-md border border-black/10 bg-gray-50 shadow-[0_2px_24px_rgba(0,0,0,0.05)]",
className
),
href: url,
target: url ? "_blank" : "",
onClick: h,
children: [
c && (
<H>
{
<div className="absolute inset-0">
{
<img
src={imageUrl}
alt={`image of ${title}`}
className="h-full w-full border-b border-black/10 object-cover"
/>
}
</div>
}
</H>
),
<div className="flex flex-1 flex-col justify-between gap-1.5 p-3">
<Z$2 $clamp={(mini !== undefined && mini) || c}>{title}</Z$2>
<div className="flex items-center gap-1">
{logoUrl ? (
<R.Z url={logoUrl} name={t} size={13} />
) : (
<U.Z url={url} size={13} />
)}
<div className="text-[10px] leading-3 text-gray-500 line-clamp-1">
{t}
</div>
</div>
</div>,
],
});
} |
|
The code probably looked like this and const Tag = r ? "a" : "div";
return <Tag />;Should be enough to extract it to a variable again |
|
That jsx type should work now: #38 / https://deploy-preview-38--webcrack.netlify.app/ (the branch doesn't have the esm changes yet) |
@j4k0xb I'm guessing that because that branch doesn't have the ESM changes, that's why it isn't getting unminimised at all, even when I use that branch you just mentioned? |
|
Yes.. It detects calls like |
Looking at that same original source file (Ref), unminified, in // 63390.js, lines 151-152
const _Component68 = r ? "a" : "div";
return <_Component68 className={_Z("flex h-full w-full flex-col overflow-hidden rounded-md border border-black/10 bg-gray-50 shadow-[0_2px_24px_rgba(0,0,0,0.05)]", s)} href={r} target={r ? "_blank" : ""} onClick={h}>{c && <H><div className="absolute inset-0"><img src={a} alt={`image of ${n}`} className="h-full w-full border-b border-black/10 object-cover" /></div></H>}<div className="flex flex-1 flex-col justify-between gap-1.5 p-3"><_Component67 $clamp={u !== undefined && u || c}>{n}</_Component67><div className="flex items-center gap-1">{i ? <_Z5 url={i} name={t} size={13} /> : <_Z6 url={r} size={13} />}<div className="text-[10px] leading-3 text-gray-500 line-clamp-1">{t}</div></div></div></_Component68>;@j4k0xb Looks good, thanks! 🎉 |
|
Some additional React issues I noticed today:
And some notes exploring it a little deeper:
And a few more:
|
|
Small update: 180.js: return <img src={`https://icons.duckduckgo.com/ip3/${t.hostname}.ico`} alt="Favicon" width={i} height={i} className={s} />;Detects these calls no matter where |
While it's not a purely generic solution.. From the original issue description, is there a reason we can't detect this sort of thing:
With common well-known React globals on var e = window.wp.element;
var t = window.React;And then have that propagate the 'this is react' aspect through to whatever downstream matchers rely on that so it can be decompiled properly? As that would seemingly solve #10 (comment), and I would imagine probably shouldn't have many flow on effects that would "break other code as easily"? (unless i'm missing something?) Edit: Looking deeper at the code.. this is where the webcrack/packages/webcrack/src/index.ts Lines 26 to 27 in 60dbb7f webcrack/packages/webcrack/src/index.ts Lines 123 to 126 in 60dbb7f webcrack/packages/webcrack/src/index.ts Lines 188 to 198 in 60dbb7f
Based on that, I think updates would need to be made to both Edit 2: Edit of the edit note: This was originally a deep dive exploration into Original DeepDive related to
|
The current Sketchy implementation only decompiles React JSX when the code utilizes the UMD global, which is not effective since the majority of React websites incorporate the library within their bundle.
To make the decompilation process more effective and adaptable to different React websites, I recommend a more dynamic approach by identifying the React library being used in the compiled code, instead of hardcoding the use of 'React'. This can possibly be achieved by finding the variable name assigned to the React library and using that in the matchers.
webcrack/src/transforms/jsx.ts
Line 26 in a972c32
webcrack/src/transforms/jsx.ts
Line 32 in a972c32
webcrack/src/transforms/jsx.ts
Line 34 in a972c32
The text was updated successfully, but these errors were encountered: