feat: allow hydrating the document by triggering the frontend logic

.env.model

@@ -1,3 +1,5 @@
 FIGMA_ACCESS_TOKEN=
 PENPOT_ACCESS_TOKEN=
 PENPOT_BASE_URL=
+PENPOT_USER_EMAIL=
+PENPOT_USER_PASSWORD=

package.json

@@ -32,26 +32,31 @@
     "client:penpot:generate": "openapi-ts -i https://design.penpot.app/api/openapi.json -o src/clients/penpot",
     "clean": "rm -rf dist && rm -rf node_modules",
     "cm": "cz",
+    "playwright": "playwright",
     "jest": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest",
     "semantic-release": "semantic-release"
   },
   "dependencies": {
     "@commander-js/extra-typings": "^11.1.0",
     "@inquirer/prompts": "^3.3.0",
     "@types/graphlib": "^2.1.12",
+    "@types/set-cookie-parser": "^2.4.10",
     "chalk": "^5.3.0",
     "change-case": "^5.4.4",
     "content-type": "^1.0.5",
     "glob": "^10.4.2",
     "graphlib": "^2.1.8",
     "human-filetypes": "^1.1.3",
     "image-size": "^1.1.1",
+    "iso8601-duration": "^2.1.2",
     "json-stream-stringify": "^3.1.4",
     "lru-cache": "^10.2.2",
     "mathjs": "^13.0.0",
     "microdiff": "^1.3.2",
     "patch-package": "^8.0.0",
+    "playwright": "^1.45.3",
     "romans": "^2.0.16",
+    "set-cookie-parser": "^2.6.0",
     "slugify": "^1.6.6",
     "stream-json": "^1.8.0",
     "svg-path-parser": "^1.1.0",

src/cli/program.ts

@@ -3,18 +3,20 @@ import { Command, Option } from '@commander-js/extra-typings';
 import {
   CompareOptions,
   DocumentOptionsType,
+  HydrateOptions,
   RetrieveOptions,
   SetOptions,
   SynchronizeOptions,
   TransformOptions,
   compare,
+  hydrate,
   retrieve,
   set,
   synchronize,
   transform,
 } from '@figpot/src/features/document';
 import { processDocumentsParametersFromInput, retrieveDocumentsFromInput } from '@figpot/src/features/figma';
-import { ensureAccessTokens } from '@figpot/src/utils/environment';
+import { ensureAccessTokens, ensureCredentials } from '@figpot/src/utils/environment';
 
 export const program = new Command();
 
@@ -23,7 +25,7 @@ program.name('figpot').description('CLI to perform actions between Figma and Pen
 const document = program.command('document').description('manage documents');
 const debugDocument = document.command('debug').description('manage documents step by step to debug');
 
-const documentsOption = new Option('-d, --document [documents...]', 'figma document id as source and penpot one as target (`-d figmaId[:penpotId]`)');
+const documentsOption = new Option('-d, --document [documents...]', 'figma document id as source and penpot one as target (`-d figmaId:penpotId`)');
 
 const patternInfo = '(use single quotes around the parameter to prevent your terminal to replace special characters)';
 const excludePagePatternsOption = new Option(
@@ -78,16 +80,20 @@ document
   .addOption(excludeTypographyPatternsOption)
   .addOption(excludeColorPatternsOption)
   .addOption(replaceFontPatternsOption)
+  .option('-nh, --no-hydrate', 'prevent performing hydratation after the synchronization')
+  .option('-ht, --hydrate-timeout <hydrateTimeout>', 'specify a maximum of duration for hydratation')
   .action(async (options) => {
     await ensureAccessTokens();
 
     let documents: DocumentOptionsType[];
     if (!options.document || options.document === true) {
-      documents = (await retrieveDocumentsFromInput()).map((figmaDocument) => {
-        return {
-          figmaDocument: figmaDocument,
-        };
-      });
+      throw new Error('please specify both figma and penpot documents to synchronize');
+      // TODO: disabling this for now until we implement the documents retrieval from Penpot
+      // documents = (await retrieveDocumentsFromInput()).map((figmaDocument) => {
+      //   return {
+      //     figmaDocument: figmaDocument,
+      //   };
+      // });
     } else {
       documents = processDocumentsParametersFromInput(options.document);
     }
@@ -103,6 +109,31 @@ document
           colorNamePatterns: Array.isArray(options.excludeColorPattern) ? options.excludeColorPattern : undefined,
         },
         replaceFontPatterns: Array.isArray(options.replaceFontPattern) ? formatReplaceFontPatterns(options.replaceFontPattern) : [],
+        hydrate: options.hydrate,
+        hydrateTimeout: options.hydrateTimeout || null,
+      })
+    );
+  });
+
+document
+  .command('hydrate')
+  .description('hydrate Penpot documents after a synchronization')
+  .addOption(documentsOption)
+  .option('-t, --timeout <timeout>', 'specify a maximum of duration for hydratation')
+  .action(async (options) => {
+    await ensureCredentials();
+
+    let documents: DocumentOptionsType[];
+    if (!options.document || options.document === true) {
+      throw new Error('please specify both figma and penpot documents to synchronize');
+    } else {
+      documents = processDocumentsParametersFromInput(options.document);
+    }
+
+    await hydrate(
+      HydrateOptions.parse({
+        documents: documents,
+        timeout: options.timeout || null,
       })
     );
   });