@webflow/designer-extension-typings 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components.d.ts +8 -0
  2. package/elements-generated.d.ts +15 -0
  3. package/index.d.ts +8 -0
  4. package/package.json +1 -1
  5. package/styles-generated.d.ts +113 -113
  6. package/variables.d.ts +73 -0
package/components.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ interface Component {
2
+ readonly id: ComponentId;
3
+
4
+ getName(): Promise<string>;
5
+ setName(name: string): Promise<undefined>;
6
+ }
7
+
8
+ declare type ComponentId = string;
package/elements-generated.d.ts CHANGED
@@ -65,6 +65,20 @@ interface NoChildren {
65
65
  readonly children: false;
66
66
  }
67
67
 
68
+ interface ComponentElement
69
+ extends WebflowElement,
70
+ NoConfigurable,
71
+ NoCustomAttributes,
72
+ NoDomId,
73
+ NoStyles,
74
+ NoChildren,
75
+ NoTextContent {
76
+ readonly id: ElementId;
77
+ readonly type: 'ComponentInstance';
78
+ readonly plugin: '';
79
+ getComponent(): Component;
80
+ }
81
+
68
82
  interface UnknownElement
69
83
  extends WebflowElement,
70
84
  NoConfigurable,
@@ -4219,6 +4233,7 @@ interface SlotElement
4219
4233
  }
4220
4234
 
4221
4235
  declare type AnyElement =
4236
+ | ComponentElement
4222
4237
  | UnknownElement
4223
4238
  | DOMElement
4224
4239
  | AnimationElement
package/index.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  /// <reference path="./styles.d.ts" />
2
2
  /// <reference path="./pages.d.ts" />
3
3
  /// <reference path="./elements.d.ts" />
4
+ /// <reference path="./components.d.ts" />
5
+ /// <reference path="./variables.d.ts" />
4
6
 
