@fast-compose/compose-script 0.1.2 → 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
|
|
@@ -110,6 +123,18 @@ within it; content larger than a fixed size is cut off. The composable still set
|
|
|
110
123
|
|
|
111
124
|
Sizes from stylesheets or classes are not read; to size by class, put the script in an element with that class.
|
|
112
125
|
|
|
126
|
+
### Layout
|
|
127
|
+
|
|
128
|
+
The element sits in the text flow like an image (`display: inline-block`), so other elements can go beside it. For
|
|
129
|
+
its own line, add `display: block` to the script's `style`.
|
|
130
|
+
|
|
131
|
+
```html
|
|
132
|
+
<script type="text/compose-content">
|
|
133
|
+
Button(onClick = {}) { Text("Click me") }
|
|
134
|
+
</script>
|
|
135
|
+
<label>Beside the button</label>
|
|
136
|
+
```
|
|
137
|
+
|
|
113
138
|
## compose-preview
|
|
114
139
|
|
|
115
140
|
The code is a whole Kotlin file. Every `@Composable` function with `@Preview` is shown with its name, size, background,
|