satori 0.0.9 → 0.0.13
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 +62 -9
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.wasm.js +2 -1
- package/dist/esm/index.wasm.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## API
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Satori translates the layout and styles of HTML & CSS based elements into an SVG image.
|
|
8
8
|
|
|
9
9
|
```jsx
|
|
10
10
|
import satori from 'satori'
|
|
@@ -23,9 +23,10 @@ satori(
|
|
|
23
23
|
},
|
|
24
24
|
...
|
|
25
25
|
],
|
|
26
|
-
embedFont: true,
|
|
27
|
-
debug: false,
|
|
28
|
-
|
|
26
|
+
embedFont: true, // Embed the font in SVG as path data. Optional, default: true.
|
|
27
|
+
debug: false, // Show the bounding box for debugging. Optional, default: false.
|
|
28
|
+
graphemeImages: {} // Custom grapheme images. Optional, default: empty.
|
|
29
|
+
},
|
|
29
30
|
)
|
|
30
31
|
```
|
|
31
32
|
|
|
@@ -35,7 +36,7 @@ Which yields:
|
|
|
35
36
|
'<svg ...><path d="..." fill="black"></path></svg>'
|
|
36
37
|
```
|
|
37
38
|
|
|
38
|
-
Text will be embedded in the SVG as
|
|
39
|
+
Text (with font data) will be embedded in the SVG as paths.
|
|
39
40
|
|
|
40
41
|
## Playground
|
|
41
42
|
|
|
@@ -49,13 +50,63 @@ Satori only accepts JSX elements that are pure and stateless. You can use a subs
|
|
|
49
50
|
elements (see section below), or custom React components, but React APIs such as `useState` and
|
|
50
51
|
`useEffect` are not supported.
|
|
51
52
|
|
|
53
|
+
#### Use without JSX
|
|
54
|
+
|
|
55
|
+
If you don't have JSX transpiler enabled, you can simply pass [React-elements-like objects](https://reactjs.org/docs/introducing-jsx.html) that have `type`, `props.children` and `props.style` (and other properties too) directly:
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
satori(
|
|
59
|
+
{
|
|
60
|
+
type: 'div',
|
|
61
|
+
props: {
|
|
62
|
+
children: 'hello, world',
|
|
63
|
+
style: { color: 'black' },
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
options
|
|
67
|
+
)
|
|
68
|
+
```
|
|
69
|
+
|
|
52
70
|
### HTML Elements
|
|
53
71
|
|
|
54
72
|
Satori supports a limited subset of HTML and CSS features, due to its special use cases. In general, only these static and visible elements and properties that are implemented.
|
|
55
73
|
|
|
56
74
|
For example, the `<input>` HTML element, the `cursor` CSS property are not in consideration. And you can't use `<style>` tags or external resources via `<link>` or `<script>`.
|
|
57
75
|
|
|
58
|
-
Also, Satori does not guarantee that the SVG will 100% match the browser-rendered HTML output since Satori implements its own
|
|
76
|
+
Also, Satori does not guarantee that the SVG will 100% match the browser-rendered HTML output since Satori implements its own layout engine based on the [SVG 1.1 spec](https://www.w3.org/TR/SVG11).
|
|
77
|
+
|
|
78
|
+
You can find the list of supported HTML elements and their preset styles [here](https://github.com/vercel/satori/blob/main/src/handler/presets.ts).
|
|
79
|
+
|
|
80
|
+
#### Images
|
|
81
|
+
|
|
82
|
+
You can use `<img>` to embed images but `src`, `width`, and `height` attributes are all required.
|
|
83
|
+
|
|
84
|
+
```jsx
|
|
85
|
+
satori(
|
|
86
|
+
<img src="https://picsum.photos/200/300" width={200} height={300} />,
|
|
87
|
+
options
|
|
88
|
+
)
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
If you want to render the generated SVG to another image format such as PNG, it would be better to use base64 encoded image data directly as `props.src` so no extra I/O is needed.
|
|
92
|
+
|
|
93
|
+
#### Emojis
|
|
94
|
+
|
|
95
|
+
To render custom images for specific graphemes, you can use `graphemeImages` option to map the grapheme to an image source:
|
|
96
|
+
|
|
97
|
+
```jsx
|
|
98
|
+
satori(
|
|
99
|
+
<div>Next.js is 🤯!</div>,
|
|
100
|
+
{
|
|
101
|
+
...,
|
|
102
|
+
graphemeImages: {
|
|
103
|
+
'🤯': 'https://twemoji.maxcdn.com/v/13.1.0/svg/1f92f.svg',
|
|
104
|
+
},
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
The image will be resized to the current font-size (both width and height), so it must be a square.
|
|
59
110
|
|
|
60
111
|
### CSS Properties
|
|
61
112
|
|
|
@@ -84,7 +135,7 @@ Also, Satori does not guarantee that the SVG will 100% match the browser-rendere
|
|
|
84
135
|
| `font-style` | Supported |
|
|
85
136
|
| `text-align` | Supported |
|
|
86
137
|
| `letter-spacing` | Supported |
|
|
87
|
-
| `box-shadow` | All supported except spread-radius (works like `drop-shadow`) |
|
|
138
|
+
| `box-shadow` | All supported except `spread-radius` and `inset` (works like `drop-shadow`) |
|
|
88
139
|
| `border-radius` | Supported |
|
|
89
140
|
| `overflow` | `visible`, `hidden` |
|
|
90
141
|
| `color` | Supported |
|
|
@@ -94,15 +145,17 @@ Also, Satori does not guarantee that the SVG will 100% match the browser-rendere
|
|
|
94
145
|
| `background-color` | Supported |
|
|
95
146
|
| `background-image` | Support `linear-gradient`, `url` |
|
|
96
147
|
| `word-break` | Supported |
|
|
148
|
+
| `text-shadow` | Supported |
|
|
149
|
+
| `text-transform` | Support `lowercase`, `uppercase`, `capitalize` |
|
|
97
150
|
| `background-clip` | TBD |
|
|
98
151
|
| `background-size` | TBD |
|
|
99
152
|
| `background-position` | TBD |
|
|
100
153
|
| `background-repeat` | TBD |
|
|
101
154
|
| `background-origin` | TBD |
|
|
102
155
|
| `text-decoration` | TBD |
|
|
103
|
-
| `text-shadow` | TBD |
|
|
104
|
-
| `text-transform` | TBD |
|
|
105
156
|
| `transform-origin` | TBD |
|
|
157
|
+
| `line-height` | TBD |
|
|
158
|
+
| `white-space` | TBD |
|
|
106
159
|
|
|
107
160
|
Note:
|
|
108
161
|
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
var H=Object.defineProperty,Lt=Object.defineProperties,It=Object.getOwnPropertyDescriptor,At=Object.getOwnPropertyDescriptors,Ft=Object.getOwnPropertyNames,lt=Object.getOwnPropertySymbols;var mt=Object.prototype.hasOwnProperty,Ct=Object.prototype.propertyIsEnumerable;var ct=(t,r,e)=>r in t?H(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,B=(t,r)=>{for(var e in r||(r={}))mt.call(r,e)&&ct(t,e,r[e]);if(lt)for(var e of lt(r))Ct.call(r,e)&&ct(t,e,r[e]);return t},pt=(t,r)=>Lt(t,At(r)),Nt=t=>H(t,"__esModule",{value:!0});var dt=(t,r)=>()=>(t&&(r=t(t=0)),r);var Ot=(t,r)=>{for(var e in r)H(t,e,{get:r[e],enumerable:!0})},kt=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Ft(r))!mt.call(t,a)&&(e||a!=="default")&&H(t,a,{get:()=>r[a],enumerable:!(i=It(r,a))||i.enumerable});return t};var vt=(t=>(r,e)=>t&&t.get(r)||(e=kt(Nt({}),r,1),t&&t.set(r,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var m=dt(()=>{});var gt={};Ot(gt,{default:()=>Gt});import{default as Gt}from"yoga-layout-prebuilt";var ht=dt(()=>{m()});m();m();m();var V;{let t=(ht(),vt(gt));t.default?V=t.default:V=t}function Wt(t){V=t}function C(){return V}m();m();function q(t){let r=typeof t;return!(r==="number"||r==="bigint"||r==="string"||r==="boolean")}function bt(t){return/^class\s/.test(Function.prototype.toString.call(t))}function D(t,r){return[t[0]*r[0]+t[2]*r[1],t[1]*r[0]+t[3]*r[1],t[0]*r[2]+t[2]*r[3],t[1]*r[2]+t[3]*r[3],t[0]*r[4]+t[2]*r[5]+t[4],t[1]*r[4]+t[3]*r[5]+t[5]]}function A(t,r,e){let i=r[t];return typeof i=="undefined"?e:i}m();m();var yt={p:{display:"block",marginTop:"1em",marginBottom:"1em"},div:{display:"block"},blockquote:{display:"block",marginTop:"1em",marginBottom:"1em",marginLeft:40,marginRight:40},center:{display:"block",textAlign:"center"},hr:{display:"block",marginTop:"0.5em",marginBottom:"0.5em",marginLeft:"auto",marginRight:"auto",borderWidth:1,borderStyle:"inset"},h1:{display:"block",fontSize:"2em",marginTop:"0.67em",marginBottom:"0.67em",marginLeft:0,marginRight:0,fontWeight:"bold"},h2:{display:"block",fontSize:"1.5em",marginTop:"0.83em",marginBottom:"0.83em",marginLeft:0,marginRight:0,fontWeight:"bold"},h3:{display:"block",fontSize:"1.17em",marginTop:"1em",marginBottom:"1em",marginLeft:0,marginRight:0,fontWeight:"bold"},h4:{display:"block",marginTop:"1.33em",marginBottom:"1.33em",marginLeft:0,marginRight:0,fontWeight:"bold"},h5:{display:"block",fontSize:"0.83em",marginTop:"1.67em",marginBottom:"1.67em",marginLeft:0,marginRight:0,fontWeight:"bold"},h6:{display:"block",fontSize:"0.67em",marginTop:"2.33em",marginBottom:"2.33em",marginLeft:0,marginRight:0,fontWeight:"bold"},u:{textDecoration:"underline"},strong:{fontWeight:"bold"},b:{fontWeight:"bold"},i:{fontStyle:"italic"},em:{fontStyle:"italic"},code:{fontFamily:"monospace"},kbd:{fontFamily:"monospace"},pre:{display:"block",fontFamily:"monospace",whiteSpace:"pre",marginTop:"1em",marginBottom:"1em"},mark:{backgroundColor:"yellow",color:"black"},big:{fontSize:"larger"},small:{fontSize:"smaller"},s:{textDecoration:"line-through"}};m();var wt=new Set(["color","font","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","textAlign","textTransform","whiteSpace","letterSpacing","transform","wordBreak","opacity"]);function Z(t){let r={};for(let e in t)wt.has(e)&&(r[e]=t[e]);return r}m();import{getPropertyName as Et,getStylesForProperty as Pt}from"css-to-react-native";import _t from"parse-css-dimension";import{parseElementStyle as Bt}from"css-background-parser";var Dt=new Set(["flex","flexGrow","flexShrink","flexBasis","fontWeight","lineHeight","opacity","scale","scaleX","scaleY"]),xt=[1,0,0,1,0,0];function Mt(t,r){return typeof r=="number"?Dt.has(t)?String(r):r+"px":r}function $t(t,r){if(typeof t=="number")return t;try{let e=new _t(t);if(e.type==="length")switch(e.unit){case"em":return e.value*r;case"rem":return e.value*16;default:return e.value}else if(e.type==="angle")switch(e.unit){case"deg":return e.value;case"rad":return e.value*180/Math.PI;default:return e.value}}catch{}}function J(t,r){let e=[];for(let o in t){let n=Et(o);e.push([n,Mt(n,t[o])])}let i=e.reduce((o,n)=>{let s=Et(n[0]),l=n[1];return Object.assign(o,Pt(s,l,!0))},{});if(i.backgroundImage){let{backgrounds:o}=Bt(i);i.backgroundImage=o}let a=i.fontSize||r.fontSize;if(typeof a=="string")try{let o=new _t(a);switch(o.unit){case"em":a=o.value*r.fontSize;break;case"rem":a=o.value*16;break}}catch{a=16}i.fontSize=a;for(let o in i){let n=i[o];if(typeof n=="string"){let s=$t(n,a);typeof s!="undefined"&&(i[o]=s),n=i[o]}if(o==="opacity"&&(n=i[o]=n*r.opacity),o==="transform"){let s=[...xt],l=n;for(let f of l){let d=Object.keys(f)[0],g=f[d],p=typeof g=="string"?$t(g,a):g,u=[...xt];switch(d){case"translateX":u[4]=p;break;case"translateY":u[5]=p;break;case"scaleX":u[0]=p;break;case"scaleY":u[3]=p;break;case"rotate":let b=p*Math.PI/180,R=Math.cos(b),T=Math.sin(b);u[0]=R,u[1]=T,u[2]=-T,u[3]=R;break;case"skewX":u[2]=Math.tan(p*Math.PI/180);break;case"skewY":u[1]=Math.tan(p*Math.PI/180);break}s=D(u,s)}i.transform=s}}return i}function Q(t,r,e,i,a){let o=C(),n=B(B(B({},e),J(yt[r],e)),J(i,e));if(r==="img"){let s=parseInt(a.width),f=parseInt(a.height)/s;n.width||(n.width=s),n.height||(n.height=f*n.width)}return t.setDisplay(A(n.display,{flex:o.DISPLAY_FLEX,none:o.DISPLAY_NONE},o.DISPLAY_FLEX)),t.setAlignContent(A(n.alignContent,{stretch:o.ALIGN_STRETCH,center:o.ALIGN_CENTER,"flex-start":o.ALIGN_FLEX_START,"flex-end":o.ALIGN_FLEX_END,"space-between":o.ALIGN_SPACE_BETWEEN,"space-around":o.ALIGN_SPACE_AROUND,baseline:o.ALIGN_BASELINE,normal:o.ALIGN_AUTO},o.ALIGN_AUTO)),t.setAlignItems(A(n.alignItems,{stretch:o.ALIGN_STRETCH,center:o.ALIGN_CENTER,"flex-start":o.ALIGN_FLEX_START,"flex-end":o.ALIGN_FLEX_END,baseline:o.ALIGN_BASELINE,normal:o.ALIGN_AUTO},o.ALIGN_FLEX_START)),t.setAlignSelf(A(n.alignSelf,{stretch:o.ALIGN_STRETCH,center:o.ALIGN_CENTER,"flex-start":o.ALIGN_FLEX_START,"flex-end":o.ALIGN_FLEX_END,baseline:o.ALIGN_BASELINE,normal:o.ALIGN_AUTO},o.ALIGN_AUTO)),t.setJustifyContent(A(n.justifyContent,{center:o.JUSTIFY_CENTER,"flex-start":o.JUSTIFY_FLEX_START,"flex-end":o.JUSTIFY_FLEX_END,"space-between":o.JUSTIFY_SPACE_BETWEEN,"space-around":o.JUSTIFY_SPACE_AROUND},o.JUSTIFY_FLEX_START)),t.setFlexDirection(A(n.flexDirection,{row:o.FLEX_DIRECTION_ROW,column:o.FLEX_DIRECTION_COLUMN,"row-reverse":o.FLEX_DIRECTION_ROW_REVERSE,"column-reverse":o.FLEX_DIRECTION_COLUMN_REVERSE},o.FLEX_DIRECTION_ROW)),t.setFlexWrap(A(n.flexWrap,{wrap:o.WRAP_WRAP,nowrap:o.WRAP_NO_WRAP,"wrap-reverse":o.WRAP_WRAP_REVERSE},o.WRAP_WRAP)),typeof n.flexBasis!="undefined"&&t.setFlexBasis(n.flexBasis),t.setFlexGrow(typeof n.flexGrow=="undefined"?0:n.flexGrow),t.setFlexShrink(typeof n.flexShrink=="undefined"?1:n.flexShrink),typeof n.maxHeight!="undefined"&&t.setMaxHeight(n.maxHeight),typeof n.maxWidth!="undefined"&&t.setMaxWidth(n.maxWidth),typeof n.minHeight!="undefined"&&t.setMinHeight(n.minHeight),typeof n.minWidth!="undefined"&&t.setMinWidth(n.minWidth),t.setOverflow(A(n.overflow,{visible:o.OVERFLOW_VISIBLE,hidden:o.OVERFLOW_HIDDEN},o.OVERFLOW_VISIBLE)),t.setMargin(o.EDGE_TOP,n.marginTop||0),t.setMargin(o.EDGE_BOTTOM,n.marginBottom||0),t.setMargin(o.EDGE_LEFT,n.marginLeft||0),t.setMargin(o.EDGE_RIGHT,n.marginRight||0),t.setBorder(o.EDGE_TOP,n.borderWidth||0),t.setBorder(o.EDGE_BOTTOM,n.borderWidth||0),t.setBorder(o.EDGE_LEFT,n.borderWidth||0),t.setBorder(o.EDGE_RIGHT,n.borderWidth||0),t.setPadding(o.EDGE_TOP,n.paddingTop||0),t.setPadding(o.EDGE_BOTTOM,n.paddingBottom||0),t.setPadding(o.EDGE_LEFT,n.paddingLeft||0),t.setPadding(o.EDGE_RIGHT,n.paddingRight||0),t.setPositionType(A(n.position,{absolute:o.POSITION_TYPE_ABSOLUTE,relative:o.POSITION_TYPE_RELATIVE},o.POSITION_TYPE_RELATIVE)),typeof n.top!="undefined"&&t.setPosition(o.EDGE_TOP,n.top),typeof n.bottom!="undefined"&&t.setPosition(o.EDGE_BOTTOM,n.bottom),typeof n.left!="undefined"&&t.setPosition(o.EDGE_LEFT,n.left),typeof n.right!="undefined"&&t.setPosition(o.EDGE_RIGHT,n.right),typeof n.height!="undefined"?t.setHeight(n.height):t.setHeightAuto(),typeof n.width!="undefined"?t.setWidth(n.width):t.setWidthAuto(),[n,Z(n)]}m();import{LineBreaker as Yt}from"css-line-break";m();m();function M({left:t,top:r,width:e,height:i},a,o){let n;if(o)n=a;else{let s=t+e/2,l=r+i/2;n=D([1,0,0,1,s,l],D(a,[1,0,0,1,-s,-l])),a.__parent&&(n=D(a.__parent,n)),a.splice(0,6,...n)}return`matrix(${n.map(s=>s.toFixed(2)).join(",")})`}function tt({content:t,left:r,top:e,width:i,height:a,isInheritingTransform:o,path:n,debug:s},l){let f="",d=1,g="";return l.transform&&(f=M({left:r,top:e,width:i,height:a},l.transform,o)),l.opacity&&(d=+l.opacity),s&&(g=`<rect x="${r}" y="${e}" width="${i}" height="${n===null?.5:a}" fill="transparent" stroke="#575eff" stroke-width="1" ${f?`transform="${f}"`:""}></rect>`),n===null?`<text x="${r}" y="${e}" width="${i}" height="${a}" fill="${l.color}" font-weight="${l.fontWeight}" font-style="${l.fontStyle}" font-size="${l.fontSize}" font-family="${l.fontFamily}" ${l.letterSpacing?`letter-spacing="${l.letterSpacing}"`:""} ${f?`transform="${f}"`:""} ${d!==1?`opacity="${d}"`:""}>${t}</text>${g}`:`<path fill="${l.color}" ${f?`transform="${f}"`:""} ${d!==1?`opacity="${d}"`:""} d="${n}"></path>${g}`}function*et(t,r){let e=C(),{parentStyle:i,parent:a,font:o,id:n,isInheritingTransform:s,debug:l,embedFont:f}=r,d=Yt(t,{lineBreak:"strict",wordBreak:A(i.wordBreak,{normal:"normal","break-all":"break-all","break-word":"break-word","keep-all":"keep-all"},"normal")}),g=[];for(let _;!(_=d.next()).done;)g.push(_.value.slice());let p=[];a.setAlignItems(e.ALIGN_BASELINE),i.textAlign==="left"?a.setJustifyContent(e.JUSTIFY_FLEX_START):i.textAlign==="center"?a.setJustifyContent(e.JUSTIFY_CENTER):i.textAlign==="right"?a.setJustifyContent(e.JUSTIFY_FLEX_END):i.textAlign==="justify"&&a.setJustifyContent(e.JUSTIFY_SPACE_BETWEEN);let u=o.getFont(i);for(let _ of g){let S=e.Node.create();a.insertChild(S,a.getChildCount());let y=o.measure(u,_,i);S.setWidth(y.width),S.setHeight(y.ascent*1.2),S.setMargin(e.EDGE_BOTTOM,y.descent*1.2),p.push(S)}let[b,R]=yield,T="";for(let _=0;_<p.length;_++){let S=p[_],y=g[_];i.position==="absolute"&&S.calculateLayout();let{left:F,top:N,width:O,height:k}=S.getComputedLayout();F+=b,N+=R;let W=null;f?W=o.getSVG(u,y,pt(B({},i),{top:N,left:F,letterSpacing:i.letterSpacing})):N+=o.getAscent(u,i),T+=tt({content:y,id:n,left:F,top:N,width:O,height:k,isInheritingTransform:s,path:W,debug:l},i)}return T}m();m();m();var rt=rt||{};rt.parse=function(){var t={linearGradient:/^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,repeatingLinearGradient:/^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,radialGradient:/^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,repeatingRadialGradient:/^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,sideOrCorner:/^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,extentKeywords:/^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,positionKeywords:/^(left|center|right|top|bottom)/i,pixelValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,percentageValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,emValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,angleValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,startCall:/^\(/,endCall:/^\)/,comma:/^,/,hexColor:/^\#([0-9a-fA-F]+)/,literalColor:/^([a-zA-Z]+)/,rgbColor:/^rgb/i,rgbaColor:/^rgba/i,number:/^(([0-9]*\.[0-9]+)|([0-9]+\.?))/},r="";function e(c){var h=new Error(r+": "+c);throw h.source=r,h}function i(){var c=a();return r.length>0&&e("Invalid input not EOF"),c}function a(){return y(o)}function o(){return n("linear-gradient",t.linearGradient,l)||n("repeating-linear-gradient",t.repeatingLinearGradient,l)||n("radial-gradient",t.radialGradient,g)||n("repeating-radial-gradient",t.repeatingRadialGradient,g)}function n(c,h,E){return s(h,function(G){var ut=E();return ut&&(v(t.comma)||e("Missing comma before color stops")),{type:c,orientation:ut,colorStops:y(F)}})}function s(c,h){var E=v(c);if(E){v(t.startCall)||e("Missing (");var G=h(E);return v(t.endCall)||e("Missing )"),G}}function l(){return f()||d()}function f(){return I("directional",t.sideOrCorner,1)}function d(){return I("angular",t.angleValue,1)}function g(){var c,h=p(),E;return h&&(c=[],c.push(h),E=r,v(t.comma)&&(h=p(),h?c.push(h):r=E)),c}function p(){var c=u()||b();if(c)c.at=T();else{var h=R();if(h){c=h;var E=T();E&&(c.at=E)}else{var G=_();G&&(c={type:"default-radial",at:G})}}return c}function u(){var c=I("shape",/^(circle)/i,0);return c&&(c.style=st()||R()),c}function b(){var c=I("shape",/^(ellipse)/i,0);return c&&(c.style=L()||R()),c}function R(){return I("extent-keyword",t.extentKeywords,1)}function T(){if(I("position",/^at/,0)){var c=_();return c||e("Missing positioning value"),c}}function _(){var c=S();if(c.x||c.y)return{type:"position",value:c}}function S(){return{x:L(),y:L()}}function y(c){var h=c(),E=[];if(h)for(E.push(h);v(t.comma);)h=c(),h?E.push(h):e("One extra comma");return E}function F(){var c=N();return c||e("Expected color definition"),c.length=L(),c}function N(){return k()||z()||W()||O()}function O(){return I("literal",t.literalColor,0)}function k(){return I("hex",t.hexColor,1)}function W(){return s(t.rgbColor,function(){return{type:"rgb",value:y(w)}})}function z(){return s(t.rgbaColor,function(){return{type:"rgba",value:y(w)}})}function w(){return v(t.number)[1]}function L(){return I("%",t.percentageValue,1)||P()||st()}function P(){return I("position-keyword",t.positionKeywords,1)}function st(){return I("px",t.pixelValue,1)||I("em",t.emValue,1)}function I(c,h,E){var G=v(h);if(G)return{type:c,value:G[E]}}function v(c){var h,E;return E=/^[\n\r\t\s]+/.exec(r),E&&ft(E[0].length),h=c.exec(r),h&&ft(h[0].length),h}function ft(c){r=r.substr(c)}return function(c){return r=c.toString(),i()}}();var St=rt;function Xt(t){return t.type==="literal"?t.value:t.type==="hex"?`#${t.value}`:t.type==="rgb"?`rgb(${t.value.join(",")})`:t.type==="rgba"?`rgba(${t.value.join(",")})`:"transparent"}function nt({id:t,width:r},{image:e}){if(e.startsWith("linear-gradient(")){let i=St.parse(e)[0],a,o,n,s;if(i.orientation.type==="directional")[a,o,n,s]={top:[0,1,0,0],bottom:[0,0,0,1],left:[1,0,0,0],right:[0,0,1,0]}[i.orientation.value];else if(i.orientation.type==="angular"){let u=+i.orientation.value/180*Math.PI-Math.PI/2,b=Math.cos(u),R=Math.sin(u);a=0,o=0,n=b,s=R,n<0&&(a-=n,n=0),s<0&&(o-=s,s=0)}let l=r,f=[];for(let u of i.colorStops){let b=Xt(u);if(!f.length&&(f.push({offset:0,color:b}),typeof u.length=="undefined"||u.length.value==="0"))continue;let R=typeof u.length=="undefined"?void 0:u.length.type==="%"?u.length.value/100:u.length.value/l;f.push({offset:R,color:b})}f.length||f.push({offset:0,color:"transparent"});let d=f[f.length-1];d.offset!==1&&(typeof d.offset=="undefined"?d.offset=1:f.push({offset:1,color:d.color}));let g=0,p=1;for(let u=0;u<f.length;u++)if(typeof f[u].offset=="undefined"){for(p<u&&(p=u);typeof f[p].offset=="undefined";)p++;f[u].offset=(f[p].offset-f[g].offset)/(p-g)*(u-g)+f[g].offset}else g=u;return[`satori_bi${t}`,`<linearGradient id="satori_bi${t}" x1="${a}" y1="${o}" x2="${n}" y2="${s}">${f.map(u=>`<stop offset="${u.offset*100}%" stop-color="${u.color}"/>`).join("")}</linearGradient>`]}if(e.startsWith("url(")){let i=e.slice(4,-1);return[`satori_bi${t}`,`<pattern id="satori_bi${t}" patternContentUnits="objectBoundingBox" width="1" height="1"><image href="${i}" x="0" y="0" width="1" height="1"/></pattern>`]}}m();function j(t,r,e){return e<t+r&&(e/2<t&&e/2<r?t=r=e/2:e/2<t?t=e-r:e/2<r&&(r=e-t)),[t,r]}function Y({left:t,top:r,width:e,height:i},a){let{borderTopLeftRadius:o,borderTopRightRadius:n,borderBottomLeftRadius:s,borderBottomRightRadius:l}=a;return o=Math.min(o||0,e,i),n=Math.min(n||0,e,i),s=Math.min(s||0,e,i),l=Math.min(l||0,e,i),!o&&!n&&!s&&!l?"":([o,n]=j(o,n,e),[o,s]=j(o,s,i),[n,l]=j(n,l,i),[s,l]=j(s,l,e),`M${t+o},${r} h${e-o-n} a${n},${n} 0 0 1 ${n},${n} v${i-n-l} a${l},${l} 0 0 1 ${-l},${l} h${l+s-e} a${s},${s} 0 0 1 ${-s},${-s} v${s+o-i} a${o},${o} 0 0 1 ${o},${-o}`)}m();function X({id:t,width:r,height:e},i){if(!i.shadowColor||!i.shadowOffset||typeof i.shadowRadius=="undefined")return"";let a=Math.min(i.shadowOffset.width-i.shadowRadius*2,0),o=Math.max(i.shadowOffset.width+i.shadowRadius*2+r,r),n=Math.min(i.shadowOffset.height-i.shadowRadius*2,0),s=Math.max(i.shadowOffset.height+i.shadowRadius*2+e,e);return`<defs><filter id="satori_s-${t}" x="${a/r*100}%" y="${n/e*100}%" width="${(o-a)/r*100}%" height="${(s-n)/e*100}%"><feDropShadow dx="${i.shadowOffset.width}" dy="${i.shadowOffset.height}" stdDeviation="${i.shadowRadius}" flood-color="${i.shadowColor}" flood-opacity="1"/></filter></defs>`}function ot({id:t,left:r,top:e,width:i,height:a,isInheritingTransform:o,debug:n},s){if(s.display==="none")return"";let l="rect",f="transparent",d=0,g="",p="",u=[],b=1,R="";if(s.backgroundColor&&u.push(s.backgroundColor),s.borderWidth&&(d=s.borderWidth,f=s.borderColor),s.opacity&&(b=+s.opacity),s.transform&&(g=M({left:r,top:e,width:i,height:a},s.transform,o)),s.backgroundImage){let S=s.backgroundImage.map((y,F)=>nt({id:t+"_"+F,width:i,height:a},y)).filter(Boolean);for(let y of S)p+=y[1],u.push(`url(#${y[0]})`)}let T=Y({left:r,top:e,width:i,height:a},s);T&&(l="path");let _=X({width:i,height:a,id:t},s);return u.length||u.push("transparent"),n&&(R=`<rect x="${r}" y="${e}" width="${i}" height="${a}" fill="transparent" stroke="#ff5757" stroke-width="1" ${g?`transform="${g}"`:""}></rect>`),`${p?`<defs>${p}</defs>`:""}${_?`${_}<g filter="url(#satori_s-${t})">`:""}${b!==1?`<g opacity="${b}">`:""}${u.map((S,y)=>S==="transparent"&&!(y===u.length-1&&d)?"":`<${l} x="${r}" y="${e}" width="${i}" height="${a}" fill="${S}" ${y===u.length-1&&d?`stroke="${f}" stroke-width="${d}"`:""} ${T?`d="${T}"`:""} ${g?`transform="${g}"`:""}></${l}>`).join("")}${b!==1?"</g>":""}${_?"</g>":""}${R}`}m();function it({id:t,left:r,top:e,width:i,height:a,src:o,debug:n},s){if(s.display==="none")return"";let l="",f=1,d=s.objectFit==="contain"?"xMidYMid":s.objectFit==="cover"?"xMidYMid slice":"none",g=Y({left:r,top:e,width:i,height:a},s);g&&(l=`<clipPath id="satori_c-${t}"><path x="${r}" y="${e}" width="${i}" height="${a}" d="${g}"></path></clipPath>`),s.opacity&&(f=+s.opacity);let p=X({width:i,height:a,id:t},s);return`${p}${p?`<g filter="url(#satori_s-${t})">`:""}${l}<image href="${o}" x="${r}" y="${e}" width="${i}" height="${a}" preserveAspectRatio="${d}" ${l?`clip-path="url(#satori_c-${t})"`:""} ${f!==1?`opacity="${f}"`:""}></image>${p?"</g>":""}`}function*U(t,r){let e=C(),{id:i,inheritedStyle:a,parent:o,font:n,debug:s,embedFont:l=!0}=r;if(t===null||typeof t=="undefined")return yield,"";if(!q(t)||typeof t.type=="function"){let L;if(!q(t))L=et(String(t),r);else{if(bt(t.type))throw new Error("Class component is not supported.");L=U(t.type(t.props),r)}L.next();let P=yield;return L.next(P).value}let{type:f,props:d}=t,{style:g,children:p}=d,u=e.Node.create();o.insertChild(u,o.getChildCount());let[b,R]=Q(u,f,a,g,d),T=b.transform===a.transform;T||(b.transform.__parent=a.transform);let _=typeof p=="undefined"?[]:[].concat(p),S=[],y=0;for(let L of _){let P=U(L,{id:i*_.length+ ++y,parentStyle:b,inheritedStyle:R,isInheritingTransform:!0,parent:u,font:n,embedFont:l,debug:s});P.next(),S.push(P)}let[F,N]=yield;b.position==="absolute"&&u.calculateLayout();let{left:O,top:k,width:W,height:z}=u.getComputedLayout();O+=F,k+=N;let w="";f==="img"?w=it({id:i,left:O,top:k,width:W,height:z,src:d.src,isInheritingTransform:T,debug:s},b):w=ot({id:i,left:O,top:k,width:W,height:z,isInheritingTransform:T,debug:s},b);for(let L of S)w+=L.next([O,k]).value;return w}m();import Rt from"opentype.js";var K=class{constructor(r){this.fonts=new Map;for(let e of r){let i=e.data,a="buffer"in i?Rt.parse(i.buffer.slice(i.byteOffset,i.byteOffset+i.byteLength)):Rt.parse(i);this.defaultFont||(this.defaultFont=a),this.fonts.has(e.name)||this.fonts.set(e.name,[]),this.fonts.get(e.name).push([a,e.weight,e.style])}}get({name:r,weight:e,style:i}){if(!this.fonts.has(r))return this.defaultFont;e==="normal"&&(e=400),e==="bold"&&(e=700);let a=[...this.fonts.get(r)];return a.sort(([o,n,s],[l,f,d])=>{if(n!==f)return n?!f||n===e?-1:f===e?1:e===400&&n===500||e===500&&n===400?-1:e===400&&f===500||e===500&&f===400?1:e<400?n<e&&f<e?f-n:n<e?-1:f<e?1:n-f:e<n&&e<f?n-f:e<n?-1:e<f?1:f-n:1;if(s!==d){if(s===i)return-1;if(d===i)return 1}return-1}),a[0][0]}getFont({fontFamily:r,fontWeight:e=400,fontStyle:i="normal"}){return this.get({name:r,weight:e,style:i})}measure(r,e,{fontSize:i,letterSpacing:a=0}){return{width:r.getAdvanceWidth(e,i,{letterSpacing:a/i}),ascent:r.ascender/r.unitsPerEm*i,descent:-(r.descender/r.unitsPerEm)*i}}getSVG(r,e,{fontSize:i,top:a,left:o,letterSpacing:n=0}){return a+=r.ascender/r.unitsPerEm*i,r.getPath(e,o,a,i,{letterSpacing:n/i}).toPathData(2)}getAscent(r,{fontSize:e}){return r.ascender/r.unitsPerEm*e}};m();function at({width:t,height:r,content:e},i){return`<svg width="${t}" height="${r}" viewBox="0 0 ${t} ${r}" xmlns="http://www.w3.org/2000/svg">${e}</svg>`}function Tt(t,r){let e=C();if(!e)throw new Error("Satori is not initialized.");let i=new K(r.fonts),a=e.Node.create();a.setWidth(r.width),a.setHeight(r.height),a.setFlexDirection(e.FLEX_DIRECTION_ROW),a.setFlexWrap(e.WRAP_WRAP),a.setAlignContent(e.ALIGN_AUTO),a.setAlignItems(e.ALIGN_FLEX_START),a.setJustifyContent(e.JUSTIFY_FLEX_START);let o=U(t,{id:1,parentStyle:{},inheritedStyle:{fontSize:16,fontWeight:"normal",fontFamily:"serif",fontStyle:"normal",lineHeight:1.2,color:"black",opacity:1},parent:a,font:i,embedFont:r.embedFont,debug:r.debug});o.next(),a.calculateLayout(r.width,r.height,e.DIRECTION_LTR);let n=o.next([0,0]).value;return at({width:r.width,height:r.height,content:n})}export{Tt as default,Wt as init};
|
|
1
|
+
var nt=Object.defineProperty,Pt=Object.defineProperties,Bt=Object.getOwnPropertyDescriptor,Mt=Object.getOwnPropertyDescriptors,Dt=Object.getOwnPropertyNames,Et=Object.getOwnPropertySymbols;var _t=Object.prototype.hasOwnProperty,Yt=Object.prototype.propertyIsEnumerable;var St=(t,r,e)=>r in t?nt(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,K=(t,r)=>{for(var e in r||(r={}))_t.call(r,e)&&St(t,e,r[e]);if(Et)for(var e of Et(r))Yt.call(r,e)&&St(t,e,r[e]);return t},Tt=(t,r)=>Pt(t,Mt(r)),zt=t=>nt(t,"__esModule",{value:!0});var Rt=(t,r)=>()=>(t&&(r=t(t=0)),r);var Ut=(t,r)=>{for(var e in r)nt(t,e,{get:r[e],enumerable:!0})},Xt=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Dt(r))!_t.call(t,a)&&(e||a!=="default")&&nt(t,a,{get:()=>r[a],enumerable:!(i=Bt(r,a))||i.enumerable});return t};var Ht=(t=>(r,e)=>t&&t.get(r)||(e=Xt(zt({}),r,1),t&&t.set(r,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var m=Rt(()=>{});var It={};Ut(It,{default:()=>Jt});import*as Vt from"yoga-layout-prebuilt";var Jt,Lt=Rt(()=>{m();Jt=Vt});m();m();m();var ot;{let t=(Lt(),Ht(It));t.default?ot=t.default:ot=t}function jt(t){ot=t}function B(){return ot}m();m();function ft(t){let r=typeof t;return!(r==="number"||r==="bigint"||r==="string"||r==="boolean")}function wt(t){return/^class\s/.test(Function.prototype.toString.call(t))}function q(t,r){return[t[0]*r[0]+t[2]*r[1],t[1]*r[0]+t[3]*r[1],t[0]*r[2]+t[2]*r[3],t[1]*r[2]+t[3]*r[3],t[0]*r[4]+t[2]*r[5]+t[4],t[1]*r[4]+t[3]*r[5]+t[5]]}function O(t,r,e){let i=r[t];return typeof i=="undefined"?e:i}m();m();var At={p:{display:"block",marginTop:"1em",marginBottom:"1em"},div:{display:"block"},blockquote:{display:"block",marginTop:"1em",marginBottom:"1em",marginLeft:40,marginRight:40},center:{display:"block",textAlign:"center"},hr:{display:"block",marginTop:"0.5em",marginBottom:"0.5em",marginLeft:"auto",marginRight:"auto",borderWidth:1,borderStyle:"inset"},h1:{display:"block",fontSize:"2em",marginTop:"0.67em",marginBottom:"0.67em",marginLeft:0,marginRight:0,fontWeight:"bold"},h2:{display:"block",fontSize:"1.5em",marginTop:"0.83em",marginBottom:"0.83em",marginLeft:0,marginRight:0,fontWeight:"bold"},h3:{display:"block",fontSize:"1.17em",marginTop:"1em",marginBottom:"1em",marginLeft:0,marginRight:0,fontWeight:"bold"},h4:{display:"block",marginTop:"1.33em",marginBottom:"1.33em",marginLeft:0,marginRight:0,fontWeight:"bold"},h5:{display:"block",fontSize:"0.83em",marginTop:"1.67em",marginBottom:"1.67em",marginLeft:0,marginRight:0,fontWeight:"bold"},h6:{display:"block",fontSize:"0.67em",marginTop:"2.33em",marginBottom:"2.33em",marginLeft:0,marginRight:0,fontWeight:"bold"},u:{textDecoration:"underline"},strong:{fontWeight:"bold"},b:{fontWeight:"bold"},i:{fontStyle:"italic"},em:{fontStyle:"italic"},code:{fontFamily:"monospace"},kbd:{fontFamily:"monospace"},pre:{display:"block",fontFamily:"monospace",whiteSpace:"pre",marginTop:"1em",marginBottom:"1em"},mark:{backgroundColor:"yellow",color:"black"},big:{fontSize:"larger"},small:{fontSize:"smaller"},s:{textDecoration:"line-through"}};m();var Kt=new Set(["color","font","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","textAlign","textTransform","whiteSpace","letterSpacing","transform","wordBreak","textShadowOffset","textShadowColor","textShadowRadius","opacity"]);function lt(t){let r={};for(let e in t)Kt.has(e)&&(r[e]=t[e]);return r}m();import{getPropertyName as Ct,getStylesForProperty as qt}from"css-to-react-native";import Nt from"parse-css-dimension";import{parseElementStyle as Zt}from"css-background-parser";var Qt=new Set(["flex","flexGrow","flexShrink","flexBasis","fontWeight","lineHeight","opacity","scale","scaleX","scaleY"]),Ft=[1,0,0,1,0,0];function te(t,r){return typeof r=="number"?Qt.has(t)?String(r):r+"px":r}function Ot(t,r){if(typeof t=="number")return t;try{let e=new Nt(t);if(e.type==="length")switch(e.unit){case"em":return e.value*r;case"rem":return e.value*16;default:return e.value}else if(e.type==="angle")switch(e.unit){case"deg":return e.value;case"rad":return e.value*180/Math.PI;default:return e.value}}catch{}}function it(t,r){let e=[];for(let o in t){let n=Ct(o);e.push([n,te(n,t[o])])}let i=e.reduce((o,n)=>{let s=Ct(n[0]),c=n[1];return Object.assign(o,qt(s,c,!0))},{});if(i.backgroundImage){let{backgrounds:o}=Zt(i);i.backgroundImage=o}let a=i.fontSize||r.fontSize;if(typeof a=="string")try{let o=new Nt(a);switch(o.unit){case"em":a=o.value*r.fontSize;break;case"rem":a=o.value*16;break}}catch{a=16}typeof i.fontSize!="undefined"&&(i.fontSize=a);for(let o in i){let n=i[o];if(typeof n=="string"){let s=Ot(n,a);typeof s!="undefined"&&(i[o]=s),n=i[o]}if(o==="opacity"&&(n=i[o]=n*r.opacity),o==="transform"){let s=[...Ft],c=n;for(let u of c){let y=Object.keys(u)[0],d=u[y],p=typeof d=="string"?Ot(d,a):d,f=[...Ft];switch(y){case"translateX":f[4]=p;break;case"translateY":f[5]=p;break;case"scaleX":f[0]=p;break;case"scaleY":f[3]=p;break;case"rotate":let g=p*Math.PI/180,$=Math.cos(g),L=Math.sin(g);f[0]=$,f[1]=L,f[2]=-L,f[3]=$;break;case"skewX":f[2]=Math.tan(p*Math.PI/180);break;case"skewY":f[1]=Math.tan(p*Math.PI/180);break}s=q(f,s)}i.transform=s}}return i}function ut(t,r,e,i,a){let o=B(),n=K(K(K({},e),it(At[r],e)),it(i,e));if(r==="img"){let s=parseInt(a.width),u=parseInt(a.height)/s;n.width||(n.width=s),n.height||(n.height=u*n.width)}return t.setDisplay(O(n.display,{flex:o.DISPLAY_FLEX,none:o.DISPLAY_NONE},o.DISPLAY_FLEX)),t.setAlignContent(O(n.alignContent,{stretch:o.ALIGN_STRETCH,center:o.ALIGN_CENTER,"flex-start":o.ALIGN_FLEX_START,"flex-end":o.ALIGN_FLEX_END,"space-between":o.ALIGN_SPACE_BETWEEN,"space-around":o.ALIGN_SPACE_AROUND,baseline:o.ALIGN_BASELINE,normal:o.ALIGN_AUTO},o.ALIGN_AUTO)),t.setAlignItems(O(n.alignItems,{stretch:o.ALIGN_STRETCH,center:o.ALIGN_CENTER,"flex-start":o.ALIGN_FLEX_START,"flex-end":o.ALIGN_FLEX_END,baseline:o.ALIGN_BASELINE,normal:o.ALIGN_AUTO},o.ALIGN_FLEX_START)),t.setAlignSelf(O(n.alignSelf,{stretch:o.ALIGN_STRETCH,center:o.ALIGN_CENTER,"flex-start":o.ALIGN_FLEX_START,"flex-end":o.ALIGN_FLEX_END,baseline:o.ALIGN_BASELINE,normal:o.ALIGN_AUTO},o.ALIGN_AUTO)),t.setJustifyContent(O(n.justifyContent,{center:o.JUSTIFY_CENTER,"flex-start":o.JUSTIFY_FLEX_START,"flex-end":o.JUSTIFY_FLEX_END,"space-between":o.JUSTIFY_SPACE_BETWEEN,"space-around":o.JUSTIFY_SPACE_AROUND},o.JUSTIFY_FLEX_START)),t.setFlexDirection(O(n.flexDirection,{row:o.FLEX_DIRECTION_ROW,column:o.FLEX_DIRECTION_COLUMN,"row-reverse":o.FLEX_DIRECTION_ROW_REVERSE,"column-reverse":o.FLEX_DIRECTION_COLUMN_REVERSE},o.FLEX_DIRECTION_ROW)),t.setFlexWrap(O(n.flexWrap,{wrap:o.WRAP_WRAP,nowrap:o.WRAP_NO_WRAP,"wrap-reverse":o.WRAP_WRAP_REVERSE},o.WRAP_WRAP)),typeof n.flexBasis!="undefined"&&t.setFlexBasis(n.flexBasis),t.setFlexGrow(typeof n.flexGrow=="undefined"?0:n.flexGrow),t.setFlexShrink(typeof n.flexShrink=="undefined"?1:n.flexShrink),typeof n.maxHeight!="undefined"&&t.setMaxHeight(n.maxHeight),typeof n.maxWidth!="undefined"&&t.setMaxWidth(n.maxWidth),typeof n.minHeight!="undefined"&&t.setMinHeight(n.minHeight),typeof n.minWidth!="undefined"&&t.setMinWidth(n.minWidth),t.setOverflow(O(n.overflow,{visible:o.OVERFLOW_VISIBLE,hidden:o.OVERFLOW_HIDDEN},o.OVERFLOW_VISIBLE)),t.setMargin(o.EDGE_TOP,n.marginTop||0),t.setMargin(o.EDGE_BOTTOM,n.marginBottom||0),t.setMargin(o.EDGE_LEFT,n.marginLeft||0),t.setMargin(o.EDGE_RIGHT,n.marginRight||0),t.setBorder(o.EDGE_TOP,n.borderWidth||0),t.setBorder(o.EDGE_BOTTOM,n.borderWidth||0),t.setBorder(o.EDGE_LEFT,n.borderWidth||0),t.setBorder(o.EDGE_RIGHT,n.borderWidth||0),t.setPadding(o.EDGE_TOP,n.paddingTop||0),t.setPadding(o.EDGE_BOTTOM,n.paddingBottom||0),t.setPadding(o.EDGE_LEFT,n.paddingLeft||0),t.setPadding(o.EDGE_RIGHT,n.paddingRight||0),t.setPositionType(O(n.position,{absolute:o.POSITION_TYPE_ABSOLUTE,relative:o.POSITION_TYPE_RELATIVE},o.POSITION_TYPE_RELATIVE)),typeof n.top!="undefined"&&t.setPosition(o.EDGE_TOP,n.top),typeof n.bottom!="undefined"&&t.setPosition(o.EDGE_BOTTOM,n.bottom),typeof n.left!="undefined"&&t.setPosition(o.EDGE_LEFT,n.left),typeof n.right!="undefined"&&t.setPosition(o.EDGE_RIGHT,n.right),typeof n.height!="undefined"?t.setHeight(n.height):t.setHeightAuto(),typeof n.width!="undefined"?t.setWidth(n.width):t.setWidthAuto(),[n,lt(n)]}m();import{LineBreaker as ee}from"css-line-break";import{splitGraphemes as re}from"text-segmentation";m();m();function Q({left:t,top:r,width:e,height:i},a,o){let n;if(o)n=a;else{let s=t+e/2,c=r+i/2;n=q([1,0,0,1,s,c],q(a,[1,0,0,1,-s,-c])),a.__parent&&(n=q(a.__parent,n)),a.splice(0,6,...n)}return`matrix(${n.map(s=>s.toFixed(2)).join(",")})`}function ct({id:t,content:r,filter:e,left:i,top:a,width:o,height:n,isInheritingTransform:s,path:c,image:u,debug:y},d){let p="",f=1,g="";return d.transform&&(p=Q({left:i,top:a,width:o,height:n},d.transform,s)),d.opacity&&(f=+d.opacity),y&&(g=`<rect x="${i}" y="${a}" width="${o}" height="${c===null?.5:n}" fill="transparent" stroke="#575eff" stroke-width="1" ${p?`transform="${p}"`:""}></rect>`),u?`${e?`${e}<g filter="url(#satori_s-${t})">`:""}<image href="${u}" x="${i}" y="${a}" width="${o}" height="${n}" ${p?`transform="${p}"`:""} ${f!==1?`opacity="${f}"`:""}></image>${e?"</g>":""}${g}`:c===null?`${e?`${e}<g filter="url(#satori_s-${t})">`:""}<text x="${i}" y="${a}" width="${o}" height="${n}" fill="${d.color}" font-weight="${d.fontWeight}" font-style="${d.fontStyle}" font-size="${d.fontSize}" font-family="${d.fontFamily}" ${d.letterSpacing?`letter-spacing="${d.letterSpacing}"`:""} ${p?`transform="${p}"`:""} ${f!==1?`opacity="${f}"`:""}>${r}</text>${e?"</g>":""}${g}`:`${e?`${e}<g filter="url(#satori_s-${t})">`:""}<path fill="${d.color}" ${p?`transform="${p}"`:""} ${f!==1?`opacity="${f}"`:""} d="${c}"></path>${e?"</g>":""}${g}`}m();function J({id:t,width:r,height:e},i){if(!i.shadowColor||!i.shadowOffset||typeof i.shadowRadius=="undefined")return"";let a=i.shadowRadius*i.shadowRadius/4,o=Math.min(i.shadowOffset.width-a,0),n=Math.max(i.shadowOffset.width+a+r,r),s=Math.min(i.shadowOffset.height-a,0),c=Math.max(i.shadowOffset.height+a+e,e);return`<defs><filter id="satori_s-${t}" x="${o/r*100}%" y="${s/e*100}%" width="${(n-o)/r*100}%" height="${(c-s)/e*100}%"><feDropShadow dx="${i.shadowOffset.width}" dy="${i.shadowOffset.height}" stdDeviation="${i.shadowRadius/2}" flood-color="${i.shadowColor}" flood-opacity="1"/></filter></defs>`}var tt="en",pt=typeof Intl!="undefined"&&"Segmenter"in Intl,ne=pt?new Intl.Segmenter(tt,{granularity:"word"}):null,oe=pt?new Intl.Segmenter(tt,{granularity:"grapheme"}):null,ie=[32,160,4961,65792,65793,4153,4241],ae=t=>{let r=ee(t,{lineBreak:"strict",wordBreak:"normal"}),e=[],i;for(;!(i=r.next()).done;)if(i.value){let a=i.value.slice(),o=[].map.call(a,s=>s.codePointAt(0)),n="";o.forEach(s=>{ie.includes(s)?(n.length&&e.push(n),e.push(String.fromCodePoint(s)),n=""):n+=String.fromCodePoint(s)}),n.length&&e.push(n)}return e};function mt(t,r){return pt?r==="word"?[...ne.segment(t)].map(e=>e.segment):[...oe.segment(t)].map(e=>e.segment):r==="word"?ae(t):re(t)}function*dt(t,r){let e=B(),{parentStyle:i,parent:a,font:o,id:n,isInheritingTransform:s,debug:c,embedFont:u,graphemeImages:y}=r;i.textTransform==="uppercase"?t=t.toLocaleUpperCase(tt):i.textTransform==="lowercase"?t=t.toLocaleLowerCase(tt):i.textTransform==="capitalize"&&(t=mt(t,"word").map(x=>mt(x,"grapheme").map((W,l)=>l===0?W.toLocaleUpperCase(tt):W).join("")).join(""));let d=O(i.wordBreak,{normal:"word","break-all":"grapheme","break-word":"grapheme","keep-all":"word"},"word"),p=mt(t,d),f=e.Node.create();f.setAlignItems(e.ALIGN_BASELINE),i.textAlign==="left"?f.setJustifyContent(e.JUSTIFY_FLEX_START):i.textAlign==="center"?f.setJustifyContent(e.JUSTIFY_CENTER):i.textAlign==="right"?f.setJustifyContent(e.JUSTIFY_FLEX_END):i.textAlign==="justify"&&f.setJustifyContent(e.JUSTIFY_SPACE_BETWEEN),a.insertChild(f,a.getChildCount());let g=o.getFont(i),$=g.ascender/g.unitsPerEm*i.fontSize,L=-(g.descender/g.unitsPerEm)*i.fontSize,w=($+L)*1.2,{textAlign:E}=i,v=[],P=[],A=[];f.setMeasureFunc((x,W,l,h)=>{let b=[],S="",C=0,H="",I=0,V=0,j=-1;v=[],P=[0];for(let Y=0;Y<p.length;Y++){let z=p[Y];if([" ",`
|
|
2
|
+
`," ","\u3000"].includes(z))S+=z,C=o.measure(g,S,i),A[Y]=null;else{let Z=y&&y[z]?i.fontSize:o.measure(g,z,i);I||(S="",C=0);let Gt=C||",.!?:-@)>]}%#".indexOf(z[0])<0,$t=!I||!!C;Gt&&I+C+Z>x?(v.push(I),b.push(H),H=z,I=Z,P.push(1),j=-1):(H+=S+z,I+=C+Z,$t&&P[P.length-1]++),S="",C=0,$t&&j++,V=Math.max(V,I),A[Y]={y:b.length*w,x:I-Z,width:Z,line:b.length,lineIndex:j}}}return I&&(b.push(H),v.push(I)),b.length>1&&(V=x),{width:V,height:b.length*w}});let[M,D]=yield,U="";i.position==="absolute"&&f.calculateLayout();let{left:X,top:k,width:F}=f.getComputedLayout(),G=M+X,R=D+k;for(let x=0;x<p.length;x++){if(!A[x])continue;let W=p[x],l=null,h=null,b=A[x].y,S=A[x].x,C=A[x].width,H=w,I=F-v[A[x].line];if(E==="right"||E==="end")S+=I;else if(E==="center")S+=I/2;else if(E==="justify"){let j=A[x].line;if(j<v.length-1){let Y=P[j];S+=(Y>1?I/(Y-1):0)*A[x].lineIndex}}y&&y[W]?h=y[W]:u?l=o.getSVG(g,W,Tt(K({},i),{left:G+S,top:R+b,letterSpacing:i.letterSpacing})):b+=$;let V="";i.textShadowOffset&&(V=J({width:C,height:H,id:n},{shadowColor:i.textShadowColor,shadowOffset:i.textShadowOffset,shadowRadius:i.textShadowRadius})),U+=ct({content:W,filter:V,id:n,left:G+S,top:R+b,width:C,height:H,isInheritingTransform:s,path:l,image:h,debug:c},i)}return U}m();m();m();var gt=gt||{};gt.parse=function(){var t={linearGradient:/^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,repeatingLinearGradient:/^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,radialGradient:/^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,repeatingRadialGradient:/^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,sideOrCorner:/^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,extentKeywords:/^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,positionKeywords:/^(left|center|right|top|bottom)/i,pixelValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,percentageValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,emValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,angleValue:/^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,startCall:/^\(/,endCall:/^\)/,comma:/^,/,hexColor:/^\#([0-9a-fA-F]+)/,literalColor:/^([a-zA-Z]+)/,rgbColor:/^rgb/i,rgbaColor:/^rgba/i,number:/^(([0-9]*\.[0-9]+)|([0-9]+\.?))/},r="";function e(l){var h=new Error(r+": "+l);throw h.source=r,h}function i(){var l=a();return r.length>0&&e("Invalid input not EOF"),l}function a(){return E(o)}function o(){return n("linear-gradient",t.linearGradient,c)||n("repeating-linear-gradient",t.repeatingLinearGradient,c)||n("radial-gradient",t.radialGradient,d)||n("repeating-radial-gradient",t.repeatingRadialGradient,d)}function n(l,h,b){return s(h,function(S){var C=b();return C&&(x(t.comma)||e("Missing comma before color stops")),{type:l,orientation:C,colorStops:E(v)}})}function s(l,h){var b=x(l);if(b){x(t.startCall)||e("Missing (");var S=h(b);return x(t.endCall)||e("Missing )"),S}}function c(){return u()||y()}function u(){return R("directional",t.sideOrCorner,1)}function y(){return R("angular",t.angleValue,1)}function d(){var l,h=p(),b;return h&&(l=[],l.push(h),b=r,x(t.comma)&&(h=p(),h?l.push(h):r=b)),l}function p(){var l=f()||g();if(l)l.at=L();else{var h=$();if(h){l=h;var b=L();b&&(l.at=b)}else{var S=N();S&&(l={type:"default-radial",at:S})}}return l}function f(){var l=R("shape",/^(circle)/i,0);return l&&(l.style=G()||$()),l}function g(){var l=R("shape",/^(ellipse)/i,0);return l&&(l.style=k()||$()),l}function $(){return R("extent-keyword",t.extentKeywords,1)}function L(){if(R("position",/^at/,0)){var l=N();return l||e("Missing positioning value"),l}}function N(){var l=w();if(l.x||l.y)return{type:"position",value:l}}function w(){return{x:k(),y:k()}}function E(l){var h=l(),b=[];if(h)for(b.push(h);x(t.comma);)h=l(),h?b.push(h):e("One extra comma");return b}function v(){var l=P();return l||e("Expected color definition"),l.length=k(),l}function P(){return M()||U()||D()||A()}function A(){return R("literal",t.literalColor,0)}function M(){return R("hex",t.hexColor,1)}function D(){return s(t.rgbColor,function(){return{type:"rgb",value:E(X)}})}function U(){return s(t.rgbaColor,function(){return{type:"rgba",value:E(X)}})}function X(){return x(t.number)[1]}function k(){return R("%",t.percentageValue,1)||F()||G()}function F(){return R("position-keyword",t.positionKeywords,1)}function G(){return R("px",t.pixelValue,1)||R("em",t.emValue,1)}function R(l,h,b){var S=x(h);if(S)return{type:l,value:S[b]}}function x(l){var h,b;return b=/^[\n\r\t\s]+/.exec(r),b&&W(b[0].length),h=l.exec(r),h&&W(h[0].length),h}function W(l){r=r.substr(l)}return function(l){return r=l.toString(),i()}}();var vt=gt;function se(t){return t.type==="literal"?t.value:t.type==="hex"?`#${t.value}`:t.type==="rgb"?`rgb(${t.value.join(",")})`:t.type==="rgba"?`rgba(${t.value.join(",")})`:"transparent"}function ht({id:t,width:r},{image:e}){if(e.startsWith("linear-gradient(")){let i=vt.parse(e)[0],a,o,n,s;if(i.orientation.type==="directional")[a,o,n,s]={top:[0,1,0,0],bottom:[0,0,0,1],left:[1,0,0,0],right:[0,0,1,0]}[i.orientation.value];else if(i.orientation.type==="angular"){let f=+i.orientation.value/180*Math.PI-Math.PI/2,g=Math.cos(f),$=Math.sin(f);a=0,o=0,n=g,s=$,n<0&&(a-=n,n=0),s<0&&(o-=s,s=0)}let c=r,u=[];for(let f of i.colorStops){let g=se(f);if(!u.length&&(u.push({offset:0,color:g}),typeof f.length=="undefined"||f.length.value==="0"))continue;let $=typeof f.length=="undefined"?void 0:f.length.type==="%"?f.length.value/100:f.length.value/c;u.push({offset:$,color:g})}u.length||u.push({offset:0,color:"transparent"});let y=u[u.length-1];y.offset!==1&&(typeof y.offset=="undefined"?y.offset=1:u.push({offset:1,color:y.color}));let d=0,p=1;for(let f=0;f<u.length;f++)if(typeof u[f].offset=="undefined"){for(p<f&&(p=f);typeof u[p].offset=="undefined";)p++;u[f].offset=(u[p].offset-u[d].offset)/(p-d)*(f-d)+u[d].offset}else d=f;return[`satori_bi${t}`,`<linearGradient id="satori_bi${t}" x1="${a}" y1="${o}" x2="${n}" y2="${s}">${u.map(f=>`<stop offset="${f.offset*100}%" stop-color="${f.color}"/>`).join("")}</linearGradient>`]}if(e.startsWith("url(")){let i=e.slice(4,-1);return[`satori_bi${t}`,`<pattern id="satori_bi${t}" patternContentUnits="objectBoundingBox" width="1" height="1"><image href="${i}" x="0" y="0" width="1" height="1"/></pattern>`]}}m();function at(t,r,e){return e<t+r&&(e/2<t&&e/2<r?t=r=e/2:e/2<t?t=e-r:e/2<r&&(r=e-t)),[t,r]}function et({left:t,top:r,width:e,height:i},a){let{borderTopLeftRadius:o,borderTopRightRadius:n,borderBottomLeftRadius:s,borderBottomRightRadius:c}=a;return o=Math.min(o||0,e,i),n=Math.min(n||0,e,i),s=Math.min(s||0,e,i),c=Math.min(c||0,e,i),!o&&!n&&!s&&!c?"":([o,n]=at(o,n,e),[o,s]=at(o,s,i),[n,c]=at(n,c,i),[s,c]=at(s,c,e),`M${t+o},${r} h${e-o-n} a${n},${n} 0 0 1 ${n},${n} v${i-n-c} a${c},${c} 0 0 1 ${-c},${c} h${c+s-e} a${s},${s} 0 0 1 ${-s},${-s} v${s+o-i} a${o},${o} 0 0 1 ${o},${-o}`)}function bt({id:t,left:r,top:e,width:i,height:a,isInheritingTransform:o,debug:n},s){if(s.display==="none")return"";let c="rect",u="transparent",y=0,d="",p="",f=[],g=1,$="";if(s.backgroundColor&&f.push(s.backgroundColor),s.borderWidth&&(y=s.borderWidth,u=s.borderColor),s.opacity&&(g=+s.opacity),s.transform&&(d=Q({left:r,top:e,width:i,height:a},s.transform,o)),s.backgroundImage){let w=s.backgroundImage.map((E,v)=>ht({id:t+"_"+v,width:i,height:a},E)).filter(Boolean);for(let E of w)p+=E[1],f.push(`url(#${E[0]})`)}let L=et({left:r,top:e,width:i,height:a},s);L&&(c="path");let N=J({width:i,height:a,id:t},s);return f.length||f.push("transparent"),n&&($=`<rect x="${r}" y="${e}" width="${i}" height="${a}" fill="transparent" stroke="#ff5757" stroke-width="1" ${d?`transform="${d}"`:""}></rect>`),`${p?`<defs>${p}</defs>`:""}${N?`${N}<g filter="url(#satori_s-${t})">`:""}${g!==1?`<g opacity="${g}">`:""}${f.map((w,E)=>w==="transparent"&&!(E===f.length-1&&y)?"":`<${c} x="${r}" y="${e}" width="${i}" height="${a}" fill="${w}" ${E===f.length-1&&y?`stroke="${u}" stroke-width="${y}"`:""} ${L?`d="${L}"`:""} ${d?`transform="${d}"`:""}></${c}>`).join("")}${g!==1?"</g>":""}${N?"</g>":""}${$}`}m();function yt({id:t,left:r,top:e,width:i,height:a,src:o,debug:n},s){if(s.display==="none")return"";let c="",u=1,y=s.objectFit==="contain"?"xMidYMid":s.objectFit==="cover"?"xMidYMid slice":"none",d=et({left:r,top:e,width:i,height:a},s);d&&(c=`<clipPath id="satori_c-${t}"><path x="${r}" y="${e}" width="${i}" height="${a}" d="${d}"></path></clipPath>`),s.opacity&&(u=+s.opacity);let p=J({width:i,height:a,id:t},s);return`${p}${p?`<g filter="url(#satori_s-${t})">`:""}${c}<image href="${o}" x="${r}" y="${e}" width="${i}" height="${a}" preserveAspectRatio="${y}" ${c?`clip-path="url(#satori_c-${t})"`:""} ${u!==1?`opacity="${u}"`:""}></image>${p?"</g>":""}`}function*rt(t,r){let e=B(),{id:i,inheritedStyle:a,parent:o,font:n,debug:s,embedFont:c=!0,graphemeImages:u}=r;if(t===null||typeof t=="undefined")return yield,"";if(!ft(t)||typeof t.type=="function"){let F;if(!ft(t))F=dt(String(t),r);else{if(wt(t.type))throw new Error("Class component is not supported.");F=rt(t.type(t.props),r)}F.next();let G=yield;return F.next(G).value}let{type:y,props:d}=t,{style:p,children:f}=d,g=e.Node.create();o.insertChild(g,o.getChildCount());let[$,L]=ut(g,y,a,p,d),N=$.transform===a.transform;N||($.transform.__parent=a.transform);let w=typeof f=="undefined"?[]:[].concat(f),E=[],v=0;for(let F of w){let G=rt(F,{id:i*w.length+ ++v,parentStyle:$,inheritedStyle:L,isInheritingTransform:!0,parent:g,font:n,embedFont:c,debug:s,graphemeImages:u});G.next(),E.push(G)}let[P,A]=yield;$.position==="absolute"&&g.calculateLayout();let{left:M,top:D,width:U,height:X}=g.getComputedLayout();M+=P,D+=A;let k="";y==="img"?k=yt({id:i,left:M,top:D,width:U,height:X,src:d.src,isInheritingTransform:N,debug:s},$):k=bt({id:i,left:M,top:D,width:U,height:X,isInheritingTransform:N,debug:s},$);for(let F of E)k+=F.next([M,D]).value;return k}m();import kt from"opentype.js";var st=class{constructor(r){this.fonts=new Map;for(let e of r){let i=e.data,a="buffer"in i?kt.parse(i.buffer.slice(i.byteOffset,i.byteOffset+i.byteLength)):kt.parse(i);this.defaultFont||(this.defaultFont=a),this.fonts.has(e.name)||this.fonts.set(e.name,[]),this.fonts.get(e.name).push([a,e.weight,e.style])}}get({name:r,weight:e,style:i}){if(!this.fonts.has(r))return this.defaultFont;e==="normal"&&(e=400),e==="bold"&&(e=700);let a=[...this.fonts.get(r)];return a.sort(([o,n,s],[c,u,y])=>{if(n!==u)return n?!u||n===e?-1:u===e?1:e===400&&n===500||e===500&&n===400?-1:e===400&&u===500||e===500&&u===400?1:e<400?n<e&&u<e?u-n:n<e?-1:u<e?1:n-u:e<n&&e<u?n-u:e<n?-1:e<u?1:u-n:1;if(s!==y){if(s===i)return-1;if(y===i)return 1}return-1}),a[0][0]}getFont({fontFamily:r,fontWeight:e=400,fontStyle:i="normal"}){return this.get({name:r,weight:e,style:i})}measure(r,e,{fontSize:i,letterSpacing:a=0}){return r.getAdvanceWidth(e,i,{letterSpacing:a/i})}getSVG(r,e,{fontSize:i,top:a,left:o,letterSpacing:n=0}){return a+=r.ascender/r.unitsPerEm*i,r.getPath(e,o,a,i,{letterSpacing:n/i}).toPathData(2)}};m();function xt({width:t,height:r,content:e},i){return`<svg width="${t}" height="${r}" viewBox="0 0 ${t} ${r}" xmlns="http://www.w3.org/2000/svg">${e}</svg>`}function Wt(t,r){let e=B();if(!e)throw new Error("Satori is not initialized.");let i=new st(r.fonts),a=e.Node.create();a.setWidth(r.width),a.setHeight(r.height),a.setFlexDirection(e.FLEX_DIRECTION_ROW),a.setFlexWrap(e.WRAP_WRAP),a.setAlignContent(e.ALIGN_AUTO),a.setAlignItems(e.ALIGN_FLEX_START),a.setJustifyContent(e.JUSTIFY_FLEX_START);let o=rt(t,{id:1,parentStyle:{},inheritedStyle:{fontSize:16,fontWeight:"normal",fontFamily:"serif",fontStyle:"normal",lineHeight:1.2,color:"black",opacity:1},parent:a,font:i,embedFont:r.embedFont,debug:r.debug,graphemeImages:r.graphemeImages});o.next(),a.calculateLayout(r.width,r.height,e.DIRECTION_LTR);let n=o.next([0,0]).value;return xt({width:r.width,height:r.height,content:n})}export{Wt as default,jt as init};
|
|
2
3
|
//# sourceMappingURL=index.js.map
|