@ukic/react - npm Package Compare versions

Comparing version 2.1.0-beta.15 to 2.1.0-beta.16

dist/components.d.ts

@@ -15,2 +15,3 @@ /// <reference types="react" />
 export declare const IcDataRow: import("react").ForwardRefExoticComponent<JSX.IcDataRow & Omit<import("react").HTMLAttributes<HTMLIcDataRowElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataRowElement>>;
+export declare const IcDialog: import("react").ForwardRefExoticComponent<JSX.IcDialog & Omit<import("react").HTMLAttributes<HTMLIcDialogElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDialogElement>>;
 export declare const IcDivider: import("react").ForwardRefExoticComponent<JSX.IcDivider & Omit<import("react").HTMLAttributes<HTMLIcDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDividerElement>>;
@@ -17,0 +18,0 @@ export declare const IcFooter: import("react").ForwardRefExoticComponent<JSX.IcFooter & Omit<import("react").HTMLAttributes<HTMLIcFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterElement>>;

dist/components.js

@@ -19,2 +19,3 @@ /* eslint-disable */
 export const IcDataRow = /*@__PURE__*/ createReactComponent('ic-data-row');
+export const IcDialog = /*@__PURE__*/ createReactComponent('ic-dialog');
 export const IcDivider = /*@__PURE__*/ createReactComponent('ic-divider');
@@ -21,0 +22,0 @@ export const IcFooter = /*@__PURE__*/ createReactComponent('ic-footer');

dist/react-component-lib/createComponent.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
 }
-export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
 export {};

dist/react-component-lib/createComponent.js

@@ -12,6 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import React from 'react';
-import { attachProps, createForwardRef, dashToPascalCase, defineCustomElement, isCoveredByReact, mergeRefs, } from './utils';
-export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, customElement) => {
-    defineCustomElement(tagName, customElement);
+import React, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
     const displayName = dashToPascalCase(tagName);
@@ -34,10 +36,16 @@ const ReactComponent = class extends React.Component {
             let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                     const eventName = name.substring(2).toLowerCase();
                     if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
-                        acc[name] = cProps[name];
+                        acc[name] = value;
                     }
                 }
                 else {
-                    acc[name] = cProps[name];
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    const type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
                 }
@@ -50,3 +58,10 @@ return acc;
             const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
-            return React.createElement(tagName, newProps, children);
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return createElement(tagName, newProps, children);
         }
@@ -53,0 +68,0 @@ static get displayName() {

dist/react-component-lib/createOverlayComponent.js

@@ -23,3 +23,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import ReactDOM from 'react-dom';
-import { attachProps, dashToPascalCase, defineCustomElement, setRef, } from './utils';
+import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
 export const createOverlayComponent = (tagName, controller, customElement) => {
@@ -26,0 +26,0 @@ defineCustomElement(tagName, customElement);

dist/react-component-lib/utils/index.js

@@ -13,3 +13,3 @@ import React from 'react';
     return (value) => {
-        refs.forEach(ref => {
+        refs.forEach((ref) => {
             setRef(ref, value);
@@ -27,5 +27,3 @@ });
 export const defineCustomElement = (tagName, customElement) => {
-    if (customElement !== undefined &&
-        typeof customElements !== 'undefined' &&
-        !customElements.get(tagName)) {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
         customElements.define(tagName, customElement);
@@ -32,0 +30,0 @@ }

package.json

 {
   "name": "@ukic/react",
   "sideEffects": false,
-  "version": "2.1.0-beta.15",
+  "version": "2.1.0-beta.16",
   "description": "React-wrapped web components compiled using StencilJS",
@@ -25,7 +25,8 @@ "scripts": {
   "dependencies": {
-    "@ukic/fonts": "^2.1.0-beta.15",
-    "@ukic/web-components": "^2.1.0-beta.15"
+    "@ukic/fonts": "^2.1.0-beta.16",
+    "@ukic/web-components": "^2.1.0-beta.16"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@stencil/react-output-target": "^0.4.0",
     "@storybook/addon-a11y": "^6.4.8",
@@ -69,3 +70,3 @@ "@storybook/addon-actions": "^6.4.8",
   "license": "MIT",
-  "gitHead": "6d62b7b3236a74ffcc29cfdbf13cd792c649874a"
+  "gitHead": "89c27e06ee9dd4dc4b2596c18c8ed21e5865aed3"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69973

increased by6.1%

Lines of code

1111

increased by5.31%

Worsened metrics

Dev dependency count

26

increased by4%

Dependency changes

• Updated@ukic/fonts@^2.1.0-beta.16

• Updated@ukic/web-components@^2.1.0-beta.16