5
7
  declare global {
6
8
  const webflow: WebflowApi;
@@ -10,6 +12,11 @@ interface WebflowApi {
10
12
  getSiteInfo(): Promise<{siteId: string; siteName: string; shortName: string}>;
11
13
  getSelectedElement(): Promise<null | AnyElement>;
12
14
  getMediaQuery(): Promise<BreakpointId>;
15
+ registerComponent(name: string, rootElement: AnyElement): Promise<Component>;
16
+ unregisterComponent(component: Component): Promise<void>;
17
+ getAllComponents(): Promise<Array<Component>>;
18
+ enterComponent(instance: ComponentElement): Promise<void>;
19
+ exitComponent(): Promise<void>;
13
20
  getRootElement(): Promise<null | AnyElement>;
14
21
  getAllElements(): Promise<Array<AnyElement>>;
15
22
  createStyle(name: string): Style;
@@ -23,6 +30,7 @@ interface WebflowApi {
23
30
  createString(text: string): StringElement;
24
31
  createDOM(tag: string): DOMElement;
25
32
  createHeading(tag: 1 | 2 | 3 | 4 | 5 | 6): HeadingElement;
33
+ getDefaultVariableCollection(): Promise<null | VariableCollection>;
26
34
  setExtensionSize(
27
35
  size: 'default' | 'comfortable' | 'large' | {width: number; height: number}
28
36
  ): Promise<null>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webflow/designer-extension-typings",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "description": "Typings for the Webflow Designer Extension API",
6
6
  "main": "",
package/styles-generated.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  // This file was automatically generated. See designer-extensions docs.
2
2
 
3
3
  declare type PropertyMap = {
4
- 'accent-color'?: string;
4
+ 'accent-color'?: string | ColorVariable;
5
5
  'align-content'?: string;
6
6
  'align-items'?: string;
7
7
  'align-self'?: string;
@@ -19,75 +19,75 @@ declare type PropertyMap = {
19
19
  'background-attachment'?: string;
20
20
  'background-blend-mode'?: string;
21
21
  'background-clip'?: string;
22
- 'background-color'?: string;
22
+ 'background-color'?: string | ColorVariable;
23
23
  'background-image'?: string;
24
24
  'background-origin'?: string;
25
25
  'background-position'?: string;
26
- 'background-position-x'?: string;
27
- 'background-position-y'?: string;
26
+ 'background-position-x'?: string | SizeVariable;
27
+ 'background-position-y'?: string | SizeVariable;
28
28
  'background-repeat'?: string;
29
29
  'background-size'?: string;
30
- 'block-size'?: string;
31
- 'border-block-end-color'?: string;
30
+ 'block-size'?: string | SizeVariable;
31
+ 'border-block-end-color'?: string | ColorVariable;
32
32
  'border-block-end-style'?: string;
33
- 'border-block-end-width'?: string;
34
- 'border-block-start-color'?: string;
33
+ 'border-block-end-width'?: string | SizeVariable;
34
+ 'border-block-start-color'?: string | ColorVariable;
35
35
  'border-block-start-style'?: string;
36
- 'border-block-start-width'?: string;
37
- 'border-bottom-color'?: string;
38
- 'border-bottom-left-radius'?: string;
39
- 'border-bottom-right-radius'?: string;
36
+ 'border-block-start-width'?: string | SizeVariable;
37
+ 'border-bottom-color'?: string | ColorVariable;
38
+ 'border-bottom-left-radius'?: string | SizeVariable;
39
+ 'border-bottom-right-radius'?: string | SizeVariable;
40
40
  'border-bottom-style'?: string;
41
- 'border-bottom-width'?: string;
41
+ 'border-bottom-width'?: string | SizeVariable;
42
42
  'border-collapse'?: string;
43
- 'border-end-end-radius'?: string;
44
- 'border-end-start-radius'?: string;
45
- 'border-image-outset'?: string;
43
+ 'border-end-end-radius'?: string | SizeVariable;
44
+ 'border-end-start-radius'?: string | SizeVariable;
45
+ 'border-image-outset'?: string | SizeVariable;
46
46
  'border-image-repeat'?: string;
47
47
  'border-image-slice'?: string;
48
48
  'border-image-source'?: string;
49
- 'border-image-width'?: string;
50
- 'border-inline-end-color'?: string;
49
+ 'border-image-width'?: string | SizeVariable;
50
+ 'border-inline-end-color'?: string | ColorVariable;
51
51
  'border-inline-end-style'?: string;
52
- 'border-inline-end-width'?: string;
53
- 'border-inline-start-color'?: string;
52
+ 'border-inline-end-width'?: string | SizeVariable;
53
+ 'border-inline-start-color'?: string | ColorVariable;
54
54
  'border-inline-start-style'?: string;
55
- 'border-inline-start-width'?: string;
56
- 'border-left-color'?: string;
55
+ 'border-inline-start-width'?: string | SizeVariable;
56
+ 'border-left-color'?: string | ColorVariable;
57
57
  'border-left-style'?: string;
58
- 'border-left-width'?: string;
59
- 'border-right-color'?: string;
58
+ 'border-left-width'?: string | SizeVariable;
59
+ 'border-right-color'?: string | ColorVariable;
60
60
  'border-right-style'?: string;
61
- 'border-right-width'?: string;
62
- 'border-start-end-radius'?: string;
63
- 'border-start-start-radius'?: string;
64
- 'border-top-color'?: string;
65
- 'border-top-left-radius'?: string;
66
- 'border-top-right-radius'?: string;
61
+ 'border-right-width'?: string | SizeVariable;
62
+ 'border-start-end-radius'?: string | SizeVariable;
63
+ 'border-start-start-radius'?: string | SizeVariable;
64
+ 'border-top-color'?: string | ColorVariable;
65
+ 'border-top-left-radius'?: string | SizeVariable;
66
+ 'border-top-right-radius'?: string | SizeVariable;
67
67
  'border-top-style'?: string;
68
- 'border-top-width'?: string;
69
- bottom?: string;
68
+ 'border-top-width'?: string | SizeVariable;
69
+ bottom?: string | SizeVariable;
70
70
  'box-shadow'?: string;
71
71
  'box-sizing'?: string;
72
72
  'break-after'?: string;
73
73
  'break-before'?: string;
74
74
  'break-inside'?: string;
75
75
  'caption-side'?: string;
76
- 'caret-color'?: string;
76
+ 'caret-color'?: string | ColorVariable;
77
77
  clear?: string;
78
78
  clip?: string;
79
79
  'clip-path'?: string;
80
80
  'clip-rule'?: string;
81
- color?: string;
81
+ color?: string | ColorVariable;
82
82
  'color-interpolation'?: string;
83
83
  'color-interpolation-filters'?: string;
84
84
  'column-count'?: string;
85
- 'column-gap'?: string;
86
- 'column-rule-color'?: string;
85
+ 'column-gap'?: string | SizeVariable;
86
+ 'column-rule-color'?: string | ColorVariable;
87
87
  'column-rule-style'?: string;
88
- 'column-rule-width'?: string;
88
+ 'column-rule-width'?: string | SizeVariable;
89
89
  'column-span'?: string;
90
- 'column-width'?: string;
90
+ 'column-width'?: string | SizeVariable;
91
91
  content?: string;
92
92
  cursor?: string;
93
93
  cx?: string;
@@ -100,18 +100,18 @@ declare type PropertyMap = {
100
100
  'fill-opacity'?: string;
101
101
  'fill-rule'?: string;
102
102
  filter?: string;
103
- 'flex-basis'?: string;
103
+ 'flex-basis'?: string | SizeVariable;
104
104
  'flex-direction'?: string;
105
105
  'flex-grow'?: string;
106
106
  'flex-shrink'?: string;
107
107
  'flex-wrap'?: string;
108
108
  float?: string;
109
- 'flood-color'?: string;
109
+ 'flood-color'?: string | ColorVariable;
110
110
  'flood-opacity'?: string;
111
- 'font-family'?: string;
111
+ 'font-family'?: string | FontFamilyVariable;
112
112
  'font-kerning'?: string;
113
113
  'font-optical-sizing'?: string;
114
- 'font-size'?: string;
114
+ 'font-size'?: string | SizeVariable;
115
115
  'font-stretch'?: string;
116
116
  'font-style'?: string;
117
117
  'font-variant-alternates'?: string;
@@ -127,133 +127,133 @@ declare type PropertyMap = {
127
127
  'grid-column-gap'?: string;
128
128
  'grid-column-start'?: string;
129
129
  'grid-row-end'?: string;
130
- 'grid-row-gap'?: string;
130
+ 'grid-row-gap'?: string | SizeVariable;
131
131
  'grid-row-start'?: string;
132
132
  'grid-template-areas'?: string;
133
133
  'grid-template-columns'?: string;
134
134
  'grid-template-rows'?: string;
135
- height?: string;
135
+ height?: string | SizeVariable;
136
136
  'image-orientation'?: string;
137
137
  'image-rendering'?: string;
138
- 'inline-size'?: string;
139
- 'inset-block-end'?: string;
140
- 'inset-block-start'?: string;
141
- 'inset-inline-end'?: string;
142
- 'inset-inline-start'?: string;
138
+ 'inline-size'?: string | SizeVariable;
139
+ 'inset-block-end'?: string | SizeVariable;
140
+ 'inset-block-start'?: string | SizeVariable;
141
+ 'inset-inline-end'?: string | SizeVariable;
142
+ 'inset-inline-start'?: string | SizeVariable;
143
143
  isolation?: string;
144
144
  'justify-content'?: string;
145
145
  'justify-items'?: string;
146
146
  'justify-self'?: string;
147
- left?: string;
148
- 'letter-spacing'?: string;
149
- 'lighting-color'?: string;
147
+ left?: string | SizeVariable;
148
+ 'letter-spacing'?: string | SizeVariable;
149
+ 'lighting-color'?: string | ColorVariable;
150
150
  'line-break'?: string;
151
- 'line-height'?: string;
151
+ 'line-height'?: string | SizeVariable;
152
152
  'list-style-image'?: string;
153
153
  'list-style-position'?: string;
154
154
  'list-style-type'?: string;
155
- 'margin-block-end'?: string;
156
- 'margin-block-start'?: string;
157
- 'margin-bottom'?: string;
158
- 'margin-inline-end'?: string;
159
- 'margin-inline-start'?: string;
160
- 'margin-left'?: string;
161
- 'margin-right'?: string;
162
- 'margin-top'?: string;
155
+ 'margin-block-end'?: string | SizeVariable;
156
+ 'margin-block-start'?: string | SizeVariable;
157
+ 'margin-bottom'?: string | SizeVariable;
158
+ 'margin-inline-end'?: string | SizeVariable;
159
+ 'margin-inline-start'?: string | SizeVariable;
160
+ 'margin-left'?: string | SizeVariable;
161
+ 'margin-right'?: string | SizeVariable;
162
+ 'margin-top'?: string | SizeVariable;
163
163
  'marker-end'?: string;
164
164
  'marker-mid'?: string;
165
165
  'marker-start'?: string;
166
166
  'mask-type'?: string;
167
- 'max-block-size'?: string;
168
- 'max-height'?: string;
169
- 'max-inline-size'?: string;
170
- 'max-width'?: string;
171
- 'min-block-size'?: string;
172
- 'min-height'?: string;
173
- 'min-inline-size'?: string;
174
- 'min-width'?: string;
167
+ 'max-block-size'?: string | SizeVariable;
168
+ 'max-height'?: string | SizeVariable;
169
+ 'max-inline-size'?: string | SizeVariable;
170
+ 'max-width'?: string | SizeVariable;
171
+ 'min-block-size'?: string | SizeVariable;
172
+ 'min-height'?: string | SizeVariable;
173
+ 'min-inline-size'?: string | SizeVariable;
174
+ 'min-width'?: string | SizeVariable;
175
175
  'mix-blend-mode'?: string;
176
176
  'object-fit'?: string;
177
177
  'object-position'?: string;
178
178
  'offset-anchor'?: string;
179
- 'offset-distance'?: string;
179
+ 'offset-distance'?: string | SizeVariable;
180
180
  'offset-path'?: string;
181
181
  'offset-rotate'?: string;
182
182
  opacity?: string;
183
183
  order?: string;
184
- 'outline-color'?: string;
185
- 'outline-offset'?: string;
184
+ 'outline-color'?: string | ColorVariable;
185
+ 'outline-offset'?: string | SizeVariable;
186
186
  'outline-style'?: string;
187
- 'outline-width'?: string;
187
+ 'outline-width'?: string | SizeVariable;
188
188
  'overflow-wrap'?: string;
189
189
  'overflow-x'?: string;
190
190
  'overflow-y'?: string;
191
191
  'overscroll-behavior-block'?: string;
192
192
  'overscroll-behavior-inline'?: string;
193
- 'padding-block-end'?: string;
194
- 'padding-block-start'?: string;
195
- 'padding-bottom'?: string;
196
- 'padding-inline-end'?: string;
197
- 'padding-inline-start'?: string;
198
- 'padding-left'?: string;
199
- 'padding-right'?: string;
200
- 'padding-top'?: string;
193
+ 'padding-block-end'?: string | SizeVariable;
194
+ 'padding-block-start'?: string | SizeVariable;
195
+ 'padding-bottom'?: string | SizeVariable;
196
+ 'padding-inline-end'?: string | SizeVariable;
197
+ 'padding-inline-start'?: string | SizeVariable;
198
+ 'padding-left'?: string | SizeVariable;
199
+ 'padding-right'?: string | SizeVariable;
200
+ 'padding-top'?: string | SizeVariable;
201
201
  'paint-order'?: string;
202
- perspective?: string;
202
+ perspective?: string | SizeVariable;
203
203
  'perspective-origin'?: string;
204
204
  'pointer-events'?: string;
205
205
  position?: string;
206
- r?: string;
206
+ r?: string | SizeVariable;
207
207
  resize?: string;
208
- right?: string;
208
+ right?: string | SizeVariable;
209
209
  rotate?: string;
210
- 'row-gap'?: string;
211
- rx?: string;
212
- ry?: string;
210
+ 'row-gap'?: string | SizeVariable;
211
+ rx?: string | SizeVariable;
212
+ ry?: string | SizeVariable;
213
213
  scale?: string;
214
214
  'scroll-behavior'?: string;
215
- 'scroll-margin-block-end'?: string;
216
- 'scroll-margin-block-start'?: string;
217
- 'scroll-margin-inline-end'?: string;
218
- 'scroll-margin-inline-start'?: string;
219
- 'scroll-padding-block-end'?: string;
220
- 'scroll-padding-block-start'?: string;
221
- 'scroll-padding-inline-end'?: string;
222
- 'scroll-padding-inline-start'?: string;
215
+ 'scroll-margin-block-end'?: string | SizeVariable;
216
+ 'scroll-margin-block-start'?: string | SizeVariable;
217
+ 'scroll-margin-inline-end'?: string | SizeVariable;
218
+ 'scroll-margin-inline-start'?: string | SizeVariable;
219
+ 'scroll-padding-block-end'?: string | SizeVariable;
220
+ 'scroll-padding-block-start'?: string | SizeVariable;
221
+ 'scroll-padding-inline-end'?: string | SizeVariable;
222
+ 'scroll-padding-inline-start'?: string | SizeVariable;
223
223
  'shape-image-threshold'?: string;
224
- 'shape-margin'?: string;
224
+ 'shape-margin'?: string | SizeVariable;
225
225
  'shape-outside'?: string;
226
226
  'shape-rendering'?: string;
227
- 'stop-color'?: string;
227
+ 'stop-color'?: string | ColorVariable;
228
228
  'stop-opacity'?: string;
229
- stroke?: string;
229
+ stroke?: string | ColorVariable;
230
230
  'stroke-dasharray'?: string;
231
- 'stroke-dashoffset'?: string;
231
+ 'stroke-dashoffset'?: string | SizeVariable;
232
232
  'stroke-linecap'?: string;
233
233
  'stroke-linejoin'?: string;
234
234
  'stroke-miterlimit'?: string;
235
235
  'stroke-opacity'?: string;
236
- 'stroke-width'?: string;
237
- 'tab-size'?: string;
236
+ 'stroke-width'?: string | SizeVariable;
237
+ 'tab-size'?: string | SizeVariable;
238
238
  'table-layout'?: string;
239
239
  'text-align'?: string;
240
240
  'text-align-last'?: string;
241
241
  'text-anchor'?: string;
242
242
  'text-decoration'?: string;
243
- 'text-decoration-color'?: string;
243
+ 'text-decoration-color'?: string | ColorVariable;
244
244
  'text-decoration-line'?: string;
245
245
  'text-decoration-skip-ink'?: string;
246
246
  'text-decoration-style'?: string;
247
- 'text-emphasis-color'?: string;
247
+ 'text-emphasis-color'?: string | ColorVariable;
248
248
  'text-emphasis-position'?: string;
249
249
  'text-emphasis-style'?: string;
250
- 'text-indent'?: string;
250
+ 'text-indent'?: string | SizeVariable;
251
251
  'text-overflow'?: string;
252
252
  'text-rendering'?: string;
253
253
  'text-shadow'?: string;
254
254
  'text-transform'?: string;
255
255
  'text-underline-position'?: string;
256
- top?: string;
256
+ top?: string | SizeVariable;
257
257
  'touch-action'?: string;
258
258
  transform?: string;
259
259
  'transform-origin'?: string;
@@ -262,24 +262,24 @@ declare type PropertyMap = {
262
262
  'transition-duration'?: string;
263
263
  'transition-property'?: string;
264
264
  'transition-timing-function'?: string;
265
- translate?: string;
265
+ translate?: string | SizeVariable;
266
266
  'unicode-bidi'?: string;
267
267
  'vector-effect'?: string;
268
268
  'vertical-align'?: string;
269
269
  visibility?: string;
270
270
  'white-space'?: string;
271
- width?: string;
271
+ width?: string | SizeVariable;
272
272
  'will-change'?: string;
273
273
  'word-break'?: string;
274
- 'word-spacing'?: string;
274
+ 'word-spacing'?: string | SizeVariable;
275
275
  'writing-mode'?: string;
276
- x?: string;
277
- y?: string;
276
+ x?: string | SizeVariable;
277
+ y?: string | SizeVariable;
278
278
  'z-index'?: string;
279
279
  '-webkit-line-clamp'?: string;
280
- '-webkit-text-fill-color'?: string;
281
- '-webkit-text-stroke-color'?: string;
282
- '-webkit-text-stroke-width'?: string;
280
+ '-webkit-text-fill-color'?: string | ColorVariable;
281
+ '-webkit-text-stroke-color'?: string | ColorVariable;
282
+ '-webkit-text-stroke-width'?: string | SizeVariable;
283
283
  };
284
284
 
285
285
  declare type StyleProperty =
package/variables.d.ts ADDED
@@ -0,0 +1,73 @@
1
+ interface ColorVariable {
2
+ readonly id: VariableId;
3
+ readonly type: 'Color';
4
+ getName(): Promise<null | string>;
5
+ setName(newName: string): Promise<void>;
6
+ set(value: ColorValue | ColorVariable): Promise<void>;
7
+ get(): Promise<null | ColorValue | ColorVariable>;
8
+ remove(): Promise<boolean>;
9
+ }
10
+
11
+ interface SizeVariable {
12
+ readonly id: VariableId;
13
+ readonly type: 'Size';
14
+ getName(): Promise<null | string>;
15
+ setName(newName: string): Promise<void>;
16
+ set(value: SizeValue | SizeVariable): Promise<void>;
17
+ get(): Promise<null | SizeValue | SizeVariable>;
18
+ remove(): Promise<boolean>;
19
+ }
20
+
21
+ interface FontFamilyVariable {
22
+ readonly id: VariableId;
23
+ readonly type: 'FontFamily';
24
+ getName(): Promise<null | string>;
25
+ setName(newName: string): Promise<void>;
26
+ set(value: FontFamilyValue | FontFamilyVariable): Promise<void>;
27
+ get(): Promise<null | FontFamilyValue | FontFamilyVariable>;
28
+ remove(): Promise<boolean>;
29
+ }
30
+
31
+ declare type Variable = ColorVariable | SizeVariable | FontFamilyVariable;
32
+
33
+ interface VariableCollection {
34
+ readonly id: VariableCollectionId;
35
+ getName(): Promise<null | string>;
36
+ getVariable(id: VariableId): Promise<null | Variable>;
37
+ getVariableByName(name: string): Promise<null | Variable>;
38
+ getAllVariables(): Promise<Array<Variable>>;
39
+ createColorVariable(
40
+ name: string,
41
+ value: string | ColorVariable
42
+ ): Promise<null | ColorVariable>;
43
+ createSizeVariable(
44
+ name: string,
45
+ value: SizeValue | SizeVariable
46
+ ): Promise<null | SizeVariable>;
47
+ createFontFamilyVariable(
48
+ name: string,
49
+ value: string | FontFamilyVariable
50
+ ): Promise<null | FontFamilyVariable>;
51
+ }
52
+
53
+ declare type VariableCollectionId = string;
54
+ declare type VariableId = string;
55
+ declare type ColorValue = string;
56
+ declare type SizeValue = {value: number; unit: SizeUnit};
57
+ declare type FontFamilyValue = string;
58
+
59
+ declare type SizeUnit =
60
+ | 'px'
61
+ | 'em'
62
+ | 'rem'
63
+ | 'vh'
64
+ | 'vw'
65
+ | 'dvh'
66
+ | 'dvw'
67
+ | 'lvh'
68
+ | 'lvw'
69
+ | 'svh'
70
+ | 'svw'
71
+ | 'vmax'
72
+ | 'vmin'
73
+ | 'ch';