@peculiar/certificates-viewer-react 3.10.0 → 3.10.1-alpha.14

package/dist/cjs/components.js

@@ -7,13 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PeculiarCrlViewer = exports.PeculiarCsrViewer = exports.PeculiarCertificatesViewer = exports.PeculiarCertificateViewer = exports.PeculiarCertificateDecoder = exports.PeculiarAttributeCertificateViewer = void 0;
+exports.PeculiarCsrViewer = exports.PeculiarCrlViewer = exports.PeculiarCertificatesViewer = exports.PeculiarCertificateViewer = exports.PeculiarAttributeCertificateViewer = void 0;
 /* eslint-disable */
 /* tslint:disable */
+/* auto-generated react proxies */
 const react_component_lib_1 = require("./react-component-lib");
-exports.PeculiarAttributeCertificateViewer = (0, react_component_lib_1.createReactComponent)('peculiar-attribute-certificate-viewer');
-exports.PeculiarCertificateDecoder = (0, react_component_lib_1.createReactComponent)('peculiar-certificate-decoder');
-exports.PeculiarCertificateViewer = (0, react_component_lib_1.createReactComponent)('peculiar-certificate-viewer');
-exports.PeculiarCertificatesViewer = (0, react_component_lib_1.createReactComponent)('peculiar-certificates-viewer');
-exports.PeculiarCsrViewer = (0, react_component_lib_1.createReactComponent)('peculiar-csr-viewer');
-exports.PeculiarCrlViewer = (0, react_component_lib_1.createReactComponent)('peculiar-crl-viewer');
+const peculiar_attribute_certificate_viewer_js_1 = require("@peculiar/certificates-viewer/components/peculiar-attribute-certificate-viewer.js");
+const peculiar_certificate_viewer_js_1 = require("@peculiar/certificates-viewer/components/peculiar-certificate-viewer.js");
+const peculiar_certificates_viewer_js_1 = require("@peculiar/certificates-viewer/components/peculiar-certificates-viewer.js");
+const peculiar_crl_viewer_js_1 = require("@peculiar/certificates-viewer/components/peculiar-crl-viewer.js");
+const peculiar_csr_viewer_js_1 = require("@peculiar/certificates-viewer/components/peculiar-csr-viewer.js");
+exports.PeculiarAttributeCertificateViewer = (0, react_component_lib_1.createReactComponent)('peculiar-attribute-certificate-viewer', undefined, undefined, peculiar_attribute_certificate_viewer_js_1.defineCustomElement);
+exports.PeculiarCertificateViewer = (0, react_component_lib_1.createReactComponent)('peculiar-certificate-viewer', undefined, undefined, peculiar_certificate_viewer_js_1.defineCustomElement);
+exports.PeculiarCertificatesViewer = (0, react_component_lib_1.createReactComponent)('peculiar-certificates-viewer', undefined, undefined, peculiar_certificates_viewer_js_1.defineCustomElement);
+exports.PeculiarCrlViewer = (0, react_component_lib_1.createReactComponent)('peculiar-crl-viewer', undefined, undefined, peculiar_crl_viewer_js_1.defineCustomElement);
+exports.PeculiarCsrViewer = (0, react_component_lib_1.createReactComponent)('peculiar-csr-viewer', undefined, undefined, peculiar_csr_viewer_js_1.defineCustomElement);

package/dist/cjs/index.js

@@ -21,9 +21,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const loader_1 = require("@peculiar/certificates-viewer/loader");
 __exportStar(require("./components"), exports);
-if (typeof window !== 'undefined') {
-    (0, loader_1.applyPolyfills)()
-        .then(() => (0, loader_1.defineCustomElements)(window));
-}

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

@@ -14,7 +14,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createReactComponent = void 0;
 const React = require("react");
 const utils_1 = require("./utils");
