@figspec/react - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

cjs/es2016/index.d.ts

@@ -1,6 +0,5 @@
-/// <reference types="react" />
-import "@figspec/components";
-import type { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement } from "@figspec/components";
+import { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement } from "@figspec/components";
+import * as React from "react";
 declare type FigspecFrameViewerElementProps = Pick<FigspecFrameViewerElement, "nodes" | "renderedImage"> & Partial<Pick<FigspecFrameViewerElement, "id" | "className" | "style" | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link">>;
-export interface FigspecFrameViewerProps extends FigspecFrameViewerElementProps {
+interface FigspecFrameViewerEvents {
     onScaleChange?(ev: CustomEvent<{
@@ -17,5 +16,6 @@ scale: number;
 }
-export declare const FigspecFrameViewer: import("react").ForwardRefExoticComponent<FigspecFrameViewerProps & import("react").RefAttributes<FigspecFrameViewerElement>>;
+export declare type FigspecFrameViewerProps = FigspecFrameViewerElementProps & FigspecFrameViewerEvents;
+export declare const FigspecFrameViewer: React.ForwardRefExoticComponent<Pick<FigspecFrameViewerElement, "nodes" | "renderedImage"> & Partial<Pick<FigspecFrameViewerElement, "link" | "style" | "className" | "id" | "zoomMargin" | "zoomSpeed" | "panSpeed">> & FigspecFrameViewerEvents & React.RefAttributes<FigspecFrameViewerElement>>;
 declare type FigspecFileViewerElementProps = Pick<FigspecFileViewerElement, "documentNode" | "renderedImages"> & Partial<Pick<FigspecFileViewerElement, "id" | "className" | "style" | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link">>;
-export interface FigspecFileViewerProps extends FigspecFileViewerElementProps {
+interface FigspecFileViewerEvents {
     onScaleChange?(ev: CustomEvent<{
@@ -32,3 +32,4 @@ scale: number;
 }
-export declare const FigspecFileViewer: import("react").ForwardRefExoticComponent<FigspecFileViewerProps & import("react").RefAttributes<FigspecFileViewerElement>>;
+export declare type FigspecFileViewerProps = FigspecFileViewerElementProps & FigspecFileViewerEvents;
+export declare const FigspecFileViewer: React.ForwardRefExoticComponent<Pick<FigspecFileViewerElement, "documentNode" | "renderedImages"> & Partial<Pick<FigspecFileViewerElement, "link" | "style" | "className" | "id" | "zoomMargin" | "zoomSpeed" | "panSpeed">> & FigspecFileViewerEvents & React.RefAttributes<FigspecFileViewerElement>>;
 export {};

cjs/es2016/index.js

 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FigspecFileViewer = exports.FigspecFrameViewer = void 0;
-require("@figspec/components");
-const react_1 = require("react");
-const bindEvent = (element, event, cb) => {
-    const listener = ((ev) => {
-        cb(ev);
-    });
-    element.addEventListener(event, listener);
-    return () => element.removeEventListener(event, listener);
-};
-exports.FigspecFrameViewer = react_1.forwardRef((_a, ref) => {
-    var { nodes, renderedImage, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange } = _a, rest = __rest(_a, ["nodes", "renderedImage", "className", "panSpeed", "zoomMargin", "zoomSpeed", "onNodeSelect", "onPositionChange", "onScaleChange"]);
-    const [refNode, setNode] = react_1.useState(null);
-    react_1.useImperativeHandle(ref, () => refNode, [refNode]);
-    const refCb = react_1.useCallback((node) => {
-        if (node) {
-            setNode(node);
-            node.nodes = nodes;
-            node.renderedImage = renderedImage;
-        }
-    }, []);
-    react_1.useEffect(() => {
-        if (!refNode)
-            return;
-        refNode.nodes = nodes;
-        refNode.renderedImage = renderedImage;
-    }, [refNode, nodes, renderedImage]);
-    react_1.useEffect(() => {
-        if (!refNode || !onNodeSelect)
-            return;
-        return bindEvent(refNode, "nodeselect", onNodeSelect);
-    }, [refNode, onNodeSelect]);
-    react_1.useEffect(() => {
-        if (!refNode || !onPositionChange)
-            return;
-        return bindEvent(refNode, "positionchange", onPositionChange);
-    }, [refNode, onPositionChange]);
-    react_1.useEffect(() => {
-        if (!refNode || !onScaleChange)
-            return;
-        return bindEvent(refNode, "scalechange", onScaleChange);
-    }, [refNode, onScaleChange]);
-    return (react_1.createElement("figspec-frame-viewer", Object.assign({ ref: refCb, class: className, "pan-speed": panSpeed, "zoom-margin": zoomMargin, "zoom-speed": zoomSpeed }, rest)));
+const components_1 = require("@figspec/components");
+const react_1 = require("@lit-labs/react");
+const React = require("react");
+// NOTE: These exported components are casted with `as unknown as ...` in order not to break
+//       typings accidentally. `as unknown` is required because a component created by
+//       `createComponent` has `RefAttributes<unknown>`, which is incompatible with existing
+//       type signature (and breaks ref typings). Also the explicit props definition prevents
+//       every properties turns into optional.
+exports.FigspecFrameViewer = react_1.createComponent(React, "figspec-frame-viewer", components_1.FigspecFrameViewer, {
+    onNodeSelect: "nodeselect",
+    onPositionChange: "positionchange",
+    onScaleChange: "scalechange",
 });
-exports.FigspecFileViewer = react_1.forwardRef((_a, ref) => {
-    var { documentNode, renderedImages, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange } = _a, rest = __rest(_a, ["documentNode", "renderedImages", "className", "panSpeed", "zoomMargin", "zoomSpeed", "onNodeSelect", "onPositionChange", "onScaleChange"]);
-    const [refNode, setNode] = react_1.useState(null);
-    react_1.useImperativeHandle(ref, () => refNode, [refNode]);
-    const refCb = react_1.useCallback((node) => {
-        if (node) {
-            setNode(node);
-            node.documentNode = documentNode;
-            node.renderedImages = renderedImages;
-        }
-    }, []);
-    react_1.useEffect(() => {
-        if (!refNode)
-            return;
-        refNode.documentNode = documentNode;
-        refNode.renderedImages = renderedImages;
-    }, [refNode, documentNode, renderedImages]);
-    react_1.useEffect(() => {
-        if (!refNode || !onNodeSelect)
-            return;
-        return bindEvent(refNode, "nodeselect", onNodeSelect);
-    }, [refNode, onNodeSelect]);
-    react_1.useEffect(() => {
-        if (!refNode || !onPositionChange)
-            return;
-        return bindEvent(refNode, "positionchange", onPositionChange);
-    }, [refNode, onPositionChange]);
-    react_1.useEffect(() => {
-        if (!refNode || !onScaleChange)
-            return;
-        return bindEvent(refNode, "scalechange", onScaleChange);
-    }, [refNode, onScaleChange]);
-    return (react_1.createElement("figspec-file-viewer", Object.assign({ ref: refCb, class: className, "pan-speed": panSpeed, "zoom-margin": zoomMargin, "zoom-speed": zoomSpeed }, rest)));
+exports.FigspecFileViewer = react_1.createComponent(React, "figspec-file-viewer", components_1.FigspecFileViewer, {
+    onNodeSelect: "nodeselect",
+    onPositionChange: "positionchange",
+    onScaleChange: "scalechange",
 });

esm/es2015/index.d.ts

@@ -1,6 +0,5 @@
-/// <reference types="react" />
-import "@figspec/components";
-import type { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement } from "@figspec/components";
+import { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement } from "@figspec/components";
+import * as React from "react";
 declare type FigspecFrameViewerElementProps = Pick<FigspecFrameViewerElement, "nodes" | "renderedImage"> & Partial<Pick<FigspecFrameViewerElement, "id" | "className" | "style" | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link">>;
-export interface FigspecFrameViewerProps extends FigspecFrameViewerElementProps {
+interface FigspecFrameViewerEvents {
     onScaleChange?(ev: CustomEvent<{
@@ -17,5 +16,6 @@ scale: number;
 }
-export declare const FigspecFrameViewer: import("react").ForwardRefExoticComponent<FigspecFrameViewerProps & import("react").RefAttributes<FigspecFrameViewerElement>>;
+export declare type FigspecFrameViewerProps = FigspecFrameViewerElementProps & FigspecFrameViewerEvents;
+export declare const FigspecFrameViewer: React.ForwardRefExoticComponent<Pick<FigspecFrameViewerElement, "nodes" | "renderedImage"> & Partial<Pick<FigspecFrameViewerElement, "link" | "style" | "className" | "id" | "zoomMargin" | "zoomSpeed" | "panSpeed">> & FigspecFrameViewerEvents & React.RefAttributes<FigspecFrameViewerElement>>;
 declare type FigspecFileViewerElementProps = Pick<FigspecFileViewerElement, "documentNode" | "renderedImages"> & Partial<Pick<FigspecFileViewerElement, "id" | "className" | "style" | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link">>;
-export interface FigspecFileViewerProps extends FigspecFileViewerElementProps {
+interface FigspecFileViewerEvents {
     onScaleChange?(ev: CustomEvent<{
@@ -32,3 +32,4 @@ scale: number;
 }
-export declare const FigspecFileViewer: import("react").ForwardRefExoticComponent<FigspecFileViewerProps & import("react").RefAttributes<FigspecFileViewerElement>>;
+export declare type FigspecFileViewerProps = FigspecFileViewerElementProps & FigspecFileViewerEvents;
+export declare const FigspecFileViewer: React.ForwardRefExoticComponent<Pick<FigspecFileViewerElement, "documentNode" | "renderedImages"> & Partial<Pick<FigspecFileViewerElement, "link" | "style" | "className" | "id" | "zoomMargin" | "zoomSpeed" | "panSpeed">> & FigspecFileViewerEvents & React.RefAttributes<FigspecFileViewerElement>>;
 export {};

esm/es2015/index.js

@@ -1,88 +0,18 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import "@figspec/components";
-import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useState, } from "react";
-const bindEvent = (element, event, cb) => {
-    const listener = ((ev) => {
-        cb(ev);
-    });
-    element.addEventListener(event, listener);
-    return () => element.removeEventListener(event, listener);
-};
-export const FigspecFrameViewer = forwardRef((_a, ref) => {
-    var { nodes, renderedImage, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange } = _a, rest = __rest(_a, ["nodes", "renderedImage", "className", "panSpeed", "zoomMargin", "zoomSpeed", "onNodeSelect", "onPositionChange", "onScaleChange"]);
-    const [refNode, setNode] = useState(null);
-    useImperativeHandle(ref, () => refNode, [refNode]);
-    const refCb = useCallback((node) => {
-        if (node) {
-            setNode(node);
-            node.nodes = nodes;
-            node.renderedImage = renderedImage;
-        }
-    }, []);
-    useEffect(() => {
-        if (!refNode)
-            return;
-        refNode.nodes = nodes;
-        refNode.renderedImage = renderedImage;
-    }, [refNode, nodes, renderedImage]);
-    useEffect(() => {
-        if (!refNode || !onNodeSelect)
-            return;
-        return bindEvent(refNode, "nodeselect", onNodeSelect);
-    }, [refNode, onNodeSelect]);
-    useEffect(() => {
-        if (!refNode || !onPositionChange)
-            return;
-        return bindEvent(refNode, "positionchange", onPositionChange);
-    }, [refNode, onPositionChange]);
-    useEffect(() => {
-        if (!refNode || !onScaleChange)
-            return;
-        return bindEvent(refNode, "scalechange", onScaleChange);
-    }, [refNode, onScaleChange]);
-    return (createElement("figspec-frame-viewer", Object.assign({ ref: refCb, class: className, "pan-speed": panSpeed, "zoom-margin": zoomMargin, "zoom-speed": zoomSpeed }, rest)));
+import { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement, } from "@figspec/components";
+import { createComponent } from "@lit-labs/react";
+import * as React from "react";
+// NOTE: These exported components are casted with `as unknown as ...` in order not to break
+//       typings accidentally. `as unknown` is required because a component created by
+//       `createComponent` has `RefAttributes<unknown>`, which is incompatible with existing
+//       type signature (and breaks ref typings). Also the explicit props definition prevents
+//       every properties turns into optional.
+export const FigspecFrameViewer = createComponent(React, "figspec-frame-viewer", FigspecFrameViewerElement, {
+    onNodeSelect: "nodeselect",
+    onPositionChange: "positionchange",
+    onScaleChange: "scalechange",
 });
-export const FigspecFileViewer = forwardRef((_a, ref) => {
-    var { documentNode, renderedImages, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange } = _a, rest = __rest(_a, ["documentNode", "renderedImages", "className", "panSpeed", "zoomMargin", "zoomSpeed", "onNodeSelect", "onPositionChange", "onScaleChange"]);
-    const [refNode, setNode] = useState(null);
-    useImperativeHandle(ref, () => refNode, [refNode]);
-    const refCb = useCallback((node) => {
-        if (node) {
-            setNode(node);
-            node.documentNode = documentNode;
-            node.renderedImages = renderedImages;
-        }
-    }, []);
-    useEffect(() => {
-        if (!refNode)
-            return;
-        refNode.documentNode = documentNode;
-        refNode.renderedImages = renderedImages;
-    }, [refNode, documentNode, renderedImages]);
-    useEffect(() => {
-        if (!refNode || !onNodeSelect)
-            return;
-        return bindEvent(refNode, "nodeselect", onNodeSelect);
-    }, [refNode, onNodeSelect]);
-    useEffect(() => {
-        if (!refNode || !onPositionChange)
-            return;
-        return bindEvent(refNode, "positionchange", onPositionChange);
-    }, [refNode, onPositionChange]);
-    useEffect(() => {
-        if (!refNode || !onScaleChange)
-            return;
-        return bindEvent(refNode, "scalechange", onScaleChange);
-    }, [refNode, onScaleChange]);
-    return (createElement("figspec-file-viewer", Object.assign({ ref: refCb, class: className, "pan-speed": panSpeed, "zoom-margin": zoomMargin, "zoom-speed": zoomSpeed }, rest)));
+export const FigspecFileViewer = createComponent(React, "figspec-file-viewer", FigspecFileViewerElement, {
+    onNodeSelect: "nodeselect",
+    onPositionChange: "positionchange",
+    onScaleChange: "scalechange",
 });

package.json

@@ -8,3 +8,3 @@ {
   ],
-  "version": "1.0.0",
+  "version": "1.0.1",
   "contributors": [
@@ -26,7 +26,8 @@ {
   "sideEffects": [
-    "./src/index.tsx",
+    "./src/index.ts",
     "./{cjs,esm}/*/index.js"
   ],
   "dependencies": {
-    "@figspec/components": "^1.0.0"
+    "@figspec/components": "^1.0.0",
+    "@lit-labs/react": "^1.0.2"
   },
@@ -38,6 +39,7 @@ "peerDependencies": {
     "@babel/core": "^7.12.3",
-    "@storybook/addon-actions": "^6.0.26",
-    "@storybook/addon-essentials": "^6.0.26",
-    "@storybook/addon-links": "^6.0.26",
-    "@storybook/react": "^6.0.26",
+    "@babel/preset-typescript": "^7.16.7",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/react": "^6.4.0",
     "babel-loader": "^8.1.0",
@@ -44,0 +46,0 @@ "react": "^16.14.0",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

9623

-34.63%

Dependency count

3

50%

Dev dependency count

10

11.11%

Lines of code

109

-55.51%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @lit-labs/react@^1.0.2

• + Added

  @lit-labs/react@1.2.1
  (transitive)