@stencil/core 5.0.0-alpha.3 → 5.0.0-alpha.30

package/dist/declarations/stencil-public-compiler.js

@@ -29,7 +29,7 @@ const LOG_LEVELS = [
 /**
 * The collection of valid export behaviors.
 * Used to generate a type for typed configs as well as output target validation
-* for the `dist-custom-elements` output target.
+* for the `standalone` output target.
 *
 * Adding a value to this const array will automatically add it as a valid option on the
 * output target configuration for `customElementsExportBehavior`.
@@ -38,8 +38,7 @@ const LOG_LEVELS = [
 * - `auto-define-custom-elements`: Enables the auto-definition of a component and its children (recursively) in the custom elements registry. This
 * functionality allows consumers to bypass the explicit call to define a component, its children, its children's
 * children, etc. Users of this flag should be aware that enabling this functionality may increase bundle size.
-* - `bundle`: A `defineCustomElements` function will be exported from the distribution directory. This behavior was added to allow easy migration
-* from `dist-custom-elements-bundle` to `dist-custom-elements`.
+* - `bundle`: A `defineCustomElements` function will be exported from the distribution directory.
 * - `single-export-module`: All components will be re-exported from the specified directory's root `index.js` file.
 */
 const CustomElementsExportBehaviorOptions = [

package/dist/declarations/stencil-public-docs.d.ts

@@ -1,3 +1,5 @@
+import "rolldown";
+import "typescript";
 //#region src/declarations/stencil-private.d.ts
 /**
  * Information about a type used in a Stencil component or exported
@@ -20,6 +22,11 @@ interface ComponentCompilerPropertyComplexType {
    * annotation in the original source file.
    */
   references: ComponentCompilerTypeReferences;
+  /**
+   * @internal TypeScript AST node used for semantic type analysis during compilation.
+   * Not serialized, only used internally for improved type renaming logic.
+   */
+  _astNode?: any;
 }
 /**
  * A record of `ComponentCompilerTypeReference` entities.
@@ -90,6 +97,11 @@ interface ComponentCompilerMethodComplexType {
   parameters: JsonDocMethodParameter[];
   references: ComponentCompilerTypeReferences;
   return: string;
+  /**
+   * @internal TypeScript AST method node used for semantic type analysis during compilation.
+   * Not serialized, only used internally for improved type renaming logic.
+   */
+  _astNode?: any;
 }
 //#endregion
 //#region src/declarations/stencil-public-docs.d.ts
