Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime): revert slot relocation forwarding #5222

Merged
merged 1 commit into from
Jan 12, 2024
Merged

fix(runtime): revert slot relocation forwarding #5222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions src/declarations/stencil-private.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1375,24 +1375,6 @@ export interface RenderNode extends HostElement {
*/
['s-sh']?: string;

/**
* Slot forward slot:
* This is the slot that the original `slot` tag element was going to be
* forwarded to in another element. For instance:
*
* ```html
* <my-cmp>
* <slot name="my-slot" slot="another-slot"></slot>
* </my-cmp>
* ```
*
* In this case, the value would be `another-slot`.
*
* This allows us to correctly set the `slot` attribute on an element when it is moved
* from a non-shadow to shadow element.
*/
['s-fs']?: string;

/**
* Original Location Reference:
* A reference pointing to the comment
Expand Down
37 changes: 0 additions & 37 deletions src/runtime/vdom/vdom-render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,6 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
// remember the content reference comment
elm['s-sr'] = true;

// Persist the name of the slot that this slot was going to be projected into.
elm['s-fs'] = newVNode.$attrs$?.slot;

// remember the content reference comment
elm['s-cr'] = contentRef;

Expand Down Expand Up @@ -192,13 +189,6 @@ const relocateToHostRoot = (parentElm: Element) => {
// Reset so we can correctly move the node around again.
childNode['s-sh'] = undefined;

// When putting an element node back in its original location,
// we need to reset the `slot` attribute back to the value it originally had
// so we can correctly relocate it again in the future
if (childNode.nodeType === NODE_TYPE.ElementNode && !!childNode['s-sn']) {
childNode.setAttribute('slot', childNode['s-sn']);
}

// Need to tell the render pipeline to check to relocate slot content again
checkSlotRelocate = true;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't comment on the line itself, but do we still need this if statement, also introduced in #4993?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep that can go too. Good call. Merged into commit d2ab331

Expand Down Expand Up @@ -227,13 +217,6 @@ const putBackInOriginalLocation = (parentElm: Node, recursive: boolean) => {
// Reset so we can correctly move the node around again.
childNode['s-sh'] = undefined;

// When putting an element node back in its original location,
// we need to reset the `slot` attribute back to the value it originally had
// so we can correctly relocate it again in the future
if (childNode.nodeType === NODE_TYPE.ElementNode) {
childNode.setAttribute('slot', childNode['s-sn'] ?? '');
}

checkSlotRelocate = true;
}

Expand Down Expand Up @@ -1086,26 +1069,6 @@ render() {
nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
}

// Handle a use-case where we relocate a slot where
// the slot name changes along the way (for instance, a default to a named slot).
// In this case, we need to update the relocated node's slot attribute to match
// the slot name it is being relocated into.
//
// There is a very niche use case where we may be relocating a text node. For now,
// we ignore anything that is not an element node since non-element nodes cannot have
// attributes to specify the slot. We'll deal with this if it becomes a problem... but super edge-case-y
if (
BUILD.experimentalSlotFixes &&
nodeToRelocate.nodeType === NODE_TYPE.ElementNode &&
slotRefNode['s-fs'] !== nodeToRelocate.getAttribute('slot')
) {
if (!slotRefNode['s-fs']) {
nodeToRelocate.removeAttribute('slot');
} else {
nodeToRelocate.setAttribute('slot', slotRefNode['s-fs']);
}
}

// Add it back to the dom but in its new home
// If we get to this point and `insertBeforeNode` is `null`, that means
// we're just going to append the node as the last child of the parent. Passing
Expand Down
67 changes: 0 additions & 67 deletions test/karma/test-app/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,6 @@ export namespace Components {
}
interface DomReattachCloneHost {
}
interface DropDown {
}
interface DropDownContent {
}
interface DynamicCssVariable {
}
interface DynamicImport {
Expand Down Expand Up @@ -223,8 +219,6 @@ export namespace Components {
}
interface NodeResolution {
}
interface NonShadowHost {
}
interface ParentReflectNanAttribute {
}
interface ParentWithReflectChild {
Expand Down Expand Up @@ -352,11 +346,6 @@ export namespace Components {
}
interface SlotNestedDefaultOrderParent {
}
interface SlotNestedNameChange {
}
interface SlotNestedNameChangeChild {
"state": boolean;
}
interface SlotNestedOrderChild {
}
interface SlotNestedOrderParent {
Expand Down Expand Up @@ -659,18 +648,6 @@ declare global {
prototype: HTMLDomReattachCloneHostElement;
new (): HTMLDomReattachCloneHostElement;
};
interface HTMLDropDownElement extends Components.DropDown, HTMLStencilElement {
}
var HTMLDropDownElement: {
prototype: HTMLDropDownElement;
new (): HTMLDropDownElement;
};
interface HTMLDropDownContentElement extends Components.DropDownContent, HTMLStencilElement {
}
var HTMLDropDownContentElement: {
prototype: HTMLDropDownContentElement;
new (): HTMLDropDownContentElement;
};
interface HTMLDynamicCssVariableElement extends Components.DynamicCssVariable, HTMLStencilElement {
}
var HTMLDynamicCssVariableElement: {
Expand Down Expand Up @@ -1033,12 +1010,6 @@ declare global {
prototype: HTMLNodeResolutionElement;
new (): HTMLNodeResolutionElement;
};
interface HTMLNonShadowHostElement extends Components.NonShadowHost, HTMLStencilElement {
}
var HTMLNonShadowHostElement: {
prototype: HTMLNonShadowHostElement;
new (): HTMLNonShadowHostElement;
};
interface HTMLParentReflectNanAttributeElement extends Components.ParentReflectNanAttribute, HTMLStencilElement {
}
var HTMLParentReflectNanAttributeElement: {
Expand Down Expand Up @@ -1339,18 +1310,6 @@ declare global {
prototype: HTMLSlotNestedDefaultOrderParentElement;
new (): HTMLSlotNestedDefaultOrderParentElement;
};
interface HTMLSlotNestedNameChangeElement extends Components.SlotNestedNameChange, HTMLStencilElement {
}
var HTMLSlotNestedNameChangeElement: {
prototype: HTMLSlotNestedNameChangeElement;
new (): HTMLSlotNestedNameChangeElement;
};
interface HTMLSlotNestedNameChangeChildElement extends Components.SlotNestedNameChangeChild, HTMLStencilElement {
}
var HTMLSlotNestedNameChangeChildElement: {
prototype: HTMLSlotNestedNameChangeChildElement;
new (): HTMLSlotNestedNameChangeChildElement;
};
interface HTMLSlotNestedOrderChildElement extends Components.SlotNestedOrderChild, HTMLStencilElement {
}
var HTMLSlotNestedOrderChildElement: {
Expand Down Expand Up @@ -1532,8 +1491,6 @@ declare global {
"dom-reattach-clone": HTMLDomReattachCloneElement;
"dom-reattach-clone-deep-slot": HTMLDomReattachCloneDeepSlotElement;
"dom-reattach-clone-host": HTMLDomReattachCloneHostElement;
"drop-down": HTMLDropDownElement;
"drop-down-content": HTMLDropDownContentElement;
"dynamic-css-variable": HTMLDynamicCssVariableElement;
"dynamic-import": HTMLDynamicImportElement;
"es5-addclass-svg": HTMLEs5AddclassSvgElement;
Expand Down Expand Up @@ -1579,7 +1536,6 @@ declare global {
"multiple-styles-cmp": HTMLMultipleStylesCmpElement;
"no-delegates-focus": HTMLNoDelegatesFocusElement;
"node-resolution": HTMLNodeResolutionElement;
"non-shadow-host": HTMLNonShadowHostElement;
"parent-reflect-nan-attribute": HTMLParentReflectNanAttributeElement;
"parent-with-reflect-child": HTMLParentWithReflectChildElement;
"reflect-nan-attribute": HTMLReflectNanAttributeElement;
Expand Down Expand Up @@ -1630,8 +1586,6 @@ declare global {
"slot-map-order-root": HTMLSlotMapOrderRootElement;
"slot-nested-default-order-child": HTMLSlotNestedDefaultOrderChildElement;
"slot-nested-default-order-parent": HTMLSlotNestedDefaultOrderParentElement;
"slot-nested-name-change": HTMLSlotNestedNameChangeElement;
"slot-nested-name-change-child": HTMLSlotNestedNameChangeChildElement;
"slot-nested-order-child": HTMLSlotNestedOrderChildElement;
"slot-nested-order-parent": HTMLSlotNestedOrderParentElement;
"slot-ng-if": HTMLSlotNgIfElement;
Expand Down Expand Up @@ -1762,10 +1716,6 @@ declare namespace LocalJSX {
}
interface DomReattachCloneHost {
}
interface DropDown {
}
interface DropDownContent {
}
interface DynamicCssVariable {
}
interface DynamicImport {
Expand Down Expand Up @@ -1878,8 +1828,6 @@ declare namespace LocalJSX {
}
interface NodeResolution {
}
interface NonShadowHost {
}
interface ParentReflectNanAttribute {
}
interface ParentWithReflectChild {
Expand Down Expand Up @@ -2007,11 +1955,6 @@ declare namespace LocalJSX {
}
interface SlotNestedDefaultOrderParent {
}
interface SlotNestedNameChange {
}
interface SlotNestedNameChangeChild {
"state"?: boolean;
}
interface SlotNestedOrderChild {
}
interface SlotNestedOrderParent {
Expand Down Expand Up @@ -2101,8 +2044,6 @@ declare namespace LocalJSX {
"dom-reattach-clone": DomReattachClone;
"dom-reattach-clone-deep-slot": DomReattachCloneDeepSlot;
"dom-reattach-clone-host": DomReattachCloneHost;
"drop-down": DropDown;
"drop-down-content": DropDownContent;
"dynamic-css-variable": DynamicCssVariable;
"dynamic-import": DynamicImport;
"es5-addclass-svg": Es5AddclassSvg;
Expand Down Expand Up @@ -2148,7 +2089,6 @@ declare namespace LocalJSX {
"multiple-styles-cmp": MultipleStylesCmp;
"no-delegates-focus": NoDelegatesFocus;
"node-resolution": NodeResolution;
"non-shadow-host": NonShadowHost;
"parent-reflect-nan-attribute": ParentReflectNanAttribute;
"parent-with-reflect-child": ParentWithReflectChild;
"reflect-nan-attribute": ReflectNanAttribute;
Expand Down Expand Up @@ -2199,8 +2139,6 @@ declare namespace LocalJSX {
"slot-map-order-root": SlotMapOrderRoot;
"slot-nested-default-order-child": SlotNestedDefaultOrderChild;
"slot-nested-default-order-parent": SlotNestedDefaultOrderParent;
"slot-nested-name-change": SlotNestedNameChange;
"slot-nested-name-change-child": SlotNestedNameChangeChild;
"slot-nested-order-child": SlotNestedOrderChild;
"slot-nested-order-parent": SlotNestedOrderParent;
"slot-ng-if": SlotNgIf;
Expand Down Expand Up @@ -2267,8 +2205,6 @@ declare module "@stencil/core" {
"dom-reattach-clone": LocalJSX.DomReattachClone & JSXBase.HTMLAttributes<HTMLDomReattachCloneElement>;
"dom-reattach-clone-deep-slot": LocalJSX.DomReattachCloneDeepSlot & JSXBase.HTMLAttributes<HTMLDomReattachCloneDeepSlotElement>;
"dom-reattach-clone-host": LocalJSX.DomReattachCloneHost & JSXBase.HTMLAttributes<HTMLDomReattachCloneHostElement>;
"drop-down": LocalJSX.DropDown & JSXBase.HTMLAttributes<HTMLDropDownElement>;
"drop-down-content": LocalJSX.DropDownContent & JSXBase.HTMLAttributes<HTMLDropDownContentElement>;
"dynamic-css-variable": LocalJSX.DynamicCssVariable & JSXBase.HTMLAttributes<HTMLDynamicCssVariableElement>;
"dynamic-import": LocalJSX.DynamicImport & JSXBase.HTMLAttributes<HTMLDynamicImportElement>;
"es5-addclass-svg": LocalJSX.Es5AddclassSvg & JSXBase.HTMLAttributes<HTMLEs5AddclassSvgElement>;
Expand Down Expand Up @@ -2314,7 +2250,6 @@ declare module "@stencil/core" {
"multiple-styles-cmp": LocalJSX.MultipleStylesCmp & JSXBase.HTMLAttributes<HTMLMultipleStylesCmpElement>;
"no-delegates-focus": LocalJSX.NoDelegatesFocus & JSXBase.HTMLAttributes<HTMLNoDelegatesFocusElement>;
"node-resolution": LocalJSX.NodeResolution & JSXBase.HTMLAttributes<HTMLNodeResolutionElement>;
"non-shadow-host": LocalJSX.NonShadowHost & JSXBase.HTMLAttributes<HTMLNonShadowHostElement>;
"parent-reflect-nan-attribute": LocalJSX.ParentReflectNanAttribute & JSXBase.HTMLAttributes<HTMLParentReflectNanAttributeElement>;
"parent-with-reflect-child": LocalJSX.ParentWithReflectChild & JSXBase.HTMLAttributes<HTMLParentWithReflectChildElement>;
"reflect-nan-attribute": LocalJSX.ReflectNanAttribute & JSXBase.HTMLAttributes<HTMLReflectNanAttributeElement>;
Expand Down Expand Up @@ -2365,8 +2300,6 @@ declare module "@stencil/core" {
"slot-map-order-root": LocalJSX.SlotMapOrderRoot & JSXBase.HTMLAttributes<HTMLSlotMapOrderRootElement>;
"slot-nested-default-order-child": LocalJSX.SlotNestedDefaultOrderChild & JSXBase.HTMLAttributes<HTMLSlotNestedDefaultOrderChildElement>;
"slot-nested-default-order-parent": LocalJSX.SlotNestedDefaultOrderParent & JSXBase.HTMLAttributes<HTMLSlotNestedDefaultOrderParentElement>;
"slot-nested-name-change": LocalJSX.SlotNestedNameChange & JSXBase.HTMLAttributes<HTMLSlotNestedNameChangeElement>;
"slot-nested-name-change-child": LocalJSX.SlotNestedNameChangeChild & JSXBase.HTMLAttributes<HTMLSlotNestedNameChangeChildElement>;
"slot-nested-order-child": LocalJSX.SlotNestedOrderChild & JSXBase.HTMLAttributes<HTMLSlotNestedOrderChildElement>;
"slot-nested-order-parent": LocalJSX.SlotNestedOrderParent & JSXBase.HTMLAttributes<HTMLSlotNestedOrderParentElement>;
"slot-ng-if": LocalJSX.SlotNgIf & JSXBase.HTMLAttributes<HTMLSlotNgIfElement>;
Expand Down
17 changes: 0 additions & 17 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/drop-down-content.tsx
View file
Open in desktop

This file was deleted.

18 changes: 0 additions & 18 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/drop-down.tsx
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/index.html
View file
Open in desktop

This file was deleted.

38 changes: 0 additions & 38 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/karma.spec.ts
View file
Open in desktop

This file was deleted.

22 changes: 0 additions & 22 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/non-shadow-host.tsx
View file
Open in desktop

This file was deleted.

Loading