react-figma - npm Package Compare versions

Comparing version 0.0.52 to 0.0.53

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" | "opacity" | "blendMode" | "backgrounds" | "children" | "style" | "isMask" | "effects" | "effectStyleId" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "layoutMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "constraints">>;
-    Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "opacity" | "blendMode" | "backgrounds" | "children" | "style" | "isMask" | "effects" | "effectStyleId" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "layoutMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "constraints" | "overrides">>;
+    Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "opacity" | "blendMode" | "backgrounds" | "children" | "style" | "isMask" | "effects" | "effectStyleId" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutAlign" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "layoutMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "constraints">>;
+    Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "opacity" | "blendMode" | "backgrounds" | "children" | "style" | "isMask" | "effects" | "effectStyleId" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutAlign" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "layoutMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "constraints" | "overrides">>;
 };

figma.d.ts

@@ -1,2 +0,2 @@
-// Figma Plugin API version 1, update 9
+// Figma Plugin API version 1, update 14
 
@@ -88,21 +88,21 @@ declare global {
 interface NotificationOptions {
-  timeout?: number,
+  timeout?: number
 }
 
 interface NotificationHandler {
-  cancel: () => void,
+  cancel: () => void
 }
 
 interface ShowUIOptions {
-  visible?: boolean,
-  width?: number,
-  height?: number,
+  visible?: boolean
+  width?: number
+  height?: number
 }
 
 interface UIPostMessageOptions {
-  origin?: string,
+  origin?: string
 }
 
 interface OnMessageProperties {
-  origin: string,
+  origin: string
 }
@@ -126,5 +126,6 @@
 interface ViewportAPI {
-  center: { x: number, y: number }
+  center: Vector
   zoom: number
   scrollAndZoomIntoView(nodes: ReadonlyArray<BaseNode>): void
+  readonly bounds: Rect
 }
@@ -145,2 +146,9 @@
 
+interface Rect {
+  readonly x: number
+  readonly y: number
+  readonly width: number
+  readonly height: number
+}
+
 interface RGB {
@@ -382,11 +390,11 @@ readonly r: number
   { readonly type: "URL", url: string } |
-  { readonly type: "NODE",
-    readonly destinationId: string | null,
-    readonly navigation: Navigation,
-    readonly transition: Transition | null,
-    readonly preserveScrollPosition: boolean,
+  { readonly type: "NODE"
+    readonly destinationId: string | null
+    readonly navigation: Navigation
+    readonly transition: Transition | null
+    readonly preserveScrollPosition: boolean
 
     // Only present if navigation == "OVERLAY" and the destination uses
     // overlay position type "RELATIVE"
-    readonly overlayRelativePosition?: Vector,
+    readonly overlayRelativePosition?: Vector
   }
@@ -409,3 +417,3 @@
 
-export type Transition = SimpleTransition | DirectionalTransition
+type Transition = SimpleTransition | DirectionalTransition
 
@@ -415,4 +423,4 @@ type Trigger =
   { readonly type: "AFTER_TIMEOUT", readonly timeout: number } |
-  { readonly type: "MOUSE_ENTER" | "MOUSE_LEAVE" | "MOUSE_UP" | "MOUSE_DOWN",
-    readonly delay: number,
+  { readonly type: "MOUSE_ENTER" | "MOUSE_LEAVE" | "MOUSE_UP" | "MOUSE_DOWN"
+    readonly delay: number
   }
@@ -442,3 +450,3 @@
   readonly parent: (BaseNode & ChildrenMixin) | null
-  name: string // Note: setting this also sets \`autoRename\` to false on TextNodes
+  name: string // Note: setting this also sets `autoRename` to false on TextNodes
   readonly removed: boolean
@@ -455,2 +463,3 @@ toString(): string
   setSharedPluginData(namespace: string, key: string, value: string): void
+  setRelaunchData(data: { [command: string]: /* description */ string }): void
 }
@@ -469,3 +478,15 @@
 
+  findChildren(callback?: (node: SceneNode) => boolean): SceneNode[]
+  findChild(callback: (node: SceneNode) => boolean): SceneNode | null
+
+  /**
+   * If you only need to search immediate children, it is much faster
+   * to call node.children.filter(callback) or node.findChildren(callback)
+   */
   findAll(callback?: (node: SceneNode) => boolean): SceneNode[]
+
+  /**
+   * If you only need to search immediate children, it is much faster
+   * to call node.children.find(callback) or node.findChild(callback)
+   */
   findOne(callback: (node: SceneNode) => boolean): SceneNode | null
@@ -487,4 +508,5 @@ }
   readonly height: number
+  constrainProportions: boolean
 
-  layoutAlign: "MIN" | "CENTER" | "MAX" // applicable only inside auto-layout frames
+  layoutAlign: "MIN" | "CENTER" | "MAX" | "STRETCH" // applicable only inside auto-layout frames
 
@@ -504,7 +526,4 @@ resize(width: number, height: number): void
 interface ContainerMixin {
+  expanded: boolean
   backgrounds: ReadonlyArray<Paint> // DEPRECATED: use 'fills' instead
-  layoutGrids: ReadonlyArray<LayoutGrid>
-  clipsContent: boolean
-  guides: ReadonlyArray<Guide>
-  gridStyleId: string
   backgroundStyleId: string // DEPRECATED: use 'fillStyleId' instead
@@ -521,2 +540,3 @@ }
   strokeWeight: number
+  strokeMiterLimit: number
   strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE"
@@ -528,2 +548,3 @@ strokeCap: StrokeCap | PluginAPI['mixed']
   strokeStyleId: string
+  outlineStroke(): VectorNode | null
 }
@@ -549,3 +570,3 @@
 interface ReactionMixin {
-  readonly reactions: ReadonlyArray<Reaction> // PROPOSED API ONLY
+  readonly reactions: ReadonlyArray<Reaction>
 }
@@ -555,3 +576,4 @@
   BaseNodeMixin, SceneNodeMixin, ReactionMixin,
-  BlendMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  BlendMixin, GeometryMixin, LayoutMixin,
+  ExportMixin {
 }
@@ -563,3 +585,4 @@
   GeometryMixin, CornerMixin, RectangleCornerMixin,
-  BlendMixin, ConstraintMixin, LayoutMixin, ExportMixin {
+  BlendMixin, ConstraintMixin, LayoutMixin,
+  ExportMixin {
 
@@ -572,8 +595,13 @@ layoutMode: "NONE" | "HORIZONTAL" | "VERTICAL"
 
-  overflowDirection: OverflowDirection // PROPOSED API ONLY
-  numberOfFixedChildren: number // PROPOSED API ONLY
+  layoutGrids: ReadonlyArray<LayoutGrid>
+  gridStyleId: string
+  clipsContent: boolean
+  guides: ReadonlyArray<Guide>
 
-  readonly overlayPositionType: OverlayPositionType // PROPOSED API ONLY
-  readonly overlayBackground: OverlayBackground // PROPOSED API ONLY
-  readonly overlayBackgroundInteraction: OverlayBackgroundInteraction // PROPOSED API ONLY
+  overflowDirection: OverflowDirection
+  numberOfFixedChildren: number
+
+  readonly overlayPositionType: OverlayPositionType
+  readonly overlayBackground: OverlayBackground
+  readonly overlayBackgroundInteraction: OverlayBackgroundInteraction
 }
@@ -591,8 +619,20 @@
   insertChild(index: number, child: PageNode): void
+  findChildren(callback?: (node: PageNode) => boolean): Array<PageNode>
+  findChild(callback: (node: PageNode) => boolean): PageNode | null
 
-  findAll(callback?: (node: (PageNode | SceneNode)) => boolean): Array<PageNode | SceneNode>
-  findOne(callback: (node: (PageNode | SceneNode)) => boolean): PageNode | SceneNode | null
+  /**
+   * If you only need to search immediate children, it is much faster
+   * to call node.children.filter(callback) or node.findChildren(callback)
+   */
+  findAll(callback?: (node: PageNode | SceneNode) => boolean): Array<PageNode | SceneNode>
+
+  /**
+   * If you only need to search immediate children, it is much faster
+   * to call node.children.find(callback) or node.findChild(callback)
+   */
+  findOne(callback: (node: PageNode | SceneNode) => boolean): PageNode | SceneNode | null
 }
 
 interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
+
   readonly type: "PAGE"
@@ -603,6 +643,7 @@ clone(): PageNode
   selection: ReadonlyArray<SceneNode>
+  selectedTextRange: { node: TextNode, start: number, end: number } | null
 
   backgrounds: ReadonlyArray<Paint>
 
-  readonly prototypeStartNode: FrameNode | GroupNode | ComponentNode | InstanceNode | null // PROPOSED API ONLY
+  readonly prototypeStartNode: FrameNode | GroupNode | ComponentNode | InstanceNode | null
 }
