DEVREL-2727: Get and set component settings (#29)

Author: tim-webflow

src/components/PermissionsMap.tsx

@@ -61,6 +61,8 @@ export const permissionsMap: PermissionsMap = {
     openCanvas: { permissions: ['canModifyComponents'] },
     selectComponent: { permissions: ['canModifyComponents'] },
     exitComponent: { permissions: ['canAccessCanvas'] },
+    getSettings: { permissions: ['canAccessCanvas'] },
+    setSettings: { permissions: ['canModifyComponents'] },
   },
 
   // Elements

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

@@ -31,6 +31,34 @@ interface Component {
    * ```
    */
   setName(name: string): Promise<null>;
+  /**
+   * Get the settings (name, group, description) of a component.
+   * @returns A Promise resolving to the component's settings.
+   * @example
+   * ```ts
+   * const component = (await webflow.getAllComponents())[0];
+   * const settings = await component.getSettings();
+   * console.log(settings.name);        // 'Hero Section'
+   * console.log(settings.group);       // 'Sections'
+   * console.log(settings.description); // 'A reusable hero'
+   * ```
+   */
+  getSettings(): Promise<ComponentSettings>;
+  /**
+   * Update one or more settings on a component. All fields are optional.
+   * Updates happen immediately without requiring an explicit save().
+   * @param settings - A partial object of settings to update.
+   * @returns A Promise that resolves when the update is complete.
+   * @example
+   * ```ts
+   * await component.setSettings({
+   *   name: 'Hero Section v2',
+   *   group: 'Sections',
+   *   description: 'Updated hero with new CTA layout',
+   * });
+   * ```
+   */
+  setSettings(settings: Partial<ComponentSettings>): Promise<null>;
   /**
    * Retrieve all variants of a component.
    * @returns A Promise resolving to an array containing all variants of the component
@@ -75,6 +103,15 @@ interface Component {
 
 type ComponentId = string;
 
+interface ComponentSettings {
+  /** The name of the component */
+  name: string;
+  /** The group/folder the component belongs to (empty string if not set) */
+  group: string;
+  /** The description of the component (empty string if not set) */
+  description: string;
+}
+
 interface Variant {
   id: string;
   name: string;

src/examples/components.ts

@@ -69,6 +69,39 @@ export const Components = {
     console.log(heroes);
   },
 
+  getSettings: async () => {
+    // Get the first component's settings
+    const component = (await webflow.getAllComponents())[0]
+    const settings = await component.getSettings()
+    console.log(settings)
+    /*
+    {
+      name: 'Hero Section',
+      group: 'Sections',
+      description: 'A reusable hero with heading and CTA'
+    }
+    */
+  },
+
+  setSettings: async () => {
+    const component = (await webflow.getAllComponents())[0]
+
+    // Update only the description
+    await component.setSettings({
+      description: 'Updated hero layout with video background',
+    })
+
+    // Move to a different group
+    await component.setSettings({ group: 'Legacy' })
+
+    // Update everything at once
+    await component.setSettings({
+      name: 'Hero Section v2',
+      group: 'Sections',
+      description: 'Redesigned hero component',
+    })
+  },
+
   getInstanceCount: async () => {
     // Audit component usage across the site
     const components = await webflow.getAllComponents();