@metapages/metapage 1.8.24 → 1.8.25
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.
- package/README.md +95 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,99 @@
|
|
|
1
1
|
# [Metapages](https://docs.metapage.io/docs)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
- Examples: [https://metapage.io](https://metapage.io)
|
|
4
|
+
- Documentation: [https://docs.metapage.io/docs](https://docs.metapage.io/docs)
|
|
5
|
+
- Online tests and conversion tools: [https://module.metapage.io](https://module.metapage.io)
|
|
6
|
+
- Example javascript component: [https://js.mtfm.io](https://js.mtfm.io)
|
|
4
7
|
|
|
5
|
-
Documentation and examples: [https://docs.metapage.io/docs](https://docs.metapage.io/docs)
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
A *metapage* is a set of connected iframes (*metaframes*).
|
|
10
|
+
|
|
11
|
+
Each component iframe runs the metapage module and establishes input/output pipes. Now you can create, edit, and embed whole complex applications directly in your own apps, or simply create using the [metapage editor]((https://metapage.io) and publish and share immediately.
|
|
12
|
+
|
|
13
|
+
## Quickstart metapage
|
|
14
|
+
|
|
15
|
+
Load and render a metapage definition
|
|
16
|
+
|
|
17
|
+
```javascript
|
|
18
|
+
import { renderMetapage } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.8.15";
|
|
19
|
+
|
|
20
|
+
// download a metapage definition from metapage.io
|
|
21
|
+
// or just use your own definition JSON
|
|
22
|
+
const response = await fetch("https://metapage.io/m/87ae11673508447e883b598bf7da9c5d/metapage.json");
|
|
23
|
+
const metapageDefinition = await response.json();
|
|
24
|
+
await renderMetapage({
|
|
25
|
+
definition: metapageDefinition,
|
|
26
|
+
rootDiv: document.getElementById('metapage-container')
|
|
27
|
+
});
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
The rendered workflow:
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## Full example
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<!DOCTYPE html>
|
|
41
|
+
<html lang="en">
|
|
42
|
+
<head>
|
|
43
|
+
<meta charset="utf-8" />
|
|
44
|
+
<style>
|
|
45
|
+
* {
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
margin: 0;
|
|
48
|
+
padding: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
body {
|
|
52
|
+
width: 100vw;
|
|
53
|
+
height: 100vh;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
iframe {
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
border: 0;
|
|
59
|
+
height: 100%;
|
|
60
|
+
width: 100%;
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
|
|
65
|
+
<body>
|
|
66
|
+
<div style="width: 100%; height: 100%" id="metapage-container"></div>
|
|
67
|
+
|
|
68
|
+
<script type="module">
|
|
69
|
+
// the only function you need to import to render a metapage
|
|
70
|
+
import { renderMetapage } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.8.15";
|
|
71
|
+
|
|
72
|
+
// download a metapage definition from metapage.io
|
|
73
|
+
// or just use your own definition JSON
|
|
74
|
+
const response = await fetch("https://metapage.io/m/87ae11673508447e883b598bf7da9c5d/metapage.json");
|
|
75
|
+
const metapageDefinition = await response.json();
|
|
76
|
+
|
|
77
|
+
// handle metapage outputs
|
|
78
|
+
const onOutputs = (outputs) => {
|
|
79
|
+
// do something with the outputs
|
|
80
|
+
console.log("outputs", outputs);
|
|
81
|
+
};
|
|
82
|
+
// set input values with the provided setInputs function
|
|
83
|
+
// dispose removes all event listeners and unloads the metapage
|
|
84
|
+
const { setInputs, dispose } = await renderMetapage({
|
|
85
|
+
definition: metapageDefinition,
|
|
86
|
+
onOutputs,
|
|
87
|
+
rootDiv: document.getElementById("metapage-container"),
|
|
88
|
+
options: {
|
|
89
|
+
hideBorder: true,
|
|
90
|
+
hideFrameBorders: true,
|
|
91
|
+
hideOptions: true,
|
|
92
|
+
hideMetaframeLabels: true,
|
|
93
|
+
},
|
|
94
|
+
});
|
|
95
|
+
</script>
|
|
96
|
+
</body>
|
|
97
|
+
</html>
|
|
98
|
+
|
|
99
|
+
```
|
package/package.json
CHANGED