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

package/internal/client/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Platform v4.38.3-dev.1764651902.52bdcb8 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.38.3-dev.1764738304.c6bb6f1 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -1307,6 +1307,9 @@ var hydrateScopedToShadow = () => {
 // src/runtime/vdom/h.ts
 import { BUILD as BUILD13 } from "@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;
@@ -1489,7 +1492,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"];
       }
@@ -3083,7 +3086,7 @@ render() {
   if (BUILD20.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;
         }
@@ -3923,7 +3926,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 = {
@@ -4114,7 +4120,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (BUILD28.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
       }
-      const tagName = BUILD28.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
+      const tagName = BUILD28.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -4332,6 +4338,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) {
@@ -4532,12 +4554,14 @@ export {
   setPlatformHelpers,
   setPlatformOptions,
   setScopedSSR,
+  setTagTransformer,
   setValue,
   styles,
   supportsConstructableStylesheets,
   supportsListenerOptions,
   supportsMutableAdoptedStyleSheets,
   supportsShadow,
+  transformTag,
   win,
   writeTask
 };

package/internal/client/package.json

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

package/internal/client/patch-browser.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Patch Browser v4.38.3-dev.1764651902.52bdcb8 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.38.3-dev.1764738304.c6bb6f1 | MIT Licensed | https://stenciljs.com
  */
 
 // src/client/client-patch-browser.ts

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.38.3-dev.1764651902.52bdcb8 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.38.3-dev.1764738304.c6bb6f1 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -1070,6 +1070,9 @@ var hydrateScopedToShadow = () => {
 // src/runtime/vdom/h.ts
 import { BUILD as BUILD7 } from "@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;
@@ -1252,7 +1255,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"];
       }
@@ -2846,7 +2849,7 @@ render() {
   if (BUILD14.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;
         }
@@ -3686,7 +3689,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 = {
@@ -3877,7 +3883,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (BUILD22.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
       }
-      const tagName = BUILD22.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
+      const tagName = BUILD22.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -4078,6 +4084,22 @@ function Mixin(...mixins) {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
+// 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) {
@@ -4652,9 +4674,15 @@ var isMemberInElement = (elm, memberName) => {
 var registerComponents = (Cstrs) => {
   for (const Cstr of Cstrs) {
     const exportName = Cstr.cmpMeta.$tagName$;
+    const transformedTagName = everywhere.tagTransform(exportName);
     cmpModules.set(exportName, {
       [exportName]: Cstr
     });
+    if (transformedTagName !== exportName) {
+      cmpModules.set(transformedTagName, {
+        [transformedTagName]: Cstr
+      });
+    }
   }
 };
 var win = window;
@@ -4803,12 +4831,14 @@ export {
   setNonce,
   setPlatformHelpers,
   setScopedSSR,
+  setTagTransformer,
   setValue,
   styles,
   supportsConstructableStylesheets,
   supportsListenerOptions,
   supportsMutableAdoptedStyleSheets,
   supportsShadow,
+  transformTag,
   win,
   writeTask
 };

package/internal/hydrate/package.json

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

package/internal/hydrate/runner.d.ts

@@ -3,6 +3,7 @@
 import { Readable } from 'node:stream';
 
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
+export type TagTransformer = (tag: string) => string;
 /**
  * Serialize a value to a string that can be deserialized later.
  * @param {unknown} value - The value to serialize.
@@ -271,5 +272,16 @@ export declare function renderToString(html: string | any, options: SerializeDoc
 export declare function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
 export declare function hydrateDocument(doc: any | string, options: HydrateDocumentOptions | undefined, asStream?: boolean): Readable;
 export declare function serializeDocumentToString(doc: Document, opts: HydrateFactoryOptions): string;
+/**
+ * Transforms a tag name using the current tag transformer
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag<T extends string>(tag: T): T;
+/**
+ * Sets the tag transformer to be used when rendering custom elements
+ * @param transformer the transformer function to use. Must return a string
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
 
 export {};