-
Notifications
You must be signed in to change notification settings - Fork 57
Expand file tree
/
Copy pathRefs.njs
More file actions
48 lines (39 loc) · 1.36 KB
/
Refs.njs
File metadata and controls
48 lines (39 loc) · 1.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import Nullstack from 'nullstack'
class Refs extends Nullstack {
composedComputed = '_composedComputed'
hydrate() {
this.id = this._element.id
}
setRef({ element, refInstanceCount, id }) {
this.refReceivedProps = element.id === id
this._function = element
this.isOnDOM = element.offsetHeight > 0 && refInstanceCount
}
renderBubble({ ref }) {
return <div id="bubble" ref={ref} data-id={this._bubble?.id} />
}
changeInstance(context) {
context.refInstanceCount++
}
render({ refInstanceCount }) {
return (
<div id="hydrate-element" data-id={this.id} ref={this._element} data-instance={refInstanceCount}>
<span id="composed-computed" ref={this[this.composedComputed]} data-id={this._composedComputed?.id} />
<span id="logical-computed" ref={this[['_logical', 'Computed'].join('')]} data-id={this._logicalComputed?.id} />
<span id="literal-computed" ref={this._literalComputed} data-id={this._literalComputed?.id} />
<span
id="function"
ref={this.setRef}
data-ref-received-props={this.refReceivedProps}
data-dom={this.isOnDOM}
data-id={this._function?.id}
>
span
</span>
<Bubble ref={this._bubble} />
<button onclick={this.changeInstance}>Change Instance</button>
</div>
)
}
}
export default Refs