@fusion.dev/helix-docs 0.154.0 → 0.156.0
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/content/metrics.mdx +220 -220
- package/content/sandbox.mdx +20 -6
- package/dist/sources.generated.js +240 -226
- package/package.json +9 -9
package/content/sandbox.mdx
CHANGED
|
@@ -37,9 +37,14 @@ the value to the preview slotted into it. The source pane and the preview do not
|
|
|
37
37
|
reference each other, so you can replace either one or use it alone.
|
|
38
38
|
|
|
39
39
|
The event includes the pane's `name`, so one sandbox can hold several panes
|
|
40
|
-
without tracking which element sent each event.
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
without tracking which element sent each event. The names the sandbox reads:
|
|
41
|
+
|
|
42
|
+
- A pane named `html` sets the preview's markup.
|
|
43
|
+
- A pane named `css` sets its stylesheet.
|
|
44
|
+
- A pane named `js` sets a script, which runs as a module after the markup.
|
|
45
|
+
|
|
46
|
+
The sandbox ignores a pane with any other name, so that pane only displays its
|
|
47
|
+
contents.
|
|
43
48
|
|
|
44
49
|
A pane's text goes in its `value`. The pane renders no children. The sandbox
|
|
45
50
|
also hands each pane's `value` to the preview when it starts, so you write the
|
|
@@ -85,7 +90,16 @@ hides the quieter lines.
|
|
|
85
90
|
|
|
86
91
|
`helix-sandbox-preview` loads `src` into a sandboxed frame. You provide that
|
|
87
92
|
document. It loads the styles and the elements your examples use, and it talks
|
|
88
|
-
to the preview through `postMessage
|
|
93
|
+
to the preview through `postMessage`.
|
|
94
|
+
|
|
95
|
+
Without `src`, the preview loads a built-in document. It runs the example's
|
|
96
|
+
HTML, CSS, and scripts, and reports the console, uncaught errors, the height,
|
|
97
|
+
and presses, so a sandbox renders with nothing to host. It defines no element,
|
|
98
|
+
so set `src` to a document of your own when your examples use Helix
|
|
99
|
+
components. Its script is inline, so a page whose Content Security Policy
|
|
100
|
+
refuses inline scripts needs a `src` too.
|
|
101
|
+
|
|
102
|
+
The messages:
|
|
89
103
|
|
|
90
104
|
| Message | Sent by | What it carries |
|
|
91
105
|
|---|---|---|
|
|
@@ -106,8 +120,8 @@ it was given. The types are exported from `@fusion.dev/helix/sandbox` as
|
|
|
106
120
|
`servePreview` from `@fusion.dev/helix/sandbox` is that protocol, written for
|
|
107
121
|
you. Call it once in the frame document, after your elements are defined. It
|
|
108
122
|
writes each render into `#preview-root`, runs the example's scripts, relays
|
|
109
|
-
its console,
|
|
110
|
-
four layouts. A frame follows. `/helix.css` is the stylesheet from
|
|
123
|
+
its console, its uncaught errors, and its unhandled promise rejections,
|
|
124
|
+
reports its height and its presses, and adds the rules for the four layouts. A frame follows. `/helix.css` is the stylesheet from
|
|
111
125
|
`@fusion.dev/helix-styles`, and `/frame.js` is a classic script you bundle,
|
|
112
126
|
for the reason under "How the preview is isolated":
|
|
113
127
|
|