marko 5.24.0 → 5.25.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. package/dist/runtime/components/entry/index-browser.js +2 -6
  2. package/dist/runtime/components/registry/index-browser.js +444 -20
  3. package/dist/runtime/components/registry/index.js +1 -1
  4. package/dist/runtime/components/renderer.js +4 -4
  5. package/dist/runtime/components/update-manager.js +7 -7
  6. package/dist/runtime/components/util/index-browser.js +4 -4
  7. package/dist/runtime/components/util/index.js +2 -2
  8. package/dist/runtime/createOut.js +1 -1
  9. package/dist/runtime/dom-insert.js +4 -4
  10. package/dist/runtime/helpers/_change-case.js +2 -2
  11. package/dist/runtime/helpers/dynamic-tag.js +4 -4
  12. package/dist/runtime/helpers/repeatable.js +12 -0
  13. package/dist/runtime/helpers/self-iterator.js +3 -0
  14. package/dist/runtime/helpers/style-value.js +1 -1
  15. package/dist/runtime/html/AsyncStream.js +14 -14
  16. package/dist/runtime/html/BufferedWriter.js +2 -2
  17. package/dist/runtime/html/create-readable/index-browser.js +1 -1
  18. package/dist/runtime/html/create-readable/index.js +9 -9
  19. package/dist/runtime/html/helpers/_dynamic-attr.js +2 -2
  20. package/dist/runtime/html/helpers/attr.js +3 -3
  21. package/dist/runtime/html/helpers/data-marko.js +1 -1
  22. package/dist/runtime/html/helpers/escape-quotes.js +1 -1
  23. package/dist/runtime/html/helpers/escape-xml.js +1 -1
  24. package/dist/runtime/html/index.js +2 -2
  25. package/dist/runtime/renderable.js +5 -5
  26. package/dist/runtime/setImmediate/index-browser.js +1 -1
  27. package/dist/runtime/setImmediate/index-worker.js +2 -2
  28. package/dist/runtime/setImmediate/index.js +2 -2
  29. package/dist/runtime/vdom/AsyncVDOMBuilder.js +74 -74
  30. package/dist/runtime/vdom/VComponent.js +3 -3
  31. package/dist/runtime/vdom/VDocumentFragment.js +7 -7
  32. package/dist/runtime/vdom/VElement.js +44 -44
  33. package/dist/runtime/vdom/VFragment.js +5 -5
  34. package/dist/runtime/vdom/VNode.js +32 -32
  35. package/dist/runtime/vdom/VText.js +8 -8
  36. package/dist/runtime/vdom/helpers/v-element.js +1 -1
  37. package/dist/runtime/vdom/helpers/v-text.js +1 -1
  38. package/dist/runtime/vdom/hot-reload.js +4 -4
  39. package/dist/runtime/vdom/index.js +2 -2
  40. package/dist/runtime/vdom/morphdom/fragment.js +4 -4
  41. package/dist/runtime/vdom/morphdom/helpers.js +4 -4
  42. package/dist/runtime/vdom/morphdom/index.js +36 -36
  43. package/dist/runtime/vdom/morphdom/specialElHandlers.js +6 -6
  44. package/dist/runtime/vdom/preserve-attrs.js +1 -1
  45. package/dist/runtime/vdom/vdom.js +14 -14
  46. package/docs/body-content.md +37 -18
  47. package/docs/typescript.md +12 -12
  48. package/index.d.ts +4 -2
  49. package/package.json +3 -3
  50. package/src/runtime/components/entry/index-browser.js +2 -6
  51. package/src/runtime/components/registry/index-browser.js +451 -27
  52. package/src/runtime/helpers/repeatable.js +12 -0
  53. package/src/runtime/helpers/self-iterator.js +3 -0
  54. package/dist/runtime/components/init-components/index-browser.js +0 -453
  55. package/dist/runtime/components/init-components/index.js +0 -2
  56. package/dist/runtime/components/init-components/package.json +0 -11
  57. package/src/runtime/components/init-components/index-browser.js +0 -453
  58. package/src/runtime/components/init-components/index.js +0 -1
  59. package/src/runtime/components/init-components/package.json +0 -11
