mirror of
https://github.com/marko-js/marko.git
synced 2025-12-08 19:26:05 +00:00
Documentation fixes
This commit is contained in:
Dylan Piercey
parent
376ce66247
commit
cb07ad5c10
@ -304,7 +304,7 @@ _components/fancy-table/index.marko:_
|
||||
</table>
|
||||
```
|
||||
|
||||
Our headings can now include icons (any anything else)!
|
||||
Our headings can now include icons (and anything else)!
|
||||
|
||||
_HTML Output:_
|
||||
|
||||
|
||||
123
docs/lasso.md
123
docs/lasso.md
@ -105,78 +105,87 @@ browser-refresh server.js
|
||||
|
||||
For many use cases, the combination of `lasso-marko` and `@lasso/marko-taglib` is sufficient to render and bundle components without the need for explicit `browser.json` files. For more advanced use cases, the following bundle types may be defined in a `browser.json` for Lasso.
|
||||
|
||||
- **`marko-dependencies`**: (provided by `lasso-marko`)
|
||||
Includes all the dependencies needed by template and the code to register all components that would be rendered by the template. It does not automatically initialize the component, so is most useful if you need to initialize components manually.
|
||||
#### `marko-dependencies` _(provided by `lasso-marko`)_
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "marko-dependencies",
|
||||
"path": "src/ui-modules/outdated-browser-banner/index.marko"
|
||||
}
|
||||
```
|
||||
Includes all the dependencies needed by template and the code to register all components that would be rendered by the template. It does not automatically initialize the component, so is most useful if you need to initialize components manually.
|
||||
|
||||
**Note:** To initialize the server rendered components, there are 2 steps:
|
||||
```json
|
||||
{
|
||||
"type": "marko-dependencies",
|
||||
"path": "src/ui-modules/outdated-browser-banner/index.marko"
|
||||
}
|
||||
```
|
||||
|
||||
**Step 1:** Manually _retrieve_ server rendered components, shipped via `marko-dependencies`.
|
||||
**Note:** To initialize the server rendered components, there are 2 steps:
|
||||
|
||||
To retrieve the list of server rendered components, do:
|
||||
**Step 1:** Manually _retrieve_ server rendered components, shipped via `marko-dependencies`.
|
||||
|
||||
To retrieve the list of server rendered components, do:
|
||||
|
||||
```javascript
|
||||
template.render(data, (err, output) => {
|
||||
const renderedComponentsList = require('marko/components').getRenderedComponents(output.out);
|
||||
const html = output.getOutput();
|
||||
});
|
||||
res.json({
|
||||
renderedComponentsList,
|
||||
html
|
||||
});
|
||||
```
|
||||
**Step 2:** Manually *initialize* server rendered components, shipped via `marko-dependencies`.
|
||||
```javascript
|
||||
template.render(data, (err, output) => {
|
||||
const renderedComponentsList = require("marko/components").getRenderedComponents(
|
||||
output.out
|
||||
);
|
||||
const html = output.getOutput();
|
||||
});
|
||||
res.json({
|
||||
renderedComponentsList,
|
||||
html
|
||||
});
|
||||
```
|
||||
|
||||
To initialize the list of server rendered components, do:
|
||||
**Step 2:** Manually _initialize_ server rendered components, shipped via `marko-dependencies`.
|
||||
|
||||
To initialize the list of server rendered components, do:
|
||||
|
||||
```javascript
|
||||
// from the response received, retrieve as
|
||||
require('marko/components').init(response.renderedComponentsList);
|
||||
```
|
||||
**Note:** Ensure Step 2 is inside a DOM-ready wrapper, for the legacy widgets layer to load (if there are widgets built out of Marko 3, that is being used inside a Marko 4 component.)
|
||||
```javascript
|
||||
// from the response received, retrieve as
|
||||
require("marko/components").init(response.renderedComponentsList);
|
||||
```
|
||||
|
||||
- **`marko-hydrate`**: (provided by `lasso-marko`)
|
||||
Includes all the dependencies needed by template and the code to register all components that would be rendered by the template. This also includes the code to initialize the rendered components. Including this bundle on the page will automatically hydrate server rendered components.
|
||||
**Note:** Ensure Step 2 is inside a DOM-ready wrapper, for the legacy widgets layer to load (if there are widgets built out of Marko 3, that is being used inside a Marko 4 component.)
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "marko-hydrate",
|
||||
"path": "src/ui-modules/outdated-browser-banner/index.marko"
|
||||
}
|
||||
```
|
||||
#### `marko-hydrate` _(provided by `lasso-marko`)_
|
||||
|
||||
**Note:** `marko-hydrate` will initialize the component if its defined on the global `window.$components` which is inserted by `Marko` when it sees a `<body>` tag. Else, if you are just rendering out and lasso-ing the a portion of a page with a set of components, include `<init-components/>` at the end of the associated `template.marko` file that builds out the page fragment.
|
||||
Includes all the dependencies needed by template and the code to register all components that would be rendered by the template. This also includes the code to initialize the rendered components. Including this bundle on the page will automatically hydrate server rendered components.
|
||||
|
||||
- **`package`**:
|
||||
A collection of dependencies. `browser.json` is the most common package type.
|
||||
It could be used to point to another `browser.json` from within one component's `browser.json`.
|
||||
Typically also used when the dependencies of the referred `browser.json` have to be packaged inline.
|
||||
```json
|
||||
{
|
||||
"type": "package",
|
||||
"path": "src/ui-modules/show-diag/browser.json"
|
||||
}
|
||||
```
|
||||
- **`require`**:
|
||||
If a javascript file has to be wrapped over for its common JS syntax, to a browser understandable format.
|
||||
```json
|
||||
{
|
||||
"type": "marko-hydrate",
|
||||
"path": "src/ui-modules/outdated-browser-banner/index.marko"
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "require",
|
||||
"path": "src/ui-modules/dynamic-module-loader/dynamic-init-client.js"
|
||||
}
|
||||
```
|
||||
**Note:** `marko-hydrate` will initialize the component if its defined on the global `window.$components` which is inserted by `Marko` when it sees a `<body>` tag. Else, if you are just rendering out and lasso-ing the a portion of a page with a set of components, include `<init-components/>` at the end of the associated `template.marko` file that builds out the page fragment.
|
||||
|
||||
- **`require and run`**:
|
||||
If a javascript file has to be wrapped over for its common JS syntax, to a browser understandable format and be executed immediately.
|
||||
#### `package`
|
||||
|
||||
A collection of dependencies. `browser.json` is the most common package type.
|
||||
It could be used to point to another `browser.json` from within one component's `browser.json`.
|
||||
Typically also used when the dependencies of the referred `browser.json` have to be packaged inline.
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "package",
|
||||
"path": "src/ui-modules/show-diag/browser.json"
|
||||
}
|
||||
```
|
||||
|
||||
#### `require`
|
||||
|
||||
If a javascript file has to be wrapped over for its common JS syntax, to a browser understandable format.
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "require",
|
||||
"path": "src/ui-modules/dynamic-module-loader/dynamic-init-client.js"
|
||||
}
|
||||
```
|
||||
|
||||
#### `require` and `run`
|
||||
|
||||
If a javascript file has to be wrapped over for its common JS syntax, to a browser understandable format and be executed immediately.
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
52
package-lock.json
generated
52
package-lock.json
generated
@ -2538,7 +2538,8 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -2559,12 +2560,14 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -2579,17 +2582,20 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -2706,7 +2712,8 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -2718,6 +2725,7 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -2732,6 +2740,7 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -2739,12 +2748,14 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
@ -2763,6 +2774,7 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -2843,7 +2855,8 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -2855,6 +2868,7 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -2940,7 +2954,8 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -2976,6 +2991,7 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -2995,6 +3011,7 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -3038,12 +3055,14 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -5148,6 +5167,7 @@
|
||||
"version": "0.1.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"kind-of": "^3.0.2",
|
||||
"longest": "^1.0.1",
|
||||
@ -5472,7 +5492,8 @@
|
||||
"is-buffer": {
|
||||
"version": "1.1.6",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"is-builtin-module": {
|
||||
"version": "1.0.0",
|
||||
@ -5571,6 +5592,7 @@
|
||||
"version": "3.2.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"is-buffer": "^1.1.5"
|
||||
}
|
||||
@ -5617,7 +5639,8 @@
|
||||
"longest": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"lru-cache": {
|
||||
"version": "4.1.3",
|
||||
@ -5883,7 +5906,8 @@
|
||||
"repeat-string": {
|
||||
"version": "1.6.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"require-directory": {
|
||||
"version": "2.1.1",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user