@ionic/react - npm Package Compare versions

Comparing version 4.8.0-rc.1-1 to 4.8.0-rc.2-1

dist/index.esm.js

@@ -143,3 +143,3 @@ import React, { useContext } from 'react';
     Object.keys(newProps).forEach(name => {
-        if (name === 'children' || name === 'style' || name === 'ref' || name === 'className') {
+        if (name === 'children' || name === 'style' || name === 'ref' || name === 'class' || name === 'className' || name === 'forwardedRef') {
             return;
@@ -155,3 +155,8 @@ }
         else {
-            node[name] = newProps[name];
+            if (typeof newProps[name] === 'object') {
+                node[name] = newProps[name];
+            }
+            else {
+                node.setAttribute(camelToDashCase(name), newProps[name]);
+            }
         }
@@ -219,2 +224,3 @@ });
 const dashToPascalCase = (str) => str.toLowerCase().split('-').map(segment => segment.charAt(0).toUpperCase() + segment.slice(1)).join('');
+const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
 const createForwardRef = (ReactComponent, displayName) => {
@@ -350,3 +356,2 @@ const forwardRef = (props, ref) => {
 const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect');
-const IonRouterOutlet = /*@__PURE__*/ createReactComponent('ion-router-outlet');
 const IonRow = /*@__PURE__*/ createReactComponent('ion-row');
@@ -467,3 +472,10 @@ const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar');
 const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button');
+const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet');
 
+const IonRouterOutlet = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement("div", { className: className !== undefined ? `ion-page ${className}` : 'ion-page' },
+        React.createElement(IonRouterOutletInner, Object.assign({}, props), children)));
+};
+
 const IonTabBarUnwrapped = /*@__PURE__*/ (() => class extends React.Component {
@@ -470,0 +482,0 @@ constructor(props) {

dist/index.js

@@ -149,3 +149,3 @@ 'use strict';
     Object.keys(newProps).forEach(name => {
-        if (name === 'children' || name === 'style' || name === 'ref' || name === 'className') {
+        if (name === 'children' || name === 'style' || name === 'ref' || name === 'class' || name === 'className' || name === 'forwardedRef') {
             return;
@@ -161,3 +161,8 @@ }
         else {
-            node[name] = newProps[name];
+            if (typeof newProps[name] === 'object') {
+                node[name] = newProps[name];
+            }
+            else {
+                node.setAttribute(camelToDashCase(name), newProps[name]);
+            }
         }
@@ -225,2 +230,3 @@ });
 const dashToPascalCase = (str) => str.toLowerCase().split('-').map(segment => segment.charAt(0).toUpperCase() + segment.slice(1)).join('');
+const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
 const createForwardRef = (ReactComponent, displayName) => {
@@ -356,3 +362,2 @@ const forwardRef = (props, ref) => {
 const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect');
-const IonRouterOutlet = /*@__PURE__*/ createReactComponent('ion-router-outlet');
 const IonRow = /*@__PURE__*/ createReactComponent('ion-row');
@@ -473,3 +478,10 @@ const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar');
 const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button');
+const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet');
 
+const IonRouterOutlet = (_a) => {
+    var { className, children } = _a, props = tslib_1.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("div", { className: className !== undefined ? `ion-page ${className}` : 'ion-page' },
+        React__default.createElement(IonRouterOutletInner, Object.assign({}, props), children)));
+};
+
 const IonTabBarUnwrapped = /*@__PURE__*/ (() => class extends React__default.Component {
@@ -476,0 +488,0 @@ constructor(props) {

dist/types/components/index.d.ts

@@ -13,2 +13,3 @@ export { AlertButton, AlertInput, setupConfig } from '@ionic/core';
 export { IonBackButton } from './navigation/IonBackButton';
+export { IonRouterOutlet } from './IonRouterOutlet';
 export { isPlatform, getPlatforms } from './utils';

dist/types/components/inner-proxies.d.ts

@@ -5,1 +5,2 @@ /// <reference types="react" />
 export declare const IonBackButtonInner: import("react").ForwardRefExoticComponent<Pick<import("./utils").IonicReactExternalProps<JSX.IonBackButton & import("./ReactProps").ReactProps, HTMLIonBackButtonElement>, "disabled" | "hidden" | "dir" | "slot" | "style" | "title" | "text" | "contextmenu" | "color" | "icon" | "key" | "children" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "className" | "id" | "prefix" | "innerHTML" | "contentEditable" | "inputMode" | "tabIndex" | "mode" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "part" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "type" | "defaultHref"> & import("react").RefAttributes<HTMLIonBackButtonElement>>;
+export declare const IonRouterOutletInner: import("react").ForwardRefExoticComponent<Pick<import("./utils").IonicReactExternalProps<JSX.IonRouterOutlet & import("./ReactProps").ReactProps, HTMLIonRouterOutletElement>, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "color" | "key" | "children" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "className" | "id" | "prefix" | "innerHTML" | "contentEditable" | "inputMode" | "tabIndex" | "mode" | "animated" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "part" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "animation"> & import("react").RefAttributes<HTMLIonRouterOutletElement>>;

dist/types/components/utils/index.d.ts

 import React from 'react';
 export declare const dashToPascalCase: (str: string) => string;
+export declare const camelToDashCase: (str: string) => string;
 export declare type IonicReactExternalProps<PropType, ElementType> = PropType & {
@@ -4,0 +5,0 @@ ref?: React.RefObject<ElementType>;

package.json

 {
   "name": "@ionic/react",
-  "version": "4.8.0-rc.1-1",
+  "version": "4.8.0-rc.2-1",
   "description": "React specific wrapper for @ionic/core",
@@ -41,3 +41,3 @@ "keywords": [
   "dependencies": {
-    "@ionic/core": "^4.8.0-dev.201908211843.e0fa4a5",
+    "@ionic/core": "4.8.0",
     "tslib": "*"
@@ -44,0 +44,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

545908

1.04%

Number of package files

60

3.45%

Lines of code

4692

0.58%

Dependency changes

• + Added

  @ionic/core@4.8.0
  (transitive)

• - Removed

  @ionic/core@4.11.13
  (transitive)

• Updated

  @ionic/core@4.8.0