marko 5.22.0 → 5.22.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/compiler/config.js +2 -2
- package/dist/compiler/index.js +6 -6
- package/dist/core-tags/core/await/AsyncValue.js +2 -2
- package/dist/core-tags/core/await/renderer.js +6 -6
- package/dist/core-tags/core/await/reorderer-renderer.js +2 -2
- package/dist/node-require/index.js +2 -2
- package/dist/runtime/RenderResult.js +6 -6
- package/dist/runtime/components/Component.js +4 -4
- package/dist/runtime/components/ComponentDef.js +4 -4
- package/dist/runtime/components/ComponentsContext.js +2 -2
- package/dist/runtime/components/ServerComponent.js +2 -2
- package/dist/runtime/components/State.js +4 -4
- package/dist/runtime/components/attach-detach.js +2 -2
- package/dist/runtime/components/dom-data.js +2 -1
- package/dist/runtime/components/entry/index.js +4 -4
- package/dist/runtime/components/init-components/index-browser.js +2 -2
- package/dist/runtime/components/update-manager.js +2 -2
- package/dist/runtime/dom-insert.js +2 -2
- package/dist/runtime/html/AsyncStream.js +8 -8
- package/dist/runtime/html/BufferedWriter.js +2 -2
- package/dist/runtime/html/StringWriter.js +9 -3
- package/dist/runtime/html/create-readable/index-browser.js +2 -2
- package/dist/runtime/html/create-readable/index.js +2 -2
- package/dist/runtime/html/hot-reload.js +2 -2
- package/dist/runtime/renderable.js +2 -2
- package/dist/runtime/vdom/AsyncVDOMBuilder.js +4 -4
- package/dist/runtime/vdom/VComponent.js +2 -2
- package/dist/runtime/vdom/VDocumentFragment.js +2 -2
- package/dist/runtime/vdom/VElement.js +8 -8
- package/dist/runtime/vdom/VFragment.js +2 -2
- package/dist/runtime/vdom/VText.js +2 -2
- package/dist/runtime/vdom/hot-reload.js +2 -2
- package/dist/runtime/vdom/morphdom/fragment.js +2 -2
- package/dist/runtime/vdom/morphdom/specialElHandlers.js +2 -2
- package/dist/taglib/index.js +2 -1
- package/docs/10-awesome-marko-features.md +3 -3
- package/docs/class-components.md +1 -1
- package/docs/express.md +33 -20
- package/docs/marko-vs-react.md +15 -15
- package/docs/styles.md +1 -1
- package/docs/syntax.md +3 -1
- package/docs/troubleshooting-streaming.md +1 -1
- package/docs/why-is-marko-fast.md +2 -2
- package/package.json +4 -4
- package/src/runtime/html/StringWriter.js +7 -1
package/dist/compiler/config.js
CHANGED
@@ -34,8 +34,8 @@ if (g.__MARKO_CONFIG) {
|
|
34
34
|
* You can also access this metadata via `compile(...).meta`.
|
35
35
|
* This API is sticking around for compatibility purposes.
|
36
36
|
*/
|
37
|
-
meta: true
|
38
|
-
|
37
|
+
meta: true
|
38
|
+
};
|
39
39
|
|
40
40
|
if (process.env.MARKO_CONFIG) {
|
41
41
|
Object.assign(config, JSON.parse(process.env.MARKO_CONFIG));
|
package/dist/compiler/index.js
CHANGED
@@ -26,13 +26,13 @@ var defaultOptionsExportDefinition = {
|
|
26
26
|
return globalConfig;
|
27
27
|
},
|
28
28
|
enumerable: true,
|
29
|
-
configurable: false
|
30
|
-
|
29
|
+
configurable: false
|
30
|
+
};
|
31
31
|
|
32
32
|
Object.defineProperties(exports, {
|
33
33
|
defaultOptions: defaultOptionsExportDefinition,
|
34
|
-
config: defaultOptionsExportDefinition
|
35
|
-
|
34
|
+
config: defaultOptionsExportDefinition
|
35
|
+
});
|
36
36
|
|
37
37
|
function configure(newConfig) {
|
38
38
|
if (!newConfig) {
|
@@ -96,8 +96,8 @@ function compileForBrowser(src, filename, options, callback) {
|
|
96
96
|
{
|
97
97
|
output: "dom",
|
98
98
|
meta: false,
|
99
|
-
sourceOnly: false
|
100
|
-
|
99
|
+
sourceOnly: false
|
100
|
+
},
|
101
101
|
options);
|
102
102
|
|
103
103
|
|
@@ -102,8 +102,8 @@ module.exports = function awaitTag(input, out) {
|
|
102
102
|
var awaitInfo = {
|
103
103
|
name: name,
|
104
104
|
clientReorder: clientReorder,
|
105
|
-
dataProvider: provider
|
106
|
-
|
105
|
+
dataProvider: provider
|
106
|
+
};
|
107
107
|
|
108
108
|
if (clientReorder) {
|
109
109
|
awaitInfo.after = input.showAfter;
|
@@ -112,8 +112,8 @@ module.exports = function awaitTag(input, out) {
|
|
112
112
|
out.global.x_ || (
|
113
113
|
out.global.x_ = {
|
114
114
|
instances: [],
|
115
|
-
nextId: 0
|
116
|
-
|
115
|
+
nextId: 0
|
116
|
+
});
|
117
117
|
|
118
118
|
var id = awaitInfo.id = input.name || clientReorderContext.nextId++;
|
119
119
|
var placeholderIdAttrValue = "afph" + id;
|
@@ -159,8 +159,8 @@ module.exports = function awaitTag(input, out) {
|
|
159
159
|
out.flush(); // Flush everything up to this await instance
|
160
160
|
asyncOut = awaitInfo.out = out.beginAsync({
|
161
161
|
timeout: 0, // We will use our code for controlling timeout
|
162
|
-
name: name
|
163
|
-
|
162
|
+
name: name
|
163
|
+
});
|
164
164
|
}
|
165
165
|
|
166
166
|
var beforeRenderEmitted = false;
|
@@ -7,8 +7,8 @@ const requiredCompilerOptions = { modules: "cjs" };
|
|
7
7
|
const defaultCompilerOptions = {
|
8
8
|
// eslint-disable-next-line no-constant-condition
|
9
9
|
sourceMaps: false,
|
10
|
-
meta: true
|
11
|
-
|
10
|
+
meta: true
|
11
|
+
};
|
12
12
|
const MARKO_EXTENSIONS = Symbol("MARKO_EXTENSIONS");
|
13
13
|
|
14
14
|
// eslint-disable-next-line no-constant-condition
|
@@ -66,8 +66,8 @@ var proto = RenderResult.prototype = {
|
|
66
66
|
toString: function () {
|
67
67
|
return this.z_.toString();
|
68
68
|
},
|
69
|
-
document: typeof document === "object" && document
|
70
|
-
|
69
|
+
document: typeof document === "object" && document
|
70
|
+
};
|
71
71
|
|
72
72
|
Object.defineProperty(proto, "html", {
|
73
73
|
get: function () {
|
@@ -78,8 +78,8 @@ Object.defineProperty(proto, "html", {
|
|
78
78
|
|
79
79
|
|
80
80
|
return this.toString();
|
81
|
-
}
|
82
|
-
|
81
|
+
}
|
82
|
+
});
|
83
83
|
|
84
84
|
Object.defineProperty(proto, "context", {
|
85
85
|
get: function () {
|
@@ -90,8 +90,8 @@ Object.defineProperty(proto, "context", {
|
|
90
90
|
|
91
91
|
|
92
92
|
return this.z_;
|
93
|
-
}
|
94
|
-
|
93
|
+
}
|
94
|
+
});
|
95
95
|
|
96
96
|
// Add all of the following DOM methods to Component.prototype:
|
97
97
|
// - appendTo(referenceEl)
|
@@ -27,8 +27,8 @@ var slice = Array.prototype.slice;
|
|
27
27
|
|
28
28
|
var COMPONENT_SUBSCRIBE_TO_OPTIONS;
|
29
29
|
var NON_COMPONENT_SUBSCRIBE_TO_OPTIONS = {
|
30
|
-
addDestroyListener: false
|
31
|
-
|
30
|
+
addDestroyListener: false
|
31
|
+
};
|
32
32
|
|
33
33
|
var emit = EventEmitter.prototype.emit;
|
34
34
|
var ELEMENT_NODE = 1;
|
@@ -636,8 +636,8 @@ Component.prototype = componentProto = {
|
|
636
636
|
_b_() {
|
637
637
|
this.onDestroy && this.onDestroy();
|
638
638
|
this._x_("destroy");
|
639
|
-
}
|
640
|
-
|
639
|
+
}
|
640
|
+
};
|
641
641
|
|
642
642
|
componentProto.elId = componentProto.getElId;
|
643
643
|
componentProto._B_ = componentProto.update;
|
@@ -81,8 +81,8 @@ ComponentDef.prototype = {
|
|
81
81
|
|
82
82
|
get _O_() {
|
83
83
|
return this.h_._O_;
|
84
|
-
}
|
85
|
-
|
84
|
+
}
|
85
|
+
};
|
86
86
|
|
87
87
|
ComponentDef.prototype.nk = ComponentDef.prototype._M_;
|
88
88
|
|
@@ -148,8 +148,8 @@ ComponentDef._P_ = function (o, types, global, registry) {
|
|
148
148
|
id: id,
|
149
149
|
h_: component,
|
150
150
|
_G_: extra.d,
|
151
|
-
_J_: extra.f || 0
|
152
|
-
|
151
|
+
_J_: extra.f || 0
|
152
|
+
};
|
153
153
|
};
|
154
154
|
|
155
155
|
module.exports = ComponentDef;
|
@@ -9,8 +9,8 @@ function ensure(state, propertyName) {
|
|
9
9
|
},
|
10
10
|
set: function (value) {
|
11
11
|
this._g_(propertyName, value, false /* ensure:false */);
|
12
|
-
}
|
13
|
-
|
12
|
+
}
|
13
|
+
});
|
14
14
|
}
|
15
15
|
}
|
16
16
|
|
@@ -99,7 +99,7 @@ State.prototype = {
|
|
99
99
|
},
|
100
100
|
toJSON: function () {
|
101
101
|
return this._v_;
|
102
|
-
}
|
103
|
-
|
102
|
+
}
|
103
|
+
};
|
104
104
|
|
105
105
|
module.exports = State;
|
@@ -124,8 +124,8 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
|
|
124
124
|
p: customEvents && scope, // Only serialize scope if we need to attach custom events
|
125
125
|
s: state,
|
126
126
|
u: undefinedPropNames,
|
127
|
-
w: serializedProps
|
128
|
-
|
127
|
+
w: serializedProps
|
128
|
+
};
|
129
129
|
|
130
130
|
var parts = [id, typeName];
|
131
131
|
var hasExtra = isNotEmpty(extra);
|
@@ -205,8 +205,8 @@ function getInitComponentsData(out, componentDefs) {
|
|
205
205
|
l: isLast && 1,
|
206
206
|
g: serializedGlobals,
|
207
207
|
w: componentDefs,
|
208
|
-
t: newTypes
|
209
|
-
|
208
|
+
t: newTypes
|
209
|
+
};
|
210
210
|
}
|
211
211
|
|
212
212
|
function getInitComponentsDataFromOut(out) {
|
@@ -278,8 +278,8 @@ function initServerRendered(renderedComponents, host) {
|
|
278
278
|
|
279
279
|
var fakeArray = win[globalKey] = {
|
280
280
|
r: runtimeId,
|
281
|
-
concat: initServerRendered
|
282
|
-
|
281
|
+
concat: initServerRendered
|
282
|
+
};
|
283
283
|
|
284
284
|
// eslint-disable-next-line no-constant-condition
|
285
285
|
|
@@ -23,8 +23,8 @@ var voidWriter = {
|
|
23
23
|
},
|
24
24
|
toString: function () {
|
25
25
|
return "";
|
26
|
-
}
|
27
|
-
|
26
|
+
}
|
27
|
+
};
|
28
28
|
|
29
29
|
function State(root, stream, writer, events) {
|
30
30
|
this.root = root;
|
@@ -235,8 +235,8 @@ var proto = AsyncStream.prototype = {
|
|
235
235
|
|
236
236
|
state.events.emit("beginAsync", {
|
237
237
|
out: newStream,
|
238
|
-
parentOut: this
|
239
|
-
|
238
|
+
parentOut: this
|
239
|
+
});
|
240
240
|
|
241
241
|
return newStream;
|
242
242
|
},
|
@@ -496,8 +496,8 @@ var proto = AsyncStream.prototype = {
|
|
496
496
|
newOut.on("error", this.emit.bind(this, "error"));
|
497
497
|
this._state.events.emit("beginDetachedAsync", {
|
498
498
|
out: newOut,
|
499
|
-
parentOut: this
|
500
|
-
|
499
|
+
parentOut: this
|
500
|
+
});
|
501
501
|
return newOut;
|
502
502
|
},
|
503
503
|
|
@@ -653,8 +653,8 @@ var proto = AsyncStream.prototype = {
|
|
653
653
|
this.g_ = componentDef;
|
654
654
|
this.i_ = key;
|
655
655
|
this.ay_ = customEvents;
|
656
|
-
}
|
657
|
-
|
656
|
+
}
|
657
|
+
};
|
658
658
|
|
659
659
|
// alias:
|
660
660
|
proto.w = proto.write;
|
@@ -27,7 +27,13 @@ StringWriter.prototype = {
|
|
27
27
|
|
28
28
|
merge: function (otherWriter) {
|
29
29
|
this._content += otherWriter._content;
|
30
|
-
|
30
|
+
|
31
|
+
if (otherWriter._scripts) {
|
32
|
+
this._scripts = this._scripts ?
|
33
|
+
this._scripts + ";" + otherWriter._scripts :
|
34
|
+
otherWriter._scripts;
|
35
|
+
}
|
36
|
+
|
31
37
|
if (otherWriter._data) {
|
32
38
|
if (this._data) {
|
33
39
|
for (const key in otherWriter._data) {
|
@@ -61,7 +67,7 @@ StringWriter.prototype = {
|
|
61
67
|
str += `<script${nonceAttr}>${this._scripts}</script>`;
|
62
68
|
}
|
63
69
|
return str;
|
64
|
-
}
|
65
|
-
|
70
|
+
}
|
71
|
+
};
|
66
72
|
|
67
73
|
module.exports = StringWriter;
|
@@ -288,8 +288,8 @@ var proto = AsyncVDOMBuilder.prototype = {
|
|
288
288
|
|
289
289
|
state.bh_.emit("beginAsync", {
|
290
290
|
out: asyncOut,
|
291
|
-
parentOut: this
|
292
|
-
|
291
|
+
parentOut: this
|
292
|
+
});
|
293
293
|
|
294
294
|
return asyncOut;
|
295
295
|
},
|
@@ -438,8 +438,8 @@ var proto = AsyncVDOMBuilder.prototype = {
|
|
438
438
|
this.g_ = componentDef;
|
439
439
|
this.i_ = key;
|
440
440
|
this.ay_ = customEvents;
|
441
|
-
}
|
442
|
-
|
441
|
+
}
|
442
|
+
};
|
443
443
|
|
444
444
|
proto.e = proto.element;
|
445
445
|
proto.be = proto.beginElement;
|
@@ -14,8 +14,8 @@ var NS_MATH = "http://www.w3.org/1998/Math/MathML";
|
|
14
14
|
var NS_SVG = "http://www.w3.org/2000/svg";
|
15
15
|
var DEFAULT_NS = {
|
16
16
|
svg: NS_SVG,
|
17
|
-
math: NS_MATH
|
18
|
-
|
17
|
+
math: NS_MATH
|
18
|
+
};
|
19
19
|
|
20
20
|
var FLAG_SIMPLE_ATTRS = 1;
|
21
21
|
var FLAG_CUSTOM_ELEMENT = 2;
|
@@ -201,8 +201,8 @@ VElement.prototype = {
|
|
201
201
|
// different namespaces
|
202
202
|
var value = this.bH_[name];
|
203
203
|
return value != null && value !== false;
|
204
|
-
}
|
205
|
-
|
204
|
+
}
|
205
|
+
};
|
206
206
|
|
207
207
|
inherit(VElement, VNode);
|
208
208
|
|
@@ -213,8 +213,8 @@ var proto = VElementClone.prototype = VElement.prototype;
|
|
213
213
|
get: function () {
|
214
214
|
var value = this.bH_[name];
|
215
215
|
return value !== false && value != null;
|
216
|
-
}
|
217
|
-
|
216
|
+
}
|
217
|
+
});
|
218
218
|
});
|
219
219
|
|
220
220
|
defineProperty(proto, "q_", {
|
@@ -229,8 +229,8 @@ defineProperty(proto, "q_", {
|
|
229
229
|
this.bH_.type === "radio" ?
|
230
230
|
"on" :
|
231
231
|
"";
|
232
|
-
}
|
233
|
-
|
232
|
+
}
|
233
|
+
});
|
234
234
|
|
235
235
|
VElement.bN_ = function (attrs) {
|
236
236
|
// By default this static method is a no-op, but if there are any
|
@@ -55,8 +55,8 @@ var fragmentPrototype = {
|
|
55
55
|
this.nodes.forEach(function (node) {
|
56
56
|
this.detachedContainer.appendChild(node);
|
57
57
|
}, this);
|
58
|
-
}
|
59
|
-
|
58
|
+
}
|
59
|
+
};
|
60
60
|
|
61
61
|
function createFragmentNode(startNode, nextNode, parentNode) {
|
62
62
|
var fragment = Object.create(fragmentPrototype);
|
package/dist/taglib/index.js
CHANGED
@@ -6,7 +6,7 @@
|
|
6
6
|
|
7
7
|
# 10 Awesome Marko Features
|
8
8
|
|
9
|
-
[Marko](
|
9
|
+
[Marko](https://markojs.com/) is a friendly and super fast UI library that makes
|
10
10
|
building web apps<br> fun! In celebration of rapidly approaching [5,000 stars on
|
11
11
|
GitHub](https://github.com/marko-js/marko) (the ultimate open source vanity
|
12
12
|
metric), here are 10 features that will make you more productive in no
|
@@ -89,7 +89,7 @@ Do you see references to “Marko” in the snippet above? Yeah, me neither.
|
|
89
89
|
|
90
90
|
Is your component becoming too large? Do you prefer separating your CSS,
|
91
91
|
JavaScript, and markup code? No problem. You can easily [rip out your code into
|
92
|
-
multiple files](
|
92
|
+
multiple files](https://markojs.com/docs/class-components/#multi-file-components):
|
93
93
|
|
94
94
|
```
|
95
95
|
components/
|
@@ -223,7 +223,7 @@ $ {
|
|
223
223
|
Node.js is asynchronous. Browsers are asynchronous. Why should rendering be
|
224
224
|
synchronous? Pass your promise along to your template and Marko will
|
225
225
|
asynchronously render parts of your view. Turns out, [this is good for
|
226
|
-
performance](
|
226
|
+
performance](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
|
227
227
|
|
228
228
|
```marko
|
229
229
|
$ const searchResultsPromise = searchService.performSearch(keywords);
|
package/docs/class-components.md
CHANGED
@@ -24,7 +24,7 @@ Marko makes it easy to keep your component’s class and styles next to the HTML
|
|
24
24
|
|
25
25
|
- **View** - The HTML template for your UI component. Receives input properties and states, and renders to either server-side HTML or browser-side virtual DOM nodes.
|
26
26
|
- **Client-side behavior** - A JavaScript `class` with methods and properties for initialization, event handling (including DOM events, custom events and lifecycle events), and state management.
|
27
|
-
- **Styles** - Cascading StyleSheets, including support for CSS preprocessors like [Less](
|
27
|
+
- **Styles** - Cascading StyleSheets, including support for CSS preprocessors like [Less](https://lesscss.org/) or [Sass](https://sass-lang.com/).
|
28
28
|
|
29
29
|
## Server-side rendering
|
30
30
|
|
package/docs/express.md
CHANGED
@@ -2,42 +2,45 @@
|
|
2
2
|
|
3
3
|
## Quick Start
|
4
4
|
|
5
|
-
```
|
5
|
+
```sh
|
6
6
|
npm init marko -- --template vite-express
|
7
|
+
# Or `npx create-marko --template vite-express`
|
7
8
|
```
|
8
9
|
|
9
|
-
See
|
10
|
-
project for a working example.
|
10
|
+
See [Marko’s example projects](https://github.com/marko-js/examples) for working [Express](https://expressjs.com/) integration code, such as:
|
11
11
|
|
12
|
-
|
12
|
+
- [`examples/vite-express`](https://github.com/marko-js/examples/tree/master/examples/vite-express)
|
13
|
+
- [`examples/rollup-express`](https://github.com/marko-js/examples/tree/master/examples/rollup-express)
|
14
|
+
- [`examples/webpack-express`](https://github.com/marko-js/examples/tree/master/examples/webpack-express)
|
13
15
|
|
14
|
-
|
16
|
+
But if you want to do things the hard way…
|
15
17
|
|
16
|
-
|
17
|
-
|
18
|
+
## Doing things the hard way
|
19
|
+
|
20
|
+
First, install Marko, Express, and the glue to hold them together:
|
21
|
+
|
22
|
+
```sh
|
23
|
+
npm install marko express @marko/express --save
|
18
24
|
```
|
19
25
|
|
20
26
|
### Skip the view engine
|
21
27
|
|
22
|
-
|
23
|
-
|
24
|
-
### Usage
|
28
|
+
Express’s builtin view engine may be asynchronous, but it doesn’t support streaming — see [Rediscovering Progressive HTML Rendering](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/) for why that’s important. So instead, we [bypass Express’s view engine](https://strongloop.com/strongblog/bypassing-express-view-rendering-for-speed-and-modularity/) to use `@marko/express` instead.
|
25
29
|
|
26
|
-
The
|
30
|
+
[The `@marko/express` package](https://www.npmjs.com/package/@marko/express) adds a `res.marko()` method to [Express’s response object](https://expressjs.com/en/api.html#res). This method works like [`res.render()`](https://expressjs.com/en/api.html#res.render), but without the restrictions of Express’s view engine, letting you take full advantage of Marko’s streaming and modular template organization.
|
27
31
|
|
28
|
-
By using `res.marko
|
32
|
+
> **ProTip**: By using `res.marko()`, properties from [`app.locals`](https://expressjs.com/en/api.html#app.locals) and [`res.locals`](https://expressjs.com/en/api.html#res.locals) are automatically [available on `out.global`](https://markojs.com/docs/rendering/#global-data).
|
29
33
|
|
30
|
-
```
|
34
|
+
```js
|
31
35
|
import express from "express";
|
32
36
|
import markoPlugin from "@marko/express";
|
33
|
-
import
|
37
|
+
import template from "./template.marko";
|
34
38
|
|
35
39
|
const app = express();
|
36
|
-
|
37
|
-
app.use(markoPlugin()); //enable res.marko(template, data)
|
40
|
+
app.use(markoPlugin()); // Enables `res.marko(template, input)`
|
38
41
|
|
39
42
|
app.get("/", function (req, res) {
|
40
|
-
res.marko(
|
43
|
+
res.marko(template, {
|
41
44
|
name: "Frank",
|
42
45
|
count: 30,
|
43
46
|
colors: ["red", "green", "blue"]
|
@@ -47,7 +50,17 @@ app.get("/", function (req, res) {
|
|
47
50
|
app.listen(8080);
|
48
51
|
```
|
49
52
|
|
50
|
-
|
53
|
+
> **Note**: Older versions of `@marko/express` used to also attach Express’s `app`, `req`, and `res` objects onto `out.global`. This meant uncontrolled network data could cause new and exciting surprises in your app code. Nowadays we recommend explicitly accessing the specific pieces of the HTTP exchange you’re interested in, like this:
|
54
|
+
>
|
55
|
+
> ```js
|
56
|
+
> app.get("/", function (req, res) {
|
57
|
+
> res.marko(template, {
|
58
|
+
> params: req.params,
|
59
|
+
> submitted: req.method === "POST" && req.body
|
60
|
+
> });
|
61
|
+
> });
|
62
|
+
> ```
|
63
|
+
|
64
|
+
### BYOB (Bring Your Own Bundler)
|
51
65
|
|
52
|
-
|
53
|
-
Marko supports a number of bundlers, [take a look through our supported bundlers](#bundler-integrations) and pick what works best for you.
|
66
|
+
Most of Marko’s API requires a bundler: the example code above assumes that `.marko` files can be `import`ed in your environment. [Check out Marko’s supported bundlers](https://markojs.com/docs/bundler-integrations-overview/) to see what works best for you.
|
package/docs/marko-vs-react.md
CHANGED
@@ -7,7 +7,7 @@
|
|
7
7
|
> This article was published March 2017. Both frameworks have gone through several updates since. You can find the original ["Marko vs React: An In-depth Look" article here](https://hackernoon.com/marko-vs-react-an-in-depth-look-767de0a5f9a6)!
|
8
8
|
|
9
9
|
In this article we will take an in-depth look at the differences and
|
10
|
-
similarities between [Marko](
|
10
|
+
similarities between [Marko](https://markojs.com/) and React from the perspective
|
11
11
|
of the maintainers of Marko.
|
12
12
|
|
13
13
|
On the surface, Marko and React have a lot in common and both are trying to
|
@@ -27,7 +27,7 @@ weight:
|
|
27
27
|
Because the Marko JavaScript library is much smaller than React, it will require
|
28
28
|
less time to load and parse and this will drastically improve page load times on
|
29
29
|
slow connections or on older devices. Based on [our
|
30
|
-
benchmarks](
|
30
|
+
benchmarks](https://markojs.com/#benchmarks), Marko consistently outperforms
|
31
31
|
React by a significant margin on both the server and in the browser.
|
32
32
|
|
33
33
|
### Example
|
@@ -82,7 +82,7 @@ class Counter extends React.Component {
|
|
82
82
|
}
|
83
83
|
```
|
84
84
|
|
85
|
-
<span class="figcaption_hack">[▶ Try Online](
|
85
|
+
<span class="figcaption_hack">[▶ Try Online](https://codepen.io/mlrawlings/pen/wJXOWR?editors=0010)</span>
|
86
86
|
|
87
87
|
#### Marko
|
88
88
|
|
@@ -115,7 +115,7 @@ $ var count = state.count;
|
|
115
115
|
```
|
116
116
|
|
117
117
|
<span class="figcaption_hack">[▶ Try
|
118
|
-
Online](
|
118
|
+
Online](https://markojs.com/try-online/?gist=8fe46bc5866605aca0dfeec202604011)</span>
|
119
119
|
|
120
120
|
### Similarities
|
121
121
|
|
@@ -151,7 +151,7 @@ At a high level here are some differences:
|
|
151
151
|
targets).
|
152
152
|
- **Improved performance:** Marko supports asynchronous rendering with [early
|
153
153
|
flushing of
|
154
|
-
HTML](
|
154
|
+
HTML](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)
|
155
155
|
for improvements in actual and perceived page load times.
|
156
156
|
- **Improved performance:** React requires an additional client-side re-render if
|
157
157
|
a page is initially rendered on the server while Marko does not.
|
@@ -164,7 +164,7 @@ At a high level here are some differences:
|
|
164
164
|
#### Differences in syntax
|
165
165
|
|
166
166
|
- **Improved ease of use:** Marko uses the
|
167
|
-
[HTML-JS](
|
167
|
+
[HTML-JS](https://markojs.com/docs/syntax/) syntax and the
|
168
168
|
[JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) syntax is offered
|
169
169
|
for React.
|
170
170
|
- **Improved ease of use:** Marko supports both a concise syntax and a familiar
|
@@ -246,9 +246,9 @@ At a high level here are some differences:
|
|
246
246
|
- **Marko limitation:** Marko has no support for native mobile similar to React
|
247
247
|
Native (although with Marko VDOM rendering, this is possible).
|
248
248
|
- **Marko limitation:** Marko requires a JavaScript module bundler (such as
|
249
|
-
[Lasso](
|
250
|
-
[Webpack](
|
251
|
-
[Rollup](
|
249
|
+
[Lasso](https://markojs.com/docs/lasso/),
|
250
|
+
[Webpack](https://markojs.com/docs/webpack/),
|
251
|
+
[Rollup](https://markojs.com/docs/rollup/)
|
252
252
|
since Marko UI components compile down to JavaScript modules. (we consider using
|
253
253
|
a JavaScript module bundler a best practice)
|
254
254
|
|
@@ -261,7 +261,7 @@ between Marko and React.
|
|
261
261
|
|
262
262
|
Both Marko and React JSX allow HTML markup and JavaScript to be combined into a
|
263
263
|
single file and both support building web applications based on UI components.
|
264
|
-
Marko utilizes an [HTML-JS syntax](
|
264
|
+
Marko utilizes an [HTML-JS syntax](https://markojs.com/docs/syntax/) while most
|
265
265
|
React apps use the JSX syntax.
|
266
266
|
|
267
267
|
> React JSX makes JavaScript more like HTML and Marko makes HTML more like
|
@@ -372,7 +372,7 @@ documentation](https://facebook.github.io/react/docs/introducing-jsx.html#specif
|
|
372
372
|
> For example, `class` becomes `className` in JSX, and `tabindex` becomes `tabIndex`.
|
373
373
|
|
374
374
|
As a result of this caveat for React, [tools for converting HTML to JSX
|
375
|
-
exist](
|
375
|
+
exist](https://magic.reactjs.net/htmltojsx.htm).
|
376
376
|
|
377
377
|
#### React JSX
|
378
378
|
|
@@ -679,7 +679,7 @@ export default function HelloGoodBye(props) {
|
|
679
679
|
#### Marko
|
680
680
|
|
681
681
|
Marko supports a mechanism for [automatically discovering custom
|
682
|
-
tags](
|
682
|
+
tags](https://markojs.com/docs/custom-tags/#discovering-tags) for UI components
|
683
683
|
based on the project directory structure. Marko walks up the directory tree to
|
684
684
|
discover all directories and it will also automatically discover custom tags
|
685
685
|
exported by installed packages. This approach negates the need for explicitly
|
@@ -710,7 +710,7 @@ tags.
|
|
710
710
|
### Async
|
711
711
|
|
712
712
|
Even after rendering has started, Marko allows parts of the view to be rendered
|
713
|
-
asynchronously using the [`<await>`](
|
713
|
+
asynchronously using the [`<await>`](https://markojs.com/docs/core-tags#await)
|
714
714
|
tag as shown in the following Marko template:
|
715
715
|
|
716
716
|
```marko
|
@@ -828,7 +828,7 @@ your code readable.
|
|
828
828
|
### Why Marko?
|
829
829
|
|
830
830
|
Here are just a few reasons you should consider using
|
831
|
-
[Marko](
|
831
|
+
[Marko](https://markojs.com/) over React:
|
832
832
|
|
833
833
|
- Marko requires much less boilerplate.
|
834
834
|
- Marko has much better performance based on our benchmarks.
|
@@ -849,6 +849,6 @@ Here are just a few reasons you should consider using
|
|
849
849
|
[Discord](https://discord.gg/RFGxYGs).
|
850
850
|
|
851
851
|
Interested in learning more about Marko? If so, you can get additional
|
852
|
-
information on the [Marko website](
|
852
|
+
information on the [Marko website](https://markojs.com/). Join the conversation
|
853
853
|
and contribute on [GitHub](https://github.com/marko-js/marko) and follow us on
|
854
854
|
[Twitter](https://twitter.com/MarkoDevTeam).
|
package/docs/styles.md
CHANGED
@@ -12,7 +12,7 @@ style {
|
|
12
12
|
<div>Hello World</div>
|
13
13
|
```
|
14
14
|
|
15
|
-
These blocks add global css to the page. The above example will not style just the `<div>` in the component, but all divs on the page. Because of this we recommend following a naming convention such as [BEM](
|
15
|
+
These blocks add global css to the page. The above example will not style just the `<div>` in the component, but all divs on the page. Because of this we recommend following a naming convention such as [BEM](https://getbem.com/introduction/). Marko will likely provide a way to automatically scope these styles to the current component [in the future](https://github.com/marko-js/marko/issues/666).
|
16
16
|
|
17
17
|
> **Note:** Style blocks (unlike `<style>` tags) do not support `${placeholders}` and must be static.
|
18
18
|
|
package/docs/syntax.md
CHANGED
@@ -257,7 +257,7 @@ _HTML Output:_
|
|
257
257
|
|
258
258
|
### Shorthand attributes
|
259
259
|
|
260
|
-
Marko provides a shorthand for declaring classes and ids on an element
|
260
|
+
Marko provides a shorthand for declaring classes and ids on an element, including interpolation. Given `size` is the string `small`:
|
261
261
|
|
262
262
|
_Marko Source:_
|
263
263
|
|
@@ -265,6 +265,7 @@ _Marko Source:_
|
|
265
265
|
<div.my-class/>
|
266
266
|
<span#my-id/>
|
267
267
|
<button#submit.primary.large/>
|
268
|
+
<button.button--${size}></button>
|
268
269
|
```
|
269
270
|
|
270
271
|
Renders the following HTML:
|
@@ -276,6 +277,7 @@ _HTML Output:_
|
|
276
277
|
<div class="my-class"></div>
|
277
278
|
<span id="my-id"></span>
|
278
279
|
<button id="submit" class="primary large"></button>
|
280
|
+
<button class="button--small"></button>
|
279
281
|
```
|
280
282
|
|
281
283
|
## Parameters
|
@@ -16,7 +16,7 @@
|
|
16
16
|
|
17
17
|
### NGiNX
|
18
18
|
|
19
|
-
Most of NGiNX’s relevant parameters are inside [its builtin `http_proxy` module](
|
19
|
+
Most of NGiNX’s relevant parameters are inside [its builtin `http_proxy` module](https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_buffering):
|
20
20
|
|
21
21
|
```nginx
|
22
22
|
proxy_http_version 1.1; # 1.0 by default
|
@@ -6,11 +6,11 @@
|
|
6
6
|
|
7
7
|
> This article was published in May 2017. You can find the original ["Why is Marko Fast?" article here](https://medium.com/@psteeleidem/why-is-marko-fast-a20796cb8ae3)!
|
8
8
|
|
9
|
-
At eBay we are using [Marko](
|
9
|
+
At eBay we are using [Marko](https://markojs.com/) to render over a billion
|
10
10
|
requests every day and this has required us to finely tune Marko, our open
|
11
11
|
source UI library. We have heavily optimized Marko for fast rendering, [advanced
|
12
12
|
performance
|
13
|
-
techniques](
|
13
|
+
techniques](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)
|
14
14
|
and to achieve a minimal page weight (~10kb gzipped). Performance is only one
|
15
15
|
concern because we have also had to scale Marko to support development across
|
16
16
|
hundreds of teams in a way that allows developers to efficiently create
|
package/package.json
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
{
|
2
2
|
"name": "marko",
|
3
|
-
"version": "5.22.
|
3
|
+
"version": "5.22.2",
|
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.23.
|
8
|
-
"@marko/translator-default": "^5.22.
|
7
|
+
"@marko/compiler": "^5.23.2",
|
8
|
+
"@marko/translator-default": "^5.22.2",
|
9
9
|
"app-module-path": "^2.2.0",
|
10
10
|
"argly": "^1.2.0",
|
11
11
|
"browser-refresh-client": "1.1.4",
|
@@ -27,7 +27,7 @@
|
|
27
27
|
"bin": {
|
28
28
|
"markoc": "bin/markoc"
|
29
29
|
},
|
30
|
-
"homepage": "
|
30
|
+
"homepage": "https://markojs.com/",
|
31
31
|
"logo": {
|
32
32
|
"url": "https://raw.githubusercontent.com/marko-js/branding/master/marko-logo-small.png"
|
33
33
|
},
|
@@ -27,7 +27,13 @@ StringWriter.prototype = {
|
|
27
27
|
|
28
28
|
merge: function (otherWriter) {
|
29
29
|
this._content += otherWriter._content;
|
30
|
-
|
30
|
+
|
31
|
+
if (otherWriter._scripts) {
|
32
|
+
this._scripts = this._scripts
|
33
|
+
? this._scripts + ";" + otherWriter._scripts
|
34
|
+
: otherWriter._scripts;
|
35
|
+
}
|
36
|
+
|
31
37
|
if (otherWriter._data) {
|
32
38
|
if (this._data) {
|
33
39
|
for (const key in otherWriter._data) {
|