chore(deps): update to stencil v3 (#26663)

packages/react/src/components/react-component-lib/createComponent.tsx

@@ -1,12 +1,6 @@
 import React, { createElement } from 'react';
 
-import {
-  attachProps,
-  createForwardRef,
-  dashToPascalCase,
-  isCoveredByReact,
-  mergeRefs,
-} from './utils';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
 
 export interface HTMLStencilElement extends HTMLElement {
   componentOnReady(): Promise<this>;
@@ -27,9 +21,9 @@ export const createReactComponent = <
   ReactComponentContext?: React.Context<ContextStateType>,
   manipulatePropsFunction?: (
     originalProps: StencilReactInternalProps<ElementType>,
-    propsToPass: any,
+    propsToPass: any
   ) => ExpandedPropsTypes,
-  defineCustomElement?: () => void,
+  defineCustomElement?: () => void
 ) => {
   if (defineCustomElement !== undefined) {
     defineCustomElement();
@@ -58,17 +52,25 @@ export const createReactComponent = <
     render() {
       const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
 
-      let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+      let propsToPass = Object.keys(cProps).reduce((acc: any, name) => {
+        const value = (cProps as any)[name];
+
         if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
           const eventName = name.substring(2).toLowerCase();
           if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
-            (acc as any)[name] = (cProps as any)[name];
+            acc[name] = value;
           }
         } else {
-          (acc as any)[name] = (cProps as any)[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;
+          }
         }
         return acc;
-      }, {});
+      }, {} as ExpandedPropsTypes);
 
       if (manipulatePropsFunction) {
         propsToPass = manipulatePropsFunction(this.props, propsToPass);

packages/react/src/components/react-component-lib/createOverlayComponent.tsx

@@ -2,13 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { OverlayEventDetail } from './interfaces';
-import {
-  StencilReactForwardedRef,
-  attachProps,
-  dashToPascalCase,
-  defineCustomElement,
-  setRef,
-} from './utils';
+import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
 
 interface OverlayElement extends HTMLElement {
   present: () => Promise<void>;
@@ -24,10 +18,7 @@ export interface ReactOverlayProps {
   onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
 }
 
-export const createOverlayComponent = <
-  OverlayComponent extends object,
-  OverlayType extends OverlayElement
->(
+export const createOverlayComponent = <OverlayComponent extends object, OverlayType extends OverlayElement>(
   tagName: string,
   controller: { create: (options: any) => Promise<OverlayType> },
   customElement?: any
@@ -79,7 +70,7 @@ export const createOverlayComponent = <
       if (this.props.onDidDismiss) {
         this.props.onDidDismiss(event);
       }
-      setRef(this.props.forwardedRef, null)
+      setRef(this.props.forwardedRef, null);
     }
 
     shouldComponentUpdate(nextProps: Props) {
@@ -113,25 +104,14 @@ export const createOverlayComponent = <
     }
 
     async present(prevProps?: Props) {
-      const {
-        children,
-        isOpen,
-        onDidDismiss,
-        onDidPresent,
-        onWillDismiss,
-        onWillPresent,
-        ...cProps
-      } = this.props;
+      const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
       const elementProps = {
         ...cProps,
         ref: this.props.forwardedRef,
         [didDismissEventName]: this.handleDismiss,
-        [didPresentEventName]: (e: CustomEvent) =>
-          this.props.onDidPresent && this.props.onDidPresent(e),
-        [willDismissEventName]: (e: CustomEvent) =>
-          this.props.onWillDismiss && this.props.onWillDismiss(e),
-        [willPresentEventName]: (e: CustomEvent) =>
-          this.props.onWillPresent && this.props.onWillPresent(e),
+        [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),
+        [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+        [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e),
       };
 
       this.overlay = await controller.create({

packages/react/src/components/react-component-lib/utils/case.ts

@@ -4,5 +4,4 @@ export const dashToPascalCase = (str: string) =>
     .split('-')
     .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
-export const camelToDashCase = (str: string) =>
-  str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);
+export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);

packages/react/src/components/react-component-lib/utils/index.tsx

@@ -11,10 +11,10 @@ export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React
 
 export const setRef = (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => {
   if (typeof ref === 'function') {
-    ref(value)
+    ref(value);
   } else if (ref != null) {
     // Cast as a MutableRef so we can assign current
-    (ref as React.MutableRefObject<any>).current = value
+    (ref as React.MutableRefObject<any>).current = value;
   }
 };
 
@@ -22,19 +22,16 @@ export const mergeRefs = (
   ...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]
 ): React.RefCallback<any> => {
   return (value: any) => {
-    refs.forEach(ref => {
-      setRef(ref, value)
-    })
-  }
+    refs.forEach((ref) => {
+      setRef(ref, value);
+    });
+  };
 };
 
-export const createForwardRef = <PropType, ElementType>(
-  ReactComponent: any,
-  displayName: string,
-) => {
+export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
   const forwardRef = (
     props: StencilReactExternalProps<PropType, ElementType>,
-    ref: StencilReactForwardedRef<ElementType>,
+    ref: StencilReactForwardedRef<ElementType>
   ) => {
     return <ReactComponent {...props} forwardedRef={ref} />;
   };
@@ -44,14 +41,10 @@ export const createForwardRef = <PropType, ElementType>(
 };
 
 export const defineCustomElement = (tagName: string, customElement: any) => {
-  if (
-    customElement !== undefined &&
-    typeof customElements !== 'undefined' &&
-    !customElements.get(tagName)
-  ) {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
     customElements.define(tagName, customElement);
   }
-}
+};
 
 export * from './attachProps';
 export * from './case';