@arcgis/lumina 4.32.0-next.7 → 4.32.0-next.72

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.
@@ -0,0 +1,421 @@
1
+ /**
2
+ * This reference directive is removed by tsup at compile time. It is only
3
+ * needed to correctly type-check this package. For consumers of this package,
4
+ * they should have an `./src/lumina.ts` file like so:
5
+ * ```ts
6
+ * /// <reference types="@arcgis/lumina/typings" />
7
+ * ```
8
+ */
9
+ import type { TemplateResult } from "lit-html";
10
+ import type { DirectiveResult } from "lit-html/directive.js";
11
+ import type { HTMLElementTags, HTMLAttributes, GlobalEventHandlersCamelCase, SvgElementTags, DOMAttributes, AriaAttributes } from "./generatedTypes";
12
+ import type { CustomAttributes } from "./baseTypes";
13
+ /**
14
+ * The "h" namespace is used to import JSX types for elements and attributes.
15
+ * It is imported in order to avoid conflicting global JSX issues.
16
+ */
17
+ export declare namespace h {
18
+ export function h(sel: any, data?: any, text?: any): TemplateResult;
19
+ export type { LuminaJsx as JSX };
20
+ }
21
+ /**
22
+ * The references to this function are removed at build time.
23
+ */
24
+ export declare const Fragment: (props: {
25
+ children?: JsxNode;
26
+ }) => TemplateResult;
27
+ /**
28
+ * @private
29
+ * The references to this function are removed at build time. You do not need
30
+ * to import it directly
31
+ */
32
+ export declare function jsx(type: string, props: unknown, key?: unknown): JsxNode;
33
+ /**
34
+ * @private
35
+ * The references to this function are removed at build time. You do not need
36
+ * to import it directly
37
+ */
38
+ export declare function jsxs(type: string, props: unknown, key?: unknown): JsxNode;
39
+ /**
40
+ * The JSX to lit-html conversion has a heuristic to determine whether a prop
41
+ * should be converted to a property or attribute at runtime. In cases where
42
+ * that heuristic is not sufficient, you can use the `bindAttribute()` function to
43
+ * explicitly tell the conversion to treat the prop as an attribute.
44
+ *
45
+ * This function call will be erased at build-time, thus it has no runtime
46
+ * impact. But that also means you should not call this function anywhere other
47
+ * than at the top level of a JSX prop value
48
+ *
49
+ * @example
50
+ * ```tsx
51
+ * <my-component
52
+ * name={bindAttribute("Pass name as attribute rather than property")}
53
+ * />
54
+ * ```
55
+ *
56
+ * Will be converted at build time into:
57
+ * ```ts
58
+ * html`<my-component name="Pass name as attribute rather than property"></my-component>`
59
+ * ```
60
+ *
61
+ * @remarks
62
+ * If you often encounter cases where the JSX to lit-html incorrectly converts
63
+ * the prop to a property necessitating the use of `bindAttribute()`, please open
64
+ * an issue for Lumina.
65
+ */
66
+ export declare const bindAttribute: <T>(value: T) => T;
67
+ /**
68
+ * The JSX to lit-html conversion has a heuristic to determine whether a prop
69
+ * should be converted to a property, attribute or boolean attribute at runtime.
70
+ * In cases where that heuristic is not sufficient, you can use the
71
+ * `bindBooleanAttribute()` function to explicitly tell the conversion to treat the
72
+ * prop as a boolean attribute.
73
+ *
74
+ * This function call will be erased at build-time, thus it has no runtime
75
+ * impact. But that also means you should not call this function anywhere other
76
+ * than at the top level of a JSX prop value
77
+ *
78
+ * @see https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
79
+ *
80
+ * @example
81
+ * ```tsx
82
+ * <my-component
83
+ * checked={bindBooleanAttribute(myBoolean)}
84
+ * />
85
+ * ```
86
+ *
87
+ * Will be converted at build time into:
88
+ * ```ts
89
+ * html`<my-component ?checked=${myBoolean}></my-component>`
90
+ * ```
91
+ *
92
+ * @remarks
93
+ * If you often encounter cases where the JSX to lit-html incorrectly converts
94
+ * the prop necessitating the use of `bindBooleanAttribute()`, please open
95
+ * an issue for Lumina.
96
+ */
97
+ export declare const bindBooleanAttribute: <T>(value: T) => T;
98
+ /**
99
+ * The JSX to lit-html conversion has a heuristic to determine whether a prop
100
+ * should be converted to a property or attribute at runtime. In cases where
101
+ * that heuristic is not sufficient, you can use the `bindProperty()` function to
102
+ * explicitly tell the conversion to treat the prop as a property.
103
+ *
104
+ * This function call will be erased at build-time, thus it has no runtime
105
+ * impact. But that also means you should not call this function anywhere other
106
+ * than at the top level of a JSX prop value
107
+ *
108
+ * @example
109
+ * ```tsx
110
+ * <my-component
111
+ * my-prop={bindProperty("Pass my-prop as a property rather than attribute")}
112
+ * />
113
+ * ```
114
+ *
115
+ * Will be converted at build time into:
116
+ * ```ts
117
+ * html`<my-component .my-prop="Pass my-prop as a property rather than attribute"></my-component>`
118
+ * ```
119
+ *
120
+ * @remarks
121
+ * If you often encounter cases where the JSX to lit-html incorrectly converts
122
+ * the prop to an attribute necessitating the use of `bindProperty()`, please open
123
+ * an issue for Lumina.
124
+ *
125
+ * @remarks
126
+ * This function is not named `property()` because that is already taken by
127
+ * Lit's \@property() decorator
128
+ */
129
+ export declare const bindProperty: <T>(value: T) => T;
130
+ /**
131
+ * The `bindEvent()` function lets you customize the event binding behavior by
132
+ * providing options like passive, capture, once and other options that you
133
+ * normally can provide to `addEventListener`
134
+ *
135
+ * This function call will be erased at build-time, thus it has no runtime
136
+ * impact.
137
+ *
138
+ * @example
139
+ * ```tsx
140
+ * <my-component
141
+ * onScroll={bindEvent({ handleEvent: console.log, passive:true })}
142
+ * />
143
+ * ```tsx
144
+ *
145
+ * ```ts
146
+ * html`<my-component onScroll=${{ handleEvent: console.log, passive:true }}></my-component>`
147
+ * ```
148
+ *
149
+ * @remarks
150
+ * This function is a _JSX to lit-html_ adaptation of the Lit's event listener
151
+ * customization syntax.
152
+ * See https://lit.dev/docs/components/events/#event-options-decorator
153
+ *
154
+ *
155
+ * @remarks
156
+ * This function is not named `event` because there is a legacy `window.event`
157
+ * global that was interfering with auto-imports of this function.
158
+ */
159
+ export declare const bindEvent: <T>(descriptor: T | (AddEventListenerOptions & {
160
+ handleEvent: T;
161
+ })) => T;
162
+ export type JsxNode = DirectiveResult<any> | JsxNodeArray | Node | TemplateResult | boolean | number | (NonNullable<unknown> & string) | null | undefined;
163
+ interface JsxNodeArray extends Array<JsxNode> {
164
+ }
165
+ /**
166
+ * By not requiring to have some sort of typings generation watcher to run
167
+ * in the background and generate types for the components based on the
168
+ * exposed properties, we improve developer experience a lot.
169
+ * (no need to run a watcher in the background, no need to commit an
170
+ * autogenerated file, fewer merge conflicts...)
171
+ *
172
+ * The trade-off is that we can't tell in TypeScript if component's public
173
+ * properties have a `@property()` decorator or not, so have to expose them
174
+ * all. To reduce the noise, we exclude some properties that we know are
175
+ * definitely not props (as they are coming from LitElement)
176
+ *
177
+ * An ESLint rule that mandates all properties to be private/protected or else
178
+ * to have a `@property()` decorator would mitigate the issue to a large
179
+ * extent.
180
+ *
181
+ * This does not impact the typings we publish - at build time we have all the
182
+ * information and can generate the typings that expose only the actual
183
+ * properties component declared.
184
+ *
185
+ * @remarks
186
+ * Do not exclude "manager" and "componentOnReady" since these properties are
187
+ * available both on lazy and non-lazy instance.
188
+ */
189
+ type ExcludedProperties = "addController" | "attributeChangedCallback" | "connectedCallback" | "disconnectedCallback" | "el" | "hasUpdated" | "isUpdatePending" | "listen" | "load" | "loaded" | "removeController" | "render" | "renderOptions" | "renderRoot" | "requestUpdate" | "updateComplete" | "updated" | "willUpdate";
190
+ /**
191
+ * this.el property on a component only has the public properties of the
192
+ * component. All internal methods, properties, as well as LitElement methods
193
+ * are excluded. This type approximates what the public API of the component
194
+ * looks like.
195
+ *
196
+ * @example
197
+ * Usually, you don't need to use this type directly. If you have an
198
+ * `ArcgisCounter` element, you can get its el type by using
199
+ * `ArcgisCounter["el"]`
200
+ *
201
+ * @remarks
202
+ * By using Omit<>, TypeScript also "forgets" all private members of the
203
+ * passed in type, which is convenient for us.
204
+ */
205
+ export type ToElement<Component> = Omit<Component, ExcludedProperties>;
206
+ /**
207
+ * Utility type for getting the JSX prop types for a given component. In particular:
208
+ *
209
+ * - Excludes LitElement properties that should not be exposed to the end-user
210
+ * - Converts event .emit() properties into event callbacks
211
+ * - Replaces original HTMLElement property typings with the ones we provide for
212
+ * greater type-safety and control
213
+ * - For native events listeners, makes currentTarget equal to the component's
214
+ * HTML instance
215
+ *
216
+ * We mark all component properties as optional because there is no easy
217
+ * way for us to differentiate between public component properties and just
218
+ * regular members that don't have `@property()` decorator (presence or
219
+ * absence of decorator does not change the type). Thus, if we don't mark all
220
+ * properties as optional, TypeScript will force us to provide a value for all
221
+ * methods, and regular properties component may have.
222
+ */
223
+ export type ToJsx<Component extends {
224
+ el: unknown;
225
+ }> = HTMLAttributes<Component["el"]> & Partial<Omit<Component, ExcludedProperties | keyof HTMLElement | keyof RemapEvents<Component>>> & RemapEvents<Component>;
226
+ /**
227
+ * From event emitters create event listener callbacks
228
+ */
229
+ type RemapEvents<Component extends {
230
+ el: unknown;
231
+ }> = {
232
+ [Key in keyof Component as `on${Key & string}`]?: unknown extends Component[Key] ? never : Component[Key] extends {
233
+ emit: (...rest: never[]) => infer PayloadType;
234
+ } ? (event: PayloadType & {
235
+ currentTarget: Component["el"];
236
+ target: Component["el"];
237
+ }) => void : never;
238
+ };
239
+ /**
240
+ * This interface will be automatically extended in src/lumina.ts files to add
241
+ * typings for Stencil elements usages in Lumina. You do not need to manually
242
+ * extend this interface.
243
+ *
244
+ * @private
245
+ * @example
246
+ * ```ts
247
+ * import type { JSX as CalciteJSX } from "@esri/calcite-components/dist/types/components";
248
+ * import type { JSX as CommonComponentsJsx } from "@arcgis/common-components/dist/types/components";
249
+ *
250
+ * declare module "@arcgis/lumina" {
251
+ * interface ImportStencilElements
252
+ * extends CalciteJSX.IntrinsicElements,
253
+ * CommonComponentsJsx.IntrinsicElements {
254
+ * }
255
+ * }
256
+ * ```
257
+ */
258
+ export interface ImportStencilElements {
259
+ }
260
+ /**
261
+ * Get the type of all events for a given component. Includes native DOM events
262
+ * and custom events.
263
+ *
264
+ * @example
265
+ * ```tsx
266
+ * render() {
267
+ * return <arcgis-map onArcgisViewClick={this._handleViewClick} />;
268
+ * }
269
+ * _handleViewClick(event: ToEvents<HTMLArcgisMapElement>["arcgisViewClick"]) {
270
+ * // event.detail
271
+ * // event.currentTarget
272
+ * }
273
+ * ```
274
+ *
275
+ * @remarks
276
+ * This helper is intended to be used on components defined within the same
277
+ * package. For external components, you can use
278
+ * `HTMLArcgisMapElement["arcgisViewClick"]` directly, without need for
279
+ * `ToEvents<>`.
280
+ *
281
+ * @remarks
282
+ * Alternative implementation of this type that is simpler, and potentially
283
+ * more performant, but looses "go to definition" information.
284
+ *
285
+ * ```tsx
286
+ * export type ToEvents<Component extends { el: unknown }> = {
287
+ * [Key in keyof ToJsx<Component> as Key extends `on${infer EventName}`
288
+ * ? Uncapitalize<EventName>
289
+ * : never]-?: ListenerToPayloadType<ToJsx<Component>[Key]>;
290
+ * };
291
+ *
292
+ * type ListenerToPayloadType<Listener> = Listener extends (event: infer EventType) => unknown ? EventType : never;
293
+ * ```
294
+ *
295
+ * TypeScript issues that may fix this:
296
+ * - https://github.com/microsoft/TypeScript/issues/49909
297
+ * - https://github.com/microsoft/TypeScript/issues/50715
298
+ */
299
+ export type ToEvents<Component> = GlobalEventTypes<MaybeEl<Component>> & {
300
+ [Key in keyof Component as ListenerToPayloadType<Component[Key]> extends BaseEvent ? Key : never]-?: ListenerToPayloadType<Component[Key]> & {
301
+ currentTarget: MaybeEl<Component>;
302
+ target: MaybeEl<Component>;
303
+ };
304
+ };
305
+ type MaybeEl<Component> = Component extends {
306
+ el: unknown;
307
+ } ? Component["el"] : Component;
308
+ export interface TargetedEvent<Target = EventTarget | null, Payload = void> extends BaseEvent {
309
+ /**
310
+ * Returns any custom data event was created with.
311
+ *
312
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
313
+ */
314
+ readonly detail: Payload;
315
+ /**
316
+ * Returns the object whose event listener's callback is currently being invoked.
317
+ *
318
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget)
319
+ */
320
+ readonly currentTarget: Target;
321
+ /**
322
+ * Returns the object to which event is dispatched (its target).
323
+ *
324
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
325
+ */
326
+ readonly target: Target;
327
+ }
328
+ interface BaseEvent extends Omit<Event, "currentTarget" | "target"> {
329
+ /** @deprecated */
330
+ initCustomEvent(type: string, bubbles?: boolean, cancelable?: boolean, detail?: any): void;
331
+ }
332
+ /**
333
+ * From "GlobalEventHandlersCamelCase" extract event names and their payloads.
334
+ * Not using "HTMLElementEventMap" because that map has all events in lowercase.
335
+ */
336
+ type GlobalEventTypes<Target = HTMLElement> = {
337
+ [Key in keyof GlobalEventHandlersCamelCase<Target> as Key extends `on${infer EventName}` ? Uncapitalize<EventName> : never]-?: Parameters<NonNullable<GlobalEventHandlersCamelCase<Target>[Key]>>[0];
338
+ };
339
+ type ListenerToPayloadType<Listener> = unknown extends Listener ? void : Listener extends {
340
+ emit: (...rest: never[]) => infer PayloadType;
341
+ } ? PayloadType : Listener extends BaseEvent ? Listener : void;
342
+ /**
343
+ * Defined Lumina custom elements. This interface is used only for internal
344
+ * type-checking.
345
+ */
346
+ export interface DeclareElements {
347
+ }
348
+ type ReMappedComponents<Components> = {
349
+ [Key in keyof Components]: Components[Key] extends {
350
+ el: unknown;
351
+ } ? ToJsx<Components[Key]> : never;
352
+ };
353
+ /**
354
+ * For common properties, add Lumina's types rather than use Stencil's types
355
+ */
356
+ type ReMapStencilComponents<Components> = {
357
+ [Key in keyof Pick<Components, keyof Components & keyof HTMLElementTagNameMap>]: HTMLAttributes<HTMLElementTagNameMap[Key]> & ReMapStencilComponent<Components[Key]>;
358
+ };
359
+ type ReMapStencilComponent<Component> = {
360
+ [Key in keyof Component as FixupStencilEventCasing<Key>]: Component[Key];
361
+ };
362
+ type FixupStencilEventCasing<PropertyName extends PropertyKey> = PropertyName extends `on${infer EventName}` ? `on${Uncapitalize<EventName>}` : PropertyName;
363
+ /**
364
+ * These typings are based on dom-expressions typings:
365
+ * https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/jsx.d.ts
366
+ *
367
+ * They in turn based the typings on Surplus and Inferno:
368
+ * - https://github.com/adamhaile/surplus/blob/master/index.d.ts
369
+ * - https://github.com/infernojs/inferno/blob/master/packages/inferno/src/core/types.ts
370
+ *
371
+ * Documentation about how to type JSX in TypeScript:
372
+ * https://www.typescriptlang.org/docs/handbook/jsx.html
373
+ */
374
+ export declare namespace LuminaJsx {
375
+ /**
376
+ * Whether to pick TemplateResult or JsxNode here is a compromise.
377
+ *
378
+ * - If I tell it Lit JSX type is JsxNode, then even <a /> expression will
379
+ * have a very broad JsxNode type (union of template results, null,
380
+ * undefined, false, and more). This may slow down type-checking and may be
381
+ * too-broad for certain use cases.
382
+ * - Since <a /> would be typed very broad, you won't be able to declare
383
+ * your function as receiving just TemplateResult
384
+ * - Also, this makes TypeScript not allow you to return undefined from
385
+ * your functional component
386
+ * - This is what React did and what I am going with
387
+ * - If I tell TypeScript that JSX type is TemplateResult, then my function
388
+ * component is no longer allowed to return undefined or string or etc.
389
+ *
390
+ * This is mainly a TypeScript limitation. Issues tracking this:
391
+ * - https://github.com/microsoft/TypeScript/issues/21699
392
+ * - https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18912
393
+ *
394
+ */
395
+ export type Element = TemplateResult;
396
+ export interface ElementClass {
397
+ }
398
+ export interface ElementAttributesProperty {
399
+ }
400
+ export interface IntrinsicClassAttributes {
401
+ }
402
+ export interface ElementChildrenAttribute {
403
+ children: JsxNode;
404
+ }
405
+ export interface IntrinsicAttributes {
406
+ /**
407
+ * The `key` is a special attribute that can be set on any element.
408
+ *
409
+ * At build-time it is translated into the `keyed()` directive:
410
+ * https://lit.dev/docs/templates/directives/#keyed
411
+ *
412
+ * @remarks
413
+ * Unlike in React or Stencil, any JavaScript value is acceptable as a key
414
+ */
415
+ key?: unknown;
416
+ }
417
+ export interface IntrinsicElements extends HTMLElementTags, SvgElementTags, ReMappedComponents<DeclareElements>, ReMapStencilComponents<ImportStencilElements> {
418
+ }
419
+ export type { CustomAttributes, DOMAttributes, HTMLAttributes, HTMLElementTags, SvgElementTags, AriaAttributes };
420
+ }
421
+ export {};
@@ -15,6 +15,9 @@ export interface DefineCustomElements {
15
15
  export type LazyLoadOptions = {
16
16
  readonly resourcesUrl?: string;
17
17
  };
18
+ interface CommonInterface extends HTMLElement {
19
+ componentOnReady: () => Promise<this>;
20
+ }
18
21
  export declare const makeDefineCustomElements: (runtime: Runtime, structure: Readonly<Record<string, CompactMeta>>) => DefineCustomElements;
19
22
  /**
20
23
  * Use compact meta to reduce bundle size (otherwise, it would be ~65kb for
@@ -105,7 +108,9 @@ export declare abstract class ProxyComponent extends HtmlElement {
105
108
  /**
106
109
  * Direct offspring that should be awaited before loaded() is emitted
107
110
  */
108
- _offspring: (Element & Partial<Pick<LitElement, "manager">> & Pick<LitElement, "componentOnReady">)[];
111
+ _offspring: (CommonInterface & {
112
+ manager?: LitElement["manager"];
113
+ })[];
109
114
  /**
110
115
  * Promise that resolves once parent's load() completed. False if there is no
111
116
  * parent
@@ -147,10 +152,19 @@ export declare abstract class ProxyComponent extends HtmlElement {
147
152
  /**
148
153
  * Create a promise that resolves once component is fully loaded
149
154
  */
150
- componentOnReady(): Promise<LitElement>;
155
+ componentOnReady(): Promise<this>;
151
156
  /** @internal */
152
157
  _initializeComponent(module: Record<string, typeof LitElement>): void;
158
+ /**
159
+ * Implemented on the proxy for compatibility with Lit Context.
160
+ */
161
+ addController(): void;
162
+ /**
163
+ * Implemented on the proxy for compatibility with Lit Context.
164
+ */
165
+ requestUpdate(): void;
153
166
  }
