refactor: use createReactClass instead

Author: Grohden

package.json

@@ -59,6 +59,7 @@
   "dependencies": {
     "@babel/helper-plugin-utils": "^7.0.0",
     "@babel/parser": "^7.0.0",
+    "create-react-class": "^15.7.0",
     "lodash.isplainobject": "^4.0.6",
     "resolve": "^2.0.0-next.5",
     "svgo": "^2.8.0"

src/index.js

@@ -27,20 +27,18 @@ export default declare(({
     SVG_DEFAULT_PROPS_CODE,
   }) => {
     const namedTemplate = `
-      var SVG_NAME = function SVG_NAME(props) { React.PureComponent.call(this, props); };
-      SVG_NAME.prototype = Object.create(React.PureComponent.prototype);
-      SVG_NAME.prototype.constructor = SVG_NAME;
-      SVG_NAME.prototype.render = function render() { var props = this.props; return SVG_CODE; };
-      ${SVG_DEFAULT_PROPS_CODE ? 'SVG_NAME.defaultProps = SVG_DEFAULT_PROPS_CODE;' : ''}
+      var SVG_NAME = createReactClass({
+        render: function() { var props = this.props; return SVG_CODE; },
+        ${SVG_DEFAULT_PROPS_CODE ? 'getDefaultProps: function() { return SVG_DEFAULT_PROPS_CODE; }' : ''}
+      });
       ${IS_EXPORT ? 'export { SVG_NAME };' : ''}
     `;
     const anonymousTemplate = `
-      var Component = function (props) { React.PureComponent.call(this, props); };
-      Component.prototype = Object.create(React.PureComponent.prototype);
-      Component.prototype.constructor = Component;
-      Component.prototype.render = function render() { var props = this.props; return SVG_CODE; };
-      ${SVG_DEFAULT_PROPS_CODE ? 'Component.defaultProps = SVG_DEFAULT_PROPS_CODE;' : ''}
-      Component.displayName = 'EXPORT_FILENAME';
+      var Component = createReactClass({
+        displayName: EXPORT_FILENAME,
+        render: function() { var props = this.props; return SVG_CODE; },
+        ${SVG_DEFAULT_PROPS_CODE ? 'getDefaultProps: function() { return SVG_DEFAULT_PROPS_CODE; }' : ''}
+      });
       export default Component;
     `;
 
@@ -130,6 +128,8 @@ export default declare(({
 
       file.get('ensureReact')();
       file.set('ensureReact', () => {});
+      file.get('ensureCreateReactClass')();
+      file.set('ensureCreateReactClass', () => {});
     }
     return newPath;
   }
@@ -144,6 +144,20 @@ export default declare(({
           if (typeof filename === 'undefined' && typeof opts.filename !== 'string') {
             throw new TypeError('the "filename" option is required when transforming code');
           }
+
+          if (!path.scope.hasBinding('create-react-class')) {
+            const assignDeclaration = t.importDeclaration([
+              t.importDefaultSpecifier(t.identifier('createReactClass')),
+            ], t.stringLiteral('create-react-class'));
+
+            file.set('ensureCreateReactClass', () => {
+              const [newPath] = path.unshiftContainer('body', assignDeclaration);
+              newPath.get('specifiers').forEach((specifier) => { path.scope.registerBinding('module', specifier); });
+            });
+          } else {
+            file.set('ensureCreateReactClass', () => {});
+          }
+
           if (!path.scope.hasBinding('React')) {
             const reactImportDeclaration = t.importDeclaration([
               t.importDefaultSpecifier(t.identifier('React')),

test/sanity.js

@@ -18,15 +18,17 @@ function assertMatchImport(name, matchRegex) {
 
 const assertReactImport = assertMatchImport('React', () => /import React from ['"]react['"]/g);
 
+const assertCreateReactClassImport = assertMatchImport('createReactClass', () => /import createReactClass from ['"]create-react-class['"]/g);
+
 function assertDefaultProps(shouldExist, result) {
-  const exists = (/\.defaultProps = /g).test(result.code);
+  const exists = (/getDefaultProps:/g).test(result.code);
 
   if (!exists && shouldExist) {
-    throw new Error('defaultProps needs to be present');
+    throw new Error('getDefaultProps needs to be present');
   }
 
   if (exists && !shouldExist) {
-    throw new Error('defaultProps shouldn\'t be present');
+    throw new Error('getDefaultProps shouldn\'t be present');
   }
 }
 
@@ -45,6 +47,7 @@ transformFile('test/fixtures/test-import.jsx', {
 }, (err, result) => {
   if (err) throw err;
   assertReactImport(result);
+  assertCreateReactClassImport(result);
   assertDefaultProps(true, result);
   validateDefaultProps(result);
   console.log('test/fixtures/test-import.jsx\n', result.code);
@@ -59,6 +62,7 @@ transformFile('test/fixtures/test-multiple-svg.jsx', {
 }, (err, result) => {
   if (err) throw err;
   assertReactImport(result);
+  assertCreateReactClassImport(result);
   assertDefaultProps(true, result);
   validateDefaultProps(result);
   console.log('test/fixtures/test-multiple-svg.jsx\n', result.code);
@@ -74,6 +78,7 @@ transformFile('test/fixtures/test-no-react.jsx', {
   if (err) throw err;
   console.log('test/fixtures/test-no-react.jsx\n', result.code);
   assertReactImport(result);
+  assertCreateReactClassImport(result);
   assertDefaultProps(true, result);
   validateDefaultProps(result);
 });
@@ -99,6 +104,7 @@ transformFile('test/fixtures/test-no-duplicate-react.jsx', {
   if (err) throw err;
   console.log('test/fixtures/test-no-duplicate-react.jsx\n', result.code);
   assertReactImport(result);
+  assertCreateReactClassImport(result);
   assertDefaultProps(true, result);
   validateDefaultProps(result);
 });