From 5013b8a024ef8fa6de20a70cb2158bbcba400e1b Mon Sep 17 00:00:00 2001 From: Abdullah Mzaien Date: Fri, 9 Aug 2024 17:27:29 +0300 Subject: [PATCH 1/5] feat: add support for newly supported svg filter in react-native-svg --- .../src/index.test.ts | 27 +++++++++++++++++++ .../src/index.ts | 25 +++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts index 9fe80b4c..ba66ef20 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts @@ -15,6 +15,33 @@ describe('plugin', () => { const code = testPlugin('
') expect(code).toMatchInlineSnapshot(`";"`) }) +it('should transform elements with filter', () => { + const svg = ` + + + + + + + + + + ` + + const code = testPlugin(svg) + expect(code).toMatchInlineSnapshot(` + " + + + + + + + + + ;" + `) +}) it('should add import', () => { const code = testPlugin( diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.ts b/packages/babel-plugin-transform-react-native-svg/src/index.ts index 6c63b203..99096efb 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.ts @@ -30,6 +30,31 @@ const elementToComponent: { [key: string]: string } = { mask: 'Mask', image: 'Image', foreignObject: 'ForeignObject', + filter: 'Filter', + fegaussianblur: 'FeGaussianBlur', + feblend: 'FeBlend', + fecolormatrix: 'FeColorMatrix', + fecomponenttransfer: 'FeComponentTransfer', + fecomposite: 'FeComposite', + feconvolvematrix: 'FeConvolveMatrix', + fediffuselighting: 'FeDiffuseLighting', + fedisplacementmap: 'FeDisplacementMap', + fedropshadow: 'FeDropShadow', + feflood: 'FeFlood', + fefunca: 'FeFuncA', + fefuncb: 'FeFuncB', + fefuncg: 'FeFuncG', + fefuncr: 'FeFuncR', + feimage: 'FeImage', + femerge: 'FeMerge', + femergenode: 'FeMergeNode', + femorphology: 'FeMorphology', + feoffset: 'FeOffset', + fepointlight: 'FePointLight', + fespecularlighting: 'FeSpecularLighting', + fespotlight: 'FeSpotLight', + fetile: 'FeTile', + feturbulence: 'FeTurbulence', } const plugin = () => { From e3c645059234da7d7216ef44a8cea1e7919baafd Mon Sep 17 00:00:00 2001 From: Abdullah Mzaien Date: Fri, 9 Aug 2024 17:41:11 +0300 Subject: [PATCH 2/5] fix: use correct svg for test case --- .../src/index.test.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts index ba66ef20..a9651511 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts @@ -17,15 +17,16 @@ describe('plugin', () => { }) it('should transform elements with filter', () => { const svg = ` - - - - + + + - - - - + + + + + + ` const code = testPlugin(svg) From 6961b27b6c190c8a8503c99c357158d24008a37a Mon Sep 17 00:00:00 2001 From: Abdullah Mzaien Date: Sun, 11 Aug 2024 01:48:13 +0300 Subject: [PATCH 3/5] chore: package version --- packages/babel-plugin-transform-react-native-svg/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-plugin-transform-react-native-svg/package.json b/packages/babel-plugin-transform-react-native-svg/package.json index 8c97ee61..3400734a 100644 --- a/packages/babel-plugin-transform-react-native-svg/package.json +++ b/packages/babel-plugin-transform-react-native-svg/package.json @@ -1,7 +1,7 @@ { "name": "@svgr/babel-plugin-transform-react-native-svg", "description": "Transform DOM elements into react-native-svg components", - "version": "8.1.0", + "version": "8.2.0", "main": "./dist/index.js", "types": "./dist/index.d.ts", "exports": { From dcdd85cd758abc39da1cd8b73331449ebbda5f16 Mon Sep 17 00:00:00 2001 From: Abdullah Mzaien Date: Sun, 11 Aug 2024 02:06:48 +0300 Subject: [PATCH 4/5] chore: add version warning --- .../src/index.test.ts | 10 ++++++++++ .../src/index.ts | 11 +++++++++++ 2 files changed, 21 insertions(+) diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts index a9651511..5c80fd4e 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts @@ -54,6 +54,16 @@ it('should transform elements with filter', () => { ;" `) }) + it('should add version warning', () => { + const code = testPlugin( + `import Svg from 'react-native-svg'; ;`, + ) + expect(code).toMatchInlineSnapshot(` + "import Svg, { Filter, FeGaussianBlur } from 'react-native-svg'; + /* Using svg filters is only supported on react-native-svg v15.5.0 or later. */ + ;" + `) + }) it('should add deal with type imports properly', () => { const code = transform( diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.ts b/packages/babel-plugin-transform-react-native-svg/src/index.ts index 99096efb..14def422 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.ts @@ -4,6 +4,7 @@ import { NodePath, types as t } from '@babel/core' interface State { replacedComponents: Set unsupportedComponents: Set + filterComponents: Set } const elementToComponent: { [key: string]: string } = { @@ -77,6 +78,10 @@ const plugin = () => { state.replacedComponents.add(component) return } + // Add filter elements to show warning + if (component.includes('fe') || component.includes('filter')) { + state.filterComponents.add(name) + } // Remove element if not supported state.unsupportedComponents.add(name) @@ -144,6 +149,12 @@ const plugin = () => { ` SVGR has dropped some elements not supported by react-native-svg: ${componentList} `, ) } + if (state.filterComponents.size && !path.has('trailingComments')) { + path.addComment( + 'trailing', + ` Using svg filters is only supported on react-native-svg v15.5.0 or later. `, + ) + } }, } From 737ecbd700fa311bf21b8d2c5949986ea8833718 Mon Sep 17 00:00:00 2001 From: Abdullah Mzaien Date: Wed, 14 Aug 2024 14:22:07 +0300 Subject: [PATCH 5/5] fix: unit test and adding version warning --- .../src/index.test.ts | 40 ++++++++++--------- .../src/index.ts | 36 +++++++++++++---- 2 files changed, 50 insertions(+), 26 deletions(-) diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts index 5c80fd4e..ca691ad5 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts @@ -15,8 +15,9 @@ describe('plugin', () => { const code = testPlugin('
') expect(code).toMatchInlineSnapshot(`";"`) }) -it('should transform elements with filter', () => { - const svg = ` + + it('should transform elements with filter', () => { + const svg = ` @@ -27,22 +28,22 @@ it('should transform elements with filter', () => { - ` + ` - const code = testPlugin(svg) - expect(code).toMatchInlineSnapshot(` - " - - - - - - - - - ;" - `) -}) + const code = testPlugin(svg) + expect(code).toMatchInlineSnapshot(` + " + + + + + + + + + ;" + `) + }) it('should add import', () => { const code = testPlugin( @@ -54,14 +55,15 @@ it('should transform elements with filter', () => { ;" `) }) + it('should add version warning', () => { const code = testPlugin( - `import Svg from 'react-native-svg'; ;`, + `import Svg from 'react-native-svg'; ;`, ) expect(code).toMatchInlineSnapshot(` "import Svg, { Filter, FeGaussianBlur } from 'react-native-svg'; /* Using svg filters is only supported on react-native-svg v15.5.0 or later. */ - ;" + ;" `) }) diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.ts b/packages/babel-plugin-transform-react-native-svg/src/index.ts index 14def422..fc21591d 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.ts @@ -65,8 +65,7 @@ const plugin = () => { const { name } = namePath.node // Replace element by react-native-svg components - const component = elementToComponent[name] - + const component = elementToComponent[name.toLowerCase()] // Case insensitive if (component) { namePath.replaceWith(t.jsxIdentifier(component)) if (path.has('closingElement')) { @@ -75,15 +74,15 @@ const plugin = () => { .get('name') as NodePath closingNamePath.replaceWith(t.jsxIdentifier(component)) } + // Add filter elements to show warning + if (name.includes('fe') || name.includes('filter')) { + state.filterComponents.add(name) + } state.replacedComponents.add(component) return } - // Add filter elements to show warning - if (component.includes('fe') || component.includes('filter')) { - state.filterComponents.add(name) - } - // Remove element if not supported + // Remove unsupported element state.unsupportedComponents.add(name) path.remove() } @@ -149,7 +148,29 @@ const plugin = () => { ` SVGR has dropped some elements not supported by react-native-svg: ${componentList} `, ) } + if (state.filterComponents.size && !path.has('trailingComments')) { + state.filterComponents.forEach((filter) => { + if ( + !path + .get('specifiers') + .some((specifier) => + specifier + .get('local') + .isIdentifier({ name: elementToComponent[filter] }), + ) + ) { + if (elementToComponent[filter]) { + path.pushContainer( + 'specifiers', + t.importSpecifier( + t.identifier(elementToComponent[filter]), + t.identifier(elementToComponent[filter]), + ), + ) + } + } + }) path.addComment( 'trailing', ` Using svg filters is only supported on react-native-svg v15.5.0 or later. `, @@ -163,6 +184,7 @@ const plugin = () => { Program(path: NodePath, state: Partial) { state.replacedComponents = new Set() state.unsupportedComponents = new Set() + state.filterComponents = new Set() path.traverse(svgElementVisitor, state as State) path.traverse(importDeclarationVisitor, state as State)