[DEVREL-2687, DEVREL-2688]: Get component variants (#21)

Author: tim-webflow

src/components/PermissionsMap.tsx

@@ -54,6 +54,8 @@ export const permissionsMap: PermissionsMap = {
     getComponentByName: { permissions: ['canAccessCanvas'] },
     getComponentByNameAndGroup: { permissions: ['canAccessCanvas'] },
     getInstanceCount: { permissions: ['canAccessCanvas'] },
+    getVariants: { permissions: ['canAccessCanvas'] },
+    getSelectedVariant: { permissions: ['canAccessCanvas'] },
     enterComponent: { permissions: ['canModifyComponents'] },
     openCanvas: { permissions: ['canModifyComponents'] },
     selectComponent: { permissions: ['canModifyComponents'] },

src/designer-extension-typings/api.d.ts

@@ -138,6 +138,7 @@ interface WebflowApi {
     name: string,
     root: AnyElement | ElementPreset<AnyElement> | Component
   ): Promise<Component>;
+  getComponentByName(string): Promise<null | Component>;
   /**
    * Delete a component from the Designer. If there are any instances of the Component within the site, they will
    * be converted to regular Elements.

src/designer-extension-typings/components.d.ts

@@ -31,7 +31,52 @@ interface Component {
    * ```
    */
   setName(name: string): Promise<null>;
+  /**
+   * Retrieve all variants of a component.
+   * @returns A Promise resolving to an array containing all variants of the component
+   * @example
+   * ```ts
+   * const component = (await webflow.getAllComponents())[0];
+   * const variants = await component.getVariants();
+   * console.log(variants);
+   * // [
+   * //   { id: 'base', name: 'Primary', isSelected: true },
+   * //   { id: 'xxxx', name: 'Secondary', isSelected: false },
+   * // ]
+   * // Find which variant the user is currently editing
+   * const activeVariant = variants.find(v => v.isSelected);
+   * console.log(`Currently editing: ${activeVariant.name}`);
+   * ```
+   */
+  getVariants(): Promise<Array<Variant>>;
+  /**
+   * Retrieves the selected variant of a component.
+   * @returns A Promise resolving to a variant
+   * @example
+   * ```ts
+   * const selectedVariant = await heroComponent.getSelectedVariant();
+   * // {
+   * //   id: 'variant-123',
+   * //   name: 'Secondary Hero',
+   * //   isSelected: true,
+   * // }
+   * // // When no variant is explicitly selected, returns base
+   * // const base = await heroComponent.getSelectedVariant();
+   * // {
+   * //   id: 'base',
+   * //   name: 'Primary',
+   * //   isSelected: true,
+   * // }
+   * ```
+   */
+  getSelectedVariant(): Promise<Variant>;
   getRootElement(): Promise<null | AnyElement>;
 }
 
 type ComponentId = string;
+
+interface Variant {
+  id: string;
+  name: string;
+  isSelected: boolean;
+}

src/examples/components.ts

@@ -80,6 +80,31 @@ export const Components = {
     } else {
       await webflow.unregisterComponent(hero);
     }
+  getVariants: async () => {
+    const component = (await webflow.getAllComponents())[0]
+    const variants = await component.getVariants()
+    console.log(variants)
+    // [
+    //   { id: 'base', name: 'Primary', isSelected: true },
+    //   { id: 'xxxx', name: 'Secondary', isSelected: false },
+    // ]
+    // Find which variant the user is currently editing
+    const activeVariant = variants.find(v => v.isSelected)
+    console.log(`Currently editing: ${activeVariant?.name}`)
+  },
+
+  getSelectedVariant: async () => {
+    const heroComponent = webflow.getComponentByName('hero')
+    // When no variant is explicitly selected, returns base
+    const base = await heroComponent.getSelectedVariant()
+    console.log(JSON.stringify(base))
+    /*
+    {
+      id: 'base',
+      name: 'Primary',
+      isSelected: true,
+    }
+    */
   },
 
   createComponent: async () => {