@arcgis/lumina 4.33.0-next.9 → 4.33.0-next.90

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.
@@ -1,9 +1,8 @@
1
- import type { CSSResultGroup, CSSResultOrNative, PropertyValues } from "lit";
2
- import { LitElement as OriginalLitElement } from "lit";
3
- import type { LuminaPropertyDeclaration } from "@arcgis/components-controllers";
4
- import type { Runtime } from "./runtime";
5
- import type { ProxyComponent } from "./lazyLoad";
6
- import type { ToElement } from "./jsx/types";
1
+ import { CSSResultGroup, CSSResultOrNative, PropertyValues, LitElement as OriginalLitElement } from 'lit';
2
+ import { LuminaPropertyDeclaration } from '@arcgis/components-controllers';
3
+ import { Runtime } from './runtime';
4
+ import { ProxyComponent } from './lazyLoad';
5
+ import { ToElement } from './jsx/types';
7
6
  type ComponentLifecycle = {
8
7
  connectedCallback?: () => void;
9
8
  disconnectedCallback?: () => void;
@@ -83,7 +82,7 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
83
82
  * Controller Manager orchestrates all controllers used by this component,
84
83
  * connecting their lifecycle hooks and providing context information.
85
84
  */
86
- manager: import("@arcgis/components-controllers").ControllerManager<never>;
85
+ manager: import('@arcgis/components-controllers').ControllerManager<never>;
87
86
  /**
88
87
  * Map with keys for any properties that have changed since the last
89
88
  * update cycle with previous values.
package/dist/config.js CHANGED
@@ -1,9 +1,16 @@
1
- import {
2
- PropertyFlags,
3
- lazyMetaGroupJoiner,
4
- lazyMetaItemJoiner,
5
- lazyMetaSubItemJoiner
6
- } from "./chunk-PGHUBTOM.js";
1
+ const lazyMetaGroupJoiner = ";";
2
+ const lazyMetaItemJoiner = ",";
3
+ const lazyMetaSubItemJoiner = ":";
4
+ var PropertyFlags = /* @__PURE__ */ ((PropertyFlags2) => {
5
+ PropertyFlags2[PropertyFlags2["ATTRIBUTE"] = 1] = "ATTRIBUTE";
6
+ PropertyFlags2[PropertyFlags2["REFLECT"] = 2] = "REFLECT";
7
+ PropertyFlags2[PropertyFlags2["BOOLEAN"] = 4] = "BOOLEAN";
8
+ PropertyFlags2[PropertyFlags2["NUMBER"] = 8] = "NUMBER";
9
+ PropertyFlags2[PropertyFlags2["STATE"] = 16] = "STATE";
10
+ PropertyFlags2[PropertyFlags2["READ_ONLY"] = 32] = "READ_ONLY";
11
+ PropertyFlags2[PropertyFlags2["NO_ACCESSOR"] = 64] = "NO_ACCESSOR";
12
+ return PropertyFlags2;
13
+ })(PropertyFlags || {});
7
14
  export {
8
15
  PropertyFlags,
9
16
  lazyMetaGroupJoiner,
package/dist/context.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { type ControllerHost } from "@arcgis/components-controllers";
2
- import { ContextConsumer, ContextProvider, type Context, type ContextType } from "@lit/context";
1
+ import { ControllerHost } from '@arcgis/components-controllers';
2
+ import { ContextConsumer, ContextProvider, Context, ContextType } from '@lit/context';
3
3
  interface ContextProviderOptions<C extends Context<unknown, unknown>> {
4
4
  context: C;
5
5
  initialValue?: ContextType<C>;
@@ -1,4 +1,4 @@
1
- import type { BaseComponent, EventEmitter } from "@arcgis/components-controllers";
1
+ import { BaseComponent, EventEmitter } from '@arcgis/components-controllers';
2
2
  /**
3
3
  * While these defaults don't match DOM defaults (all false), they match
4
4
  * Stencil and Shoelace defaults. Also, they make more sense for our
@@ -1,5 +1,5 @@
1
- import type { LuminaPropertyDeclaration } from "@arcgis/components-controllers";
2
- export { state } from "@lit/reactive-element/decorators/state.js";
1
+ import { LuminaPropertyDeclaration } from '@arcgis/components-controllers';
2
+ export { state } from '@lit/reactive-element/decorators/state.js';
3
3
  /**
4
4
  * A class field or accessor decorator which creates a reactive property that
5
5
  * reflects a corresponding attribute value. When a decorated property is set
@@ -1,4 +1,4 @@
1
- import type { LitElement } from "./LitElement";
1
+ import { LitElement } from './LitElement';
2
2
  /**
3
3
  * When in lazy-build, the actual Lit element is never attached to the DOM.
4
4
  * Instead, a proxy element is present and should be used for all DOM actions.
@@ -1,4 +1,4 @@
1
- import type { ModuleNamespace } from "vite/types/hot.js";
1
+ import { ModuleNamespace } from 'vite/types/hot.js';
2
2
  /**
3
3
  * Update web component proxies when a module is updated.
4
4
  *
@@ -1,10 +1,4 @@
1
- import {
2
- ProxyComponent,
3
- noShadowRoot
4
- } from "./chunk-NO7HOBNA.js";
5
- import "./chunk-PGHUBTOM.js";
6
-
7
- // src/hmrSupport.ts
1
+ import { n as noShadowRoot, P as ProxyComponent } from "./utils-GhKD5Lo-.js";
8
2
  import { camelToKebab } from "@arcgis/components-utils";
9
3
  function handleHmrUpdate(newModules) {
10
4
  newModules.forEach((newModule) => {
package/dist/index.d.ts CHANGED
@@ -1,16 +1,17 @@
1
- export { useContextProvider, useContextConsumer } from "./context";
2
- export type { EventOptions } from "./createEvent";
3
- export { createEvent } from "./createEvent";
4
- export { state, property, method } from "./decorators";
5
- export type { DefineCustomElements, LazyLoadOptions, GlobalThisWithPuppeteerEnv } from "./lazyLoad";
6
- export { makeDefineCustomElements } from "./lazyLoad";
7
- export { LitElement } from "./LitElement";
8
- export type { PublicLitElement } from "./PublicLitElement";
9
- export type { Runtime, RuntimeOptions, DevOnlyGlobalRuntime, DevOnlyGlobalComponentRefCallback } from "./runtime";
10
- export { makeRuntime } from "./runtime";
11
- export type { EventHandler } from "./jsx/baseTypes";
12
- export * from "./jsx/types";
13
- export { safeClassMap, safeStyleMap, directive, live } from "./jsx/directives";
14
- export { nothing, noChange, setAttribute, stringOrBoolean } from "./jsx/utils";
15
- export { noShadowRoot } from "./utils";
16
- export { makeReactWrapperFactory, getReactWrapperOptions } from "./wrappersUtils";
1
+ export { useContextProvider, useContextConsumer } from './context';
2
+ export type { EventOptions } from './createEvent';
3
+ export { createEvent } from './createEvent';
4
+ export { state, property, method } from './decorators';
5
+ export type { DefineCustomElements, LazyLoadOptions, GlobalThisWithPuppeteerEnv } from './lazyLoad';
6
+ export { makeDefineCustomElements } from './lazyLoad';
7
+ export { LitElement } from './LitElement';
8
+ export type { PublicLitElement } from './PublicLitElement';
9
+ export type { Runtime, RuntimeOptions, DevOnlyGlobalRuntime, DevOnlyGlobalComponentRefCallback } from './runtime';
10
+ export { makeRuntime } from './runtime';
11
+ export type { EventHandler } from './jsx/baseTypes';
12
+ export * from './jsx/types';
13
+ export { safeClassMap, safeStyleMap, deferLoad, deferredLoaders, directive, live } from './jsx/directives';
14
+ export { nothing, noChange, setAttribute, stringOrBoolean } from './jsx/utils';
15
+ export { noShadowRoot } from './utils';
16
+ export { makeReactWrapperFactory, getReactWrapperOptions } from './wrappersUtils';
17
+ export { renderElement } from './render';
package/dist/index.js CHANGED
@@ -1,13 +1,17 @@
1
- import {
2
- attachToAncestor,
3
- makeDefineCustomElements,
4
- noShadowRoot
5
- } from "./chunk-NO7HOBNA.js";
6
- import "./chunk-PGHUBTOM.js";
7
-
8
- // src/context.ts
9
- import { retrieveComponent } from "@arcgis/components-controllers";
10
- import { ContextConsumer, ContextProvider } from "@lit/context";
1
+ import { retrieveComponent, trackKey, keyTrackResolve, useControllerManager } from "@arcgis/components-controllers";
2
+ import { ContextProvider, ContextConsumer } from "@lit/context";
3
+ import { isEsriInternalEnv, Deferred, camelToKebab } from "@arcgis/components-utils";
4
+ import { state } from "@lit/reactive-element/decorators/state.js";
5
+ import { property as property$1 } from "@lit/reactive-element/decorators/property.js";
6
+ import { n as noShadowRoot, a as attachToAncestor } from "./utils-GhKD5Lo-.js";
7
+ import { m } from "./utils-GhKD5Lo-.js";
8
+ import { LitElement as LitElement$1, isServer, noChange as noChange$1 } from "lit";
9
+ import { PropertyFlags } from "./config.js";
10
+ import { classMap } from "lit-html/directives/class-map.js";
11
+ import { styleMap } from "lit/directives/style-map.js";
12
+ import { directive as directive$1, Directive } from "lit-html/directive.js";
13
+ import { live as live$1 } from "lit-html/directives/live.js";
14
+ import { nothing as nothing$1, noChange as noChange$2, render } from "lit-html";
11
15
  function useContextProvider(options) {
12
16
  const component = retrieveComponent();
13
17
  const controller = new ContextProvider(component.el, options);
@@ -20,17 +24,11 @@ function useContextConsumer(options) {
20
24
  component.addController(controller);
21
25
  return controller;
22
26
  }
23
-
24
- // src/createEvent.ts
25
- import { retrieveComponent as retrieveComponent2, keyTrackResolve, trackKey } from "@arcgis/components-controllers";
26
- import { isEsriInternalEnv } from "@arcgis/components-utils";
27
- var createEventFactory = (eventName = "", options = {}, component = retrieveComponent2()) => {
27
+ const createEventFactory = (eventName = "", options = {}, component = retrieveComponent()) => {
28
28
  const emitter = {
29
29
  emit: (payload) => {
30
30
  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && !component.el.isConnected) {
31
- console.warn(
32
- `Trying to emit an ${eventName} event on a disconnected element ${component.el.tagName.toLowerCase()}`
33
- );
31
+ console.warn(`Trying to emit an ${eventName} event on a disconnected element ${component.el.localName}`);
34
32
  }
35
33
  if (eventName === "") {
36
34
  keyTrackResolve();
@@ -63,76 +61,33 @@ var createEventFactory = (eventName = "", options = {}, component = retrieveComp
63
61
  }
64
62
  return emitter;
65
63
  };
66
- var createEvent = createEventFactory.bind(null, "");
67
-
68
- // src/decorators.ts
69
- import { state } from "@lit/reactive-element/decorators/state.js";
70
- import { property as litProperty } from "@lit/reactive-element/decorators/property.js";
71
- var property = litProperty;
72
- var method = void 0;
73
-
74
- // src/LitElement.ts
75
- import { Deferred, camelToKebab, isEsriInternalEnv as isEsriInternalEnv2 } from "@arcgis/components-utils";
76
- import { LitElement as OriginalLitElement, isServer } from "lit";
77
- import { useControllerManager } from "@arcgis/components-controllers";
78
- var emptyFunction = () => void 0;
79
- var LitElement = class _LitElement extends OriginalLitElement {
64
+ const createEvent = createEventFactory.bind(null, "");
65
+ const property = property$1;
66
+ const method = void 0;
67
+ const emptyFunction = () => void 0;
68
+ class LitElement extends LitElement$1 {
80
69
  constructor() {
81
70
  super();
82
- /**
83
- * In lazy build, the actual DOM element differs from the class instance:
84
- * - "this.el" is a proxy custom element - it's physically present in the DOM
85
- * even before the Lit component is loaded.
86
- * - "this" is the actual Lit component - in case of Lazy builds, it's
87
- * never directly attached to the DOM. Instead, all interactions with the
88
- * proxy are forwarded to the actual Lit component. And, when Lit wants to
89
- * render, it renders into the shadow root of the proxy.
90
- *
91
- * "this.el" should be used instead of "this" for all things involving the
92
- * DOM (addEventListener, querySelector, children, setAttribute,
93
- * MutationObserver, etc...)
94
- *
95
- * @example
96
- * ```ts
97
- * // Generally, you shouldn't have to write logic specific to lazy or non-lazy
98
- * // build, but if you have to, you can detect if you are in a lazy build like so:
99
- * const isLazy = this.el !== this;
100
- * ```
101
- */
102
71
  this.el = this.constructor.lazy ?? this;
103
- /**
104
- * Controller Manager orchestrates all controllers used by this component,
105
- * connecting their lifecycle hooks and providing context information.
106
- */
107
72
  this.manager = useControllerManager(this);
108
- /** @internal */
109
73
  this._postLoad = this.constructor.lazy?._postLoad ?? new Deferred();
110
- /**
111
- * Direct offspring that should be awaited before loaded() is emitted.
112
- *
113
- * `attachToAncestor()` will add elements to this array
114
- *
115
- * @internal
116
- */
117
74
  this._offspring = this.constructor.lazy?._offspring ?? [];
118
75
  this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred();
119
76
  this._enableUpdating = this.enableUpdating;
120
77
  this.enableUpdating = emptyFunction;
121
- const ourShouldUpdate = _LitElement.prototype.shouldUpdate;
78
+ const ourShouldUpdate = LitElement.prototype.shouldUpdate;
122
79
  if (this.shouldUpdate !== ourShouldUpdate) {
123
80
  this._originalShouldUpdate = this.shouldUpdate;
124
81
  this.shouldUpdate = ourShouldUpdate;
125
82
  }
126
83
  if (process.env.NODE_ENV !== "production") {
127
- const isOwnComponent = globalThis.devOnly$ownTagNames?.has(
128
- this.el.tagName.toLowerCase()
129
- );
84
+ const isOwnComponent = globalThis.devOnly$ownTagNames?.has(this.el.localName);
130
85
  const constructor = this.constructor;
131
- const warningsWereCustomized = constructor.enabledWarnings !== OriginalLitElement.enabledWarnings;
86
+ const warningsWereCustomized = constructor.enabledWarnings !== LitElement$1.enabledWarnings;
132
87
  if (!isOwnComponent && !warningsWereCustomized) {
133
88
  constructor.disableWarning?.("change-in-update");
134
89
  }
135
- if (isEsriInternalEnv2()) {
90
+ if (isEsriInternalEnv()) {
136
91
  globalThis.devOnly$luminaComponentRefCallback?.(this);
137
92
  }
138
93
  }
@@ -171,18 +126,18 @@ var LitElement = class _LitElement extends OriginalLitElement {
171
126
  *
172
127
  * Thus, overwriting Lit's default behavior to use kebab-case:
173
128
  */
174
- attribute: !!(flags & 1 /* ATTRIBUTE */) && typeof name === "string" ? camelToKebab(name) : false,
175
- reflect: !!(flags & 2 /* REFLECT */),
176
- type: flags & 4 /* BOOLEAN */ ? Boolean : flags & 8 /* NUMBER */ ? Number : void 0,
129
+ attribute: !!(flags & PropertyFlags.ATTRIBUTE) && typeof name === "string" ? camelToKebab(name) : false,
130
+ reflect: !!(flags & PropertyFlags.REFLECT),
131
+ type: flags & PropertyFlags.BOOLEAN ? Boolean : flags & PropertyFlags.NUMBER ? Number : void 0,
177
132
  /**
178
133
  * At the moment in Lit, state:true just means attribute:false, so this
179
134
  * line is technically redundant, but let's keep it here just in case Lit
180
135
  * will add more meaning to state:true in the future.
181
136
  */
182
- state: !!(flags & 16 /* STATE */),
137
+ state: !!(flags & PropertyFlags.STATE),
183
138
  // Controllers add this option to Lit
184
- readOnly: !!(flags & 32 /* READ_ONLY */),
185
- noAccessor: !!(flags & 64 /* NO_ACCESSOR */),
139
+ readOnly: !!(flags & PropertyFlags.READ_ONLY),
140
+ noAccessor: !!(flags & PropertyFlags.NO_ACCESSOR),
186
141
  ...rest
187
142
  });
188
143
  }
@@ -219,13 +174,9 @@ var LitElement = class _LitElement extends OriginalLitElement {
219
174
  const options = Class.shadowRootOptions;
220
175
  const useLightDom = options === noShadowRoot;
221
176
  const renderRoot = existingShadowRoot ?? (useLightDom ? this.el : this.el.attachShadow(options));
222
- Object.defineProperty(this, "shadowRoot", {
223
- // Create shadow root on the proxy instance, to make Lit render content there
224
- value: renderRoot
225
- });
226
177
  if (existingShadowRoot) {
227
178
  if (process.env.NODE_ENV === "production") {
228
- OriginalLitElement.prototype.createRenderRoot.call(this);
179
+ LitElement$1.prototype.createRenderRoot.call(this);
229
180
  }
230
181
  return existingShadowRoot;
231
182
  }
@@ -297,18 +248,15 @@ var LitElement = class _LitElement extends OriginalLitElement {
297
248
  await this._postLoaded.promise;
298
249
  return this;
299
250
  }
300
- };
251
+ }
301
252
  LitElement.$createEvent = createEventFactory;
302
- if (process.env.NODE_ENV !== "production" && isEsriInternalEnv2()) {
253
+ if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
303
254
  const globalWithLit = globalThis;
304
255
  globalWithLit.litIssuedWarnings ??= /* @__PURE__ */ new Set();
305
256
  globalWithLit.litIssuedWarnings.add(
306
257
  "Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators See https://lit.dev/msg/no-override-create-property for more information."
307
258
  );
308
259
  }
309
-
310
- // src/runtime.ts
311
- import { isEsriInternalEnv as isEsriInternalEnv3 } from "@arcgis/components-utils";
312
260
  function makeRuntime(options) {
313
261
  let assetPath;
314
262
  const setAssetPath = (path) => {
@@ -351,33 +299,35 @@ function makeRuntime(options) {
351
299
  }
352
300
  };
353
301
  setAssetPath(options.defaultAssetPath);
354
- if (process.env.NODE_ENV !== "production" && isEsriInternalEnv3()) {
302
+ if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
355
303
  globalThis.devOnly$luminaRuntime = runtime;
356
304
  }
357
305
  return runtime;
358
306
  }
359
-
360
- // src/jsx/types.ts
361
- var Fragment = void 0;
362
- var bindAttribute = void 0;
363
- var bindBooleanAttribute = void 0;
364
- var bindProperty = void 0;
365
- var bindEvent = void 0;
366
-
367
- // src/jsx/directives.ts
368
- import { classMap } from "lit-html/directives/class-map.js";
369
- import { styleMap } from "lit/directives/style-map.js";
370
- import { directive as litDirective } from "lit-html/directive.js";
371
- import { live as litLive } from "lit-html/directives/live.js";
372
- var safeClassMap = (parameters) => typeof parameters === "object" && parameters != null ? classMap(parameters) : parameters;
373
- var safeStyleMap = (parameters) => typeof parameters === "object" && parameters != null ? styleMap(parameters) : parameters;
374
- var directive = litDirective;
375
- var live = litLive;
376
-
377
- // src/jsx/utils.ts
378
- import { noChange as litNoChange, nothing as litNothing } from "lit-html";
379
- var nothing = litNothing;
380
- var noChange = litNoChange;
307
+ const Fragment = void 0;
308
+ const bindAttribute = void 0;
309
+ const bindBooleanAttribute = void 0;
310
+ const bindProperty = void 0;
311
+ const bindEvent = void 0;
312
+ const safeClassMap = (parameters) => typeof parameters === "object" && parameters != null ? classMap(parameters) : parameters;
313
+ const safeStyleMap = (parameters) => typeof parameters === "object" && parameters != null ? styleMap(parameters) : parameters;
314
+ class DeferLoad extends Directive {
315
+ update(part) {
316
+ const tagName = part.element.localName;
317
+ if (!customElements.get(tagName)) {
318
+ void deferredLoaders.get(tagName)?.();
319
+ }
320
+ }
321
+ render() {
322
+ return noChange$1;
323
+ }
324
+ }
325
+ const deferLoad = /* @__PURE__ */ directive$1(DeferLoad)();
326
+ const deferredLoaders = /* @__PURE__ */ new Map();
327
+ const directive = directive$1;
328
+ const live = live$1;
329
+ const nothing = nothing$1;
330
+ const noChange = noChange$2;
381
331
  function setAttribute(element, attributeName, value) {
382
332
  if (value == null) {
383
333
  element.removeAttribute(attributeName);
@@ -385,13 +335,11 @@ function setAttribute(element, attributeName, value) {
385
335
  element.setAttribute(attributeName, value);
386
336
  }
387
337
  }
388
- var stringOrBoolean = {
338
+ const stringOrBoolean = {
389
339
  toAttribute: (value) => value === true ? "" : value === false ? null : value
390
340
  };
391
-
392
- // src/wrappersUtils.ts
393
- var emptyObject = {};
394
- var makeReactWrapperFactory = (react, createComponent) => (options) => {
341
+ const emptyObject = {};
342
+ const makeReactWrapperFactory = (react, createComponent) => (options) => {
395
343
  const tagName = options.tagName;
396
344
  let customElementPrototype = emptyObject;
397
345
  const elementClass = {
@@ -429,7 +377,12 @@ var makeReactWrapperFactory = (react, createComponent) => (options) => {
429
377
  customElementPrototype = void 0;
430
378
  return result;
431
379
  };
432
- var getReactWrapperOptions = (tagNameAndElement, events) => ({ tagName: tagNameAndElement, events });
380
+ const getReactWrapperOptions = (tagNameAndElement, events) => ({ tagName: tagNameAndElement, events });
381
+ function renderElement(element) {
382
+ const container = document.createElement("div");
383
+ render(element, container);
384
+ return container.firstElementChild;
385
+ }
433
386
  export {
434
387
  Fragment,
435
388
  LitElement,
@@ -438,10 +391,12 @@ export {
438
391
  bindEvent,
439
392
  bindProperty,
440
393
  createEvent,
394
+ deferLoad,
395
+ deferredLoaders,
441
396
  directive,
442
397
  getReactWrapperOptions,
443
398
  live,
444
- makeDefineCustomElements,
399
+ m as makeDefineCustomElements,
445
400
  makeReactWrapperFactory,
446
401
  makeRuntime,
447
402
  method,
@@ -449,6 +404,7 @@ export {
449
404
  noShadowRoot,
450
405
  nothing,
451
406
  property,
407
+ renderElement,
452
408
  safeClassMap,
453
409
  safeStyleMap,
454
410
  setAttribute,
@@ -1,5 +1,5 @@
1
- import type { DirectiveResult } from "lit-html/directive.js";
2
- import type { Ref } from "lit-html/directives/ref.js";
1
+ import { DirectiveResult } from 'lit-html/directive.js';
2
+ import { Ref } from 'lit-html/directives/ref.js';
3
3
  export type EventHandlerUnion<T, E extends Event> = (e: E & {
4
4
  currentTarget: T;
5
5
  target: Element;
@@ -21,15 +21,19 @@ export type EventHandler<E> = {
21
21
  }["bivarianceHack"];
22
22
  export interface CustomAttributes<T = HTMLElement> {
23
23
  /**
24
- * The `key` is a special attribute that can be set on any element.
25
- *
26
- * At build-time it is translated into the `keyed()` directive:
27
- * https://lit.dev/docs/templates/directives/#keyed
28
- *
29
- * @remarks
30
- * Unlike in React or Stencil, any JavaScript value is acceptable as a key
24
+ * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#key-prop)
31
25
  */
32
26
  key?: unknown;
27
+ /**
28
+ * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#refs)
29
+ */
33
30
  ref?: EventHandler<T | undefined> | Ref<T>;
31
+ /**
32
+ * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#lit-directives)
33
+ */
34
34
  directives?: readonly DirectiveResult[];
35
+ /**
36
+ * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#deferring-web-component-load)
37
+ */
38
+ deferLoad?: true;
35
39
  }
@@ -1,10 +1,11 @@
1
- import type { Nil } from "@arcgis/components-utils";
2
- import type { Properties as CssProperties } from "csstype";
3
- import type { ClassInfo } from "lit-html/directives/class-map.js";
4
- import type { DirectiveResult } from "lit/directive.js";
5
- import type { ClassMapDirective } from "lit/directives/class-map.js";
6
- import type { StyleMapDirective } from "lit/directives/style-map.js";
7
- import type { DirectiveClass } from "lit-html/directive.js";
1
+ import { Nil } from '@arcgis/components-utils';
2
+ import { Properties as CssProperties } from 'csstype';
3
+ import { ClassInfo } from 'lit-html/directives/class-map.js';
4
+ import { DirectiveResult } from 'lit/directive.js';
5
+ import { ClassMapDirective } from 'lit/directives/class-map.js';
6
+ import { StyleMapDirective } from 'lit/directives/style-map.js';
7
+ import { DirectiveClass, ElementPart, Directive } from 'lit-html/directive.js';
8
+ import { noChange } from 'lit';
8
9
  /**
9
10
  * You likely won't have to import this directly. It will be added during
10
11
  * _JSX to lit-html_ conversion.
@@ -55,6 +56,22 @@ export declare const safeClassMap: (parameters: ClassInfo | Nil | string) => Dir
55
56
  * @private
56
57
  */
57
58
  export declare const safeStyleMap: (parameters: CssProperties | Nil | string) => DirectiveResult<typeof StyleMapDirective> | Nil | string;
59
+ declare class DeferLoad extends Directive {
60
+ update(part: ElementPart): void;
61
+ render(): typeof noChange;
62
+ }
63
+ /**
64
+ * @private
65
+ * Do not use this directive directly. Use the `deferLoad` JSX prop instead.
66
+ * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#deferring-web-component-load)
67
+ */
68
+ export declare const deferLoad: DirectiveResult<typeof DeferLoad>;
69
+ /**
70
+ * @private
71
+ * Do not use this directly. Use the `deferLoad` JSX prop instead.
72
+ * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#deferring-web-component-load)
73
+ */
74
+ export declare const deferredLoaders: Map<string, () => Promise<unknown>>;
58
75
  /**
59
76
  * Creates a user-facing directive function from a Directive class. This
60
77
  * function has the same parameters as the directive's render() method.
@@ -75,3 +92,4 @@ export declare const directive: <C extends DirectiveClass>(c: C) => (...values:
75
92
  * "never" to allow it be set as a value for any JSX attribute.
76
93
  */
77
94
  export declare const live: (value: unknown) => never;
95
+ export {};
@@ -1,13 +1,9 @@
1
- /**
2
- * Parts of this file are auto-generated or auto-updated by the `generate-jsx-types`
3
- * script.
4
- */
5
- import type { DirectiveResult } from "lit/directive.js";
6
- import type { ClassInfo, ClassMapDirective } from "lit/directives/class-map.js";
7
- import type { StyleMapDirective } from "lit/directives/style-map.js";
8
- import type { ChangeEventHandlerUnion, CustomAttributes, EventHandlerUnion, FocusEventHandlerUnion, InputEventHandlerUnion } from "./baseTypes";
9
- import type { JsxNode } from "./types";
10
- import type { Properties as CssProperties } from "csstype";
1
+ import { DirectiveResult } from 'lit/directive.js';
2
+ import { ClassInfo, ClassMapDirective } from 'lit/directives/class-map.js';
3
+ import { StyleMapDirective } from 'lit/directives/style-map.js';
4
+ import { ChangeEventHandlerUnion, CustomAttributes, EventHandlerUnion, FocusEventHandlerUnion, InputEventHandlerUnion } from './baseTypes';
5
+ import { JsxNode } from './types';
6
+ import { Properties as CssProperties } from 'csstype';
11
7
  /**
12
8
  * Some attributes accepts numbers as a number or as a string, while also
13
9
  * accepting "inherit". Define the type as `number | string | "inherit"` rather
@@ -1,15 +1,7 @@
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";
1
+ import { TemplateResult } from 'lit-html';
2
+ import { DirectiveResult } from 'lit-html/directive.js';
3
+ import { HTMLElementTags, HTMLAttributes, GlobalEventHandlersCamelCase, SvgElementTags, DOMAttributes, AriaAttributes } from './generatedTypes';
4
+ import { CustomAttributes } from './baseTypes';
13
5
  /**
14
6
  * The "h" namespace is used to import JSX types for elements and attributes.
15
7
  * It is imported in order to avoid conflicting global JSX issues.
@@ -372,27 +364,8 @@ type FixupStencilEventCasing<PropertyName extends PropertyKey> = PropertyName ex
372
364
  * https://www.typescriptlang.org/docs/handbook/jsx.html
373
365
  */
374
366
  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
367
  export type Element = TemplateResult;
368
+ export type ElementType = JsxNode;
396
369
  export interface ElementClass {
397
370
  }
398
371
  export interface ElementAttributesProperty {
@@ -1,7 +1,7 @@
1
- import { Deferred } from "@arcgis/components-utils";
2
- import type { LitElement } from "./LitElement";
3
- import type { Runtime } from "./runtime";
4
- import type { ControllerManager } from "@arcgis/components-controllers";
1
+ import { Deferred } from '@arcgis/components-utils';
2
+ import { LitElement } from './LitElement';
3
+ import { Runtime } from './runtime';
4
+ import { ControllerManager } from '@arcgis/components-controllers';
5
5
  /**
6
6
  * Defines lazy-loading proxy components for all web components in this package.
7
7
  *
@@ -1,4 +1,4 @@
1
- import type { ProxyComponent } from "./lazyLoad";
1
+ import { ProxyComponent } from './lazyLoad';
2
2
  /**
3
3
  * If there is a parent component, tell it to await it's loaded() until we
4
4
  * completed load().
@@ -0,0 +1,5 @@
1
+ import { JsxNode } from './jsx/types';
2
+ /**
3
+ * Retrieve an HTML element to be manually appended to an existing component.
4
+ */
5
+ export declare function renderElement<Element extends HTMLElement = HTMLElement>(element: JsxNode): Element;
package/dist/runtime.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { CSSResult } from "lit";
2
- import type { LitElement } from "./LitElement";
1
+ import { CSSResult } from 'lit';
2
+ import { LitElement } from './LitElement';
3
3
  /**
4
4
  * `@arcgis/lumina` package may be bundled once but used by multiple packages with
5
5
  * different configuration options. For that reason, the configuration options
@@ -1,9 +1,5 @@
1
- /**
2
- * Lots of silencing of ESLint in this file to be compatible with Stencil's
3
- * unsafe typings.
4
- */
5
- import { type RenderInfo } from "@lit-labs/ssr/lib/render.js";
6
- import type { Readable } from "node:stream";
1
+ import { RenderInfo } from '@lit-labs/ssr/lib/render.js';
2
+ import { Readable } from 'node:stream';
7
3
  /**
8
4
  * @deprecated
9
5
  * Use `render` from `@lit-labs/ssr` instead.
@@ -1,11 +1,10 @@
1
- // src/stencilSsrCompatibility/index.ts
2
1
  import { getWindow } from "@lit-labs/ssr/lib/dom-shim.js";
3
2
  import { render } from "@lit-labs/ssr/lib/render.js";
4
3
  import { html } from "@lit-labs/ssr/lib/server-template.js";
5
- import { unsafeStatic, withStatic } from "lit-html/static.js";
4
+ import { withStatic, unsafeStatic } from "lit-html/static.js";
6
5
  import { collectResult } from "@lit-labs/ssr/lib/render-result.js";
7
6
  import { RenderResultReadable } from "@lit-labs/ssr/lib/render-result-readable.js";
8
- var staticHtml = withStatic(html);
7
+ const staticHtml = withStatic(html);
9
8
  function createWindowFromHtml(templateHtml, uniqueId = Math.random().toString()) {
10
9
  const window = getWindow({ includeJSBuiltIns: true });
11
10
  window.document.defaultView = window;
@@ -7,7 +7,7 @@ interface ImportMetaEnv {
7
7
  }
8
8
  interface ImportMeta {
9
9
  url: string;
10
- readonly hot?: import("vite/types/hot.d.ts").ViteHotContext;
10
+ readonly hot?: import('vite/types/hot.d.ts').ViteHotContext;
11
11
  readonly env: ImportMetaEnv;
12
- glob: import("vite/types/importGlob.d.ts").ImportGlobFunction;
12
+ glob: import('vite/types/importGlob.d.ts').ImportGlobFunction;
13
13
  }
@@ -1,17 +1,9 @@
1
- import {
2
- lazyMetaGroupJoiner,
3
- lazyMetaItemJoiner,
4
- lazyMetaSubItemJoiner
5
- } from "./chunk-PGHUBTOM.js";
6
-
7
- // src/lazyLoad.ts
8
- import { Deferred, camelToKebab, isEsriInternalEnv } from "@arcgis/components-utils";
9
-
10
- // src/devOnlyDetectIncorrectLazyUsages.ts
1
+ import { Deferred, isEsriInternalEnv, camelToKebab } from "@arcgis/components-utils";
2
+ import { lazyMetaSubItemJoiner, lazyMetaGroupJoiner, lazyMetaItemJoiner } from "./config.js";
11
3
  function devOnlyDetectIncorrectLazyUsages(LitClass) {
12
4
  const genericPrototype = LitClass.prototype;
13
5
  const descriptor = Object.getOwnPropertyDescriptor(genericPrototype, "innerText");
14
- if (descriptor !== void 0 && descriptor.get === descriptor.set) {
6
+ if (descriptor !== void 0 && descriptor.set?.name === "setWrapper") {
15
7
  return;
16
8
  }
17
9
  const allowList = /* @__PURE__ */ new Set([
@@ -41,23 +33,40 @@ function devOnlyDetectIncorrectLazyUsages(LitClass) {
41
33
  if (allowList.has(key)) {
42
34
  return;
43
35
  }
44
- const callback = (...args) => {
36
+ function validateUsage(...args) {
37
+ const isDynamicallyCreatedComponentInTest = this === this.el;
38
+ if (isDynamicallyCreatedComponentInTest) {
39
+ return;
40
+ }
45
41
  if (key === "hasAttribute" && args[0] === "defer-hydration") {
46
42
  return false;
47
43
  }
48
44
  throw new Error(
49
45
  `You should not be trying to access this.${key} directly as it won't work correctly in lazy-builds. Instead, ${customErrorMessages[key] ?? `use this.el.${key}`}`
50
46
  );
51
- };
47
+ }
52
48
  if (typeof value.value === "function") {
53
- genericPrototype[key] = callback;
49
+ genericPrototype[key] = function functionWrapper(...args) {
50
+ return validateUsage.call(this, ...args) ?? value.value.call(this, ...args);
51
+ };
52
+ } else if (typeof value.get === "function") {
53
+ Object.defineProperty(genericPrototype, key, {
54
+ get() {
55
+ validateUsage.call(this);
56
+ return value.get.call(this);
57
+ },
58
+ set: typeof value.set === "function" ? function setWrapper(setValue) {
59
+ validateUsage.call(this);
60
+ value.set.call(this, setValue);
61
+ } : void 0
62
+ });
63
+ } else if (key === key.toUpperCase() && typeof value.value === "number") {
64
+ return;
54
65
  } else {
55
- Object.defineProperty(genericPrototype, key, { get: callback, set: callback });
66
+ throw new Error(`Unexpected value type for ${key}: ${value}`);
56
67
  }
57
68
  });
58
69
  }
59
-
60
- // src/lifecycleSupport.ts
61
70
  function attachToAncestor(child) {
62
71
  let ancestor = child;
63
72
  while (ancestor = ancestor.parentNode ?? ancestor.host) {
@@ -71,9 +80,7 @@ function attachToAncestor(child) {
71
80
  }
72
81
  return false;
73
82
  }
74
-
75
- // src/lazyLoad.ts
76
- var makeDefineCustomElements = (runtime, structure) => function defineCustomElements(windowOrOptions, options) {
83
+ const makeDefineCustomElements = (runtime, structure) => function defineCustomElements(windowOrOptions, options) {
77
84
  if (!globalThis.customElements) {
78
85
  return;
79
86
  }
@@ -121,35 +128,19 @@ function createLazyElement([tagName, [load, compactMeta = ""]]) {
121
128
  globalThis.devOnly$ownTagNames?.add(tagName);
122
129
  }
123
130
  }
124
- var defineProperty = Object.defineProperty;
131
+ const defineProperty = Object.defineProperty;
125
132
  function parseCondensedProp(propAndAttribute) {
126
133
  const name = propAndAttribute.split(lazyMetaSubItemJoiner);
127
134
  return name.length === 1 ? [name[0], camelToKebab(name[0])] : name;
128
135
  }
129
- var HtmlElement = globalThis.HTMLElement ?? parseCondensedProp;
130
- var ProxyComponent = class extends HtmlElement {
136
+ const HtmlElement = globalThis.HTMLElement ?? parseCondensedProp;
137
+ class ProxyComponent extends HtmlElement {
131
138
  constructor() {
132
139
  super();
133
- /** @internal */
134
140
  this._store = {};
135
- /**
136
- * If attributeChangedCallback() is called before the LitElement is loaded,
137
- * store the attributes here, and replay later
138
- */
139
141
  this._pendingAttributes = [];
140
- /**
141
- * Resolved once LitElement's load() is complete.
142
- * Not read inside of this class, but needed for LitElement to determine if
143
- * it's closest ancestor finished load()
144
- */
145
142
  this._postLoad = new Deferred();
146
- /**
147
- * Resolved once LitElement's loaded() is complete
148
- */
149
143
  this._postLoaded = new Deferred();
150
- /**
151
- * Direct offspring that should be awaited before loaded() is emitted
152
- */
153
144
  this._offspring = [];
154
145
  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
155
146
  this._hmrSetProps = /* @__PURE__ */ new Set();
@@ -162,7 +153,7 @@ var ProxyComponent = class extends HtmlElement {
162
153
  if (ProxyClass._LitConstructor) {
163
154
  this._initializeComponent({ a: ProxyClass._LitConstructor });
164
155
  } else {
165
- void ProxyClass._loadPromise.then(this._initializeComponent.bind(this)).catch((error) => {
156
+ void ProxyClass._loadPromise.then(awaitTopLevelPolyfill).then(this._initializeComponent.bind(this)).catch((error) => {
166
157
  this._postLoaded.reject(error);
167
158
  setTimeout(() => {
168
159
  throw error;
@@ -384,7 +375,7 @@ var ProxyComponent = class extends HtmlElement {
384
375
  requestUpdate() {
385
376
  this._litElement?.requestUpdate();
386
377
  }
387
- };
378
+ }
388
379
  function syncLitElement([key, value]) {
389
380
  this[key] = value;
390
381
  }
@@ -409,13 +400,14 @@ function patchLitElement(parentClass) {
409
400
  devOnlyDetectIncorrectLazyUsages(parentClass);
410
401
  }
411
402
  }
412
-
413
- // src/utils.ts
414
- var noShadowRoot = {};
415
-
403
+ const awaitTopLevelPolyfill = async (module) => {
404
+ await module.$$;
405
+ return module;
406
+ };
407
+ const noShadowRoot = {};
416
408
  export {
417
- attachToAncestor,
418
- makeDefineCustomElements,
419
- ProxyComponent,
420
- noShadowRoot
409
+ ProxyComponent as P,
410
+ attachToAncestor as a,
411
+ makeDefineCustomElements as m,
412
+ noShadowRoot as n
421
413
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcgis/lumina",
3
- "version": "4.33.0-next.9",
3
+ "version": "4.33.0-next.90",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -20,8 +20,8 @@
20
20
  ],
21
21
  "license": "SEE LICENSE IN LICENSE.md",
22
22
  "dependencies": {
23
- "@arcgis/components-controllers": "4.33.0-next.9",
24
- "@arcgis/components-utils": "4.33.0-next.9",
23
+ "@arcgis/components-controllers": "4.33.0-next.90",
24
+ "@arcgis/components-utils": "4.33.0-next.90",
25
25
  "@lit-labs/ssr": "^3.2.2",
26
26
  "@lit-labs/ssr-client": "^1.1.7",
27
27
  "@lit/context": "^1.1.3",
@@ -1,21 +0,0 @@
1
- // src/config.ts
2
- var lazyMetaGroupJoiner = ";";
3
- var lazyMetaItemJoiner = ",";
4
- var lazyMetaSubItemJoiner = ":";
5
- var PropertyFlags = /* @__PURE__ */ ((PropertyFlags2) => {
6
- PropertyFlags2[PropertyFlags2["ATTRIBUTE"] = 1] = "ATTRIBUTE";
7
- PropertyFlags2[PropertyFlags2["REFLECT"] = 2] = "REFLECT";
8
- PropertyFlags2[PropertyFlags2["BOOLEAN"] = 4] = "BOOLEAN";
9
- PropertyFlags2[PropertyFlags2["NUMBER"] = 8] = "NUMBER";
10
- PropertyFlags2[PropertyFlags2["STATE"] = 16] = "STATE";
11
- PropertyFlags2[PropertyFlags2["READ_ONLY"] = 32] = "READ_ONLY";
12
- PropertyFlags2[PropertyFlags2["NO_ACCESSOR"] = 64] = "NO_ACCESSOR";
13
- return PropertyFlags2;
14
- })(PropertyFlags || {});
15
-
16
- export {
17
- lazyMetaGroupJoiner,
18
- lazyMetaItemJoiner,
19
- lazyMetaSubItemJoiner,
20
- PropertyFlags
21
- };
@@ -1 +0,0 @@
1
- export {};