@@ -1,453 +0,0 @@
1
- "use strict";
2
- var complain = "MARKO_DEBUG" && require("complain");
3
- var warp10Finalize = require("warp10/finalize");
4
- var eventDelegation = require("../event-delegation");
5
- var win = window;
6
- var createFragmentNode =
7
- require("../../vdom/morphdom/fragment").___createFragmentNode;
8
- var componentsUtil = require("../util");
9
- var componentLookup = componentsUtil.___componentLookup;
10
- var addComponentRootToKeyedElements =
11
- componentsUtil.___addComponentRootToKeyedElements;
12
- var ComponentDef = require("../ComponentDef");
13
- var registry = require("../registry");
14
- var domData = require("../dom-data");
15
- var keyedElementsByComponentId = domData.___ssrKeyedElementsByComponentId;
16
- var componentsByDOMNode = domData.___componentByDOMNode;
17
- var serverComponentRootNodes = {};
18
- var serverRenderedMeta = {};
19
-
20
- var DEFAULT_RUNTIME_ID = "M";
21
- var FLAG_WILL_RERENDER_IN_BROWSER = 1;
22
- // var FLAG_HAS_RENDER_BODY = 2;
23
-
24
- var deferredDefs;
25
-
26
- function indexServerComponentBoundaries(node, runtimeId, stack) {
27
- var componentId;
28
- var ownerId;
29
- var ownerComponent;
30
- var keyedElements;
31
- var nextSibling;
32
- var runtimeLength = runtimeId.length;
33
- stack = stack || [];
34
-
35
- node = node.firstChild;
36
- while (node) {
37
- nextSibling = node.nextSibling;
38
- if (node.nodeType === 8) {
39
- // Comment node
40
- var commentValue = node.nodeValue;
41
- if (commentValue.slice(0, runtimeLength) === runtimeId) {
42
- var firstChar = commentValue[runtimeLength];
43
-
44
- if (firstChar === "^" || firstChar === "#") {
45
- stack.push(node);
46
- } else if (firstChar === "/") {
47
- var endNode = node;
48
- var startNode = stack.pop();
49
- var rootNode;
50
-
51
- if (startNode.parentNode === endNode.parentNode) {
52
- rootNode = createFragmentNode(startNode.nextSibling, endNode);
53
- } else {
54
- rootNode = createFragmentNode(
55
- endNode.parentNode.firstChild,
56
- endNode
57
- );
58
- }
59
-
60
- componentId = startNode.nodeValue.substring(runtimeLength + 1);
61
- firstChar = startNode.nodeValue[runtimeLength];
62
-
63
- if (firstChar === "^") {
64
- var parts = componentId.split(/ /g);
65
- var key = parts[2];
66
- ownerId = parts[1];
67
- componentId = parts[0];
68
- if ((ownerComponent = componentLookup[ownerId])) {
69
- keyedElements = ownerComponent.___keyedElements;
70
- } else {
71
- keyedElements =
72
- keyedElementsByComponentId[ownerId] ||
73
- (keyedElementsByComponentId[ownerId] = {});
74
- }
75
- addComponentRootToKeyedElements(
76
- keyedElements,
77
- key,
78
- rootNode,
79
- componentId
80
- );
81
- }
82
-
83
- serverComponentRootNodes[componentId] = rootNode;
84
-
85
- startNode.parentNode.removeChild(startNode);
86
- endNode.parentNode.removeChild(endNode);
87
- }
88
- }
89
- } else if (node.nodeType === 1) {
90
- // HTML element node
91
- var markoKey = node.getAttribute("data-marko-key");
92
- var markoProps = componentsUtil.___getMarkoPropsFromEl(node);
93
- if (markoKey) {
94
- var separatorIndex = markoKey.indexOf(" ");
95
- ownerId = markoKey.substring(separatorIndex + 1);
96
- markoKey = markoKey.substring(0, separatorIndex);
97
- if ((ownerComponent = componentLookup[ownerId])) {
98
- keyedElements = ownerComponent.___keyedElements;
99
- } else {
100
- keyedElements =
101
- keyedElementsByComponentId[ownerId] ||
102
- (keyedElementsByComponentId[ownerId] = {});
103
- }
104
- keyedElements[markoKey] = node;
105
- }
106
- if (markoProps) {
107
- Object.keys(markoProps).forEach(function (key) {
108
- if (key.slice(0, 2) === "on") {
109
- eventDelegation.___addDelegatedEventHandler(key.slice(2));
110
- }
111
- });
112
- }
113
- indexServerComponentBoundaries(node, runtimeId, stack);
114
- }
115
-
116
- node = nextSibling;
117
- }
118
- }
119
-
120
- function invokeComponentEventHandler(component, targetMethodName, args) {
121
- var method = component[targetMethodName];
122
- if (!method) {
123
- throw Error("Method not found: " + targetMethodName);
124
- }
125
-
126
- method.apply(component, args);
127
- }
128
-
129
- function addEventListenerHelper(el, eventType, isOnce, listener) {
130
- var eventListener = listener;
131
- if (isOnce) {
132
- eventListener = function (event) {
133
- listener(event);
134
- el.removeEventListener(eventType, eventListener);
135
- };
136
- }
137
-
138
- el.addEventListener(eventType, eventListener, false);
139
-
140
- return function remove() {
141
- el.removeEventListener(eventType, eventListener);
142
- };
143
- }
144
-
145
- function addDOMEventListeners(
146
- component,
147
- el,
148
- eventType,
149
- targetMethodName,
150
- isOnce,
151
- extraArgs,
152
- handles
153
- ) {
154
- var removeListener = addEventListenerHelper(
155
- el,
156
- eventType,
157
- isOnce,
158
- function (event) {
159
- var args = [event, el];
160
- if (extraArgs) {
161
- args = extraArgs.concat(args);
162
- }
163
-
164
- invokeComponentEventHandler(component, targetMethodName, args);
165
- }
166
- );
167
- handles.push(removeListener);
168
- }
169
-
170
- function initComponent(componentDef, host) {
171
- var component = componentDef.___component;
172
-
173
- component.___reset();
174
- component.___host = host;
175
-
176
- var isExisting = componentDef.___isExisting;
177
-
178
- if (isExisting) {
179
- component.___removeDOMEventListeners();
180
- }
181
-
182
- var domEvents = componentDef.___domEvents;
183
- if (domEvents) {
184
- var eventListenerHandles = [];
185
-
186
- domEvents.forEach(function (domEventArgs) {
187
- // The event mapping is for a direct DOM event (not a custom event and not for bubblign dom events)
188
-
189
- var eventType = domEventArgs[0];
190
- var targetMethodName = domEventArgs[1];
191
- var eventEl = component.___keyedElements[domEventArgs[2]];
192
- var isOnce = domEventArgs[3];
193
- var extraArgs = domEventArgs[4];
194
-
195
- addDOMEventListeners(
196
- component,
197
- eventEl,
198
- eventType,
199
- targetMethodName,
200
- isOnce,
201
- extraArgs,
202
- eventListenerHandles
203
- );
204
- });
205
-
206
- if (eventListenerHandles.length) {
207
- component.___domEventListenerHandles = eventListenerHandles;
208
- }
209
- }
210
-
211
- if (component.___mounted) {
212
- component.___emitUpdate();
213
- } else {
214
- component.___mounted = true;
215
- component.___emitMount();
216
- }
217
- }
218
-
219
- /**
220
- * This method is used to initialized components associated with UI components
221
- * rendered in the browser. While rendering UI components a "components context"
222
- * is added to the rendering context to keep up with which components are rendered.
223
- * When ready, the components can then be initialized by walking the component tree
224
- * in the components context (nested components are initialized before ancestor components).
225
- * @param {Array<marko-components/lib/ComponentDef>} componentDefs An array of ComponentDef instances
226
- */
227
- function initClientRendered(componentDefs, host) {
228
- if (!host) host = document;
229
- // Ensure that event handlers to handle delegating events are
230
- // always attached before initializing any components
231
- eventDelegation.___init(host);
232
- var len = componentDefs.length;
233
- var componentDef;
234
- var i;
235
-
236
- for (i = len; i--; ) {
237
- componentDef = componentDefs[i];
238
- trackComponent(componentDef);
239
- }
240
-
241
- for (i = len; i--; ) {
242
- componentDef = componentDefs[i];
243
- initComponent(componentDef, host);
244
- }
245
- }
246
-
247
- /**
248
- * This method initializes all components that were rendered on the server by iterating over all
249
- * of the component IDs.
250
- */
251
- function initServerRendered(renderedComponents, host) {
252
- var type = typeof renderedComponents;
253
- var globalKey = "$";
254
- var runtimeId;
255
-
256
- if (type !== "object") {
257
- if (type === "string") {
258
- runtimeId = renderedComponents;
259
- globalKey += runtimeId + "_C";
260
- } else {
261
- globalKey += (runtimeId = DEFAULT_RUNTIME_ID) + "C";
262
- }
263
-
264
- renderedComponents = win[globalKey];
265
-
266
- // eslint-disable-next-line no-constant-condition
267
- if ("MARKO_DEBUG") {
268
- if (
269
- renderedComponents &&
270
- renderedComponents.i !== undefined &&
271
- renderedComponents.i !== componentsUtil.___runtimeId
272
- ) {
273
- console.warn(
274
- "Multiple instances of Marko have attached to the same runtime id. This could mean that more than one copy of Marko is loaded on the page, or that the script containing Marko has executed more than once."
275
- );
276
- }
277
- }
278
-
279
- var fakeArray = (win[globalKey] = {
280
- r: runtimeId,
281
- concat: initServerRendered
282
- });
283
-
284
- // eslint-disable-next-line no-constant-condition
285
- if ("MARKO_DEBUG") {
286
- fakeArray.i = componentsUtil.___runtimeId;
287
- }
288
-
289
- if (renderedComponents && renderedComponents.forEach) {
290
- renderedComponents.forEach(function (renderedComponent) {
291
- fakeArray.concat(renderedComponent);
292
- });
293
- }
294
-
295
- return fakeArray;
296
- }
297
-
298
- var isFromSerializedGlobals = this.concat === initServerRendered;
299
- renderedComponents = warp10Finalize(renderedComponents);
300
-
301
- if (isFromSerializedGlobals) {
302
- runtimeId = this.r;
303
- host = document;
304
- } else {
305
- runtimeId = renderedComponents.r || DEFAULT_RUNTIME_ID;
306
- if (!host) host = document;
307
-
308
- // eslint-disable-next-line no-constant-condition
309
- if ("MARKO_DEBUG") {
310
- complain(
311
- "Passing serialized data to `require('marko/components).init` is deprecated. Instead set '$global.runtimeId' and provide the 'runtimeId' option to your Marko bundler plugin."
312
- );
313
- }
314
- }
315
-
316
- // eslint-disable-next-line no-constant-condition
317
- if ("MARKO_DEBUG") {
318
- if (host !== document) {
319
- complain(
320
- "Passing a document other than the current document to `require('marko/components).init` is deprecated."
321
- );
322
- }
323
- }
324
-
325
- var prefix = renderedComponents.p || "";
326
- var meta = serverRenderedMeta[prefix];
327
- var isLast = renderedComponents.l;
328
-
329
- if (meta) {
330
- if (isLast) {
331
- delete serverRenderedMeta[prefix];
332
- }
333
- } else {
334
- meta = {};
335
-
336
- if (!isLast) {
337
- serverRenderedMeta[prefix] = meta;
338
- }
339
- }
340
-
341
- // Ensure that event handlers to handle delegating events are
342
- // always attached before initializing any components
343
- indexServerComponentBoundaries(host, runtimeId);
344
- eventDelegation.___init(host);
345
-
346
- if (renderedComponents.g) {
347
- meta.___globals = renderedComponents.g;
348
- }
349
-
350
- if (renderedComponents.t) {
351
- meta.___types = meta.___types
352
- ? meta.___types.concat(renderedComponents.t)
353
- : renderedComponents.t;
354
- }
355
-
356
- // hydrate components top down (leaf nodes last)
357
- // and return an array of functions to mount these components
358
- (renderedComponents.w || [])
359
- .map(function (componentDef) {
360
- var typeName = meta.___types[componentDef[1]];
361
-
362
- return registry.___isRegistered(typeName)
363
- ? tryHydrateComponent(componentDef, meta, host, runtimeId)
364
- : registry.___addPendingDef(
365
- componentDef,
366
- typeName,
367
- meta,
368
- host,
369
- runtimeId
370
- );
371
- })
372
- .reverse()
373
- .forEach(tryInvoke);
374
-
375
- return this;
376
- }
377
-
378
- function tryHydrateComponent(rawDef, meta, host, runtimeId) {
379
- var componentDef = ComponentDef.___deserialize(
380
- rawDef,
381
- meta.___types,
382
- meta.___globals,
383
- registry
384
- );
385
- var mount = hydrateComponentAndGetMount(componentDef, host);
386
-
387
- if (!mount) {
388
- // hydrateComponentAndGetMount will return false if there is not rootNode
389
- // for the component. If this is the case, we'll wait until the
390
- // DOM has fully loaded to attempt to init the component again.
391
- if (deferredDefs) {
392
- deferredDefs.push(componentDef);
393
- } else {
394
- deferredDefs = [componentDef];
395
- document.addEventListener("DOMContentLoaded", function () {
396
- indexServerComponentBoundaries(host, runtimeId);
397
- deferredDefs
398
- .map(function (componentDef) {
399
- return hydrateComponentAndGetMount(componentDef, host);
400
- })
401
- .reverse()
402
- .forEach(tryInvoke);
403
- deferredDefs = undefined;
404
- });
405
- }
406
- }
407
-
408
- return mount;
409
- }
410
-
411
- function hydrateComponentAndGetMount(componentDef, host) {
412
- var componentId = componentDef.id;
413
- var component = componentDef.___component;
414
- var rootNode = serverComponentRootNodes[componentId];
415
- var renderResult;
416
-
417
- if (rootNode) {
418
- delete serverComponentRootNodes[componentId];
419
-
420
- component.___rootNode = rootNode;
421
- componentsByDOMNode.set(rootNode, component);
422
-
423
- if (componentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER) {
424
- component.___host = host;
425
- renderResult = component.___rerender(component.___input, true);
426
- trackComponent(componentDef);
427
- return function mount() {
428
- renderResult.afterInsert(host);
429
- };
430
- } else {
431
- trackComponent(componentDef);
432
- }
433
-
434
- return function mount() {
435
- initComponent(componentDef, host);
436
- };
437
- }
438
- }
439
-
440
- function trackComponent(componentDef) {
441
- var component = componentDef.___component;
442
- if (component) {
443
- componentLookup[component.id] = component;
444
- }
445
- }
446
-
447
- function tryInvoke(fn) {
448
- if (fn) fn();
449
- }
450
-
451
- exports.___initClientRendered = initClientRendered;
452
- exports.___initServerRendered = initServerRendered;
453
- exports.___tryHydrateComponent = tryHydrateComponent;
@@ -1 +0,0 @@
1
- // The server-side implementation of this module is intentionally empty
@@ -1,11 +0,0 @@
1
- {
2
- "main": "./index.js",
3
- "browser": "./index-browser.js",
4
- "exports": {
5
- ".": {
6
- "worker": "./index.js",
7
- "browser": "./index-browser.js",
8
- "default": "./index.js"
9
- }
10
- }
11
- }