Remove symbols when possible (#173)

* remove symbols for blend mode * remove symbol for gradients * optimize symbols for path contents * optimize code * remove symbols
penpot · Jun 18, 2024 · 738ebfe · 738ebfe
1 parent 8697902
commit 738ebfe
Show file tree

Hide file tree

Showing 21 changed files with 123 additions and 314 deletions.
diff --git a/ui-src/lib/types/penpotPage.ts b/ui-src/lib/types/penpotPage.ts
@@ -8,7 +8,7 @@ export type PenpotPage = {
 } & Children;
 
 export type PenpotPageOptions = {
-  background?: string; // hex color
+  background?: string;
   savedGrids?: SavedGrids;
   flows?: Flow[];
   guides?: { [uuid: Uuid]: Guide };

diff --git a/ui-src/lib/types/shapes/layout.ts b/ui-src/lib/types/shapes/layout.ts
@@ -1,29 +1,9 @@
 import { Uuid } from '@ui/lib/types/utils/uuid';
 
-export const ITEM_MARGIN_SIMPLE_TYPE: unique symbol = Symbol.for('simple');
-export const ITEM_MARGIN_MULTIPLE_TYPE: unique symbol = Symbol.for('multiple');
-export const ITEM_SIZING_FILL: unique symbol = Symbol.for('fill');
-export const ITEM_SIZING_FIX: unique symbol = Symbol.for('fix');
-export const ITEM_SIZING_AUTO: unique symbol = Symbol.for('auto');
-export const ITEM_ALIGN_SELF_START: unique symbol = Symbol.for('start');
-export const ITEM_ALIGN_SELF_END: unique symbol = Symbol.for('end');
-export const ITEM_ALIGN_SELF_CENTER: unique symbol = Symbol.for('center');
-export const ITEM_ALIGN_SELF_STRETCH: unique symbol = Symbol.for('stretch');
-
-export type LayoutSizing =
-  | 'fill'
-  | 'fix'
-  | 'auto'
-  | typeof ITEM_SIZING_FILL
-  | typeof ITEM_SIZING_FIX
-  | typeof ITEM_SIZING_AUTO;
+export type LayoutSizing = 'fill' | 'fix' | 'auto';
 
 export type LayoutChildAttributes = {
-  'layoutItemMarginType'?:
-    | 'simple'
-    | 'multiple'
-    | typeof ITEM_MARGIN_SIMPLE_TYPE
-    | typeof ITEM_MARGIN_MULTIPLE_TYPE;
+  'layoutItemMarginType'?: 'simple' | 'multiple';
   'layoutItemMargin'?: {
     m1?: number;
     m2?: number;
@@ -36,15 +16,7 @@ export type LayoutChildAttributes = {
   'layoutItemMinW'?: number;
   'layoutItemH-Sizing'?: LayoutSizing;
   'layoutItemV-Sizing'?: LayoutSizing;
-  'layoutItemAlignSelf'?:
-    | 'start'
-    | 'end'
-    | 'center'
-    | 'stretch'
-    | typeof ITEM_ALIGN_SELF_START
-    | typeof ITEM_ALIGN_SELF_END
-    | typeof ITEM_ALIGN_SELF_CENTER
-    | typeof ITEM_ALIGN_SELF_STRETCH;
+  'layoutItemAlignSelf'?: 'start' | 'end' | 'center' | 'stretch';
   'layoutItemAbsolute'?: boolean;
   'layoutItemZIndex'?: number;
 };

diff --git a/ui-src/lib/types/utils/blendModes.ts b/ui-src/lib/types/utils/blendModes.ts
@@ -1,20 +1,3 @@
-export const BLEND_MODE_NORMAL: unique symbol = Symbol.for('normal');
-export const BLEND_MODE_DARKEN: unique symbol = Symbol.for('darken');
-export const BLEND_MODE_MULTIPLY: unique symbol = Symbol.for('multiply');
-export const BLEND_MODE_COLOR_BURN: unique symbol = Symbol.for('color-burn');
-export const BLEND_MODE_LIGHTEN: unique symbol = Symbol.for('lighten');
-export const BLEND_MODE_SCREEN: unique symbol = Symbol.for('screen');
-export const BLEND_MODE_COLOR_DODGE: unique symbol = Symbol.for('color-dodge');
-export const BLEND_MODE_OVERLAY: unique symbol = Symbol.for('overlay');
-export const BLEND_MODE_SOFT_LIGHT: unique symbol = Symbol.for('soft-light');
-export const BLEND_MODE_HARD_LIGHT: unique symbol = Symbol.for('hard-light');
-export const BLEND_MODE_DIFFERENCE: unique symbol = Symbol.for('difference');
-export const BLEND_MODE_EXCLUSION: unique symbol = Symbol.for('exclusion');
-export const BLEND_MODE_HUE: unique symbol = Symbol.for('hue');
-export const BLEND_MODE_SATURATION: unique symbol = Symbol.for('saturation');
-export const BLEND_MODE_COLOR: unique symbol = Symbol.for('color');
-export const BLEND_MODE_LUMINOSITY: unique symbol = Symbol.for('luminosity');
-
 export type BlendMode =
   | 'normal'
   | 'darken'
@@ -31,20 +14,4 @@ export type BlendMode =
   | 'hue'
   | 'saturation'
   | 'color'
-  | 'luminosity'
-  | typeof BLEND_MODE_NORMAL
-  | typeof BLEND_MODE_DARKEN
-  | typeof BLEND_MODE_MULTIPLY
-  | typeof BLEND_MODE_COLOR_BURN
-  | typeof BLEND_MODE_LIGHTEN
-  | typeof BLEND_MODE_SCREEN
-  | typeof BLEND_MODE_COLOR_DODGE
-  | typeof BLEND_MODE_OVERLAY
-  | typeof BLEND_MODE_SOFT_LIGHT
-  | typeof BLEND_MODE_HARD_LIGHT
-  | typeof BLEND_MODE_DIFFERENCE
-  | typeof BLEND_MODE_EXCLUSION
-  | typeof BLEND_MODE_HUE
-  | typeof BLEND_MODE_SATURATION
-  | typeof BLEND_MODE_COLOR
-  | typeof BLEND_MODE_LUMINOSITY;
+  | 'luminosity';
diff --git a/ui-src/lib/types/utils/color.ts b/ui-src/lib/types/utils/color.ts
@@ -7,9 +7,9 @@ export type Color = {
   name?: string;
   path?: string;
   value?: string;
-  color?: string; // hex color
+  color?: string;
   opacity?: number;
-  modifiedAt?: string; //@TODO: check this attribute in penpot
+  modifiedAt?: string;
   refId?: Uuid;
   refFile?: Uuid;
   gradient?: Gradient;

diff --git a/ui-src/lib/types/utils/export.ts b/ui-src/lib/types/utils/export.ts
@@ -1,6 +1,4 @@
 export type Export = {
-  // @TODO: in Penpot this is of type :keyword
-  //        check if it makes sense
   type: string;
   scale: number;
   suffix: string;

diff --git a/ui-src/lib/types/utils/gradient.ts b/ui-src/lib/types/utils/gradient.ts
@@ -1,8 +1,5 @@
-export const LINEAR_TYPE: unique symbol = Symbol.for('linear');
-export const RADIAL_TYPE: unique symbol = Symbol.for('radial');
-
 export type Gradient = {
-  type: 'linear' | 'radial' | typeof LINEAR_TYPE | typeof RADIAL_TYPE; // symbol
+  type: 'linear' | 'radial';
   startX: number;
   startY: number;
   endX: number;

diff --git a/ui-src/lib/types/utils/grid.ts b/ui-src/lib/types/utils/grid.ts
@@ -39,6 +39,6 @@ type SquareParams = {
 };
 
 type GridColor = {
-  color: string; // hex color
+  color: string;
   opacity: number;
 };
diff --git a/ui-src/parser/creators/createArtboard.ts b/ui-src/parser/creators/createArtboard.ts
@@ -2,34 +2,22 @@ import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { FrameShape } from '@ui/lib/types/shapes/frameShape';
 import { Uuid } from '@ui/lib/types/utils/uuid';
 import { parseFigmaId } from '@ui/parser';
-import { symbolBlendMode, symbolFills, symbolStrokes } from '@ui/parser/creators/symbols';
+import { symbolFills, symbolStrokes } from '@ui/parser/creators/symbols';
 
 import { createItems } from '.';
 
 export const createArtboard = (
   file: PenpotFile,
-  {
-    type,
-    fills,
-    strokes,
-    blendMode,
-    children = [],
-    figmaId,
-    figmaRelatedId,
-    shapeRef,
-    ...rest
-  }: FrameShape
+  { type, children = [], figmaId, figmaRelatedId, ...shape }: FrameShape
 ): Uuid | undefined => {
   const id = parseFigmaId(file, figmaId);
 
-  file.addArtboard({
-    id,
-    shapeRef: shapeRef ?? parseFigmaId(file, figmaRelatedId, true),
-    fills: symbolFills(fills),
-    strokes: symbolStrokes(strokes),
-    blendMode: symbolBlendMode(blendMode),
-    ...rest
-  });
+  shape.id = id;
+  shape.shapeRef ??= parseFigmaId(file, figmaRelatedId, true);
+  shape.fills = symbolFills(shape.fills);
+  shape.strokes = symbolStrokes(shape.strokes);
+
+  file.addArtboard(shape);
 
   createItems(file, children);
 

diff --git a/ui-src/parser/creators/createBool.ts b/ui-src/parser/creators/createBool.ts
@@ -1,38 +1,21 @@
 import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { BoolShape } from '@ui/lib/types/shapes/boolShape';
 import { parseFigmaId } from '@ui/parser';
-import {
-  symbolBlendMode,
-  symbolBoolType,
-  symbolFills,
-  symbolStrokes
-} from '@ui/parser/creators/symbols';
+import { symbolBoolType, symbolFills, symbolStrokes } from '@ui/parser/creators/symbols';
 
 import { createItems } from '.';
 
 export const createBool = (
   file: PenpotFile,
-  {
-    type,
-    fills,
-    strokes,
-    boolType,
-    blendMode,
-    figmaId,
-    figmaRelatedId,
-    children = [],
-    ...rest
-  }: BoolShape
+  { type, figmaId, figmaRelatedId, children = [], ...shape }: BoolShape
 ) => {
-  file.addBool({
-    id: parseFigmaId(file, figmaId),
-    shapeRef: parseFigmaId(file, figmaRelatedId, true),
-    fills: symbolFills(fills),
-    strokes: symbolStrokes(strokes),
-    blendMode: symbolBlendMode(blendMode),
-    boolType: symbolBoolType(boolType),
-    ...rest
-  });
+  shape.id = parseFigmaId(file, figmaId);
+  shape.shapeRef = parseFigmaId(file, figmaRelatedId, true);
+  shape.fills = symbolFills(shape.fills);
+  shape.strokes = symbolStrokes(shape.strokes);
+  shape.boolType = symbolBoolType(shape.boolType);
+
+  file.addBool(shape);
 
   createItems(file, children);
 

diff --git a/ui-src/parser/creators/createCircle.ts b/ui-src/parser/creators/createCircle.ts
@@ -1,18 +1,16 @@
 import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { CircleShape } from '@ui/lib/types/shapes/circleShape';
 import { parseFigmaId } from '@ui/parser';
-import { symbolBlendMode, symbolFills, symbolStrokes } from '@ui/parser/creators/symbols';
+import { symbolFills, symbolStrokes } from '@ui/parser/creators/symbols';
 
 export const createCircle = (
   file: PenpotFile,
-  { type, fills, strokes, blendMode, figmaId, figmaRelatedId, ...rest }: CircleShape
+  { type, figmaId, figmaRelatedId, ...shape }: CircleShape
 ) => {
-  file.createCircle({
-    id: parseFigmaId(file, figmaId),
-    shapeRef: parseFigmaId(file, figmaRelatedId, true),
-    fills: symbolFills(fills),
-    strokes: symbolStrokes(strokes),
-    blendMode: symbolBlendMode(blendMode),
-    ...rest
-  });
+  shape.id = parseFigmaId(file, figmaId);
+  shape.shapeRef = parseFigmaId(file, figmaRelatedId, true);
+  shape.fills = symbolFills(shape.fills);
+  shape.strokes = symbolStrokes(shape.strokes);
+
+  file.createCircle(shape);
 };
diff --git a/ui-src/parser/creators/createComponent.ts b/ui-src/parser/creators/createComponent.ts
@@ -8,21 +8,20 @@ import { createArtboard } from '.';
 
 export const createComponent = (file: PenpotFile, { figmaId }: ComponentRoot) => {
   const component = componentsLibrary.get(figmaId);
+
   if (!component) {
     return;
   }
 
-  const uiComponent = uiComponents.get(figmaId);
-  const componentId = uiComponent?.componentId ?? file.newId();
+  const componentId = getComponentId(file, figmaId);
+  const { type, ...shape } = component;
 
-  const frameId = createArtboard(file, {
-    ...component,
-    componentFile: file.getId(),
-    componentId,
-    componentRoot: true,
-    mainInstance: true,
-    type: 'frame'
-  });
+  shape.componentFile = file.getId();
+  shape.componentId = componentId;
+  shape.componentRoot = true;
+  shape.mainInstance = true;
+
+  const frameId = createArtboard(file, shape);
 
   if (!frameId) {
     return;
@@ -35,3 +34,9 @@ export const createComponent = (file: PenpotFile, { figmaId }: ComponentRoot) =>
     mainInstanceId: frameId
   });
 };
+
+const getComponentId = (file: PenpotFile, figmaId: string) => {
+  const uiComponent = uiComponents.get(figmaId);
+
+  return uiComponent?.componentId ?? file.newId();
+};
diff --git a/ui-src/parser/creators/createComponentInstance.ts b/ui-src/parser/creators/createComponentInstance.ts
@@ -13,31 +13,37 @@ export const createComponentInstance = (
     figmaId,
     figmaRelatedId,
     isComponentRoot,
-    ...rest
+    ...shape
   }: ComponentInstance
 ) => {
-  let uiComponent = uiComponents.get(mainComponentFigmaId);
+  const uiComponent =
+    uiComponents.get(mainComponentFigmaId) ?? createUiComponent(file, mainComponentFigmaId);
 
   if (!uiComponent) {
-    const mainInstanceId = parseFigmaId(file, mainComponentFigmaId);
-    if (!mainInstanceId) {
-      return;
-    }
-
-    uiComponent = {
-      componentId: file.newId(),
-      componentFigmaId: mainComponentFigmaId,
-      mainInstanceId
-    };
-    uiComponents.register(mainComponentFigmaId, uiComponent);
+    return;
   }
 
-  createArtboard(file, {
-    ...rest,
-    shapeRef: uiComponent.mainInstanceId,
-    componentFile: file.getId(),
-    componentRoot: isComponentRoot,
-    componentId: uiComponent.componentId,
-    type: 'frame'
-  });
+  shape.shapeRef = uiComponent.mainInstanceId;
+  shape.componentFile = file.getId();
+  shape.componentRoot = isComponentRoot;
+  shape.componentId = uiComponent.componentId;
+
+  createArtboard(file, shape);
+};
+
+const createUiComponent = (file: PenpotFile, mainComponentFigmaId: string) => {
+  const mainInstanceId = parseFigmaId(file, mainComponentFigmaId);
+  if (!mainInstanceId) {
+    return;
+  }
+
+  const uiComponent = {
+    componentId: file.newId(),
+    componentFigmaId: mainComponentFigmaId,
+    mainInstanceId
+  };
+
+  uiComponents.register(mainComponentFigmaId, uiComponent);
+
+  return uiComponent;
 };
diff --git a/ui-src/parser/creators/createComponentsLibrary.ts b/ui-src/parser/creators/createComponentsLibrary.ts
@@ -3,7 +3,7 @@ import { sleep } from '@plugin/utils/sleep';
 
 import { sendMessage } from '@ui/context';
 import { PenpotFile } from '@ui/lib/types/penpotFile';
-import { symbolBlendMode, symbolFills, symbolStrokes } from '@ui/parser/creators/symbols';
+import { symbolFills, symbolStrokes } from '@ui/parser/creators/symbols';
 import { UiComponent, uiComponents } from '@ui/parser/libraries';
 
 import { createItems } from '.';
@@ -41,21 +41,19 @@ const createComponentLibrary = async (file: PenpotFile, uiComponent: UiComponent
     return;
   }
 
-  const { children = [], fills, strokes, blendMode, ...rest } = component;
-
-  file.startComponent({
-    ...rest,
-    fills: symbolFills(fills),
-    strokes: symbolStrokes(strokes),
-    blendMode: symbolBlendMode(blendMode),
-    id: uiComponent.componentId,
-    componentId: uiComponent.componentId,
-    mainInstancePage: uiComponent.mainInstancePage,
-    mainInstanceId: uiComponent.mainInstanceId,
-    componentRoot: true,
-    mainInstance: true,
-    componentFile: file.getId()
-  });
+  const { children = [], ...shape } = component;
+
+  shape.fills = symbolFills(shape.fills);
+  shape.strokes = symbolStrokes(shape.strokes);
+  shape.id = uiComponent.componentId;
+  shape.componentId = uiComponent.componentId;
+  shape.mainInstancePage = uiComponent.mainInstancePage;
+  shape.mainInstanceId = uiComponent.mainInstanceId;
+  shape.componentRoot = true;
+  shape.mainInstance = true;
+  shape.componentFile = file.getId();
+
+  file.startComponent(shape);
 
   createItems(file, children);