@heartlandone/vega-react 1.26.0 → 1.27.0

package/dist/components.d.ts

@@ -5,6 +5,7 @@ export declare const VegaAppFooter: import("react").ForwardRefExoticComponent<JS
 export declare const VegaAppHeaderButton: import("react").ForwardRefExoticComponent<JSX.VegaAppHeaderButton & Omit<import("react").HTMLAttributes<HTMLVegaAppHeaderButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaAppHeaderButtonElement>>;
 export declare const VegaBadge: import("react").ForwardRefExoticComponent<JSX.VegaBadge & Omit<import("react").HTMLAttributes<HTMLVegaBadgeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaBadgeElement>>;
 export declare const VegaBanner: import("react").ForwardRefExoticComponent<JSX.VegaBanner & Omit<import("react").HTMLAttributes<HTMLVegaBannerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaBannerElement>>;
+export declare const VegaBox: import("react").ForwardRefExoticComponent<JSX.VegaBox & Omit<import("react").HTMLAttributes<HTMLVegaBoxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaBoxElement>>;
 export declare const VegaButton: import("react").ForwardRefExoticComponent<JSX.VegaButton & Omit<import("react").HTMLAttributes<HTMLVegaButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaButtonElement>>;
 export declare const VegaButtonCircle: import("react").ForwardRefExoticComponent<JSX.VegaButtonCircle & Omit<import("react").HTMLAttributes<HTMLVegaButtonCircleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaButtonCircleElement>>;
 export declare const VegaButtonLink: import("react").ForwardRefExoticComponent<JSX.VegaButtonLink & Omit<import("react").HTMLAttributes<HTMLVegaButtonLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaButtonLinkElement>>;

package/dist/components.js

@@ -9,6 +9,7 @@ export const VegaAppFooter = /*@__PURE__*/ createReactComponent('vega-app-footer
 export const VegaAppHeaderButton = /*@__PURE__*/ createReactComponent('vega-app-header-button');
 export const VegaBadge = /*@__PURE__*/ createReactComponent('vega-badge');
 export const VegaBanner = /*@__PURE__*/ createReactComponent('vega-banner');
+export const VegaBox = /*@__PURE__*/ createReactComponent('vega-box');
 export const VegaButton = /*@__PURE__*/ createReactComponent('vega-button');
 export const VegaButtonCircle = /*@__PURE__*/ createReactComponent('vega-button-circle');
 export const VegaButtonLink = /*@__PURE__*/ createReactComponent('vega-button-link');

package/dist/react-component-lib/createComponent.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { createElement } from 'react';
 import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
+import { FeatureFlag } from '@heartlandone/vega';
 export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
     if (defineCustomElement !== undefined) {
         defineCustomElement();
@@ -22,9 +23,19 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
             this.setComponentElRef = (element) => {
                 this.componentEl = element;
             };
+            /**
+             * While VEGA components use some keyword like `widnow` which only for browser environment, the SSR will not work as expect.
+             * To skip compare for SSR and CSR in Hydation we use same temporary dom. that will avoid Hydation failed and emit error messages.
+             * The `canRender` state is work for this, while it false we return the temporary dom for both SSR and CSR to skip Hydation check,
+             * while component did mount, we set it as true and then we can realy render the component.
+             */
+            this.state = { canRender: false };
         }
         componentDidMount() {
             this.componentDidUpdate(this.props);
+            if (FeatureFlag.isEnabled('VEGA_REACT.PREVENT_SSR')) {
+                this.setState({ canRender: true });
+            }
         }
         componentDidUpdate(prevProps) {
             attachProps(this.componentEl, this.props, prevProps);
@@ -60,7 +71,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
              * React.createElement causes all elements to be rendered
              * as <tagname> instead of the actual Web Component.
              */
-            return createElement(tagName, newProps, children);
+            return (!FeatureFlag.isEnabled('VEGA_REACT.PREVENT_SSR') || this.state.canRender) ? createElement(tagName, newProps, children) : React.createElement(React.Fragment, null);
         }
         static get displayName() {
             return displayName;

package/dist/react-component-lib/utils/attachProps.js

@@ -24,11 +24,13 @@ export const attachProps = (node, newProps, oldProps = {}) => {
                 }
             }
             else {
-                node[name] = newProps[name];
-                const propType = typeof newProps[name];
-                if (propType === 'string') {
-                    node.setAttribute(camelToDashCase(name), newProps[name]);
-                }
+                node.componentOnReady().then(() => {
+                    node[name] = newProps[name];
+                    const propType = typeof newProps[name];
+                    if (propType === 'string') {
+                        node.setAttribute(camelToDashCase(name), newProps[name]);
+                    }
+                });
             }
         });
     }

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@heartlandone/vega-react",
   "sideEffects": false,
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "React specific wrapper for @heartlandone/vega",
   "scripts": {
+    "stencil-postbuild": "node ./src/scripts/stencil-post-build-script.js",
     "build": "npm run clean && npm run compile",
     "clean": "rm -rf dist",
     "compile": "npm run tsc",
@@ -37,7 +38,7 @@
     "typescript": "^4.0.0"
   },
   "dependencies": {
-    "@heartlandone/vega": "1.26.0"
+    "@heartlandone/vega": "1.27.0"
   },
   "peerDependencies": {
     "react": ">=16.7.0",