diff --git a/src/components/PermissionsMap.tsx b/src/components/PermissionsMap.tsx index 837beba..ac81fdb 100644 --- a/src/components/PermissionsMap.tsx +++ b/src/components/PermissionsMap.tsx @@ -51,6 +51,7 @@ export const permissionsMap: PermissionsMap = { registerComponent: { permissions: ['canCreateComponents'] }, unregisterComponent: { permissions: ['canCreateComponents'] }, getAllComponents: { permissions: ['canAccessCanvas'] }, + getInstanceCount: { permissions: ['canAccessCanvas'] }, enterComponent: { permissions: ['canModifyComponents'] }, exitComponent: { permissions: ['canAccessCanvas'] }, }, diff --git a/src/designer-extension-typings/api.d.ts b/src/designer-extension-typings/api.d.ts index 0e1c2ce..4859d7f 100644 --- a/src/designer-extension-typings/api.d.ts +++ b/src/designer-extension-typings/api.d.ts @@ -168,6 +168,29 @@ interface WebflowApi { * ``` */ getAllComponents(): Promise>; + /** + * Gets the number of instances of a component. + * @returns A Promise that resolves to the number of instances of the component across the entire site. + * @example + * ```ts + * // Audit component usage across the site + * const components = await webflow.getAllComponents(); + * for (const component of components) { + * const name = await component.getName(); + * const count = await component.getInstanceCount(); + * console.log(`${name}: ${count} instances`); + * } + * // Guard against removing a component that's still in use + * const hero = components[0]; + * const instanceCount = await hero.getInstanceCount(); + * if (instanceCount > 0) { + * console.log(`Cannot safely remove — ${instanceCount} instances exist`); + * } else { + * await webflow.unregisterComponent(hero); + * } + * ``` + */ + getInstanceCount(): Promise; /** * Focus the designer on a Component. When a component is in focus, all Globals pertain specifically to that * Component, not the entire Site. diff --git a/src/examples/components.ts b/src/examples/components.ts index 6a64903..9e890f7 100644 --- a/src/examples/components.ts +++ b/src/examples/components.ts @@ -52,6 +52,24 @@ export const Components = { } }, + getInstanceCount: async () => { + // Audit component usage across the site + const components = await webflow.getAllComponents(); + for (const component of components) { + const name = await component.getName(); + const count = await component.getInstanceCount(); + console.log(`${name}: ${count} instances`); + } + // Guard against removing a component that's still in use + const hero = components[0]; + const instanceCount = await hero.getInstanceCount(); + if (instanceCount > 0) { + console.log(`Cannot safely remove — ${instanceCount} instances exist`); + } else { + await webflow.unregisterComponent(hero); + } + }, + createComponent: async () => { // Get selected element const rootElement = await webflow.getSelectedElement()