satori 0.15.2 → 0.16.1
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 +11 -26
- package/dist/index.cjs +6 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -4
- package/dist/index.d.ts +1 -4
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/package.json +6 -8
- package/dist/index.wasm.cjs +0 -7
- package/dist/index.wasm.cjs.LEGAL.txt +0 -4
- package/dist/index.wasm.cjs.map +0 -1
- package/dist/index.wasm.js +0 -7
- package/dist/index.wasm.js.LEGAL.txt +0 -4
- package/dist/index.wasm.js.map +0 -1
- package/wasm.js +0 -4
package/README.md
CHANGED
|
@@ -118,13 +118,13 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
|
|
|
118
118
|
|
|
119
119
|
<tr>
|
|
120
120
|
<td colspan="2"><code>display</code></td>
|
|
121
|
-
<td><code>
|
|
121
|
+
<td><code>flex</code>, <code>contents</code>, <code>none</code>, default to <code>flex</code></td>
|
|
122
122
|
<td></td>
|
|
123
123
|
</tr>
|
|
124
124
|
|
|
125
125
|
<tr>
|
|
126
126
|
<td colspan="2"><code>position</code></td>
|
|
127
|
-
<td><code>relative</code> and <code>absolute</code>, default to <code>relative</code></td>
|
|
127
|
+
<td><code>relative</code>, <code>static</code> and <code>absolute</code>, default to <code>relative</code></td>
|
|
128
128
|
<td></td>
|
|
129
129
|
</tr>
|
|
130
130
|
|
|
@@ -234,6 +234,12 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
|
|
|
234
234
|
<td></td>
|
|
235
235
|
</tr>
|
|
236
236
|
|
|
237
|
+
<tr>
|
|
238
|
+
<td colspan="2"><code>boxSizing</code></td>
|
|
239
|
+
<td>Supported</td>
|
|
240
|
+
<td></td>
|
|
241
|
+
</tr>
|
|
242
|
+
|
|
237
243
|
<tr>
|
|
238
244
|
<td colspan="2"><code>boxShadow</code></td>
|
|
239
245
|
<td>Supported</td>
|
|
@@ -289,9 +295,8 @@ Note:
|
|
|
289
295
|
|
|
290
296
|
1. Three-dimensional transforms are not supported.
|
|
291
297
|
2. There is no `z-index` support in SVG. Elements that come later in the document will be painted on top.
|
|
292
|
-
3. `
|
|
293
|
-
4. `
|
|
294
|
-
5. `currentcolor` support is only available for the `color` property.
|
|
298
|
+
3. `calc` isn't supported.
|
|
299
|
+
4. `currentColor` support is only available for the `color` property.
|
|
295
300
|
|
|
296
301
|
### Language and Typography
|
|
297
302
|
|
|
@@ -389,30 +394,10 @@ await satori(
|
|
|
389
394
|
)
|
|
390
395
|
```
|
|
391
396
|
|
|
392
|
-
### Runtime
|
|
397
|
+
### Runtime Support
|
|
393
398
|
|
|
394
399
|
Satori can be used in browser, Node.js (>= 16), and Web Workers.
|
|
395
400
|
|
|
396
|
-
By default, Satori depends on asm.js for the browser runtime, and native module in Node.js. However, you can optionally load WASM instead by importing `satori/wasm` and provide the initialized WASM module instance of Yoga to Satori:
|
|
397
|
-
|
|
398
|
-
```js
|
|
399
|
-
import satori, { init } from 'satori/wasm'
|
|
400
|
-
import initYoga from 'yoga-wasm-web'
|
|
401
|
-
|
|
402
|
-
const yoga = initYoga(await fetch('/yoga.wasm').then(res => res.arrayBuffer()))
|
|
403
|
-
init(yoga)
|
|
404
|
-
|
|
405
|
-
await satori(...)
|
|
406
|
-
```
|
|
407
|
-
|
|
408
|
-
When running in the browser or in the Node.js environment, WASM files need to be hosted and fetched before initializing. asm.js can be bundled together with the lib. In this case WASM should be faster.
|
|
409
|
-
|
|
410
|
-
When running on the Node.js server, native modules should be faster. However there are Node.js environments where native modules are not supported (e.g. StackBlitz's WebContainers), or other JS runtimes that support WASM (e.g. Vercel's Edge Runtime, Cloudflare Workers, or Deno).
|
|
411
|
-
|
|
412
|
-
Additionally, there are other difference between asm.js, native and WASM, such as security and compatibility.
|
|
413
|
-
|
|
414
|
-
Overall there are many trade-offs between each choice, and it's better to pick the one that works the best for your use case.
|
|
415
|
-
|
|
416
401
|
### Font Embedding
|
|
417
402
|
|
|
418
403
|
By default, Satori renders the text as `<path>` in SVG, instead of `<text>`. That means it embeds the font path data as inlined information, so succeeding processes (e.g. render the SVG on another platform) don’t need to deal with font files anymore.
|