-const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction) => {
+const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
     const displayName = (0, utils_1.dashToPascalCase)(tagName);
     const ReactComponent = class extends React.Component {
         constructor(props) {
@@ -32,21 +35,34 @@ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFun
         render() {
             const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
             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' && (0, utils_1.isCoveredByReact)(eventName, document)) {
-                        acc[name] = cProps[name];
+                    if (typeof document !== 'undefined' && (0, utils_1.isCoveredByReact)(eventName)) {
+                        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[(0, utils_1.camelToDashCase)(name)] = value;
+                    }
                 }
                 return acc;
             }, {});
             if (manipulatePropsFunction) {
                 propsToPass = manipulatePropsFunction(this.props, propsToPass);
             }
-            let newProps = Object.assign(Object.assign({}, propsToPass), { ref: (0, utils_1.mergeRefs)(forwardedRef, this.setComponentElRef), style });
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: (0, utils_1.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 React.createElement(tagName, newProps, children);
         }
         static get displayName() {

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.syncEvent = exports.isCoveredByReact = exports.getClassName = exports.attachProps = void 0;
+exports.syncEvent = exports.isCoveredByReact = exports.transformReactEventName = exports.getClassName = exports.attachProps = void 0;
 const case_1 = require("./case");
 const attachProps = (node, newProps, oldProps = {}) => {
     // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
@@ -22,7 +22,7 @@ const attachProps = (node, newProps, oldProps = {}) => {
             if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                 const eventName = name.substring(2);
                 const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-                if (typeof document !== 'undefined' && !(0, exports.isCoveredByReact)(eventNameLc, document)) {
+                if (!(0, exports.isCoveredByReact)(eventNameLc)) {
                     (0, exports.syncEvent)(node, eventNameLc, newProps[name]);
                 }
             }
@@ -32,9 +32,6 @@ const attachProps = (node, newProps, oldProps = {}) => {
                 if (propType === 'string') {
                     node.setAttribute((0, case_1.camelToDashCase)(name), newProps[name]);
                 }
-                else {
-                    node[name] = newProps[name];
-                }
             }
         });
     }
@@ -65,19 +62,35 @@ const getClassName = (classList, newProps, oldProps) => {
     return finalClassNames.join(' ');
 };
 exports.getClassName = getClassName;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+const transformReactEventName = (eventNameSuffix) => {
+    switch (eventNameSuffix) {
+        case 'doubleclick':
+            return 'dblclick';
+    }
+    return eventNameSuffix;
+};
+exports.transformReactEventName = transformReactEventName;
 /**
  * Checks if an event is supported in the current execution environment.
  * @license Modernizr 3.0.0pre (Custom Build) | MIT
  */
-const isCoveredByReact = (eventNameSuffix, doc) => {
-    const eventName = `on${eventNameSuffix}`;
-    let isSupported = eventName in doc;
-    if (!isSupported) {
-        const element = doc.createElement('div');
-        element.setAttribute(eventName, 'return;');
-        isSupported = typeof element[eventName] === 'function';
+const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        const eventName = 'on' + (0, exports.transformReactEventName)(eventNameSuffix);
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
     }
-    return isSupported;
 };
 exports.isCoveredByReact = isCoveredByReact;
 const syncEvent = (node, eventName, newEventHandler) => {

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

@@ -14,18 +14,25 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createForwardRef = exports.mergeRefs = void 0;
+exports.defineCustomElement = exports.createForwardRef = exports.mergeRefs = exports.setRef = void 0;
 const React = require("react");
-// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx
-const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
+const setRef = (ref, value) => {
     if (typeof ref === 'function') {
         ref(value);
     }
     else if (ref != null) {
-        // This is typed as readonly so we need to allow for override
+        // Cast as a MutableRef so we can assign current
         ref.current = value;
     }
-});
+};
+exports.setRef = setRef;
+const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            (0, exports.setRef)(ref, value);
+        });
+    };
+};
 exports.mergeRefs = mergeRefs;
 const createForwardRef = (ReactComponent, displayName) => {
     const forwardRef = (props, ref) => {
@@ -35,5 +42,11 @@ const createForwardRef = (ReactComponent, displayName) => {
     return React.forwardRef(forwardRef);
 };
 exports.createForwardRef = createForwardRef;
+const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+exports.defineCustomElement = defineCustomElement;
 __exportStar(require("./attachProps"), exports);
 __exportStar(require("./case"), exports);

package/dist/esm/components.js

@@ -7,10 +7,15 @@
  */
 /* eslint-disable */
 /* tslint:disable */
+/* auto-generated react proxies */
 import { createReactComponent } from './react-component-lib';
-export const PeculiarAttributeCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-attribute-certificate-viewer');
-export const PeculiarCertificateDecoder = /*@__PURE__*/ createReactComponent('peculiar-certificate-decoder');
-export const PeculiarCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-certificate-viewer');
-export const PeculiarCertificatesViewer = /*@__PURE__*/ createReactComponent('peculiar-certificates-viewer');
-export const PeculiarCsrViewer = /*@__PURE__*/ createReactComponent('peculiar-csr-viewer');
-export const PeculiarCrlViewer = /*@__PURE__*/ createReactComponent('peculiar-crl-viewer');
+import { defineCustomElement as definePeculiarAttributeCertificateViewer } from '@peculiar/certificates-viewer/components/peculiar-attribute-certificate-viewer.js';
+import { defineCustomElement as definePeculiarCertificateViewer } from '@peculiar/certificates-viewer/components/peculiar-certificate-viewer.js';
+import { defineCustomElement as definePeculiarCertificatesViewer } from '@peculiar/certificates-viewer/components/peculiar-certificates-viewer.js';
+import { defineCustomElement as definePeculiarCrlViewer } from '@peculiar/certificates-viewer/components/peculiar-crl-viewer.js';
+import { defineCustomElement as definePeculiarCsrViewer } from '@peculiar/certificates-viewer/components/peculiar-csr-viewer.js';
+export const PeculiarAttributeCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-attribute-certificate-viewer', undefined, undefined, definePeculiarAttributeCertificateViewer);
+export const PeculiarCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-certificate-viewer', undefined, undefined, definePeculiarCertificateViewer);
+export const PeculiarCertificatesViewer = /*@__PURE__*/ createReactComponent('peculiar-certificates-viewer', undefined, undefined, definePeculiarCertificatesViewer);
+export const PeculiarCrlViewer = /*@__PURE__*/ createReactComponent('peculiar-crl-viewer', undefined, undefined, definePeculiarCrlViewer);
+export const PeculiarCsrViewer = /*@__PURE__*/ createReactComponent('peculiar-csr-viewer', undefined, undefined, definePeculiarCsrViewer);

package/dist/esm/index.js

@@ -5,9 +5,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { defineCustomElements, applyPolyfills } from '@peculiar/certificates-viewer/loader';
 export * from './components';
-if (typeof window !== 'undefined') {
-    applyPolyfills()
-        .then(() => defineCustomElements(window));
-}

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

@@ -10,8 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { attachProps, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
-export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction) => {
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
     const displayName = dashToPascalCase(tagName);
     const ReactComponent = class extends React.Component {
         constructor(props) {
@@ -29,21 +32,34 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
         render() {
             const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
             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, document)) {
-                        acc[name] = cProps[name];
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        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;
+                    }
                 }
                 return acc;
             }, {});
             if (manipulatePropsFunction) {
                 propsToPass = manipulatePropsFunction(this.props, propsToPass);
             }
-            let newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            const newProps = Object.assign(Object.assign({}, 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 React.createElement(tagName, newProps, children);
         }
         static get displayName() {

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

@@ -19,7 +19,7 @@ export const attachProps = (node, newProps, oldProps = {}) => {
             if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                 const eventName = name.substring(2);
                 const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-                if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) {
+                if (!isCoveredByReact(eventNameLc)) {
                     syncEvent(node, eventNameLc, newProps[name]);
                 }
             }
@@ -29,9 +29,6 @@ export const attachProps = (node, newProps, oldProps = {}) => {
                 if (propType === 'string') {
                     node.setAttribute(camelToDashCase(name), newProps[name]);
                 }
-                else {
-                    node[name] = newProps[name];
-                }
             }
         });
     }
