@metapages/metapage 1.10.6 → 1.10.8
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 +97 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1400 -1331
- package/dist/index.js.map +1 -1
- package/dist/metapage/Metapage.d.ts.map +1 -1
- package/dist/metapage/metaframeRenderer.d.ts +17 -0
- package/dist/metapage/metaframeRenderer.d.ts.map +1 -0
- package/dist/metapage/metapageRenderer.d.ts.map +1 -1
- package/dist/metapage.css +1 -0
- package/package.json +5 -4
- package/src/index.ts +1 -0
- package/src/metapage/Metapage.ts +25 -0
- package/src/metapage/metaframeRenderer.ts +147 -0
- package/src/metapage/metapageRenderer.ts +17 -5
- package/src/metapage.css +1 -0
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ import {
|
|
|
36
36
|
renderMetapage,
|
|
37
37
|
Metapage,
|
|
38
38
|
Metaframe,
|
|
39
|
-
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
39
|
+
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8";
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
## Quick Start
|
|
@@ -77,12 +77,86 @@ The `renderMetapage` function the `react-grid-layout` layout in `metapage.json`:
|
|
|
77
77
|
|
|
78
78
|
[Implentation in source code](https://github.com/metapages/metapage/blob/2ef8bd7bfb151ad1616da46aa9797bcf2b1c3d78/app/libs/src/metapage/metapageRenderer.ts#L204)
|
|
79
79
|
|
|
80
|
+
### Rendering a Single Metaframe
|
|
81
|
+
|
|
82
|
+
Use `renderMetaframe` to embed a single metaframe URL as a full-size iframe with no borders, labels, or grid layout:
|
|
83
|
+
|
|
84
|
+
```javascript
|
|
85
|
+
import { renderMetaframe } from "@metapages/metapage";
|
|
86
|
+
|
|
87
|
+
const { setInputs, dispose } = await renderMetaframe({
|
|
88
|
+
onOutputs: (outputs) => {
|
|
89
|
+
console.log("Got outputs", outputs);
|
|
90
|
+
},
|
|
91
|
+
url: "https://js.mtfm.io/",
|
|
92
|
+
rootDiv: document.getElementById("container"),
|
|
93
|
+
});
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
#### Options
|
|
97
|
+
|
|
98
|
+
```javascript
|
|
99
|
+
const { setInputs, setOutputs, dispose, metapage } = await renderMetaframe({
|
|
100
|
+
url: "https://js.mtfm.io/",
|
|
101
|
+
rootDiv: document.getElementById("container"),
|
|
102
|
+
debug: false,
|
|
103
|
+
|
|
104
|
+
// Called when the metaframe sends outputs (pipe-level, not wrapped by metaframe ID)
|
|
105
|
+
onOutputs: (outputs) => {
|
|
106
|
+
console.log("Outputs:", outputs); // { pipeName: value, ... }
|
|
107
|
+
},
|
|
108
|
+
|
|
109
|
+
// Called when the metaframe URL changes (e.g. hash param updates)
|
|
110
|
+
onUrlChange: (newUrl) => {
|
|
111
|
+
console.log("URL changed to:", newUrl);
|
|
112
|
+
},
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
// Send inputs directly as MetaframeInputMap (pipe-level)
|
|
116
|
+
setInputs({ text: "hello" });
|
|
117
|
+
|
|
118
|
+
// Clean up when done
|
|
119
|
+
dispose();
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
#### Full HTML Example
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<!DOCTYPE html>
|
|
126
|
+
<html>
|
|
127
|
+
<head>
|
|
128
|
+
<style>
|
|
129
|
+
body {
|
|
130
|
+
margin: 0;
|
|
131
|
+
}
|
|
132
|
+
#container {
|
|
133
|
+
width: 100vw;
|
|
134
|
+
height: 100vh;
|
|
135
|
+
}
|
|
136
|
+
</style>
|
|
137
|
+
</head>
|
|
138
|
+
<body>
|
|
139
|
+
<div id="container"></div>
|
|
140
|
+
<script type="module">
|
|
141
|
+
import { renderMetaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8";
|
|
142
|
+
|
|
143
|
+
const { dispose } = await renderMetaframe({
|
|
144
|
+
url: "https://js.mtfm.io/",
|
|
145
|
+
rootDiv: document.getElementById("container"),
|
|
146
|
+
onOutputs: (outputs) => console.log("outputs:", outputs),
|
|
147
|
+
onUrlChange: (url) => console.log("url:", url),
|
|
148
|
+
});
|
|
149
|
+
</script>
|
|
150
|
+
</body>
|
|
151
|
+
</html>
|
|
152
|
+
```
|
|
153
|
+
|
|
80
154
|
### Creating a Metaframe (Inside an iframe)
|
|
81
155
|
|
|
82
156
|
If you're building a component to use in a metapage:
|
|
83
157
|
|
|
84
158
|
```javascript
|
|
85
|
-
import { Metaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
159
|
+
import { Metaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8";
|
|
86
160
|
|
|
87
161
|
const metaframe = new Metaframe();
|
|
88
162
|
|
|
@@ -223,7 +297,7 @@ metaframe.onInput("file", (file) => {
|
|
|
223
297
|
<div id="metapage-container"></div>
|
|
224
298
|
|
|
225
299
|
<script type="module">
|
|
226
|
-
import { renderMetapage } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
300
|
+
import { renderMetapage } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8";
|
|
227
301
|
|
|
228
302
|
const definition = await fetch(
|
|
229
303
|
"https://metapage.io/m/87ae11673508447e883b598bf7da9c5d/metapage.json",
|
|
@@ -258,7 +332,7 @@ metaframe.onInput("file", (file) => {
|
|
|
258
332
|
### Building a Metaframe Component
|
|
259
333
|
|
|
260
334
|
```javascript
|
|
261
|
-
import { Metaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
335
|
+
import { Metaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8";
|
|
262
336
|
|
|
263
337
|
const metaframe = new Metaframe();
|
|
264
338
|
|
|
@@ -335,7 +409,7 @@ Metaframes can read and write to their URL hash parameters:
|
|
|
335
409
|
import {
|
|
336
410
|
getHashParamValueJsonFromWindow,
|
|
337
411
|
setHashParamValueJsonInWindow,
|
|
338
|
-
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
412
|
+
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8";
|
|
339
413
|
|
|
340
414
|
// Read from URL hash
|
|
341
415
|
const config = getHashParamValueJsonFromWindow("config");
|
|
@@ -565,6 +639,22 @@ Render a metapage into a DOM element.
|
|
|
565
639
|
|
|
566
640
|
**Returns:** `{ setInputs, setOutputs, dispose, metapage }`
|
|
567
641
|
|
|
642
|
+
### renderMetaframe(options)
|
|
643
|
+
|
|
644
|
+
Render a single metaframe URL as a full-size iframe.
|
|
645
|
+
|
|
646
|
+
**Parameters:**
|
|
647
|
+
|
|
648
|
+
- `url`: The metaframe URL to render
|
|
649
|
+
- `rootDiv`: DOM element to render into
|
|
650
|
+
- `onOutputs`: Callback for metaframe outputs as `MetaframeInputMap` (optional)
|
|
651
|
+
- `onUrlChange`: Callback when the metaframe URL changes (optional)
|
|
652
|
+
- `debug`: Enable debug logging (optional, default `false`)
|
|
653
|
+
|
|
654
|
+
**Returns:** `{ setInputs, setOutputs, dispose, metapage }`
|
|
655
|
+
|
|
656
|
+
Note: `setInputs` and `setOutputs` accept `MetaframeInputMap` directly (pipe-level), unlike `renderMetapage` which uses `MetapageInstanceInputs` (keyed by metaframe ID).
|
|
657
|
+
|
|
568
658
|
### Metapage Class
|
|
569
659
|
|
|
570
660
|
**Methods:**
|
|
@@ -621,7 +711,7 @@ Example minimal metaframe:
|
|
|
621
711
|
</head>
|
|
622
712
|
<body>
|
|
623
713
|
<script type="module">
|
|
624
|
-
import { Metaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
714
|
+
import { Metaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8";
|
|
625
715
|
|
|
626
716
|
const metaframe = new Metaframe();
|
|
627
717
|
|
|
@@ -645,7 +735,7 @@ import {
|
|
|
645
735
|
MetapageDefinition,
|
|
646
736
|
MetaframeInputMap,
|
|
647
737
|
MetapageInstanceInputs,
|
|
648
|
-
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
738
|
+
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8";
|
|
649
739
|
|
|
650
740
|
const definition: MetapageDefinition = {
|
|
651
741
|
metaframes: {
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC"}
|