From 54e1fd027f7610e162c96dc2f33492c557047839 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Tue, 11 Jun 2024 11:47:14 +0100 Subject: [PATCH] table generator - enable dynamic page loading --- packages/table-generator/manifest.json | 3 +- packages/table-generator/package.json | 3 +- .../table-generator/plugin-src/.eslintrc.cjs | 28 +++++++++++++++++++ .../__tests__/utils/data-interface.spec.ts | 2 +- packages/table-generator/plugin-src/code.ts | 7 ++--- .../plugin-src/utils/component.ts | 4 ++- .../plugin-src/utils/data-interface.ts | 3 +- .../plugin-src/utils/generate-table.ts | 6 ++-- .../table-generator/plugin-src/utils/guard.ts | 6 ++-- .../plugin-src/utils/pluginData.ts | 8 +++--- 10 files changed, 51 insertions(+), 19 deletions(-) create mode 100644 packages/table-generator/plugin-src/.eslintrc.cjs diff --git a/packages/table-generator/manifest.json b/packages/table-generator/manifest.json index d6c1383..ba33081 100644 --- a/packages/table-generator/manifest.json +++ b/packages/table-generator/manifest.json @@ -17,5 +17,6 @@ "https://fonts.gstatic.com", "https://fonts.googleapis.com" ] - } + }, + "documentAccess": "dynamic-page" } diff --git a/packages/table-generator/package.json b/packages/table-generator/package.json index 0b81dc2..92b5335 100644 --- a/packages/table-generator/package.json +++ b/packages/table-generator/package.json @@ -16,7 +16,8 @@ "build:main": "esbuild plugin-src/code.ts --bundle --outfile=dist/code.js --target=es6", "build:ui": "npx vite build --minify esbuild --emptyOutDir=false", "build:watch": "concurrently -n widget,iframe \"npm run build:main -- --watch\" \"npm run build:ui -- --watch\"", - "dev": "concurrently -n tsc,build,vite 'npm:tsc:watch' 'npm:build:watch' 'vite'" + "dev": "concurrently -n tsc,build,vite 'npm:tsc:watch' 'npm:build:watch' 'vite'", + "lint:plugin": "eslint ./plugin-src" }, "repository": { "type": "git", diff --git a/packages/table-generator/plugin-src/.eslintrc.cjs b/packages/table-generator/plugin-src/.eslintrc.cjs new file mode 100644 index 0000000..7eb48d4 --- /dev/null +++ b/packages/table-generator/plugin-src/.eslintrc.cjs @@ -0,0 +1,28 @@ +/* eslint-env node */ +module.exports = { + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@figma/figma-plugins/recommended", + ], + rules: { + "@typescript-eslint/no-explicit-any": 1, + "@typescript-eslint/no-floating-promises": ["error"], + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": [ + "warn", // or "error" + { + argsIgnorePattern: "^_", + varsIgnorePattern: "^_", + caughtErrorsIgnorePattern: "^_", + }, + ], + }, + ignorePatterns: [".eslintrc.cjs"], + parserOptions: { + project: ["./tsconfig.json", "./__tests__/tsconfig.json"], + tsconfigRootDir: __dirname, // important option + }, + parser: "@typescript-eslint/parser", + plugins: ["@typescript-eslint"], +}; diff --git a/packages/table-generator/plugin-src/__tests__/utils/data-interface.spec.ts b/packages/table-generator/plugin-src/__tests__/utils/data-interface.spec.ts index 3a3c582..21e47e0 100644 --- a/packages/table-generator/plugin-src/__tests__/utils/data-interface.spec.ts +++ b/packages/table-generator/plugin-src/__tests__/utils/data-interface.spec.ts @@ -1,5 +1,5 @@ +import { describe, expect, test } from "vitest"; import { getPreferredTextInChild } from "../../utils/data-interface"; -import { vi, test, expect, describe } from "vitest"; describe("getPreferredTextInChild", () => { test("returns empty string when no nested TextNode", () => { diff --git a/packages/table-generator/plugin-src/code.ts b/packages/table-generator/plugin-src/code.ts index 9b96307..b6eaf42 100644 --- a/packages/table-generator/plugin-src/code.ts +++ b/packages/table-generator/plugin-src/code.ts @@ -14,7 +14,6 @@ import { getComponentFromSelection, getValidTableFromSelection, } from "./utils/guard"; -import { readConfigFromPluginData } from "./utils/pluginData"; let notifyHandler: NotificationHandler | null; @@ -41,7 +40,7 @@ figma.ui.onmessage = async (msg: PostToFigmaMessage) => { try { switch (msg.type) { case "ui-finish-loading": { - loadLocalComponent(); + await loadLocalComponent(); detectGridSelection(); break; } @@ -54,7 +53,7 @@ figma.ui.onmessage = async (msg: PostToFigmaMessage) => { break; } case "set-table-header-cell": { - const comp = getComponentFromSelection(notify); + const comp = await getComponentFromSelection(notify); if (comp) { figma.ui.postMessage({ type: "update-header-cell", @@ -67,7 +66,7 @@ figma.ui.onmessage = async (msg: PostToFigmaMessage) => { break; } case "set-table-body-cell": { - const comp = getComponentFromSelection(notify); + const comp = await getComponentFromSelection(notify); if (comp) { figma.ui.postMessage({ type: "update-body-cell", diff --git a/packages/table-generator/plugin-src/utils/component.ts b/packages/table-generator/plugin-src/utils/component.ts index 2a6ca61..5eed254 100644 --- a/packages/table-generator/plugin-src/utils/component.ts +++ b/packages/table-generator/plugin-src/utils/component.ts @@ -1,8 +1,10 @@ // we need this map as `importComponentByKeyAsync` doesn't work on local ones const localComponentMap: Map = new Map(); -export const loadLocalComponent = () => { +export const loadLocalComponent = async () => { // TODO: any easier way to find local components + await figma.loadAllPagesAsync(); + // eslint-disable-next-line @figma/figma-plugins/dynamic-page-find-method-advice const list = figma.root.findAllWithCriteria({ types: ["COMPONENT"] }); list.forEach((comp) => { localComponentMap.set(comp.key, comp); diff --git a/packages/table-generator/plugin-src/utils/data-interface.ts b/packages/table-generator/plugin-src/utils/data-interface.ts index c7742ea..48503c4 100644 --- a/packages/table-generator/plugin-src/utils/data-interface.ts +++ b/packages/table-generator/plugin-src/utils/data-interface.ts @@ -2,8 +2,9 @@ import { TableData } from "../../shared-src/messages"; const PREFERRED_TEXT_NODE_NAMES = ["Cell", "Value", "Label"]; +// eslint-disable-next-line @typescript-eslint/no-explicit-any export function isChildrenMixin(node: any): node is ChildrenMixin { - return !!(node as any).children; + return "children" in node; } export function getAllVisibleTextLayers(node: ChildrenMixin) { // Not using `findAllWithCriteria` so invisible ones can be filtered out diff --git a/packages/table-generator/plugin-src/utils/generate-table.ts b/packages/table-generator/plugin-src/utils/generate-table.ts index 230bb7d..dbe6bc4 100644 --- a/packages/table-generator/plugin-src/utils/generate-table.ts +++ b/packages/table-generator/plugin-src/utils/generate-table.ts @@ -116,7 +116,7 @@ export const updateTable = async ( export const generateTableWrapper = ( config: TableConfig, - notify?: (message: string, options?: NotificationOptions) => void + _notify?: (message: string, options?: NotificationOptions) => void ): FrameNode => { const frame = figma.createFrame(); frame.name = "Table"; @@ -137,7 +137,7 @@ export const generateColumn = ( rows: number, headerComponent: ComponentNode, bodyComponent: ComponentNode, - notify?: (message: string, options?: NotificationOptions) => void + _notify?: (message: string, options?: NotificationOptions) => void ) => { const column = figma.createFrame(); column.name = "Column"; @@ -162,7 +162,7 @@ export const updateColumn = ( column: FrameNode, rowsConfig: number, bodyComponent: ComponentNode, - notify?: (message: string, options?: NotificationOptions) => void + _notify?: (message: string, options?: NotificationOptions) => void ) => { // "+1" for header const rows = rowsConfig + 1; diff --git a/packages/table-generator/plugin-src/utils/guard.ts b/packages/table-generator/plugin-src/utils/guard.ts index 3607011..465710a 100644 --- a/packages/table-generator/plugin-src/utils/guard.ts +++ b/packages/table-generator/plugin-src/utils/guard.ts @@ -1,9 +1,9 @@ import { TableConfig } from "../../shared-src/messages"; import { readConfigFromPluginData } from "./pluginData"; -export const getComponentFromSelection = ( +export const getComponentFromSelection = async ( notify?: (message: string, options?: NotificationOptions) => void -): null | ComponentNode => { +): Promise => { if (figma.currentPage.selection.length !== 1) { notify?.("Select one layer"); return null; @@ -12,7 +12,7 @@ export const getComponentFromSelection = ( if (selected.type === "COMPONENT") { return selected; } else if (selected.type === "INSTANCE") { - const comp = selected.mainComponent; + const comp = await selected.getMainComponentAsync(); if (comp) { return comp; } else { diff --git a/packages/table-generator/plugin-src/utils/pluginData.ts b/packages/table-generator/plugin-src/utils/pluginData.ts index d645e80..55cc24b 100644 --- a/packages/table-generator/plugin-src/utils/pluginData.ts +++ b/packages/table-generator/plugin-src/utils/pluginData.ts @@ -16,16 +16,16 @@ export const writeConfigToPluginData = ( export const validateConfig = (config: unknown): boolean => { if (typeof config === "object" && config !== null) { - if (typeof (config as any).rows !== "number") { + if ("rows" in config && typeof config.rows !== "number") { return false; } - if (typeof (config as any).columns !== "number") { + if ("columns" in config && typeof config.columns !== "number") { return false; } - if (typeof (config as any).headerCell !== "object") { + if ("headerCell" in config && typeof config.headerCell !== "object") { return false; } - if (typeof (config as any).bodyCell !== "object") { + if ("bodyCell" in config && typeof config.bodyCell !== "object") { return false; } return true;