Skip to content

Commit 9c45111

Browse files
patricklxpatricklx
committed
improve in element support
1 parent ea7c146 commit 9c45111

File tree

3 files changed

+56
-93
lines changed

3 files changed

+56
-93
lines changed

‎app/components/component-tree-item.hbs

+6-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<code
2525
class="component-tree-item__tag flex whitespace-no-wrap
2626
{{if
27-
@item.isComponent
27+
(or @item.isComponent @item.isModifier @item.isHtmlTag)
2828
(if
2929
@item.isCurlyInvocation
3030
"component-tree-item-classic__bracket"
@@ -37,7 +37,7 @@
3737
}}"
3838
>
3939
{{!-- template-lint-disable no-unbalanced-curlies --}}
40-
{{#if @item.isComponent}}
40+
{{#if (or @item.isComponent @item.isModifier)}}
4141
{{#if @item.isCurlyInvocation}}
4242
<span class="component-name">
4343
{{@item.name}}
@@ -83,6 +83,10 @@
8383
\{{mount "{{@item.name}}"}}
8484
{{else if @item.isRouteTemplate}}
8585
{{@item.name}} route
86+
{{else if @item.isHtmlTag}}
87+
<span class="component-name">
88+
{{@item.name}}
89+
</span>
8690
{{/if}}
8791
</code>
8892
</div>

‎app/controllers/component-tree.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,15 @@ class RenderItem {
301301
}
302302

303303
get isComponent() {
304-
return this.renderNode.type === 'component';
304+
return this.renderNode.type === 'component' || this.renderNode.type === 'remote-element';
305+
}
306+
307+
get isModifier() {
308+
return this.renderNode.type === 'modifier';
309+
}
310+
311+
get isHtmlTag() {
312+
return this.renderNode.type === 'htmlTag';
305313
}
306314

307315
get name() {
@@ -313,6 +321,9 @@ class RenderItem {
313321
}
314322

315323
get isCurlyInvocation() {
324+
if (this.isModifier) {
325+
return true;
326+
}
316327
return this.renderNode.args && this.renderNode.args.positional;
317328
}
318329

‎ember_debug/libs/render-tree.js

+38-90
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import captureRenderTree from './capture-render-tree';
2-
import { guidFor } from 'ember-debug/utils/ember/object/internals';
3-
import { EmberLoader } from 'ember-debug/utils/ember/loader';
1+
import captureRenderTree from "./capture-render-tree";
2+
import { guidFor } from "ember-debug/utils/ember/object/internals";
3+
import { EmberLoader } from "ember-debug/utils/ember/loader";
44

55
class InElementSupportProvider {
66
constructor(owner) {
@@ -32,105 +32,56 @@ class InElementSupportProvider {
3232

3333
const NewElementBuilder = this.NewElementBuilder;
3434
const remoteStack = [];
35-
const componentStack = [];
36-
37-
function createRef(value) {
38-
if (self.reference.createUnboundRef) {
39-
return self.reference.createUnboundRef(value);
40-
} else {
41-
return value;
42-
}
43-
}
44-
45-
const appendChild = this.debugRenderTree.appendChild;
46-
this.debugRenderTree.appendChild = function (node, state) {
47-
if (node.type === 'component') {
48-
componentStack.push(node);
49-
}
50-
return appendChild.call(this, node, state);
51-
};
52-
53-
const exit = this.debugRenderTree.exit;
54-
this.debugRenderTree.exit = function (state) {
55-
const node = this.nodeFor(this.stack.current);
56-
if (node?.type === 'component') {
57-
componentStack.pop();
58-
}
59-
exit.call(this, state);
60-
};
6135

6236
const didAppendNode = NewElementBuilder.prototype.didAppendNode;
6337
NewElementBuilder.prototype.didAppendNode = function (...args) {
64-
args[0].__emberInspectorParentNode = componentStack.at(-1);
38+
args[0].__emberInspectorParentNode = self.currentNode;
6539
return didAppendNode.call(this, ...args);
6640
};
6741

6842
const pushElement = NewElementBuilder.prototype.pushElement;
6943
NewElementBuilder.prototype.pushElement = function (...args) {
70-
pushElement.call(this, ...args);
71-
args[0].__emberInspectorParentNode = componentStack.at(-1);
44+
args[0].__emberInspectorParentNode = self.currentNode;
45+
return pushElement.call(this, ...args);
7246
};
7347

7448
const pushRemoteElement = NewElementBuilder.prototype.pushRemoteElement;
75-
NewElementBuilder.prototype.pushRemoteElement = function (
76-
element,
77-
guid,
78-
insertBefore
79-
) {
80-
remoteStack.push({ element });
81-
const ref = createRef(element);
82-
const capturedArgs = {
83-
positional: [ref],
84-
named: {},
85-
};
86-
if (insertBefore) {
87-
capturedArgs.named.insertBefore = insertBefore;
88-
}
89-
const inElementArgs = self.reference.createUnboundRef
90-
? capturedArgs
91-
: {
92-
value() {
93-
return capturedArgs;
94-
},
95-
};
96-
const debugRenderTree = self.debugRenderTree;
97-
debugRenderTree?.create(remoteStack.at(-1), {
98-
type: 'keyword',
99-
name: 'in-element',
100-
args: inElementArgs,
49+
NewElementBuilder.prototype.pushRemoteElement = function (...args) {
50+
const element = args[0];
51+
remoteStack.push({});
52+
const ref = self.reference.createUnboundRef(element);
53+
this.env.debugRenderTree?.create(remoteStack.at(-1), {
54+
type: 'remote-element',
55+
name: 'InElement',
56+
args: {
57+
positional: [],
58+
named: {
59+
destination: ref,
60+
},
61+
},
10162
instance: {
10263
args: {
103-
named: {
104-
insertBefore,
105-
},
106-
positional: [element],
64+
destination: ref,
10765
},
10866
constructor: {
10967
name: 'InElement',
11068
},
11169
},
11270
});
113-
return pushRemoteElement.call(this, element, guid, insertBefore);
71+
return pushRemoteElement.call(this, ...args);
11472
};
11573

11674
const popRemoteElement = NewElementBuilder.prototype.popRemoteElement;
11775
NewElementBuilder.prototype.popRemoteElement = function (...args) {
118-
const element = this.element;
119-
popRemoteElement.call(this, ...args);
120-
const parentElement = this.element;
121-
const debugRenderTree = self.debugRenderTree;
122-
debugRenderTree?.didRender(remoteStack.at(-1), {
123-
parentElement: () => parentElement,
124-
firstNode: () => element,
125-
lastNode: () => element,
76+
this.env.debugRenderTree?.didRender(remoteStack.at(-1), {
77+
parentElement: () => this.element.parentElement,
78+
firstNode: () => this.element,
79+
lastNode: () => this.element,
12680
});
12781
remoteStack.pop();
128-
};
82+
return popRemoteElement.call(this, ...args);
83+
}
12984

130-
this.debugRenderTreeFunctions = {
131-
appendChild,
132-
exit,
133-
};
13485
this.NewElementBuilderFunctions = {
13586
pushElement,
13687
pushRemoteElement,
@@ -143,7 +94,6 @@ class InElementSupportProvider {
14394
if (!this.NewElementBuilderFunctions) {
14495
return;
14596
}
146-
Object.assign(this.debugRenderTree, this.debugRenderTreeFunctions);
14797
Object.assign(
14898
this.NewElementBuilder.prototype,
14999
this.NewElementBuilderFunctions
@@ -175,7 +125,6 @@ export default class RenderTree {
175125
try {
176126
this.inElementSupport = new InElementSupportProvider(owner);
177127
} catch (e) {
178-
console.error('failed to setup in element support', e);
179128
// not supported
180129
}
181130

@@ -259,7 +208,7 @@ export default class RenderTree {
259208
let hintNode = this._findUp(this.nodes[hint]);
260209
let hints = [hintNode];
261210
if (node.__emberInspectorParentNode) {
262-
const remoteNode = this.inElementSupport?.nodeMap.get(node);
211+
const remoteNode = this.inElementSupport.nodeMap.get(node);
263212
const n = remoteNode && this.nodes[remoteNode];
264213
hints.push(n);
265214
}
@@ -430,16 +379,12 @@ export default class RenderTree {
430379

431380
if (serialized === undefined) {
432381
this.nodes[node.id] = node;
433-
if (node.type === 'keyword') {
434-
node.type = 'component';
382+
if (node.type === 'remote-element') {
435383
this.inElementSupport?.nodeMap.set(node, node.id);
436384
this.inElementSupport?.remoteRoots.push(node);
437385
}
438386

439-
if (
440-
this.inElementSupport?.Wormhole &&
441-
node.instance instanceof this.inElementSupport.Wormhole.default
442-
) {
387+
if (this.inElementSupport?.Wormhole && node.instance instanceof this.inElementSupport?.Wormhole.default) {
443388
this.inElementSupport?.remoteRoots.push(node);
444389
const bounds = node.bounds;
445390
Object.defineProperty(node, 'bounds', {
@@ -465,9 +410,9 @@ export default class RenderTree {
465410
args: this._serializeArgs(node.args),
466411
instance: this._serializeItem(
467412
node.instance ||
468-
(node.type === 'component'
469-
? this._createTemplateOnlyComponent(node.args.named)
470-
: undefined)
413+
(node.type === 'component'
414+
? this._createTemplateOnlyComponent(node.args.named)
415+
: undefined)
471416
),
472417
bounds: this._serializeBounds(node.bounds),
473418
children: this._serializeRenderNodes(node.children, node),
@@ -642,8 +587,11 @@ function isSingleNode({ firstNode, lastNode }) {
642587
return firstNode === lastNode;
643588
}
644589

645-
function isAttached({ firstNode, lastNode }) {
646-
return firstNode.isConnected && lastNode.isConnected;
590+
function isAttached({ parentElement, firstNode, lastNode }) {
591+
return (
592+
parentElement === firstNode.parentElement &&
593+
parentElement === lastNode.parentElement
594+
);
647595
}
648596

649597
function isEmptyRect({ x, y, width, height }) {

0 commit comments

Comments
 (0)