Allow dynamic extensions

Author: cyrilwanner

__tests__/unit/plugin/__fixtures__/component-resolve/dynamic-template-inline-require-without-extension/code.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Img from 'react-optimized-image';
+
+const imageName = 'image.png';
+
+export default () => (
+  <div>
+    <Img src={require(`./${imageName}`)} webp />
+  </div>
+);

__tests__/unit/plugin/__fixtures__/component-resolve/dynamic-template-inline-require-without-extension/output.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Img from 'react-optimized-image';
+const imageName = 'image.png';
+export default () => (
+  <div>
+    <Img
+      src={require(`./${imageName}`)}
+      webp
+      rawSrc={{
+        fallback: {
+          original: {
+            1: require(`./${imageName}?url`),
+          },
+        },
+        webp: {
+          original: {
+            1: require(`./${imageName}?webp`),
+          },
+        },
+      }}
+    />
+  </div>
+);

src/plugin/utils/resolveJsxComponent.ts

@@ -390,7 +390,8 @@ const resolveJsxComponent = (types: Babel['types'], path: NodePath<JSXElement>):
 
   const requireName = getRelevantRequireString(types, srcAttribute);
 
-  if (!requireName || !requireName.match(/\.(jpe?g|png|svg|gif|webp)($|\?)/gi)) {
+  // check if the imported src is not an image in case an extension is present
+  if ((!requireName || !requireName.match(/\.(jpe?g|png|svg|gif|webp)($|\?)/gi)) && requireName !== '') {
     return;
   }