neo.mjs 6.18.2 → 6.19.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 (108) hide show
  1. package/README.md +28 -214
  2. package/apps/ServiceWorker.mjs +2 -2
  3. package/apps/colors/view/ViewportController.mjs +7 -3
  4. package/apps/portal/data/blog.json +13 -0
  5. package/apps/portal/view/HeaderToolbar.mjs +2 -2
  6. package/apps/portal/view/Viewport.mjs +4 -2
  7. package/apps/portal/view/ViewportController.mjs +89 -8
  8. package/apps/portal/view/blog/Container.mjs +8 -8
  9. package/apps/portal/view/blog/List.mjs +6 -6
  10. package/apps/portal/view/home/MainContainer.mjs +9 -10
  11. package/apps/portal/view/home/parts/BaseContainer.mjs +8 -1
  12. package/apps/portal/view/home/parts/Colors.mjs +4 -4
  13. package/apps/portal/view/home/parts/Helix.mjs +2 -2
  14. package/apps/portal/view/home/parts/How.mjs +3 -3
  15. package/apps/portal/view/home/parts/MainNeo.mjs +6 -7
  16. package/apps/portal/view/home/parts/References.mjs +88 -0
  17. package/apps/portal/view/learn/ContentView.mjs +3 -1
  18. package/apps/portal/view/learn/MainContainer.mjs +3 -2
  19. package/apps/portal/view/learn/MainContainerController.mjs +11 -0
  20. package/apps/portal/view/learn/PageContainer.mjs +5 -3
  21. package/apps/portal/view/services/Component.mjs +73 -0
  22. package/apps/website/data/blog.json +13 -0
  23. package/examples/ServiceWorker.mjs +2 -2
  24. package/examples/component/carousel/MainContainer.mjs +42 -33
  25. package/examples/layout/cube/MainContainer.mjs +217 -0
  26. package/examples/layout/cube/app.mjs +6 -0
  27. package/examples/layout/cube/index.html +11 -0
  28. package/examples/layout/cube/neo-config.json +6 -0
  29. package/package.json +7 -7
  30. package/resources/data/deck/learnneo/pages/2023-10-14T19-25-08-153Z.md +2 -2
  31. package/resources/data/deck/learnneo/pages/ComponentModels.md +6 -6
  32. package/resources/data/deck/learnneo/pages/ComponentsAndContainers.md +10 -10
  33. package/resources/data/deck/learnneo/pages/Config.md +6 -6
  34. package/resources/data/deck/learnneo/pages/CustomComponents.md +4 -4
  35. package/resources/data/deck/learnneo/pages/DescribingTheUI.md +4 -4
  36. package/resources/data/deck/learnneo/pages/Earthquakes-01-goals.md +32 -0
  37. package/resources/data/deck/learnneo/pages/Earthquakes-Lab-01-generate-a-workspace.md +47 -0
  38. package/resources/data/deck/learnneo/pages/Earthquakes-Lab-02-generate-the-starter-app.md +150 -0
  39. package/resources/data/deck/learnneo/pages/Earthquakes-Lab-03-debugging.md +136 -0
  40. package/resources/data/deck/learnneo/pages/Earthquakes-Lab-04-fetch-data.md +146 -0
  41. package/resources/data/deck/learnneo/pages/Earthquakes-Lab-05-refactor-the-table.md +146 -0
  42. package/resources/data/deck/learnneo/pages/Earthquakes-Lab-06-use-a-view-model.md +301 -0
  43. package/resources/data/deck/learnneo/pages/Earthquakes-Lab-07-use-the-google-maps-addon.md +175 -0
  44. package/resources/data/deck/learnneo/pages/Earthquakes-Lab-08-events.md +38 -0
  45. package/resources/data/deck/learnneo/pages/Earthquakes.md +10 -10
  46. package/resources/data/deck/learnneo/pages/Events.md +7 -7
  47. package/resources/data/deck/learnneo/pages/Extending.md +7 -7
  48. package/resources/data/deck/learnneo/pages/Glossary.md +0 -0
  49. package/resources/data/deck/learnneo/pages/GuideEvents.md +97 -19
  50. package/resources/data/deck/learnneo/pages/GuideViewModels.md +21 -21
  51. package/resources/data/deck/learnneo/pages/References.md +8 -8
  52. package/resources/data/deck/learnneo/pages/TestLivePreview.md +5 -4
  53. package/resources/data/deck/learnneo/pages/TodoList.md +9 -9
  54. package/resources/data/deck/learnneo/pages/Welcome.md +3 -3
  55. package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Window.md +2 -2
  56. package/resources/data/deck/learnneo/pages/WhyNeo-Speed.md +2 -2
  57. package/resources/data/deck/learnneo/tree.json +2 -1
  58. package/resources/images/apps/portal/neo-references.png +0 -0
  59. package/resources/scss/src/apps/portal/HeaderToolbar.scss +0 -46
  60. package/resources/scss/src/apps/portal/Viewport.scss +16 -1
  61. package/resources/scss/src/apps/portal/blog/Container.scss +7 -7
  62. package/resources/scss/src/apps/portal/blog/List.scss +20 -16
  63. package/resources/scss/src/apps/portal/home/parts/BaseContainer.scss +33 -4
  64. package/resources/scss/src/apps/portal/home/parts/MainNeo.scss +4 -5
  65. package/resources/scss/src/apps/portal/home/parts/References.scss +46 -0
  66. package/resources/scss/src/apps/portal/learn/ContentTreeList.scss +20 -0
  67. package/resources/scss/src/apps/portal/learn/ContentView.scss +4 -0
  68. package/resources/scss/src/apps/portal/learn/MainContainer.scss +1 -1
  69. package/resources/scss/src/apps/portal/learn/PageContainer.scss +22 -16
  70. package/resources/scss/src/apps/portal/services/Component.scss +20 -0
  71. package/resources/scss/src/{apps/portal/learn → code}/LivePreview.scss +1 -1
  72. package/resources/scss/src/component/Carousel.scss +21 -0
  73. package/resources/scss/src/component/Helix.scss +1 -2
  74. package/resources/scss/src/examples/layout/cube/MainContainer.scss +7 -0
  75. package/resources/scss/src/layout/Cube.scss +80 -0
  76. package/resources/scss/src/tab/Container.scss +10 -10
  77. package/resources/scss/theme-neo-light/apps/portal/blog/Container.scss +3 -0
  78. package/resources/scss/theme-neo-light/form/field/Search.scss +1 -1
  79. package/resources/scss/theme-neo-light/tooltip/Base.scss +1 -1
  80. package/src/DefaultConfig.mjs +2 -2
  81. package/src/Main.mjs +15 -1
  82. package/src/Neo.mjs +14 -3
  83. package/{apps/portal/view/learn → src/code}/LivePreview.mjs +43 -27
  84. package/src/component/Base.mjs +18 -1
  85. package/src/container/Base.mjs +3 -1
  86. package/src/dialog/Base.mjs +1 -2
  87. package/src/layout/Base.mjs +43 -6
  88. package/src/layout/Card.mjs +21 -59
  89. package/src/layout/Cube.mjs +428 -0
  90. package/src/layout/Fit.mjs +9 -38
  91. package/src/layout/Flexbox.mjs +16 -17
  92. package/src/layout/Form.mjs +13 -70
  93. package/src/layout/Grid.mjs +6 -18
  94. package/src/main/addon/ResizeObserver.mjs +18 -2
  95. package/src/main/mixin/DeltaUpdates.mjs +16 -3
  96. package/src/util/Array.mjs +36 -0
  97. package/src/vdom/Helper.mjs +328 -445
  98. package/src/vdom/VNode.mjs +12 -1
  99. package/test/siesta/siesta.js +16 -1
  100. package/test/siesta/tests/VdomCalendar.mjs +2111 -37
  101. package/test/siesta/tests/VdomHelper.mjs +283 -47
  102. package/test/siesta/tests/vdom/Advanced.mjs +367 -0
  103. package/test/siesta/tests/vdom/layout/Cube.mjs +189 -0
  104. package/test/siesta/tests/vdom/table/Container.mjs +133 -0
  105. package/apps/portal/view/home/parts/HelloWorld.mjs +0 -83
  106. package/apps/portal/view/home/preview/PageCodeContainer.mjs +0 -55
  107. package/resources/scss/src/apps/portal/home/preview/PageCodeContainer.scss +0 -115
  108. package/resources/scss/theme-neo-light/apps/portal/learn/ContentTreeList.scss +0 -23
