@arcgis/lumina 4.31.0-next.85 → 4.31.0-next.86

package/dist/LitElement.d.ts

@@ -45,7 +45,13 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
      * only to satisfy the type checker.
      */
     options?: LitElementPropertyDeclaration | number | [number, LitElementPropertyDeclaration]): void;
-    /** @internal */
+    /**
+     * Since we can't pass arguments to web component constructor, before lazy
+     * loading logic calls document.createElement(), it temporary sets this static
+     * property.
+     *
+     * @internal
+     * */
     static lazy: ProxyComponent | undefined;
     static readonly lumina = true;
     /**
@@ -67,10 +73,6 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
      * // build, but if you have to, you can detect if you are in a lazy build like so:
      * const isLazy = this.el !== this;
      * ```
-     *
-     * @remarks
-     * Since we can't pass arguments to web component constructor, we are using
-     * a temporary static property instead
      */
     el: HTMLElement;
     /**
@@ -116,8 +118,6 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
     private _postLoaded;
     constructor();
     connectedCallback(): void;
-    /** Do asynchronous component load */
-    private _load;
     /**
      * Overwrite Lit's default behavior of attaching shadow root to the lit
      * element, and instead use this.el to support lazy builds.
@@ -125,6 +125,8 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
      * Also, support the case when component asked to not use shadow root
      */
     protected createRenderRoot(): DocumentFragment | HTMLElement;
