From 5e08a0531366644203e20e1aaa597b02204a8025 Mon Sep 17 00:00:00 2001 From: Doug Gibson Date: Mon, 28 Oct 2024 16:25:22 -0400 Subject: [PATCH] Updated stencil to 4.22.2 and include React generated files to try to fix build error. --- package-lock.json | 12 +- .../react-component-lib/attachProps.ts | 125 ++++++++++++++++++ .../react-component-lib/case.ts | 7 + .../react-component-lib/dev.ts | 14 ++ .../react-component-lib/index.tsx | 50 +++++++ packages/web-components/package.json | 2 +- 6 files changed, 203 insertions(+), 7 deletions(-) create mode 100644 packages/react-components/components/stencil-generated/react-component-lib/attachProps.ts create mode 100644 packages/react-components/components/stencil-generated/react-component-lib/case.ts create mode 100644 packages/react-components/components/stencil-generated/react-component-lib/dev.ts create mode 100644 packages/react-components/components/stencil-generated/react-component-lib/index.tsx diff --git a/package-lock.json b/package-lock.json index 161838ba..05291124 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6424,9 +6424,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.22.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.22.1.tgz", - "integrity": "sha512-/vaKFIK/BWpGVDTj3u6TE7Nc2SCqG1PmXPtg3mEpiJw1aJZFar/jrZzbvyBOVQ7TGpDdO1ne3esXAQndj73UTQ==", + "version": "4.22.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.22.2.tgz", + "integrity": "sha512-eq2pYrrnzcLyBRANk0X/VVOfCtD0nCxWnEZ0AVdscuqfDkOjxa6SSZOfEhR9FAvrmESHp8y5jRCVPnf4n5CC4A==", "bin": { "stencil": "bin/stencil" }, @@ -27426,7 +27426,7 @@ }, "packages/react-components": { "name": "@cbpds/react-components", - "version": "0.0.1-develop.15", + "version": "0.0.1-develop.16", "license": "CC0-1.0", "devDependencies": { "@types/react": "^18.2.45", @@ -28009,10 +28009,10 @@ }, "packages/web-components": { "name": "@cbpds/web-components", - "version": "0.0.1-develop.15", + "version": "0.0.1-develop.16", "license": "CC0-1.0", "dependencies": { - "@stencil/core": "^4.22.0", + "@stencil/core": "^4.22.2", "lerna": "8.1.8" }, "devDependencies": { diff --git a/packages/react-components/components/stencil-generated/react-component-lib/attachProps.ts b/packages/react-components/components/stencil-generated/react-component-lib/attachProps.ts new file mode 100644 index 00000000..9a1825f5 --- /dev/null +++ b/packages/react-components/components/stencil-generated/react-component-lib/attachProps.ts @@ -0,0 +1,125 @@ +import { camelToDashCase } from './case'; + +export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => { + // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first + if (node instanceof Element) { + // add any classes in className to the class list + const className = getClassName(node.classList, newProps, oldProps); + if (className !== '') { + node.className = className; + } + + Object.keys(newProps).forEach((name) => { + if ( + name === 'children' || + name === 'style' || + name === 'ref' || + name === 'class' || + name === 'className' || + name === 'forwardedRef' + ) { + return; + } + if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) { + const eventName = name.substring(2); + const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1); + + if (!isCoveredByReact(eventNameLc)) { + syncEvent(node, eventNameLc, newProps[name]); + } + } else { + (node as any)[name] = newProps[name]; + const propType = typeof newProps[name]; + if (propType === 'string') { + node.setAttribute(camelToDashCase(name), newProps[name]); + } + } + }); + } +}; + +export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => { + const newClassProp: string = newProps.className || newProps.class; + const oldClassProp: string = oldProps.className || oldProps.class; + // map the classes to Maps for performance + const currentClasses = arrayToMap(classList); + const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []); + const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []); + const finalClassNames: string[] = []; + // loop through each of the current classes on the component + // to see if it should be a part of the classNames added + currentClasses.forEach((currentClass) => { + if (incomingPropClasses.has(currentClass)) { + // add it as its already included in classnames coming in from newProps + finalClassNames.push(currentClass); + incomingPropClasses.delete(currentClass); + } else if (!oldPropClasses.has(currentClass)) { + // add it as it has NOT been removed by user + finalClassNames.push(currentClass); + } + }); + incomingPropClasses.forEach((s) => finalClassNames.push(s)); + return finalClassNames.join(' '); +}; + +/** + * Transforms a React event name to a browser event name. + */ +export const transformReactEventName = (eventNameSuffix: string) => { + switch (eventNameSuffix) { + case 'doubleclick': + return 'dblclick'; + } + return eventNameSuffix; +}; + +/** + * Checks if an event is supported in the current execution environment. + * @license Modernizr 3.0.0pre (Custom Build) | MIT + */ +export const isCoveredByReact = (eventNameSuffix: string) => { + if (typeof document === 'undefined') { + return true; + } else { + const eventName = 'on' + transformReactEventName(eventNameSuffix); + let isSupported = eventName in document; + + if (!isSupported) { + const element = document.createElement('div'); + element.setAttribute(eventName, 'return;'); + isSupported = typeof (element as any)[eventName] === 'function'; + } + + return isSupported; + } +}; + +export const syncEvent = ( + node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } }, + eventName: string, + newEventHandler?: (e: Event) => any +) => { + const eventStore = node.__events || (node.__events = {}); + const oldEventHandler = eventStore[eventName]; + + // Remove old listener so they don't double up. + if (oldEventHandler) { + node.removeEventListener(eventName, oldEventHandler); + } + + // Bind new listener. + node.addEventListener( + eventName, + (eventStore[eventName] = function handler(e: Event) { + if (newEventHandler) { + newEventHandler.call(this, e); + } + }) + ); +}; + +const arrayToMap = (arr: string[] | DOMTokenList) => { + const map = new Map(); + (arr as string[]).forEach((s: string) => map.set(s, s)); + return map; +}; diff --git a/packages/react-components/components/stencil-generated/react-component-lib/case.ts b/packages/react-components/components/stencil-generated/react-component-lib/case.ts new file mode 100644 index 00000000..786689dc --- /dev/null +++ b/packages/react-components/components/stencil-generated/react-component-lib/case.ts @@ -0,0 +1,7 @@ +export const dashToPascalCase = (str: string) => + str + .toLowerCase() + .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()}`); diff --git a/packages/react-components/components/stencil-generated/react-component-lib/dev.ts b/packages/react-components/components/stencil-generated/react-component-lib/dev.ts new file mode 100644 index 00000000..cc6f9ed0 --- /dev/null +++ b/packages/react-components/components/stencil-generated/react-component-lib/dev.ts @@ -0,0 +1,14 @@ +export const isDevMode = () => { + return process && process.env && process.env.NODE_ENV === 'development'; +}; + +const warnings: { [key: string]: boolean } = {}; + +export const deprecationWarning = (key: string, message: string) => { + if (isDevMode()) { + if (!warnings[key]) { + console.warn(message); + warnings[key] = true; + } + } +}; diff --git a/packages/react-components/components/stencil-generated/react-component-lib/index.tsx b/packages/react-components/components/stencil-generated/react-component-lib/index.tsx new file mode 100644 index 00000000..a66bd02d --- /dev/null +++ b/packages/react-components/components/stencil-generated/react-component-lib/index.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +import type { StyleReactProps } from '../interfaces'; + +export type StencilReactExternalProps = PropType & + Omit, 'style'> & + StyleReactProps; + +// This will be replaced with React.ForwardedRef when react-output-target is upgraded to React v17 +export type StencilReactForwardedRef = ((instance: T | null) => void) | React.MutableRefObject | null; + +export const setRef = (ref: StencilReactForwardedRef | React.Ref | undefined, value: any) => { + if (typeof ref === 'function') { + ref(value); + } else if (ref != null) { + // Cast as a MutableRef so we can assign current + (ref as React.MutableRefObject).current = value; + } +}; + +export const mergeRefs = ( + ...refs: (StencilReactForwardedRef | React.Ref | undefined)[] +): React.RefCallback => { + return (value: any) => { + refs.forEach((ref) => { + setRef(ref, value); + }); + }; +}; + +export const createForwardRef = (ReactComponent: any, displayName: string) => { + const forwardRef = ( + props: StencilReactExternalProps, + ref: StencilReactForwardedRef + ) => { + return ; + }; + forwardRef.displayName = displayName; + + return React.forwardRef(forwardRef); +}; + +export const defineCustomElement = (tagName: string, customElement: any) => { + if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) { + customElements.define(tagName, customElement); + } +}; + +export * from './attachProps'; +export * from './case'; diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 8658732f..3f90e71d 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -37,7 +37,7 @@ "build-pages": "storybook build --output-dir storybook-static" }, "dependencies": { - "@stencil/core": "^4.22.0", + "@stencil/core": "^4.22.2", "lerna": "8.1.8" }, "devDependencies": {