make children return an array of promises

plugin-src/transformers/partials/transformChildren.ts

@@ -6,13 +6,13 @@ const nodeActsAsMask = (node: SceneNode): boolean => {
   return 'isMask' in node && node.isMask;
 };
 
-export const transformChildren = async (node: ChildrenMixin): Promise<Children> => {
+export const transformChildren = (node: ChildrenMixin): Children => {
   const maskIndex = node.children.findIndex(nodeActsAsMask);
   const containsMask = maskIndex !== -1;
 
   return {
     children: containsMask
-      ? await translateMaskChildren(node.children, maskIndex)
+      ? translateMaskChildren(node.children, maskIndex)
-      : await translateChildren(node.children)
+      : translateChildren(node.children)
   };
 };

plugin-src/transformers/transformBooleanNode.ts

@@ -22,7 +22,7 @@ export const transformBooleanNode = async (node: BooleanOperationNode): Promise<
     name: node.name,
     boolType: translateBoolType(node.booleanOperation),
     ...transformFigmaIds(node),
-    ...(await transformChildren(node)),
+    ...transformChildren(node),
     ...transformFills(node),
     ...transformEffects(node),
     ...transformStrokes(node),

plugin-src/transformers/transformComponentNode.ts

@@ -18,7 +18,7 @@ import {
 
 import { ComponentRoot } from '@ui/types';
 
-export const transformComponentNode = async (node: ComponentNode): Promise<ComponentRoot> => {
+export const transformComponentNode = (node: ComponentNode): ComponentRoot => {
   componentsLibrary.register(node.id, {
     type: 'component',
     name: node.name,
@@ -33,7 +33,7 @@ export const transformComponentNode = async (node: ComponentNode): Promise<Compo
     ...transformProportion(node),
     ...transformLayoutAttributes(node, true),
     ...transformCornerRadius(node),
-    ...(await transformChildren(node)),
+    ...transformChildren(node),
     ...transformDimension(node),
     ...transformRotationAndPosition(node),
     ...transformConstraints(node),

plugin-src/transformers/transformDocumentNode.ts

@@ -78,7 +78,7 @@ export const transformDocumentNode = async (node: DocumentNode): Promise<PenpotD
   if (remoteComponentLibrary.remaining() > 0) {
     children.push({
       name: 'External Components',
-      children: await translateRemoteChildren()
+      children: translateRemoteChildren()
     });
   }
 

plugin-src/transformers/transformFrameNode.ts

@@ -23,9 +23,9 @@ const isSectionNode = (node: FrameNode | SectionNode | ComponentSetNode): node i
   return node.type === 'SECTION';
 };
 
-export const transformFrameNode = async (
+export const transformFrameNode = (
   node: FrameNode | SectionNode | ComponentSetNode
-): Promise<FrameShape> => {
+): FrameShape => {
   let frameSpecificAttributes: Partial<FrameShape> = {};
   let referencePoint: Point = { x: node.absoluteTransform[0][2], y: node.absoluteTransform[1][2] };
 
@@ -60,7 +60,7 @@ export const transformFrameNode = async (
     ...referencePoint,
     ...frameSpecificAttributes,
     ...transformDimension(node),
-    ...(await transformChildren(node)),
+    ...transformChildren(node),
     ...transformSceneNode(node),
     ...transformOverrides(node)
   };

plugin-src/transformers/transformGroupNode.ts

@@ -11,20 +11,20 @@ import { transformChildren } from '@plugin/transformers/partials';
 
 import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 
-export const transformGroupNode = async (node: GroupNode): Promise<GroupShape> => {
+export const transformGroupNode = (node: GroupNode): GroupShape => {
   return {
     ...transformFigmaIds(node),
     ...transformGroupNodeLike(node),
     ...transformEffects(node),
     ...transformBlend(node),
-    ...(await transformChildren(node)),
+    ...transformChildren(node),
     ...transformOverrides(node)
   };
 };
 
 export const transformGroupNodeLike = (
   node: BaseNodeMixin & LayoutMixin & SceneNodeMixin
-): GroupShape => {
+): Omit<GroupShape, 'children'> => {
   return {
     type: 'group',
     name: node.name,

plugin-src/transformers/transformInstanceNode.ts

@@ -64,7 +64,7 @@ export const transformInstanceNode = async (
     ...transformRotationAndPosition(node),
     ...transformConstraints(node),
     ...transformAutoLayout(node),
-    ...(await transformChildren(node)),
+    ...transformChildren(node),
     ...transformOverrides(node)
   };
 };

plugin-src/transformers/transformPageNode.ts

@@ -9,6 +9,6 @@ export const transformPageNode = async (node: PageNode): Promise<PenpotPage> =>
     options: {
       background: node.backgrounds.length ? translatePageFill(node.backgrounds[0]) : undefined
     },
-    children: await translateChildren(node.children)
+    children: translateChildren(node.children)
   };
 };

plugin-src/transformers/transformSceneNode.ts

@@ -54,7 +54,7 @@ export const transformSceneNode = async (node: SceneNode): Promise<PenpotNode |
       penpotNode = await transformBooleanNode(node);
       break;
     case 'COMPONENT':
-      penpotNode = await transformComponentNode(node);
+      penpotNode = transformComponentNode(node);
       break;
     case 'INSTANCE':
       penpotNode = await transformInstanceNode(node);

plugin-src/translators/translateChildren.ts

@@ -1,8 +1,8 @@
 import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary';
 import { transformGroupNodeLike, transformSceneNode } from '@plugin/transformers';
 import { transformMaskFigmaIds } from '@plugin/transformers/partials';
-import { sleep } from '@plugin/utils';
 
+import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 import { PenpotNode } from '@ui/types';
 
 /**
@@ -14,14 +14,14 @@ import { PenpotNode } from '@ui/types';
  *
  * @maskIndex The index of the mask node in the children array
  */
-export const translateMaskChildren = async (
+export const translateMaskChildren = (
   children: readonly SceneNode[],
   maskIndex: number
-): Promise<PenpotNode[]> => {
+): Promise<PenpotNode | undefined>[] => {
   const maskChild = children[maskIndex];
 
-  const unmaskedChildren = await translateChildren(children.slice(0, maskIndex));
+  const unmaskedChildren = translateChildren(children.slice(0, maskIndex));
-  const maskedChildren = await translateChildren(children.slice(maskIndex));
+  const maskedChildren = translateChildren(children.slice(maskIndex));
 
   if (
     maskChild.type === 'STICKY' ||
@@ -38,32 +38,30 @@ export const translateMaskChildren = async (
     return [...unmaskedChildren, ...maskedChildren];
   }
 
-  const maskGroup = {
+  const maskGroup = Promise.resolve<GroupShape>({
     ...transformMaskFigmaIds(maskChild),
     ...transformGroupNodeLike(maskChild),
     children: maskedChildren,
     maskedGroup: true
-  };
+  });
 
   return [...unmaskedChildren, maskGroup];
 };
 
-export const translateChildren = async (children: readonly SceneNode[]): Promise<PenpotNode[]> => {
+export const translateChildren = (
-  const transformedChildren: PenpotNode[] = [];
+  children: readonly SceneNode[]
+): Promise<PenpotNode | undefined>[] => {
+  const transformedChildren: Promise<PenpotNode | undefined>[] = [];
 
   for (const child of children) {
-    const penpotNode = await transformSceneNode(child);
+    transformedChildren.push(transformSceneNode(child));
-
-    if (penpotNode) transformedChildren.push(penpotNode);
-
-    await sleep(0);
   }
 
   return transformedChildren;
 };
 
-export const translateRemoteChildren = async (): Promise<PenpotNode[]> => {
+export const translateRemoteChildren = (): Promise<PenpotNode | undefined>[] => {
-  const transformedChildren: PenpotNode[] = [];
+  const transformedChildren: Promise<PenpotNode | undefined>[] = [];
   let currentRemote = 1;
 
   figma.ui.postMessage({
@@ -79,16 +77,12 @@ export const translateRemoteChildren = async (): Promise<PenpotNode[]> => {
 
     const child = remoteComponentLibrary.next();
 
-    const penpotNode = await transformSceneNode(child);
+    transformedChildren.push(transformSceneNode(child));
-
-    if (penpotNode) transformedChildren.push(penpotNode);
 
     figma.ui.postMessage({
       type: 'PROGRESS_PROCESSED_ITEMS',
       data: currentRemote++
     });
-
-    await sleep(0);
   }
 
   return transformedChildren;

ui-src/lib/types/utils/children.ts

@@ -1,3 +1,3 @@
 import { PenpotNode } from '@ui/types';
 
-export type Children = { children?: PenpotNode[] };
+export type Children = { children: Promise<PenpotNode | undefined>[] | (PenpotNode | undefined)[] };