@@ -60,19 +57,34 @@ export const getClassName = (classList, newProps, oldProps) => {
     incomingPropClasses.forEach((s) => finalClassNames.push(s));
     return finalClassNames.join(' ');
 };
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix) => {
+    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, doc) => {
-    const eventName = `on${eventNameSuffix}`;
-    let isSupported = eventName in doc;
-    if (!isSupported) {
-        const element = doc.createElement('div');
-        element.setAttribute(eventName, 'return;');
-        isSupported = typeof element[eventName] === 'function';
+export const isCoveredByReact = (eventNameSuffix) => {
+    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[eventName] === 'function';
+        }
+        return isSupported;
     }
-    return isSupported;
 };
 export const syncEvent = (node, eventName, newEventHandler) => {
     const eventStore = node.__events || (node.__events = {});

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

@@ -1,14 +1,20 @@
 import * as React from 'react';
-// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx
-export const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
+export const setRef = (ref, value) => {
     if (typeof ref === 'function') {
         ref(value);
     }
     else if (ref != null) {
-        // This is typed as readonly so we need to allow for override
+        // Cast as a MutableRef so we can assign current
         ref.current = value;
     }
-});
+};
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            setRef(ref, value);
+        });
+    };
+};
 export const createForwardRef = (ReactComponent, displayName) => {
     const forwardRef = (props, ref) => {
         return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
@@ -16,5 +22,10 @@ export const createForwardRef = (ReactComponent, displayName) => {
     forwardRef.displayName = displayName;
     return React.forwardRef(forwardRef);
 };
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
 export * from './attachProps';
 export * from './case';

package/dist/esnext/components.js

@@ -7,10 +7,15 @@
  */
 /* eslint-disable */
 /* tslint:disable */
+/* auto-generated react proxies */
 import { createReactComponent } from './react-component-lib';
-export const PeculiarAttributeCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-attribute-certificate-viewer');
-export const PeculiarCertificateDecoder = /*@__PURE__*/ createReactComponent('peculiar-certificate-decoder');
-export const PeculiarCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-certificate-viewer');
-export const PeculiarCertificatesViewer = /*@__PURE__*/ createReactComponent('peculiar-certificates-viewer');
-export const PeculiarCsrViewer = /*@__PURE__*/ createReactComponent('peculiar-csr-viewer');
-export const PeculiarCrlViewer = /*@__PURE__*/ createReactComponent('peculiar-crl-viewer');
+import { defineCustomElement as definePeculiarAttributeCertificateViewer } from '@peculiar/certificates-viewer/components/peculiar-attribute-certificate-viewer.js';
+import { defineCustomElement as definePeculiarCertificateViewer } from '@peculiar/certificates-viewer/components/peculiar-certificate-viewer.js';
+import { defineCustomElement as definePeculiarCertificatesViewer } from '@peculiar/certificates-viewer/components/peculiar-certificates-viewer.js';
+import { defineCustomElement as definePeculiarCrlViewer } from '@peculiar/certificates-viewer/components/peculiar-crl-viewer.js';
+import { defineCustomElement as definePeculiarCsrViewer } from '@peculiar/certificates-viewer/components/peculiar-csr-viewer.js';
+export const PeculiarAttributeCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-attribute-certificate-viewer', undefined, undefined, definePeculiarAttributeCertificateViewer);
+export const PeculiarCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-certificate-viewer', undefined, undefined, definePeculiarCertificateViewer);
+export const PeculiarCertificatesViewer = /*@__PURE__*/ createReactComponent('peculiar-certificates-viewer', undefined, undefined, definePeculiarCertificatesViewer);
+export const PeculiarCrlViewer = /*@__PURE__*/ createReactComponent('peculiar-crl-viewer', undefined, undefined, definePeculiarCrlViewer);
+export const PeculiarCsrViewer = /*@__PURE__*/ createReactComponent('peculiar-csr-viewer', undefined, undefined, definePeculiarCsrViewer);

package/dist/esnext/index.js

@@ -5,9 +5,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { defineCustomElements, applyPolyfills } from '@peculiar/certificates-viewer/loader';
 export * from './components';
-if (typeof window !== 'undefined') {
-    applyPolyfills()
-        .then(() => defineCustomElements(window));
-}

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { attachProps, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
-export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction) => {
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
     const displayName = dashToPascalCase(tagName);
     const ReactComponent = class extends React.Component {
         componentEl;
@@ -19,25 +22,38 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
         render() {
             const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
             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, document)) {
-                        acc[name] = cProps[name];
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        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;
+                    }
                 }
                 return acc;
             }, {});
             if (manipulatePropsFunction) {
                 propsToPass = manipulatePropsFunction(this.props, propsToPass);
             }
