@esportsplus/template 0.24.0 → 0.26.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 (5) hide show
  1. package/build/slot/array.js +16 -5
  2. package/build/types.d.ts +1 -1
  3. package/package.json +2 -2
  4. package/src/slot/array.ts +20 -6
  5. package/src/types.ts +1 -1
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,14 +9,15 @@ 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;
15
16
  this.marker = anchor;
16
- this.template = function (data) {
17
+ this.template = function (data, i) {
17
18
  let dispose, frag = root((d) => {
18
19
  dispose = d;
19
- return template(data);
20
+ return template(data, i);
20
21
  }), group = {
21
22
  head: firstChild.call(frag),
22
23
  tail: lastChild.call(frag)
@@ -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,22 +96,27 @@ 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) => {
108
- let { array, template } = renderable, slot = new ArraySlot(anchor, array, template);
119
+ let array = renderable.array, slot = new ArraySlot(anchor, array, renderable.template);
109
120
  if (array.length) {
110
121
  root(() => {
111
122
  slot.nodes = array.map(slot.template);
package/build/types.d.ts CHANGED
@@ -24,7 +24,7 @@ type Renderable<T> = DocumentFragment | Effect<T> | Node | NodeList | Primitive
24
24
  type RenderableReactive<T> = Readonly<{
25
25
  [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
26
26
  array: ReactiveArray<T>;
27
- template: (value: T) => ReturnType<typeof html>;
27
+ template: (value: T, i: number) => ReturnType<typeof html>;
28
28
  }>;
29
29
  type SlotGroup = {
30
30
  head: Element;
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.24.0",
17
+ "version": "0.26.0",
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']) {
@@ -19,11 +20,11 @@ class ArraySlot<T> {
19
20
 
20
21
  this.array = array;
21
22
  this.marker = anchor;
22
- this.template = function (data) {
23
+ this.template = function (data, i) {
23
24
  let dispose: VoidFunction,
24
25
  frag = root((d) => {
25
26
  dispose = d;
26
- return template(data);
27
+ return template(data, i);
27
28
  }),
28
29
  group = {
29
30
  head: firstChild.call(frag),
@@ -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,28 +125,35 @@ 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
 
139
153
 
140
154
  export default <T>(anchor: Element, renderable: RenderableReactive<T>) => {
141
- let { array, template } = renderable,
142
- slot = new ArraySlot(anchor, array, template);
155
+ let array = renderable.array,
156
+ slot = new ArraySlot(anchor, array, renderable.template);
143
157
 
144
158
  if (array.length) {
145
159
  root(() => {
package/src/types.ts CHANGED
@@ -34,7 +34,7 @@ type Renderable<T> = DocumentFragment | Effect<T> | Node | NodeList | Primitive
34
34
  type RenderableReactive<T> = Readonly<{
35
35
  [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
36
36
  array: ReactiveArray<T>;
37
- template: (value: T) => ReturnType<typeof html>;
37
+ template: (value: T, i: number) => ReturnType<typeof html>;
38
38
  }>;
39
39
 
40
40
  type SlotGroup = {