Merge pull request #3 from Runroom/feature/figma-dynamica-load

Figma Dynamic Load

manifest.json

@@ -4,5 +4,6 @@
   "api": "1.0.0",
   "main": "dist/code.js",
   "ui": "dist/ui.html",
-  "editorType": ["figma", "figjam"]
+  "editorType": ["figma", "figjam"],
+  "documentAccess": "dynamic-page"
 }

package-lock.json

@@ -14,11 +14,13 @@
         "slugify": "^1.6"
       },
       "devDependencies": {
-        "@figma/eslint-plugin-figma-plugins": "^0.15",
+        "@figma/eslint-plugin-figma-plugins": "^0.15.0",
-        "@figma/plugin-typings": "^1.88",
+        "@figma/plugin-typings": "^1.90.0",
         "@trivago/prettier-plugin-sort-imports": "^4.3",
         "@types/react": "^18.2",
         "@types/react-dom": "^18.2",
+        "@typescript-eslint/eslint-plugin": "^7.5.0",
+        "@typescript-eslint/parser": "^7.5.0",
         "css-loader": "^6.10",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1",
@@ -33,8 +35,7 @@
         "stylelint": "^16.3",
         "stylelint-config-standard": "^36.0",
         "ts-loader": "^9.5",
-        "typescript": "^5.4",
+        "typescript": "^5.4.4",
-        "typescript-eslint": "^7.4",
         "webpack": "^5.91",
         "webpack-cli": "^5.1"
       }
@@ -7120,132 +7121,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/typescript-eslint": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-7.5.0.tgz",
-      "integrity": "sha512-eKhF39LRi2xYvvXh3h3S+mCxC01dZTIZBlka25o39i81VeQG+OZyfC4i2GEDspNclMRdXkg9uGhmvWMhjph2XQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/eslint-plugin": "7.5.0",
-        "@typescript-eslint/parser": "7.5.0",
-        "@typescript-eslint/utils": "7.5.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/typescript-eslint/node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.5.0.tgz",
-      "integrity": "sha512-Z1r7uJY0MDeUlql9XJ6kRVgk/sP11sr3HKXn268HZyqL7i4cEfrdFuSSY/0tUqT37l5zT0tJOsuDP16kio85iA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.5.0",
-        "@typescript-eslint/visitor-keys": "7.5.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/typescript-eslint/node_modules/@typescript-eslint/types": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.5.0.tgz",
-      "integrity": "sha512-tv5B4IHeAdhR7uS4+bf8Ov3k793VEVHd45viRRkehIUZxm0WF82VPiLgHzA/Xl4TGPg1ZD49vfxBKFPecD5/mg==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/typescript-eslint/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.5.0.tgz",
-      "integrity": "sha512-YklQQfe0Rv2PZEueLTUffiQGKQneiIEKKnfIqPIOxgM9lKSZFCjT5Ad4VqRKj/U4+kQE3fa8YQpskViL7WjdPQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.5.0",
-        "@typescript-eslint/visitor-keys": "7.5.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "minimatch": "9.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/typescript-eslint/node_modules/@typescript-eslint/utils": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.5.0.tgz",
-      "integrity": "sha512-3vZl9u0R+/FLQcpy2EHyRGNqAS/ofJ3Ji8aebilfJe+fobK8+LbIFmrHciLVDxjDoONmufDcnVSF38KwMEOjzw==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.12",
-        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "7.5.0",
-        "@typescript-eslint/types": "7.5.0",
-        "@typescript-eslint/typescript-estree": "7.5.0",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      }
-    },
-    "node_modules/typescript-eslint/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.5.0.tgz",
-      "integrity": "sha512-mcuHM/QircmA6O7fy6nn2w/3ditQkj+SgtOc8DW3uQ10Yfj42amm2i+6F2K4YAOPNNTmE6iM1ynM6lrSwdendA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.5.0",
-        "eslint-visitor-keys": "^3.4.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

package.json

@@ -25,11 +25,13 @@
     "slugify": "^1.6"
   },
   "devDependencies": {
-    "@figma/eslint-plugin-figma-plugins": "^0.15",
+    "@figma/eslint-plugin-figma-plugins": "^0.15.0",
-    "@figma/plugin-typings": "^1.88",
+    "@figma/plugin-typings": "^1.90.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3",
     "@types/react": "^18.2",
     "@types/react-dom": "^18.2",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "css-loader": "^6.10",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1",
@@ -44,8 +46,7 @@
     "stylelint": "^16.3",
     "stylelint-config-standard": "^36.0",
     "ts-loader": "^9.5",
-    "typescript": "^5.4",
+    "typescript": "^5.4.4",
-    "typescript-eslint": "^7.4",
     "webpack": "^5.91",
     "webpack-cli": "^5.1"
   }

src/code.ts

@@ -19,13 +19,17 @@ function detectMimeType(b64: string) {
   }
 }
 
-function traverse(node: BaseNode): NodeData | TextData {
+async function traverse(node: BaseNode): Promise<NodeData | TextData> {
   const children: (NodeData | TextData)[] = [];
 
+  if (node.type === 'PAGE') {
+    await node.loadAsync();
+  }
+
   if ('children' in node) {
     if (node.type !== 'INSTANCE') {
       for (const child of node.children) {
-        children.push(traverse(child));
+        children.push(await traverse(child));
       }
     }
   }
@@ -101,7 +105,7 @@ function traverse(node: BaseNode): NodeData | TextData {
 
 figma.showUI(__html__, { themeColors: true, height: 200, width: 300 });
 
-const root: NodeData | TextData = traverse(figma.root); // start the traversal at the root
+const root: NodeData | TextData = await traverse(figma.root); // start the traversal at the root
 figma.ui.postMessage({ type: 'FIGMAFILE', data: root });
 
 figma.ui.onmessage = msg => {

tsconfig.json

@@ -5,7 +5,7 @@
     "skipLibCheck": true,
     "jsx": "react",
     "lib": ["DOM", "ES6"],
-    "target": "ES6",
+    "target": "es2017",
     "module": "ESNext",
     "moduleResolution": "Node10",
     "strict": true,