feat: preview 아이콘을 통해서 deploy & icons.json 파일 prettier해서 보내기

figma-plugin/common/fromUi.ts

@@ -1,4 +1,5 @@
 import { emit as e, on as o } from "@create-figma-plugin/utilities";
+import type { IconaIconData } from "@icona/types";
 
 interface GithubData {
   owner: string;
@@ -8,6 +9,7 @@ interface GithubData {
 
 interface IconaMetaData {
   githubData: GithubData;
+  icons: Record<string, IconaIconData>;
   options?: {
     withPng?: boolean;
   };

figma-plugin/plugin-src/code.ts

@@ -38,7 +38,7 @@ async function setPreviewIcons() {
     return;
   } else {
     const svgDatas = await getAssetInIconFrame(iconaFrame.id, {
-      withPng: false,
+      withPng: await getLocalData(KEY.DEPLOY_WITH_PNG),
     });
 
     emit("GET_ICON_PREVIEW", {

figma-plugin/plugin-src/github.ts

@@ -217,12 +217,14 @@ export function createGithubClient(
 
     const head = await getHead(baseBranch);
 
-    const treeBody = await uploadBlob(JSON.stringify(svgs)).then((blob) => ({
-      path: `.icona/icons.json`,
-      mode: "100644",
-      type: "blob",
-      sha: blob.sha,
-    }));
+    const treeBody = await uploadBlob(JSON.stringify(svgs, null, 2)).then(
+      (blob) => ({
+        path: `.icona/icons.json`,
+        mode: "100644",
+        type: "blob",
+        sha: blob.sha,
+      }),
+    );
 
     const tree = await createTree([treeBody], head.object.sha);
     const commit = await createCommit(tree.sha, commitTitle, [head.object.sha]);

figma-plugin/plugin-src/listeners.ts

@@ -1,28 +1,17 @@
-import { FRAME_NAME, KEY } from "../common/constants.js";
+import { KEY } from "../common/constants.js";
 import { emit } from "../common/fromPlugin.js";
 import { on } from "../common/fromUi.js";
 import { createGithubClient } from "./github.js";
-import { getAssetInIconFrame } from "./service.js";
 import { setLocalData } from "./utils.js";
 
 export function listenDeployIcon() {
-  on("DEPLOY_ICON", async ({ githubData, options }) => {
-    const { withPng } = options ?? { withPng: true };
-
+  on("DEPLOY_ICON", async ({ githubData, icons }) => {
     try {
       const { owner, name, apiKey } = githubData;
 
       const { createDeployPR } = createGithubClient(owner, name, apiKey);
-      const iconaFrame = figma.currentPage.findOne((node) => {
-        return node.name === FRAME_NAME;
-      });
-
-      if (!iconaFrame) throw new Error("Icona frame not found");
-      const svgs = await getAssetInIconFrame(iconaFrame.id, {
-        withPng,
-      });
 
-      await createDeployPR(svgs);
+      await createDeployPR(icons);
       emit("DEPLOY_DONE", null);
       figma.notify("Icons deployed", { timeout: 5000 });
     } catch (error) {

figma-plugin/plugin-src/service.ts

@@ -96,7 +96,7 @@ export async function getAssetInIconFrame(
 
   const targetComponents = targetNodes.filter((component) => component);
 
-  const datas = await Promise.all(
+  const datas = await Promise.allSettled(
     targetComponents.map(async (component) => {
       const data = {} as IconaIconData;
       const node = figma.getNodeById(component.id) as ComponentNode;
@@ -127,7 +127,17 @@ export async function getAssetInIconFrame(
   );
 
   const dataMap = datas.reduce((acc, cur) => {
-    acc[cur.name] = cur;
+    if (cur.status === "rejected") {
+      console.error(cur.reason);
+    }
+
+    if (cur.status === "fulfilled") {
+      const { name, ...rest } = cur.value as IconaIconData;
+      acc[name] = {
+        ...rest,
+        name,
+      };
+    }
 
     return acc;
   }, {} as Record<string, IconaIconData>);

figma-plugin/ui-src/pages/Deploy.tsx

@@ -30,6 +30,7 @@ const Deploy = () => {
     dispatch({
       name: "DEPLOY_ICON",
       payload: {
+        icons: iconPreview,
         githubData,
       },
     });