@webflow/designer-extension-typings 0.1.6 → 0.1.8

package/components.d.ts

@@ -0,0 +1,8 @@
+interface Component {
+  readonly id: ComponentId;
+
+  getName(): Promise<string>;
+  setName(name: string): Promise<undefined>;
+}
+
+declare type ComponentId = string;

package/elements-generated.d.ts

@@ -65,6 +65,20 @@ interface NoChildren {
   readonly children: false;
 }
 
+interface ComponentElement
+  extends WebflowElement,
+    NoConfigurable,
+    NoCustomAttributes,
+    NoDomId,
+    NoStyles,
+    NoChildren,
+    NoTextContent {
+  readonly id: ElementId;
+  readonly type: 'ComponentInstance';
+  readonly plugin: '';
+  getComponent(): Component;
+}
+
 interface UnknownElement
   extends WebflowElement,
     NoConfigurable,
@@ -3438,19 +3452,6 @@ interface GoogleAnalyticsElement
   readonly plugin: 'Ssr';
 }
 
-interface SymbolElement
-  extends WebflowElement,
-    Configurable,
-    CustomAttributes,
-    DomId,
-    Styles,
-    Children,
-    NoTextContent {
-  readonly id: ElementId;
-  readonly type: 'Symbol';
-  readonly plugin: 'Symbol';
-}
-
 interface TabsContentElement
   extends WebflowElement,
     Configurable,
@@ -4232,6 +4233,7 @@ interface SlotElement
 }
 
 declare type AnyElement =
+  | ComponentElement
   | UnknownElement
   | DOMElement
   | AnimationElement
@@ -4491,7 +4493,6 @@ declare type AnyElement =
   | CommentElement
   | FacebookPixelElement
   | GoogleAnalyticsElement
-  | SymbolElement
   | TabsContentElement
   | TabsLinkElement
   | TabsMenuElement

package/index.d.ts

@@ -1,6 +1,8 @@
 /// <reference path="./styles.d.ts" />
 /// <reference path="./pages.d.ts" />
 /// <reference path="./elements.d.ts" />