package/test/siesta/tests/vdom/Advanced.mjs ADDED
@@ -0,0 +1,367 @@
1
+ import Neo from '../../../../src/Neo.mjs';
2
+ import * as core from '../../../../src/core/_export.mjs';
3
+ import VdomHelper from '../../../../src/vdom/Helper.mjs';
4
+
5
+ let deltas, output, vdom, vnode;
6
+
7
+ StartTest(t => {
8
+ t.it('Move & Edit multiple Events', t => {
9
+ vdom =
10
+ {id: 'neo-calendar-week', cn: [
11
+ {id: 'neo-column-1', cn: [
12
+ {id: 'neo-event-1', cn: [
13
+ {id: 'neo-event-1__time', html: '08:00'},
14
+ {id: 'neo-event-1__title', html: 'Event 1'}
15
+ ]},
16
+ {id: 'neo-event-2', cn: [
17
+ {id: 'neo-event-2__time', html: '10:00'},
18
+ {id: 'neo-event-2__title', html: 'Event 2'}
19
+ ]}
20
+ ]},
21
+ {id: 'neo-column-2', cn: [
22
+ {id: 'neo-event-3', cn: [
23
+ {id: 'neo-event-3__time', html: '08:00'},
24
+ {id: 'neo-event-3__title', html: 'Event 3'}
25
+ ]},
26
+ {id: 'neo-event-4', cn: [
27
+ {id: 'neo-event-4__time', html: '10:00'},
28
+ {id: 'neo-event-4__title', html: 'Event 4'}
29
+ ]}
30
+ ]}
31
+ ]};
32
+
33
+ vnode = VdomHelper.create(vdom);
34
+
35
+ vdom =
36
+ {id: 'neo-calendar-week', cn: [
37
+ {id: 'neo-column-1', cn: [
38
+ {id: 'neo-event-3', cls: ['foo1'], cn: [
39
+ {id: 'neo-event-3__time', html: '08:00'},
40
+ {id: 'neo-event-3__title', html: 'Event 3'}
41
+ ]},
42
+ {id: 'neo-event-4', cls: ['foo2'], cn: [
43
+ {id: 'neo-event-4__time', html: '10:00'},
44
+ {id: 'neo-event-4__title', html: 'Event 4'}
45
+ ]},
46
+ {id: 'neo-event-2', cls: ['foo3'], cn: [
47
+ {id: 'neo-event-2__time', html: '06:00'},
48
+ {id: 'neo-event-2__title', html: 'Event 2'}
49
+ ]},
50
+ {id: 'neo-event-1', cn: [
51
+ {id: 'neo-event-1__time', html: '08:00'},
52
+ {id: 'neo-event-1__title', html: 'Event 1'}
53
+ ]}
54
+ ]},
55
+ {id: 'neo-column-2', cls: ['foo4'], cn: []}
56
+ ]};
57
+
58
+ output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
59
+
60
+ t.is(deltas.length, 8, 'Count deltas equals 8');
61
+
62
+ t.isDeeplyStrict(deltas, [
63
+ {action: 'moveNode', id: 'neo-event-3', index: 0, parentId: 'neo-column-1'},
64
+ { id: 'neo-event-3', cls: {add: ['foo1']}},
65
+ {action: 'moveNode', id: 'neo-event-4', index: 1, parentId: 'neo-column-1'},
66
+ { id: 'neo-event-4', cls: {add: ['foo2']}},
67
+ {action: 'moveNode', id: 'neo-event-2', index: 2, parentId: 'neo-column-1'},
68
+ { id: 'neo-event-2', cls: {add: ['foo3']}},
69
+ { id: 'neo-event-2__time', innerHTML: '06:00'},
70
+ { id: 'neo-column-2', cls: {add: ['foo4']}}
71
+ ], 'Deltas got created successfully');
72
+
73
+ t.diag('Revert operation');
74
+
75
+ vdom =
76
+ {id: 'neo-calendar-week', cn: [
77
+ {id: 'neo-column-1', cn: [
78
+ {id: 'neo-event-1', cn: [
79
+ {id: 'neo-event-1__time', html: '08:00'},
80
+ {id: 'neo-event-1__title', html: 'Event 1'}
81
+ ]},
82
+ {id: 'neo-event-2', cn: [
83
+ {id: 'neo-event-2__time', html: '10:00'},
84
+ {id: 'neo-event-2__title', html: 'Event 2'}
85
+ ]}
86
+ ]},
87
+ {id: 'neo-column-2', cn: [
88
+ {id: 'neo-event-3', cn: [
89
+ {id: 'neo-event-3__time', html: '08:00'},
90
+ {id: 'neo-event-3__title', html: 'Event 3'}
91
+ ]},
92
+ {id: 'neo-event-4', cn: [
93
+ {id: 'neo-event-4__time', html: '10:00'},
94
+ {id: 'neo-event-4__title', html: 'Event 4'}
95
+ ]}
96
+ ]}
97
+ ]};
98
+
99
+ output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
100
+
101
+ t.is(deltas.length, 8, 'Count deltas equals 8');
102
+
103
+ t.isDeeplyStrict(deltas, [
104
+ {action: 'moveNode', id: 'neo-event-1', index: 0, parentId: 'neo-column-1'},
105
+ { id: 'neo-event-2', cls: {remove: ['foo3']}},
106
+ { id: 'neo-event-2__time', innerHTML: '10:00'},
107
+ { id: 'neo-column-2', cls: {remove: ['foo4']}},
108
+ {action: 'moveNode', id: 'neo-event-3', index: 0, parentId: 'neo-column-2'},
109
+ { id: 'neo-event-3', cls: {remove: ['foo1']}},
110
+ {action: 'moveNode', id: 'neo-event-4', index: 1, parentId: 'neo-column-2'},
111
+ { id: 'neo-event-4', cls: {remove: ['foo2']}}
112
+ ], 'Deltas got created successfully')
113
+ });
114
+
115
+ t.it('Add, Move & Edit multiple Events', t => {
116
+ vdom =
117
+ {id: 'neo-calendar-week', cn: [
118
+ {id: 'neo-column-1', cn: [
119
+ {id: 'neo-event-1', cls: ['foo1'], cn: [
120
+ {id: 'neo-event-1__time', html: '08:00'},
121
+ {id: 'neo-event-1__title', html: 'Event 1'}
122
+ ]},
123
+ {id: 'neo-event-2', cls: ['foo2'], cn: [
124
+ {id: 'neo-event-2__time', html: '10:00'},
125
+ {id: 'neo-event-2__title', html: 'Event 2'}
126
+ ]},
127
+ {id: 'neo-event-3', cls: ['foo3'], cn: [
128
+ {id: 'neo-event-3__time', html: '06:00'},
129
+ {id: 'neo-event-3__title', html: 'Event 3'}
130
+ ]},
131
+ {id: 'neo-event-4', cn: [
132
+ {id: 'neo-event-4__time', html: '08:00'},
133
+ {id: 'neo-event-4__title', html: 'Event 4'}
134
+ ]}
135
+ ]},
136
+ {id: 'neo-column-2', cls: ['foo4'], cn: []}
137
+ ]};
138
+
139
+ vnode = VdomHelper.create(vdom);
140
+
141
+ vdom =
142
+ {id: 'neo-calendar-week', cn: [
143
+ {id: 'neo-column-1', cn: [
144
+ {id: 'neo-event-5', cn: [ // new node
145
+ {id: 'neo-event-5__time', html: '08:00'},
146
+ {id: 'neo-event-5__title', html: 'Event 5'}
147
+ ]},
148
+ {id: 'neo-event-6', cn: [ // new node
149
+ {id: 'neo-event-6__time', html: '08:00'},
150
+ {id: 'neo-event-6__title', html: 'Event 6'}
151
+ ]},
152
+ {id: 'neo-event-1', cls: ['foo1'], cn: [
153
+ {id: 'neo-event-4__time', html: '08:00'}, // switched the content with event 4
154
+ {id: 'neo-event-4__title', html: 'Event 4_new'} // and changed the html value
155
+ ]},
156
+ {id: 'neo-event-4', cn: [
157
+ {id: 'neo-event-1__time', html: '08:00'}, // switched the content with event 1
158
+ {id: 'neo-event-1__title', html: 'Event 1'}
159
+ ]}
160
+ ]},
161
+ {id: 'neo-column-2', cn: [
162
+ {id: 'neo-event-7', cn: [ // new node
163
+ {id: 'neo-event-7__time', html: '08:00'},
164
+ {id: 'neo-event-7__title', html: 'Event 7'}
165
+ ]},
166
+ {id: 'neo-event-2', cn: [ // moved from column-1
167
+ {id: 'neo-event-2__time', html: '10:00'},
168
+ {id: 'neo-event-2__title', html: 'Event 2'}
169
+ ]}
170
+ ]}
171
+ ]};
172
+
173
+ output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
174
+
175
+ t.is(deltas.length, 12, 'Count deltas equals 12');
176
+
177
+ t.isDeeplyStrict(deltas, [
178
+ {action: 'insertNode', index: 0, parentId: 'neo-column-1', outerHTML: t.any(String)},
179
+ {action: 'insertNode', index: 1, parentId: 'neo-column-1', outerHTML: t.any(String)},
180
+ {action: 'moveNode', id: 'neo-event-4__time', index: 0, parentId: 'neo-event-1'},
181
+ {action: 'moveNode', id: 'neo-event-4__title', index: 1, parentId: 'neo-event-1'},
182
+ { id: 'neo-event-4__title', innerHTML: 'Event 4_new'},
183
+ {action: 'moveNode', id: 'neo-event-1__time', index: 0, parentId: 'neo-event-4'},
184
+ {action: 'moveNode', id: 'neo-event-1__title', index: 1, parentId: 'neo-event-4'},
185
+ { id: 'neo-column-2', cls: {remove: ['foo4']}},
186
+ {action: 'insertNode', index: 0, parentId: 'neo-column-2', outerHTML: t.any(String)},
187
+ {action: 'moveNode', id: 'neo-event-2', index: 1, parentId: 'neo-column-2'},
188
+ { id: 'neo-event-2', cls: {remove: ['foo2']}},
189
+ {action: 'removeNode', id: 'neo-event-3'}
190
+ ], 'Deltas got created successfully');
191
+
192
+ t.diag('Revert operation');
193
+
194
+ vdom =
195
+ {id: 'neo-calendar-week', cn: [
196
+ {id: 'neo-column-1', cn: [
197
+ {id: 'neo-event-1', cls: ['foo1'], cn: [
198
+ {id: 'neo-event-1__time', html: '08:00'},
199
+ {id: 'neo-event-1__title', html: 'Event 1'}
200
+ ]},
201
+ {id: 'neo-event-2', cls: ['foo2'], cn: [
202
+ {id: 'neo-event-2__time', html: '10:00'},
203
+ {id: 'neo-event-2__title', html: 'Event 2'}
204
+ ]},
205
+ {id: 'neo-event-3', cls: ['foo3'], cn: [
206
+ {id: 'neo-event-3__time', html: '06:00'},
207
+ {id: 'neo-event-3__title', html: 'Event 3'}
208
+ ]},
209
+ {id: 'neo-event-4', cn: [
210
+ {id: 'neo-event-4__time', html: '08:00'},
211
+ {id: 'neo-event-4__title', html: 'Event 4'}
212
+ ]}
213
+ ]},
214
+ {id: 'neo-column-2', cls: ['foo4'], cn: []}
215
+ ]};
216
+
217
+ output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
218
+
219
+ t.is(deltas.length, 12, 'Count deltas equals 12');
220
+
221
+ t.isDeeplyStrict(deltas, [
222
+ {action: 'moveNode', id: 'neo-event-1__time', index: 0, parentId: 'neo-event-1'},
223
+ {action: 'moveNode', id: 'neo-event-1__title', index: 1, parentId: 'neo-event-1'},
224
+ {action: 'moveNode', id: 'neo-event-2', index: 1, parentId: 'neo-column-1'},
225
+ { id: 'neo-event-2', cls: {add: ['foo2']}},
226
+ {action: 'insertNode', index: 2, parentId: 'neo-column-1', outerHTML: t.any(String)},
227
+ {action: 'moveNode', id: 'neo-event-4__time', index: 0, parentId: 'neo-event-4'},
228
+ {action: 'moveNode', id: 'neo-event-4__title', index: 1, parentId: 'neo-event-4'},
229
+ { id: 'neo-event-4__title', innerHTML: 'Event 4'},
230
+ { id: 'neo-column-2', cls: {add: ['foo4']}},
231
+ {action: 'removeNode', id: 'neo-event-5'},
232
+ {action: 'removeNode', id: 'neo-event-6'},
233
+ {action: 'removeNode', id: 'neo-event-7'}
234
+ ], 'Deltas got created successfully');
235
+ });
236
+
237
+ t.it('Wrapping nodes multiple times', t => {
238
+ vdom =
239
+ {id: 'neo-container-1', cn: [
240
+ {id: 'neo-component-1'},
241
+ {id: 'neo-component-2'},
242
+ {id: 'neo-component-3'},
243
+ {id: 'neo-component-4'},
244
+ {id: 'neo-component-5'},
245
+ {id: 'neo-component-6'}
246
+ ]};
247
+
248
+ vnode = VdomHelper.create(vdom);
249
+
250
+ vdom =
251
+ {id: 'neo-container-1', cn: [
252
+ {id: 'neo-wrapper-1', cn: [ // single wrapper
253
+ {id: 'neo-component-1', cls: ['foo1']}
254
+ ]},
255
+ {id: 'neo-wrapper-2', cn: [ // double wrapper
256
+ {id: 'neo-wrapper-3', cn: [
257
+ {id: 'neo-component-2', cls: ['foo2']}
258
+ ]}
259
+ ]},
260
+ {id: 'neo-wrapper-4', cn: [ // wrapping multiple nodes
261
+ {id: 'neo-component-3', cls: ['foo3']},
262
+ {id: 'neo-component-4', cls: ['foo4']}
263
+ ]},
264
+ {id: 'neo-wrapper-5', cn: [ // nested wrapping
265
+ {id: 'neo-component-5', cls: ['foo5']},
266
+ {id: 'neo-wrapper-6', cn: [
267
+ {id: 'neo-component-6', cls: ['foo6']}
268
+ ]}
269
+ ]}
270
+ ]};
271
+
272
+ output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
273
+
274
+ t.is(deltas.length, 16, 'Count deltas equals 16');
275
+
276
+ t.isDeeplyStrict(deltas, [
277
+ {action: 'insertNode', index: 0, parentId: 'neo-container-1', outerHTML: '<div id="neo-wrapper-1"></div>'},
278
+ {action: 'moveNode', id: 'neo-component-1', index: 0, parentId: 'neo-wrapper-1'},
279
+ { id: 'neo-component-1', cls: {add: ['foo1']}},
280
+ {action: 'insertNode', index: 1, parentId: 'neo-container-1', outerHTML: '<div id="neo-wrapper-2"><div id="neo-wrapper-3"></div></div>'},
281
+ {action: 'moveNode', id: 'neo-component-2', index: 0, parentId: 'neo-wrapper-3'},
282
+ { id: 'neo-component-2', cls: {add: ['foo2']}},
283
+ {action: 'insertNode', index: 2, parentId: 'neo-container-1', outerHTML: '<div id="neo-wrapper-4"></div>'},
284
+ {action: 'moveNode', id: 'neo-component-3', index: 0, parentId: 'neo-wrapper-4'},
285
+ { id: 'neo-component-3', cls: {add: ['foo3']}},
286
+ {action: 'moveNode', id: 'neo-component-4', index: 1, parentId: 'neo-wrapper-4'},
287
+ { id: 'neo-component-4', cls: {add: ['foo4']}},
288
+ {action: 'insertNode', index: 3, parentId: 'neo-container-1', outerHTML: '<div id="neo-wrapper-5"><div id="neo-wrapper-6"></div></div>'},
289
+ {action: 'moveNode', id: 'neo-component-5', index: 0, parentId: 'neo-wrapper-5'},
290
+ { id: 'neo-component-5', cls: {add: ['foo5']}},
291
+ {action: 'moveNode', id: 'neo-component-6', index: 0, parentId: 'neo-wrapper-6'},
292
+ { id: 'neo-component-6', cls: {add: ['foo6']}}
293
+ ], 'Deltas got created successfully');
294
+
295
+ t.diag('Revert operation');
296
+
297
+ vdom =
298
+ {id: 'neo-container-1', cn: [
299
+ {id: 'neo-component-1'},
300
+ {id: 'neo-component-2'},
301
+ {id: 'neo-component-3'},
302
+ {id: 'neo-component-4'},
303
+ {id: 'neo-component-5'},
304
+ {id: 'neo-component-6'}
305
+ ]};
306
+
307
+ output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
308
+
309
+ t.is(deltas.length, 16, 'Count deltas equals 16');
310
+
311
+ t.isDeeplyStrict(deltas, [
312
+ {action: 'moveNode', id: 'neo-component-1', index: 0, parentId: 'neo-container-1'},
313
+ { id: 'neo-component-1', cls: {remove: ['foo1']}},
314
+ {action: 'moveNode', id: 'neo-component-2', index: 1, parentId: 'neo-container-1'},
315
+ { id: 'neo-component-2', cls: {remove: ['foo2']}},
316
+ {action: 'moveNode', id: 'neo-component-3', index: 2, parentId: 'neo-container-1'},
317
+ { id: 'neo-component-3', cls: {remove: ['foo3']}},
318
+ {action: 'moveNode', id: 'neo-component-4', index: 3, parentId: 'neo-container-1'},
319
+ { id: 'neo-component-4', cls: {remove: ['foo4']}},
320
+ {action: 'moveNode', id: 'neo-component-5', index: 4, parentId: 'neo-container-1'},
321
+ { id: 'neo-component-5', cls: {remove: ['foo5']}},
322
+ {action: 'moveNode', id: 'neo-component-6', index: 5, parentId: 'neo-container-1'},
323
+ { id: 'neo-component-6', cls: {remove: ['foo6']}},
324
+ {action: 'removeNode', id: 'neo-wrapper-1'},
325
+ {action: 'removeNode', id: 'neo-wrapper-2'},
326
+ {action: 'removeNode', id: 'neo-wrapper-4'},
327
+ {action: 'removeNode', id: 'neo-wrapper-5'}
328
+ ], 'Deltas got created successfully');
329
+ });
330
+
331
+ t.it('Ignoring static nodes', t => {
332
+ vdom =
333
+ {id: 'neo-container-1', cn: [
334
+ {id: 'neo-component-1', static: true},
335
+ {id: 'neo-component-2', cn: [
336
+ {id: 'neo-component-3', static: true}
337
+ ]},
338
+ {id: 'neo-component-4', static: true, cn: [
339
+ {id: 'neo-component-5'},
340
+ {id: 'neo-component-6'}
341
+ ]}
342
+ ]};
343
+
344
+ vnode = VdomHelper.create(vdom);
345
+
346
+ t.is(vnode.outerHTML.includes('static'), false, 'The generated DOM does not include "static"');
347
+ t.isDeeplyStrict(vnode.static, undefined, 'Top-level VNode did not get the static attribute');
348
+ t.isDeeplyStrict(vnode.childNodes[0].static, true, 'First VNode childNode got the static attribute');
349
+
350
+ vdom =
351
+ {id: 'neo-container-1', cn: [
352
+ {id: 'neo-component-1', cls: ['foo1'], static: true},
353
+ {id: 'neo-component-2', cn: [
354
+ {id: 'neo-component-3', cls: ['foo3'], static: true}
355
+ ]},
356
+ {id: 'neo-component-4', static: true, cn: [
357
+ {id: 'neo-component-6'}, // switched the order of child items
358
+ {id: 'neo-component-5', cls: ['foo5']}
359
+ ]}
360
+ ]};
361
+
362
+ output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
363
+
364
+ // All our changes must get ignored
365
+ t.is(deltas.length, 0, 'Count deltas equals 0 => all static node changes got ignored');
366
+ });
367
+ });
package/test/siesta/tests/vdom/layout/Cube.mjs ADDED
@@ -0,0 +1,189 @@
1
+ import Neo from '../../../../../src/Neo.mjs';
2
+ import * as core from '../../../../../src/core/_export.mjs';
3
+ import VdomHelper from '../../../../../src/vdom/Helper.mjs';
4
+
5
+ let oldVdom, oldVnode, vdom;
6
+
7
+ StartTest(t => {
8
+ t.it('Wrap Container Items', t => {
9
+ oldVdom =
10
+ {id: 'neo-container-1', cn: [
11
+ {id: 'neo-component-1'},
12
+ {id: 'neo-component-2'},
13
+ {id: 'neo-component-3'},
14
+ {id: 'neo-component-4'},
15
+ {id: 'neo-component-5'},
16
+ {id: 'neo-component-6'}
17
+ ]};
18
+
19
+ let oldVnode = VdomHelper.create(oldVdom);
20
+
21
+ vdom =
22
+ {id: 'neo-container-1', cn: [
23
+ {id: 'neo-vnode-1', cn: [
24
+ {id: 'neo-vnode-2', cn: [
25
+ {id: 'neo-component-1'},
26
+ {id: 'neo-component-2'},
27
+ {id: 'neo-component-3'},
28
+ {id: 'neo-component-4'},
29
+ {id: 'neo-component-5'},
30
+ {id: 'neo-component-6'}
31
+ ]}
32
+ ]}
33
+ ]};
34
+
35
+ let {deltas, vnode} = VdomHelper.update({vdom, vnode: oldVnode});
36
+
37
+ t.is(deltas.length, 7, 'Count deltas equals 7');
38
+
39
+ t.isDeeplyStrict(deltas, [
40
+ {
41
+ action : 'insertNode',
42
+ index : 0,
43
+ outerHTML: '<div id="neo-vnode-1"><div id="neo-vnode-2"></div></div>',
44
+ parentId : 'neo-container-1'
45
+ },
46
+ {action: 'moveNode', id: 'neo-component-1', index: 0, parentId: 'neo-vnode-2'},
47
+ {action: 'moveNode', id: 'neo-component-2', index: 1, parentId: 'neo-vnode-2'},
48
+ {action: 'moveNode', id: 'neo-component-3', index: 2, parentId: 'neo-vnode-2'},
49
+ {action: 'moveNode', id: 'neo-component-4', index: 3, parentId: 'neo-vnode-2'},
50
+ {action: 'moveNode', id: 'neo-component-5', index: 4, parentId: 'neo-vnode-2'},
51
+ {action: 'moveNode', id: 'neo-component-6', index: 5, parentId: 'neo-vnode-2'}
52
+ ], 'Deltas got created successfully');
53
+ });
54
+
55
+ t.it('Unwrap Container Items', t => {
56
+ oldVdom =
57
+ {id: 'neo-container-1', cn: [
58
+ {id: 'neo-vnode-1', cn: [
59
+ {id: 'neo-vnode-2', cn: [
60
+ {id: 'neo-component-1'},
61
+ {id: 'neo-component-2'},
62
+ {id: 'neo-component-3'},
63
+ {id: 'neo-component-4'},
64
+ {id: 'neo-component-5'},
65
+ {id: 'neo-component-6'}
66
+ ]}
67
+ ]}
68
+ ]};
69
+
70
+ oldVnode = VdomHelper.create(oldVdom);
71
+
72
+ vdom =
73
+ {id: 'neo-container-1', cn: [
74
+ {id: 'neo-component-1'},
75
+ {id: 'neo-component-2'},
76
+ {id: 'neo-component-3'},
77
+ {id: 'neo-component-4'},
78
+ {id: 'neo-component-5'},
79
+ {id: 'neo-component-6'}
80
+ ]};
81
+
82
+ let {deltas, vnode} = VdomHelper.update({vdom, vnode: oldVnode});
83
+
84
+ t.is(deltas.length, 7, 'Count deltas equals 7');
85
+
86
+ t.isDeeplyStrict(deltas, [
87
+ {action: 'moveNode', id: 'neo-component-1', index: 0, parentId: 'neo-container-1'},
88
+ {action: 'moveNode', id: 'neo-component-2', index: 1, parentId: 'neo-container-1'},
89
+ {action: 'moveNode', id: 'neo-component-3', index: 2, parentId: 'neo-container-1'},
90
+ {action: 'moveNode', id: 'neo-component-4', index: 3, parentId: 'neo-container-1'},
91
+ {action: 'moveNode', id: 'neo-component-5', index: 4, parentId: 'neo-container-1'},
92
+ {action: 'moveNode', id: 'neo-component-6', index: 5, parentId: 'neo-container-1'},
93
+ {action: 'removeNode', id: 'neo-vnode-1'}
94
+ ], 'Deltas got created successfully');
95
+ });
96
+
97
+ t.it('Wrap Container Items & Change Item Attributes', t => {
98
+ oldVdom =
99
+ {id: 'neo-container-1', cn: [
100
+ {id: 'neo-component-1'},
101
+ {id: 'neo-component-2'},
102
+ {id: 'neo-component-3'},
103
+ {id: 'neo-component-4'},
104
+ {id: 'neo-component-5'},
105
+ {id: 'neo-component-6'}
106
+ ]};
107
+
108
+ oldVnode = VdomHelper.create(oldVdom);
109
+
110
+ vdom =
111
+ {id: 'neo-container-1', cn: [
112
+ {id: 'neo-vnode-1', cn: [
113
+ {id: 'neo-vnode-2', cn: [
114
+ {id: 'neo-component-1'},
115
+ {id: 'neo-component-2', style: {backgroundColor: 'red'}},
116
+ {id: 'neo-component-3'},
117
+ {id: 'neo-component-4', cls: ['custom-cls']},
118
+ {id: 'neo-component-5'},
119
+ {id: 'neo-component-6'}
120
+ ]}
121
+ ]}
122
+ ]};
123
+
124
+ let {deltas, vnode} = VdomHelper.update({vdom, vnode: oldVnode});
125
+
126
+ t.is(deltas.length, 9, 'Count deltas equals 9');
127
+
128
+ t.isDeeplyStrict(deltas, [
129
+ {
130
+ action : 'insertNode',
131
+ index : 0,
132
+ outerHTML: '<div id="neo-vnode-1"><div id="neo-vnode-2"></div></div>',
133
+ parentId : 'neo-container-1'
134
+ },
135
+ {action: 'moveNode', id: 'neo-component-1', index: 0, parentId: 'neo-vnode-2'},
136
+ {action: 'moveNode', id: 'neo-component-2', index: 1, parentId: 'neo-vnode-2'},
137
+ { id: 'neo-component-2', style: {backgroundColor: 'red'}},
138
+ {action: 'moveNode', id: 'neo-component-3', index: 2, parentId: 'neo-vnode-2'},
139
+ {action: 'moveNode', id: 'neo-component-4', index: 3, parentId: 'neo-vnode-2'},
140
+ { id: 'neo-component-4', cls: {add: ['custom-cls']}},
141
+ {action: 'moveNode', id: 'neo-component-5', index: 4, parentId: 'neo-vnode-2'},
142
+ {action: 'moveNode', id: 'neo-component-6', index: 5, parentId: 'neo-vnode-2'}
143
+ ], 'Deltas got created successfully');
144
+ });
145
+
146
+ t.it('Unwrap Container Items & Change Item Attributes', t => {
147
+ oldVdom =
148
+ {id: 'neo-container-1', cn: [
149
+ {id: 'neo-vnode-1', cn: [
150
+ {id: 'neo-vnode-2', cn: [
151
+ {id: 'neo-component-1'},
152
+ {id: 'neo-component-2', style: {backgroundColor: 'red'}},
153
+ {id: 'neo-component-3'},
154
+ {id: 'neo-component-4', cls: ['custom-cls']},
155
+ {id: 'neo-component-5'},
156
+ {id: 'neo-component-6'}
157
+ ]}
158
+ ]}
159
+ ]};
160
+
161
+ oldVnode = VdomHelper.create(oldVdom);
162
+
163
+ vdom =
164
+ {id: 'neo-container-1', cn: [
165
+ {id: 'neo-component-1'},
166
+ {id: 'neo-component-2'},
167
+ {id: 'neo-component-3'},
168
+ {id: 'neo-component-4'},
169
+ {id: 'neo-component-5'},
170
+ {id: 'neo-component-6'}
171
+ ]};
172
+
173
+ let {deltas, vnode} = VdomHelper.update({vdom, vnode: oldVnode});
174
+
175
+ t.is(deltas.length, 9, 'Count deltas equals 9');
176
+
177
+ t.isDeeplyStrict(deltas, [
178
+ {action: 'moveNode', id: 'neo-component-1', index: 0, parentId: 'neo-container-1'},
179
+ {action: 'moveNode', id: 'neo-component-2', index: 1, parentId: 'neo-container-1'},
180
+ {id: 'neo-component-2', style: {backgroundColor: null}},
181
+ {action: 'moveNode', id: 'neo-component-3', index: 2, parentId: 'neo-container-1'},
182
+ {action: 'moveNode', id: 'neo-component-4', index: 3, parentId: 'neo-container-1'},
183
+ {id: 'neo-component-4', cls: {remove: ['custom-cls']}},
184
+ {action: 'moveNode', id: 'neo-component-5', index: 4, parentId: 'neo-container-1'},
185
+ {action: 'moveNode', id: 'neo-component-6', index: 5, parentId: 'neo-container-1'},
186
+ {action: 'removeNode', id: 'neo-vnode-1'}
187
+ ], 'Deltas got created successfully');
188
+ });
189
+ });