@paypal/checkout-components - npm Package Compare versions

Comparing version 5.0.2 to 5.0.3

package.json

 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "PayPal Checkout components, for integrating checkout products.",
@@ -81,3 +81,3 @@ "main": "index.js",
     "cross-domain-utils": "^2.0.1",
-    "jsx-pragmatic": "^1.0.4",
+    "jsx-pragmatic": "^2",
     "post-robot": "^10.0.0",
@@ -84,0 +84,0 @@ "zalgo-promise": "^1.0.10",

src/buttons/template/componentTemplate.jsx

@@ -66,6 +66,16 @@ /* @flow */
 
-function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, onClick = noop } :
-    {| style : ButtonStyle, fundingSource : $Values<typeof FUNDING>, multiple : boolean, locale : LocaleType, onClick? : Function,
-      env : $Values<typeof ENV>, fundingEligibility : FundingEligibilityType, i : number, nonce : string |}) : ElementNode {
+type ButtonProps = {|
+    style : ButtonStyle,
+    fundingSource : $Values<typeof FUNDING>,
+    multiple : boolean,
+    locale : LocaleType,
+    onClick? : Function,
+    env : $Values<typeof ENV>,
+    fundingEligibility : FundingEligibilityType,
+    i : number,
+    nonce : string
+|};
 
+function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, onClick = noop } : ButtonProps) : ElementNode {
+
     let { color, period } = style;
@@ -160,3 +170,7 @@
 
-function Script({ nonce }) : ElementNode {
+type ScriptProps = {|
+    nonce : ?string
+|};
+
+function Script({ nonce } : ScriptProps) : ElementNode {
     let script = getComponentScript().toString();
@@ -177,5 +191,10 @@
 
-function Style({ style, cardNumber, nonce } :
-    {| style : ButtonStyle, cardNumber? : number, nonce : string |}) : ElementNode {
+type StyleProps = {|
+    style : ButtonStyle,
+    cardNumber? : number,
+    nonce : string
+|};
 
+function Style({ style, cardNumber, nonce } : StyleProps) : ElementNode {
+
     const { height } = style;
@@ -216,3 +235,7 @@ const css = componentStyle({ height, cardNumber });
 
-export function Buttons(props : ButtonPropsInputs & {| onClick? : Function |}) : ElementNode {
+type ButtonsProps = ButtonPropsInputs & {|
+    onClick? : Function
+|};
+
+export function Buttons(props : ButtonsProps) : ElementNode {
     const { onClick } = props;
@@ -267,5 +290,15 @@ const { style, locale, remembered, env, fundingEligibility, platform, nonce } = normalizeButtonProps(props);
 
+    // $FlowFixMe
     buttonsNode.toString = () => buttonsNode.render(html());
 
+    const render = buttonsNode.render;
+    // $FlowFixMe
+    buttonsNode.render = (renderer) => {
+        if (renderer.length === 3 && typeof window === 'undefined') {
+            return render.call(buttonsNode, html());
+        }
+        return render.call(buttonsNode, renderer);
+    };
+
     return buttonsNode;
 }

src/funding/common.jsx

@@ -6,3 +6,3 @@ /* @flow */
 import { PLATFORM, type LocaleType, COUNTRY, CARD } from '@paypal/sdk-constants/src';
-import { ElementNode } from 'jsx-pragmatic/src';
+import { type ChildType } from 'jsx-pragmatic/src';
 import { LOGO_COLOR } from '@paypal/sdk-logos/src';
@@ -68,3 +68,3 @@
         fundingEligibility : FundingEligibilityType
-    |}) => ElementNode | $ReadOnlyArray<ElementNode>,
+    |}) => ChildType,
     Tag? : ({|
@@ -74,3 +74,3 @@ locale : LocaleType,
         multiple : boolean
-    |}) => ElementNode,
+    |}) => ChildType,
     colors : $ReadOnlyArray<$Values<typeof BUTTON_COLOR>>,
@@ -89,3 +89,3 @@ secondaryColors : { [$Values<typeof BUTTON_COLOR>] : $Values<typeof BUTTON_COLOR> },
         nonce : string
-    |}) => ElementNode
+    |}) => ChildType
 |};
@@ -92,0 +92,0 @@

