@metapages/metapage 1.10.8 → 1.10.10
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 +12 -8
- package/dist/index.js +624 -613
- package/dist/index.js.map +1 -1
- package/dist/metapage/Metapage.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/metapage/Metapage.ts +36 -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.10";
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
## Quick Start
|
|
@@ -138,7 +138,7 @@ dispose();
|
|
|
138
138
|
<body>
|
|
139
139
|
<div id="container"></div>
|
|
140
140
|
<script type="module">
|
|
141
|
-
import { renderMetaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
141
|
+
import { renderMetaframe } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.10";
|
|
142
142
|
|
|
143
143
|
const { dispose } = await renderMetaframe({
|
|
144
144
|
url: "https://js.mtfm.io/",
|
|
@@ -156,7 +156,7 @@ dispose();
|
|
|
156
156
|
If you're building a component to use in a metapage:
|
|
157
157
|
|
|
158
158
|
```javascript
|
|
159
|
-
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.10";
|
|
160
160
|
|
|
161
161
|
const metaframe = new Metaframe();
|
|
162
162
|
|
|
@@ -297,7 +297,7 @@ metaframe.onInput("file", (file) => {
|
|
|
297
297
|
<div id="metapage-container"></div>
|
|
298
298
|
|
|
299
299
|
<script type="module">
|
|
300
|
-
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.10";
|
|
301
301
|
|
|
302
302
|
const definition = await fetch(
|
|
303
303
|
"https://metapage.io/m/87ae11673508447e883b598bf7da9c5d/metapage.json",
|
|
@@ -332,7 +332,7 @@ metaframe.onInput("file", (file) => {
|
|
|
332
332
|
### Building a Metaframe Component
|
|
333
333
|
|
|
334
334
|
```javascript
|
|
335
|
-
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.10";
|
|
336
336
|
|
|
337
337
|
const metaframe = new Metaframe();
|
|
338
338
|
|
|
@@ -409,7 +409,7 @@ Metaframes can read and write to their URL hash parameters:
|
|
|
409
409
|
import {
|
|
410
410
|
getHashParamValueJsonFromWindow,
|
|
411
411
|
setHashParamValueJsonInWindow,
|
|
412
|
-
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
412
|
+
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.10";
|
|
413
413
|
|
|
414
414
|
// Read from URL hash
|
|
415
415
|
const config = getHashParamValueJsonFromWindow("config");
|
|
@@ -711,7 +711,7 @@ Example minimal metaframe:
|
|
|
711
711
|
</head>
|
|
712
712
|
<body>
|
|
713
713
|
<script type="module">
|
|
714
|
-
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.10";
|
|
715
715
|
|
|
716
716
|
const metaframe = new Metaframe();
|
|
717
717
|
|
|
@@ -735,7 +735,7 @@ import {
|
|
|
735
735
|
MetapageDefinition,
|
|
736
736
|
MetaframeInputMap,
|
|
737
737
|
MetapageInstanceInputs,
|
|
738
|
-
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.
|
|
738
|
+
} from "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.10";
|
|
739
739
|
|
|
740
740
|
const definition: MetapageDefinition = {
|
|
741
741
|
metaframes: {
|
|
@@ -748,6 +748,10 @@ const definition: MetapageDefinition = {
|
|
|
748
748
|
const metapage = new Metapage({ definition });
|
|
749
749
|
```
|
|
750
750
|
|
|
751
|
+
## React Integration
|
|
752
|
+
|
|
753
|
+
For embedding metapages and metaframes in React applications, see [`@metapages/metapage-react`](https://www.npmjs.com/package/@metapages/metapage-react) which provides hooks and components for seamless React integration.
|
|
754
|
+
|
|
751
755
|
## Browser Support
|
|
752
756
|
|
|
753
757
|
- Chrome 78+
|