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
package/docs/typescript.md CHANGED
@@ -18,7 +18,7 @@ There are two (non-exclusive) ways to add TypeScript to a Marko project:
18
18
  📦 package.json
19
19
  <mark><img src="./icons/ts.svg" width=16> tsconfig.json</mark>
20
20
  </pre>
21
- - **If you’re [publishing packages of Marko tags](https://markojs.com/docs/custom-tags/#publishing-tags-to-npm)**, add the following to [your `marko.json`](https://markojs.com/docs/marko-json/):
21
+ - **If you’re [publishing packages of Marko tags](https://markojs.com/docs/custom-tags/#publishing-tags-to-npm)**, add the following to [your `marko.json`](./marko-json.md):
22
22
  ```json
23
23
  "script-lang": "ts"
24
24
  ```
@@ -28,7 +28,7 @@ There are two (non-exclusive) ways to add TypeScript to a Marko project:
28
28
 
29
29
  ## Typing a tag's `input`
30
30
 
31
- A `.marko` file will use any exported `Input` type for [that file’s `input` object](https://markojs.com/docs/class-components/#input).
31
+ A `.marko` file will use any exported `Input` type for [that file’s `input` object](./class-components.md#input).
32
32
 
33
33
  This can be `export type Input` or `export interface Input`.
34
34
 
@@ -66,7 +66,7 @@ export interface Input extends PriceInput {
66
66
 
67
67
  ### Generic `Input`s
68
68
 
69
- [Generic Types and Type Parameters](https://www.typescriptlang.org/docs/handbook/2/generics.html) on `Input` are recognized throughout the entire `.marko` template (excluding [static statements](https://markojs.com/docs/syntax/#static-javascript)).
69
+ [Generic Types and Type Parameters](https://www.typescriptlang.org/docs/handbook/2/generics.html) on `Input` are recognized throughout the entire `.marko` template (excluding [static statements](./syntax.md#static-javascript)).
70
70
 
71
71
  For example, if you set up a component like this:
72
72
 
@@ -114,11 +114,11 @@ Marko exposes [type definitions](https://github.com/marko-js/marko/blob/main/pac
114
114
  - **`Marko.TemplateInput<Input>`**
115
115
  - The object accepted by the render methods of a template. It includes the template's `Input` as well as `$global` values.
116
116
  - **`Marko.Body<Params, Return>`**
117
- - The type of the [body content](https://markojs.com/docs/body-content/) of a tag (`renderBody`)
117
+ - The type of the [body content](./body-content.md) of a tag (`renderBody`)
118
118
  - **`Marko.Component<Input, State>`**
119
- - The base class for a [class component](https://markojs.com/docs/class-components/)
119
+ - The base class for a [class component](./class-components.md)
120
120
  - **`Marko.Renderable`**
121
- - Values accepted by the [`<${dynamic}/>` tag](https://markojs.com/docs/syntax/#dynamic-tagname)
121
+ - Values accepted by the [`<${dynamic}/>` tag](./syntax.md#dynamic-tagname)
122
122
  - `string | Marko.Template | Marko.Body | { renderBody: Marko.Body}`
123
123
  - **`Marko.Out`**
124
124
  - The render context with methods like `write`, `beginAsync`, etc.
@@ -126,7 +126,7 @@ Marko exposes [type definitions](https://github.com/marko-js/marko/blob/main/pac
126
126
  - **`Marko.Global`**
127
127
  - The type of the object in `$global` and `out.global` that can be passed to a template's render methods as the `$global` property.
128
128
  - **`Marko.RenderResult`**
129
- - The [result](https://markojs.com/docs/rendering/#renderresult) of rendering a Marko template
129
+ - The [result](./rendering.md#renderresult) of rendering a Marko template
130
130
  - `ReturnType<template.renderSync>`
131
131
  - `Awaited<ReturnType<template.render>>`
132
132
  - **`Marko.Emitter`**
@@ -137,10 +137,10 @@ Marko exposes [type definitions](https://github.com/marko-js/marko/blob/main/pac
137
137
  - Helpers to extract the input and return types for the specified `keyof Marko.NativeTag`
138
138
  - **`Marko.BodyParameters<Body>`** and **`Marko.BodyReturnType<Body>`**
139
139
  - Helpers to extract the parameters and return types from the specified `Marko.Body`
140
- - **`Marko.Repeated<T>`** and **`Marko.Repeatable<T>`**
141
- - Used to represent types for attributes tags which can have one or many instances
142
- - `Marko.Repeated<T>`: `[T, T, ...T[]]` (array with at least two items)
143
- - `Marko.Repeatable<T>`: `T | Marko.Repeated<T>`
140
+ - **`Marko.AttrTag<T>`** and **`Marko.RepeatableAttrTag<T>`**
141
+ - Used to represent types for [attributes tags](./body-content.md#named-body-content)
142
+ - `Marko.AttrTag<T>`: A single attribute tag
143
+ - `Marko.RepeatableAttrTag<T>`: One or more attribute tags
144
144
 
145
145
  ### Typing `renderBody`
146
146
 
@@ -221,7 +221,7 @@ $ const { color, renderBody, ...restOfInput } = input;
221
221
 
222
222
  ## TypeScript Syntax in `.marko`
223
223
 
224
- Any [JavaScript expression in Marko](https://markojs.com/docs/syntax/#inline-javascript) can also be written as a TypeScript expression.
224
+ Any [JavaScript expression in Marko](./syntax.md#inline-javascript) can also be written as a TypeScript expression.
225
225
 
226
226
  ### Tag Type Parameters
227
227
 
package/index.d.ts CHANGED
@@ -311,8 +311,8 @@ declare namespace Marko {
311
311
  removeAllListeners(eventName?: PropertyKey): this;
312
312
  }
313
313
 
314
- export type Repeated<T> = [T, T, ...T[]];
315
- export type Repeatable<T> = T | Repeated<T>;
314
+ export type AttrTag<T> = T & Iterable<AttrTag<T>>;
315
+ export type RepeatableAttrTag<T> = Repeatable<AttrTag<T>>;
316
316
 
317
317
  export interface NativeTags {
318
318
  [name: string]: {
@@ -326,3 +326,5 @@ declare namespace Marko {
326
326
  export type NativeTagReturn<Name extends keyof NativeTags> =
327
327
  NativeTags[Name]["return"];
328
328
  }
329
+
330
+ type Repeatable<T> = T | [T, T, ...T[]];
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "marko",
3
- "version": "5.24.0",
3
+ "version": "5.25.0",
4
4
  "license": "MIT",
5
5
  "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
6
6
  "dependencies": {
7
- "@marko/compiler": "^5.26.0",
8
- "@marko/translator-default": "^5.24.0",
7
+ "@marko/compiler": "^5.27.0",
8
+ "@marko/translator-default": "^5.25.0",
9
9
  "app-module-path": "^2.2.0",
10
10
  "argly": "^1.2.0",
11
11
  "browser-refresh-client": "1.1.4",
package/src/runtime/components/entry/index-browser.js CHANGED
@@ -1,11 +1,7 @@
1
- var initComponents = require("../init-components");
2
- require("../ComponentsContext").___initClientRendered =
3
- initComponents.___initClientRendered;
1
+ var registry = require("../registry");
4
2
 
5
3
  exports.getComponentForEl = require("../util").___getComponentForEl;
6
- exports.init = window.$initComponents = initComponents.___initServerRendered;
7
-
8
- var registry = require("../registry");
4
+ exports.init = registry.___initServerRendered;
9
5
  exports.register = function (id, component) {
10
6
  registry.r(id, function () {
11
7
  return component;
package/src/runtime/components/registry/index-browser.js CHANGED
@@ -1,12 +1,30 @@
1
1
  var complain = "MARKO_DEBUG" && require("complain");
2
+ var warp10Finalize = require("warp10/finalize");
2
3
  var queueMicrotask = require("../../queueMicrotask");
3
4
  var defineComponent = require("../defineComponent");
4
- var initComponents = require("../init-components");
5
- require("../entry");
5
+ var eventDelegation = require("../event-delegation");
6
+ var createFragmentNode =
7
+ require("../../vdom/morphdom/fragment").___createFragmentNode;
8
+ var ComponentDef = require("../ComponentDef");
9
+ var domData = require("../dom-data");
10
+ var componentsUtil = require("../util");
11
+ var componentLookup = componentsUtil.___componentLookup;
12
+ var addComponentRootToKeyedElements =
13
+ componentsUtil.___addComponentRootToKeyedElements;
14
+ var keyedElementsByComponentId = domData.___ssrKeyedElementsByComponentId;
15
+ var componentsByDOMNode = domData.___componentByDOMNode;
16
+ var serverComponentRootNodes = {};
17
+ var serverRenderedMeta = {};
18
+ var win = window;
19
+
20
+ var DEFAULT_RUNTIME_ID = "M";
21
+ var FLAG_WILL_RERENDER_IN_BROWSER = 1;
22
+ // var FLAG_HAS_RENDER_BODY = 2;
6
23
 
7
24
  var registered = {};
8
25
  var loaded = {};
9
26
  var componentTypes = {};
27
+ var deferredDefs;
10
28
  var pendingDefs;
11
29
 
12
30
  function register(type, def) {
@@ -22,12 +40,7 @@ function register(type, def) {
22
40
  delete pendingDefs[type];
23
41
  queueMicrotask(function () {
24
42
  pendingForType.forEach(function (args) {
25
- initComponents.___tryHydrateComponent(
26
- args[0],
27
- args[1],
28
- args[2],
29
- args[3]
30
- )();
43
+ tryHydrateComponent(args[0], args[1], args[2], args[3])();
31
44
  });
32
45
  });
33
46
  }
@@ -59,10 +72,6 @@ function addPendingDef(def, type, meta, host, runtimeId) {
59
72
  ]);
60
73
  }
61
74
 
62
- function isRegistered(type) {
63
- return Boolean(registered[type]);
64
- }
65
-
66
75
  function load(typeName) {
67
76
  var target = loaded[typeName];
68
77
  if (!target) {
@@ -115,18 +124,13 @@ function getComponentClass(typeName) {
115
124
  .replace(/^[^a-z$_]/i, "_$&")
116
125
  .replace(/[^0-9a-z$_]+/gi, "_");
117
126
  className = className[0].toUpperCase() + className.slice(1);
118
- // eslint-disable-next-line no-unused-vars
119
- try {
120
- var OldComponentClass = ComponentClass;
121
- eval(
122
- "ComponentClass = function " +
123
- className +
124
- "(id, doc) { OldComponentClass.call(this, id, doc); }"
125
- );
126
- ComponentClass.prototype = OldComponentClass.prototype;
127
- } catch (e) {
128
- /** ignore error */
129
- }
127
+ var OldComponentClass = ComponentClass;
128
+ ComponentClass = {
129
+ [className]: function (id, doc) {
130
+ OldComponentClass.call(this, id, doc);
131
+ }
132
+ }[className];
133
+ ComponentClass.prototype = OldComponentClass.prototype;
130
134
  }
131
135
 
132
136
  componentTypes[typeName] = ComponentClass;
@@ -139,8 +143,428 @@ function createComponent(typeName, id) {
139
143
  return new ComponentClass(id);
140
144
  }
141
145
 
146
+ function indexServerComponentBoundaries(node, runtimeId, stack) {
147
+ var componentId;
148
+ var ownerId;
149
+ var ownerComponent;
150
+ var keyedElements;
151
+ var nextSibling;
152
+ var runtimeLength = runtimeId.length;
153
+ stack = stack || [];
154
+
155
+ node = node.firstChild;
156
+ while (node) {
157
+ nextSibling = node.nextSibling;
158
+ if (node.nodeType === 8) {
159
+ // Comment node
160
+ var commentValue = node.nodeValue;
161
+ if (commentValue.slice(0, runtimeLength) === runtimeId) {
162
+ var firstChar = commentValue[runtimeLength];
163
+
164
+ if (firstChar === "^" || firstChar === "#") {
165
+ stack.push(node);
166
+ } else if (firstChar === "/") {
167
+ var endNode = node;
168
+ var startNode = stack.pop();
169
+ var rootNode;
170
+
171
+ if (startNode.parentNode === endNode.parentNode) {
172
+ rootNode = createFragmentNode(startNode.nextSibling, endNode);
173
+ } else {
174
+ rootNode = createFragmentNode(
175
+ endNode.parentNode.firstChild,
176
+ endNode
177
+ );
178
+ }
179
+
180
+ componentId = startNode.nodeValue.substring(runtimeLength + 1);
181
+ firstChar = startNode.nodeValue[runtimeLength];
182
+
183
+ if (firstChar === "^") {
184
+ var parts = componentId.split(/ /g);
185
+ var key = parts[2];
186
+ ownerId = parts[1];
187
+ componentId = parts[0];
188
+ if ((ownerComponent = componentLookup[ownerId])) {
189
+ keyedElements = ownerComponent.___keyedElements;
190
+ } else {
191
+ keyedElements =
192
+ keyedElementsByComponentId[ownerId] ||
193
+ (keyedElementsByComponentId[ownerId] = {});
194
+ }
195
+ addComponentRootToKeyedElements(
196
+ keyedElements,
197
+ key,
198
+ rootNode,
199
+ componentId
200
+ );
201
+ }
202
+
203
+ serverComponentRootNodes[componentId] = rootNode;
204
+
205
+ startNode.parentNode.removeChild(startNode);
206
+ endNode.parentNode.removeChild(endNode);
207
+ }
208
+ }
209
+ } else if (node.nodeType === 1) {
210
+ // HTML element node
211
+ var markoKey = node.getAttribute("data-marko-key");
212
+ var markoProps = componentsUtil.___getMarkoPropsFromEl(node);
213
+ if (markoKey) {
214
+ var separatorIndex = markoKey.indexOf(" ");
215
+ ownerId = markoKey.substring(separatorIndex + 1);
216
+ markoKey = markoKey.substring(0, separatorIndex);
217
+ if ((ownerComponent = componentLookup[ownerId])) {
218
+ keyedElements = ownerComponent.___keyedElements;
219
+ } else {
220
+ keyedElements =
221
+ keyedElementsByComponentId[ownerId] ||
222
+ (keyedElementsByComponentId[ownerId] = {});
223
+ }
224
+ keyedElements[markoKey] = node;
225
+ }
226
+ if (markoProps) {
227
+ Object.keys(markoProps).forEach(function (key) {
228
+ if (key.slice(0, 2) === "on") {
229
+ eventDelegation.___addDelegatedEventHandler(key.slice(2));
230
+ }
231
+ });
232
+ }
233
+ indexServerComponentBoundaries(node, runtimeId, stack);
234
+ }
235
+
236
+ node = nextSibling;
237
+ }
238
+ }
239
+
240
+ function invokeComponentEventHandler(component, targetMethodName, args) {
241
+ var method = component[targetMethodName];
242
+ if (!method) {
243
+ throw Error("Method not found: " + targetMethodName);
244
+ }
245
+
246
+ method.apply(component, args);
247
+ }
248
+
249
+ function addEventListenerHelper(el, eventType, isOnce, listener) {
250
+ var eventListener = listener;
251
+ if (isOnce) {
252
+ eventListener = function (event) {
253
+ listener(event);
254
+ el.removeEventListener(eventType, eventListener);
255
+ };
256
+ }
257
+
258
+ el.addEventListener(eventType, eventListener, false);
259
+
260
+ return function remove() {
261
+ el.removeEventListener(eventType, eventListener);
262
+ };
263
+ }
264
+
265
+ function addDOMEventListeners(
266
+ component,
267
+ el,
268
+ eventType,
269
+ targetMethodName,
270
+ isOnce,
271
+ extraArgs,
272
+ handles
273
+ ) {
274
+ var removeListener = addEventListenerHelper(
275
+ el,
276
+ eventType,
277
+ isOnce,
278
+ function (event) {
279
+ var args = [event, el];
280
+ if (extraArgs) {
281
+ args = extraArgs.concat(args);
282
+ }
283
+
284
+ invokeComponentEventHandler(component, targetMethodName, args);
285
+ }
286
+ );
287
+ handles.push(removeListener);
288
+ }
289
+
290
+ function initComponent(componentDef, host) {
291
+ var component = componentDef.___component;
292
+
293
+ component.___reset();
294
+ component.___host = host;
295
+
296
+ var isExisting = componentDef.___isExisting;
297
+
298
+ if (isExisting) {
299
+ component.___removeDOMEventListeners();
300
+ }
301
+
302
+ var domEvents = componentDef.___domEvents;
303
+ if (domEvents) {
304
+ var eventListenerHandles = [];
305
+
306
+ domEvents.forEach(function (domEventArgs) {
307
+ // The event mapping is for a direct DOM event (not a custom event and not for bubblign dom events)
308
+
309
+ var eventType = domEventArgs[0];
310
+ var targetMethodName = domEventArgs[1];
311
+ var eventEl = component.___keyedElements[domEventArgs[2]];
312
+ var isOnce = domEventArgs[3];
313
+ var extraArgs = domEventArgs[4];
314
+
315
+ addDOMEventListeners(
316
+ component,
317
+ eventEl,
318
+ eventType,
319
+ targetMethodName,
320
+ isOnce,
321
+ extraArgs,
322
+ eventListenerHandles
323
+ );
324
+ });
325
+
326
+ if (eventListenerHandles.length) {
327
+ component.___domEventListenerHandles = eventListenerHandles;
328
+ }
329
+ }
330
+
331
+ if (component.___mounted) {
332
+ component.___emitUpdate();
333
+ } else {
334
+ component.___mounted = true;
335
+ component.___emitMount();
336
+ }
337
+ }
338
+
339
+ /**
340
+ * This method is used to initialized components associated with UI components
341
+ * rendered in the browser. While rendering UI components a "components context"
342
+ * is added to the rendering context to keep up with which components are rendered.
343
+ * When ready, the components can then be initialized by walking the component tree
344
+ * in the components context (nested components are initialized before ancestor components).
345
+ * @param {Array<marko-components/lib/ComponentDef>} componentDefs An array of ComponentDef instances
346
+ */
347
+ function initClientRendered(componentDefs, host) {
348
+ if (!host) host = document;
349
+ // Ensure that event handlers to handle delegating events are
350
+ // always attached before initializing any components
351
+ eventDelegation.___init(host);
352
+ var len = componentDefs.length;
353
+ var componentDef;
354
+ var i;
355
+
356
+ for (i = len; i--; ) {
357
+ componentDef = componentDefs[i];
358
+ trackComponent(componentDef);
359
+ }
360
+
361
+ for (i = len; i--; ) {
362
+ componentDef = componentDefs[i];
363
+ initComponent(componentDef, host);
364
+ }
365
+ }
366
+
367
+ /**
368
+ * This method initializes all components that were rendered on the server by iterating over all
369
+ * of the component IDs.
370
+ */
371
+ function initServerRendered(renderedComponents, host) {
372
+ var type = typeof renderedComponents;
373
+ var globalKey = "$";
374
+ var runtimeId;
375
+
376
+ if (type !== "object") {
377
+ if (type === "string") {
378
+ runtimeId = renderedComponents;
379
+ globalKey += runtimeId + "_C";
380
+ } else {
381
+ globalKey += (runtimeId = DEFAULT_RUNTIME_ID) + "C";
382
+ }
383
+
384
+ renderedComponents = win[globalKey];
385
+
386
+ // eslint-disable-next-line no-constant-condition
387
+ if ("MARKO_DEBUG") {
388
+ if (
389
+ renderedComponents &&
390
+ renderedComponents.i !== undefined &&
391
+ renderedComponents.i !== componentsUtil.___runtimeId
392
+ ) {
393
+ console.warn(
394
+ "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."
395
+ );
396
+ }
397
+ }
398
+
399
+ var fakeArray = (win[globalKey] = {
400
+ r: runtimeId,
401
+ concat: initServerRendered
402
+ });
403
+
404
+ // eslint-disable-next-line no-constant-condition
405
+ if ("MARKO_DEBUG") {
406
+ fakeArray.i = componentsUtil.___runtimeId;
407
+ }
408
+
409
+ if (renderedComponents && renderedComponents.forEach) {
410
+ renderedComponents.forEach(function (renderedComponent) {
411
+ fakeArray.concat(renderedComponent);
412
+ });
413
+ }
414
+
415
+ return fakeArray;
416
+ }
417
+
418
+ var isFromSerializedGlobals = this.concat === initServerRendered;
419
+ renderedComponents = warp10Finalize(renderedComponents);
420
+
421
+ if (isFromSerializedGlobals) {
422
+ runtimeId = this.r;
423
+ host = document;
424
+ } else {
425
+ runtimeId = renderedComponents.r || DEFAULT_RUNTIME_ID;
426
+ if (!host) host = document;
427
+
428
+ // eslint-disable-next-line no-constant-condition
429
+ if ("MARKO_DEBUG") {
430
+ complain(
431
+ "Passing serialized data to `require('marko/components).init` is deprecated. Instead set '$global.runtimeId' and provide the 'runtimeId' option to your Marko bundler plugin."
432
+ );
433
+ }
434
+ }
435
+
436
+ // eslint-disable-next-line no-constant-condition
437
+ if ("MARKO_DEBUG") {
438
+ if (host !== document) {
439
+ complain(
440
+ "Passing a document other than the current document to `require('marko/components).init` is deprecated."
441
+ );
442
+ }
443
+ }
444
+
445
+ var prefix = renderedComponents.p || "";
446
+ var meta = serverRenderedMeta[prefix];
447
+ var isLast = renderedComponents.l;
448
+
449
+ if (meta) {
450
+ if (isLast) {
451
+ delete serverRenderedMeta[prefix];
452
+ }
453
+ } else {
454
+ meta = {};
455
+
456
+ if (!isLast) {
457
+ serverRenderedMeta[prefix] = meta;
458
+ }
459
+ }
460
+
461
+ // Ensure that event handlers to handle delegating events are
462
+ // always attached before initializing any components
463
+ indexServerComponentBoundaries(host, runtimeId);
464
+ eventDelegation.___init(host);
465
+
466
+ if (renderedComponents.g) {
467
+ meta.___globals = renderedComponents.g;
468
+ }
469
+
470
+ if (renderedComponents.t) {
471
+ meta.___types = meta.___types
472
+ ? meta.___types.concat(renderedComponents.t)
473
+ : renderedComponents.t;
474
+ }
475
+
476
+ // hydrate components top down (leaf nodes last)
477
+ // and return an array of functions to mount these components
478
+ (renderedComponents.w || [])
479
+ .map(function (componentDef) {
480
+ var typeName = meta.___types[componentDef[1]];
481
+
482
+ return registered[typeName]
483
+ ? tryHydrateComponent(componentDef, meta, host, runtimeId)
484
+ : addPendingDef(componentDef, typeName, meta, host, runtimeId);
485
+ })
486
+ .reverse()
487
+ .forEach(tryInvoke);
488
+
489
+ return this;
490
+ }
491
+
492
+ function tryHydrateComponent(rawDef, meta, host, runtimeId) {
493
+ var componentDef = ComponentDef.___deserialize(
494
+ rawDef,
495
+ meta.___types,
496
+ meta.___globals,
497
+ exports
498
+ );
499
+ var mount = hydrateComponentAndGetMount(componentDef, host);
500
+
501
+ if (!mount) {
502
+ // hydrateComponentAndGetMount will return false if there is not rootNode
503
+ // for the component. If this is the case, we'll wait until the
504
+ // DOM has fully loaded to attempt to init the component again.
505
+ if (deferredDefs) {
506
+ deferredDefs.push(componentDef);
507
+ } else {
508
+ deferredDefs = [componentDef];
509
+ document.addEventListener("DOMContentLoaded", function () {
510
+ indexServerComponentBoundaries(host, runtimeId);
511
+ deferredDefs
512
+ .map(function (componentDef) {
513
+ return hydrateComponentAndGetMount(componentDef, host);
514
+ })
515
+ .reverse()
516
+ .forEach(tryInvoke);
517
+ deferredDefs = undefined;
518
+ });
519
+ }
520
+ }
521
+
522
+ return mount;
523
+ }
524
+
525
+ function hydrateComponentAndGetMount(componentDef, host) {
526
+ var componentId = componentDef.id;
527
+ var component = componentDef.___component;
528
+ var rootNode = serverComponentRootNodes[componentId];
529
+ var renderResult;
530
+
531
+ if (rootNode) {
532
+ delete serverComponentRootNodes[componentId];
533
+
534
+ component.___rootNode = rootNode;
535
+ componentsByDOMNode.set(rootNode, component);
536
+
537
+ if (componentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER) {
538
+ component.___host = host;
539
+ renderResult = component.___rerender(component.___input, true);
540
+ trackComponent(componentDef);
541
+ return function mount() {
542
+ renderResult.afterInsert(host);
543
+ };
544
+ } else {
545
+ trackComponent(componentDef);
546
+ }
547
+
548
+ return function mount() {
549
+ initComponent(componentDef, host);
550
+ };
551
+ }
552
+ }
553
+
554
+ function trackComponent(componentDef) {
555
+ var component = componentDef.___component;
556
+ if (component) {
557
+ componentLookup[component.id] = component;
558
+ }
559
+ }
560
+
561
+ function tryInvoke(fn) {
562
+ if (fn) fn();
563
+ }
564
+
142
565
  exports.r = register;
143
- exports.___getComponentClass = getComponentClass;
144
566
  exports.___createComponent = createComponent;
145
- exports.___isRegistered = isRegistered;
146
- exports.___addPendingDef = addPendingDef;
567
+ exports.___getComponentClass = getComponentClass;
568
+ exports.___initServerRendered = win.$initComponents = initServerRendered;
569
+
570
+ require("../ComponentsContext").___initClientRendered = initClientRendered;
package/src/runtime/helpers/repeatable.js ADDED
@@ -0,0 +1,12 @@
1
+ module.exports = function repeatable(a, b) {
2
+ if (a) {
3
+ if (Array.isArray(a)) {
4
+ a.push(b);
5
+ return a;
6
+ }
7
+
8
+ return [a, b];
9
+ }
10
+
11
+ return b;
12
+ };
package/src/runtime/helpers/self-iterator.js ADDED
@@ -0,0 +1,3 @@
1
+ module.exports = function* selfIterator() {
2
+ yield this;
3
+ };