@katabatic/runtime 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/index.js +50 -39
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@katabatic/runtime",
3
3
  "license": "MIT",
4
- "version": "1.0.0",
4
+ "version": "1.1.0",
5
5
  "type": "module",
6
6
  "repository": {
7
7
  "type": "git",
package/src/index.js CHANGED
@@ -7,7 +7,6 @@ import { IfBlock } from './ifBlock.js'
7
7
  export { EachBlock, IfBlock }
8
8
 
9
9
  export function $$(customElement) {
10
-
11
10
  Client.prototype.ifBlock ??= function (anchor, getCondition, concequent, alternate) {
12
11
  const block = new IfBlock(anchor, getCondition, concequent, alternate).init()
13
12
  this.add(block)
@@ -21,8 +20,6 @@ export function $$(customElement) {
21
20
  }
22
21
 
23
22
  const client = new Client()
24
- let signal
25
- let locked = false
26
23
 
27
24
  client.boundary = function (fn) {
28
25
  const boundary = new Boundary(fn, { orphaned: true }).init()
@@ -37,57 +34,71 @@ export function $$(customElement) {
37
34
  return block
38
35
  }
39
36
 
40
- client.lifecycle = function (event) {
41
- const set = (state, result) => {
42
- this.state = state
43
- return result
44
- }
37
+ client.lifecycle = function (event, fn) {
38
+ this.state ??= 'idle'
45
39
 
46
40
  switch (this.state) {
47
41
  case 'connected':
48
- if (event === 'disconnected') return set('disconnected', false)
49
- if (event === 'microtask') return set('connected', false)
42
+ if (event === 'disconnected') {
43
+ this.state = 'disconnecting'
44
+ queueMicrotask(() => {
45
+ if (this.state === 'disconnecting') {
46
+ this.state = 'disconnected'
47
+ fn()
48
+ } else {
49
+ this.state = 'connected'
50
+ customElement.connectedMoveCallback?.()
51
+ }
52
+ })
53
+ }
50
54
  break
51
- case 'disconnected':
52
- if (event === 'connected') return set('connected', false)
53
- if (event === 'microtask') return set('disconnected', true)
55
+ case 'disconnecting':
56
+ if (event === 'connected') {
57
+ this.state = 'connected'
58
+ }
54
59
  break
55
- default:
56
- if (event === 'connected') return set('connected', true)
60
+ case 'disconnected':
61
+ case 'idle':
62
+ if (event === 'connected') {
63
+ this.state = 'connected'
64
+ fn()
65
+ }
57
66
  break
58
67
  }
59
68
  }
60
69
 
61
70
  client.instrument = function (property) {
62
- signal ??= new Signal(undefined, customElement)
63
-
64
- let value = customElement[property]
65
- Object.defineProperty(customElement, property, {
66
- get: () => {
67
- track?.(new PropertyTracker(signal, property))
68
- return value
69
- },
70
- set: (nextValue) => {
71
- const hasChange = value !== nextValue
72
- value = nextValue
73
-
74
- if (hasChange) {
75
- signal.dispatchEvent(new SignalEvent('set', { property }))
76
- signal.dispatchEvent(new SignalEvent('change'))
71
+ this.signal ??= new Signal(undefined, customElement)
72
+
73
+ if (!Object.getOwnPropertyDescriptor(customElement, property)?.get) {
74
+ let value = customElement[property]
75
+ Object.defineProperty(customElement, property, {
76
+ get: () => {
77
+ track?.(new PropertyTracker(this.signal, property))
78
+ return value
79
+ },
80
+ set: (nextValue) => {
81
+ const hasChange = value !== nextValue
82
+ value = nextValue
83
+
84
+ if (hasChange) {
85
+ this.signal.dispatchEvent(new SignalEvent('set', { property }))
86
+ this.signal.dispatchEvent(new SignalEvent('change'))
87
+ }
77
88
  }
78
- }
79
- })
89
+ })
90
+ }
80
91
  }
81
92
 
82
93
  client.trackAttribute = function (name) {
83
- signal ??= new Signal(undefined, customElement)
84
- track?.(new AttributeTracker(signal, name))
94
+ this.signal ??= new Signal(undefined, customElement)
95
+ track?.(new AttributeTracker(this.signal, name))
85
96
  }
86
97
 
87
98
  client.attributeChanged = function (name, value, nextValue) {
88
99
  if (value !== nextValue) {
89
- signal ??= new Signal(undefined, customElement)
90
- signal.dispatchEvent(new SignalEvent('attributeChanged', { name }))
100
+ this.signal ??= new Signal(undefined, customElement)
101
+ this.signal.dispatchEvent(new SignalEvent('attributeChanged', { name }))
91
102
  }
92
103
  }
93
104
 
@@ -96,9 +107,9 @@ export function $$(customElement) {
96
107
  !!Object.getOwnPropertyDescriptor(object, property)?.get ||
97
108
  !!Object.getOwnPropertyDescriptor(Object.getPrototypeOf(object), property)?.get
98
109
  ) {
99
- locked = true
110
+ this.locked = true
100
111
  fn(object[property])
101
- locked = false
112
+ this.locked = false
102
113
  return true
103
114
  }
104
115
  return false
@@ -109,7 +120,7 @@ export function $$(customElement) {
109
120
  !!Object.getOwnPropertyDescriptor(object, property)?.set ||
110
121
  !!Object.getOwnPropertyDescriptor(Object.getPrototypeOf(object), property)?.set
111
122
  ) {
112
- if (!locked) object[property] = value
123
+ if (!this.locked) object[property] = value
113
124
  return true
114
125
  }
115
126
  return false