Skip to content

Commit e1e195c

Browse files
elanalynnelanalynn
committed
Add shouldRender method to ui-extensions
1 parent 3fedcb5 commit e1e195c

File tree

7 files changed

+361
-0
lines changed

7 files changed

+361
-0
lines changed

‎.changeset/healthy-cups-wash.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/ui-extensions': minor
3+
---
4+
5+
Add shouldRender method to ui-extensions

‎packages/ui-extensions/src/surfaces/admin.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ export * from './admin/api';
22
export * from './admin/components';
33
export * from './admin/extension-targets';
44
export * from './admin/extension';
5+
export * from './admin/shouldRender';
56
export * from './admin/shared';
67
export * from './admin/globals';

‎packages/ui-extensions/src/surfaces/admin/api/should-render/should-render.doc.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
3+
const data: ReferenceEntityTemplateSchema = {
4+
name: 'ShouldRender API',
5+
description: 'This API is available to all shouldRender extension types.',
6+
isVisualComponent: false,
7+
type: 'API',
8+
definitions: [
9+
{
10+
title: 'ShouldRenderApi',
11+
description: '',
12+
type: 'ShouldRenderApi',
13+
},
14+
],
15+
category: 'API',
16+
related: [],
17+
};
18+
19+
export default data;

‎packages/ui-extensions/src/surfaces/admin/api/should-render/should-render.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type {StandardApi} from '../standard/standard';
2+
import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
3+
import type {Data} from '../shared';
4+
5+
export interface ShouldRenderApi<ExtensionTarget extends AnyExtensionTarget>
6+
extends StandardApi<ExtensionTarget> {
7+
/**
8+
* Information about the currently viewed or selected items.
9+
*/
10+
data: Data;
11+
}

