From 80ac20cd719e9cd78caf9d2ec505e50acfadce4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sion333@gmail.com>
Date: Mon, 8 Apr 2024 13:20:13 +0200
Subject: [PATCH 1/2] removed debug

---
 src/ui.tsx | 56 +-----------------------------------------------------
 1 file changed, 1 insertion(+), 55 deletions(-)

diff --git a/src/ui.tsx b/src/ui.tsx
index d6e93cc..735a35a 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -20,19 +20,13 @@ type FigmaImageData = {
 };
 
 type PenpotExporterState = {
-  isDebug: boolean;
-  penpotFileData: string;
   missingFonts: Set<string>;
-  figmaFileData: string;
   figmaRootNode: NodeData | null;
   images: { [id: string]: FigmaImageData };
 };
 
 export default class PenpotExporter extends React.Component<unknown, PenpotExporterState> {
   state: PenpotExporterState = {
-    isDebug: false,
-    penpotFileData: '',
-    figmaFileData: '',
     missingFonts: new Set(),
     figmaRootNode: null,
     images: {}
@@ -379,16 +373,7 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
   }
 
   onCreatePenpot = () => {
-    const file = this.createPenpotFile();
-    const penpotFileMap = file.asMap();
-    this.setState(() => ({
-      penpotFileData: JSON.stringify(
-        penpotFileMap,
-        (key, value) => (value instanceof Map ? [...value] : value),
-        4
-      )
-    }));
-    file.export();
+    this.createPenpotFile().export();
   };
 
   onCancel = () => {
@@ -399,11 +384,6 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
   onMessage = (event: any) => {
     if (event.data.pluginMessage.type == 'FIGMAFILE') {
       this.setState(() => ({
-        figmaFileData: JSON.stringify(
-          event.data.pluginMessage.data,
-          (key, value) => (value instanceof Map ? [...value] : value),
-          4
-        ),
         figmaRootNode: event.data.pluginMessage.data
       }));
     } else if (event.data.pluginMessage.type == 'IMAGE') {
@@ -436,19 +416,9 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
       width = 400;
     }
 
-    if (this.state.isDebug) {
-      height += 600;
-      width = 800;
-    }
-
     parent.postMessage({ pluginMessage: { type: 'resize', width: width, height: height } }, '*');
   };
 
-  toggleDebug = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const isDebug = event.currentTarget.checked;
-    this.setState(() => ({ isDebug: isDebug }));
-  };
-
   renderFontWarnings = () => {
     return (
       <ul>
@@ -476,31 +446,7 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
             <small>Ensure fonts are installed in Penpot before importing.</small>
             <div id="missing-fonts-list">{this.renderFontWarnings()}</div>
           </div>
-          <div>
-            <input type="checkbox" id="chkDebug" name="chkDebug" onChange={this.toggleDebug} />
-            <label htmlFor="chkDebug">Show debug data</label>
-          </div>
         </section>
-        <div style={{ display: this.state.isDebug ? '' : 'none' }}>
-          <section>
-            <textarea
-              style={{ width: '790px', height: '270px' }}
-              id="figma-file-data"
-              value={this.state.figmaFileData}
-              readOnly
-            />
-            <label htmlFor="figma-file-data">Figma file data</label>
-          </section>
-          <section>
-            <textarea
-              style={{ width: '790px', height: '270px' }}
-              id="penpot-file-data"
-              value={this.state.penpotFileData}
-              readOnly
-            />
-            <label htmlFor="penpot-file-data">Penpot file data</label>
-          </section>
-        </div>
         <footer>
           <button className="brand" onClick={this.onCreatePenpot}>
             Export

From 6067b0c2ca2dac607da7ac0baf1a896a6a645707 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sion333@gmail.com>
Date: Mon, 8 Apr 2024 17:03:34 +0200
Subject: [PATCH 2/2] update export logic

---
 src/code.ts       | 29 +++++++---------
 src/interfaces.ts |  1 +
 src/ui.css        |  6 ++++
 src/ui.tsx        | 86 +++++++++++------------------------------------
 tsconfig.json     |  3 +-
 5 files changed, 41 insertions(+), 84 deletions(-)

diff --git a/src/code.ts b/src/code.ts
index 4f1ebd8..6f1a915 100644
--- a/src/code.ts
+++ b/src/code.ts
@@ -43,27 +43,21 @@ async function traverse(node: BaseNode): Promise<NodeData | TextData> {
     y: 'y' in node ? node.y : 0,
     width: 'width' in node ? node.width : 0,
     height: 'height' in node ? node.height : 0,
-    fills: 'fills' in node ? (node.fills === figma.mixed ? [] : node.fills) : [] // TODO: Support mixed fills
+    fills: 'fills' in node ? (node.fills === figma.mixed ? [] : node.fills) : [], // TODO: Support mixed fills
+    imageFill: ''
   };
 
   if (result.fills) {
     // Find any fill of type image
     const imageFill = result.fills.find(fill => fill.type === 'IMAGE');
-    if (imageFill) {
+    if (imageFill && 'exportAsync' in node) {
       // An "image" in Figma is a shape with one or more image fills, potentially blended with other fill
       // types.  Given the complexity of mirroring this exactly in Penpot, which treats images as first-class
       // objects, we're going to simplify this by exporting this shape as a PNG image.
-      'exportAsync' in node &&
-        node.exportAsync({ format: 'PNG' }).then(value => {
-          const b64 = figma.base64Encode(value);
-          figma.ui.postMessage({
-            type: 'IMAGE',
-            data: {
-              id: node.id,
-              value: 'data:' + detectMimeType(b64) + ';base64,' + b64
-            }
-          });
-        });
+      const value = await node.exportAsync({ format: 'PNG' });
+      const b64 = figma.base64Encode(value);
+
+      result.imageFill = 'data:' + detectMimeType(b64) + ';base64,' + b64;
     }
   }
 
@@ -105,10 +99,11 @@ async function traverse(node: BaseNode): Promise<NodeData | TextData> {
 
 figma.showUI(__html__, { themeColors: true, height: 200, width: 300 });
 
-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 => {
+figma.ui.onmessage = async msg => {
+  if (msg.type === 'export') {
+    const root: NodeData | TextData = await traverse(figma.root); // start the traversal at the root
+    figma.ui.postMessage({ type: 'FIGMAFILE', data: root });
+  }
   if (msg.type === 'cancel') {
     figma.closePlugin();
   }
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 1d144ff..a872585 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -8,6 +8,7 @@ export type NodeData = {
   width: number;
   height: number;
   fills: readonly Paint[];
+  imageFill?: string;
 };
 
 export type TextDataChildren = Pick<
diff --git a/src/ui.css b/src/ui.css
index 3cce829..2e11866 100644
--- a/src/ui.css
+++ b/src/ui.css
@@ -57,6 +57,12 @@ button:focus-visible {
   outline-color: var(--color-border-focus);
 }
 
+button:disabled {
+  background-color: black;
+  color: var(--color-text);
+  cursor: not-allowed;
+}
+
 button.brand {
   --color-bg: var(--color-bg-brand);
   --color-text: var(--color-text-brand);
diff --git a/src/ui.tsx b/src/ui.tsx
index 735a35a..b615dc2 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -2,34 +2,22 @@ import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import slugify from 'slugify';
 
+import fonts from './gfonts.json';
 import { NodeData, TextData, TextDataChildren } from './interfaces';
 import { PenpotFile, createFile } from './penpot';
 import './ui.css';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare function require(path: string): any;
-
-// Open resources/gfonts.json and create a set of matched font names
-const gfonts = new Set();
-require('./gfonts.json').forEach((font: string) => gfonts.add(font));
-
-type FigmaImageData = {
-  value: string;
-  width: number;
-  height: number;
-};
+const gfonts = new Set(fonts);
 
 type PenpotExporterState = {
   missingFonts: Set<string>;
-  figmaRootNode: NodeData | null;
-  images: { [id: string]: FigmaImageData };
+  exporting: boolean;
 };
 
 export default class PenpotExporter extends React.Component<unknown, PenpotExporterState> {
   state: PenpotExporterState = {
     missingFonts: new Set(),
-    figmaRootNode: null,
-    images: {}
+    exporting: false
   };
 
   componentDidMount = () => {
@@ -286,24 +274,18 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
     });
   }
 
-  createPenpotImage(
-    file: PenpotFile,
-    node: NodeData,
-    baseX: number,
-    baseY: number,
-    image: FigmaImageData
-  ) {
+  createPenpotImage(file: PenpotFile, node: NodeData, baseX: number, baseY: number) {
     file.createImage({
       name: node.name,
       x: node.x + baseX,
       y: node.y + baseY,
-      width: image.width,
-      height: image.height,
+      width: node.width,
+      height: node.height,
       metadata: {
-        width: image.width,
-        height: image.height
+        width: node.width,
+        height: node.height
       },
-      dataUri: image.value
+      dataUri: node.imageFill
     });
   }
 
@@ -336,13 +318,7 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
       // height of the image.
       const [adjustedX, adjustedY] = this.calculateAdjustment(node);
 
-      this.createPenpotImage(
-        file,
-        node,
-        baseX + adjustedX,
-        baseY + adjustedY,
-        this.state.images[node.id]
-      );
+      this.createPenpotImage(file, node, baseX + adjustedX, baseY + adjustedY);
     } else if (node.type == 'PAGE') {
       this.createPenpotPage(file, node);
     } else if (node.type == 'FRAME') {
@@ -358,13 +334,7 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
     }
   }
 
-  createPenpotFile() {
-    const node = this.state.figmaRootNode;
-
-    if (node === null) {
-      throw new Error('No Figma file data found');
-    }
-
+  createPenpotFile(node: NodeData) {
     const file = createFile(node.name);
     for (const page of node.children) {
       this.createPenpotItem(file, page, 0, 0);
@@ -373,7 +343,8 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
   }
 
   onCreatePenpot = () => {
-    this.createPenpotFile().export();
+    this.setState(() => ({ exporting: true }));
+    parent.postMessage({ pluginMessage: { type: 'export' } }, '*');
   };
 
   onCancel = () => {
@@ -383,25 +354,9 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onMessage = (event: any) => {
     if (event.data.pluginMessage.type == 'FIGMAFILE') {
-      this.setState(() => ({
-        figmaRootNode: event.data.pluginMessage.data
-      }));
-    } else if (event.data.pluginMessage.type == 'IMAGE') {
-      const data = event.data.pluginMessage.data;
-      const image = document.createElement('img');
-
-      image.addEventListener('load', () => {
-        // Get byte array from response
-        this.setState(state => {
-          state.images[data.id] = {
-            value: data.value,
-            width: image.naturalWidth,
-            height: image.naturalHeight
-          };
-          return state;
-        });
-      });
-      image.src = data.value;
+      const file = this.createPenpotFile(event.data.pluginMessage.data);
+      file.export();
+      this.setState(() => ({ exporting: false }));
     }
   };
 
@@ -414,9 +369,8 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
     if (isMissingFonts) {
       height += this.state.missingFonts.size * 20;
       width = 400;
+      parent.postMessage({ pluginMessage: { type: 'resize', width: width, height: height } }, '*');
     }
-
-    parent.postMessage({ pluginMessage: { type: 'resize', width: width, height: height } }, '*');
   };
 
   renderFontWarnings = () => {
@@ -448,8 +402,8 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
           </div>
         </section>
         <footer>
-          <button className="brand" onClick={this.onCreatePenpot}>
-            Export
+          <button className="brand" disabled={this.state.exporting} onClick={this.onCreatePenpot}>
+            {this.state.exporting ? 'Exporting...' : 'Export to Penpot'}
           </button>
           <button onClick={this.onCancel}>Cancel</button>
         </footer>
diff --git a/tsconfig.json b/tsconfig.json
index 6d4426d..4e0be55 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
     "module": "ESNext",
     "moduleResolution": "Node10",
     "strict": true,
-    "typeRoots": ["src/penpot.d.ts", "node_modules/@figma", "node_modules/@types"]
+    "typeRoots": ["src/penpot.d.ts", "node_modules/@figma", "node_modules/@types"],
+    "resolveJsonModule": true
   }
 }