table generator - enable dynamic page loading

packages/table-generator/manifest.json

@@ -17,5 +17,6 @@
       "https://fonts.gstatic.com",
       "https://fonts.googleapis.com"
     ]
-  }
+  },
+  "documentAccess": "dynamic-page"
 }

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",

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"],
+};

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", () => {

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",

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<string, ComponentNode> = 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);

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

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;

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<null | ComponentNode> => {
   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 {

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;