@@ -113,6 +125,13 @@ interface JsonDocs {
    * The metadata for the JSDocs for each component in a Stencil project
    */
   components: JsonDocsComponent[];
+  /**
+   * Project-level usage content, collected from markdown files in a `usage`
+   * directory at the project's {@link Config.srcDir} root (as opposed to
+   * per-component usage content, which lives in {@link JsonDocsComponent.usage}).
+   * Keyed by file name (without extension), same shape as component usage.
+   */
+  usage?: JsonDocsUsage;
   /**
    * The timestamp at which the metadata was generated, in the format YYYY-MM-DDThh:mm:ss
    */

package/dist/declarations/stencil-public-runtime.d.ts

@@ -55,6 +55,28 @@ interface ComponentOptions {
    * Array of relative links to folders of assets required by the component.
    */
   assetsDirs?: string[];
+  /**
+   * Relative URL to an external stylesheet providing document-level styles for this component.
+   * Unlike `styleUrl`, these styles are not scoped to shadow/scoped DOM - they are collected
+   * at build time and injected wherever `@import "stencil-globals"` appears in a global stylesheet.
+   *
+   * Useful for
+   * - pre-first-js-render styles (combatting cumulative layout shift)
+   * - host element and slotted content style
+   * - 'css-only' CEs - those that don't use a JS runtime at all
+   *
+   * @example
+   * ```tsx
+   * @Component({ tag: 'my-button', globalStyleUrl: './my-button.global.css' })
+   * ```
+   */
+  globalStyleUrl?: string;
+  /**
+   * Inline CSS string providing document-level styles for this component.
+   * Collected at build time and injected wherever `@import "stencil-globals"` appears.
+   * @see globalStyleUrl
+   */
+  globalStyle?: string;
 }
 /**
  * Shadow DOM encapsulation options for the `encapsulation` property.
@@ -83,7 +105,7 @@ interface ShadowEncapsulation {
 }
 /**
  * Patch types for non-shadow DOM components that use slots.
- * - `'all'`: Apply all slot-related patches (equivalent to `experimentalSlotFixes`)
+ * - `'all'`: Apply all slot-related patches (equivalent to `lightDomPatches: true`)
  * - `'children'`: Patch child node accessors (children, firstChild, lastChild, etc.)
  * - `'clone'`: Patch `cloneNode()` to handle slotted content
  * - `'insert'`: Patch `appendChild()`, `insertBefore()`, etc. for slot relocation
@@ -331,6 +353,7 @@ declare const Listen: ListenDecorator;
  * and object properties to their string literal values. This allows variables to be
  * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
  *
+ *
  * @example
  * ```ts
  * const MY_EVENT = 'myEvent';
@@ -461,7 +484,7 @@ declare function setNonce(nonce: string): void;
  * @param ref the ref to get the Stencil element for
  * @returns a reference to the element
  */
-declare function getElement(ref: any): HTMLStencilElement;
+declare function getElement<T extends HTMLElement = HTMLStencilElement>(ref: any): T;
 /**
  * Get the shadow root for a Stencil component's host element.
  * This works for both open and closed shadow DOM modes.
@@ -534,15 +557,16 @@ declare function setTagTransformer(transformer: TagTransformer): void;
  * @returns the transformed tag e.g. `new-my-tag`
  */
 declare function transformTag(tag: string): string;
+type MixinFactory = (base: MixedInCtor) => MixedInCtor;
 /**
- * @deprecated - Use `MixedInCtor` instead:
+ * A constructor type that can be used as the base for mixin factories.
+ *
  * ```ts
  * import { MixedInCtor } from '@stencil/core';
  *
  * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
  * ```
  */
-type MixinFactory = (base: MixedInCtor) => MixedInCtor;
 type MixedInCtor<T = {}> = new (...args: any[]) => T;
 /**
  * Compose multiple mixin classes into a single constructor.
@@ -615,6 +639,17 @@ interface ComponentDidUpdate {
    */
   componentDidUpdate(): void;
 }