‎packages/ui-extensions/src/surfaces/admin/should-render-targets.ts

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
import type {RunnableExtension} from '../../extension';
2+
3+
import {ShouldRenderApi} from './api/should-render/should-render';
4+
5+
interface ShouldRenderOutput {
6+
display: boolean;
7+
}
8+
9+
export interface ExtensionTargets {
10+
// Admin action shouldRender targets
11+
/**
12+
* Controls the render state of an admin action extension in the product details page. Open this extension from the "More Actions" menu.
13+
*/
14+
'admin.product-details.action.render': RunnableExtension<
15+
ShouldRenderApi<'admin.product-details.action.render'>,
16+
ShouldRenderOutput
17+
>;
18+
19+
/**
20+
* Controls the render state of an admin action extension in the catalog details page. Open this extension from the "More Actions" menu.
21+
*/
22+
'admin.catalog-details.action.render': RunnableExtension<
23+
ShouldRenderApi<'admin.catalog-details.action.render'>,
24+
ShouldRenderOutput
25+
>;
26+
27+
/**
28+
* Controls the render state of an admin action extension in the company details page. Open this extension from the "More Actions" menu.
29+
*/
30+
'admin.company-details.action.render': RunnableExtension<
31+
ShouldRenderApi<'admin.company-details.action.render'>,
32+
ShouldRenderOutput
33+
>;
34+
35+
/**
36+
* Controls the render state of an admin action extension in the gift card details page. Open this extension from the "More Actions" menu.
37+
*/
38+
'admin.gift-card-details.action.render': RunnableExtension<
39+
ShouldRenderApi<'admin.gift-card-details.action.render'>,
40+
ShouldRenderOutput
41+
>;
42+
43+
/**
44+
* Controls the render state of an admin action extension in the order details page. Open this extension from the "More Actions" menu.
45+
*/
46+
'admin.order-details.action.render': RunnableExtension<
47+
ShouldRenderApi<'admin.order-details.action.render'>,
48+
ShouldRenderOutput
49+
>;
50+
51+
/**
52+
* Controls the render state of an admin action extension in the customer details page. Open this extension from the "More Actions" menu.
53+
*/
54+
'admin.customer-details.action.render': RunnableExtension<
55+
ShouldRenderApi<'admin.customer-details.action.render'>,
56+
ShouldRenderOutput
57+
>;
58+
59+
/**
60+
* Controls the render state of an admin action extension in the customer segment details page. Open this extension from the "Use segment" button.
61+
*/
62+
'admin.customer-segment-details.action.render': RunnableExtension<
63+
ShouldRenderApi<'admin.customer-segment-details.action.render'>,
64+
ShouldRenderOutput
65+
>;
66+
67+
/**
68+
* Controls the render state of an admin action extension in the product index page. Open this extension from the "More Actions" menu.
69+
*/
70+
'admin.product-index.action.render': RunnableExtension<
71+
ShouldRenderApi<'admin.product-index.action.render'>,
72+
ShouldRenderOutput
73+
>;
74+
75+
/**
76+
* Controls the render state of an admin action extension in the order index page. Open this extension from the "More Actions" menu.
77+
*/
78+
'admin.order-index.action.render': RunnableExtension<
79+
ShouldRenderApi<'admin.order-index.action.render'>,
80+
ShouldRenderOutput
81+
>;
82+
83+
/**
84+
* Controls the render state of an admin action extension in the customer index page. Open this extension from the "More Actions" menu.
85+
*/
86+
'admin.customer-index.action.render': RunnableExtension<
87+
ShouldRenderApi<'admin.customer-index.action.render'>,
88+
ShouldRenderOutput
89+
>;
90+
91+
/**
92+
* Controls the render state of an admin action extension in the discount index page. Open this extension from the "More Actions" menu.
93+
*/
94+
'admin.discount-index.action.render': RunnableExtension<
95+
ShouldRenderApi<'admin.discount-index.action.render'>,
96+
ShouldRenderOutput
97+
>;
98+
99+
/**
100+
* Controls the render state of an admin action extension in the collection details page. Open this extension from the "More Actions" menu.
101+
*/
102+
'admin.collection-details.action.render': RunnableExtension<
103+
ShouldRenderApi<'admin.collection-details.action.render'>,
104+
ShouldRenderOutput
105+
>;
106+
107+
/**
108+
* Controls the render state of an admin action extension in the collection index page. Open this extension from the "More Actions" menu.
109+
*/
110+
'admin.collection-index.action.render': RunnableExtension<
111+
ShouldRenderApi<'admin.collection-index.action.render'>,
112+
ShouldRenderOutput
113+
>;
114+
115+
/**
116+
* Controls the render state of an admin action extension in the abandoned checkout page. Open this extension from the "More Actions" menu.
117+
*/
118+
'admin.abandoned-checkout-details.action.render': RunnableExtension<
119+
ShouldRenderApi<'admin.abandoned-checkout-details.action.render'>,
120+
ShouldRenderOutput
121+
>;
122+
123+
/**
124+
* Controls the render state of an admin action extension in the product variant details page. Open this extension from the "More Actions" menu.
125+
*/
126+
'admin.product-variant-details.action.render': RunnableExtension<
127+
ShouldRenderApi<'admin.product-variant-details.action.render'>,
128+
ShouldRenderOutput
129+
>;
130+
131+
/**
132+
* Controls the render state of an admin action extension in the draft order details page. Open this extension from the "More Actions" menu.
133+
*/
134+
'admin.draft-order-details.action.render': RunnableExtension<
135+
ShouldRenderApi<'admin.draft-order-details.action.render'>,
136+
ShouldRenderOutput
137+
>;
138+
139+
/**
140+
* Controls the render state of an admin action extension in the draft orders page. Open this extension from the "More Actions" menu.
141+
*/
142+
'admin.draft-order-index.action.render': RunnableExtension<
143+
ShouldRenderApi<'admin.draft-order-index.action.render'>,
144+
ShouldRenderOutput
145+
>;
146+
147+
/**
148+
* Controls the render state of an admin action extension in the discount details page. Open this extension from the "More Actions" menu.
149+
*/
150+
'admin.discount-details.action.render': RunnableExtension<
151+
ShouldRenderApi<'admin.discount-details.action.render'>,
152+
ShouldRenderOutput
153+
>;
154+
155+
/**
156+
* Controls the render state of an admin action extension in the order fulfilled card. Open this extension from the "3-dot" menu inside the order fulfilled card.
157+
* Note: This extension will only be visible on orders which were fulfilled by your app.
158+
*/
159+
'admin.order-fulfilled-card.action.render': RunnableExtension<
160+
ShouldRenderApi<'admin.order-fulfilled-card.action.render'>,
161+
ShouldRenderOutput
162+
>;
163+
164+
// Admin bulk action shouldRender targets
165+
166+
/**
167+
* Controls the render state of an admin action extension in the product index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime.
168+
*/
169+
'admin.product-index.selection-action.render': RunnableExtension<
170+
ShouldRenderApi<'admin.product-index.selection-action.render'>,
171+
ShouldRenderOutput
172+
>;
173+
174+
/**
175+
* Controls the render state of an admin action extension in the order index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime.
176+
*/
177+
'admin.order-index.selection-action.render': RunnableExtension<
178+
ShouldRenderApi<'admin.order-index.selection-action.render'>,
179+
ShouldRenderOutput
180+
>;
181+
182+
/**
183+
* Controls the render state of an admin action extension in the customer index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime.
184+
*/
185+
'admin.customer-index.selection-action.render': RunnableExtension<
186+
ShouldRenderApi<'admin.customer-index.selection-action.render'>,
187+
ShouldRenderOutput
188+
>;
189+
190+
/**
191+
* Controls the render state of an admin action extension in the draft order page when multiple resources are selected. Open this extension from the "3-dot" menu.
192+
*/
193+
'admin.draft-order-index.selection-action.render': RunnableExtension<
194+
ShouldRenderApi<'admin.draft-order-index.selection-action.render'>,
195+
ShouldRenderOutput
196+
>;
197+
198+
// Admin print action and bulk print action shouldRender targets
199+
200+
/**
201+
* Controls the render state of an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime.
202+
*/
203+
'admin.order-details.print-action.render': RunnableExtension<
204+
ShouldRenderApi<'admin.order-details.print-action.render'>,
205+
ShouldRenderOutput
206+
>;
207+
208+
/**
209+
* Controls the render state of an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime.
210+
*/
211+
'admin.product-details.print-action.render': RunnableExtension<
212+
ShouldRenderApi<'admin.product-details.print-action.render'>,
213+
ShouldRenderOutput
214+
>;
215+
216+
/**
217+
* Controls the render state of an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime.
218+
*/
219+
'admin.order-index.selection-print-action.render': RunnableExtension<
220+
ShouldRenderApi<'admin.order-index.selection-print-action.render'>,
221+
ShouldRenderOutput
222+
>;
223+
224+
/**
225+
* Controls the render state of an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime.
226+
*/
227+
'admin.product-index.selection-print-action.render': RunnableExtension<
228+
ShouldRenderApi<'admin.product-index.selection-print-action.render'>,
229+
ShouldRenderOutput
230+
>;
231+
}
232+
233+
export type ExtensionTarget = keyof ExtensionTargets;
234+
235+
export type ExtensionForExtensionTarget<T extends ExtensionTarget> =
236+
ExtensionTargets[T];
237+
238+
/**
239+
* For a given extension target, returns the value that is expected to be
240+
* returned by that extension target’s callback type.
241+
*/
242+
export type ReturnTypeForExtension<ID extends keyof ExtensionTargets> =
243+
ReturnType<ExtensionTargets[ID]>;
244+
245+
/**
246+
* For a given extension target, returns the tuple of arguments that would
247+
* be provided to that extension target’s callback type.
248+
*/
249+
export type ArgumentsForExtension<ID extends keyof ExtensionTargets> =
250+
Parameters<ExtensionTargets[ID]>;
251+
252+
/**
253+
* A union type containing all of the extension targets that follow the pattern of
254+
* accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-dom/tree/remote-ui/packages/core)
255+
* and an additional `api` argument, and using those arguments to render
256+
* UI.
257+
*/
258+
export type RenderExtensionTarget = {
259+
[ID in keyof ExtensionTargets]: ExtensionTargets[ID] extends RunnableExtension<
260+
any,
261+
any
262+
>
263+
? ID
264+
: never;
265+
}[keyof ExtensionTargets];
266+
267+
/**
268+
* A mapping of each “render extension” name to its callback type.
269+
*/
270+
export type RenderExtensions = {
271+
[ID in RenderExtensionTarget]: ExtensionTargets[ID];
272+
};
273+
274+
type ExtractedApiFromRenderExtension<T> = T extends RunnableExtension<
275+
infer Api,
276+
any
277+
>
278+
? Api
279+
: never;
280+
281+
type ExtractedAllowedComponentsFromRenderExtension<T> =
282+
T extends RunnableExtension<any, infer Components> ? Components : never;
283+
284+
/**
285+
* For a given rendering extension target, returns the type of the API that the
286+
* extension will receive at runtime. This API type is the second argument to
287+
* the callback for that extension target. The first callback for all of the rendering
288+
* extension targets each receive a `RemoteRoot` object.
289+
*/
290+
export type ApiForRenderExtension<ID extends keyof RenderExtensions> =
291+
ExtractedApiFromRenderExtension<RenderExtensions[ID]>;
292+
293+
/**
294+
* For a given rendering extension target, returns the UI components that the
295+
* extension target supports.
296+
*/
297+
export type AllowedComponentsForRenderExtension<
298+
ID extends keyof RenderExtensions,
299+
> = ExtractedAllowedComponentsFromRenderExtension<RenderExtensions[ID]>;

‎packages/ui-extensions/src/surfaces/admin/shouldRender.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {createShouldRenderRegistrationFunction} from '../../utilities/shouldRenderRegistration';
2+
3+
import type {ExtensionTargets} from './should-render-targets';
4+
5+
export const shouldRender =
6+
createShouldRenderRegistrationFunction<ExtensionTargets>();

‎packages/ui-extensions/src/utilities/shouldRenderRegistration.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export interface ShouldRenderRegistrationFunction<ExtensionPoints> {
2+
<Target extends keyof ExtensionPoints>(
3+
target: Target,
4+
callback: ExtensionPoints[Target],
5+
): ExtensionPoints[Target];
6+
}
7+
8+
export function createShouldRenderRegistrationFunction<
9+
ExtensionPoints,
10+
>(): ShouldRenderRegistrationFunction<ExtensionPoints> {
11+
const extensionWrapper: ShouldRenderRegistrationFunction<ExtensionPoints> = (
12+
target,
13+
callback,
14+
) => {
15+
(globalThis as any).shopify?.run(target, callback);
16+
return callback;
17+
};
18+
19+
return extensionWrapper;
20+
}

0 commit comments

Comments
 (0)