wc-react - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0-preview1

dist/esm/Wc.d.ts

@@ -6,3 +6,3 @@ import React, { Component } from 'react';
 export declare type WcTypeProps = WcProps & {
-    type: string | Function;
+    wcType: string | Function;
 };
@@ -26,3 +26,3 @@ /**
     /**
-     * Gets the web component tag name from the 'type' prop
+     * Gets the web component tag name from the 'wcType' prop
      *
@@ -109,2 +109,2 @@ * @protected
  */
-export declare const wrapWc: <T = WcProps>(tag: TimerHandler) => React.FC<T>;
+export declare const wrapWc: <T = WcProps>(tag: TimerHandler) => React.FC<T & React.HTMLAttributes<any>>;

dist/esm/Wc.js

 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { Component } from 'react';
-const ignoredProps = new Set(['children', 'type']);
+const ignoredProps = new Set(['children', 'wcType']);
 /**
@@ -22,3 +22,3 @@ * React Web Component wrapper Component
     /**
-     * Gets the web component tag name from the 'type' prop
+     * Gets the web component tag name from the 'wcType' prop
      *
@@ -31,10 +31,11 @@ * @protected
         let tag;
-        if (typeof this.props.type === 'function') {
+        // when class is passed instead of tag name
+        if (typeof this.props.wcType === 'function') {
             // convert to dash case
-            tag = this.props.type.name
+            tag = this.props.wcType.name
                 .replace(/([a-zA-Z])(?=[A-Z])/g, '$1-')
                 .toLowerCase();
         }
-        else if (typeof this.props.type === 'string') {
-            tag = this.props.type;
+        else if (typeof this.props.wcType === 'string') {
+            tag = this.props.wcType;
         }
@@ -52,3 +53,3 @@ return tag;
         if (!tag) {
-            throw '"type" must be set!';
+            throw '"wcType" must be set!';
         }
@@ -169,3 +170,7 @@ return React.createElement(tag, { ref: (element) => this.setRef(element) }, this.props.children);
     addEventListener(propName, handler) {
-        this._element.addEventListener(propName, handler);
+        let eventName = propName;
+        if (eventName.match(/^on[A-Z]/gm)) {
+            eventName = eventName.substring(2).toLowerCase();
+        }
+        this._element.addEventListener(eventName, handler);
     }
@@ -181,3 +186,7 @@ /**
     removeEventListener(propName, handler) {
-        this._element.removeEventListener(propName, handler);
+        let eventName = propName;
+        if (eventName.match(/^on[A-Z]/gm)) {
+            eventName = eventName.substring(2).toLowerCase();
+        }
+        this._element.removeEventListener(eventName, handler);
     }
@@ -194,5 +203,5 @@ }
 export const wrapWc = (tag) => {
-    const component = (props) => React.createElement(Wc, Object.assign({ type: tag }, props));
+    const component = (props) => React.createElement(Wc, Object.assign({ wcType: tag }, props));
     return component;
 };
 //# sourceMappingURL=Wc.js.map

package.json

 {
   "name": "wc-react",
-  "version": "0.3.1",
+  "version": "0.4.0-preview1",
   "description": "Web Components wrapper class for React",
@@ -31,7 +31,7 @@ "author": "metulev",
   "devDependencies": {
-    "@types/react": "^16.9.32",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
+    "@types/react": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.1",
+    "@typescript-eslint/parser": "^4.14.1",
     "eslint": "^6.8.0",
-    "react": "^16.13.1",
+    "react": "^17.0.1",
     "typescript": "^3.8.3"
@@ -38,0 +38,0 @@ },

readme.md

@@ -67,2 +67,4 @@ # React wrapper for web components
 
+> Note: React events following the `onEvent` naming convention are also supported. For example, if you use the `onClick` event on the React component, wc-react will register the `click` event with the web component.
+
 ## Typescript
@@ -69,0 +71,0 @@

src/Wc.ts

@@ -10,6 +10,6 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */
 export type WcTypeProps = WcProps & {
-  type: string | Function;
+  wcType: string | Function;
 };
 
-const ignoredProps = new Set(['children', 'type']);
+const ignoredProps = new Set(['children', 'wcType']);
 
@@ -38,3 +38,3 @@ /**
   /**
-   * Gets the web component tag name from the 'type' prop
+   * Gets the web component tag name from the 'wcType' prop
    *
@@ -48,9 +48,10 @@ * @protected
 
-    if (typeof this.props.type === 'function') {
+    // when class is passed instead of tag name
+    if (typeof this.props.wcType === 'function') {
       // convert to dash case
-      tag = this.props.type.name
+      tag = this.props.wcType.name
         .replace(/([a-zA-Z])(?=[A-Z])/g, '$1-')
         .toLowerCase();
-    } else if (typeof this.props.type === 'string') {
-      tag = this.props.type;
+    } else if (typeof this.props.wcType === 'string') {
+      tag = this.props.wcType;
     }
@@ -70,3 +71,3 @@
     if (!tag) {
-      throw '"type" must be set!';
+      throw '"wcType" must be set!';
     }
@@ -214,3 +215,7 @@
   protected addEventListener(propName: string, handler: EventListenerOrEventListenerObject) {
-    this._element.addEventListener(propName, handler);
+    let eventName = propName;
+    if (eventName.match(/^on[A-Z]/gm)){
+      eventName = eventName.substring(2).toLowerCase();
+    }
+    this._element.addEventListener(eventName, handler);
   }
@@ -227,3 +232,7 @@
   protected removeEventListener(propName: string, handler: EventListenerOrEventListenerObject) {
-    this._element.removeEventListener(propName, handler);
+    let eventName = propName;
+    if (eventName.match(/^on[A-Z]/gm)){
+      eventName = eventName.substring(2).toLowerCase();
+    }
+    this._element.removeEventListener(eventName, handler);
   }
@@ -241,5 +250,5 @@ }
 export const wrapWc = <T = WcProps>(tag: string | Function) => {
-  const component: React.FC<T> = 
-    (props: T) => React.createElement(Wc, { type: tag, ...props });
+  const component: React.FC<T & React.HTMLAttributes<any>> = 
+    (props: T) => React.createElement(Wc, { wcType: tag, ...props });
   return component;
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24960

increased by5.57%

Lines of code

523

increased by3.56%

Number of lines in readme file

149

increased by1.36%

No dependency changes