From 15afe75967327d336b0a54dfafad6ca15afc8419 Mon Sep 17 00:00:00 2001 From: Jacques Yakoub Date: Sun, 26 Jun 2022 22:07:02 +0200 Subject: [PATCH] style: explicit React imports (#1525) For easier tree shaking --- src/Trans.js | 26 +++++++++++++------------- src/context.js | 4 ++-- src/withSSR.js | 4 ++-- src/withTranslation.js | 8 ++++---- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/Trans.js b/src/Trans.js index 43e8f8f3..155804ac 100644 --- a/src/Trans.js +++ b/src/Trans.js @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { useContext, isValidElement, cloneElement, createElement } from 'react'; import HTML from 'html-parse-stringify'; import { unescape } from 'html-escaper'; import { getI18n, I18nContext, getDefaults } from './context'; @@ -18,7 +18,7 @@ function getChildren(node) { function hasValidReactChildren(children) { if (Object.prototype.toString.call(children) !== '[object Array]') return false; - return children.every((child) => React.isValidElement(child)); + return children.every((child) => isValidElement(child)); } function getAsArray(data) { @@ -49,7 +49,7 @@ export function nodesToString(children, i18nOptions) { // actual e.g. lorem // expected e.g. lorem stringNode += `${child}`; - } else if (React.isValidElement(child)) { + } else if (isValidElement(child)) { const childPropsCount = Object.keys(child.props).length; const shouldKeepChild = keepArray.indexOf(child.type) > -1; const childChildren = child.props.children; @@ -124,7 +124,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s childrenArray.forEach((child) => { if (typeof child === 'string') return; if (hasChildren(child)) getData(getChildren(child)); - else if (typeof child === 'object' && !React.isValidElement(child)) + else if (typeof child === 'object' && !isValidElement(child)) Object.assign(data, child); }); } @@ -145,7 +145,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s function pushTranslatedJSX(child, inner, mem, i, isVoid) { if (child.dummy) child.children = inner; // needed on preact! - mem.push(React.cloneElement(child, { ...child.props, key: i }, isVoid ? undefined : inner)); + mem.push(cloneElement(child, { ...child.props, key: i }, isVoid ? undefined : inner)); } // reactNode (the jsx root element or child) @@ -171,7 +171,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s const child = Object.keys(node.attrs).length !== 0 ? mergeProps({ props: node.attrs }, tmp) : tmp; - const isElement = React.isValidElement(child); + const isElement = isValidElement(child); const isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement; @@ -203,14 +203,14 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s node.children, rootReactNode, ); - mem.push(React.cloneElement(child, { ...child.props, key: i }, inner)); + mem.push(cloneElement(child, { ...child.props, key: i }, inner)); } else if (Number.isNaN(parseFloat(node.name))) { if (isKnownComponent) { const inner = renderInner(child, node, rootReactNode); pushTranslatedJSX(child, inner, mem, i, node.voidElement); } else if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) { if (node.voidElement) { - mem.push(React.createElement(node.name, { key: `${node.name}-${i}` })); + mem.push(createElement(node.name, { key: `${node.name}-${i}` })); } else { const inner = mapAST( reactNodes /* wrong but we need something */, @@ -218,7 +218,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s rootReactNode, ); - mem.push(React.createElement(node.name, { key: `${node.name}-${i}` }, inner)); + mem.push(createElement(node.name, { key: `${node.name}-${i}` }, inner)); } } else if (node.voidElement) { mem.push(`<${node.name} />`); @@ -242,9 +242,9 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s } else if (node.children.length === 1 && translationContent) { // If component does not have children, but translation - has // with this in component could be components={[]} and in translation - 'some text <0>some highlighted message' - mem.push(React.cloneElement(child, { ...child.props, key: i }, translationContent)); + mem.push(cloneElement(child, { ...child.props, key: i }, translationContent)); } else { - mem.push(React.cloneElement(child, { ...child.props, key: i })); + mem.push(cloneElement(child, { ...child.props, key: i })); } } else if (node.type === 'text') { const wrapTextNodes = i18nOptions.transWrapTextNodes; @@ -252,7 +252,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s ? unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language); if (wrapTextNodes) { - mem.push(React.createElement(wrapTextNodes, { key: `${node.name}-${i}` }, content)); + mem.push(createElement(wrapTextNodes, { key: `${node.name}-${i}` }, content)); } else { mem.push(content); } @@ -339,5 +339,5 @@ export function Trans({ // and override `defaultTransParent` if is present const useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent; - return useAsParent ? React.createElement(useAsParent, additionalProps, content) : content; + return useAsParent ? createElement(useAsParent, additionalProps, content) : content; } diff --git a/src/context.js b/src/context.js index 29277244..5efd1457 100644 --- a/src/context.js +++ b/src/context.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { createContext } from 'react'; let defaultOptions = { bindI18n: 'languageChanged', @@ -14,7 +14,7 @@ let defaultOptions = { let i18nInstance; -export const I18nContext = React.createContext(); +export const I18nContext = createContext(); export function setDefaults(options = {}) { defaultOptions = { ...defaultOptions, ...options }; diff --git a/src/withSSR.js b/src/withSSR.js index 6ed0408a..4b265720 100644 --- a/src/withSSR.js +++ b/src/withSSR.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { createElement } from 'react'; import { useSSR } from './useSSR'; import { composeInitialProps } from './context'; import { getDisplayName } from './utils'; @@ -8,7 +8,7 @@ export function withSSR() { function I18nextWithSSR({ initialI18nStore, initialLanguage, ...rest }) { useSSR(initialI18nStore, initialLanguage); - return React.createElement(WrappedComponent, { + return createElement(WrappedComponent, { ...rest, }); } diff --git a/src/withTranslation.js b/src/withTranslation.js index 029e3744..b6dcda7e 100644 --- a/src/withTranslation.js +++ b/src/withTranslation.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { createElement, forwardRef as forwardRefReact } from 'react'; import { useTranslation } from './useTranslation'; import { getDisplayName } from './utils'; @@ -18,7 +18,7 @@ export function withTranslation(ns, options = {}) { } else if (!options.withRef && forwardedRef) { passDownProps.forwardedRef = forwardedRef; } - return React.createElement(WrappedComponent, passDownProps); + return createElement(WrappedComponent, passDownProps); } I18nextWithTranslation.displayName = `withI18nextTranslation(${getDisplayName( @@ -28,8 +28,8 @@ export function withTranslation(ns, options = {}) { I18nextWithTranslation.WrappedComponent = WrappedComponent; const forwardRef = (props, ref) => - React.createElement(I18nextWithTranslation, Object.assign({}, props, { forwardedRef: ref })); + createElement(I18nextWithTranslation, Object.assign({}, props, { forwardedRef: ref })); - return options.withRef ? React.forwardRef(forwardRef) : I18nextWithTranslation; + return options.withRef ? forwardRefReact(forwardRef) : I18nextWithTranslation; }; }