chore(cli): remove get-page call

Instead of making a new call to the Penpot API to retrieve page components, retrieve them from the Penpot file already downloaded.

Midway, it fixes some Penpot API types from arrays to records.

packages/penpot-css-export/src/lib/api/penpot.ts

@@ -1,16 +1,10 @@
 import fetch, { RequestInit } from 'node-fetch'
-import {
-  getObjectShapesFromPage,
-  isComponent,
-  pickObjectProps,
-} from './helpers'
+import { pickObjectProps } from './helpers'
 import type {
-  PenpotComponent,
   PenpotObject,
   PenpotPage,
   PenpotSettings,
   FetcherOptions,
-  PenpotGetPageOptions,
   PenpotApiErrorResponse,
   PenpotTypography,
   PenpotGetFileOptions,
@@ -75,23 +69,6 @@ export class Penpot {
     return json as ResultType
   }
 
-  async getPageComponents(
-    options: PenpotGetPageOptions,
-  ): Promise<{ pageName: string; components: PenpotComponent[] }> {
-    const page = await this.fetcher<PenpotPage>({
-      command: 'get-page',
-      body: {
-        fileId: options.fileId,
-        pageId: options.pageId,
-      },
-    })
-    const components = Object.values(page.objects)
-      .filter(isComponent)
-      .map((object) => getObjectShapesFromPage(object, page))
-
-    return { pageName: page.name, components }
-  }
-
   static extractObjectCssProps(object: PenpotObject) {
     let { textDecoration, ...styles } = object.positionData[0]
     const isTextObject = object.type === 'text'
@@ -120,8 +97,9 @@ export class Penpot {
 
   async getFile(options: PenpotGetFileOptions): Promise<{
     fileName: string
-    colors: PenpotColor[]
-    typographies: PenpotTypography[]
+    colors: Record<string, PenpotColor>
+    typographies: Record<string, PenpotTypography>
+    pages: Record<string, PenpotPage>
   }> {
     const file = await this.fetcher<PenpotFile>({
       command: 'get-file',
@@ -129,12 +107,13 @@ export class Penpot {
         id: options.fileId,
       },
     })
-    const colors = file.data.colors ? Object.values(file.data.colors) : []
-    const typographies = file.data.typographies
-      ? Object.values(file.data.typographies)
-      : []
 
-    return { fileName: file.name, colors, typographies }
+    return {
+      fileName: file.name,
+      colors: file.data.colors ?? {},
+      typographies: file.data.typographies ?? {},
+      pages: file.data.pagesIndex ?? {},
+    }
   }
 
   static getTypographyAssetCssProps(typography: PenpotTypography) {

packages/penpot-css-export/src/lib/api/types.ts

@@ -8,11 +8,6 @@ export interface FetcherOptions {
   body: Record<string, string>
 }
 
-export interface PenpotGetPageOptions {
-  fileId: string
-  pageId: string
-}
-
 export interface PenpotGetFileOptions {
   fileId: string
 }
@@ -53,6 +48,7 @@ export type PenpotTypography = PenpotAsset & {
 } & Record<CssTextProperty, string>
 
 export interface PenpotPage {
+  id: string
   name: string
   objects: Record<string, PenpotObject>
 }
@@ -65,9 +61,9 @@ export interface PenpotFile {
   data: {
     id: string
     version: number
-    colors: PenpotColor[]
-    typographies: PenpotTypography[]
-    pages: PenpotPage[]
+    colors?: Record<string, PenpotColor>
+    typographies?: Record<string, PenpotTypography>
+    pagesIndex?: Record<string, PenpotPage>
   }
 }
 

packages/penpot-css-export/src/lib/index.ts

@@ -7,6 +7,7 @@ import {
   writeCssFile,
 } from './css'
 import path from 'path'
+import { getObjectShapesFromPage, isComponent } from './api/helpers'
 
 export async function generateCssFromConfig(
   userConfig: object,
@@ -33,7 +34,8 @@ export async function generateCssFromConfig(
 
       const { colors } = penpotFile
 
-      for (const color of colors) {
+      for (const colorId in colors) {
+        const color = colors[colorId]
         const objectClassname = textToCssCustomProperyName(color.name)
         cssClassDefinition.cssProps[objectClassname] = color.color // FIXME Add opacity with rgba()
       }
@@ -50,7 +52,8 @@ export async function generateCssFromConfig(
 
       const { fileName, typographies } = penpotFile
 
-      for (const typography of typographies) {
+      for (const typographyId in typographies) {
+        const typography = typographies[typographyId]
         const cssProps = Penpot.getTypographyAssetCssProps(typography)
         const selector = textToCssClassSelector(
           `${fileName}--${typography.name}`,
@@ -68,17 +71,18 @@ export async function generateCssFromConfig(
     for (const pagesConfig of fileConfig.pages) {
       const cssClassDefinitions: CSSClassDefinition[] = []
 
-      const { pageName, components } = await penpot.getPageComponents({
-        fileId: fileConfig.fileId,
-        pageId: pagesConfig.pageId,
-      })
+      const page = penpotFile.pages[pagesConfig.pageId]
+
+      const components = Object.values(page.objects)
+        .filter(isComponent)
+        .map((object) => getObjectShapesFromPage(object, page))
 
       for (const component of components) {
         for (const object of component.objects) {
           if (object.type === 'text') {
             const cssProps = Penpot.getTextObjectCssProps(object)
             const selector = textToCssClassSelector(
-              `${pageName}--${object.name}`,
+              `${page.name}--${object.name}`,
             )
             cssClassDefinitions.push({ selector, cssProps })
           }