diff --git a/src/__snapshots__/index.test.ts.snap b/src/__snapshots__/index.test.ts.snap index cef0208..11a33cc 100644 --- a/src/__snapshots__/index.test.ts.snap +++ b/src/__snapshots__/index.test.ts.snap @@ -1,5 +1,28 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`do not handle path tag inside svg 1`] = ` +"function Icon(props) { + return ; +}" +`; + +exports[`do not handle path tag with d attribute outside svg 1`] = ` +"function Icon(props) { + return ; +}" +`; + +exports[`handle path tag w/o d attribute 1`] = ` +"import { Path as _Path } from \\"three\\"; +import { extend as _extend } from \\"@react-three/fiber\\"; +_extend({ + Path: _Path +}); +function Comp(props) { + return ; +}" +`; + exports[`handles JSX 1`] = ` "import { Mesh as _Mesh, BoxGeometry as _BoxGeometry, MeshBasicMaterial as _MeshBasicMaterial } from \\"three\\"; import { extend as _extend } from \\"@react-three/fiber\\"; diff --git a/src/index.test.ts b/src/index.test.ts index 9e420e3..414625a 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -75,3 +75,36 @@ it('handles template strings', () => { ) expect(code).toMatchSnapshot() }) + +it('do not handle path tag inside svg',()=>{ + const code = transform( + ` + function Icon(props) { + return ; + } + ` + ) + expect(code).toMatchSnapshot() +}) + +it('do not handle path tag with d attribute outside svg',()=>{ + const code = transform( + ` + function Icon(props) { + return ; + } + ` + ) + expect(code).toMatchSnapshot() +}) + +it('handle path tag w/o d attribute',()=>{ + const code = transform( + ` + function Comp(props) { + return ; + } + ` + ) + expect(code).toMatchSnapshot() +}) diff --git a/src/index.ts b/src/index.ts index 38c956f..0de579a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -79,6 +79,31 @@ export default declare((api) => { // Parse identifiers (e.g. , ) let type = 'property' in name ? name.property.name : name.name + + // Skip SVG path with 'd' attribute (SVG path data) + if (type === 'path') { + const hasDAttribute = path.node.attributes.some( + (attr) => + t.isJSXAttribute(attr) && + t.isJSXIdentifier(attr.name) && + attr.name.name === 'd' + ) + if (hasDAttribute) return + + // fallback + let parent: NodePath | null = path.parentPath + while (parent) { + if ( + t.isJSXElement(parent.node) && + t.isJSXIdentifier(parent.node.openingElement.name) && + parent.node.openingElement.name.name === 'svg' + ) { + return + } + parent = parent.parentPath + } + } + const declaration = path.scope.getBinding(type)?.path.node if (t.isVariableDeclarator(declaration)) { if (t.isStringLiteral(declaration.init)) {