+/**
+ * A map of `@Prop`/`@State` property names to their new and previous
+ * values, passed to `componentShouldUpdate` once per render cycle.
+ *
+ * Pass `this` as `T` to type `changes` against your component's own
+ * members, e.g. `componentShouldUpdate(changes: ComponentShouldUpdateChanges<this>)`.
+ */
+type ComponentShouldUpdateChanges<T = any> = { [K in Extract<keyof T, string>]?: {
+  newVal: T[K];
+  oldVal: T[K];
+}; };
 interface ComponentInterface {
   connectedCallback?(): void;
   disconnectedCallback?(): void;
@@ -640,14 +675,18 @@ interface ComponentInterface {
    */
   componentDidLoad?(): void;
   /**
-   * A `@Prop` or `@State` property changed and a rerender is about to be requested.
+   * One or more `@Prop` or `@State` properties changed and a rerender is
+   * about to be requested. `changes` contains every property that changed
+   * since the last render, keyed by property name.
    *
-   * Called multiple times throughout the life of
-   * the component as its properties change.
+   * Called once per render cycle, batching all properties that changed
+   * synchronously since the last render.
+   *
+   * Return `false` to prevent the pending render.
    *
    * componentShouldUpdate is not called on the first render.
    */
-  componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+  componentShouldUpdate?(changes: ComponentShouldUpdateChanges<this>): boolean | void;
   /**
    * The component is about to update and re-render.
    *
@@ -670,6 +709,54 @@ interface ComponentInterface {
   render?(): any;
   [memberName: string]: any;
 }
+/**
+ * A reusable behavior that hooks into a `ReactiveControllerHost`'s lifecycle. Modeled after Lit's
+ * `ReactiveController` pattern: implement the hooks you need, then register an instance with a host
+ * via `host.addController(this)`.
+ */
+interface ReactiveController {
+  hostConnected?(): void;
+  hostDisconnected?(): void;
+  hostWillLoad?(): Promise<void> | void;
+  hostDidLoad?(): void;
+  hostWillRender?(): Promise<void> | void;
+  hostDidRender?(): void;
+  hostWillUpdate?(): Promise<void> | void;
+  hostDidUpdate?(): void;
+}
+/**
+ * The shape added to a component by mixing in `ReactiveControllerHost` (see below).
+ */
+interface ReactiveControllerHostInterface extends ComponentInterface, HTMLElement {
+  readonly controllers: ReadonlySet<ReactiveController>;
+  addController(controller: ReactiveController): void;
+  removeController(controller: ReactiveController): void;
+  requestUpdate(): void;
+  /**
+   * Resolves once the next pending render commits. Matches the shape of Lit's
+   * `ReactiveControllerHost.updateComplete`, for interop with controllers written against Lit's API
+   * (e.g. `@lit/context`).
+   */
+  readonly updateComplete: Promise<boolean>;
+}
+/**
+ * A mixin factory (for use with `Mixin()`) that adds `ReactiveController` support to a component,
+ * forwarding each Stencil lifecycle method to every registered controller's matching `hostX` hook.
+ *
+ * ```ts
+ * import { Mixin, ReactiveControllerHost } from '@stencil/core';
+ * import { MouseController } from './mouse-controller';
+ *
+ * class MyComponent extends Mixin(ReactiveControllerHost) {
+ *   private mouse = new MouseController(this);
+ *   render() { return <Host>{this.mouse.pos.x}, {this.mouse.pos.y}</Host>; }
+ * }
+ * ```
+ *
+ * @param Base the class to extend.
+ * @returns a class extending `Base` with reactive-controller support.
+ */
+declare function ReactiveControllerHost<B extends MixedInCtor>(Base: B): MixedInCtor<InstanceType<B> & ReactiveControllerHostInterface>;
 interface EventEmitter<T = any> {
   emit: (data?: T) => CustomEvent<T>;
 }
@@ -683,13 +770,21 @@ interface QueueApi {
   clear?: () => void;
   flush?: (cb?: () => void) => void;
 }
+/**
+ * Minimal interface matched by signal objects (from @stencil/core/signals).
+ * Used in JSX attribute types.
+ */
+interface SignalRef<T = any> {
+  readonly value: T;
+  peek(): T;
+}
 /**
  * Host
  */
 interface HostAttributes {
   class?: string | {
     [className: string]: boolean;
-  };
+  } | SignalRef<string>;
   style?: {
     [key: string]: string | undefined;
   };
@@ -737,7 +832,7 @@ interface FunctionalUtilities {
   map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 interface FunctionalComponent<T = {}> {
-  (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[] | null;
+  (props: T, children: VNode[], utils: FunctionalUtilities): VNode | null;
 }
 /**
  * A Child VDOM node
@@ -748,7 +843,7 @@ interface FunctionalComponent<T = {}> {
  * {@link FunctionalUtilities}).
  */
 interface ChildNode {
-  vtag?: string | number | Function;
+  vtag?: string | number | Function | symbol | null;
   vkey?: string | number;
   vtext?: string;
   vchildren?: VNode[];
@@ -761,11 +856,11 @@ interface ChildNode {
  *
  * For further information: https://stenciljs.com/docs/host-element
  */
-declare const Host: FunctionalComponent<HostAttributes>;
+declare const Host: (props: HostAttributes) => VNode;
 /**
  * Fragment
  */
-declare const Fragment: FunctionalComponent<{}>;
+declare const Fragment: (props: {}) => VNode;
 /**
  * The "h" namespace is used to import JSX types for elements and attributes.
  * It is imported in order to avoid conflicting global JSX issues.
@@ -781,6 +876,7 @@ declare namespace h {
   function h(sel: any, data: VNodeData | null, children: VNode): VNode;
   function h(sel: any, data: VNodeData | null, ...children: (VNode | string | number)[]): VNode;
   namespace JSX {
+    type Element = VNode;
     interface IntrinsicElements extends LocalJSX.IntrinsicElements, JSXBase.IntrinsicElements {
       [tagName: string]: any;
     }
@@ -817,13 +913,15 @@ declare function jsxs(type: any, props: any, key?: string): VNode;
  */
 interface VNode {
   $flags$: number;
-  $tag$: string | number | Function;
+  $tag$: string | number | Function | symbol | null;
   $elm$: any;
   $text$: string;
   $children$: VNode[];
   $attrs$?: any;
   $name$?: string;
   $key$?: string | number;
+  /** Signal reference for vdom bypass: signal text nodes store the signal here. */
+  $signal$?: any;
 }
 interface VNodeData {
   class?: {
@@ -1092,6 +1190,7 @@ declare namespace JSXBase {
     onClose?: (event: Event) => void;
     open?: boolean;
     returnValue?: string;
+    closedby?: 'any' | 'closerequest' | 'none';
   }
   interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
     height?: number | string;
@@ -1129,6 +1228,8 @@ declare namespace JSXBase {
     allowtransparency?: string | boolean;
     frameBorder?: number | string;
     frameborder?: number | string;
+    fetchPriority?: 'high' | 'low' | 'auto';
+    fetchpriority?: 'high' | 'low' | 'auto';
     importance?: 'low' | 'auto' | 'high';
     height?: number | string;
     loading?: 'lazy' | 'auto' | 'eager';
@@ -1151,9 +1252,12 @@ declare namespace JSXBase {
     crossOrigin?: string;
     crossorigin?: string;
     decoding?: 'async' | 'auto' | 'sync';
+    fetchPriority?: 'high' | 'low' | 'auto';
+    fetchpriority?: 'high' | 'low' | 'auto';
     importance?: 'low' | 'auto' | 'high';
     height?: number | string;
     loading?: 'lazy' | 'auto' | 'eager';
+    referrerPolicy?: ReferrerPolicy;
     sizes?: string;
     src?: string;
     srcSet?: string;
@@ -1249,6 +1353,8 @@ declare namespace JSXBase {
   }
   interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
     as?: string;
+    fetchPriority?: 'high' | 'low' | 'auto';
+    fetchpriority?: 'high' | 'low' | 'auto';
     href?: string;
     hrefLang?: string;
     hreflang?: string;
@@ -1372,6 +1478,8 @@ declare namespace JSXBase {
     crossOrigin?: string;
     crossorigin?: string;
     defer?: boolean;
+    fetchPriority?: 'high' | 'low' | 'auto';
+    fetchpriority?: 'high' | 'low' | 'auto';
     importance?: 'low' | 'auto' | 'high';
     integrity?: string;
     nonce?: string;
@@ -1469,7 +1577,7 @@ declare namespace JSXBase {
     autofocus?: boolean | string;
     class?: string | {
       [className: string]: boolean;
-    };
+    } | SignalRef<string>;
     contentEditable?: boolean | string;
     contenteditable?: boolean | string;
     contextMenu?: string;
@@ -1487,7 +1595,10 @@ declare namespace JSXBase {
     tabIndex?: number;
     tabindex?: number | string;
     title?: string;
+    translate?: 'yes' | 'no' | (string & {});
     popover?: string | null;
+    focusgroup?: string;
+    focusgroupstart?: boolean;
     inputMode?: string;
     inputmode?: string;
     enterKeyHint?: string;
@@ -1528,7 +1639,7 @@ declare namespace JSXBase {
   interface SVGAttributes<T = SVGElement> extends DOMAttributes<T> {
     class?: string | {
       [className: string]: boolean;
-    };
+    } | SignalRef<string>;
     color?: string;
     height?: number | string;
     id?: string;
@@ -1929,10 +2040,13 @@ declare namespace JSXBase {
 interface JSXAttributes<T = Element> {
   key?: string | number;
   ref?: (elm?: T) => void;
+  children?: any;
 }
 interface CustomElementsDefineOptions {
   exclude?: string[];
   syncQueue?: boolean;
+  /** Scoped custom element registry to define components in. Defaults to the global registry. */
+  registry?: CustomElementRegistry;
   jmp?: (c: Function) => any;
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
@@ -1940,4 +2054,4 @@ interface CustomElementsDefineOptions {
   ce?: (eventName: string, opts?: any) => CustomEvent;
 }
 //#endregion
-export { AttachInternals, AttachInternalsDecorator, AttachInternalsOptions, AttrDeserialize, AttrDeserializeDecorator, Build, ChildNode, Component, ComponentDecorator, ComponentDidLoad, ComponentDidUpdate, ComponentInterface, ComponentOptions, ComponentWillLoad, ComponentWillUpdate, CustomElementsDefineOptions, Element, ElementDecorator, EncapsulationOptions, Env, ErrorHandler, Event, EventDecorator, EventEmitter, EventOptions, Fragment, FunctionalComponent, FunctionalUtilities, HTMLStencilElement, Host, HostAttributes, LocalJSX as JSX, JSXAttributes, JSXBase, Listen, ListenDecorator, ListenOptions, ListenTargetOptions, Method, MethodDecorator, MethodOptions, MixedInCtor, Mixin, MixinFactory, ModeStyles, NoneEncapsulation, Prop, PropDecorator, PropOptions, PropSerialize, PropSerializeDecorator, QueueApi, RafCallback, ResolutionHandler, ResolveVarFunction, ScopedEncapsulation, ShadowEncapsulation, ShadowRootOptions, SlotPatch, State, StateDecorator, TagTransformer, UserBuildConditionals, VNode, VNodeData, Watch, WatchDecorator, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, jsx, jsxs, readTask, render, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setTagTransformer, transformTag, writeTask };
+export { AttachInternals, AttachInternalsDecorator, AttachInternalsOptions, AttrDeserialize, AttrDeserializeDecorator, Build, ChildNode, Component, ComponentDecorator, ComponentDidLoad, ComponentDidUpdate, ComponentInterface, ComponentOptions, ComponentShouldUpdateChanges, ComponentWillLoad, ComponentWillUpdate, CustomElementsDefineOptions, Element, ElementDecorator, EncapsulationOptions, Env, ErrorHandler, Event, EventDecorator, EventEmitter, EventOptions, Fragment, FunctionalComponent, FunctionalUtilities, HTMLStencilElement, Host, HostAttributes, LocalJSX as JSX, JSXAttributes, JSXBase, Listen, ListenDecorator, ListenOptions, ListenTargetOptions, Method, MethodDecorator, MethodOptions, MixedInCtor, Mixin, ModeStyles, NoneEncapsulation, Prop, PropDecorator, PropOptions, PropSerialize, PropSerializeDecorator, QueueApi, RafCallback, ReactiveController, ReactiveControllerHost, ReactiveControllerHostInterface, ResolutionHandler, ResolveVarFunction, ScopedEncapsulation, ShadowEncapsulation, ShadowRootOptions, SignalRef, SlotPatch, State, StateDecorator, TagTransformer, UserBuildConditionals, VNode, VNodeData, Watch, WatchDecorator, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, jsx, jsxs, readTask, render, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setTagTransformer, transformTag, writeTask };

package/dist/fragment-Di1hWOC8.mjs

@@ -0,0 +1,4 @@
+//#region src/runtime/fragment.ts
+const Fragment = (_, children) => children;
+//#endregion
+export { Fragment as t };