+/// <reference path="./components.d.ts" />
+/// <reference path="./variables.d.ts" />
 
 declare global {
   const webflow: WebflowApi;
@@ -10,6 +12,12 @@ interface WebflowApi {
   getSiteInfo(): Promise<{siteId: string; siteName: string; shortName: string}>;
   getSelectedElement(): Promise<null | AnyElement>;
   getMediaQuery(): Promise<BreakpointId>;
+  registerComponent(name: string, rootElement: AnyElement): Promise<Component>;
+  unregisterComponent(component: Component): Promise<void>;
+  getAllComponents(): Promise<Array<Component>>;
+  enterComponent(instance: ComponentElement): Promise<void>;
+  exitComponent(): Promise<void>;
+  getRootElement(): Promise<null | AnyElement>;
   getAllElements(): Promise<Array<AnyElement>>;
   createStyle(name: string): Style;
   getStyleByName(name: string): Promise<null | Style>;
@@ -22,6 +30,7 @@ interface WebflowApi {
   createString(text: string): StringElement;
   createDOM(tag: string): DOMElement;
   createHeading(tag: 1 | 2 | 3 | 4 | 5 | 6): HeadingElement;
+  getDefaultVariableCollection(): Promise<null | VariableCollection>;
   setExtensionSize(
     size: 'default' | 'comfortable' | 'large' | {width: number; height: number}
   ): Promise<null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/designer-extension-typings",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Typings for the Webflow Designer Extension API",
   "main": "",

package/styles-generated.d.ts

@@ -1,5 +1,7 @@
+// This file was automatically generated. See designer-extensions docs.
+
 declare type PropertyMap = {
-  'accent-color'?: string;
+  'accent-color'?: string | ColorVariable;
   'align-content'?: string;
   'align-items'?: string;
   'align-self'?: string;
@@ -17,75 +19,75 @@ declare type PropertyMap = {
   'background-attachment'?: string;
   'background-blend-mode'?: string;
   'background-clip'?: string;
-  'background-color'?: string;
+  'background-color'?: string | ColorVariable;
   'background-image'?: string;
   'background-origin'?: string;
   'background-position'?: string;
-  'background-position-x'?: string;
-  'background-position-y'?: string;
+  'background-position-x'?: string | SizeVariable;
+  'background-position-y'?: string | SizeVariable;
   'background-repeat'?: string;
   'background-size'?: string;
-  'block-size'?: string;
-  'border-block-end-color'?: string;
+  'block-size'?: string | SizeVariable;
+  'border-block-end-color'?: string | ColorVariable;
   'border-block-end-style'?: string;
-  'border-block-end-width'?: string;
-  'border-block-start-color'?: string;
+  'border-block-end-width'?: string | SizeVariable;
+  'border-block-start-color'?: string | ColorVariable;
   'border-block-start-style'?: string;
-  'border-block-start-width'?: string;
-  'border-bottom-color'?: string;
-  'border-bottom-left-radius'?: string;
-  'border-bottom-right-radius'?: string;
+  'border-block-start-width'?: string | SizeVariable;
+  'border-bottom-color'?: string | ColorVariable;
+  'border-bottom-left-radius'?: string | SizeVariable;
+  'border-bottom-right-radius'?: string | SizeVariable;
   'border-bottom-style'?: string;
-  'border-bottom-width'?: string;
+  'border-bottom-width'?: string | SizeVariable;
   'border-collapse'?: string;
-  'border-end-end-radius'?: string;
-  'border-end-start-radius'?: string;
-  'border-image-outset'?: string;
+  'border-end-end-radius'?: string | SizeVariable;
+  'border-end-start-radius'?: string | SizeVariable;
+  'border-image-outset'?: string | SizeVariable;
   'border-image-repeat'?: string;
   'border-image-slice'?: string;
   'border-image-source'?: string;
-  'border-image-width'?: string;
-  'border-inline-end-color'?: string;
+  'border-image-width'?: string | SizeVariable;
+  'border-inline-end-color'?: string | ColorVariable;
   'border-inline-end-style'?: string;
-  'border-inline-end-width'?: string;
-  'border-inline-start-color'?: string;
+  'border-inline-end-width'?: string | SizeVariable;
+  'border-inline-start-color'?: string | ColorVariable;
   'border-inline-start-style'?: string;
-  'border-inline-start-width'?: string;
-  'border-left-color'?: string;
+  'border-inline-start-width'?: string | SizeVariable;
+  'border-left-color'?: string | ColorVariable;
   'border-left-style'?: string;
-  'border-left-width'?: string;
-  'border-right-color'?: string;
+  'border-left-width'?: string | SizeVariable;
+  'border-right-color'?: string | ColorVariable;
   'border-right-style'?: string;
-  'border-right-width'?: string;
-  'border-start-end-radius'?: string;
-  'border-start-start-radius'?: string;
-  'border-top-color'?: string;
-  'border-top-left-radius'?: string;
-  'border-top-right-radius'?: string;
+  'border-right-width'?: string | SizeVariable;
+  'border-start-end-radius'?: string | SizeVariable;
+  'border-start-start-radius'?: string | SizeVariable;
+  'border-top-color'?: string | ColorVariable;
+  'border-top-left-radius'?: string | SizeVariable;
+  'border-top-right-radius'?: string | SizeVariable;
   'border-top-style'?: string;
-  'border-top-width'?: string;
-  bottom?: string;
+  'border-top-width'?: string | SizeVariable;
+  bottom?: string | SizeVariable;
   'box-shadow'?: string;
   'box-sizing'?: string;
   'break-after'?: string;
   'break-before'?: string;
   'break-inside'?: string;
   'caption-side'?: string;
-  'caret-color'?: string;
+  'caret-color'?: string | ColorVariable;
   clear?: string;
   clip?: string;
   'clip-path'?: string;
   'clip-rule'?: string;
-  color?: string;
+  color?: string | ColorVariable;
   'color-interpolation'?: string;
   'color-interpolation-filters'?: string;
   'column-count'?: string;
-  'column-gap'?: string;
-  'column-rule-color'?: string;
+  'column-gap'?: string | SizeVariable;
+  'column-rule-color'?: string | ColorVariable;
   'column-rule-style'?: string;
-  'column-rule-width'?: string;
+  'column-rule-width'?: string | SizeVariable;
   'column-span'?: string;
-  'column-width'?: string;
+  'column-width'?: string | SizeVariable;
   content?: string;
   cursor?: string;
   cx?: string;
@@ -98,18 +100,18 @@ declare type PropertyMap = {
   'fill-opacity'?: string;
   'fill-rule'?: string;
   filter?: string;
-  'flex-basis'?: string;
+  'flex-basis'?: string | SizeVariable;
   'flex-direction'?: string;
   'flex-grow'?: string;
   'flex-shrink'?: string;
   'flex-wrap'?: string;
   float?: string;
-  'flood-color'?: string;
+  'flood-color'?: string | ColorVariable;
   'flood-opacity'?: string;
-  'font-family'?: string;
+  'font-family'?: string | FontFamilyVariable;
   'font-kerning'?: string;
   'font-optical-sizing'?: string;
-  'font-size'?: string;
+  'font-size'?: string | SizeVariable;
   'font-stretch'?: string;
   'font-style'?: string;
   'font-variant-alternates'?: string;
@@ -122,134 +124,136 @@ declare type PropertyMap = {
   'grid-auto-flow'?: string;
   'grid-auto-rows'?: string;
   'grid-column-end'?: string;
+  'grid-column-gap'?: string;
   'grid-column-start'?: string;
   'grid-row-end'?: string;
+  'grid-row-gap'?: string | SizeVariable;
   'grid-row-start'?: string;
   'grid-template-areas'?: string;
   'grid-template-columns'?: string;
   'grid-template-rows'?: string;
-  height?: string;
+  height?: string | SizeVariable;
   'image-orientation'?: string;
   'image-rendering'?: string;
-  'inline-size'?: string;
-  'inset-block-end'?: string;
-  'inset-block-start'?: string;
-  'inset-inline-end'?: string;
-  'inset-inline-start'?: string;
+  'inline-size'?: string | SizeVariable;
+  'inset-block-end'?: string | SizeVariable;
+  'inset-block-start'?: string | SizeVariable;
+  'inset-inline-end'?: string | SizeVariable;
+  'inset-inline-start'?: string | SizeVariable;
   isolation?: string;
   'justify-content'?: string;
   'justify-items'?: string;
   'justify-self'?: string;
-  left?: string;
-  'letter-spacing'?: string;
-  'lighting-color'?: string;
+  left?: string | SizeVariable;
+  'letter-spacing'?: string | SizeVariable;
+  'lighting-color'?: string | ColorVariable;
   'line-break'?: string;
-  'line-height'?: string;
+  'line-height'?: string | SizeVariable;
   'list-style-image'?: string;
   'list-style-position'?: string;
   'list-style-type'?: string;
-  'margin-block-end'?: string;
-  'margin-block-start'?: string;
-  'margin-bottom'?: string;
-  'margin-inline-end'?: string;
-  'margin-inline-start'?: string;
-  'margin-left'?: string;
-  'margin-right'?: string;
-  'margin-top'?: string;
+  'margin-block-end'?: string | SizeVariable;
+  'margin-block-start'?: string | SizeVariable;
+  'margin-bottom'?: string | SizeVariable;
+  'margin-inline-end'?: string | SizeVariable;
+  'margin-inline-start'?: string | SizeVariable;
+  'margin-left'?: string | SizeVariable;
+  'margin-right'?: string | SizeVariable;
+  'margin-top'?: string | SizeVariable;
   'marker-end'?: string;
   'marker-mid'?: string;
   'marker-start'?: string;
   'mask-type'?: string;
-  'max-block-size'?: string;
-  'max-height'?: string;
-  'max-inline-size'?: string;
-  'max-width'?: string;
-  'min-block-size'?: string;
-  'min-height'?: string;
-  'min-inline-size'?: string;
-  'min-width'?: string;
+  'max-block-size'?: string | SizeVariable;
+  'max-height'?: string | SizeVariable;
+  'max-inline-size'?: string | SizeVariable;
+  'max-width'?: string | SizeVariable;
+  'min-block-size'?: string | SizeVariable;
+  'min-height'?: string | SizeVariable;
+  'min-inline-size'?: string | SizeVariable;
+  'min-width'?: string | SizeVariable;
   'mix-blend-mode'?: string;
   'object-fit'?: string;
   'object-position'?: string;
   'offset-anchor'?: string;
-  'offset-distance'?: string;
+  'offset-distance'?: string | SizeVariable;
   'offset-path'?: string;
   'offset-rotate'?: string;
   opacity?: string;
   order?: string;
-  'outline-color'?: string;
-  'outline-offset'?: string;
+  'outline-color'?: string | ColorVariable;
+  'outline-offset'?: string | SizeVariable;
   'outline-style'?: string;
-  'outline-width'?: string;
+  'outline-width'?: string | SizeVariable;
   'overflow-wrap'?: string;
   'overflow-x'?: string;
   'overflow-y'?: string;
   'overscroll-behavior-block'?: string;
   'overscroll-behavior-inline'?: string;
-  'padding-block-end'?: string;
-  'padding-block-start'?: string;
-  'padding-bottom'?: string;
-  'padding-inline-end'?: string;
-  'padding-inline-start'?: string;
-  'padding-left'?: string;
-  'padding-right'?: string;
-  'padding-top'?: string;
+  'padding-block-end'?: string | SizeVariable;
+  'padding-block-start'?: string | SizeVariable;
+  'padding-bottom'?: string | SizeVariable;
+  'padding-inline-end'?: string | SizeVariable;
+  'padding-inline-start'?: string | SizeVariable;
+  'padding-left'?: string | SizeVariable;
+  'padding-right'?: string | SizeVariable;
+  'padding-top'?: string | SizeVariable;
   'paint-order'?: string;
-  perspective?: string;
+  perspective?: string | SizeVariable;
   'perspective-origin'?: string;
   'pointer-events'?: string;
   position?: string;
-  r?: string;
+  r?: string | SizeVariable;
   resize?: string;
-  right?: string;
+  right?: string | SizeVariable;
   rotate?: string;
-  'row-gap'?: string;
-  rx?: string;
-  ry?: string;
+  'row-gap'?: string | SizeVariable;
+  rx?: string | SizeVariable;
+  ry?: string | SizeVariable;
   scale?: string;
   'scroll-behavior'?: string;
-  'scroll-margin-block-end'?: string;
-  'scroll-margin-block-start'?: string;
-  'scroll-margin-inline-end'?: string;
-  'scroll-margin-inline-start'?: string;
-  'scroll-padding-block-end'?: string;
-  'scroll-padding-block-start'?: string;
-  'scroll-padding-inline-end'?: string;
-  'scroll-padding-inline-start'?: string;
+  'scroll-margin-block-end'?: string | SizeVariable;
+  'scroll-margin-block-start'?: string | SizeVariable;
+  'scroll-margin-inline-end'?: string | SizeVariable;
+  'scroll-margin-inline-start'?: string | SizeVariable;
+  'scroll-padding-block-end'?: string | SizeVariable;
+  'scroll-padding-block-start'?: string | SizeVariable;
+  'scroll-padding-inline-end'?: string | SizeVariable;
+  'scroll-padding-inline-start'?: string | SizeVariable;
   'shape-image-threshold'?: string;
-  'shape-margin'?: string;
+  'shape-margin'?: string | SizeVariable;
   'shape-outside'?: string;
   'shape-rendering'?: string;
-  'stop-color'?: string;
+  'stop-color'?: string | ColorVariable;
   'stop-opacity'?: string;
-  stroke?: string;
+  stroke?: string | ColorVariable;
   'stroke-dasharray'?: string;
-  'stroke-dashoffset'?: string;
+  'stroke-dashoffset'?: string | SizeVariable;
   'stroke-linecap'?: string;
   'stroke-linejoin'?: string;
   'stroke-miterlimit'?: string;
   'stroke-opacity'?: string;
-  'stroke-width'?: string;
-  'tab-size'?: string;
+  'stroke-width'?: string | SizeVariable;
+  'tab-size'?: string | SizeVariable;
   'table-layout'?: string;
   'text-align'?: string;
   'text-align-last'?: string;
   'text-anchor'?: string;
   'text-decoration'?: string;
-  'text-decoration-color'?: string;
+  'text-decoration-color'?: string | ColorVariable;
   'text-decoration-line'?: string;
   'text-decoration-skip-ink'?: string;
   'text-decoration-style'?: string;
-  'text-emphasis-color'?: string;
+  'text-emphasis-color'?: string | ColorVariable;
   'text-emphasis-position'?: string;
   'text-emphasis-style'?: string;
-  'text-indent'?: string;
+  'text-indent'?: string | SizeVariable;
   'text-overflow'?: string;
   'text-rendering'?: string;
   'text-shadow'?: string;
   'text-transform'?: string;
   'text-underline-position'?: string;
-  top?: string;
+  top?: string | SizeVariable;
   'touch-action'?: string;
   transform?: string;
   'transform-origin'?: string;
@@ -258,24 +262,24 @@ declare type PropertyMap = {
   'transition-duration'?: string;
   'transition-property'?: string;
   'transition-timing-function'?: string;
-  translate?: string;
+  translate?: string | SizeVariable;
   'unicode-bidi'?: string;
   'vector-effect'?: string;
   'vertical-align'?: string;
   visibility?: string;
   'white-space'?: string;
-  width?: string;
+  width?: string | SizeVariable;
   'will-change'?: string;
   'word-break'?: string;
-  'word-spacing'?: string;
+  'word-spacing'?: string | SizeVariable;
   'writing-mode'?: string;
-  x?: string;
-  y?: string;
+  x?: string | SizeVariable;
+  y?: string | SizeVariable;
   'z-index'?: string;
   '-webkit-line-clamp'?: string;
-  '-webkit-text-fill-color'?: string;
-  '-webkit-text-stroke-color'?: string;
-  '-webkit-text-stroke-width'?: string;
+  '-webkit-text-fill-color'?: string | ColorVariable;
+  '-webkit-text-stroke-color'?: string | ColorVariable;
+  '-webkit-text-stroke-width'?: string | SizeVariable;
 };
 
 declare type StyleProperty =
@@ -402,8 +406,10 @@ declare type StyleProperty =
   | 'grid-auto-flow'
   | 'grid-auto-rows'
   | 'grid-column-end'
+  | 'grid-column-gap'
   | 'grid-column-start'
   | 'grid-row-end'
+  | 'grid-row-gap'
   | 'grid-row-start'
   | 'grid-template-areas'
   | 'grid-template-columns'

package/variables.d.ts

@@ -0,0 +1,73 @@
+interface ColorVariable {
+  readonly id: VariableId;
+  readonly type: 'Color';
+  getName(): Promise<null | string>;
+  setName(newName: string): Promise<void>;
+  set(value: ColorValue | ColorVariable): Promise<void>;
+  get(): Promise<null | ColorValue | ColorVariable>;
+  remove(): Promise<boolean>;
+}
+
+interface SizeVariable {
+  readonly id: VariableId;
+  readonly type: 'Size';
+  getName(): Promise<null | string>;
+  setName(newName: string): Promise<void>;
+  set(value: SizeValue | SizeVariable): Promise<void>;
+  get(): Promise<null | SizeValue | SizeVariable>;
+  remove(): Promise<boolean>;
+}
+
+interface FontFamilyVariable {
+  readonly id: VariableId;
+  readonly type: 'FontFamily';
+  getName(): Promise<null | string>;
+  setName(newName: string): Promise<void>;
+  set(value: FontFamilyValue | FontFamilyVariable): Promise<void>;
+  get(): Promise<null | FontFamilyValue | FontFamilyVariable>;
+  remove(): Promise<boolean>;
+}
+
+declare type Variable = ColorVariable | SizeVariable | FontFamilyVariable;
+
+interface VariableCollection {
+  readonly id: VariableCollectionId;
+  getName(): Promise<null | string>;
+  getVariable(id: VariableId): Promise<null | Variable>;
+  getVariableByName(name: string): Promise<null | Variable>;
+  getAllVariables(): Promise<Array<Variable>>;
+  createColorVariable(
+    name: string,
+    value: string | ColorVariable
+  ): Promise<null | ColorVariable>;
+  createSizeVariable(
+    name: string,
+    value: SizeValue | SizeVariable
+  ): Promise<null | SizeVariable>;
+  createFontFamilyVariable(
+    name: string,
+    value: string | FontFamilyVariable
+  ): Promise<null | FontFamilyVariable>;
+}
+
+declare type VariableCollectionId = string;
+declare type VariableId = string;
+declare type ColorValue = string;
+declare type SizeValue = {value: number; unit: SizeUnit};
+declare type FontFamilyValue = string;
+
+declare type SizeUnit =
+  | 'px'
+  | 'em'
+  | 'rem'
+  | 'vh'
+  | 'vw'
+  | 'dvh'
+  | 'dvw'
+  | 'lvh'
+  | 'lvw'
+  | 'svh'
+  | 'svw'
+  | 'vmax'
+  | 'vmin'
+  | 'ch';