@stencil/core 2.16.1 → 2.17.2-0

package/internal/stencil-public-compiler.d.ts

@@ -1,5 +1,6 @@
 import type { JsonDocs } from './stencil-public-docs';
 import type { PrerenderUrlResults } from '../internal';
+import type { ConfigFlags } from '../cli/config-flags';
 export * from './stencil-public-docs';
 /**
  * https://stenciljs.com/docs/config/
@@ -356,6 +357,29 @@ declare type Loose<T extends Object> = Record<string, any> & Partial<T>;
  * and have type information carry though as we construct an object which is a valid `Config`.
  */
 export declare type UnvalidatedConfig = Loose<Config>;
+/**
+ * Helper type to strip optional markers from keys in a type, while preserving other type information for the key.
+ * This type takes a union of keys, K, in type T to allow for the type T to be gradually updated.
+ *
+ * ```typescript
+ * type Foo { bar?: number, baz?: string }
+ * type ReqFieldFoo = RequireFields<Foo, 'bar'>; // { bar: number, baz?: string }
+ * ```
+ */
+declare type RequireFields<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+/**
+ * Fields in {@link Config} to make required for {@link ValidatedConfig}
+ */
+declare type StrictConfigFields = 'flags' | 'logger';
+/**
+ * A version of {@link Config} that makes certain fields required. This type represents a valid configuration entity.
+ * When a configuration is received by the user, it is a bag of unverified data. In order to make stricter guarantees
+ * about the data from a type-safety perspective, this type is intended to be used throughout the codebase once
+ * validations have occurred at runtime.
+ */
+export declare type ValidatedConfig = RequireFields<Config, StrictConfigFields>;
 export interface HydratedFlag {
     /**
      * Defaults to `hydrated`.
@@ -505,51 +529,6 @@ export interface DevServerEditor {
     supported?: boolean;
     priority?: number;
 }
-export interface ConfigFlags {
-    task?: TaskCommand;
-    args?: string[];
-    knownArgs?: string[];
-    unknownArgs?: string[];
-    address?: string;
-    build?: boolean;
-    cache?: boolean;
-    checkVersion?: boolean;
-    ci?: boolean;
-    compare?: boolean;
-    config?: string;
-    debug?: boolean;
-    dev?: boolean;
-    docs?: boolean;
-    docsApi?: string;
-    docsJson?: string;
-    e2e?: boolean;
-    emulate?: string;
-    es5?: boolean;
-    esm?: boolean;
-    headless?: boolean;
-    help?: boolean;
-    log?: boolean;
-    logLevel?: string;
-    verbose?: boolean;
-    maxWorkers?: number;
-    open?: boolean;
-    port?: number;
-    prerender?: boolean;
-    prod?: boolean;
-    profile?: boolean;
-    root?: string;
-    screenshot?: boolean;
-    screenshotConnector?: string;
-    serve?: boolean;
-    serviceWorker?: boolean;
-    spec?: boolean;
-    ssr?: boolean;
-    stats?: boolean;
-    updateScreenshot?: boolean;
-    version?: boolean;
-    watch?: boolean;
-    devtools?: boolean;
-}
 export declare type TaskCommand = 'build' | 'docs' | 'generate' | 'g' | 'help' | 'info' | 'prerender' | 'serve' | 'telemetry' | 'test' | 'version';
 export declare type PageReloadStrategy = 'hmr' | 'pageReload' | null;
 /**
@@ -1653,7 +1632,29 @@ export interface EmulateViewport {
      */
     isLandscape?: boolean;
 }
-export declare type LogLevel = 'debug' | 'info' | 'warn' | 'error' | string;
+/**
+ * This sets the log level hierarchy for our terminal logger, ranging from
+ * most to least verbose.
+ *
+ * Ordering the levels like this lets us easily check whether we should log a
+ * message at a given time. For instance, if the log level is set to `'warn'`,
+ * then anything passed to the logger with level `'warn'` or `'error'` should
+ * be logged, but we should _not_ log anything with level `'info'` or `'debug'`.
+ *
+ * If we have a current log level `currentLevel` and a message with level
+ * `msgLevel` is passed to the logger, we can determine whether or not we should
+ * log it by checking if the log level on the message is further up or at the
+ * same level in the hierarchy than `currentLevel`, like so:
+ *
+ * ```ts
+ * LOG_LEVELS.indexOf(msgLevel) >= LOG_LEVELS.indexOf(currentLevel)
+ * ```
+ *
+ * NOTE: for the reasons described above, do not change the order of the entries
+ * in this array without good reason!
+ */
+export declare const LOG_LEVELS: readonly ["debug", "info", "warn", "error"];
+export declare type LogLevel = typeof LOG_LEVELS[number];
 /**
  * Common logger to be used by the compiler, dev-server and CLI. The CLI will use a
  * NodeJS based console logging and colors, and the web will use browser based
@@ -1980,7 +1981,7 @@ export interface LoadConfigInit {
  * operations around the codebase.
  */
 export interface LoadConfigResults {
-    config: UnvalidatedConfig;
+    config: ValidatedConfig;
     diagnostics: Diagnostic[];
     tsconfig: {
         path: string;
@@ -2048,14 +2049,32 @@ export interface PrerenderResults {
     duration: number;
     average: number;
 }
+/**
+ * Input for CSS optimization functions, including the input CSS
+ * string and a few boolean options which turn on or off various
+ * optimizations.
+ */
 export interface OptimizeCssInput {
     input: string;
     filePath?: string;
-    autoprefixer?: any;
+    autoprefixer?: boolean | null | AutoprefixerOptions;
     minify?: boolean;
     sourceMap?: boolean;
     resolveUrl?: (url: string) => Promise<string> | string;
 }
+/**
+ * This is not a real interface describing the options which can
+ * be passed to autoprefixer, for that see the docs, here:
+ * https://github.com/postcss/autoprefixer#options
+ *
+ * Instead, this basically just serves as a label type to track
+ * that arguments are being passed consistently.
+ */
+export declare type AutoprefixerOptions = Object;
+/**
+ * Output from CSS optimization functions, wrapping up optimized
+ * CSS and any diagnostics produced during optimization.
+ */
 export interface OptimizeCssOutput {
     output: string;
     diagnostics: Diagnostic[];

package/internal/testing/index.js

@@ -1089,5 +1089,5 @@ exports.setMode = e => modeResolutionChain.push(e), exports.setPlatformHelpers =
   }), 100));
  }));
 }, exports.stopAutoApplyChanges = stopAutoApplyChanges, exports.styles = styles, 
-exports.supportsConstructibleStylesheets = !1, exports.supportsListenerOptions = !0, 
+exports.supportsConstructableStylesheets = !1, exports.supportsListenerOptions = !0, 
 exports.win = win, exports.writeTask = writeTask;

package/internal/testing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/testing",
-  "version": "2.16.1",
+  "version": "2.17.2-0",
   "description": "Stencil internal testing platform to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "private": true

package/mock-doc/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc (CommonJS) v2.16.1 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc (CommonJS) v2.17.2-0 | MIT Licensed | https://stenciljs.com
  */
 var mockDoc = (function(exports) {
 'use strict';
@@ -689,6 +689,25 @@ class MockMouseEvent extends MockEvent {
     }
   }
 }
