react-dev-inspector - npm Package Compare versions

Comparing version 2.1.0-beta.4 to 2.1.0-beta.5

es/Inspector/Overlay/Overlay.js

@@ -8,5 +8,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { html, css, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import { ref, createRef } from 'lit/directives/ref.js';
-import { registerElement, getElementDimensions, getBoundingBox, } from './utils';
+import { customElement, registerElement, getElementDimensions, getBoundingBox, } from './utils';
 import { InspectorOverlayRect, } from './OverlayRect';
@@ -13,0 +12,0 @@ import { InspectorOverlayTip, } from './OverlayTip';

es/Inspector/Overlay/OverlayRect.js

@@ -11,4 +11,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { html, css, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { customElement, } from './utils';
 let InspectorOverlayRect = class InspectorOverlayRect extends LitElement {
@@ -15,0 +16,0 @@ constructor() {

es/Inspector/Overlay/OverlayTip.js

@@ -12,5 +12,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { html, css, LitElement, } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { getBoundingBox, } from './utils';
+import { customElement, getBoundingBox, } from './utils';
 let InspectorOverlayTip = InspectorOverlayTip_1 = class InspectorOverlayTip extends LitElement {
@@ -17,0 +17,0 @@ constructor() {

es/Inspector/Overlay/utils.d.ts

 import type { Box, BoxSizing } from './types';
+/**
+ * Allow for custom element classes with private constructors
+ */
+type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
+interface Constructor<T> {
+    new (...args: any[]): T;
+}
+type CustomElementDecorator = (target: CustomElementClass, context?: ClassDecoratorContext<Constructor<HTMLElement>>) => void;
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ * It's safe to re-register the same tag name multiple times (will not override or throw error).
+ *
+ * ```js
+ * @customElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+export declare const customElement: (tagName: string) => CustomElementDecorator;
 export declare const registerElement: (tagName: string, elementClass: CustomElementConstructor) => void;
 export declare function getBoundingBox(element: HTMLElement | any): Box;
 export declare function getElementDimensions(element: HTMLElement | any): BoxSizing;
+export {};

es/Inspector/Overlay/utils.js

@@ -0,1 +1,26 @@
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ * It's safe to re-register the same tag name multiple times (will not override or throw error).
+ *
+ * ```js
+ * @customElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+export const customElement = (tagName) => (classOrTarget, context) => {
+    if (context !== undefined) {
+        context.addInitializer(() => {
+            registerElement(tagName, classOrTarget);
+        });
+    }
+    else {
+        registerElement(tagName, classOrTarget);
+    }
+};
 // useful for tree-shaking
@@ -2,0 +27,0 @@ export const registerElement = (tagName, elementClass) => {

es/Inspector/types.d.ts

@@ -31,5 +31,6 @@ export interface CodeInfo {
  * An Agent need implement these functions:
- * - setup event listener to collect user interaction operation  (like Pointer Down/Up/Move / Click etc.)
+ * - setup event listener to collect user interaction operation  (like Pointer Down/Up/Over / Click etc.)
+ *   and its target element  (like DOM, Three.js etc.)
  * - collect inspection info from its element  (like name, code source position etc.)
- * - show/hide indicator UI on element  (like highlight, show name or code position etc.)
+ * - show/hide indicator UI on element  (like highlight element, show tooltip for name or code position etc.)
  */
@@ -36,0 +37,0 @@ export interface InspectAgent<Element> {

lib/Inspector/Overlay/Overlay.js

@@ -11,3 +11,2 @@ "use strict";
 const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
 const ref_js_1 = require("lit/directives/ref.js");
@@ -84,3 +83,3 @@ const utils_1 = require("./utils");
 exports.InspectorOverlay = InspectorOverlay = __decorate([
-    (0, decorators_js_1.customElement)('inspector-overlay')
+    (0, utils_1.customElement)('inspector-overlay')
 ], InspectorOverlay);
@@ -87,0 +86,0 @@ class Overlay {

lib/Inspector/Overlay/OverlayRect.js

@@ -16,2 +16,3 @@ "use strict";
 const style_map_js_1 = require("lit/directives/style-map.js");
+const utils_1 = require("./utils");
 let InspectorOverlayRect = class InspectorOverlayRect extends lit_1.LitElement {
@@ -149,3 +150,3 @@ constructor() {
 exports.InspectorOverlayRect = InspectorOverlayRect = __decorate([
-    (0, decorators_js_1.customElement)('inspector-overlay-rect')
+    (0, utils_1.customElement)('inspector-overlay-rect')
 ], InspectorOverlayRect);

lib/Inspector/Overlay/OverlayTip.js

@@ -215,3 +215,3 @@ "use strict";
 exports.InspectorOverlayTip = InspectorOverlayTip = InspectorOverlayTip_1 = __decorate([
-    (0, decorators_js_1.customElement)('inspector-overlay-tip')
+    (0, utils_1.customElement)('inspector-overlay-tip')
 ], InspectorOverlayTip);
@@ -218,0 +218,0 @@ const restraintTipPosition = ({ elementBox, spaceBox, tipSize }) => {

lib/Inspector/Overlay/utils.d.ts

 import type { Box, BoxSizing } from './types';
+/**
+ * Allow for custom element classes with private constructors
+ */
+type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
+interface Constructor<T> {
+    new (...args: any[]): T;
+}
+type CustomElementDecorator = (target: CustomElementClass, context?: ClassDecoratorContext<Constructor<HTMLElement>>) => void;
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ * It's safe to re-register the same tag name multiple times (will not override or throw error).
+ *
+ * ```js
+ * @customElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+export declare const customElement: (tagName: string) => CustomElementDecorator;
 export declare const registerElement: (tagName: string, elementClass: CustomElementConstructor) => void;
 export declare function getBoundingBox(element: HTMLElement | any): Box;
 export declare function getElementDimensions(element: HTMLElement | any): BoxSizing;
+export {};

lib/Inspector/Overlay/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getElementDimensions = exports.getBoundingBox = exports.registerElement = void 0;
+exports.getElementDimensions = exports.getBoundingBox = exports.registerElement = exports.customElement = void 0;
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ * It's safe to re-register the same tag name multiple times (will not override or throw error).
+ *
+ * ```js
+ * @customElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+const customElement = (tagName) => (classOrTarget, context) => {
+    if (context !== undefined) {
+        context.addInitializer(() => {
+            (0, exports.registerElement)(tagName, classOrTarget);
+        });
+    }
+    else {
+        (0, exports.registerElement)(tagName, classOrTarget);
+    }
+};
+exports.customElement = customElement;
 // useful for tree-shaking
@@ -5,0 +31,0 @@ const registerElement = (tagName, elementClass) => {

lib/Inspector/types.d.ts

@@ -31,5 +31,6 @@ export interface CodeInfo {
  * An Agent need implement these functions:
- * - setup event listener to collect user interaction operation  (like Pointer Down/Up/Move / Click etc.)
+ * - setup event listener to collect user interaction operation  (like Pointer Down/Up/Over / Click etc.)
+ *   and its target element  (like DOM, Three.js etc.)
  * - collect inspection info from its element  (like name, code source position etc.)
- * - show/hide indicator UI on element  (like highlight, show name or code position etc.)
+ * - show/hide indicator UI on element  (like highlight element, show tooltip for name or code position etc.)
  */
@@ -36,0 +37,0 @@ export interface InspectAgent<Element> {

package.json

 {
   "name": "react-dev-inspector",
-  "version": "2.1.0-beta.4",
+  "version": "2.1.0-beta.5",
   "sideEffects": false,
@@ -54,7 +54,7 @@ "description": "dev-tool for inspect react components and jump to local IDE for component code.",
     "react": ">=16.14.0",
-    "@react-dev-inspector/middleware": "^2.1.0-beta.4",
-    "@react-dev-inspector/babel-plugin": "^2.1.0-beta.4",
-    "@react-dev-inspector/umi3-plugin": "^2.1.0-beta.4",
-    "@react-dev-inspector/umi4-plugin": "^2.1.0-beta.4",
-    "@react-dev-inspector/vite-plugin": "^2.1.0-beta.4"
+    "@react-dev-inspector/babel-plugin": "^2.1.0-beta.5",
+    "@react-dev-inspector/middleware": "^2.1.0-beta.5",
+    "@react-dev-inspector/umi4-plugin": "^2.1.0-beta.5",
+    "@react-dev-inspector/vite-plugin": "^2.1.0-beta.5",
+    "@react-dev-inspector/umi3-plugin": "^2.1.0-beta.5"
   },
@@ -61,0 +61,0 @@ "peerDependenciesMeta": {

src/Inspector/Overlay/utils.ts

@@ -6,2 +6,49 @@ import type {
 
+/**
+ * Allow for custom element classes with private constructors
+ */
+type CustomElementClass = Omit<typeof HTMLElement, 'new'>
+
+
+interface Constructor<T> { new (...args: any[]): T }
+
+type CustomElementDecorator = (
+  target: CustomElementClass,
+  context?: ClassDecoratorContext<Constructor<HTMLElement>>
+) => void
+
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ * It's safe to re-register the same tag name multiple times (will not override or throw error).
+ *
+ * ```js
+ * @customElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+export const customElement = (tagName: string): CustomElementDecorator =>
+  (
+    classOrTarget: CustomElementClass | Constructor<HTMLElement>,
+    context?: ClassDecoratorContext<Constructor<HTMLElement>>,
+  ) => {
+    if (context !== undefined) {
+      context.addInitializer(() => {
+        registerElement(
+          tagName,
+          classOrTarget as CustomElementConstructor,
+        )
+      })
+    }
+    else {
+      registerElement(tagName, classOrTarget as CustomElementConstructor)
+    }
+  }
+
+
 // useful for tree-shaking
@@ -8,0 +55,0 @@ export const registerElement = (tagName: string, elementClass: CustomElementConstructor) => {

src/Inspector/types.ts

@@ -35,5 +35,6 @@
  * An Agent need implement these functions:
- * - setup event listener to collect user interaction operation  (like Pointer Down/Up/Move / Click etc.)
+ * - setup event listener to collect user interaction operation  (like Pointer Down/Up/Over / Click etc.)
+ *   and its target element  (like DOM, Three.js etc.)
  * - collect inspection info from its element  (like name, code source position etc.)
- * - show/hide indicator UI on element  (like highlight, show name or code position etc.)
+ * - show/hide indicator UI on element  (like highlight element, show tooltip for name or code position etc.)
  */
@@ -40,0 +41,0 @@ export interface InspectAgent<Element> {

No alert changes

Improved metrics

Total package byte prevSize

272938

1.69%

Lines of code

7659

1.98%

No dependency changes