Added React Wrapper Output Target

Author: arnolicious

.eslintrc

@@ -9,5 +9,6 @@
   "rules": {
     "@stencil-community/strict-boolean-conditions": "off",
     "react/jsx-no-bind": "off"
-  }
+  },
+  "ignorePatterns": ["*.config.ts", "react-library/*"]
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "data-view-web-component",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Generic Web Component used to display various hierarchical data in a card format",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@stencil-community/eslint-plugin": "^0.7.2",
+    "@stencil/react-output-target": "^0.5.3",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-mdx-gfm": "^7.6.7",
@@ -43,6 +44,7 @@
     "@storybook/web-components-vite": "^7.6.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
+    "@types/react": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^6",
     "@typescript-eslint/parser": "^6",
     "eslint": "^8.57.0",
@@ -51,8 +53,8 @@
     "jest-cli": "^29.7.0",
     "lit": "^3.0.2",
     "puppeteer": "21.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "storybook": "^7.6.7",
     "typescript": "^5.4.5"
   },

package.json

@@ -0,0 +1,11 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from 'data-view-web-component';
+
+import { defineCustomElements } from 'data-view-web-component/loader';
+
+defineCustomElements();
+export const DataCard = /*@__PURE__*/createReactComponent<JSX.DataCard, HTMLDataCardElement>('data-card');

react-library/lib/components/stencil-generated/index.ts

@@ -0,0 +1,106 @@
+import React, { createElement } from 'react';
+
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+}
+
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+  forwardedRef: React.RefObject<ElementType>;
+  ref?: React.Ref<any>;
+}
+
+export const createReactComponent = <
+  PropType,
+  ElementType extends HTMLStencilElement,
+  ContextStateType = {},
+  ExpandedPropsTypes = {}
+>(
+  tagName: string,
+  ReactComponentContext?: React.Context<ContextStateType>,
+  manipulatePropsFunction?: (
+    originalProps: StencilReactInternalProps<ElementType>,
+    propsToPass: any
+  ) => ExpandedPropsTypes,
+  defineCustomElement?: () => void
+) => {
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
+
+  const displayName = dashToPascalCase(tagName);
+  const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
+    componentEl!: ElementType;
+
+    setComponentElRef = (element: ElementType) => {
+      this.componentEl = element;
+    };
+
+    constructor(props: StencilReactInternalProps<ElementType>) {
+      super(props);
+    }
+
+    componentDidMount() {
+      this.componentDidUpdate(this.props);
+    }
+
+    componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {
+      attachProps(this.componentEl, this.props, prevProps);
+    }
+
+    render() {
+      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+
+      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[name] = value;
+          }
+        } else {
+          // 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);
+      }
+
+      const newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
+        ...propsToPass,
+        ref: mergeRefs(forwardedRef, this.setComponentElRef),
+        style,
+      };
+
+      /**
+       * 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);
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+  };
+
+  // If context was passed to createReactComponent then conditionally add it to the Component Class
+  if (ReactComponentContext) {
+    ReactComponent.contextType = ReactComponentContext;
+  }
+
+  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
+};