Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-figma

Package Overview
Dependencies
Maintainers
2
Versions
113
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-figma - npm Package Compare versions

Comparing version 0.5.2 to 0.6.0

localStyles/useFillPaintStyle.d.ts

4

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

@@ -39,6 +39,5 @@ "use strict";

: {}), __1.StyleSheet.flatten(flattenOriginalStyle), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
console.log(style);
var children = normalizeTextNodeChidren(props.children);
var charactersByChildren = useTextChildren_1.useTextChildren(nodeRef);
var textProps = __assign({}, transformLayoutStyleProperties_1.transformLayoutStyleProperties(style), transformTextStyleProperties_1.transformTextStyleProperties(style), transformBlendProperties_1.transformBlendProperties(style), props, { characters: charactersByChildren || props.characters, style: style,
var textProps = __assign({}, transformLayoutStyleProperties_1.transformLayoutStyleProperties(style), transformTextStyleProperties_1.transformTextStyleProperties(style), transformBlendProperties_1.transformBlendProperties(style), props, { characters: charactersByChildren || props.characters }, (style && style.textStyleId ? { textStyleId: style.textStyleId } : {}), { style: style,
children: children });

@@ -45,0 +44,0 @@ var hasDefinedWidth = textProps.width || style.maxWidth;

@@ -22,1 +22,4 @@ export { render } from './renderer';

export { Platform } from './helpers/Platform';
export { useFillPaintStyle } from './localStyles/useFillPaintStyle';
export { useStrokePaintStyle } from './localStyles/useStrokePaintStyle';
export { useTextStyle } from './localStyles/useTextStyle';

@@ -46,2 +46,8 @@ "use strict";

exports.Platform = Platform_1.Platform;
var useFillPaintStyle_1 = require("./localStyles/useFillPaintStyle");
exports.useFillPaintStyle = useFillPaintStyle_1.useFillPaintStyle;
var useStrokePaintStyle_1 = require("./localStyles/useStrokePaintStyle");
exports.useStrokePaintStyle = useStrokePaintStyle_1.useStrokePaintStyle;
var useTextStyle_1 = require("./localStyles/useTextStyle");
exports.useTextStyle = useTextStyle_1.useTextStyle;
//# sourceMappingURL=index.js.map
{
"name": "react-figma",
"version": "0.5.2",
"version": "0.6.0",
"description": "Render React components to Figma",

@@ -50,3 +50,3 @@ "scripts": {

"css-loader": "^3.2.0",
"figma-api-stub": "0.0.44",
"figma-api-stub": "0.0.45",
"file-loader": "^6.2.0",

@@ -75,3 +75,3 @@ "html-webpack-inline-source-plugin": "^0.0.10",

"figma-jsonrpc": "^0.4.0",
"nanoid": "^2.0.3",
"nanoid": "3.1.20",
"react-devtools-core": "^4.7.0",

@@ -78,0 +78,0 @@ "react-fetch-hook": "1.7.2",

@@ -121,2 +121,3 @@ # React Figma

* [MDX](examples/mdx)
* [Local Styles](examples/local-styles)

@@ -123,0 +124,0 @@ ## Sponsoring

@@ -50,3 +50,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
var nanoid = require("nanoid/non-secure");
var non_secure_1 = require("nanoid/non-secure");
var createReconciler = require("react-reconciler");

@@ -113,3 +113,3 @@ var useTextChildren_1 = require("./hooks/useTextChildren");

var renderInstance = function (type, node, props) {
var result = { reactId: (node && node.reactId) || nanoid(), type: type.toUpperCase() };
var result = { reactId: (node && node.reactId) || non_secure_1.nanoid(), type: type.toUpperCase() };
var children = props.children, otherProps = __rest(props, ["children"]);

@@ -116,0 +116,0 @@ if (props.ref) {

@@ -27,3 +27,4 @@ "use strict";

'letterSpacing',
'lineHeight'
'lineHeight',
'textStyleId'
], {

@@ -30,0 +31,0 @@ characters: '',

/// <reference types="plugin-typings" />
import { Subject } from 'rxjs';
import { CommonStyleProps } from './types';
export declare const api: Readonly<{

@@ -22,3 +23,3 @@ getInitialTree: () => Promise<{

reactId: string | void;
nodeBatchId: any;
nodeBatchId: string;
}>;

@@ -34,2 +35,11 @@ findNodeByName: (_node: any, name: any) => Promise<{

highlightNativeElement: (_node: any) => Promise<void>;
createOrUpdatePaintStyle: (properties: {
paints: void | readonly Paint[];
params: CommonStyleProps;
}) => Promise<string>;
createOrUpdateTextStyle: (properties: {
textProperties: any;
params: CommonStyleProps;
loadedFont: any;
}) => Promise<string>;
}>;

@@ -36,0 +46,0 @@ export declare const setupMainThread: () => void;

@@ -52,5 +52,6 @@ "use strict";

var renderers = require("./renderers");
var nanoid = require("nanoid/non-secure");
var non_secure_1 = require("nanoid/non-secure");
var rxjs_1 = require("rxjs");
var safeGetPluginData_1 = require("./helpers/safeGetPluginData");
var isEqualFontStyle_1 = require("./helpers/isEqualFontStyle");
var getInitialTree = function (node) {

@@ -80,3 +81,3 @@ return {

}
var nodeBatchId = nanoid();
var nodeBatchId = non_secure_1.nanoid();
node.setPluginData('nodeBatchId', nodeBatchId);

@@ -226,2 +227,40 @@ var children = node.children && node.children.map(transformNodesToTree).filter(function (item) { return !!item; });

}
},
createOrUpdatePaintStyle: function (properties) {
var paints = properties.paints, params = properties.params;
var name = params.name, id = params.id, description = params.description;
var foundPaintStyle = figma.getLocalPaintStyles().find(function (style) { return style.name === name || style.id === id; });
var paintStyle = foundPaintStyle || figma.createPaintStyle();
if (name) {
paintStyle.name = name;
}
if (description) {
paintStyle.description = description;
}
if (paints) {
paintStyle.paints = paints;
}
return paintStyle.id;
},
createOrUpdateTextStyle: function (properties) {
var _a = properties.textProperties, textProperties = _a === void 0 ? {} : _a, params = properties.params, loadedFont = properties.loadedFont;
var name = params.name, id = params.id, description = params.description;
var foundTextStyle = figma.getLocalTextStyles().find(function (style) { return style.name === name || style.id === id; });
var textStyle = foundTextStyle || figma.createTextStyle();
if (name) {
textStyle.name = name;
}
if (description) {
textStyle.description = description;
}
var _b = textProperties.fontName, fontName = _b === void 0 ? { family: 'Roboto', style: 'Regular' } : _b;
if (loadedFont &&
fontName &&
loadedFont.family === fontName.family &&
isEqualFontStyle_1.isEqualFontStyle(loadedFont.style, fontName.style)) {
Object.keys(textProperties).forEach(function (key) {
textStyle[key] = textProperties[key];
});
}
return textStyle.id;
}

@@ -228,0 +267,0 @@ }, {

@@ -13,2 +13,5 @@ import { GeometryProps } from '../types';

};
export declare const transformGeometryStyleProperties: (property: "fills" | "backgrounds", style?: Partial<LayoutStyleProperties & GeometryStyleProperties>, imageHash?: string) => GeometryProps;
export declare const transformGeometryStyleProperties: (property: "fills" | "backgrounds", style?: Partial<LayoutStyleProperties & GeometryStyleProperties & {
fillStyleId?: string;
strokeStyleId?: string;
}>, imageHash?: string) => GeometryProps;

@@ -66,4 +66,4 @@ "use strict";

}
return __assign({}, ((fills.length > 0 && (_a = {}, _a[property] = fills, _a)) || {}));
return __assign({}, ((fills.length > 0 && (_a = {}, _a[property] = fills, _a)) || {}), ((style.fillStyleId && { fillStyleId: style.fillStyleId }) || {}), ((style.strokeStyleId && { strokeStyleId: style.strokeStyleId }) || {}));
};
//# sourceMappingURL=transformGeometryStyleProperties.js.map

@@ -18,2 +18,3 @@ import { Color, GeometryProps, TextNodeProps } from '../types';

textShadowRadius: number;
textStyleId: string;
}

@@ -20,0 +21,0 @@ interface TextProperties extends GeometryProps, TextNodeProps {

@@ -37,3 +37,3 @@ /// <reference types="plugin-typings" />

export interface GeometryProps {
fills?: ReadonlyArray<Paint> | symbol;
fills?: ReadonlyArray<Paint>;
strokes?: ReadonlyArray<Paint>;

@@ -87,2 +87,3 @@ strokeWeight?: number;

lineHeight?: LineHeight | symbol;
textStyleId?: string;
}

@@ -141,1 +142,6 @@ export interface VectorNodeProps {

}
export interface CommonStyleProps {
id?: string;
name?: string;
description?: string;
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc