@stencil/core 4.38.3-dev.1764651902.52bdcb8 → 4.38.3-dev.1764738304.c6bb6f1

package/internal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal",
-  "version": "4.38.3-dev.1764651902.52bdcb8",
+  "version": "4.38.3-dev.1764738304.c6bb6f1",
   "description": "Stencil internals only to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "types": "./index.d.ts",

package/internal/stencil-core/index.d.ts

@@ -52,7 +52,9 @@ export {
   setMode,
   setNonce,
   setPlatformHelpers,
+  setTagTransformer,
   State,
+  transformTag,
   Watch,
   writeTask,
 } from '../stencil-public-runtime';

package/internal/stencil-private.d.ts

@@ -132,6 +132,7 @@ export interface BuildConditionals extends Partial<BuildFeatures> {
     shadowDomShim?: boolean;
     asyncQueue?: boolean;
     transformTagName?: boolean;
+    additionalTagTransformers?: boolean | 'prod';
     attachStyles?: boolean;
     experimentalSlotFixes?: boolean;
     experimentalScopedSlotChanges?: boolean;
@@ -1843,6 +1844,8 @@ export interface TransformCssToEsmInput {
     module?: 'cjs' | 'esm' | string;
     file?: string;
     tag?: string;
+    tags?: string[];
+    addTagTransformers: boolean;
     encapsulation?: string;
     /**
      * The mode under which the CSS will be applied.

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

@@ -338,8 +338,13 @@ interface ConfigExtrasBase {
     /**
      * Enables the tagNameTransform option of `defineCustomElements()`, so the component tagName
      * can be customized at runtime. Defaults to `false`.
+     * @deprecated This option has been deprecated in favour of `setTagTransformer` and `transformTag`. It will be removed in a future major version of Stencil.
      */
     tagNameTransform?: boolean;
+    /**
+     * Adds `transformTag` calls to css strings and querySelector(All) calls
+     */
+    additionalTagTransformers?: boolean | 'prod';
     /**
      * Experimental flag.
      * Updates the behavior of scoped components to align more closely with the behavior of the native
@@ -2711,6 +2716,14 @@ export interface TranspileOptions {
      * `tsconfig.json` to relative paths.
      */
     transformAliasedImportPaths?: boolean;
+    /**
+     * List of tags to transform, by default only the incoming component tag is transformed
+     */
+    tagsToTransform?: string[];
+    /**
+     * Adds `transformTag` calls to css strings and querySelector(All) calls
+     */
+    additionalTagTransformers?: boolean;
 }
 export type CompileTarget = 'latest' | 'esnext' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | 'es2015' | 'es5' | string | undefined;
 export interface TranspileResults {

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

@@ -386,6 +386,27 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type TagTransformer = (tag: string) => string;
+/**
+ * Sets a tag transformer to be used when rendering your custom elements.
+ * ```ts
+ * setTagTransformer((tag) => {
+ *  if (tag.startsWith('my-')) return `new-${tag}`
+ *  return tag;
+ * });
+ * ```
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
+ *
+ * @param transformer the transformer function to use which must return a string.
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
+/**
+ * Transforms a tag name using a transformer set via `setTagTransformer`
+ *
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag(tag: string): string;
 /**
  * @deprecated - Use `MixedInCtor` instead:
  * ```ts
@@ -1768,6 +1789,7 @@ export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;
     syncQueue?: boolean;
+    /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
     transformTagName?: (tagName: string) => string;
     jmp?: (c: Function) => any;
     raf?: (c: FrameRequestCallback) => number;

package/internal/testing/index.js

@@ -75,6 +75,7 @@ __export(index_exports, {
   setPlatformOptions: () => setPlatformOptions,
   setScopedSSR: () => setScopedSSR,
   setSupportsShadowDom: () => setSupportsShadowDom,
+  setTagTransformer: () => setTagTransformer,
   setValue: () => setValue,
   startAutoApplyChanges: () => startAutoApplyChanges,
   stopAutoApplyChanges: () => stopAutoApplyChanges,
@@ -83,6 +84,7 @@ __export(index_exports, {
   supportsListenerOptions: () => supportsListenerOptions,
   supportsMutableAdoptedStyleSheets: () => supportsMutableAdoptedStyleSheets,
   supportsShadow: () => supportsShadow,
+  transformTag: () => transformTag,
   win: () => win,
   writeTask: () => writeTask
 });
@@ -1408,6 +1410,9 @@ var hydrateScopedToShadow = () => {
 // src/runtime/vdom/h.ts
 var import_app_data6 = require("@stencil/core/internal/app-data");
 var h = (nodeName, vnodeData, ...children) => {
+  if (typeof nodeName === "string") {
+    nodeName = transformTag(nodeName);
+  }
   let child = null;
   let key = null;
   let slotName = null;
@@ -1590,7 +1595,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
     const node = childRenderNode.$elm$;
     if (!shadowRoot) {
-      node["s-hn"] = tagName.toUpperCase();
+      node["s-hn"] = transformTag(tagName).toUpperCase();
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
@@ -3184,7 +3189,7 @@ render() {
   if (import_app_data13.BUILD.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
     const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
     for (const childNode of children) {
-      if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
+      if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"] && childNode.nodeType === 1 /* ElementNode */) {
         if (isInitialLoad && childNode["s-ih"] == null) {
           childNode["s-ih"] = (_e = childNode.hidden) != null ? _e : false;
         }
@@ -4024,7 +4029,10 @@ var disconnectedCallback = async (elm) => {
 
 // src/runtime/bootstrap-custom-element.ts
 var defineCustomElement = (Cstr, compactMeta) => {
-  customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
+  customElements.define(
+    transformTag(compactMeta[1]),
+    proxyCustomElement(Cstr, compactMeta)
+  );
 };
 var proxyCustomElement = (Cstr, compactMeta) => {
   const cmpMeta = {
@@ -4215,7 +4223,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (import_app_data21.BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
       }
-      const tagName = import_app_data21.BUILD.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
+      const tagName = import_app_data21.BUILD.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -4433,6 +4441,22 @@ function render(vnode, container) {
   renderVdom(ref, vnode);
 }
 
+// src/runtime/tag-transform.ts
+var tagTransformer = void 0;
+function transformTag(tag) {
+  if (!tagTransformer) return tag;
+  return tagTransformer(tag);
+}
+function setTagTransformer(transformer) {
+  if (tagTransformer) {
+    console.warn(`
+      A tagTransformer has already been set. 
+      Overwriting it may lead to error and unexpected results if your components have already been defined.
+    `);
+  }
+  tagTransformer = transformer;
+}
+
 // src/runtime/vdom/vdom-annotations.ts
 var insertVdomAnnotations = (doc, staticComponents) => {
   if (doc != null) {
@@ -4641,6 +4665,7 @@ var scopedSSR = false;
   setPlatformOptions,
   setScopedSSR,
   setSupportsShadowDom,
+  setTagTransformer,
   setValue,
   startAutoApplyChanges,
   stopAutoApplyChanges,
@@ -4649,6 +4674,7 @@ var scopedSSR = false;
   supportsListenerOptions,
   supportsMutableAdoptedStyleSheets,
   supportsShadow,
+  transformTag,
   win,
   writeTask
 });

package/internal/testing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/testing",
-  "version": "4.38.3-dev.1764651902.52bdcb8",
+  "version": "4.38.3-dev.1764738304.c6bb6f1",
   "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