+    /** Do asynchronous component load */
+    private _load;
     /**
      * Overwriting default shouldUpdate simply to get access to
      * "changedProperties" so that we can later provide it to ControllerManager

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { handleComponentMetaUpdate, handleHmrUpdate } from "./hmrSupport";
 export type { DefineCustomElements, LazyLoadOptions } from "./lazyLoad";
 export { makeDefineCustomElements } from "./lazyLoad";
 export { LitElement } from "./LitElement";
-export { PublicLitElement } from "./PublicLitElement";
+export type { PublicLitElement } from "./PublicLitElement";
 export type { Runtime, RuntimeOptions, DevOnlyGlobalRuntime, DevOnlyGlobalComponentRefCallback } from "./runtime";
 export { makeRuntime } from "./runtime";
 export * from "./jsx/jsx";

package/dist/index.js

@@ -76,7 +76,10 @@ function devOnlyDetectIncorrectLazyUsages(LitClass) {
     ...Object.getOwnPropertyDescriptors(Node.prototype),
     ...Object.getOwnPropertyDescriptors(EventTarget.prototype)
   }).filter(([key, { value }]) => typeof value === "function" && !allowList.has(key)).forEach(([key]) => {
-    genericPrototype[key] = () => {
+    genericPrototype[key] = (...args) => {
+      if (key === "hasAttribute" && args[0] === "defer-hydration") {
+        return false;
+      }
       throw new Error(
         `You should not be calling this.${key}() directly as it won't work correctly in lazy-builds. Instead, ${customErrorMessages[key] ?? `use this.el.${key}()`}`
       );
@@ -112,11 +115,6 @@ var makeDefineCustomElements = (runtime, structure) => function defineCustomElem
   if (resourcesUrl) {
     runtime.setAssetPath(resourcesUrl);
   }
-  const hideUntilHydrated = new CSSStyleSheet();
-  hideUntilHydrated.replaceSync(
-    `:is(${Object.keys(structure).join(",")}):not([${runtime.hydratedAttribute}]){visibility:hidden}[${runtime.hydratedAttribute}]{visibility:inherit}`
-  );
-  document.adoptedStyleSheets = [...document.adoptedStyleSheets, hideUntilHydrated];
   Object.entries(structure).forEach(createLazyElement);
 };
 function createLazyElement([tagName, [load, compactMeta = ""]]) {
@@ -487,7 +485,7 @@ if (!alreadyHadObservers) {
 
 // src/LitElement.ts
 import { Deferred as Deferred2, camelToKebab as camelToKebab3 } from "@arcgis/components-utils";
-import { LitElement as OriginalLitElement } from "lit";
+import { LitElement as OriginalLitElement, isServer } from "lit";
 import { useControllerManager } from "@arcgis/components-controllers";
 var emptyFunction = () => void 0;
 var _LitElement = class _LitElement extends OriginalLitElement {
@@ -512,10 +510,6 @@ var _LitElement = class _LitElement extends OriginalLitElement {
      * // build, but if you have to, you can detect if you are in a lazy build like so:
      * const isLazy = this.el !== this;
      * ```
-     *
-     * @remarks
-     * Since we can't pass arguments to web component constructor, we are using
-     * a temporary static property instead
      */
     this.el = this.constructor.lazy ?? this;
     /**
@@ -551,16 +545,18 @@ var _LitElement = class _LitElement extends OriginalLitElement {
     if (process.env.NODE_ENV !== "production") {
       globalThis.devOnly$luminaComponentRefCallback?.(this);
     }
+    if (isServer) {
+      this.el.setAttribute(this.constructor.runtime.hydratedAttribute, "");
+    }
   }
   static finalizeStyles(styles) {
     if (process.env.NODE_ENV === "test" && Array.isArray(styles)) {
       styles = styles.filter(Boolean);
     }
     const finalizedStyles = super.finalizeStyles(styles);
-    const Class = this.constructor;
-    const options = Class.shadowRootOptions;
+    const options = this.constructor.shadowRootOptions;
     const useLightDom = options === noShadowRoot;
-    return this.runtime === void 0 || useLightDom ? finalizedStyles : [...this.runtime.commonStyles, ...finalizedStyles];
+    return this.runtime?.commonStyles === void 0 || useLightDom ? finalizedStyles : [this.runtime.commonStyles, ...finalizedStyles];
   }
   static createProperty(name, options) {
     const flags = typeof options === "number" ? options : Array.isArray(options) ? options[0] : 0;
@@ -598,32 +594,15 @@ var _LitElement = class _LitElement extends OriginalLitElement {
     });
   }
   connectedCallback() {
+    if (this.el.hasAttribute("defer-hydration")) {
+      return;
+    }
     const isFirstCall = !this.manager.connectedCalled;
     super.connectedCallback();
     if (isFirstCall) {
       queueMicrotask(() => void this._load().catch(this._postLoaded.reject));
     }
   }
-  /** Do asynchronous component load */
-  async _load() {
-    const parentLoadPromise = this._ancestorLoad ?? attachToAncestor(this, this);
-    if (parentLoadPromise) {
-      await parentLoadPromise;
-    }
-    await this.manager._load();
-    this._enableUpdating(true);
-    this.performUpdate();
-    this._postLoad.resolve();
-    const pendingChildren = this._offspring.filter((loaded) => !loaded.manager?.loadedCalled);
-    if (pendingChildren.length) {
-      await Promise.allSettled(pendingChildren.map(async (child) => await child.componentOnReady()));
-    }
-    this._offspring.length = 0;
-    const Class = this.constructor;
-    this.el.setAttribute(Class.runtime.hydratedAttribute, "");
-    this.manager._loaded();
-    this._postLoaded.resolve();
-  }
   /**
    * Overwrite Lit's default behavior of attaching shadow root to the lit
    * element, and instead use this.el to support lazy builds.
@@ -631,17 +610,21 @@ var _LitElement = class _LitElement extends OriginalLitElement {
    * Also, support the case when component asked to not use shadow root
    */
   createRenderRoot() {
-    if (process.env.NODE_ENV !== "production" && this.el.shadowRoot !== null) {
-      return this.el.shadowRoot;
-    }
+    const existingShadowRoot = this.el.shadowRoot;
     const Class = this.constructor;
     const options = Class.shadowRootOptions;
     const useLightDom = options === noShadowRoot;
-    const renderRoot = useLightDom ? this.el : this.el.attachShadow(options);
+    const renderRoot = existingShadowRoot ?? (useLightDom ? this.el : this.el.attachShadow(options));
     Object.defineProperty(this, "shadowRoot", {
       // Create shadow root on the proxy instance, to make Lit render content there
       value: renderRoot
     });
+    if (existingShadowRoot) {
+      if (process.env.NODE_ENV === "production") {
+        OriginalLitElement.prototype.createRenderRoot.call(this);
+      }
+      return existingShadowRoot;
+    }
     const domRoot = renderRoot.getRootNode();
     domRoot.adoptedStyleSheets = [
       ...domRoot.adoptedStyleSheets,
@@ -649,6 +632,25 @@ var _LitElement = class _LitElement extends OriginalLitElement {
     ];
     return renderRoot;
   }
+  /** Do asynchronous component load */
+  async _load() {
+    const parentLoadPromise = this._ancestorLoad ?? attachToAncestor(this, this);
+    if (parentLoadPromise) {
+      await parentLoadPromise;
+    }
+    await this.manager._load();
+    this._enableUpdating(true);
+    this.performUpdate();
+    this._postLoad.resolve();
+    const pendingChildren = this._offspring.filter((loaded) => !loaded.manager?.loadedCalled);
+    if (pendingChildren.length) {
+      await Promise.allSettled(pendingChildren.map(async (child) => await child.componentOnReady()));
+    }
+    this._offspring.length = 0;
+    this.el.setAttribute(this.constructor.runtime.hydratedAttribute, "");
+    this.manager._loaded();
+    this._postLoaded.resolve();
+  }
   /**
    * Overwriting default shouldUpdate simply to get access to
    * "changedProperties" so that we can later provide it to ControllerManager
@@ -697,53 +699,20 @@ if (process.env.NODE_ENV !== "production") {
   );
 }
 
-// src/PublicLitElement.ts
-var PublicLitElement = class extends HTMLElement {
-  /**
-   * Create a promise that resolves once component is fully loaded.
-   *
-   * @example
-   * const map = document.createElement("arcgis-map");
-   * document.body.append(map);
-   * map.componentOnReady().then(() => {
-   *   console.log("Map is ready to go!");
-   * });
-   */
-  async componentOnReady() {
-    await Promise.resolve();
-    return this;
-  }
-};
-
 // src/runtime.ts
