feat(slot-polyfill): patch insertBefore & slotted node parentNode (#6096

) * chore: init * feat(slot-polyfill): patch `insertBefore` & slotted `parentNode` * chore: more tests --------- Co-authored-by: John Jenkins <[email protected]> Co-authored-by: Christian Bromann <[email protected]>
ionic-team · Jan 16, 2025 · efb40d5 · efb40d5
1 parent 2503dc5
commit efb40d5
Show file tree

Hide file tree

Showing 13 changed files with 446 additions and 52 deletions.
diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -1404,7 +1404,7 @@ export interface RenderNode extends HostElement {
   ['s-sr']?: boolean;
 
   /**
-   * Slot name
+   * Slot name of either the slot itself or the slotted node
    */
   ['s-sn']?: string;
 
@@ -1441,7 +1441,7 @@ export interface RenderNode extends HostElement {
    * This is a reference for a original location node
    * back to the node that's been moved around.
    */
-  ['s-nr']?: RenderNode;
+  ['s-nr']?: PatchedSlotNode | RenderNode;
 
   /**
    * Original Order:
@@ -1526,6 +1526,13 @@ export interface RenderNode extends HostElement {
    */
   __appendChild?: <T extends Node>(newChild: T) => T;
 
+  /**
+   * On a `scoped: true` component
+   * with `experimentalSlotFixes` flag enabled,
+   * gives access to the original `insertBefore` method
+   */
+  __insertBefore?: <T extends Node>(node: T, child: Node | null) => T;
+
   /**
    * On a `scoped: true` component
    * with `experimentalSlotFixes` flag enabled,
@@ -1534,6 +1541,77 @@ export interface RenderNode extends HostElement {
   __removeChild?: <T extends Node>(child: T) => T;
 }
 
+export interface PatchedSlotNode extends Node {
+  /**
+   * Slot name
+   */
+  ['s-sn']?: string;
+
+  /**
+   * Original Location Reference:
+   * A reference pointing to the comment
+   * which represents the original location
+   * before it was moved to its slot.
+   */
+  ['s-ol']?: RenderNode;
+
+  /**
+   * Slot host tag name:
+   * This is the tag name of the element where this node
+   * has been moved to during slot relocation.
+   *
+   * This allows us to check if the node has been moved and prevent
+   * us from thinking a node _should_ be moved when it may already be in
+   * its final destination.
+   *
+   * This value is set to `undefined` whenever the node is put back into its original location.
+   */
+  ['s-sh']?: string;
+
+  /**
+   * Is a `slot` node when `shadow: false` (or `scoped: true`).
+   *
+   * This is a node (either empty text-node or `<slot-fb>` element)
+   * that represents where a `<slot>` is located in the original JSX.
+   */
+  ['s-sr']?: boolean;
+
+  /**
+   * On a `scoped: true` component
+   * with `experimentalSlotFixes` flag enabled,
+   * returns the actual `parentNode` of the component
+   */
+  __parentNode?: RenderNode;
+
+  /**
+   * On a `scoped: true` component
+   * with `experimentalSlotFixes` flag enabled,
+   * returns the actual `nextSibling` of the component
+   */
+  __nextSibling?: RenderNode;
+
+  /**
+   * On a `scoped: true` component
+   * with `experimentalSlotFixes` flag enabled,
+   * returns the actual `previousSibling` of the component
+   */
+  __previousSibling?: RenderNode;
+
+  /**
+   * On a `scoped: true` component
+   * with `experimentalSlotFixes` flag enabled,
+   * returns the actual `nextElementSibling` of the component
+   */
+  __nextElementSibling?: RenderNode;
+
+  /**
+   * On a `scoped: true` component
+   * with `experimentalSlotFixes` flag enabled,
+   * returns the actual `nextElementSibling` of the component
+   */
+  __previousElementSibling?: RenderNode;
+}
+
 export type LazyBundlesRuntimeData = LazyBundleRuntimeData[];
 
 export type LazyBundleRuntimeData = [

diff --git a/src/mock-doc/node.ts b/src/mock-doc/node.ts
@@ -182,7 +182,7 @@ export class MockNode {
 
   remove() {
     if (this.parentNode != null) {
-      this.parentNode.removeChild(this);
+      (this as any).__parentNode ? (this as any).__parentNode.removeChild(this) : this.parentNode.removeChild(this);
     }
   }
 

diff --git a/src/runtime/client-hydrate.ts b/src/runtime/client-hydrate.ts
@@ -3,7 +3,7 @@ import { doc, plt } from '@platform';
 import { CMP_FLAGS } from '@utils';
 
 import type * as d from '../declarations';
-import { patchNextPrev } from './dom-extras';
+import { patchSlottedNode } from './dom-extras';
 import { createTime } from './profile';
 import {
   COMMENT_NODE_ID,
@@ -195,7 +195,7 @@ export const initializeClientHydrate = (
 
         if (BUILD.experimentalSlotFixes) {
           // patch this node for accessors like `nextSibling` (et al)
-          patchNextPrev(slottedItem.node);
+          patchSlottedNode(slottedItem.node);
         }
       }