-            let newProps = {
+            const newProps = {
                 ...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 React.createElement(tagName, newProps, children);
         }
         static get displayName() {

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

@@ -19,7 +19,7 @@ export const attachProps = (node, newProps, oldProps = {}) => {
             if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                 const eventName = name.substring(2);
                 const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-                if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) {
+                if (!isCoveredByReact(eventNameLc)) {
                     syncEvent(node, eventNameLc, newProps[name]);
                 }
             }
@@ -29,9 +29,6 @@ export const attachProps = (node, newProps, oldProps = {}) => {
                 if (propType === 'string') {
                     node.setAttribute(camelToDashCase(name), newProps[name]);
                 }
-                else {
-                    node[name] = newProps[name];
-                }
             }
         });
     }
@@ -60,19 +57,34 @@ export const getClassName = (classList, newProps, oldProps) => {
     incomingPropClasses.forEach((s) => finalClassNames.push(s));
     return finalClassNames.join(' ');
 };
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix) => {
+    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, doc) => {
-    const eventName = `on${eventNameSuffix}`;
-    let isSupported = eventName in doc;
-    if (!isSupported) {
-        const element = doc.createElement('div');
-        element.setAttribute(eventName, 'return;');
-        isSupported = typeof element[eventName] === 'function';
+export const isCoveredByReact = (eventNameSuffix) => {
+    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[eventName] === 'function';
+        }
+        return isSupported;
     }
-    return isSupported;
 };
 export const syncEvent = (node, eventName, newEventHandler) => {
     const eventStore = node.__events || (node.__events = {});

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

@@ -1,14 +1,20 @@
 import * as React from 'react';
-// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx
-export const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
+export const setRef = (ref, value) => {
     if (typeof ref === 'function') {
         ref(value);
     }
     else if (ref != null) {
-        // This is typed as readonly so we need to allow for override
+        // Cast as a MutableRef so we can assign current
         ref.current = value;
     }
-});
+};
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            setRef(ref, value);
+        });
+    };
+};
 export const createForwardRef = (ReactComponent, displayName) => {
     const forwardRef = (props, ref) => {
         return React.createElement(ReactComponent, { ...props, forwardedRef: ref });
@@ -16,5 +22,10 @@ export const createForwardRef = (ReactComponent, displayName) => {
     forwardRef.displayName = displayName;
     return React.forwardRef(forwardRef);
 };
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
 export * from './attachProps';
 export * from './case';

package/dist/types/components.d.ts

@@ -6,10 +6,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { JSX } from '@peculiar/certificates-viewer';
+import type { JSX } from '@peculiar/certificates-viewer/components';
 export declare const PeculiarAttributeCertificateViewer: import("react").ForwardRefExoticComponent<JSX.PeculiarAttributeCertificateViewer & Omit<import("react").HTMLAttributes<HTMLPeculiarAttributeCertificateViewerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLPeculiarAttributeCertificateViewerElement>>;
-export declare const PeculiarCertificateDecoder: import("react").ForwardRefExoticComponent<JSX.PeculiarCertificateDecoder & Omit<import("react").HTMLAttributes<HTMLPeculiarCertificateDecoderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLPeculiarCertificateDecoderElement>>;
 export declare const PeculiarCertificateViewer: import("react").ForwardRefExoticComponent<JSX.PeculiarCertificateViewer & Omit<import("react").HTMLAttributes<HTMLPeculiarCertificateViewerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLPeculiarCertificateViewerElement>>;
 export declare const PeculiarCertificatesViewer: import("react").ForwardRefExoticComponent<JSX.PeculiarCertificatesViewer & Omit<import("react").HTMLAttributes<HTMLPeculiarCertificatesViewerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLPeculiarCertificatesViewerElement>>;
-export declare const PeculiarCsrViewer: import("react").ForwardRefExoticComponent<JSX.PeculiarCsrViewer & Omit<import("react").HTMLAttributes<HTMLPeculiarCsrViewerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLPeculiarCsrViewerElement>>;
 export declare const PeculiarCrlViewer: import("react").ForwardRefExoticComponent<JSX.PeculiarCrlViewer & Omit<import("react").HTMLAttributes<HTMLPeculiarCrlViewerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLPeculiarCrlViewerElement>>;
+export declare const PeculiarCsrViewer: import("react").ForwardRefExoticComponent<JSX.PeculiarCsrViewer & Omit<import("react").HTMLAttributes<HTMLPeculiarCsrViewerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLPeculiarCsrViewerElement>>;

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

@@ -6,5 +6,5 @@ interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<El
     forwardedRef: React.RefObject<ElementType>;
     ref?: React.Ref<any>;
 }
-export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) => 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 {};

