Skip to content

Add ref to Fragment #32421

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.

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

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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: 18 additions & 0 deletions packages/react-art/src/ReactFiberConfigART.js
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,24 @@ export function createTextInstance(
return text;
}

export type FragmentInstance = null | {
appendChild: (child: any) => void,
parentInstance: any,
...
};

export function createFragmentInstance(parentInstance): null {
return null;
}

export function appendChildToFragmentInstance(child, fragmentInstance): void {
// Noop
}

export function removeChildFromFragmentInstance(child, fragmentInstance): void {
// Noop
}

export function finalizeInitialChildren(domElement, type, props) {
return false;
}
Expand Down
165 changes: 165 additions & 0 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -1478,6 +1478,171 @@ export function createViewTransitionInstance(
};
}

type EventListenerOptionsOrUseCapture =
| boolean
| {
capture?: boolean,
once?: boolean,
passive?: boolean,
signal?: AbortSignal,
...
};

type StoredEventListener = {
type: string,
listener: EventListener,
optionsOrUseCapture: void | EventListenerOptionsOrUseCapture,
};

export type FragmentInstance = {
_children: Set<Element>,
_eventListeners: Array<StoredEventListener>,
parentInstance: Instance | Container,
appendChild(child: Element): void,
removeChild(child: Element): void,
Copy link
Collaborator

Choose a reason for hiding this comment

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

appendChild/removeChild doesn't make much sense as publicly accessible APIs. A fragment doesn't even have a single parent and the children could be spread out.

It's also not something you should mess with in user space since it's an internal set which fragile semantics. E.g. this implementation doesn't preserve any kind of ordering guarantees.

There's no need for the internal methods to operate on these methods so they don't need to exist. Just have appendChildToFragmentInstance add to the _children Set directly.

addEventListener(
type: string,
listener: EventListener,
optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
): void,
removeEventListener(
type: string,
listener: EventListener,
optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
): void,
};

function FragmentInstancePseudoElement(
this: FragmentInstance,
parentInstance: Container,
) {
this.parentInstance = parentInstance || document.documentElement;
if (this.parentInstance === null) {
throw new Error(
'React expected a Fragment Ref to have a parent HTMLElement or to fallback to an <html> element ' +
'(document.documentElement). But no parent or <html> element was found. React never removes the ' +
'documentElement for any Document it renders into so the cause is likely in some other script ' +
'running on this page.',
);
}
this._children = new Set();
this._eventListeners = [];
}
// $FlowFixMe[prop-missing]
FragmentInstancePseudoElement.prototype.appendChild = function (
this: FragmentInstance,
child: Element,
): void {
this._children.add(child);
for (let i = 0; i < this._eventListeners.length; i++) {
const {type, listener, optionsOrUseCapture} = this._eventListeners[i];
child.addEventListener(type, listener, optionsOrUseCapture);
}
};
// $FlowFixMe[prop-missing]
FragmentInstancePseudoElement.prototype.removeChild = function (
this: FragmentInstance,
child: Element,
): void {
this._children.delete(child);
for (let i = 0; i < this._eventListeners.length; i++) {
const {type, listener, optionsOrUseCapture} = this._eventListeners[i];
child.removeEventListener(type, listener, optionsOrUseCapture);
}
};
// $FlowFixMe[prop-missing]
FragmentInstancePseudoElement.prototype.addEventListener = function (
this: FragmentInstance,
type: string,
listener: EventListener,
optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
): void {
// Element.addEventListener will only apply uniquely new event listeners by default. Since we
// need to collect the listeners to apply to appended children, we track them ourselves and use
// custom equality check for the options.
const isNewEventListener =
indexOfEventListener(this._eventListeners, {
type,
listener,
optionsOrUseCapture,
}) === -1;
if (isNewEventListener) {
this._eventListeners.push({type, listener, optionsOrUseCapture});
this._children.forEach(child => {
child.addEventListener(type, listener, optionsOrUseCapture);
});
}
};
// $FlowFixMe[prop-missing]
FragmentInstancePseudoElement.prototype.removeEventListener = function (
this: FragmentInstance,
type: string,
listener: EventListener,
optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
): void {
this._children.forEach(child => {
child.removeEventListener(type, listener, optionsOrUseCapture);
});
const index = indexOfEventListener(this._eventListeners, {
type,
listener,
optionsOrUseCapture,
});
this._eventListeners.splice(index, 1);
};

function normalizeListenerOptions(
opts: ?EventListenerOptionsOrUseCapture,
): string {
if (opts == null) {
return '0';
}

if (typeof opts === 'boolean') {
return `c=${opts ? '1' : '0'}`;
}

return `c=${opts.capture ? '1' : '0'}&o=${opts.once ? '1' : '0'}&p=${opts.passive ? '1' : '0'}`;
}

function indexOfEventListener(
eventListeners: Array<StoredEventListener>,
eventListenerToFind: StoredEventListener,
): number {
for (let i = 0; i < eventListeners.length; i++) {
const item = eventListeners[i];
if (
item.type === eventListenerToFind.type &&
item.listener === eventListenerToFind.listener &&
normalizeListenerOptions(item.optionsOrUseCapture) ===
normalizeListenerOptions(eventListenerToFind.optionsOrUseCapture)
) {
return i;
}
}
return -1;
}

export function createFragmentInstance(
parentInstance: Instance | Container,
): FragmentInstance {
return new (FragmentInstancePseudoElement: any)(parentInstance);
}

export function appendChildToFragmentInstance(
childElement: Element,
fragmentInstance: FragmentInstance,
): void {
fragmentInstance.appendChild(childElement);
}

export function removeChildFromFragmentInstance(
childElement: Element,
fragmentInstance: FragmentInstance,
): void {
fragmentInstance.removeChild(childElement);
}

export function clearContainer(container: Container): void {
const nodeType = container.nodeType;
if (nodeType === DOCUMENT_NODE) {
Expand Down
Loading
Loading