From 9a1a792a22bfff85ee7d48001caf5687b2312ca2 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 17 Oct 2018 03:21:04 +0400 Subject: [PATCH 1/6] Add forward ref to SVG component --- packages/react-scripts/config/webpack.config.dev.js | 3 ++- packages/react-scripts/config/webpack.config.prod.js | 6 ++++-- .../kitchensink/src/features/webpack/SvgComponent.js | 4 ++++ .../src/features/webpack/SvgComponent.test.js | 9 +++++++++ 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 29c7a8621f2..c3aad17052d 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -249,7 +249,8 @@ module.exports = { { loaderMap: { svg: { - ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', + ReactComponent: + '@svgr/webpack?-prettier,+ref,-svgo![path]', }, }, }, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index ec3c19c36c1..886c076dee4 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -325,7 +325,8 @@ module.exports = { { loaderMap: { svg: { - ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', + ReactComponent: + '@svgr/webpack?-prettier,+ref,-svgo![path]', }, }, }, @@ -476,7 +477,8 @@ module.exports = { }), // Inlines the webpack runtime script. This script is too small to warrant // a network request. - shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]), + shouldInlineRuntimeChunk && + new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]), // Makes some environment variables available in index.html. // The public URL is available as %PUBLIC_URL% in index.html, e.g.: // diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js index 62bad3b1075..8021bc42f2f 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js @@ -9,3 +9,7 @@ import React from 'react'; import { ReactComponent as Logo } from './assets/logo.svg'; export default () => ; + +export const SvgComponentWithRef = ({ ref }) => ( + +); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js index 1b63788c730..f7aeb48c533 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js @@ -15,4 +15,13 @@ describe('svg component', () => { ReactDOM.render(, div); expect(div.textContent).toBe('logo.svg'); }); + + it('svg root element ref is passed svgRef', () => { + const div = document.createElement('div'); + const someRef = React.createRef(); + ReactDOM.render(, div); + const svgElement = div.getElementsByTagName('svg'); + expect(svgElement).toHaveLength(1); + expect(svgElement[0]).toBe(someRef); + }); }); From cba2072c99bea77c818db40823fc3cdbd1d5cb15 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 17 Oct 2018 03:43:11 +0400 Subject: [PATCH 2/6] Write proper component for the ref test --- .../kitchensink/src/features/webpack/SvgComponent.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js index f7aeb48c533..5a337a6f611 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js @@ -7,7 +7,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import SvgComponent from './SvgComponent'; +import SvgComponent, { SvgComponentWithRef } from './SvgComponent'; describe('svg component', () => { it('renders without crashing', () => { @@ -19,7 +19,7 @@ describe('svg component', () => { it('svg root element ref is passed svgRef', () => { const div = document.createElement('div'); const someRef = React.createRef(); - ReactDOM.render(, div); + ReactDOM.render(, div); const svgElement = div.getElementsByTagName('svg'); expect(svgElement).toHaveLength(1); expect(svgElement[0]).toBe(someRef); From 2d28d2e0349f25e3c4b2f02ee68c0dd5a3c0b67d Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 17 Oct 2018 12:46:45 +0400 Subject: [PATCH 3/6] Add ref to jest svg transform and fix tests --- packages/react-scripts/config/jest/fileTransform.js | 4 ++-- .../kitchensink/src/features/webpack/SvgComponent.js | 10 ++++++---- .../src/features/webpack/SvgComponent.test.js | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/react-scripts/config/jest/fileTransform.js b/packages/react-scripts/config/jest/fileTransform.js index f442f0bbd86..acec7ac8848 100644 --- a/packages/react-scripts/config/jest/fileTransform.js +++ b/packages/react-scripts/config/jest/fileTransform.js @@ -21,10 +21,10 @@ module.exports = { return `module.exports = { __esModule: true, default: ${assetFilename}, - ReactComponent: (props) => ({ + ReactComponent: ({ svgRef, ...props }) => ({ $$typeof: Symbol.for('react.element'), type: 'svg', - ref: null, + ref: svgRef || null, key: null, props: Object.assign({}, props, { children: ${assetFilename} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js index 8021bc42f2f..0d912720733 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js @@ -6,10 +6,12 @@ */ import React from 'react'; -import { ReactComponent as Logo } from './assets/logo.svg'; +import { ReactComponent as Logo } from './logo.svg'; -export default () => ; +export default () => { + return ; +}; -export const SvgComponentWithRef = ({ ref }) => ( - +export const SvgComponentWithRef = ({ svgRef }) => ( + ); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js index 5a337a6f611..4a5d53a8ae3 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js @@ -22,6 +22,6 @@ describe('svg component', () => { ReactDOM.render(, div); const svgElement = div.getElementsByTagName('svg'); expect(svgElement).toHaveLength(1); - expect(svgElement[0]).toBe(someRef); + expect(svgElement[0]).toBe(someRef.current); }); }); From 419a4ecda1e7b7c2f566e51c8c7bf3939dd62728 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 17 Oct 2018 12:53:13 +0400 Subject: [PATCH 4/6] Fix SVG file location --- .../fixtures/kitchensink/src/features/webpack/SvgComponent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js index 0d912720733..470a86b470d 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ReactComponent as Logo } from './logo.svg'; +import { ReactComponent as Logo } from './assets/logo.svg'; export default () => { return ; From 930d835c45a96f89efb663285de4feb47856be9c Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Thu, 18 Oct 2018 13:54:34 +0400 Subject: [PATCH 5/6] Use proper `ref` instead of svgRef in tests --- .../react-scripts/config/jest/fileTransform.js | 17 +++++------------ .../src/features/webpack/SvgComponent.js | 6 +++--- .../src/features/webpack/SvgComponent.test.js | 4 ++-- 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/react-scripts/config/jest/fileTransform.js b/packages/react-scripts/config/jest/fileTransform.js index acec7ac8848..4ed6bdb005d 100644 --- a/packages/react-scripts/config/jest/fileTransform.js +++ b/packages/react-scripts/config/jest/fileTransform.js @@ -1,11 +1,3 @@ -// @remove-on-eject-begin -/** - * Copyright (c) 2014-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -// @remove-on-eject-end 'use strict'; const path = require('path'); @@ -18,18 +10,19 @@ module.exports = { const assetFilename = JSON.stringify(path.basename(filename)); if (filename.match(/\.svg$/)) { - return `module.exports = { + return `const React = require('react'); + module.exports = { __esModule: true, default: ${assetFilename}, - ReactComponent: ({ svgRef, ...props }) => ({ + ReactComponent: React.forwardRef((props, ref) => ({ $$typeof: Symbol.for('react.element'), type: 'svg', - ref: svgRef || null, + ref: ref, key: null, props: Object.assign({}, props, { children: ${assetFilename} }) - }), + })), };`; } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js index 470a86b470d..b22cb2fe056 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js @@ -12,6 +12,6 @@ export default () => { return ; }; -export const SvgComponentWithRef = ({ svgRef }) => ( - -); +export const SvgComponentWithRef = React.forwardRef((props, ref) => ( + +)); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js index 4a5d53a8ae3..493a6bc87ba 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js @@ -16,10 +16,10 @@ describe('svg component', () => { expect(div.textContent).toBe('logo.svg'); }); - it('svg root element ref is passed svgRef', () => { + it('svg root element equals the passed ref', () => { const div = document.createElement('div'); const someRef = React.createRef(); - ReactDOM.render(, div); + ReactDOM.render(, div); const svgElement = div.getElementsByTagName('svg'); expect(svgElement).toHaveLength(1); expect(svgElement[0]).toBe(someRef.current); From 802f686f6e3dd41fd18b7bb790c11b62af00ece7 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 13 Feb 2019 21:16:33 +0400 Subject: [PATCH 6/6] Add ref to svgr loader --- packages/react-scripts/config/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 71c0b750f83..b549f13fe3e 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -377,7 +377,7 @@ module.exports = function(webpackEnv) { { loaderMap: { svg: { - ReactComponent: '@svgr/webpack?-svgo![path]', + ReactComponent: '@svgr/webpack?-svgo,+ref![path]', }, }, },