satori 0.0.11 → 0.0.14
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 +63 -8
- 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/package.json +10 -5
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,65 @@ 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
|
+
When using `background-image`, the image will be stretched to fit the element by default if you don't specify the size.
|
|
92
|
+
|
|
93
|
+
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.
|
|
94
|
+
|
|
95
|
+
#### Emojis
|
|
96
|
+
|
|
97
|
+
To render custom images for specific graphemes, you can use `graphemeImages` option to map the grapheme to an image source:
|
|
98
|
+
|
|
99
|
+
```jsx
|
|
100
|
+
satori(
|
|
101
|
+
<div>Next.js is 🤯!</div>,
|
|
102
|
+
{
|
|
103
|
+
...,
|
|
104
|
+
graphemeImages: {
|
|
105
|
+
'🤯': 'https://twemoji.maxcdn.com/v/13.1.0/svg/1f92f.svg',
|
|
106
|
+
},
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The image will be resized to the current font-size (both width and height), so it must be a square.
|
|
59
112
|
|
|
60
113
|
### CSS Properties
|
|
61
114
|
|
|
@@ -96,13 +149,15 @@ Also, Satori does not guarantee that the SVG will 100% match the browser-rendere
|
|
|
96
149
|
| `word-break` | Supported |
|
|
97
150
|
| `text-shadow` | Supported |
|
|
98
151
|
| `text-transform` | Support `lowercase`, `uppercase`, `capitalize` |
|
|
152
|
+
| `background-position` | Supported |
|
|
153
|
+
| `background-size` | Support two-value size string such as `10px 20%` |
|
|
99
154
|
| `background-clip` | TBD |
|
|
100
|
-
| `background-size` | TBD |
|
|
101
|
-
| `background-position` | TBD |
|
|
102
155
|
| `background-repeat` | TBD |
|
|
103
156
|
| `background-origin` | TBD |
|
|
104
157
|
| `text-decoration` | TBD |
|
|
105
158
|
| `transform-origin` | TBD |
|
|
159
|
+
| `line-height` | TBD |
|
|
160
|
+
| `white-space` | TBD |
|
|
106
161
|
|
|
107
162
|
Note:
|
|
108
163
|
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
var V=Object.defineProperty,It=Object.defineProperties,Lt=Object.getOwnPropertyDescriptor,At=Object.getOwnPropertyDescriptors,Ft=Object.getOwnPropertyNames,lt=Object.getOwnPropertySymbols;var mt=Object.prototype.hasOwnProperty,Ct=Object.prototype.propertyIsEnumerable;var ct=(t,n,e)=>n in t?V(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e,Y=(t,n)=>{for(var e in n||(n={}))mt.call(n,e)&&ct(t,e,n[e]);if(lt)for(var e of lt(n))Ct.call(n,e)&&ct(t,e,n[e]);return t},pt=(t,n)=>It(t,At(n)),Ot=t=>V(t,"__esModule",{value:!0});var dt=(t,n)=>()=>(t&&(n=t(t=0)),n);var Nt=(t,n)=>{for(var e in n)V(t,e,{get:n[e],enumerable:!0})},wt=(t,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of Ft(n))!mt.call(t,a)&&(e||a!=="default")&&V(t,a,{get:()=>n[a],enumerable:!(i=Lt(n,a))||i.enumerable});return t};var vt=(t=>(n,e)=>t&&t.get(n)||(e=wt(Ot({}),n,1),t&&t.set(n,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var m=dt(()=>{});var gt={};Nt(gt,{default:()=>Gt});import*as kt from"yoga-layout-prebuilt";var Gt,ht=dt(()=>{m();Gt=kt});m();m();m();var J;{let t=(ht(),vt(gt));t.default?J=t.default:J=t}function Wt(t){J=t}function G(){return J}m();m();function Z(t){let n=typeof t;return!(n==="number"||n==="bigint"||n==="string"||n==="boolean")}function bt(t){return/^class\s/.test(Function.prototype.toString.call(t))}function z(t,n){return[t[0]*n[0]+t[2]*n[1],t[1]*n[0]+t[3]*n[1],t[0]*n[2]+t[2]*n[3],t[1]*n[2]+t[3]*n[3],t[0]*n[4]+t[2]*n[5]+t[4],t[1]*n[4]+t[3]*n[5]+t[5]]}function O(t,n,e){let i=n[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 Pt=new Set(["color","font","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","textAlign","textTransform","whiteSpace","letterSpacing","transform","wordBreak","textShadowOffset","textShadowColor","textShadowRadius","opacity"]);function Q(t){let n={};for(let e in t)Pt.has(e)&&(n[e]=t[e]);return n}m();import{getPropertyName as $t,getStylesForProperty as Dt}from"css-to-react-native";import St from"parse-css-dimension";import{parseElementStyle as Bt}from"css-background-parser";var Mt=new Set(["flex","flexGrow","flexShrink","flexBasis","fontWeight","lineHeight","opacity","scale","scaleX","scaleY"]),xt=[1,0,0,1,0,0];function Yt(t,n){return typeof n=="number"?Mt.has(t)?String(n):n+"px":n}function Et(t,n){if(typeof t=="number")return t;try{let e=new St(t);if(e.type==="length")switch(e.unit){case"em":return e.value*n;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,n){let e=[];for(let o in t){let r=$t(o);e.push([r,Yt(r,t[o])])}let i=e.reduce((o,r)=>{let s=$t(r[0]),c=r[1];return Object.assign(o,Dt(s,c,!0))},{});if(i.backgroundImage){let{backgrounds:o}=Bt(i);i.backgroundImage=o}let a=i.fontSize||n.fontSize;if(typeof a=="string")try{let o=new St(a);switch(o.unit){case"em":a=o.value*n.fontSize;break;case"rem":a=o.value*16;break}}catch{a=16}i.fontSize=a;for(let o in i){let r=i[o];if(typeof r=="string"){let s=Et(r,a);typeof s!="undefined"&&(i[o]=s),r=i[o]}if(o==="opacity"&&(r=i[o]=r*n.opacity),o==="transform"){let s=[...xt],c=r;for(let u of c){let h=Object.keys(u)[0],p=u[h],d=typeof p=="string"?Et(p,a):p,f=[...xt];switch(h){case"translateX":f[4]=d;break;case"translateY":f[5]=d;break;case"scaleX":f[0]=d;break;case"scaleY":f[3]=d;break;case"rotate":let b=d*Math.PI/180,y=Math.cos(b),T=Math.sin(b);f[0]=y,f[1]=T,f[2]=-T,f[3]=y;break;case"skewX":f[2]=Math.tan(d*Math.PI/180);break;case"skewY":f[1]=Math.tan(d*Math.PI/180);break}s=z(f,s)}i.transform=s}}return i}function tt(t,n,e,i,a){let o=G(),r=Y(Y(Y({},e),j(yt[n],e)),j(i,e));if(n==="img"){let s=parseInt(a.width),u=parseInt(a.height)/s;r.width||(r.width=s),r.height||(r.height=u*r.width)}return t.setDisplay(O(r.display,{flex:o.DISPLAY_FLEX,none:o.DISPLAY_NONE},o.DISPLAY_FLEX)),t.setAlignContent(O(r.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(r.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(r.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(r.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(r.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(r.flexWrap,{wrap:o.WRAP_WRAP,nowrap:o.WRAP_NO_WRAP,"wrap-reverse":o.WRAP_WRAP_REVERSE},o.WRAP_WRAP)),typeof r.flexBasis!="undefined"&&t.setFlexBasis(r.flexBasis),t.setFlexGrow(typeof r.flexGrow=="undefined"?0:r.flexGrow),t.setFlexShrink(typeof r.flexShrink=="undefined"?1:r.flexShrink),typeof r.maxHeight!="undefined"&&t.setMaxHeight(r.maxHeight),typeof r.maxWidth!="undefined"&&t.setMaxWidth(r.maxWidth),typeof r.minHeight!="undefined"&&t.setMinHeight(r.minHeight),typeof r.minWidth!="undefined"&&t.setMinWidth(r.minWidth),t.setOverflow(O(r.overflow,{visible:o.OVERFLOW_VISIBLE,hidden:o.OVERFLOW_HIDDEN},o.OVERFLOW_VISIBLE)),t.setMargin(o.EDGE_TOP,r.marginTop||0),t.setMargin(o.EDGE_BOTTOM,r.marginBottom||0),t.setMargin(o.EDGE_LEFT,r.marginLeft||0),t.setMargin(o.EDGE_RIGHT,r.marginRight||0),t.setBorder(o.EDGE_TOP,r.borderWidth||0),t.setBorder(o.EDGE_BOTTOM,r.borderWidth||0),t.setBorder(o.EDGE_LEFT,r.borderWidth||0),t.setBorder(o.EDGE_RIGHT,r.borderWidth||0),t.setPadding(o.EDGE_TOP,r.paddingTop||0),t.setPadding(o.EDGE_BOTTOM,r.paddingBottom||0),t.setPadding(o.EDGE_LEFT,r.paddingLeft||0),t.setPadding(o.EDGE_RIGHT,r.paddingRight||0),t.setPositionType(O(r.position,{absolute:o.POSITION_TYPE_ABSOLUTE,relative:o.POSITION_TYPE_RELATIVE},o.POSITION_TYPE_RELATIVE)),typeof r.top!="undefined"&&t.setPosition(o.EDGE_TOP,r.top),typeof r.bottom!="undefined"&&t.setPosition(o.EDGE_BOTTOM,r.bottom),typeof r.left!="undefined"&&t.setPosition(o.EDGE_LEFT,r.left),typeof r.right!="undefined"&&t.setPosition(o.EDGE_RIGHT,r.right),typeof r.height!="undefined"?t.setHeight(r.height):t.setHeightAuto(),typeof r.width!="undefined"?t.setWidth(r.width):t.setWidthAuto(),[r,Q(r)]}m();m();m();function U({left:t,top:n,width:e,height:i},a,o){let r;if(o)r=a;else{let s=t+e/2,c=n+i/2;r=z([1,0,0,1,s,c],z(a,[1,0,0,1,-s,-c])),a.__parent&&(r=z(a.__parent,r)),a.splice(0,6,...r)}return`matrix(${r.map(s=>s.toFixed(2)).join(",")})`}function et({id:t,content:n,filter:e,left:i,top:a,width:o,height:r,isInheritingTransform:s,path:c,image:u,debug:h},p){let d="",f=1,b="";return p.transform&&(d=U({left:i,top:a,width:o,height:r},p.transform,s)),p.opacity&&(f=+p.opacity),h&&(b=`<rect x="${i}" y="${a}" width="${o}" height="${c===null?.5:r}" fill="transparent" stroke="#575eff" stroke-width="1" ${d?`transform="${d}"`:""}></rect>`),u?`${e?`${e}<g filter="url(#satori_s-${t})">`:""}<image href="${u}" x="${i}" y="${a}" width="${o}" height="${r}" ${d?`transform="${d}"`:""} ${f!==1?`opacity="${f}"`:""}></image>${e?"</g>":""}${b}`:c===null?`${e?`${e}<g filter="url(#satori_s-${t})">`:""}<text x="${i}" y="${a}" width="${o}" height="${r}" fill="${p.color}" font-weight="${p.fontWeight}" font-style="${p.fontStyle}" font-size="${p.fontSize}" font-family="${p.fontFamily}" ${p.letterSpacing?`letter-spacing="${p.letterSpacing}"`:""} ${d?`transform="${d}"`:""} ${f!==1?`opacity="${f}"`:""}>${n}</text>${e?"</g>":""}${b}`:`${e?`${e}<g filter="url(#satori_s-${t})">`:""}<path fill="${p.color}" ${d?`transform="${d}"`:""} ${f!==1?`opacity="${f}"`:""} d="${c}"></path>${e?"</g>":""}${b}`}m();function M({id:t,width:n,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),r=Math.max(i.shadowOffset.width+a+n,n),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/n*100}%" y="${s/e*100}%" width="${(r-o)/n*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>`}function*rt(t,n){let e=G(),i="en",a=new Intl.Segmenter(i,{granularity:"word"}),o=new Intl.Segmenter(i,{granularity:"grapheme"}),{parentStyle:r,parent:s,font:c,id:u,isInheritingTransform:h,debug:p,embedFont:d,graphemeImages:f}=n;r.textTransform==="uppercase"?t=t.toLocaleUpperCase(i):r.textTransform==="lowercase"?t=t.toLocaleLowerCase(i):r.textTransform==="capitalize"&&(t=[...a.segment(t)].map(I=>[...o.segment(I.segment)].map((L,S)=>S===0?L.segment.toLocaleUpperCase(i):L.segment).join("")).join(""));let y=[...O(r.wordBreak,{normal:a,"break-all":o,"break-word":o,"keep-all":a},a).segment(t)].map(I=>I.segment),T=[];s.setAlignItems(e.ALIGN_BASELINE),r.textAlign==="left"?s.setJustifyContent(e.JUSTIFY_FLEX_START):r.textAlign==="center"?s.setJustifyContent(e.JUSTIFY_CENTER):r.textAlign==="right"?s.setJustifyContent(e.JUSTIFY_FLEX_END):r.textAlign==="justify"&&s.setJustifyContent(e.JUSTIFY_SPACE_BETWEEN);let _=c.getFont(r);for(let I of y){let L=e.Node.create();s.insertChild(L,s.getChildCount());let S;f&&f[I]?S={width:r.fontSize,ascent:_.ascender/_.unitsPerEm*r.fontSize,descent:-(_.descender/_.unitsPerEm)*r.fontSize}:S=c.measure(_,I,r),L.setWidth(S.width),L.setHeight(S.ascent*1.2),L.setMargin(e.EDGE_BOTTOM,S.descent*1.2),T.push(L)}let[N,R]=yield,W="";for(let I=0;I<T.length;I++){let L=T[I],S=y[I];r.position==="absolute"&&L.calculateLayout();let{left:w,top:k,width:P,height:C}=L.getComputedLayout();w+=N,k+=R;let F=null,v=null;f&&f[S]?v=f[S]:d?F=c.getSVG(_,S,pt(Y({},r),{top:k,left:w,letterSpacing:r.letterSpacing})):k+=c.getAscent(_,r);let A="";r.textShadowOffset&&(A=M({width:P,height:C,id:u},{shadowColor:r.textShadowColor,shadowOffset:r.textShadowOffset,shadowRadius:r.textShadowRadius})),W+=et({content:S,filter:A,id:u,left:w,top:k,width:P,height:C,isInheritingTransform:h,path:F,image:v,debug:p},r)}return W}m();m();m();var nt=nt||{};nt.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]+\.?))/},n="";function e(l){var g=new Error(n+": "+l);throw g.source=n,g}function i(){var l=a();return n.length>0&&e("Invalid input not EOF"),l}function a(){return R(o)}function o(){return r("linear-gradient",t.linearGradient,c)||r("repeating-linear-gradient",t.repeatingLinearGradient,c)||r("radial-gradient",t.radialGradient,p)||r("repeating-radial-gradient",t.repeatingRadialGradient,p)}function r(l,g,$){return s(g,function(B){var ut=$();return ut&&(D(t.comma)||e("Missing comma before color stops")),{type:l,orientation:ut,colorStops:R(W)}})}function s(l,g){var $=D(l);if($){D(t.startCall)||e("Missing (");var B=g($);return D(t.endCall)||e("Missing )"),B}}function c(){return u()||h()}function u(){return A("directional",t.sideOrCorner,1)}function h(){return A("angular",t.angleValue,1)}function p(){var l,g=d(),$;return g&&(l=[],l.push(g),$=n,D(t.comma)&&(g=d(),g?l.push(g):n=$)),l}function d(){var l=f()||b();if(l)l.at=T();else{var g=y();if(g){l=g;var $=T();$&&(l.at=$)}else{var B=_();B&&(l={type:"default-radial",at:B})}}return l}function f(){var l=A("shape",/^(circle)/i,0);return l&&(l.style=v()||y()),l}function b(){var l=A("shape",/^(ellipse)/i,0);return l&&(l.style=C()||y()),l}function y(){return A("extent-keyword",t.extentKeywords,1)}function T(){if(A("position",/^at/,0)){var l=_();return l||e("Missing positioning value"),l}}function _(){var l=N();if(l.x||l.y)return{type:"position",value:l}}function N(){return{x:C(),y:C()}}function R(l){var g=l(),$=[];if(g)for($.push(g);D(t.comma);)g=l(),g?$.push(g):e("One extra comma");return $}function W(){var l=I();return l||e("Expected color definition"),l.length=C(),l}function I(){return S()||k()||w()||L()}function L(){return A("literal",t.literalColor,0)}function S(){return A("hex",t.hexColor,1)}function w(){return s(t.rgbColor,function(){return{type:"rgb",value:R(P)}})}function k(){return s(t.rgbaColor,function(){return{type:"rgba",value:R(P)}})}function P(){return D(t.number)[1]}function C(){return A("%",t.percentageValue,1)||F()||v()}function F(){return A("position-keyword",t.positionKeywords,1)}function v(){return A("px",t.pixelValue,1)||A("em",t.emValue,1)}function A(l,g,$){var B=D(g);if(B)return{type:l,value:B[$]}}function D(l){var g,$;return $=/^[\n\r\t\s]+/.exec(n),$&&ft($[0].length),g=l.exec(n),g&&ft(g[0].length),g}function ft(l){n=n.substr(l)}return function(l){return n=l.toString(),i()}}();var _t=nt;function zt(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 ot({id:t,width:n},{image:e}){if(e.startsWith("linear-gradient(")){let i=_t.parse(e)[0],a,o,r,s;if(i.orientation.type==="directional")[a,o,r,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,b=Math.cos(f),y=Math.sin(f);a=0,o=0,r=b,s=y,r<0&&(a-=r,r=0),s<0&&(o-=s,s=0)}let c=n,u=[];for(let f of i.colorStops){let b=zt(f);if(!u.length&&(u.push({offset:0,color:b}),typeof f.length=="undefined"||f.length.value==="0"))continue;let y=typeof f.length=="undefined"?void 0:f.length.type==="%"?f.length.value/100:f.length.value/c;u.push({offset:y,color:b})}u.length||u.push({offset:0,color:"transparent"});let h=u[u.length-1];h.offset!==1&&(typeof h.offset=="undefined"?h.offset=1:u.push({offset:1,color:h.color}));let p=0,d=1;for(let f=0;f<u.length;f++)if(typeof u[f].offset=="undefined"){for(d<f&&(d=f);typeof u[d].offset=="undefined";)d++;u[f].offset=(u[d].offset-u[p].offset)/(d-p)*(f-p)+u[p].offset}else p=f;return[`satori_bi${t}`,`<linearGradient id="satori_bi${t}" x1="${a}" y1="${o}" x2="${r}" 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 K(t,n,e){return e<t+n&&(e/2<t&&e/2<n?t=n=e/2:e/2<t?t=e-n:e/2<n&&(n=e-t)),[t,n]}function X({left:t,top:n,width:e,height:i},a){let{borderTopLeftRadius:o,borderTopRightRadius:r,borderBottomLeftRadius:s,borderBottomRightRadius:c}=a;return o=Math.min(o||0,e,i),r=Math.min(r||0,e,i),s=Math.min(s||0,e,i),c=Math.min(c||0,e,i),!o&&!r&&!s&&!c?"":([o,r]=K(o,r,e),[o,s]=K(o,s,i),[r,c]=K(r,c,i),[s,c]=K(s,c,e),`M${t+o},${n} h${e-o-r} a${r},${r} 0 0 1 ${r},${r} v${i-r-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 it({id:t,left:n,top:e,width:i,height:a,isInheritingTransform:o,debug:r},s){if(s.display==="none")return"";let c="rect",u="transparent",h=0,p="",d="",f=[],b=1,y="";if(s.backgroundColor&&f.push(s.backgroundColor),s.borderWidth&&(h=s.borderWidth,u=s.borderColor),s.opacity&&(b=+s.opacity),s.transform&&(p=U({left:n,top:e,width:i,height:a},s.transform,o)),s.backgroundImage){let N=s.backgroundImage.map((R,W)=>ot({id:t+"_"+W,width:i,height:a},R)).filter(Boolean);for(let R of N)d+=R[1],f.push(`url(#${R[0]})`)}let T=X({left:n,top:e,width:i,height:a},s);T&&(c="path");let _=M({width:i,height:a,id:t},s);return f.length||f.push("transparent"),r&&(y=`<rect x="${n}" y="${e}" width="${i}" height="${a}" fill="transparent" stroke="#ff5757" stroke-width="1" ${p?`transform="${p}"`:""}></rect>`),`${d?`<defs>${d}</defs>`:""}${_?`${_}<g filter="url(#satori_s-${t})">`:""}${b!==1?`<g opacity="${b}">`:""}${f.map((N,R)=>N==="transparent"&&!(R===f.length-1&&h)?"":`<${c} x="${n}" y="${e}" width="${i}" height="${a}" fill="${N}" ${R===f.length-1&&h?`stroke="${u}" stroke-width="${h}"`:""} ${T?`d="${T}"`:""} ${p?`transform="${p}"`:""}></${c}>`).join("")}${b!==1?"</g>":""}${_?"</g>":""}${y}`}m();function at({id:t,left:n,top:e,width:i,height:a,src:o,debug:r},s){if(s.display==="none")return"";let c="",u=1,h=s.objectFit==="contain"?"xMidYMid":s.objectFit==="cover"?"xMidYMid slice":"none",p=X({left:n,top:e,width:i,height:a},s);p&&(c=`<clipPath id="satori_c-${t}"><path x="${n}" y="${e}" width="${i}" height="${a}" d="${p}"></path></clipPath>`),s.opacity&&(u=+s.opacity);let d=M({width:i,height:a,id:t},s);return`${d}${d?`<g filter="url(#satori_s-${t})">`:""}${c}<image href="${o}" x="${n}" y="${e}" width="${i}" height="${a}" preserveAspectRatio="${h}" ${c?`clip-path="url(#satori_c-${t})"`:""} ${u!==1?`opacity="${u}"`:""}></image>${d?"</g>":""}`}function*H(t,n){let e=G(),{id:i,inheritedStyle:a,parent:o,font:r,debug:s,embedFont:c=!0,graphemeImages:u}=n;if(t===null||typeof t=="undefined")return yield,"";if(!Z(t)||typeof t.type=="function"){let F;if(!Z(t))F=rt(String(t),n);else{if(bt(t.type))throw new Error("Class component is not supported.");F=H(t.type(t.props),n)}F.next();let v=yield;return F.next(v).value}let{type:h,props:p}=t,{style:d,children:f}=p,b=e.Node.create();o.insertChild(b,o.getChildCount());let[y,T]=tt(b,h,a,d,p),_=y.transform===a.transform;_||(y.transform.__parent=a.transform);let N=typeof f=="undefined"?[]:[].concat(f),R=[],W=0;for(let F of N){let v=H(F,{id:i*N.length+ ++W,parentStyle:y,inheritedStyle:T,isInheritingTransform:!0,parent:b,font:r,embedFont:c,debug:s,graphemeImages:u});v.next(),R.push(v)}let[I,L]=yield;y.position==="absolute"&&b.calculateLayout();let{left:S,top:w,width:k,height:P}=b.getComputedLayout();S+=I,w+=L;let C="";h==="img"?C=at({id:i,left:S,top:w,width:k,height:P,src:p.src,isInheritingTransform:_,debug:s},y):C=it({id:i,left:S,top:w,width:k,height:P,isInheritingTransform:_,debug:s},y);for(let F of R)C+=F.next([S,w]).value;return C}m();import Rt from"opentype.js";var q=class{constructor(n){this.fonts=new Map;for(let e of n){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:n,weight:e,style:i}){if(!this.fonts.has(n))return this.defaultFont;e==="normal"&&(e=400),e==="bold"&&(e=700);let a=[...this.fonts.get(n)];return a.sort(([o,r,s],[c,u,h])=>{if(r!==u)return r?!u||r===e?-1:u===e?1:e===400&&r===500||e===500&&r===400?-1:e===400&&u===500||e===500&&u===400?1:e<400?r<e&&u<e?u-r:r<e?-1:u<e?1:r-u:e<r&&e<u?r-u:e<r?-1:e<u?1:u-r:1;if(s!==h){if(s===i)return-1;if(h===i)return 1}return-1}),a[0][0]}getFont({fontFamily:n,fontWeight:e=400,fontStyle:i="normal"}){return this.get({name:n,weight:e,style:i})}measure(n,e,{fontSize:i,letterSpacing:a=0}){return{width:n.getAdvanceWidth(e,i,{letterSpacing:a/i}),ascent:n.ascender/n.unitsPerEm*i,descent:-(n.descender/n.unitsPerEm)*i}}getSVG(n,e,{fontSize:i,top:a,left:o,letterSpacing:r=0}){return a+=n.ascender/n.unitsPerEm*i,n.getPath(e,o,a,i,{letterSpacing:r/i}).toPathData(2)}getAscent(n,{fontSize:e}){return n.ascender/n.unitsPerEm*e}};m();function st({width:t,height:n,content:e},i){return`<svg width="${t}" height="${n}" viewBox="0 0 ${t} ${n}" xmlns="http://www.w3.org/2000/svg">${e}</svg>`}function Tt(t,n){let e=G();if(!e)throw new Error("Satori is not initialized.");let i=new q(n.fonts),a=e.Node.create();a.setWidth(n.width),a.setHeight(n.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=H(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:n.embedFont,debug:n.debug,graphemeImages:n.graphemeImages});o.next(),a.calculateLayout(n.width,n.height,e.DIRECTION_LTR);let r=o.next([0,0]).value;return st({width:n.width,height:n.height,content:r})}export{Tt as default,Wt as init};
|
|
1
|
+
var it=Object.defineProperty,Ut=Object.defineProperties,zt=Object.getOwnPropertyDescriptor,Xt=Object.getOwnPropertyDescriptors,Ht=Object.getOwnPropertyNames,Tt=Object.getOwnPropertySymbols;var Lt=Object.prototype.hasOwnProperty,Vt=Object.prototype.propertyIsEnumerable;var It=(t,r,e)=>r in t?it(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,Z=(t,r)=>{for(var e in r||(r={}))Lt.call(r,e)&&It(t,e,r[e]);if(Tt)for(var e of Tt(r))Vt.call(r,e)&&It(t,e,r[e]);return t},wt=(t,r)=>Ut(t,Xt(r)),Jt=t=>it(t,"__esModule",{value:!0});var At=(t,r)=>()=>(t&&(r=t(t=0)),r);var jt=(t,r)=>{for(var e in r)it(t,e,{get:r[e],enumerable:!0})},Kt=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of Ht(r))!Lt.call(t,s)&&(e||s!=="default")&&it(t,s,{get:()=>r[s],enumerable:!(i=zt(r,s))||i.enumerable});return t};var qt=(t=>(r,e)=>t&&t.get(r)||(e=Kt(Jt({}),r,1),t&&t.set(r,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var u=At(()=>{});var Ct={};jt(Ct,{default:()=>Qt});import*as Zt from"yoga-layout-prebuilt";var Qt,Ft=At(()=>{u();Qt=Zt});u();u();u();var at;{let t=(Ft(),qt(Ct));t.default?at=t.default:at=t}function te(t){at=t}function Y(){return at}u();u();function ut(t){let r=typeof t;return!(r==="number"||r==="bigint"||r==="string"||r==="boolean")}function Ot(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 v(t,r,e){let i=r[t];return typeof i=="undefined"?e:i}u();u();var Nt={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"}};u();var ee=new Set(["color","font","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","textAlign","textTransform","whiteSpace","letterSpacing","transform","wordBreak","textShadowOffset","textShadowColor","textShadowRadius","opacity"]);function ct(t){let r={};for(let e in t)ee.has(e)&&(r[e]=t[e]);return r}u();import{getPropertyName as kt,getStylesForProperty as re}from"css-to-react-native";import Gt from"parse-css-dimension";import{parseElementStyle as ne}from"css-background-parser";var oe=new Set(["flex","flexGrow","flexShrink","flexBasis","fontWeight","lineHeight","opacity","scale","scaleX","scaleY"]),vt=[1,0,0,1,0,0];function ie(t,r){return typeof r=="number"?oe.has(t)?String(r):r+"px":r}function Wt(t,r){if(typeof t=="number")return t;try{let e=new Gt(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 st(t,r){let e=[];for(let o in t){let n=kt(o);e.push([n,ie(n,t[o])])}let i=e.reduce((o,n)=>{let a=kt(n[0]),f=n[1];return Object.assign(o,re(a,f,!0))},{});if(i.backgroundImage){let{backgrounds:o}=ne(i);i.backgroundImage=o}let s=i.fontSize||r.fontSize;if(typeof s=="string")try{let o=new Gt(s);switch(o.unit){case"em":s=o.value*r.fontSize;break;case"rem":s=o.value*16;break}}catch{s=16}typeof i.fontSize!="undefined"&&(i.fontSize=s);for(let o in i){let n=i[o];if(typeof n=="string"){let a=Wt(n,s);typeof a!="undefined"&&(i[o]=a),n=i[o]}if(o==="opacity"&&(n=i[o]=n*r.opacity),o==="transform"){let a=[...vt],f=n;for(let m of f){let y=Object.keys(m)[0],p=m[y],d=typeof p=="string"?Wt(p,s):p,g=[...vt];switch(y){case"translateX":g[4]=d;break;case"translateY":g[5]=d;break;case"scaleX":g[0]=d;break;case"scaleY":g[3]=d;break;case"rotate":let c=d*Math.PI/180,E=Math.cos(c),T=Math.sin(c);g[0]=E,g[1]=T,g[2]=-T,g[3]=E;break;case"skewX":g[2]=Math.tan(d*Math.PI/180);break;case"skewY":g[1]=Math.tan(d*Math.PI/180);break}a=Q(g,a)}i.transform=a}}return i}function mt(t,r,e,i,s){let o=Y(),n=Z(Z(Z({},e),st(Nt[r],e)),st(i,e));if(r==="img"){let a=parseInt(s.width),m=parseInt(s.height)/a;n.width||(n.width=a),n.height||(n.height=m*n.width)}return t.setDisplay(v(n.display,{flex:o.DISPLAY_FLEX,none:o.DISPLAY_NONE},o.DISPLAY_FLEX)),t.setAlignContent(v(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(v(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(v(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(v(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(v(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(v(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(v(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(v(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,ct(n)]}u();import{LineBreaker as ae}from"css-line-break";import{splitGraphemes as se}from"text-segmentation";u();u();function et({left:t,top:r,width:e,height:i},s,o){let n;if(o)n=s;else{let a=t+e/2,f=r+i/2;n=Q([1,0,0,1,a,f],Q(s,[1,0,0,1,-a,-f])),s.__parent&&(n=Q(s.__parent,n)),s.splice(0,6,...n)}return`matrix(${n.map(a=>a.toFixed(2)).join(",")})`}function Pt({left:t,top:r,width:e,height:i,isInheritingTransform:s},o){let n="",a=1;return o.transform&&(n=et({left:t,top:r,width:e,height:i},o.transform,s)),o.opacity&&(a=+o.opacity),{matrix:n,opacity:a}}function pt({id:t,content:r,filter:e,left:i,top:s,width:o,height:n,matrix:a,opacity:f,image:m,debug:y},p){let d="";return y&&(d=`<rect x="${i}" y="${s}" width="${o}" height="0.5" fill="transparent" stroke="#575eff" stroke-width="1" ${a?`transform="${a}"`:""}></rect>`),m?`${e?`${e}<g filter="url(#satori_s-${t})">`:""}<image href="${m}" x="${i}" y="${s}" width="${o}" height="${n}" ${a?`transform="${a}"`:""} ${f!==1?`opacity="${f}"`:""}></image>${e?"</g>":""}${d}`:`${e?`${e}<g filter="url(#satori_s-${t})">`:""}<text x="${i}" y="${s}" width="${o}" height="${n}" fill="${p.color}" font-weight="${p.fontWeight}" font-style="${p.fontStyle}" font-size="${p.fontSize}" font-family="${p.fontFamily}" ${p.letterSpacing?`letter-spacing="${p.letterSpacing}"`:""} ${a?`transform="${a}"`:""} ${f!==1?`opacity="${f}"`:""}>${r}</text>${e?"</g>":""}${d}`}u();function K({id:t,width:r,height:e},i){if(!i.shadowColor||!i.shadowOffset||typeof i.shadowRadius=="undefined")return"";let s=i.shadowRadius*i.shadowRadius/4,o=Math.min(i.shadowOffset.width-s,0),n=Math.max(i.shadowOffset.width+s+r,r),a=Math.min(i.shadowOffset.height-s,0),f=Math.max(i.shadowOffset.height+s+e,e);return`<defs><filter id="satori_s-${t}" x="${o/r*100}%" y="${a/e*100}%" width="${(n-o)/r*100}%" height="${(f-a)/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 rt=void 0,gt=typeof Intl!="undefined"&&"Segmenter"in Intl,fe=gt?new Intl.Segmenter(rt,{granularity:"word"}):null,le=gt?new Intl.Segmenter(rt,{granularity:"grapheme"}):null,ue=[32,160,4961,65792,65793,4153,4241],ce=t=>{let r=ae(t,{lineBreak:"strict",wordBreak:"normal"}),e=[],i;for(;!(i=r.next()).done;)if(i.value){let s=i.value.slice(),o=[].map.call(s,a=>a.codePointAt(0)),n="";o.forEach(a=>{ue.includes(a)?(n.length&&e.push(n),e.push(String.fromCodePoint(a)),n=""):n+=String.fromCodePoint(a)}),n.length&&e.push(n)}return e};function dt(t,r){return gt?r==="word"?[...fe.segment(t)].map(e=>e.segment):[...le.segment(t)].map(e=>e.segment):r==="word"?ce(t):se(t)}function*ht(t,r){let e=Y(),{parentStyle:i,parent:s,font:o,id:n,isInheritingTransform:a,debug:f,embedFont:m,graphemeImages:y}=r;i.textTransform==="uppercase"?t=t.toLocaleUpperCase(rt):i.textTransform==="lowercase"?t=t.toLocaleLowerCase(rt):i.textTransform==="capitalize"&&(t=dt(t,"word").map(x=>dt(x,"grapheme").map((L,G)=>G===0?L.toLocaleUpperCase(rt):L).join("")).join(""));let p=v(i.wordBreak,{normal:"word","break-all":"grapheme","break-word":"grapheme","keep-all":"word"},"word"),d=dt(t,p),g=e.Node.create();g.setAlignItems(e.ALIGN_BASELINE),i.textAlign==="left"?g.setJustifyContent(e.JUSTIFY_FLEX_START):i.textAlign==="center"?g.setJustifyContent(e.JUSTIFY_CENTER):i.textAlign==="right"?g.setJustifyContent(e.JUSTIFY_FLEX_END):i.textAlign==="justify"&&g.setJustifyContent(e.JUSTIFY_SPACE_BETWEEN),s.insertChild(g,s.getChildCount());let c=o.getFont(i),E=c.ascender/c.unitsPerEm*i.fontSize,T=-(c.descender/c.unitsPerEm)*i.fontSize,h=(E+T)*1.2,{textAlign:$}=i,C=[],M=[],O=[];g.setMeasureFunc(x=>{let L=[],G="",P=0,J="",A=0,q=0,tt=-1;C=[],M=[0];for(let B=0;B<d.length;B++){let D=d[B];if([" ",`
|
|
2
|
+
`," ","\u3000"].includes(D))G+=D,P=o.measure(c,G,i),O[B]=null;else{let j=y&&y[D]?i.fontSize:o.measure(c,D,i);A||(G="",P=0);let _t=P||",.!?:-@)>]}%#".indexOf(D[0])<0,Rt=!A||!!P;_t&&A+P+j>x?(C.push(A),L.push(J),J=D,A=j,M.push(1),tt=-1):(J+=G+D,A+=P+j,Rt&&M[M.length-1]++),G="",P=0,Rt&&tt++,q=Math.max(q,A),O[B]={y:L.length*h,x:A-j,width:j,line:L.length,lineIndex:tt}}}return A&&(L.push(J),C.push(A)),L.length>1&&(q=x),{width:q,height:L.length*h}});let[U,z]=yield,X="";i.position==="absolute"&&g.calculateLayout();let{left:H,top:N,width:F,height:W}=g.getComputedLayout(),w=U+H,k=z+N,{matrix:V,opacity:l}=Pt({left:H,top:N,width:F,height:W,isInheritingTransform:a},i),b="";i.textShadowOffset&&(b=K({width:F,height:W,id:n},{shadowColor:i.textShadowColor,shadowOffset:i.textShadowOffset,shadowRadius:i.textShadowRadius}));let S="";for(let x=0;x<d.length;x++){if(!O[x])continue;let L=d[x],G=null,P=null,J=O[x].y,A=O[x].x,q=O[x].width,tt=h,B=F-C[O[x].line];if($==="right"||$==="end")A+=B;else if($==="center")A+=B/2;else if($==="justify"){let D=O[x].line;if(D<C.length-1){let j=M[D];A+=(j>1?B/(j-1):0)*O[x].lineIndex}}y&&y[L]?P=y[L]:m?G=o.getSVG(c,L,wt(Z({},i),{left:w+A,top:k+J,letterSpacing:i.letterSpacing})):J+=E,G?S+=G+" ":X+=pt({content:L,filter:b,id:n,left:w+A,top:k+J,width:q,height:tt,matrix:V,opacity:l,image:P,debug:f},i)}if(S){let x="";f&&(x=`<rect x="${w}" y="${k}" width="${F}" height="${W}" fill="transparent" stroke="#575eff" stroke-width="1" ${V?`transform="${V}"`:""}></rect>`),X+=`${b?`${b}<g filter="url(#satori_s-${n})">`:""}<path fill="${i.color}" ${V?`transform="${V}"`:""} ${l!==1?`opacity="${l}"`:""} d="${S}"></path>${b?"</g>":""}${x}`}return X}u();u();import me from"parse-css-dimension";u();var bt=bt||{};bt.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 b=new Error(r+": "+l);throw b.source=r,b}function i(){var l=s();return r.length>0&&e("Invalid input not EOF"),l}function s(){return $(o)}function o(){return n("linear-gradient",t.linearGradient,f)||n("repeating-linear-gradient",t.repeatingLinearGradient,f)||n("radial-gradient",t.radialGradient,p)||n("repeating-radial-gradient",t.repeatingRadialGradient,p)}function n(l,b,S){return a(b,function(x){var L=S();return L&&(k(t.comma)||e("Missing comma before color stops")),{type:l,orientation:L,colorStops:$(C)}})}function a(l,b){var S=k(l);if(S){k(t.startCall)||e("Missing (");var x=b(S);return k(t.endCall)||e("Missing )"),x}}function f(){return m()||y()}function m(){return w("directional",t.sideOrCorner,1)}function y(){return w("angular",t.angleValue,1)}function p(){var l,b=d(),S;return b&&(l=[],l.push(b),S=r,k(t.comma)&&(b=d(),b?l.push(b):r=S)),l}function d(){var l=g()||c();if(l)l.at=T();else{var b=E();if(b){l=b;var S=T();S&&(l.at=S)}else{var x=I();x&&(l={type:"default-radial",at:x})}}return l}function g(){var l=w("shape",/^(circle)/i,0);return l&&(l.style=W()||E()),l}function c(){var l=w("shape",/^(ellipse)/i,0);return l&&(l.style=N()||E()),l}function E(){return w("extent-keyword",t.extentKeywords,1)}function T(){if(w("position",/^at/,0)){var l=I();return l||e("Missing positioning value"),l}}function I(){var l=h();if(l.x||l.y)return{type:"position",value:l}}function h(){return{x:N(),y:N()}}function $(l){var b=l(),S=[];if(b)for(S.push(b);k(t.comma);)b=l(),b?S.push(b):e("One extra comma");return S}function C(){var l=M();return l||e("Expected color definition"),l.length=N(),l}function M(){return U()||X()||z()||O()}function O(){return w("literal",t.literalColor,0)}function U(){return w("hex",t.hexColor,1)}function z(){return a(t.rgbColor,function(){return{type:"rgb",value:$(H)}})}function X(){return a(t.rgbaColor,function(){return{type:"rgba",value:$(H)}})}function H(){return k(t.number)[1]}function N(){return w("%",t.percentageValue,1)||F()||W()}function F(){return w("position-keyword",t.positionKeywords,1)}function W(){return w("px",t.pixelValue,1)||w("em",t.emValue,1)}function w(l,b,S){var x=k(b);if(x)return{type:l,value:x[S]}}function k(l){var b,S;return S=/^[\n\r\t\s]+/.exec(r),S&&V(S[0].length),b=l.exec(r),b&&V(b[0].length),b}function V(l){r=r.substr(l)}return function(l){return r=l.toString(),i()}}();var Dt=bt;function pe(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 de(t,r){return typeof t=="string"&&t.endsWith("%")?r*parseFloat(t)/100:+t}function Mt(t,{x:r,y:e,defaultX:i,defaultY:s}){return(t?t.split(" ").map(o=>{try{let n=new me(o);return n.type==="length"?n.value:n.value+n.unit}catch{return null}}).filter(o=>o!==null):[i,s]).map((o,n)=>de(o,[r,e][n]))}function yt({id:t,width:r,height:e},{image:i,size:s,position:o}){let n=Mt(s,{x:r,y:e,defaultX:r,defaultY:e}),a=Mt(o,{x:r,y:e,defaultX:0,defaultY:0});if(i.startsWith("linear-gradient(")){let f=Dt.parse(i)[0],m,y,p,d;if(f.orientation.type==="directional")[m,y,p,d]={top:[0,1,0,0],bottom:[0,0,0,1],left:[1,0,0,0],right:[0,0,1,0]}[f.orientation.value];else if(f.orientation.type==="angular"){let h=+f.orientation.value/180*Math.PI-Math.PI/2,$=Math.cos(h),C=Math.sin(h);m=0,y=0,p=$,d=C,p<0&&(m-=p,p=0),d<0&&(y-=d,d=0)}let g=r,c=[];for(let h of f.colorStops){let $=pe(h);if(!c.length&&(c.push({offset:0,color:$}),typeof h.length=="undefined"||h.length.value==="0"))continue;let C=typeof h.length=="undefined"?void 0:h.length.type==="%"?h.length.value/100:h.length.value/g;c.push({offset:C,color:$})}c.length||c.push({offset:0,color:"transparent"});let E=c[c.length-1];E.offset!==1&&(typeof E.offset=="undefined"?E.offset=1:c.push({offset:1,color:E.color}));let T=0,I=1;for(let h=0;h<c.length;h++)if(typeof c[h].offset=="undefined"){for(I<h&&(I=h);typeof c[I].offset=="undefined";)I++;c[h].offset=(c[I].offset-c[T].offset)/(I-T)*(h-T)+c[T].offset}else T=h;return[`satori_bi${t}`,`<linearGradient id="satori_bi${t}" x1="${m}" y1="${y}" x2="${p}" y2="${d}">${c.map(h=>`<stop offset="${h.offset*100}%" stop-color="${h.color}"/>`).join("")}</linearGradient>`]}if(i.startsWith("url(")){let f=i.slice(4,-1);return[`satori_bi${t}`,`<pattern id="satori_bi${t}" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse" x="${a[0]}" y="${a[1]}" width="${n[0]}" height="${n[1]}"><image href="${f}" x="0" y="0" width="${n[0]}" height="${n[1]}"/></pattern>`]}}u();function ft(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 nt({left:t,top:r,width:e,height:i},s){let{borderTopLeftRadius:o,borderTopRightRadius:n,borderBottomLeftRadius:a,borderBottomRightRadius:f}=s;return o=Math.min(o||0,e,i),n=Math.min(n||0,e,i),a=Math.min(a||0,e,i),f=Math.min(f||0,e,i),!o&&!n&&!a&&!f?"":([o,n]=ft(o,n,e),[o,a]=ft(o,a,i),[n,f]=ft(n,f,i),[a,f]=ft(a,f,e),`M${t+o},${r} h${e-o-n} a${n},${n} 0 0 1 ${n},${n} v${i-n-f} a${f},${f} 0 0 1 ${-f},${f} h${f+a-e} a${a},${a} 0 0 1 ${-a},${-a} v${a+o-i} a${o},${o} 0 0 1 ${o},${-o}`)}function xt({id:t,left:r,top:e,width:i,height:s,isInheritingTransform:o,debug:n},a){if(a.display==="none")return"";let f="rect",m="transparent",y=0,p="",d="",g=[],c=1,E="";if(a.backgroundColor&&g.push(a.backgroundColor),a.borderWidth&&(y=a.borderWidth,m=a.borderColor),a.opacity&&(c=+a.opacity),a.transform&&(p=et({left:r,top:e,width:i,height:s},a.transform,o)),a.backgroundImage){let h=a.backgroundImage.map(($,C)=>yt({id:t+"_"+C,width:i,height:s},$)).filter(Boolean);for(let $ of h)d+=$[1],g.push(`url(#${$[0]})`)}let T=nt({left:r,top:e,width:i,height:s},a);T&&(f="path");let I=K({width:i,height:s,id:t},a);return g.length||g.push("transparent"),n&&(E=`<rect x="${r}" y="${e}" width="${i}" height="${s}" fill="transparent" stroke="#ff5757" stroke-width="1" ${p?`transform="${p}"`:""}></rect>`),`${d?`<defs>${d}</defs>`:""}${I?`${I}<g filter="url(#satori_s-${t})">`:""}${c!==1?`<g opacity="${c}">`:""}${g.map((h,$)=>h==="transparent"&&!($===g.length-1&&y)?"":`<${f} x="${r}" y="${e}" width="${i}" height="${s}" fill="${h}" ${$===g.length-1&&y?`stroke="${m}" stroke-width="${y}"`:""} ${T?`d="${T}"`:""} ${p?`transform="${p}"`:""}></${f}>`).join("")}${c!==1?"</g>":""}${I?"</g>":""}${E}`}u();function $t({id:t,left:r,top:e,width:i,height:s,src:o,debug:n},a){if(a.display==="none")return"";let f="",m=1,y=a.objectFit==="contain"?"xMidYMid":a.objectFit==="cover"?"xMidYMid slice":"none",p=nt({left:r,top:e,width:i,height:s},a);p&&(f=`<clipPath id="satori_c-${t}"><path x="${r}" y="${e}" width="${i}" height="${s}" d="${p}"></path></clipPath>`),a.opacity&&(m=+a.opacity);let d=K({width:i,height:s,id:t},a);return`${d}${d?`<g filter="url(#satori_s-${t})">`:""}${f}<image href="${o}" x="${r}" y="${e}" width="${i}" height="${s}" preserveAspectRatio="${y}" ${f?`clip-path="url(#satori_c-${t})"`:""} ${m!==1?`opacity="${m}"`:""}></image>${d?"</g>":""}`}function*ot(t,r){let e=Y(),{id:i,inheritedStyle:s,parent:o,font:n,debug:a,embedFont:f=!0,graphemeImages:m}=r;if(t===null||typeof t=="undefined")return yield,"";if(!ut(t)||typeof t.type=="function"){let F;if(!ut(t))F=ht(String(t),r);else{if(Ot(t.type))throw new Error("Class component is not supported.");F=ot(t.type(t.props),r)}F.next();let W=yield;return F.next(W).value}let{type:y,props:p}=t,{style:d,children:g}=p,c=e.Node.create();o.insertChild(c,o.getChildCount());let[E,T]=mt(c,y,s,d,p),I=E.transform===s.transform;I||(E.transform.__parent=s.transform);let h=typeof g=="undefined"?[]:[].concat(g),$=[],C=0;for(let F of h){let W=ot(F,{id:i*h.length+ ++C,parentStyle:E,inheritedStyle:T,isInheritingTransform:!0,parent:c,font:n,embedFont:f,debug:a,graphemeImages:m});W.next(),$.push(W)}let[M,O]=yield;E.position==="absolute"&&c.calculateLayout();let{left:U,top:z,width:X,height:H}=c.getComputedLayout();U+=M,z+=O;let N="";y==="img"?N=$t({id:i,left:U,top:z,width:X,height:H,src:p.src,isInheritingTransform:I,debug:a},E):N=xt({id:i,left:U,top:z,width:X,height:H,isInheritingTransform:I,debug:a},E);for(let F of $)N+=F.next([U,z]).value;return N}u();import Bt from"@shuding/opentype.js";var lt=class{constructor(r){this.fonts=new Map;for(let e of r){let i=e.data,s="buffer"in i?Bt.parse(i.buffer.slice(i.byteOffset,i.byteOffset+i.byteLength)):Bt.parse(i);this.defaultFont||(this.defaultFont=s),this.fonts.has(e.name)||this.fonts.set(e.name,[]),this.fonts.get(e.name).push([s,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 s=[...this.fonts.get(r)];return s.sort(([o,n,a],[f,m,y])=>{if(n!==m)return n?!m||n===e?-1:m===e?1:e===400&&n===500||e===500&&n===400?-1:e===400&&m===500||e===500&&m===400?1:e<400?n<e&&m<e?m-n:n<e?-1:m<e?1:n-m:e<n&&e<m?n-m:e<n?-1:e<m?1:m-n:1;if(a!==y){if(a===i)return-1;if(y===i)return 1}return-1}),s[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:s=0}){return r.getAdvanceWidth(e,i,{letterSpacing:s/i})}getSVG(r,e,{fontSize:i,top:s,left:o,letterSpacing:n=0}){return s+=r.ascender/r.unitsPerEm*i,r.getPath(e,o,s,i,{letterSpacing:n/i}).toPathData(1)}};u();function Et({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>`}var St=new WeakMap;function Yt(t,r){let e=Y();if(!e)throw new Error("Satori is not initialized.");let i;St.has(r.fonts)?i=St.get(r.fonts):St.set(r.fonts,i=new lt(r.fonts));let s=e.Node.create();s.setWidth(r.width),s.setHeight(r.height),s.setFlexDirection(e.FLEX_DIRECTION_ROW),s.setFlexWrap(e.WRAP_WRAP),s.setAlignContent(e.ALIGN_AUTO),s.setAlignItems(e.ALIGN_FLEX_START),s.setJustifyContent(e.JUSTIFY_FLEX_START);let o=ot(t,{id:1,parentStyle:{},inheritedStyle:{fontSize:16,fontWeight:"normal",fontFamily:"serif",fontStyle:"normal",lineHeight:1.2,color:"black",opacity:1},parent:s,font:i,embedFont:r.embedFont,debug:r.debug,graphemeImages:r.graphemeImages});o.next(),s.calculateLayout(r.width,r.height,e.DIRECTION_LTR);let n=o.next([0,0]).value;return Et({width:r.width,height:r.height,content:n})}export{Yt as default,te as init};
|
|
2
3
|
//# sourceMappingURL=index.js.map
|