figma-transformer - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/figma-transformer.cjs.development.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _extends() {
@@ -36,3 +38,3 @@ _extends = Object.assign || function (target) {
 
-function uniqBy(arr, fn, set) {
+function uniqBy(arr, key, set) {
   if (set === void 0) {
@@ -45,6 +47,5 @@ set = new Set();
       return !set.has(v) && set.add(v);
-    }(el[fn]);
+    }(el[key]);
   });
 }
-
 function groupBy(arr, key) {
@@ -56,6 +57,30 @@ return arr.reduce(function (rv, x) {
 }
-
 var groupNodes = function groupNodes(nodes) {
-  return groupBy(uniqBy(nodes, "id"), "type");
+  return parseShortcutKeys(groupBy(uniqBy(nodes, "id"), "type"));
 };
+var parseShortcutKeys = function parseShortcutKeys(obj) {
+  var mapKeys = {
+    DOCUMENT: "documents",
+    COMPONENT: "components",
+    CANVAS: "pages",
+    LINE: "lines",
+    INSTANCE: "instances",
+    FRAME: "frames",
+    GROUP: "groups",
+    VECTOR: "vectors",
+    BOOLEAN: "booleans",
+    STAR: "stars",
+    ELLIPSE: "ellipses",
+    REGULAR_POLYGON: "regularPolygon",
+    RECTANGLE: "rectangles",
+    TEXT: "texts",
+    SLICE: "slices",
+    STYLE: "styles"
+  };
+  return Object.fromEntries(Object.entries(obj).map(function (_ref) {
+    var k = _ref[0],
+        v = _ref[1];
+    return [mapKeys[k], v];
+  }));
+};
 
@@ -106,3 +131,3 @@ function processFile(data, id) {
           styles: node[key + "s"],
-          typeStyles: node.style,
+          textStyles: node.style,
           type: "STYLE"
@@ -145,3 +170,3 @@ });
       fileId: fileId
-    }, rest, {}, componentInfo && componentInfo, {
+    }, rest, componentInfo && componentInfo, {
       children: parsedChildren,
@@ -148,0 +173,0 @@ shortcuts: groupNodes(shortcuts)

dist/figma-transformer.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(){return(e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var t=function(e){return function(e,t){return e.reduce((function(e,t){return(e[t.type]=e[t.type]||[]).push(t),e}),{})}((t=e,void 0===n&&(n=new Set),t.filter((function(e){return!n.has(t=e.id)&&n.add(t);var t}))));var t,n};function n(n,r,i,s){var u=new Map(Object.entries(r)),c=new Map(Object.entries(i));return function n(r,i){var o=r.id,l=r.styles,a=r.children,d=function(e,t){if(null==e)return{};var n,r,i={},s=Object.keys(e);for(r=0;r<s.length;r++)t.indexOf(n=s[r])>=0||(i[n]=e[n]);return i}(r,["id","styles","children"]),f=[];if(null!=l&&(f=Object.entries(l).map((function(t){var n=t[0],i=t[1];return e({id:i},u.get(i),{styles:r[n+"s"],typeStyles:r.style,type:"STYLE"})}))),null==a||0===a.length)return[[e({id:o,parentId:i,fileId:s},d)],f];var p=a.reduce((function(e,t){var r=e[0],i=e[1],s=n(t,o),u=s[0],c=s[1];return[[].concat(r,u),[].concat(i,u,c)]}),[[],[]]),h=p[0],v=p[1],y=c.get(o);return[[e({id:o,parentId:i,fileId:s},d,{},y&&y,{children:h,shortcuts:t(v)})],v]}(n,"0:0")}exports.processFile=function(e,r){var i=e.name,s=e.lastModified,u=e.thumbnailUrl,c=e.version,o=n(e.document,e.styles,e.components,r);return{fileId:r,name:i,lastModified:s,thumbnailUrl:u,version:c,children:o[0][0].children,shortcuts:t(o[1])}},exports.processNodes=n;
+"use strict";function e(){return(e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var t=function(e){return n(function(e,t){return e.reduce((function(e,t){return(e[t.type]=e[t.type]||[]).push(t),e}),{})}((t=e,void 0===r&&(r=new Set),t.filter((function(e){return!r.has(t=e.id)&&r.add(t);var t})))));var t,r},n=function(e){var t={DOCUMENT:"documents",COMPONENT:"components",CANVAS:"pages",LINE:"lines",INSTANCE:"instances",FRAME:"frames",GROUP:"groups",VECTOR:"vectors",BOOLEAN:"booleans",STAR:"stars",ELLIPSE:"ellipses",REGULAR_POLYGON:"regularPolygon",RECTANGLE:"rectangles",TEXT:"texts",SLICE:"slices",STYLE:"styles"};return Object.fromEntries(Object.entries(e).map((function(e){return[t[e[0]],e[1]]})))};function r(n,r,s,i){var o=new Map(Object.entries(r)),c=new Map(Object.entries(s));return function n(r,s){var u=r.id,l=r.styles,a=r.children,d=function(e,t){if(null==e)return{};var n,r,s={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(s[n]=e[n]);return s}(r,["id","styles","children"]),f=[];if(null!=l&&(f=Object.entries(l).map((function(t){var n=t[0],s=t[1];return e({id:s},o.get(s),{styles:r[n+"s"],textStyles:r.style,type:"STYLE"})}))),null==a||0===a.length)return[[e({id:u,parentId:s,fileId:i},d)],f];var p=a.reduce((function(e,t){var r=e[0],s=e[1],i=n(t,u),o=i[0],c=i[1];return[[].concat(r,o),[].concat(s,o,c)]}),[[],[]]),O=p[0],v=p[1],E=c.get(u);return[[e({id:u,parentId:s,fileId:i},d,E&&E,{children:O,shortcuts:t(v)})],v]}(n,"0:0")}exports.processFile=function(e,n){var s=e.name,i=e.lastModified,o=e.thumbnailUrl,c=e.version,u=r(e.document,e.styles,e.components,n);return{fileId:n,name:s,lastModified:i,thumbnailUrl:o,version:c,children:u[0][0].children,shortcuts:t(u[1])}},exports.processNodes=r;
 //# sourceMappingURL=figma-transformer.cjs.production.min.js.map

dist/figma-transformer.esm.js

@@ -34,3 +34,3 @@ function _extends() {
 
-function uniqBy(arr, fn, set) {
+function uniqBy(arr, key, set) {
   if (set === void 0) {
@@ -43,6 +43,5 @@ set = new Set();
       return !set.has(v) && set.add(v);
-    }(el[fn]);
+    }(el[key]);
   });
 }
-
 function groupBy(arr, key) {
@@ -54,6 +53,30 @@ return arr.reduce(function (rv, x) {
 }
-
 var groupNodes = function groupNodes(nodes) {
-  return groupBy(uniqBy(nodes, "id"), "type");
+  return parseShortcutKeys(groupBy(uniqBy(nodes, "id"), "type"));
 };
+var parseShortcutKeys = function parseShortcutKeys(obj) {
+  var mapKeys = {
+    DOCUMENT: "documents",
+    COMPONENT: "components",
+    CANVAS: "pages",
+    LINE: "lines",
+    INSTANCE: "instances",
+    FRAME: "frames",
+    GROUP: "groups",
+    VECTOR: "vectors",
+    BOOLEAN: "booleans",
+    STAR: "stars",
+    ELLIPSE: "ellipses",
+    REGULAR_POLYGON: "regularPolygon",
+    RECTANGLE: "rectangles",
+    TEXT: "texts",
+    SLICE: "slices",
+    STYLE: "styles"
+  };
+  return Object.fromEntries(Object.entries(obj).map(function (_ref) {
+    var k = _ref[0],
+        v = _ref[1];
+    return [mapKeys[k], v];
+  }));
+};
 
@@ -104,3 +127,3 @@ function processFile(data, id) {
           styles: node[key + "s"],
-          typeStyles: node.style,
+          textStyles: node.style,
           type: "STYLE"
@@ -143,3 +166,3 @@ });
       fileId: fileId
-    }, rest, {}, componentInfo && componentInfo, {
+    }, rest, componentInfo && componentInfo, {
       children: parsedChildren,
@@ -146,0 +169,0 @@ shortcuts: groupNodes(shortcuts)

dist/index.d.ts

@@ -1,13 +0,4 @@
-import { Node, NodeType, Document, FileResponse, Style, ComponentMetadata } from "figma-js";
-declare type Shortcut = NodeType | "STYLE";
-declare type ProcessedFile = {
-    fileId: string;
-    name: string;
-    lastModified: string;
-    thumbnailUrl: string;
-    version: string;
-    children: any;
-    shortcuts: Record<Shortcut, Node[]>;
-};
-export declare function processFile(data: FileResponse, id: string): ProcessedFile;
+import { Document, FileResponse, Style, ComponentMetadata } from "figma-js";
+import { ProcessedFile } from "./types";
+export declare function processFile(data: FileResponse, id?: string): ProcessedFile;
 export declare function processNodes(nodes: Document, documentStyles: {
@@ -17,2 +8,2 @@ [key: string]: Style;
     [key: string]: ComponentMetadata;
-}, fileId: string): any[];
+}, fileId?: string): any[];

package.json

 {
     "name": "figma-transformer",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "license": "MIT",
@@ -28,4 +28,3 @@ "keywords": [
         "test": "tsdx test",
-        "lint": "tsdx lint",
-        "prepublishOnly": "yarn build"
+        "lint": "tsdx lint src"
     },
@@ -36,25 +35,13 @@ "sideEffects": false,
         "hooks": {
-            "pre-commit": "tsdx lint"
+            "pre-commit": "yarn lint && yarn test"
         }
     },
-    "prettier": {
-        "printWidth": 80,
-        "tabWidth": 4,
-        "useTabs": false,
-        "semi": true,
-        "singleQuote": false,
-        "trailingComma": "es5",
-        "bracketSpacing": true,
-        "jsxBracketSameLine": false,
-        "fluid": false
-    },
     "devDependencies": {
-        "@types/jest": "^24.0.19",
-        "figma-js": "^1.8.5",
-        "husky": "^3.0.9",
-        "tsdx": "^0.10.5",
-        "tslib": "^1.10.0",
-        "typescript": "^3.6.4"
+        "@types/jest": "^26.0.3",
+        "figma-js": "^1.10.1",
+        "husky": "^4.2.5",
+        "tsdx": "^0.13.2",
+        "typescript": "^3.9.5"
     },
     "dependencies": {}
 }

README.md

@@ -1,5 +0,19 @@
-# figma-transformer
+<p align="center">
+    <svg xmlns="http://www.w3.org/2000/svg" width="82" height="123" fill="none">
+        <path fill="#0ACF83" d="M20.5 82h9L15 122.3A20.5 20.5 0 0120.5 82zM25.8 101.2L41 84.6V82h-5.8L31 86.7l-5.2 14.5zM18 122.9l2.2.1L41 100.3v-9l-19.2 21L18 123zM40.3 107.8a20.5 20.5 0 01-12.8 14l12.8-14z"/>
+        <path fill="#A259FF" d="M41 41v8.6L29.4 82h-8.9a20.5 20.5 0 010-41H41zM41 69l-6.1 6.6L40 61.1l.9-1V69zM41 75.7V82h-5.8l5.8-6.3z"/>
+        <path fill="#1ABCFE" d="M66 41.5L42 68a20.5 20.5 0 01-1-7.9l17.2-18.7a20.5 20.5 0 017.9.2zM48 77a20.5 20.5 0 01-4-4.7l26.7-29.1c1.8.9 3.5 2 5 3.5L48 76.9zM51.8 79.6c2 1 4 1.7 6.2 2.1l23.3-25.5c-.6-2.1-1.5-4.1-2.7-6L51.8 79.6zM76 76c3.7-3.7 5.8-8.6 6-13.8L64 81.8c4.5-.5 8.8-2.6 12-5.8z"/>
+        <path fill="#FF7262" d="M41 0h17.7L44 41H41V0zM53.2 24.3L72.5 3.2c-1.8-1.1-3.8-2-5.8-2.5l-8.3 9-5.2 14.6zM47.2 41h5l27.5-30c-1-1.8-2.2-3.5-3.6-5L49.2 35.5l-2 5.6zM67.3 40.1c-1.8.6-3.8.9-5.8.9h-3l23-25.2a20.5 20.5 0 010 8.8L67.4 40z"/>
+        <path fill="#F24E1E" d="M0 20.5A20.5 20.5 0 0020.5 41H41V0H20.5A20.5 20.5 0 000 20.5z"/>
+    </svg>
+</p>
 
-Tiny utility library to transform the Figma API response into something more human friendly.
+<h1 align="center">
+figma-transformer
+</h1>
 
+<div align="center">
+
+A tiny (< 1KB) utility library that transforms the Figma API response into something more human friendly.
+
 [![npm version][version-badge]][npm]
@@ -12,6 +26,39 @@ [![npm downloads][downloads-badge]][npm]
 
-## Which problems does this solve?
+</div>
 
-**Break free from the file structure**
+## How to use `figma-transformer`?
 
+```js
+import processFile from 'figma-transformer';
+
+// Fetch the file you want using your favourite method
+...
+
+const fileData = processFile(originalFile);
+
+// ✨ You can now use `fileData` for whatever you need! ✨
+
+// Let's get the styles for a component named "Test"
+const testStyles = data.shortcuts.components
+    .find(component => component.name === "Test")
+    .shortcuts.styles;
+
+```
+
+## Why use `figma-transformer`?
+
+The Figma API is great but sometimes it feels like it's built for machines, not humans. The more you use it, the more you'll end up wasting a lot of time to get to the information that you want.
+
+These are the most common problems:
+
+-   Rigid file structure
+-   Incomplete information about styles and components
+-   No type safety
+
+With `figma-transformer` you get the file structure that you wished the Figma API had.
+
+## How does `figma-transformer` solve these problems?
+
+### Break free from the file structure
+
 The Figma API response is very strict in terms of the file structure. To get to a specific node you have to navigate through the entire tree of nodes and it's really easy for your code to break if there's a change in the design file that changes the initial hierarchy.
@@ -41,3 +88,3 @@
 
-**Missing information from nodes**
+### Missing information from nodes
 
@@ -113,3 +160,3 @@ From the API we can get the information about the styles and components that are present in the file, which is great, but it doesn't contain all the information so we need to parse the entire file to get the additional information that we usuallly need.
         ],
-        typeStyles: {
+        textStyles: {
             fontFamily: "Roboto",
@@ -134,3 +181,3 @@ fontPostScriptName: null,
         description: "",
-        typeStyles: {
+        textStyles: {
             fontFamily: "Roboto",
@@ -208,10 +255,16 @@ fontPostScriptName: null,
 
-Let's see more specific examples where the benefits of the library really stand out.
+### Improved type safety
 
+The Figma API doesn't have official type definitions, but fortunately we can provide a better developer experience by extending the TypeScript type definitions provided by the awesome [figma-js](https://github.com/jongold/figma-js) library.
+
+This means that you can continue to use your preferred way of fetching the data from the Figma API and `figma-transformer` will provide the types for you.
+
 ## Examples
 
+Let's see more specific examples where the benefits of the library really stand out.
+
 **Getting all text used in a document**
 
 ```js
-const text = data.shortcuts.TEXT.map(node => node.characters);
+const text = data.shortcuts.texts.map(node => node.characters);
 ```
@@ -222,5 +275,5 @@
 ```js
-const styles = data.shortcuts.COMPONENT.filter(
-    component => component.name === "Test"
-).map(component => component.shortcuts.STYLE);
+const styles = data.shortcuts.components
+    .filter(component => component.name === "Test")
+    .map(component => component.shortcuts.styles);
 ```
@@ -231,10 +284,11 @@
 ```js
-const fills = data.shortcuts.CANVAS.filter(page => page.name === "Page 1").map(
-    page => page.shortcuts.RECTANGLE.fills
-);
+const fills = data.shortcuts.pages
+    .filter(page => page.name === "Page 1")
+    .map(page => page.shortcuts.rectangles.fills);
 ```
 
-## Projects using figma-transformer
+## Projects using `figma-transformer`
 
 -   [figma-graphql](https://github.com/braposo/figma-graphql)
+-   [theme.figma](https://github.com/ds-tools/theme.figma)
 
@@ -241,0 +295,0 @@ ---

No alert changes

Improved metrics

Total package byte prevSize

51954

increased by25.16%

Dev dependency count

5

decreased by-16.67%

Number of package files

13

increased by18.18%

Lines of code

351

increased by25.36%

Number of lines in readme file

322

increased by20.15%

No dependency changes