react-figma - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

components/component/Component.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
 }
-export declare const Component: React.FC<ComponentProps>;
+declare const Component: React.FC<ComponentProps>;
+export { Component };

components/component/Component.js

@@ -22,3 +22,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
-exports.Component = function (props) {
+var Component = function (props) {
     var nodeRef = props.nodeRef || React.useRef();
@@ -32,2 +32,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Component = Component;
 //# sourceMappingURL=Component.js.map

components/component/Instance.d.ts

@@ -14,2 +14,3 @@ import * as React from 'react';
 }
-export declare const Instance: React.FC<InstanceProps>;
+declare const Instance: React.FC<InstanceProps>;
+export { Instance };

components/component/Instance.js

@@ -93,3 +93,3 @@ "use strict";
 };
-exports.Instance = function (props) {
+var Instance = function (props) {
     var _a = React.useState(false), isHaveNode = _a[0], setHaveNode = _a[1];
@@ -108,2 +108,3 @@ var nodeRef = React.useRef();
 };
+exports.Instance = Instance;
 //# sourceMappingURL=Instance.js.map

components/ellipse/Ellipse.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
 }
-export declare const Ellipse: React.FC<EllipseProps>;
+declare const Ellipse: React.FC<EllipseProps>;
+export { Ellipse };

components/ellipse/Ellipse.js

@@ -24,3 +24,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
-exports.Ellipse = function (props) {
+var Ellipse = function (props) {
     var nodeRef = React.useRef();
@@ -35,2 +35,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Ellipse = Ellipse;
 //# sourceMappingURL=Ellipse.js.map

components/frame/Frame.d.ts

@@ -185,3 +185,3 @@ import * as React from 'react';
 }
-export declare const Frame: React.FC<FrameNodeProps>;
-export {};
+declare const Frame: React.FC<FrameNodeProps>;
+export { Frame };

components/frame/Frame.js

@@ -202,3 +202,3 @@ "use strict";
 };
-exports.Frame = function (props) {
+var Frame = function (props) {
     var nodeRef = React.useRef();
@@ -213,2 +213,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Frame = Frame;
 //# sourceMappingURL=Frame.js.map

components/group/Group.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
 }
-export declare const Group: React.FC<GroupNodeProps>;
+declare const Group: React.FC<GroupNodeProps>;
+export { Group };

components/group/Group.js

@@ -23,3 +23,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
-exports.Group = function (props) {
+var Group = function (props) {
     var nodeRef = React.useRef();
@@ -33,2 +33,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Group = Group;
 //# sourceMappingURL=Group.js.map

components/Image/Image.d.ts

@@ -8,2 +8,3 @@ import * as React from 'react';
 }
-export declare const Image: React.FC<ImageProps>;
+declare const Image: React.FC<ImageProps>;
+export { Image };

components/Image/Image.js

@@ -17,6 +17,7 @@ "use strict";
 var __1 = require("../..");
-exports.Image = function (props) {
+var Image = function (props) {
     var style = props.style, source = props.source, resizeMode = props.resizeMode;
     return (React.createElement(Rectangle_1.Rectangle, __assign({}, props, { style: [__1.StyleSheet.flatten(style), { backgroundImage: source, backgroundSize: resizeMode }] })));
 };
+exports.Image = Image;
 //# sourceMappingURL=Image.js.map

components/line/Line.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
 }
-export declare const Line: React.FC<LineProps>;
+declare const Line: React.FC<LineProps>;
+export { Line };

components/line/Line.js

@@ -23,3 +23,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
-exports.Line = function (props) {
+var Line = function (props) {
     var nodeRef = React.useRef();
@@ -33,2 +33,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Line = Line;
 //# sourceMappingURL=Line.js.map

components/page/Page.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
 }, callback?: void | ((isCurrent: boolean) => void), _isCurrent?: boolean) => void;
-export declare const Page: React.FC<PageProps>;
+declare const Page: React.FC<PageProps>;
+export { Page };

components/page/Page.js

@@ -43,3 +43,3 @@ "use strict";
 };
-exports.Page = function (props) {
+var Page = function (props) {
     var nodeRef = React.useRef();
@@ -52,2 +52,3 @@ var onCurrentChange = props.onCurrentChange, otherProps = __rest(props, ["onCurrentChange"]);
 };
+exports.Page = Page;
 //# sourceMappingURL=Page.js.map

components/rectangle/Rectangle.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
 }
-export declare const Rectangle: React.FC<RectangleProps>;
+declare const Rectangle: React.FC<RectangleProps>;
+export { Rectangle };

components/rectangle/Rectangle.js

@@ -25,3 +25,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
-exports.Rectangle = function (props) {
+var Rectangle = function (props) {
     var nodeRef = React.useRef();
@@ -36,2 +36,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Rectangle = Rectangle;
 //# sourceMappingURL=Rectangle.js.map

components/star/Star.d.ts

@@ -12,2 +12,3 @@ import * as React from 'react';
 }
-export declare const Star: React.FC<StarProps>;
+declare const Star: React.FC<StarProps>;
+export { Star };

components/star/Star.js

@@ -24,3 +24,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
-exports.Star = function (props) {
+var Star = function (props) {
     var nodeRef = React.useRef();
@@ -35,2 +35,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Star = Star;
 //# sourceMappingURL=Star.js.map

components/svg/Svg.d.ts

@@ -12,2 +12,3 @@ import * as React from 'react';
 }
-export declare const Svg: React.FC<SvgNodeProps>;
+declare const Svg: React.FC<SvgNodeProps>;
+export { Svg };

components/svg/Svg.js

@@ -23,3 +23,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
-exports.Svg = function (props) {
+var Svg = function (props) {
     var nodeRef = React.useRef();
@@ -33,2 +33,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Svg = Svg;
 //# sourceMappingURL=Svg.js.map

components/text/Text.d.ts

@@ -14,2 +14,3 @@ import * as React from 'react';
 }
-export declare const Text: React.FC<TextProps>;
+declare const Text: React.FC<TextProps>;
+export { Text };

components/text/Text.js

@@ -28,3 +28,3 @@ "use strict";
 };
-exports.Text = function (props) {
+var Text = function (props) {
     var nodeRef = React.useRef();
@@ -43,2 +43,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Text = Text;
 //# sourceMappingURL=Text.js.map

components/vector/Vector.d.ts

@@ -12,2 +12,3 @@ import * as React from 'react';
 }
-export declare const Vector: React.FC<VectorProps>;
+declare const Vector: React.FC<VectorProps>;
+export { Vector };

components/vector/Vector.js

@@ -24,3 +24,3 @@ "use strict";
 var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
-exports.Vector = function (props) {
+var Vector = function (props) {
     var nodeRef = React.useRef();
@@ -35,2 +35,3 @@ useSelectionChange_1.useSelectionChange(nodeRef, props);
 };
+exports.Vector = Vector;
 //# sourceMappingURL=Vector.js.map

components/view/View.d.ts

@@ -5,2 +5,3 @@ import * as React from 'react';
 export declare type ViewProps = FrameNodeProps | RectangleProps;
-export declare const View: React.FC<ViewProps>;
+declare const View: React.FC<ViewProps>;
+export { View };

components/view/View.js

@@ -16,3 +16,3 @@ "use strict";
 var __1 = require("../..");
-exports.View = function (props) {
+var View = function (props) {
     if (props.children) {
@@ -25,2 +25,3 @@ return (React.createElement(__1.Frame, __assign({}, props, { style: [{ backgroundColor: 'transparent' }, props.style && __1.StyleSheet.flatten(props.style)] })));
 };
+exports.View = View;
 //# sourceMappingURL=View.js.map

contributing.md

@@ -64,3 +64,7 @@ # Contribution Guidelines
 1. Check linting/tests
-2. Check that project is can be built `npm run build`
+2. Check project is can be built `npm run build`
 3. Make Pull Request with your changes.
+
+## Publishing new version to NPM
+1. Bump version in `package.json` and `src/renderer.tsx`
+2. Create new release/new tag on Github named `vx.y.z` where `x.y.z` is new version number

index.d.ts

 export { render } from './renderer';
+export { connectToDevTools } from './helpers/connectToDevTools';
 export { Text } from './components/text/Text';
@@ -3,0 +4,0 @@ export { Rectangle } from './components/rectangle/Rectangle';

index.js

@@ -5,2 +5,4 @@ "use strict";
 exports.render = renderer_1.render;
+var connectToDevTools_1 = require("./helpers/connectToDevTools");
+exports.connectToDevTools = connectToDevTools_1.connectToDevTools;
 var Text_1 = require("./components/text/Text");
@@ -7,0 +9,0 @@ exports.Text = Text_1.Text;

package.json

 {
   "name": "react-figma",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Render React components to Figma",
@@ -56,2 +56,3 @@ "scripts": {
     "react": "16.8.6",
+    "react-devtools-core": "^4.7.0",
     "react-figma-webpack-config": "0.0.7",
@@ -58,0 +59,0 @@ "react-test-renderer": "16.8.6",

renderer.js

@@ -51,4 +51,3 @@ "use strict";
 var nanoid = require("nanoid/non-secure");
-// * Development version of react-reconciler can't be used inside Figma realm.
-var createReconciler = require("react-reconciler/cjs/react-reconciler.production.min");
+var createReconciler = require("react-reconciler");
 var useTextChildren_1 = require("./hooks/useTextChildren");
@@ -213,9 +212,10 @@ var rpc_1 = require("./rpc");
                     commitMount: function (instance, type) { },
-                    commitHydratedContainer: function (container) {
-                        /*container.children.forEach(child => {
-                            updateYogaRoot(child);
-                        });*/
-                    }
+                    commitHydratedContainer: function () { }
                 };
                 reconciler = createReconciler(HostConfig);
+                reconciler.injectIntoDevTools({
+                    bundleType: 1,
+                    version: '0.1.6',
+                    rendererPackageName: 'react-figma'
+                });
                 container = reconciler.createContainer(rootNode, true, true);
@@ -222,0 +222,0 @@ reconciler.updateContainer(jsx, container);

rpc.d.ts

@@ -31,2 +31,3 @@ import { Subject } from 'rxjs';
     setCurrentPage: (_node: any) => Promise<void>;
+    highlightNativeElement: (_node: any) => Promise<void>;
 }>;
@@ -33,0 +34,0 @@ export declare const setupMainThread: () => void;

rpc.js

@@ -199,2 +199,19 @@ "use strict";
         figma.currentPage = node;
+    },
+    highlightNativeElement: function (_node) {
+        var node = transformToNode(_node);
+        if (!node || node.type === 'DOCUMENT') {
+            return;
+        }
+        if (figma.currentPage.selection.includes(node)) {
+            return;
+        }
+        var nodePage = findRoot(node);
+        if (figma.currentPage !== nodePage) {
+            figma.currentPage = nodePage;
+        }
+        if (node.type !== 'PAGE') {
+            figma.viewport.scrollAndZoomIntoView([node]);
+            figma.currentPage.selection = [node];
+        }
     }
@@ -201,0 +218,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

352617

increased by1.32%

Number of package files

270

increased by1.12%

Lines of code

5362

increased by1.53%

Worsened metrics

Dev dependency count

28

increased by3.7%

No dependency changes