@@ -615,3 +656,7 @@
 
-interface GroupNode extends BaseNodeMixin, SceneNodeMixin, ReactionMixin, ChildrenMixin, ContainerMixin, BlendMixin, LayoutMixin, ExportMixin {
+interface GroupNode extends
+  BaseNodeMixin, SceneNodeMixin, ReactionMixin,
+  ChildrenMixin, ContainerMixin, BlendMixin,
+  LayoutMixin, ExportMixin {
+
   readonly type: "GROUP"
@@ -621,3 +666,6 @@ clone(): GroupNode
 
-interface SliceNode extends BaseNodeMixin, SceneNodeMixin, LayoutMixin, ExportMixin {
+interface SliceNode extends
+  BaseNodeMixin, SceneNodeMixin, LayoutMixin,
+  ExportMixin {
+
   readonly type: "SLICE"
@@ -667,3 +715,2 @@ clone(): SliceNode
   clone(): TextNode
-  characters: string
   readonly hasMissingFont: boolean
@@ -685,2 +732,6 @@ textAlignHorizontal: "LEFT" | "CENTER" | "RIGHT" | "JUSTIFIED"
 
+  characters: string
+  insertCharacters(start: number, characters: string, useStyle?: "BEFORE" | "AFTER"): void
+  deleteCharacters(start: number, end: number): void
+
   getRangeFontSize(start: number, end: number): number | PluginAPI['mixed']
@@ -720,2 +771,3 @@ setRangeFontSize(start: number, end: number, value: number): void
   masterComponent: ComponentNode
+  scaleFactor: number
 }
@@ -727,2 +779,4 @@
   booleanOperation: "UNION" | "INTERSECT" | "SUBTRACT" | "EXCLUDE"
+
+  expanded: boolean
 }
@@ -817,2 +871,2 @@
 
-export {}
+export {}

mixins/layoutMixin.js

@@ -36,3 +36,6 @@ "use strict";
     }
+    if (props.layoutAlign) {
+        node.layoutAlign = props.layoutAlign;
+    }
 }; };
 //# sourceMappingURL=layoutMixin.js.map

