react-figma - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

components/component/Component.js

@@ -25,5 +25,7 @@ "use strict";
 var useImageHash_1 = require("../../hooks/useImageHash");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var Component = function (props) {
     var nodeRef = props.nodeRef || React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -30,0 +32,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

components/component/ComponentSet.js

@@ -21,5 +21,7 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var ComponentSet = function (props) {
     var nodeRef = props.nodeRef || React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -26,0 +28,0 @@ var componentProps = __assign({}, transformLayoutStyleProperties_1.transformLayoutStyleProperties(style), props, { style: style });

components/component/createComponent.d.ts

@@ -5,4 +5,4 @@ import * as React from 'react';
 export declare const createComponent: () => {
-    Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "fills" | "backgrounds" | "fillStyleId" | "strokeStyleId" | "strokes" | "strokeWeight" | "strokeAlign" | "strokeCap" | "strokeJoin" | "dashPattern" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "cornerRadius" | "cornerSmoothing" | "isMask" | "effects" | "effectStyleId" | "topLeftRadius" | "topRightRadius" | "bottomLeftRadius" | "bottomRightRadius" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "clipsContent" | "guides" | "layoutGrids" | "gridStyleId" | "description" | "documentationLinks">>;
-    Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "overrides" | "detach">>;
+    Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "fills" | "backgrounds" | "fillStyleId" | "strokeStyleId" | "strokes" | "strokeWeight" | "strokeAlign" | "strokeCap" | "strokeJoin" | "dashPattern" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "cornerRadius" | "cornerSmoothing" | "isMask" | "effects" | "effectStyleId" | "topLeftRadius" | "topRightRadius" | "bottomLeftRadius" | "bottomRightRadius" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "onNodeId" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "clipsContent" | "guides" | "layoutGrids" | "gridStyleId" | "description" | "documentationLinks">>;
+    Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "onNodeId" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "overrides" | "detach">>;
 };

components/component/Instance.js

@@ -59,2 +59,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var getComponentByType = function (type) {
@@ -97,2 +98,3 @@ var componentName = type.charAt(0) + type.substring(1).toLowerCase();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -99,0 +101,0 @@ var componentProps = __assign({}, transformLayoutStyleProperties_1.transformLayoutStyleProperties(style), props, { style: style });

components/ellipse/Ellipse.js

@@ -24,5 +24,7 @@ "use strict";
 var useImageHash_1 = require("../../hooks/useImageHash");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var Ellipse = function (props) {
     var nodeRef = React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

components/frame/Frame.js

@@ -37,2 +37,3 @@ "use strict";
 var useInheritStyle_1 = require("../../hooks/useInheritStyle");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 exports.FRAME_PRESETS = {
@@ -208,2 +209,3 @@ iPhoneX: {
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, StyleSheet_1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -210,0 +212,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

components/group/Group.js

@@ -24,5 +24,7 @@ "use strict";
 var useImageHash_1 = require("../../hooks/useImageHash");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var Group = function (props) {
     var nodeRef = React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

components/line/Line.js

@@ -24,5 +24,7 @@ "use strict";
 var useImageHash_1 = require("../../hooks/useImageHash");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var Line = function (props) {
     var nodeRef = React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

components/rectangle/Rectangle.js

@@ -25,5 +25,7 @@ "use strict";
 var useImageHash_1 = require("../../hooks/useImageHash");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var Rectangle = function (props) {
     var nodeRef = React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -30,0 +32,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

components/star/Star.js

@@ -24,5 +24,7 @@ "use strict";
 var useImageHash_1 = require("../../hooks/useImageHash");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var Star = function (props) {
     var nodeRef = React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

components/svg/Svg.js

@@ -24,5 +24,7 @@ "use strict";
 var useImageHash_1 = require("../../hooks/useImageHash");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var Svg = function (props) {
     var nodeRef = React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, StyleSheet_1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

components/text/Text.js

@@ -26,2 +26,3 @@ "use strict";
 var useInheritStyle_1 = require("../../hooks/useInheritStyle");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var normalizeTextNodeChidren = function (children) {
@@ -33,2 +34,3 @@ return Array.isArray(children) ? children.join('') : children;
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var inheritedStyle = useInheritStyle_1.useInheritStyle();
@@ -35,0 +37,0 @@ var flattenOriginalStyle = __1.StyleSheet.flatten(props.style);

components/vector/Vector.js

@@ -24,5 +24,7 @@ "use strict";
 var useImageHash_1 = require("../../hooks/useImageHash");
+var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
 var Vector = function (props) {
     var nodeRef = React.useRef();
     useSelectionChange_1.useSelectionChange(nodeRef, props);
+    useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
     var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

package.json

 {
   "name": "react-figma",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Render React components to Figma",
@@ -40,3 +40,3 @@ "scripts": {
   "devDependencies": {
-    "@figma/plugin-typings": "1.23",
+    "@figma/plugin-typings": "1.24",
     "@types/jest": "^24.0.18",
@@ -43,0 +43,0 @@ "@types/node": "^12.7.8",

renderers/text.js

@@ -28,3 +28,4 @@ "use strict";
     'lineHeight',
-    'textStyleId'
+    'textStyleId',
+    'hyperlink'
 ], {
@@ -41,3 +42,4 @@ characters: '',
     letterSpacing: { value: 0, unit: 'PIXELS' },
-    lineHeight: { unit: 'AUTO' }
+    lineHeight: { unit: 'AUTO' },
+    hyperlink: null
 });
@@ -44,0 +46,0 @@ var defaultFont = { family: 'Roboto', style: 'Regular' };

rpc.d.ts

@@ -48,2 +48,3 @@ /// <reference types="plugin-typings" />
 export declare const $updateYogaReactId: Subject<unknown>;
+export declare const $bindReactIdWithNodeId: Subject<[string, string]>;
 export declare const uiApi: Readonly<{
@@ -53,2 +54,3 @@ currentPageChange: (reactId: any) => Promise<void>;
     updateYogaNode: (reactId: any) => Promise<void>;
+    bindReactIdWithNode: (reactId: any, nodeId: any) => Promise<void>;
 }>;

rpc.js

@@ -158,2 +158,3 @@ "use strict";
         cache[tempNode.reactId] = instance;
+        exports.uiApi.bindReactIdWithNode(tempNode.reactId, instance.id);
     },
@@ -281,2 +282,3 @@ appendToContainer: function (_parentNode, _childNode) {
 exports.$updateYogaReactId = new rxjs_1.Subject();
+exports.$bindReactIdWithNodeId = new rxjs_1.Subject();
 // those methods will be executed in the Figma UI,
@@ -293,2 +295,5 @@ // regardless of where they are called from
         exports.$updateYogaReactId.next(reactId);
+    },
+    bindReactIdWithNode: function (reactId, nodeId) {
+        exports.$bindReactIdWithNodeId.next([reactId, nodeId]);
     }
@@ -295,0 +300,0 @@ }, {

types.d.ts

@@ -21,2 +21,3 @@ /// <reference types="plugin-typings" />
     };
+    onNodeId?: (nodeId: string) => void;
 }
@@ -88,2 +89,3 @@ export interface LayoutProps {
     textStyleId?: string;
+    hyperlink?: HyperlinkTarget;
 }
@@ -154,2 +156,6 @@ export interface VectorNodeProps {
 }
+export interface HyperlinkTarget {
+    type: 'URL' | 'NODE';
+    value: string;
+}
 export {};

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

462698

increased by1.06%

Number of package files

332

increased by0.91%

Lines of code

7023

increased by0.85%

No dependency changes