167
+ /** @private */
154
168
  export type GlobalThisWithPuppeteerEnv = typeof globalThis & {
155
169
  devOnly$createdElements?: WeakRef<ProxyComponent>[];
156
170
  };
package/dist/runtime.d.ts CHANGED
@@ -8,7 +8,7 @@ import type { LitElement } from "./LitElement";
8
8
  export type Runtime = RuntimeOptions & {
9
9
  /**
10
10
  * Get the base path to where the package assets can be found.
11
- * By default, the package asset path is set to "https://js.arcgis.com/<simplified-package-name>/<released-verion>/".
11
+ * By default, the package asset path is set to `https://js.arcgis.com/<simplified-package-name>/<released-verion>/`.
12
12
  * We are hosting our assets on a CDN (Content Delivery Network) to ensure fast and reliable access.
13
13
  * It is CORS-enabled, so you can load the assets from any domain.
14
14
  * Use "setAssetPath(path)" if the path needs to be customized.
@@ -18,8 +18,8 @@ export type Runtime = RuntimeOptions & {
18
18
  * Used to manually set the base path where package assets (like localization
19
19
  * and icons) can be found.
20
20
  *
21
- * By default, the package asset path is set to "https://js.arcgis.com/<simplified-package-name>/<released-verion>/".
22
- * For example, "https://js.arcgis.com/map-components/4.30/".
21
+ * By default, the package asset path is set to `https://js.arcgis.com/<simplified-package-name>/<released-verion>/`.
22
+ * For example, `https://js.arcgis.com/map-components/4.30/`.
23
23
  * We are hosting our assets on a CDN (Content Delivery Network) to ensure fast and reliable access.
24
24
  * It is CORS-enabled, so you can load the assets from any domain.
25
25
  * This is the recommended way to load the assets and avoid bundling them with your application.
@@ -92,6 +92,8 @@ export declare function makeRuntime(options?: RuntimeOptions): Runtime;
92
92
  /**
93
93
  * Exposing the reference to the runtime globally when in tests or development.
94
94
  * This is primarily for usage by dynamically created components in tests
95
+ *
96
+ * @private
95
97
  */
96
98
  export type DevOnlyGlobalRuntime = typeof globalThis & {
97
99
  devOnly$luminaRuntime?: Runtime;
@@ -99,6 +101,8 @@ export type DevOnlyGlobalRuntime = typeof globalThis & {
99
101
  /**
100
102
  * Called from the component constructor when in development or test mode.
101
103
  * Used primarily by mount to get a reference to the rendered component.
104
+ *
105
+ * @private
102
106
  */
103
107
  export type DevOnlyGlobalComponentRefCallback = typeof globalThis & {
104
108
  devOnly$luminaComponentRefCallback?: (component: LitElement) => void;
@@ -2,7 +2,6 @@
2
2
  * Lots of silencing of ESLint in this file to be compatible with Stencil's
3
3
  * unsafe typings.
4
4
  */
5
- /// <reference types="node" />
6
5
  import { type RenderInfo } from "@lit-labs/ssr/lib/render.js";
7
6
  import type { Readable } from "node:stream";
8
7
  /**
@@ -1,4 +1,4 @@
1
- /// <reference path="jsxGlobals.d.ts" />
2
- /// <reference path="loadLitCss.d.ts" />
3
- /// <reference path="viteEnv.d.ts" />
4
- /// <reference path="importMeta.d.ts" />
1
+ /// <reference path="jsxGlobals.d.ts" preserve="true" />
2
+ /// <reference path="loadLitCss.d.ts" preserve="true" />
3
+ /// <reference path="viteEnv.d.ts" preserve="true" />
4
+ /// <reference path="importMeta.d.ts" preserve="true" />
@@ -1,4 +1,8 @@
1
- export {};
1
+ /**
2
+ * This file is used for internal type checking only. It should not be
3
+ * referenced in public types of your package to not pollute the global types
4
+ * namespace
5
+ */
2
6
  declare global {
3
7
  /**
4
8
  * This interface will be extended in each source file that defines a LitElement.
@@ -19,23 +23,17 @@ declare global {
19
23
  };
20
24
  interface HTMLElementTagNameMap extends ReMappedDeclareElements {
21
25
  }
22
- /**
23
- * Extend this interface with Stencil web components that you wish to use
24
- * in Lit
25
- *
26
- * @example
27
- * ```ts
28
- * import type { JSX as CalciteJSX } from "@esri/calcite-components/dist/types/components";
29
- * import type { JSX as CommonComponentsJsx } from "@arcgis/common-components/dist/types/components";
30
- *
31
- * declare global {
32
- * interface ImportStencilElements
33
- * extends CalciteJSX.IntrinsicElements,
34
- * CommonComponentsJsx.IntrinsicElements {
35
- * }
36
- * }
37
- * ```
38
- */
39
- export interface ImportStencilElements {
26
+ }
27
+ export interface DeclareElements extends globalThis.DeclareElements {
28
+ }
29
+ /**
30
+ * In the component files, we declare "DeclareElements" interface on the
31
+ * `declare global` namespace as it's shorter than writing
32
+ * `declare module "@arcgis/lumina"`. However, we want to avoid polluting
33
+ * global typings with this interface - thus we use namespace merging to
34
+ * extend the namespaced DeclareElements based on the global DeclareElements.
35
+ */
36
+ declare module "../jsx/types" {
37
+ interface DeclareElements extends globalThis.DeclareElements {
40
38
  }
41
39
  }
@@ -1,9 +1,33 @@
1
+ export interface Options<I extends HTMLElement, E extends EventNames> {
2
+ react: any;
3
+ tagName: string;
4
+ elementClass: Constructor<I>;
5
+ events?: E;
6
+ displayName?: string;
7
+ }
8
+ export type EventNames = Record<string, string>;
9
+ type Constructor<T> = new () => T;
1
10
  /**
2
- * Returns a proxy object for a custom element prototype.
3
- * The function that creates a React wrapper component for a custom element,
4
- * if rendered, will need the custom element prototype to define the React component properties.
5
- * Because the custom element may not yet be defined in global scope when
6
- * `createPrototypeProxy()` is called, this small proxy delays retrieving the custom
7
- * element prototype until it is actually needed, and caches the result for future calls.
11
+ * Wrap `createComponent` from `@lit/react` to improve lazy loading
12
+ * compatibility.
13
+ *
14
+ * @private
8
15
  */
9
- export declare function createPrototypeProxy<T extends HTMLElement>(tagName: string): new () => T;
16
+ export declare const makeReactWrapperFactory: (react: unknown, createComponent: (options: Options<HTMLElement, EventNames>) => unknown) => (options: Pick<Options<HTMLElement, EventNames>, "events" | "tagName">) => unknown;
17
+ /**
18
+ * Helper for `createComponent` to declare options in a type-safe and concise
19
+ * manner.
20
+ *
21
+ * @remarks
22
+ * Only tagName and events need to be provided to the wrapped version of the
23
+ * `createComponent` function. However, since we inherit the typings from
24
+ * the original `createComponent`, TypeScript would still force us to provide
25
+ * `react` and `elementClass` properties - instead, this helper convinces
26
+ * TypeScript that we are providing `react` and `elementClass` properties.
27
+ *
28
+ * @private
29
+ */
30
+ export declare const getReactWrapperOptions: <Element extends HTMLElement, Events extends EventNames>(tagNameAndElement: Element, events: Events) => Options<Element & {
31
+ class?: string;
32
+ }, Events>;
33
+ export {};
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcgis/lumina",
3
- "version": "4.32.0-next.7",
3
+ "version": "4.32.0-next.72",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -8,6 +8,7 @@
8
8
  "exports": {
9
9
  ".": "./dist/index.js",
10
10
  "./config": "./dist/config.js",
11
+ "./hmrSupport": "./dist/hmrSupport.js",
11
12
  "./stencilSsrCompatibility": "./dist/stencilSsrCompatibility/index.js",
12
13
  "./typings": {
13
14
  "types": "./dist/typings/index.d.ts"
@@ -19,10 +20,11 @@
19
20
  ],
20
21
  "license": "SEE LICENSE IN LICENSE.md",
21
22
  "dependencies": {
22
- "@arcgis/components-controllers": "4.32.0-next.7",
23
- "@arcgis/components-utils": "4.32.0-next.7",
23
+ "@arcgis/components-controllers": "4.32.0-next.72",
24
+ "@arcgis/components-utils": "4.32.0-next.72",
24
25
  "@lit-labs/ssr": "^3.2.2",
25
26
  "@lit-labs/ssr-client": "^1.1.7",
27
+ "@lit/context": "^1.1.3",
26
28
  "csstype": "^3.1.3",
27
29
  "lit": "^3.2.0",
28
30
  "tslib": "^2.7.0"