package/dist/types/react-component-lib/utils/attachProps.d.ts

@@ -1,10 +1,14 @@
 export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
 export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export declare const transformReactEventName: (eventNameSuffix: string) => string;
 /**
  * Checks if an event is supported in the current execution environment.
  * @license Modernizr 3.0.0pre (Custom Build) | MIT
  */
-export declare const isCoveredByReact: (eventNameSuffix: string, doc: Document) => boolean;
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
 export declare const syncEvent: (node: Element & {
     __events?: {
         [key: string]: (e: Event) => any;

package/dist/types/react-component-lib/utils/index.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import type { StyleReactProps } from '../interfaces';
 export declare type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
-export declare const mergeRefs: <ElementType>(...refs: React.Ref<ElementType>[]) => (value: ElementType) => void;
+export declare type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
 export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
 export * from './attachProps';
 export * from './case';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peculiar/certificates-viewer-react",
-  "version": "3.10.0",
+  "version": "3.10.1-alpha.14+849a2da",
   "private": false,
   "description": "",
   "main": "dist/cjs/index.js",
@@ -28,18 +28,18 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/node": "^15.6.1",
+    "@types/node": "^16.11.7",
     "@types/react": "^16.9.46",
     "react": "^16.13.1",
     "rimraf": "^3.0.2",
     "typescript": "^4.0.5"
   },
   "dependencies": {
-    "@peculiar/certificates-viewer": "^3.10.0",
+    "@peculiar/certificates-viewer": "^3.10.1-alpha.14+849a2da",
     "tslib": "^2.4.1"
   },
   "peerDependencies": {
     "react": ">=16.13.1"
   },
-  "gitHead": "ed9ed6b1162bbaaccbfa174bd131b70838fa6161"
+  "gitHead": "849a2da6283e42f3f03a3466d265718ce37bcf5b"
 }