@fast-compose/compose-script 0.1.3 → 0.1.4
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.
|
Binary file
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
-
<img src="https://raw.githubusercontent.com/fast-compose/compose-script/v0.1.
|
|
3
|
+
<img src="https://raw.githubusercontent.com/fast-compose/compose-script/v0.1.4/docs/images/logo.png" width="160" alt="Compose Script logo">
|
|
4
4
|
|
|
5
5
|
# Compose Script
|
|
6
6
|
|
|
@@ -23,7 +23,7 @@ Add one script, write Compose in your HTML, and it renders in the page, powered
|
|
|
23
23
|
Add the library to your page:
|
|
24
24
|
|
|
25
25
|
```html
|
|
26
|
-
<script src="https://cdn.jsdelivr.net/npm/@fast-compose/compose-script@0.1.
|
|
26
|
+
<script src="https://cdn.jsdelivr.net/npm/@fast-compose/compose-script@0.1.4/compose-script.js"></script>
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
- Load `compose-script.js` with a plain `<script src>`, not `type="module"`: it loads its `.wasm` files from its own URL.
|
|
@@ -39,6 +39,15 @@ Then write Compose anywhere in the page:
|
|
|
39
39
|
</script>
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
+
## Examples
|
|
43
|
+
|
|
44
|
+
Try them live on CodePen:
|
|
45
|
+
|
|
46
|
+
| Example | Shows|
|
|
47
|
+
|---|---|
|
|
48
|
+
| [Sound Wave](https://codepen.io/editor/ma7moud3ly/pen/01a191f5-6523-799c-81ed-a193e00bf1f2) | An animated wave in a few lines of Compose |
|
|
49
|
+
| [Live Showcase](https://codepen.io/editor/ma7moud3ly/pen/01a191d9-c6a9-782f-a17c-9df79dc2063b) | Animation, state, a small task app and `@Preview` in light and dark |
|
|
50
|
+
|
|
42
51
|
## Script types
|
|
43
52
|
|
|
44
53
|
| Type | Shows | Size |
|
|
@@ -50,6 +59,10 @@ Each script is replaced by a `<compose-content>` or `<compose-preview>` element
|
|
|
50
59
|
`style`, so pages can style them with CSS. Parse and runtime errors appear inside the element, and each one starts
|
|
51
60
|
when it scrolls into view.
|
|
52
61
|
|
|
62
|
+
While the `.wasm` files download, each element shows a soft loading animation, 160 × 48 px for `compose-content`
|
|
63
|
+
unless the script's `style` sets a size. Pages can restyle it with the `[data-loading]` attribute, e.g.
|
|
64
|
+
`compose-content[data-loading] { background: #eee; }`.
|
|
65
|
+
|
|
53
66
|
## compose-content
|
|
54
67
|
|
|
55
68
|
### Body of a composable
|