From f469fc1f3743950280c9bd7c99c6ff8462200244 Mon Sep 17 00:00:00 2001
From: Jordi Sala Morales <jordism91@gmail.com>
Date: Fri, 19 Apr 2024 09:48:19 +0200
Subject: [PATCH] avoid error when unsupported nodes, fills or other kind of
 elements. Improve error messages (#49)

---
 .../partials/transformChildren.ts             |  5 ++++-
 plugin-src/transformers/transformSceneNode.ts |  4 ++--
 plugin-src/translators/translateFills.ts      |  2 +-
 ui-src/converters/createGradientFill.ts       |  4 ++--
 ui-src/translators/translatePathContent.ts    | 22 ++++++++++++-------
 5 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/plugin-src/transformers/partials/transformChildren.ts b/plugin-src/transformers/partials/transformChildren.ts
index a3c2538c..579fb3c7 100644
--- a/plugin-src/transformers/partials/transformChildren.ts
+++ b/plugin-src/transformers/partials/transformChildren.ts
@@ -1,5 +1,6 @@
 import { transformSceneNode } from '@plugin/transformers';
 
+import { PenpotNode } from '@ui/lib/types/penpotNode';
 import { Children } from '@ui/lib/types/utils/children';
 
 export const transformChildren = async (
@@ -8,6 +9,8 @@ export const transformChildren = async (
   baseY: number = 0
 ): Promise<Children> => {
   return {
-    children: await Promise.all(node.children.map(child => transformSceneNode(child, baseX, baseY)))
+    children: (
+      await Promise.all(node.children.map(child => transformSceneNode(child, baseX, baseY)))
+    ).filter((child): child is PenpotNode => !!child)
   };
 };
diff --git a/plugin-src/transformers/transformSceneNode.ts b/plugin-src/transformers/transformSceneNode.ts
index 29000352..8d933992 100644
--- a/plugin-src/transformers/transformSceneNode.ts
+++ b/plugin-src/transformers/transformSceneNode.ts
@@ -16,7 +16,7 @@ export const transformSceneNode = async (
   node: SceneNode,
   baseX: number = 0,
   baseY: number = 0
-): Promise<PenpotNode> => {
+): Promise<PenpotNode | undefined> => {
   // @TODO: when penpot 2.0, manage image as fills for the basic types
   if (
     'fills' in node &&
@@ -49,5 +49,5 @@ export const transformSceneNode = async (
       return transformPathNode(node, baseX, baseY);
   }
 
-  throw new Error(`Unsupported node type: ${node.type}`);
+  console.error(`Unsupported node type: ${node.type}`);
 };
diff --git a/plugin-src/translators/translateFills.ts b/plugin-src/translators/translateFills.ts
index e582ef96..5e3a9446 100644
--- a/plugin-src/translators/translateFills.ts
+++ b/plugin-src/translators/translateFills.ts
@@ -11,7 +11,7 @@ export const translateFill = (fill: Paint, width: number, height: number): Fill
       return translateGradientLinearFill(fill, width, height);
   }
 
-  console.error('Color type ' + fill.type + ' not supported yet');
+  console.error(`Unsupported fill type: ${fill.type}`);
 };
 
 export const translateFills = (
diff --git a/ui-src/converters/createGradientFill.ts b/ui-src/converters/createGradientFill.ts
index fe2023aa..cf0e90cd 100644
--- a/ui-src/converters/createGradientFill.ts
+++ b/ui-src/converters/createGradientFill.ts
@@ -1,6 +1,6 @@
 import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '@ui/lib/types/utils/gradient';
 
-export const createGradientFill = ({ type, ...rest }: Gradient): Gradient => {
+export const createGradientFill = ({ type, ...rest }: Gradient): Gradient | undefined => {
   switch (type) {
     case 'linear':
       return {
@@ -14,5 +14,5 @@ export const createGradientFill = ({ type, ...rest }: Gradient): Gradient => {
       };
   }
 
-  throw new Error(`Unsupported gradient type: ${String(type)}`);
+  console.error(`Unsupported gradient type: ${String(type)}`);
 };
diff --git a/ui-src/translators/translatePathContent.ts b/ui-src/translators/translatePathContent.ts
index 70a417b7..0d0142d7 100644
--- a/ui-src/translators/translatePathContent.ts
+++ b/ui-src/translators/translatePathContent.ts
@@ -9,14 +9,20 @@ import {
 } from '@ui/lib/types/path/PathContent';
 
 export const translatePathContent = (content: PathContent): PathContent =>
-  content.map(({ command, ...rest }) => {
-    return {
-      command: translatePathCommand(command),
-      ...rest
-    } as Segment;
-  });
+  content
+    .map(({ command: stringCommand, ...rest }) => {
+      const command = translatePathCommand(stringCommand);
 
-const translatePathCommand = (command: Command): Command => {
+      if (!command) return null;
+
+      return {
+        command,
+        ...rest
+      } as Segment;
+    })
+    .filter((command): command is Segment => !!command);
+
+const translatePathCommand = (command: Command): Command | undefined => {
   switch (command) {
     case 'line-to':
       return VECTOR_LINE_TO;
@@ -28,5 +34,5 @@ const translatePathCommand = (command: Command): Command => {
       return VECTOR_CURVE_TO;
   }
 
-  throw new Error('Unknown path command');
+  console.error(`Unsupported svg command type: ${String(command)}`);
 };