@esportsplus/template 0.25.0 → 0.26.1

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 (3) hide show
  1. package/build/slot/array.js +13 -2
  2. package/package.json +2 -2
  3. package/src/slot/array.ts +16 -2
package/build/slot/array.js CHANGED
@@ -1,4 +1,4 @@
1
- import { root } from '@esportsplus/reactivity';
1
+ import { read, root, set, signal } from '@esportsplus/reactivity';
2
2
  import { EMPTY_FRAGMENT } from '../constants.js';
3
3
  import { append } from '../utilities/fragment.js';
4
4
  import { cloneNode, firstChild, lastChild } from '../utilities/node.js';
@@ -9,6 +9,7 @@ class ArraySlot {
9
9
  marker;
10
10
  nodes = [];
11
11
  template;
12
+ trigger = signal(false);
12
13
  constructor(anchor, array, template) {
13
14
  let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
14
15
  this.array = array;
@@ -45,6 +46,7 @@ class ArraySlot {
45
46
  });
46
47
  }
47
48
  get length() {
49
+ read(this.trigger);
48
50
  return this.nodes.length;
49
51
  }
50
52
  set length(n) {
@@ -57,6 +59,7 @@ class ArraySlot {
57
59
  else {
58
60
  this.splice(n);
59
61
  }
62
+ set(this.trigger, !this.trigger.value);
60
63
  }
61
64
  anchor(index = this.nodes.length - 1) {
62
65
  let node = this.nodes[index];
@@ -67,17 +70,20 @@ class ArraySlot {
67
70
  }
68
71
  clear() {
69
72
  remove(...this.nodes.splice(0));
73
+ set(this.trigger, !this.trigger.value);
70
74
  }
71
75
  pop() {
72
76
  let group = this.nodes.pop();
73
77
  if (group) {
74
78
  remove(group);
79
+ set(this.trigger, !this.trigger.value);
75
80
  }
76
81
  }
77
82
  push(items) {
78
83
  let anchor = this.anchor();
79
84
  this.nodes.push(...items.map(this.template));
80
85
  anchor.after(this.fragment);
86
+ set(this.trigger, !this.trigger.value);
81
87
  }
82
88
  render() {
83
89
  if (this.nodes.length) {
@@ -90,18 +96,23 @@ class ArraySlot {
90
96
  let group = this.nodes.shift();
91
97
  if (group) {
92
98
  remove(group);
99
+ set(this.trigger, !this.trigger.value);
93
100
  }
94
101
  }
95
102
  splice(start, stop = this.nodes.length, ...items) {
96
103
  if (!items.length) {
97
- return remove(...this.nodes.splice(start, stop));
104
+ remove(...this.nodes.splice(start, stop));
105
+ set(this.trigger, !this.trigger.value);
106
+ return;
98
107
  }
99
108
  remove(...this.nodes.splice(start, stop, ...items.map(this.template)));
100
109
  this.anchor(start - 1).after(this.fragment);
110
+ set(this.trigger, !this.trigger.value);
101
111
  }
102
112
  unshift(items) {
103
113
  this.nodes.unshift(...items.map(this.template));
104
114
  this.marker.after(this.fragment);
115
+ set(this.trigger, !this.trigger.value);
105
116
  }
106
117
  }
107
118
  export default (anchor, renderable) => {
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "@esportsplus/queue": "^0.1.0",
5
5
  "@esportsplus/reactivity": "^0.17.2",
6
6
  "@esportsplus/tasks": "^0.2.1",
7
- "@esportsplus/utilities": "^0.22.1"
7
+ "@esportsplus/utilities": "^0.22.2"
8
8
  },
9
9
  "devDependencies": {
10
10
  "@esportsplus/typescript": "^0.9.2"
@@ -14,7 +14,7 @@
14
14
  "private": false,
15
15
  "type": "module",
16
16
  "types": "./build/index.d.ts",
17
- "version": "0.25.0",
17
+ "version": "0.26.1",
18
18
  "scripts": {
19
19
  "build": "tsc && tsc-alias",
20
20
  "-": "-"
package/src/slot/array.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { root, ReactiveArray } from '@esportsplus/reactivity';
1
+ import { read, root, set, signal, ReactiveArray } from '@esportsplus/reactivity';
2
2
  import { EMPTY_FRAGMENT } from '~/constants';
3
3
  import { RenderableReactive, SlotGroup } from '~/types';
4
4
  import { append } from '~/utilities/fragment';
@@ -12,6 +12,7 @@ class ArraySlot<T> {
12
12
  marker: Element;
13
13
  nodes: SlotGroup[] = [];
14
14
  template: (...args: Parameters< RenderableReactive<T>['template'] >) => SlotGroup;
15
+ trigger = signal(false);
15
16
 
16
17
 
17
18
  constructor(anchor: Element, array: ReactiveArray<T>, template: RenderableReactive<T>['template']) {
@@ -58,6 +59,7 @@ class ArraySlot<T> {
58
59
 
59
60
 
60
61
  get length() {
62
+ read(this.trigger);
61
63
  return this.nodes.length;
62
64
  }
63
65
 
@@ -71,6 +73,8 @@ class ArraySlot<T> {
71
73
  else {
72
74
  this.splice(n);
73
75
  }
76
+
77
+ set(this.trigger, !this.trigger.value);
74
78
  }
75
79
 
76
80
 
@@ -86,6 +90,7 @@ class ArraySlot<T> {
86
90
 
87
91
  clear() {
88
92
  remove(...this.nodes.splice(0));
93
+ set(this.trigger, !this.trigger.value);
89
94
  }
90
95
 
91
96
  pop() {
@@ -93,6 +98,7 @@ class ArraySlot<T> {
93
98
 
94
99
  if (group) {
95
100
  remove(group);
101
+ set(this.trigger, !this.trigger.value);
96
102
  }
97
103
  }
98
104
 
@@ -102,6 +108,7 @@ class ArraySlot<T> {
102
108
  this.nodes.push( ...items.map(this.template) );
103
109
 
104
110
  anchor.after(this.fragment);
111
+ set(this.trigger, !this.trigger.value);
105
112
  }
106
113
 
107
114
  render() {
@@ -118,21 +125,28 @@ class ArraySlot<T> {
118
125
 
119
126
  if (group) {
120
127
  remove(group);
128
+ set(this.trigger, !this.trigger.value);
121
129
  }
122
130
  }
123
131
 
124
132
  splice(start: number, stop: number = this.nodes.length, ...items: T[]) {
125
133
  if (!items.length) {
126
- return remove(...this.nodes.splice(start, stop));
134
+ remove(...this.nodes.splice(start, stop));
135
+ set(this.trigger, !this.trigger.value);
136
+ return;
127
137
  }
128
138
 
129
139
  remove( ...this.nodes.splice(start, stop, ...items.map(this.template)) );
130
140
  this.anchor(start - 1).after(this.fragment);
141
+
142
+ set(this.trigger, !this.trigger.value);
131
143
  }
132
144
 
133
145
  unshift(items: T[]) {
134
146
  this.nodes.unshift(...items.map(this.template));
135
147
  this.marker.after(this.fragment);
148
+
149
+ set(this.trigger, !this.trigger.value);
136
150
  }
137
151
  }
138
152