Skip to content

Commit 9c7a851

Browse files
nartcnartc
committed
chore: clean up renderer
1 parent cd0d275 commit 9c7a851

File tree

2 files changed

+128
-161
lines changed

2 files changed

+128
-161
lines changed

‎libs/angular-three/src/lib/renderer/renderer.ts‎

Lines changed: 76 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export class NgtRendererFactory implements RendererFactory2 {
4545
compoundPrefixes: this.compoundPrefixes,
4646
document: this.document,
4747
});
48-
renderer = new NgtRenderer(delegateRenderer, store, this.catalogue, true);
48+
renderer = new NgtRenderer(delegateRenderer, store, this.catalogue);
4949
this.rendererMap.set(type.id, renderer);
5050
}
5151

@@ -57,40 +57,38 @@ export class NgtRendererFactory implements RendererFactory2 {
5757
compoundPrefixes: this.compoundPrefixes,
5858
document: this.document,
5959
});
60-
renderer = new NgtRenderer(delegateRenderer, store, this.catalogue);
60+
renderer = new NgtRenderer(delegateRenderer, store, this.catalogue, false);
6161
this.rendererMap.set(type.id, renderer);
6262
}
6363

6464
return renderer;
6565
}
6666
}
6767

68+
/**
69+
* Anything abbreviated with rS/RS stands for RendererState
70+
*/
6871
export class NgtRenderer implements Renderer2 {
69-
private first = false;
70-
7172
constructor(
7273
private readonly delegate: Renderer2,
7374
private readonly store: NgtRendererStore,
7475
private readonly catalogue: Record<string, new (...args: any[]) => any>,
75-
private readonly root = false
76+
private readonly first = true
7677
) {}
7778

7879
createElement(name: string, namespace?: string | null | undefined) {
7980
const element = this.delegate.createElement(name, namespace);
8081

8182
// on first pass, we return the Root Scene as the root node
82-
if (this.root && !this.first) {
83-
this.first = true;
83+
if (this.first) {
8484
const node = this.store.createNode('three', this.store.rootScene);
8585
node.__ngt_renderer__[NgtRendererClassId.injectorFactory] = () => getDebugNode(element)!.injector;
8686
return node;
8787
}
8888

8989
// handle compound
9090
if (this.store.isCompound(name)) {
91-
const compound = this.store.createNode('compound', element);
92-
compound.__ngt_renderer__[NgtRendererClassId.injectorFactory] = () => getDebugNode(element)!.injector;
93-
return compound;
91+
return this.store.createNode('compound', element);
9492
}
9593

9694
// handle portal
@@ -137,21 +135,20 @@ export class NgtRenderer implements Renderer2 {
137135
return node;
138136
}
139137

140-
const domNode = this.store.createNode('dom', element);
141-
domNode.__ngt_renderer__[NgtRendererClassId.injectorFactory] = () => getDebugNode(element)!.injector;
142-
return domNode;
138+
return this.store.createNode('dom', element);
143139
}
144140

145141
createComment(value: string) {
146-
const comment = this.delegate.createComment(value);
147-
return this.store.createNode('comment', comment);
142+
return this.store.createNode('comment', this.delegate.createComment(value));
148143
}
149144

150145
appendChild(parent: NgtRendererNode, newChild: NgtRendererNode): void {
151146
// TODO: just ignore text node for now
152147
if (newChild instanceof Text) return;
148+
const cRS = newChild.__ngt_renderer__;
149+
const pRS = parent.__ngt_renderer__;
153150

154-
if (newChild.__ngt_renderer__[NgtRendererClassId.type] === 'comment') {
151+
if (cRS[NgtRendererClassId.type] === 'comment') {
155152
this.store.setParent(newChild, parent);
156153
return;
157154
}
@@ -160,95 +157,78 @@ export class NgtRenderer implements Renderer2 {
160157
this.store.addChild(parent, newChild);
161158

162159
// if new child is a portal
163-
if (newChild.__ngt_renderer__[NgtRendererClassId.type] === 'portal') {
160+
if (cRS[NgtRendererClassId.type] === 'portal') {
164161
this.store.processPortalContainer(newChild);
165-
if (newChild.__ngt_renderer__[NgtRendererClassId.portalContainer]) {
166-
this.appendChild(parent, newChild.__ngt_renderer__[NgtRendererClassId.portalContainer]);
162+
if (cRS[NgtRendererClassId.portalContainer]) {
163+
this.appendChild(parent, cRS[NgtRendererClassId.portalContainer]);
167164
}
168165
return;
169166
}
170167

171168
// if parent is a portal
172-
if (parent.__ngt_renderer__[NgtRendererClassId.type] === 'portal') {
169+
if (pRS[NgtRendererClassId.type] === 'portal') {
173170
this.store.processPortalContainer(parent);
174-
if (parent.__ngt_renderer__[NgtRendererClassId.portalContainer]) {
175-
this.appendChild(parent.__ngt_renderer__[NgtRendererClassId.portalContainer], newChild);
171+
if (pRS[NgtRendererClassId.portalContainer]) {
172+
this.appendChild(pRS[NgtRendererClassId.portalContainer], newChild);
176173
}
177174
return;
178175
}
179176

180177
// if both are three instances, straightforward case
181-
if (
182-
parent.__ngt_renderer__[NgtRendererClassId.type] === 'three' &&
183-
newChild.__ngt_renderer__[NgtRendererClassId.type] === 'three'
184-
) {
178+
if (pRS[NgtRendererClassId.type] === 'three' && cRS[NgtRendererClassId.type] === 'three') {
185179
// if child already attached to a parent, skip
186180
if (getLocalState(newChild).parent) return;
187181
// attach THREE child
188182
attachThreeChild(parent, newChild);
189183
// here, we handle the special case of if the parent has a compoundParent, which means this child is part of a compound parent template
190-
if (!newChild.__ngt_renderer__[NgtRendererClassId.compound]) return;
184+
if (!cRS[NgtRendererClassId.compound]) return;
191185
const closestGrandparentWithCompound = this.store.getClosestParentWithCompound(parent);
192186
if (!closestGrandparentWithCompound) return;
193187
this.appendChild(closestGrandparentWithCompound, newChild);
194188
return;
195189
}
196190

197191
// if only the parent is the THREE instance
198-
if (parent.__ngt_renderer__[NgtRendererClassId.type] === 'three') {
199-
if (newChild.__ngt_renderer__[NgtRendererClassId.children].length) {
200-
for (const renderChild of newChild.__ngt_renderer__[NgtRendererClassId.children]) {
201-
this.appendChild(parent, renderChild);
202-
}
192+
if (pRS[NgtRendererClassId.type] === 'three') {
193+
for (const renderChild of cRS[NgtRendererClassId.children]) {
194+
this.appendChild(parent, renderChild);
203195
}
204196
}
205197

206198
// if parent is a compound
207-
if (parent.__ngt_renderer__[NgtRendererClassId.type] === 'compound') {
199+
if (pRS[NgtRendererClassId.type] === 'compound') {
208200
// if compound doesn't have a THREE instance set yet
209-
if (
210-
!parent.__ngt_renderer__[NgtRendererClassId.compounded] &&
211-
newChild.__ngt_renderer__[NgtRendererClassId.type] === 'three'
212-
) {
201+
if (!pRS[NgtRendererClassId.compounded] && cRS[NgtRendererClassId.type] === 'three') {
213202
// if child is indeed an ngtCompound
214-
if (newChild.__ngt_renderer__[NgtRendererClassId.compound]) {
215-
this.store.setCompound(parent, newChild);
216-
} else {
217-
// if not, we track the parent (that is supposedly the compound component) on this three instance
218-
if (!newChild.__ngt_renderer__[NgtRendererClassId.compoundParent]) {
219-
newChild.__ngt_renderer__[NgtRendererClassId.compoundParent] = parent;
220-
}
221-
}
203+
if (cRS[NgtRendererClassId.compound]) this.store.setCompound(parent, newChild);
204+
// if not, we track the parent (that is supposedly the compound component) on this three instance
205+
else if (!cRS[NgtRendererClassId.compoundParent]) cRS[NgtRendererClassId.compoundParent] = parent;
222206
}
223207

224208
// reset the compound if it's changed
225209
if (
226-
parent.__ngt_renderer__[NgtRendererClassId.compounded] &&
227-
newChild.__ngt_renderer__[NgtRendererClassId.type] === 'three' &&
228-
newChild.__ngt_renderer__[NgtRendererClassId.compound] &&
229-
parent.__ngt_renderer__[NgtRendererClassId.compounded] !== newChild
210+
pRS[NgtRendererClassId.compounded] &&
211+
cRS[NgtRendererClassId.type] === 'three' &&
212+
cRS[NgtRendererClassId.compound] &&
213+
pRS[NgtRendererClassId.compounded] !== newChild
230214
) {
231215
this.store.setCompound(parent, newChild);
232216
}
233217
}
234218

235219
const shouldFindGrandparentInstance =
236220
// if child is three but haven't been attached to a parent yet
237-
(newChild.__ngt_renderer__[NgtRendererClassId.type] === 'three' && !getLocalState(newChild).parent) ||
221+
(cRS[NgtRendererClassId.type] === 'three' && !getLocalState(newChild).parent) ||
238222
// or both parent and child are DOM elements
239-
((parent.__ngt_renderer__[NgtRendererClassId.type] === 'dom' ||
240-
(parent.__ngt_renderer__[NgtRendererClassId.type] === 'compound' &&
241-
!parent.__ngt_renderer__[NgtRendererClassId.compounded])) &&
242-
(newChild.__ngt_renderer__[NgtRendererClassId.type] === 'dom' ||
243-
(newChild.__ngt_renderer__[NgtRendererClassId.type] === 'compound' &&
244-
!newChild.__ngt_renderer__[NgtRendererClassId.compounded])));
223+
((pRS[NgtRendererClassId.type] === 'dom' ||
224+
(pRS[NgtRendererClassId.type] === 'compound' && !pRS[NgtRendererClassId.compounded])) &&
225+
(cRS[NgtRendererClassId.type] === 'dom' ||
226+
(cRS[NgtRendererClassId.type] === 'compound' && !cRS[NgtRendererClassId.compounded])));
245227

246228
if (shouldFindGrandparentInstance) {
247229
// we'll try to get the grandparent instance here so that we can run appendChild with both instances
248230
const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
249-
if (closestGrandparentInstance) {
250-
this.appendChild(closestGrandparentInstance, newChild);
251-
}
231+
if (closestGrandparentInstance) this.appendChild(closestGrandparentInstance, newChild);
252232
}
253233
}
254234

@@ -264,94 +244,80 @@ export class NgtRenderer implements Renderer2 {
264244
}
265245

266246
removeChild(parent: NgtRendererNode, oldChild: NgtRendererNode, isHostElement?: boolean | undefined): void {
267-
if (
268-
parent.__ngt_renderer__[NgtRendererClassId.type] === 'three' &&
269-
oldChild.__ngt_renderer__[NgtRendererClassId.type] === 'three'
270-
) {
247+
const pRS = parent.__ngt_renderer__;
248+
const cRS = oldChild.__ngt_renderer__;
249+
if (pRS[NgtRendererClassId.type] === 'three' && cRS[NgtRendererClassId.type] === 'three') {
271250
removeThreeChild(parent, oldChild, true);
272251
this.store.destroy(oldChild, parent);
273252
return;
274253
}
275254

276-
if (
277-
parent.__ngt_renderer__[NgtRendererClassId.type] === 'compound' &&
278-
parent.__ngt_renderer__[NgtRendererClassId.parent]
279-
) {
280-
this.removeChild(parent.__ngt_renderer__[NgtRendererClassId.parent], oldChild, isHostElement);
255+
if (pRS[NgtRendererClassId.type] === 'compound' && pRS[NgtRendererClassId.parent]) {
256+
this.removeChild(pRS[NgtRendererClassId.parent], oldChild, isHostElement);
281257
return;
282258
}
283259

284-
if (parent.__ngt_renderer__[NgtRendererClassId.type] === 'three') {
260+
if (pRS[NgtRendererClassId.type] === 'three') {
285261
this.store.destroy(oldChild, parent);
286262
return;
287263
}
288264

289265
const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
290-
if (closestGrandparentInstance) {
291-
this.removeChild(closestGrandparentInstance, oldChild, isHostElement);
292-
}
266+
if (closestGrandparentInstance) this.removeChild(closestGrandparentInstance, oldChild, isHostElement);
293267
this.store.destroy(oldChild, closestGrandparentInstance as NgtRendererNode);
294268
}
295269

296270
parentNode(node: NgtRendererNode) {
297-
if (node.__ngt_renderer__?.[NgtRendererClassId.parent]) return node.__ngt_renderer__[NgtRendererClassId.parent];
271+
const rS = node.__ngt_renderer__;
272+
if (rS?.[NgtRendererClassId.parent]) return rS[NgtRendererClassId.parent];
298273
return this.delegate.parentNode(node);
299274
}
300275

301276
setAttribute(el: NgtRendererNode, name: string, value: string, namespace?: string | null | undefined): void {
302-
if (el.__ngt_renderer__[NgtRendererClassId.type] === 'compound') {
277+
const rS = el.__ngt_renderer__;
278+
if (rS[NgtRendererClassId.type] === 'compound') {
303279
// we don't have the compound instance yet
304-
el.__ngt_renderer__[NgtRendererClassId.attributes][name] = value;
305-
if (!el.__ngt_renderer__[NgtRendererClassId.compounded]) {
280+
rS[NgtRendererClassId.attributes][name] = value;
281+
if (!rS[NgtRendererClassId.compounded]) {
306282
this.store.queueOperation(el, ['op', () => this.setAttribute(el, name, value, namespace)]);
307283
return;
308284
}
309285

310-
this.setAttribute(el.__ngt_renderer__[NgtRendererClassId.compounded], name, value, namespace);
286+
this.setAttribute(rS[NgtRendererClassId.compounded], name, value, namespace);
311287
return;
312288
}
313289

314-
if (el.__ngt_renderer__[NgtRendererClassId.type] === 'three') {
315-
this.store.applyAttribute(el, name, value);
316-
}
290+
if (rS[NgtRendererClassId.type] === 'three') this.store.applyAttribute(el, name, value);
317291
}
318292

319293
setProperty(el: NgtRendererNode, name: string, value: any): void {
320-
if (el.__ngt_renderer__[NgtRendererClassId.type] === 'compound') {
294+
const rS = el.__ngt_renderer__;
295+
if (rS[NgtRendererClassId.type] === 'compound') {
321296
// we don't have the compound instance yet
322-
el.__ngt_renderer__[NgtRendererClassId.properties][name] = value;
323-
if (!el.__ngt_renderer__[NgtRendererClassId.compounded]) {
297+
rS[NgtRendererClassId.properties][name] = value;
298+
if (!rS[NgtRendererClassId.compounded]) {
324299
this.store.queueOperation(el, ['op', () => this.setProperty(el, name, value)]);
325300
return;
326301
}
327302

328-
if (el.__ngt_renderer__[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound]) {
329-
Object.assign(
330-
el.__ngt_renderer__[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound],
331-
{
332-
props: {
333-
...el.__ngt_renderer__[NgtRendererClassId.compounded].__ngt_renderer__[
334-
NgtRendererClassId.compound
335-
],
336-
[name]: value,
337-
},
338-
}
339-
);
303+
if (rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound]) {
304+
Object.assign(rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound], {
305+
props: {
306+
...rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound],
307+
[name]: value,
308+
},
309+
});
340310
}
341-
this.setProperty(el.__ngt_renderer__[NgtRendererClassId.compounded], name, value);
311+
this.setProperty(rS[NgtRendererClassId.compounded], name, value);
342312
return;
343313
}
344314

345-
if (el.__ngt_renderer__[NgtRendererClassId.type] === 'three') {
346-
this.store.applyProperty(el, name, value);
347-
}
315+
if (rS[NgtRendererClassId.type] === 'three') this.store.applyProperty(el, name, value);
348316
}
349317

350318
listen(target: NgtRendererNode, eventName: string, callback: (event: any) => boolean | void): () => void {
351-
const targetCdr = target.__ngt_renderer__?.[NgtRendererClassId.injectorFactory]?.().get(
352-
ChangeDetectorRef,
353-
null
354-
);
319+
const rS = target.__ngt_renderer__;
320+
const targetCdr = rS?.[NgtRendererClassId.injectorFactory]?.().get(ChangeDetectorRef, null);
355321
// if target is DOM node, then we pass that to delegate Renderer
356322
const callbackWithCdr = (event: any) => {
357323
const value = callback(event);
@@ -378,19 +344,15 @@ export class NgtRenderer implements Renderer2 {
378344
}
379345

380346
if (
381-
target.__ngt_renderer__[NgtRendererClassId.type] === 'three' ||
382-
(target.__ngt_renderer__[NgtRendererClassId.type] === 'compound' &&
383-
target.__ngt_renderer__[NgtRendererClassId.compounded])
347+
rS[NgtRendererClassId.type] === 'three' ||
348+
(rS[NgtRendererClassId.type] === 'compound' && rS[NgtRendererClassId.compounded])
384349
) {
385-
const instance = target.__ngt_renderer__[NgtRendererClassId.compounded] || target;
350+
const instance = rS[NgtRendererClassId.compounded] || target;
386351
const priority = getLocalState(target).priority;
387352
return processThreeEvent(instance, priority || 0, eventName, callback, this.store.rootCdr, targetCdr!);
388353
}
389354

390-
if (
391-
target.__ngt_renderer__[NgtRendererClassId.type] === 'compound' &&
392-
!target.__ngt_renderer__[NgtRendererClassId.compounded]
393-
) {
355+
if (rS[NgtRendererClassId.type] === 'compound' && !rS[NgtRendererClassId.compounded]) {
394356
this.store.queueOperation(target, [
395357
'op',
396358
() => this.store.queueOperation(target, ['cleanUp', this.listen(target, eventName, callback)]),
@@ -399,9 +361,6 @@ export class NgtRenderer implements Renderer2 {
399361
return () => {};
400362
}
401363

402-
get data(): { [key: string]: any } {
403-
return this.delegate.data;
404-
}
405364
createText = this.delegate.createText.bind(this.delegate);
406365
destroy = this.delegate.destroy.bind(this.delegate);
407366
destroyNode: ((node: any) => void) | null = null;
@@ -413,4 +372,7 @@ export class NgtRenderer implements Renderer2 {
413372
setStyle = this.delegate.setStyle.bind(this.delegate);
414373
removeStyle = this.delegate.removeStyle.bind(this.delegate);
415374
setValue = this.delegate.setValue.bind(this.delegate);
375+
get data(): { [key: string]: any } {
376+
return this.delegate.data;
377+
}
416378
}

0 commit comments

Comments
 (0)