-import { unsafeCSS } from "lit";
-function makeRuntime({
-  defaultAssetsUrl,
-  hydratedAttribute = "hydrated",
-  commonStyles,
-  globalStyles
-}) {
-  const href = globalThis.location?.href;
+function makeRuntime(options) {
   let assetPath;
-  setAssetPath(defaultAssetsUrl);
-  function setAssetPath(path) {
-    assetPath = new URL(path, href).href;
-  }
-  function getAssetPath(suffix) {
-    const assetUrl = new URL(suffix, assetPath);
-    return assetUrl.origin !== globalThis.location?.origin ? assetUrl.href : assetUrl.pathname;
-  }
-  const hideUntilHydrated = unsafeCSS(`:host(:not([${hydratedAttribute}])){visibility:hidden}`);
-  if (globalStyles) {
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, globalStyles.styleSheet];
-  }
+  const setAssetPath = (path) => {
+    assetPath = new URL(path, globalThis.location?.href).href;
+  };
   const runtime = {
-    defaultAssetsUrl,
-    getAssetPath,
+    ...options,
+    // FEATURE: research https://vitejs.dev/guide/build.html#advanced-base-options
+    getAssetPath(suffix) {
+      const assetUrl = new URL(suffix, assetPath);
+      return assetUrl.origin !== globalThis.location?.origin ? assetUrl.href : assetUrl.pathname;
+    },
     setAssetPath,
-    hydratedAttribute,
-    commonStyles: [...commonStyles ? [commonStyles] : [], hideUntilHydrated],
-    globalStyles,
     customElement(tagName, component) {
       component.runtime = runtime;
       component.tagName = tagName;
@@ -752,6 +721,7 @@ function makeRuntime({
       }
     }
   };
+  setAssetPath(options.defaultAssetPath);
   if (process.env.NODE_ENV !== "production") {
     globalThis.devOnly$luminaRuntime = runtime;
   }
@@ -796,7 +766,6 @@ function createPrototypeProxy(tagName) {
 }
 export {
   LitElement,
-  PublicLitElement,
   bindAttribute,
   bindBooleanAttribute,
   bindEvent,

package/dist/runtime.d.ts

@@ -5,7 +5,7 @@ import type { LitElement } from "./LitElement";
  * different configuration options. For that reason, the configuration options
  * can not be a global object, but has to be an object that you pass around.
  */
-export type Runtime = {
+export type Runtime = RuntimeOptions & {
     /**
      * Get the base path to where the package assets can be found.
      * By default, the package asset path is set to "https://js.arcgis.com/<simplified-package-name>/<released-verion>/".
@@ -53,42 +53,42 @@ export type Runtime = {
      * ```
      */
     readonly customElement: (tagName: string, component: typeof LitElement) => void;
-    readonly defaultAssetsUrl: RuntimeOptions["defaultAssetsUrl"];
-    readonly hydratedAttribute: NonNullable<RuntimeOptions["hydratedAttribute"]>;
-    readonly commonStyles: readonly NonNullable<RuntimeOptions["commonStyles"]>[];
-    readonly globalStyles: RuntimeOptions["globalStyles"];
 };
 export type RuntimeOptions = {
     /**
-     * The default base URL to use for loading assets.
-     * Set this to `import.meta.env.BASE_URL`, which would be resolved by Vite
-     * based on the value you provided to the useLumina() plugin
+     * The default asset path to use in NPM and CDN builds.
+     *
+     * This option will be set by Lumina compiler based on the value of the
+     * `assets.defaultPath` option in the `useLumina()` plugin.
      */
-    readonly defaultAssetsUrl: URL | string;
+    readonly defaultAssetPath: string;
     /**
-     * The attribute that indicates a component has been fully loaded and ready to
-     * use. Defaults to "hydrated"
+     * The attribute that indicates a component has rendered it's content.
+     * Usually this attribute is added after your component's `loaded()` lifecycle
+     * happened. However, during SSR, "hydrated" is added right away on the
+     * server.
+     *
+     * Until element has this attribute, it will have `visibility:hidden` style
+     * applied.
+     *
+     * This option will be set by the Lumina compiler based on the value of
+     * the `css.hydratedAttribute` option in the `useLumina()` plugin.
      */
-    readonly hydratedAttribute?: string;
+    readonly hydratedAttribute: string;
     /**
      * Styles that you wish to make available in each component's shadow root, but
      * to not apply outside the shadow root
      *
-     * @example
-     * import { styles } from "./styles/index.css";
-     * export const runtime = makeRuntime({
-     *  defaultAssetsUrl: import.meta.env.BASE_URL,
-     *  commonStyles: styles,
-     * });
+     * This option will be set by Lumina compiler based on the value of the
+     * `css.commonStylesPath` option in the `useLumina()` plugin.
      */
     readonly commonStyles?: CSSResult;
-    /**
-     * Styles that you wish to applied to the entire page, even outside the shadow
-     * dom. Useful for declaring CSS variables.
-     */
-    readonly globalStyles?: CSSResult;
 };
-export declare function makeRuntime({ defaultAssetsUrl, hydratedAttribute, commonStyles, globalStyles, }: RuntimeOptions): Runtime;
+/**
+ * The options object will be provided by Lumina compiler at build-time.
+ * It should not be specified in the source code.
+ */
+export declare function makeRuntime(options?: RuntimeOptions): Runtime;
 /**
  * Exposing the reference to the runtime globally when in tests or development.
  * This is primarily for usage by dynamically created components in tests

package/dist/stencil-ssr-compatibility/index.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Lots of silencing of ESLint in this file to be compatible with Stencil's
+ * unsafe typings.
+ */
+/// <reference types="node" />
+import { type RenderInfo } from "@lit-labs/ssr/lib/render.js";
+import type { Readable } from "node:stream";
+/**
+ * @deprecated
+ * Use `render` from `@lit-labs/ssr` instead.
+ *
+ * @see https://lit.dev/docs/ssr/server-usage/
+ */
+export interface HydrateResults {
+    buildId: string;
+    diagnostics: any[];
+    url: string;
+    host: string;
+    hostname: string;
+    href: string;
+    port: string;
+    pathname: string;
+    search: string;
+    hash: string;
+    html: string;
+    components: HydrateComponent[];
+    anchors: any[];
+    imgs: any[];
+    scripts: any[];
+    styles: any[];
+    staticData: any[];
+    title: string;
+    hydratedCount: number;
+    httpStatus: number;
+}
+export interface HydrateComponent {
+    tag: string;
+    mode: string;
+    count: number;
+    depth: number;
+}
+/**
+ * @deprecated
+ * Use `getWindow` from `@lit-labs/ssr/lib/dom-shim` instead.
+ *
+ * @see https://lit.dev/docs/ssr/server-usage/
+ */
+export declare function createWindowFromHtml(templateHtml: string, uniqueId?: string): any;
+/**
+ * @deprecated
+ * Use `RenderResultReadable` from `@lit-labs/ssr` instead.
+ *
+ * @see https://lit.dev/docs/ssr/server-usage/
+ */
+export declare function streamToString(html: any, options?: Partial<RenderInfo>): Readable;
+/**
+ * @deprecated
+ * Use `render` from `@lit-labs/ssr` instead.
+ *
+ * @see https://lit.dev/docs/ssr/server-usage/
+ */
+export declare function renderToString(html: any, options?: Partial<RenderInfo>): Promise<HydrateResults>;
+export declare function renderToString(html: any, options: Partial<RenderInfo> | undefined, asStream: true): Readable;
+/**
+ * @deprecated
+ * Use `render` from `@lit-labs/ssr` instead.
+ *
+ * @see https://lit.dev/docs/ssr/server-usage/
+ */
+export declare function hydrateDocument(doc: any, options?: Partial<RenderInfo>): Promise<HydrateResults>;
+export declare function hydrateDocument(doc: any, options: Partial<RenderInfo> | undefined, asStream: true): Readable;
+/**
+ * @deprecated
+ * Use `render` from `@lit-labs/ssr` instead.
+ *
+ * @see https://lit.dev/docs/ssr/server-usage/
+ */
+export declare function serializeDocumentToString(doc: any, _unused?: unknown): string;

package/dist/stencil-ssr-compatibility/index.js

@@ -0,0 +1,88 @@
+// src/stencil-ssr-compatibility/index.ts
+import { getWindow } from "@lit-labs/ssr/lib/dom-shim.js";
+import { render } from "@lit-labs/ssr/lib/render.js";
+import { html } from "@lit-labs/ssr/lib/server-template.js";
+import { unsafeStatic, withStatic } from "lit/static-html.js";
+import { collectResult } from "@lit-labs/ssr/lib/render-result.js";
+import { RenderResultReadable } from "@lit-labs/ssr/lib/render-result-readable.js";
+var staticHtml = withStatic(html);
+function createWindowFromHtml(templateHtml, uniqueId = Math.random().toString()) {
+  const window = getWindow({ includeJSBuiltIns: true });
+  window.document.defaultView = window;
+  window.document.templateHtml = templateHtml;
+  window.document.buildId = uniqueId;
+  return window;
+}
+function streamToString(html2, options) {
+  const { result } = getRenderResult(html2, options);
+  return new RenderResultReadable(result);
+}
+function getRenderResult(rawSource, options) {
+  const maybeDocument = typeof rawSource === "object" && rawSource !== null ? "document" in rawSource ? rawSource.document : rawSource : void 0;
+  const source = maybeDocument && "templateHtml" in maybeDocument ? maybeDocument.templateHtml : maybeDocument && "documentElement" in maybeDocument ? maybeDocument.documentElement?.outerHTML ?? maybeDocument : rawSource;
+  const renderTemplate = typeof source === "string" ? staticHtml`${unsafeStatic(source)}` : source;
+  const tagNames = [];
+  const result = render(renderTemplate, {
+    customElementRendered(tagName) {
+      tagNames.push(tagName);
+    },
+    ...options
+  });
+  return { result, maybeDocument, tagNames };
+}
+function renderToString(html2, options, asStream = false) {
+  if (asStream) {
+    return streamToString(html2, options);
+  } else {
+    return resultsToString(html2, options);
+  }
+}
+async function resultsToString(html2, options) {
+  const { result, tagNames, maybeDocument } = getRenderResult(html2, options);
+  const collected = await collectResult(result);
+  const renderResult = {
+    buildId: maybeDocument?.buildId ?? Math.random().toString(),
+    diagnostics: [],
+    url: globalThis?.location?.href ?? "https://hydrate.stenciljs.com/",
+    host: globalThis?.location?.host ?? "hydrate.stenciljs.com",
+    hostname: globalThis?.location?.hostname ?? "hydrate.stenciljs.com",
+    href: globalThis?.location?.href ?? "https://hydrate.stenciljs.com/",
+    port: globalThis?.location?.port ?? "",
+    pathname: globalThis?.location?.pathname ?? "/",
+    search: globalThis?.location?.search ?? "",
+    hash: globalThis?.location?.hash ?? "",
+    html: collected,
+    httpStatus: 200,
+    hydratedCount: tagNames.length,
+    anchors: [],
+    components: tagNames.map((tag) => ({
+      tag,
+      mode: "$",
+      count: 1,
+      depth: 1
+    })),
+    imgs: [],
+    scripts: [],
+    staticData: [],
+    styles: [],
+    title: globalThis?.document?.title ?? "Vite + TS"
+  };
+  if (maybeDocument && "templateHtml" in maybeDocument) {
+    maybeDocument.outerHtml = collected;
+  }
+  return renderResult;
+}
+function hydrateDocument(doc, options, asStream) {
+  return renderToString(doc, options, asStream);
+}
+function serializeDocumentToString(doc, _unused) {
+  const maybeDocument = doc;
+  return maybeDocument.outerHtml ?? maybeDocument.templateHtml ?? String(maybeDocument);
+}
+export {
+  createWindowFromHtml,
+  hydrateDocument,
+  renderToString,
+  serializeDocumentToString,
+  streamToString
+};

package/dist/typings/importMeta.d.ts

@@ -4,7 +4,6 @@ interface ImportMetaEnv {
     MODE: string;
     DEV: boolean;
     PROD: boolean;
-    SSR: boolean;
 }
 interface ImportMeta {
     url: string;

package/dist/utils.d.ts

@@ -12,3 +12,9 @@
  * ```
  */
 export declare const noShadowRoot: ShadowRootInit;
+/**
+ * The above property is an empty object at runtime for bundle size reasons.
+ * While empty object is not a valid shadowRootOption, it is never passed to
+ * attachShadow() since we use this exact empty object as a magic value to opt
+ * out of shadow root.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/lumina",
-  "version": "4.31.0-next.85",
+  "version": "4.31.0-next.86",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -8,6 +8,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./config": "./dist/config.js",
+    "./stencil-ssr-compatibility": "./dist/stencil-ssr-compatibility/index.js",
     "./typings": {
       "types": "./dist/typings/index.d.ts"
     },
@@ -28,18 +29,20 @@
     "clean": "rimraf ./dist ./build ./turbo ./node_modules"
   },
   "dependencies": {
-    "@arcgis/components-controllers": "4.31.0-next.85",
-    "@arcgis/components-utils": "4.31.0-next.85",
+    "@arcgis/components-controllers": "4.31.0-next.86",
+    "@arcgis/components-utils": "4.31.0-next.86",
+    "@lit-labs/ssr": "^3.2.2",
+    "@lit-labs/ssr-client": "^1.1.7",
     "csstype": "^3.1.3",
     "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@arcgis/typescript-config": "4.31.0-next.85",
+    "@arcgis/typescript-config": "4.31.0-next.86",
     "@types/node": "^20.2.5",
     "eslint": "^8.55.0",
     "rimraf": "^5.0.0",
     "tsup": "^8.1.0",
     "typescript": "~5.4.0"
   },
-  "gitHead": "d44529729ac796e613fb10278d5844e41e26f6e1"
+  "gitHead": "f334d75f7c86dd52bebccb91e9e5d2a33f9afd30"
 }