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 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>none</code> and <code>flex</code>, default to <code>flex</code></td>
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. `box-sizing` is set to `border-box` for all elements.
293
- 4. `calc` isn't supported.
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 and WASM
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.