emberjs
Add support for Element Modifiers
Is your feature request related to a problem? Please describe. Ember Inspector doesn't support showing Element Modifiers. See https://github.com/emberjs/rfcs/pull/934 for context.
Describe the solution you'd like To be able to see Element Modifiers in the component view.
Describe alternatives you've considered N/A
Additional context N/A
In general, we need a way to figure out is specific DOM node contain any modifiers or not, including some basic modifier metadata. I think we could look at modifierManager API. Here is how we may implement it:
type ModifierMetadata = {
name: 'boka-toka',
fileLocation: '/user/ember/app/modifiers/boka-toka.ts',
args: { positional: unknown[], named: Record<string, unknown> }
}
globalThis.modifiersForNodes = new WeakMap<HTMLElement, ModifierMetadata>;
ModifierManager {
installModifier(element: HTMLNode, modifierFunction, metadata) {
globalThis.modifiersForNodes.add(element, metadata);
return modifierFunction(metadata);
}
}
Ember inspector part:
Once we resolve render tree, we had every components and it's children. Basically, we need to filter-out DOM nodes, belonging to each component. After we could patch existing render tree with component-like structure.
const modifierMeta = modifiersForNodes(node);
return {
id: 'scj092s232e',
args: modifierMeta.args,
instance: null,
name: modifierMeta.name,
type: 'modifier',
isInRemote: false,
template: modifierMeta.fileLocation,
children: [],
bounds: {
firstNode: node, lastNode: node, parentElement: node.parentElement
}
}
as addition, we could expose HTMLElements with modifiers as type="node" and have modifiers as arguments on specific component type.
@patricklx we have modifier support now, right? Should this be closed?
