@fast-compose/compose-script 0.1.0 → 0.1.2
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,24 +1,44 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
<img src="https://raw.githubusercontent.com/fast-compose/compose-script/v0.1.2/docs/images/logo.png" width="160" alt="Compose Script logo">
|
|
4
|
+
|
|
1
5
|
# Compose Script
|
|
2
6
|
|
|
7
|
+
**Live Jetpack Compose inside any web page. No build, no server.**
|
|
8
|
+
|
|
9
|
+
Add one script, write Compose in your HTML, and it renders in the page, powered by
|
|
10
|
+
[Fast Compose](https://github.com/fast-compose/fast-compose).
|
|
11
|
+
|
|
3
12
|
[](https://www.npmjs.com/package/@fast-compose/compose-script)
|
|
4
13
|
[](https://www.jsdelivr.com/package/npm/@fast-compose/compose-script)
|
|
5
|
-
[](LICENSE)
|
|
14
|
+
[](LICENSE)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
</div>
|
|
6
18
|
|
|
7
|
-
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Quick start
|
|
22
|
+
|
|
23
|
+
Add the library to your page:
|
|
8
24
|
|
|
9
25
|
```html
|
|
10
|
-
<script src="https://cdn.jsdelivr.net/npm/@fast-compose/compose-script/compose-script.js"></script>
|
|
26
|
+
<script src="https://cdn.jsdelivr.net/npm/@fast-compose/compose-script@0.1.2/compose-script.js"></script>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
- Load `compose-script.js` with a plain `<script src>`, not `type="module"`: it loads its `.wasm` files from its own URL.
|
|
30
|
+
- The URL points to the latest release. Without the `@X.Y.Z` part, the CDN serves the newest release instead. Each
|
|
31
|
+
release is built with the newest Fast Compose release of its time, named in its npm description.
|
|
11
32
|
|
|
33
|
+
Then write Compose anywhere in the page:
|
|
34
|
+
|
|
35
|
+
```html
|
|
12
36
|
<script type="text/compose-content">
|
|
13
37
|
var count by remember { mutableStateOf<Int>(0) }
|
|
14
38
|
Button(onClick = { count++ }) { Text("Clicked $count times") }
|
|
15
39
|
</script>
|
|
16
40
|
```
|
|
17
41
|
|
|
18
|
-
- Load `compose-script.js` with a plain `<script src>`, not `type="module"`: it loads its `.wasm` files from its own URL.
|
|
19
|
-
- The URL serves the latest version. To pin one, add it after the package name, e.g. `compose-script@X.Y.Z`; each
|
|
20
|
-
version runs the Fast Compose engine of the same version.
|
|
21
|
-
|
|
22
42
|
## Script types
|
|
23
43
|
|
|
24
44
|
| Type | Shows | Size |
|
|
@@ -79,6 +99,17 @@ must be a top-level `@Composable` function without parameters; the file may decl
|
|
|
79
99
|
The composable sets the element's width and height, up to the width of its parent and the height of the window.
|
|
80
100
|
Content that fills or scrolls needs a size in the code, e.g. `Modifier.height(300.dp)`.
|
|
81
101
|
|
|
102
|
+
A `width` or `height` in the script's `style` attribute is kept, in any CSS unit, and the composable is measured
|
|
103
|
+
within it; content larger than a fixed size is cut off. The composable still sets the side that is not given.
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<script type="text/compose-content" style="width: 200px">
|
|
107
|
+
Text("Wraps within 200 px, and the composable sets the height")
|
|
108
|
+
</script>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Sizes from stylesheets or classes are not read; to size by class, put the script in an element with that class.
|
|
112
|
+
|
|
82
113
|
## compose-preview
|
|
83
114
|
|
|
84
115
|
The code is a whole Kotlin file. Every `@Composable` function with `@Preview` is shown with its name, size, background,
|