Can you debundle a react component?

Viewed 502

I'm trying to figure out how some things are being done on a website. I unminified its Webpack bundle, but wondered if it's possible to reconstruct a react component using the partially minified code, the react dev extension, and some time. I found out how some parts work in webpack, but the debundlers I found did not yield any results. I tried debundle, reliable-debundle, and debundle-v2

debundle v2 detected the entry but returned extracting 0 chunks

Example snippet looks like this:

    5332: function(t, e, i) {
      'use strict';
      Object.defineProperty(e, '__esModule', { value: !0 }),
        (e.default = void 0);
      var n,
        a = (function(t) {
          if (t && t.__esModule) return t;
          if (null === t || ('object' != typeof t && 'function' != typeof t))
            return { default: t };
          var e = l();
          if (e && e.has(t)) return e.get(t);
          var i = {},
            n = Object.defineProperty && Object.getOwnPropertyDescriptor;
          for (var a in t)
            if (Object.prototype.hasOwnProperty.call(t, a)) {
              var r = n ? Object.getOwnPropertyDescriptor(t, a) : null;
              r && (r.get || r.set)
                ? Object.defineProperty(i, a, r)
                : (i[a] = t[a]);
            }
          (i.default = t), e && e.set(t, i);
          return i;
        })(i(0)),
        r = o(i(8)),
        s = o(i(5409));
      function o(t) {
        return t && t.__esModule ? t : { default: t };
      }
      function l() {
        if ('function' != typeof WeakMap) return null;
        var t = new WeakMap();
        return (
          (l = function() {
            return t;
          }),
          t
        );
      }
      function h(t, e, i, a) {
        n ||
          (n =
            ('function' == typeof Symbol &&
              Symbol.for &&
              Symbol.for('react.element')) ||
            60103);
        var r = t && t.defaultProps,
          s = arguments.length - 3;
        if ((e || 0 === s || (e = { children: void 0 }), 1 === s))
          e.children = a;
        else if (s > 1) {
          for (var o = new Array(s), l = 0; l < s; l++) o[l] = arguments[l + 3];
          e.children = o;
        }
        if (e && r) for (var h in r) void 0 === e[h] && (e[h] = r[h]);
        else e || (e = r || {});
        return {
          $$typeof: n,
          type: t,
          key: void 0 === i ? null : '' + i,
          ref: null,
          props: e,
          _owner: null,
        };
      }
      function u() {
        return (u =
          Object.assign ||
          function(t) {
            for (var e = 1; e < arguments.length; e++) {
              var i = arguments[e];
              for (var n in i)
                Object.prototype.hasOwnProperty.call(i, n) && (t[n] = i[n]);
            }
            return t;
          }).apply(this, arguments);
      }
      var d = (function(t) {
        var e, i;
        function n(e) {
          var i;
          return (
            ((i = t.call(this, e) || this).unmounting = !1),
            (i.state = { loaded: !1 }),
            i.initialize(),
            i
          );
        }
        (i = t),
          ((e = n).prototype = Object.create(i.prototype)),
          (e.prototype.constructor = e),
          (e.__proto__ = i);
        var a = n.prototype;
        return (
          (a.componentDidUpdate = function(t) {
            var e = this;
            t.src !== this.props.src &&
              this.setState({ loaded: !1 }, function() {
                return e.initialize();
              });
          }),
          (a.initialize = function() {
            var t,
              e = this;
            ((t = this.props.src),
            new Promise(function(e, i) {
              null == t && i(new Error('No image src passed'));
              var n = new Image();
              (n.src = t),
                (n.onload = function() {
                  return e(n);
                }),
                (n.onerror = function(t) {
                  return i(t);
                });
            })).then(function() {
              e.unmounting || e.setState({ loaded: !0 });
            });
          }),
          (a.componentWillUnmount = function() {
            this.unmounting = !0;
          }),
          (a.render = function() {
            var t,
              e = this.props,
              i = e.className,
              n = e.src,
              a = e.alt,
              o = e.width,
              l = e.height,
              d = e.onLoad,
              c = e.style,
              f = this.state.loaded;
            return h(
              'div',
              { className: i, style: u({}, c, { width: o, height: l }) },
              void 0,
              h('img', {
                className: (0, r.default)(
                  s.default.image,
                  ((t = {}), (t[s.default.loaded] = f), t)
                ),
                width: o,
                height: l,
                src: n,
                alt: a,
                onLoad: d,
              })
            );
          }),
          n
        );
      })(a.PureComponent);
      (d.displayName = 'LazySplash'),
        (d.defaultProps = { width: 0, height: 0, alt: '' });
      var c = d;
      e.default = c;
    },
1 Answers

A very basic debundler for Javascript bundles compiled with React Native's bundler.

Debundles a large React Native bundle by walking the compiled AST and extracts individual module declarations and writes them to their own modules & attempts to resolve dependeny import relationships.

      __d(function() {
  "use strict";
}, 0, []);
__d(function(v) {
  "use strict";
}, 1, [0]);

var a = "foo bar baz";

For more

Related