src/funding/paypal/config.jsx

@@ -5,3 +5,3 @@ /* @flow */
 import { type LocaleType } from '@paypal/sdk-constants/src';
-import { node, Fragment, type ElementNode } from 'jsx-pragmatic/src';
+import { node, Fragment } from 'jsx-pragmatic/src';
 import { PPLogo, PayPalLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
@@ -29,3 +29,3 @@
     
-                Label({ logoColor } : { logoColor : $Values<typeof LOGO_COLOR> }) : ElementNode {
+                Label: ({ logoColor } : { logoColor : $Values<typeof LOGO_COLOR> }) => {
                     return (
@@ -32,0 +32,0 @@ <Fragment>

src/funding/paypal/labels.jsx

@@ -6,3 +6,3 @@ /* @flow */
 import { type LocaleType } from '@paypal/sdk-constants/src';
-import { node, type ElementNode } from 'jsx-pragmatic/src';
+import { node, type ChildType, type NullableChildType } from 'jsx-pragmatic/src';
 import { regexTokenize } from 'belter/src';
@@ -15,3 +15,3 @@ import { PPLogo, PayPalLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
 
-function placeholderToJSX(text : string, placeholders : { [string] : (?string) => ElementNode | string | null | void }) : $ReadOnlyArray<ElementNode | string> {
+function placeholderToJSX(text : string, placeholders : { [string] : (?string) => NullableChildType }) : ChildType {
     return regexTokenize(text, /(\{[a-z]+\})|([^{}]+)/g)
@@ -30,3 +30,3 @@ .map(token => {
 
-function contentToJSX(key : string, locale : LocaleType, { logoColor, period } : { logoColor : $Values<typeof LOGO_COLOR>, period? : number } = {}) : $ReadOnlyArray<ElementNode | string> {
+function contentToJSX(key : string, locale : LocaleType, { logoColor, period } : { logoColor : $Values<typeof LOGO_COLOR>, period? : number } = {}) : ChildType {
     const { lang } = locale;
@@ -44,19 +44,19 @@ const text = componentContent[lang][key];
 
-export function Checkout({ locale, logoColor } : { locale : LocaleType, logoColor : $Values<typeof LOGO_COLOR> }) : $ReadOnlyArray<ElementNode | string> {
+export function Checkout({ locale, logoColor } : { locale : LocaleType, logoColor : $Values<typeof LOGO_COLOR> }) : ChildType {
     return contentToJSX('checkout', locale, { logoColor });
 }
 
-export function Pay({ locale, logoColor } : { locale : LocaleType, logoColor : $Values<typeof LOGO_COLOR> }) : $ReadOnlyArray<ElementNode | string> {
+export function Pay({ locale, logoColor } : { locale : LocaleType, logoColor : $Values<typeof LOGO_COLOR> }) : ChildType {
     return contentToJSX('pay', locale, { logoColor });
 }
 
-export function Installment({ locale, logoColor, period } : { locale : LocaleType, logoColor : $Values<typeof LOGO_COLOR>, period? : number }) : $ReadOnlyArray<ElementNode | string> {
+export function Installment({ locale, logoColor, period } : { locale : LocaleType, logoColor : $Values<typeof LOGO_COLOR>, period? : number }) : ChildType {
     return contentToJSX(period ? 'installment_period' : 'installment', locale, { logoColor, period });
 }
 
-export function SaferTag({ locale } : { locale : LocaleType }) : $ReadOnlyArray<ElementNode | string> {
+export function SaferTag({ locale } : { locale : LocaleType }) : ChildType {
     return contentToJSX('safer_tag', locale);
 }
 
-export function DualTag({ locale } : { locale : LocaleType }) : $ReadOnlyArray<ElementNode | string> {
+export function DualTag({ locale } : { locale : LocaleType }) : ChildType {
     const { lang } = locale;
@@ -63,0 +63,0 @@

No alert changes

Improved metrics

Lines of code

3935

increased by0.72%

Worsened metrics

Total package byte prevSize

568981

decreased by-0.03%

Dependency changes

• + Addedjsx-pragmatic@2.0.22(transitive)

• - Removedjsx-pragmatic@1.0.14(transitive)

• Updatedjsx-pragmatic@^2