+class MockUIEvent extends MockEvent {
+  constructor(type, uiEventInitDic) {
+    super(type);
+    this.detail = null;
+    this.view = null;
+    if (uiEventInitDic != null) {
+      Object.assign(this, uiEventInitDic);
+    }
+  }
+}
+class MockFocusEvent extends MockUIEvent {
+  constructor(type, focusEventInitDic) {
+    super(type);
+    this.relatedTarget = null;
+    if (focusEventInitDic != null) {
+      Object.assign(this, focusEventInitDic);
+    }
+  }
+}
 class MockEventListener {
   constructor(type, handler) {
     this.type = type;
@@ -1601,6 +1620,9 @@ class MockElement extends MockNode {
     this.shadowRoot = shadowRoot;
     return shadowRoot;
   }
+  blur() {
+    dispatchEvent(this, new MockFocusEvent('blur', { relatedTarget: null, bubbles: true, cancelable: true, composed: true }));
+  }
   get shadowRoot() {
     return this.__shadowRoot || null;
   }
@@ -1669,6 +1691,9 @@ class MockElement extends MockNode {
   get firstElementChild() {
     return this.children[0] || null;
   }
+  focus(_options) {
+    dispatchEvent(this, new MockFocusEvent('focus', { relatedTarget: null, bubbles: true, cancelable: true, composed: true }));
+  }
   getAttribute(attrName) {
     if (attrName === 'style') {
       if (this.__style != null && this.__style.length > 0) {
@@ -2572,7 +2597,28 @@ function createElementNS(ownerDocument, namespaceURI, tagName) {
     return createElement(ownerDocument, tagName);
   }
   else if (namespaceURI === 'http://www.w3.org/2000/svg') {
-    return new MockSVGElement(ownerDocument, tagName);
+    switch (tagName.toLowerCase()) {
+      case 'text':
+      case 'tspan':
+      case 'tref':
+      case 'altglyph':
+      case 'textpath':
+        return new MockSVGTextContentElement(ownerDocument, tagName);
+      case 'circle':
+      case 'ellipse':
+      case 'image':
+      case 'line':
+      case 'path':
+      case 'polygon':
+      case 'polyline':
+      case 'rect':
+      case 'use':
+        return new MockSVGGraphicsElement(ownerDocument, tagName);
+      case 'svg':
+        return new MockSVGSVGElement(ownerDocument, tagName);
+      default:
+        return new MockSVGElement(ownerDocument, tagName);
+    }
   }
   else {
     return new MockElement(ownerDocument, tagName);
@@ -2719,6 +2765,98 @@ class MockScriptElement extends MockHTMLElement {
 patchPropAttributes(MockScriptElement.prototype, {
   type: String,
 });
+class MockDOMMatrix {
+  constructor() {
+    this.a = 1;
+    this.b = 0;
+    this.c = 0;
+    this.d = 1;
+    this.e = 0;
+    this.f = 0;
+    this.m11 = 1;
+    this.m12 = 0;
+    this.m13 = 0;
+    this.m14 = 0;
+    this.m21 = 0;
+    this.m22 = 1;
+    this.m23 = 0;
+    this.m24 = 0;
+    this.m31 = 0;
+    this.m32 = 0;
+    this.m33 = 1;
+    this.m34 = 0;
+    this.m41 = 0;
+    this.m42 = 0;
+    this.m43 = 0;
+    this.m44 = 1;
+    this.is2D = true;
+    this.isIdentity = true;
+  }
+  static fromMatrix() {
+    return new MockDOMMatrix();
+  }
+  inverse() {
+    return new MockDOMMatrix();
+  }
+  flipX() {
+    return new MockDOMMatrix();
+  }
+  flipY() {
+    return new MockDOMMatrix();
+  }
+  multiply() {
+    return new MockDOMMatrix();
+  }
+  rotate() {
+    return new MockDOMMatrix();
+  }
+  rotateAxisAngle() {
+    return new MockDOMMatrix();
+  }
+  rotateFromVector() {
+    return new MockDOMMatrix();
+  }
+  scale() {
+    return new MockDOMMatrix();
+  }
+  scaleNonUniform() {
+    return new MockDOMMatrix();
+  }
+  skewX() {
+    return new MockDOMMatrix();
+  }
+  skewY() {
+    return new MockDOMMatrix();
+  }
+  toJSON() { }
+  toString() { }
+  transformPoint() {
+    return new MockDOMPoint();
+  }
+  translate() {
+    return new MockDOMMatrix();
+  }
+}
+class MockDOMPoint {
+  constructor() {
+    this.w = 1;
+    this.x = 0;
+    this.y = 0;
+    this.z = 0;
+  }
+  toJSON() { }
+  matrixTransform() {
+    return new MockDOMMatrix();
+  }
+}
+class MockSVGRect {
+  constructor() {
+    this.height = 10;
+    this.width = 10;
+    this.x = 0;
+    this.y = 0;
+  }
+}
 class MockStyleElement extends MockHTMLElement {
   constructor(ownerDocument) {
     super(ownerDocument, 'style');
@@ -2751,9 +2889,6 @@ class MockSVGElement extends MockElement {
   get viewportElement() {
     return null;
   }
-  focus() {
-    /**/
-  }
   onunload() {
     /**/
   }
@@ -2771,6 +2906,27 @@ class MockSVGElement extends MockElement {
     return 0;
   }
 }
+class MockSVGGraphicsElement extends MockSVGElement {
+  getBBox(_options) {
+    return new MockSVGRect();
+  }
+  getCTM() {
+    return new MockDOMMatrix();
+  }
+  getScreenCTM() {
+    return new MockDOMMatrix();
+  }
+}
+class MockSVGSVGElement extends MockSVGGraphicsElement {
+  createSVGPoint() {
+    return new MockDOMPoint();
+  }
+}
+class MockSVGTextContentElement extends MockSVGGraphicsElement {
+  getComputedTextLength() {
+    return 0;
+  }
+}
 class MockBaseElement extends MockHTMLElement {
   constructor(ownerDocument) {
     super(ownerDocument, 'base');
@@ -3296,6 +3452,7 @@ const WINDOW_PROPS = [
   'HTMLElement',
   'Node',
   'NodeList',
+  'FocusEvent',
   'KeyboardEvent',
   'MouseEvent',
 ];
@@ -3303,6 +3460,7 @@ const GLOBAL_CONSTRUCTORS = [
   ['CustomEvent', MockCustomEvent],
   ['Event', MockEvent],
   ['Headers', MockHeaders],
+  ['FocusEvent', MockFocusEvent],
   ['KeyboardEvent', MockKeyboardEvent],
   ['MouseEvent', MockMouseEvent],
   ['Request', MockRequest],

package/mock-doc/index.d.ts

@@ -199,6 +199,62 @@ declare class MockScriptElement extends MockHTMLElement {
   get src(): string;
   set src(value: string);
 }
+declare class MockDOMMatrix {
+  static fromMatrix(): MockDOMMatrix;
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+  m11: number;
+  m12: number;
+  m13: number;
+  m14: number;
+  m21: number;
+  m22: number;
+  m23: number;
+  m24: number;
+  m31: number;
+  m32: number;
+  m33: number;
+  m34: number;
+  m41: number;
+  m42: number;
+  m43: number;
+  m44: number;
+  is2D: boolean;
+  isIdentity: boolean;
+  inverse(): MockDOMMatrix;
+  flipX(): MockDOMMatrix;
+  flipY(): MockDOMMatrix;
+  multiply(): MockDOMMatrix;
+  rotate(): MockDOMMatrix;
+  rotateAxisAngle(): MockDOMMatrix;
+  rotateFromVector(): MockDOMMatrix;
+  scale(): MockDOMMatrix;
+  scaleNonUniform(): MockDOMMatrix;
+  skewX(): MockDOMMatrix;
+  skewY(): MockDOMMatrix;
+  toJSON(): void;
+  toString(): void;
+  transformPoint(): MockDOMPoint;
+  translate(): MockDOMMatrix;
+}
+declare class MockDOMPoint {
+  w: number;
+  x: number;
+  y: number;
+  z: number;
+  toJSON(): void;
+  matrixTransform(): MockDOMMatrix;
+}
+declare class MockSVGRect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
 declare class MockStyleElement extends MockHTMLElement {
   sheet: MockCSSStyleSheet;
   constructor(ownerDocument: any);
@@ -212,13 +268,28 @@ declare class MockStyleElement extends MockHTMLElement {
 declare class MockSVGElement extends MockElement {
   get ownerSVGElement(): SVGSVGElement;
   get viewportElement(): SVGElement;
-  focus(): void;
   onunload(): void;
   get pathLength(): number;
   isPointInFill(_pt: DOMPoint): boolean;
   isPointInStroke(_pt: DOMPoint): boolean;
   getTotalLength(): number;
 }
+declare class MockSVGGraphicsElement extends MockSVGElement {
+  getBBox(_options?: {
+    clipped: boolean;
+    fill: boolean;
+    markers: boolean;
+    stroke: boolean;
+  }): MockSVGRect;
+  getCTM(): MockDOMMatrix;
+  getScreenCTM(): MockDOMMatrix;
+}
+declare class MockSVGSVGElement extends MockSVGGraphicsElement {
+  createSVGPoint(): MockDOMPoint;
+}
+declare class MockSVGTextContentElement extends MockSVGGraphicsElement {
+  getComputedTextLength(): number;
+}
 declare class MockBaseElement extends MockHTMLElement {
   constructor(ownerDocument: any);
   get href(): string;
@@ -315,6 +386,15 @@ declare class MockMouseEvent extends MockEvent {
   relatedTarget: EventTarget;
   constructor(type: string, mouseEventInitDic?: MouseEventInit);
 }
+declare class MockUIEvent extends MockEvent {
+  detail: number | null;
+  view: MockWindow | null;
+  constructor(type: string, uiEventInitDic?: UIEventInit);
+}
+declare class MockFocusEvent extends MockUIEvent {
+  relatedTarget: EventTarget | null;
+  constructor(type: 'blur' | 'focus', focusEventInitDic?: FocusEventInit);
+}
 declare class MockEventListener {
   type: string;
   handler: (ev?: any) => void;
@@ -438,6 +518,7 @@ declare class MockElement extends MockNode {
   constructor(ownerDocument: any, nodeName: string);
   addEventListener(type: string, handler: (ev?: any) => void): void;
   attachShadow(_opts: ShadowRootInit): any;
+  blur(): void;
   get shadowRoot(): any;
   set shadowRoot(shadowRoot: any);
   get attributes(): MockAttributeMap;
@@ -455,6 +536,9 @@ declare class MockElement extends MockNode {
   set dir(value: string);
   dispatchEvent(ev: MockEvent): boolean;
   get firstElementChild(): MockElement | null;
+  focus(_options?: {
+    preventScroll?: boolean;
+  }): void;
   getAttribute(attrName: string): any;
   getAttributeNS(namespaceURI: string, attrName: string): string;
   getBoundingClientRect(): {
@@ -758,6 +842,7 @@ declare class MockWindow {
   CustomEvent: typeof MockCustomEvent;
   Event: typeof MockEvent;
   Headers: typeof MockHeaders;
+  FocusEvent: typeof MockFocusEvent;
   KeyboardEvent: typeof MockKeyboardEvent;
   MouseEvent: typeof MockMouseEvent;
   constructor(html?: string | boolean);