package.json

 {
   "name": "react-figma",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "Render React components to Figma",
@@ -37,3 +37,3 @@ "scripts": {
   "engines": {
-    "node": ">=10.15.0 <12.0.0"
+    "node": ">=10.0.0"
   },
@@ -50,3 +50,3 @@ "devDependencies": {
     "css-loader": "^3.2.0",
-    "figma-api-stub": "0.0.28",
+    "figma-api-stub": "0.0.32",
     "html-webpack-inline-source-plugin": "^0.0.10",
@@ -53,0 +53,0 @@ "html-webpack-plugin": "^3.2.0",

README.md

@@ -153,17 +153,23 @@ # React Figma
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://twitter.com/ilialesik"><img src="https://avatars2.githubusercontent.com/u/1270648?v=4" width="100px;" alt="Ilya Lesik"/><br /><sub><b>Ilya Lesik</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=ilyalesik" title="Code">💻</a></td>
-    <td align="center"><a href="http://losyar.com"><img src="https://avatars2.githubusercontent.com/u/1065122?v=4" width="100px;" alt="Losev Yaroslav"/><br /><sub><b>Losev Yaroslav</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=LosYear" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/HVish"><img src="https://avatars1.githubusercontent.com/u/14261201?v=4" width="100px;" alt="Vishnu Singh"/><br /><sub><b>Vishnu Singh</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=HVish" title="Code">💻</a></td>
-    <td align="center"><a href="http://corrinachow.com"><img src="https://avatars1.githubusercontent.com/u/35117708?v=4" width="100px;" alt="corrina"/><br /><sub><b>corrina</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=corrinachow" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.zacharyquintenwitt.com"><img src="https://avatars1.githubusercontent.com/u/5651980?v=4" width="100px;" alt="Zachary Witt"/><br /><sub><b>Zachary Witt</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=zqwitt" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/theashraf"><img src="https://avatars1.githubusercontent.com/u/39750790?v=4" width="100px;" alt="Abdelrahman Ashraf"/><br /><sub><b>Abdelrahman Ashraf</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=theashraf" title="Code">💻</a></td>
-    <td align="center"><a href="https://seanprashad.com"><img src="https://avatars2.githubusercontent.com/u/13009507?v=4" width="100px;" alt="sprashad"/><br /><sub><b>sprashad</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=SeanPrashad" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://twitter.com/ilialesik"><img src="https://avatars2.githubusercontent.com/u/1270648?v=4" width="100px;" alt=""/><br /><sub><b>Ilya Lesik</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=ilyalesik" title="Code">💻</a></td>
+    <td align="center"><a href="http://losyar.com"><img src="https://avatars2.githubusercontent.com/u/1065122?v=4" width="100px;" alt=""/><br /><sub><b>Losev Yaroslav</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=LosYear" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/HVish"><img src="https://avatars1.githubusercontent.com/u/14261201?v=4" width="100px;" alt=""/><br /><sub><b>Vishnu Singh</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=HVish" title="Code">💻</a></td>
+    <td align="center"><a href="http://corrinachow.com"><img src="https://avatars1.githubusercontent.com/u/35117708?v=4" width="100px;" alt=""/><br /><sub><b>corrina</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=corrinachow" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.zacharyquintenwitt.com"><img src="https://avatars1.githubusercontent.com/u/5651980?v=4" width="100px;" alt=""/><br /><sub><b>Zachary Witt</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=zqwitt" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/theashraf"><img src="https://avatars1.githubusercontent.com/u/39750790?v=4" width="100px;" alt=""/><br /><sub><b>Abdelrahman Ashraf</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=theashraf" title="Code">💻</a></td>
+    <td align="center"><a href="https://seanprashad.com"><img src="https://avatars2.githubusercontent.com/u/13009507?v=4" width="100px;" alt=""/><br /><sub><b>sprashad</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=SeanPrashad" title="Documentation">📖</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/wyvl"><img src="https://avatars1.githubusercontent.com/u/40932265?v=4" width="100px;" alt=""/><br /><sub><b>Vivian Lee</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=wyvl" title="Code">💻</a></td>
+  </tr>
 </table>
 
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

types.d.ts

@@ -29,2 +29,3 @@ import * as React from 'react';
     isWithoutConstraints?: boolean;
+    layoutAlign?: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH';
 }
@@ -31,0 +32,0 @@ export interface ChildrenProps {

workers/yogaWorker.js

@@ -54,6 +54,7 @@ "use strict";
     yogaRoot.calculateLayout(props.width, props.height, yoga.DIRECTION_LTR);
+    var value = transformCache(cache);
     parent.postMessage({
         pluginMessage: {
             id: message.id,
-            value: transformCache(cache)
+            value: value
         }
@@ -60,0 +61,0 @@ }, '*');

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

317942

increased by0.96%

Number of package files

258

increased by1.18%

Lines of code

4860

increased by1.29%

Number of lines in readme file

175

increased by3.55%

No dependency changes