Skip to content

Commit

Permalink
fix(vue): resolve import error and externals add vue
Browse files Browse the repository at this point in the history
  • Loading branch information
Zhengqbbb committed Mar 15, 2023
1 parent 06f0ffd commit 4a07b87
Show file tree
Hide file tree
Showing 19 changed files with 234 additions and 35 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<h1 align="center">X-Satori</h1>
<h1 align="center">x-satori</h1>

<p align="center">
<img alt="version" src="https://img.shields.io/npm/v/x-satori?color=212121&label=">
<a href="https://www.npmjs.com/package/x-satori">
<img alt="version" src="https://img.shields.io/npm/v/x-satori?color=212121&label=">
</a>
</p>

<pre align="center">Working in Progress</pre>
Expand Down
3 changes: 3 additions & 0 deletions build.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,7 @@ export default defineBuildConfig({
},
},
},
externals: [
'vue',
],
})
1 change: 1 addition & 0 deletions examples/vue/fonts
Binary file added examples/vue/image/og.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions examples/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
"vue": "^3.2.47"
},
"devDependencies": {
"@resvg/resvg-js": "^2.4.1",
"@types/node": "^18.15.3",
"tsx": "^3.12.5",
"x-satori": "workspace:*"
}
Expand Down
50 changes: 49 additions & 1 deletion examples/vue/to-png.mts
Original file line number Diff line number Diff line change
@@ -1,6 +1,54 @@
import { satoriVue, type SatoriOptions } from 'x-satori/vue'
import { renderAsync } from '@resvg/resvg-js'
import { fileURLToPath } from 'node:url'
import { readFile, writeFile } from 'node:fs/promises'
import { dirname, resolve } from 'path'

(async function () {
console.log(1)
const _dirname = typeof __dirname !== 'undefined'
? __dirname
: dirname(fileURLToPath(import.meta.url))
const _output = resolve(_dirname, './image/og.png')

const templateStr = await readFile(resolve(_dirname, './Template.vue'), 'utf8')
const opt: SatoriOptions = {
height: 628,
width: 1200,
fonts: [
{
name: 'Inter',
data: await readFile(resolve(_dirname, './fonts/Inter-Medium.woff')),
weight: 400,
style: 'normal',
},
{
name: 'Inter',
data: await readFile(resolve(_dirname, './fonts/Inter-Bold.woff')),
weight: 700,
style: 'normal',
},
{
name: 'Noto Sans Symbols',
data: await readFile(resolve(_dirname, './fonts/NotoSansSymbols2-Regular.ttf')),
weight: 700,
style: 'normal',
},
],
props: {
title: 'hello world',
desc: 'examples',
site: 'https://qbb.sh'
}
}
const strSVG = await satoriVue(opt, templateStr)

const render = await renderAsync(strSVG, {
fitTo: {
mode: 'width',
value: 1200,
},
})
return await writeFile(_output, render.asPng())
}()).catch((err: Error) => {
console.error(err)
process.exit(1)
Expand Down
14 changes: 7 additions & 7 deletions examples/vue/to-svg.mts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { genVueSatoriSVG, UserConfig } from 'x-satori/vue'
import { satoriVue, type SatoriOptions } from 'x-satori/vue'
import { fileURLToPath } from 'node:url'
import { readFile, writeFile } from 'node:fs/promises'
import { dirname, resolve } from 'pathe'
import { dirname, resolve } from 'path'

(async function () {
const _dirname = typeof __dirname !== 'undefined'
Expand All @@ -10,25 +10,25 @@ import { dirname, resolve } from 'pathe'
const _output = resolve(_dirname, './image/og.svg')

const templateStr = await readFile(resolve(_dirname, './Template.vue'), 'utf8')
const opt: UserConfig = {
const opt: SatoriOptions = {
height: 628,
width: 1200,
fonts: [
{
name: 'Inter',
data: await readFile(resolve(_dirname, './font/Inter-Medium.woff')),
data: await readFile(resolve(_dirname, './fonts/Inter-Medium.woff')),
weight: 400,
style: 'normal',
},
{
name: 'Inter',
data: await readFile(resolve(_dirname, './font/Inter-Bold.woff')),
data: await readFile(resolve(_dirname, './fonts/Inter-Bold.woff')),
weight: 700,
style: 'normal',
},
{
name: 'Noto Sans Symbols',
data: await readFile(resolve(_dirname, './font/NotoSansSymbols2-Regular.ttf')),
data: await readFile(resolve(_dirname, './fonts/NotoSansSymbols2-Regular.ttf')),
weight: 700,
style: 'normal',
},
Expand All @@ -39,7 +39,7 @@ import { dirname, resolve } from 'pathe'
site: 'https://qbb.sh'
}
}
const strSVG = await genVueSatoriSVG(opt, templateStr)
const strSVG = await satoriVue(opt, templateStr)

await writeFile(_output, strSVG)
}()).catch((err: Error) => {
Expand Down
1 change: 1 addition & 0 deletions examples/vue/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
// Enable top-level await, and other modern ESM features.
"target": "ESNext",
"module": "ESNext",
"types": ["node"],
// Enable node-style module resolution, for things like npm package imports.
"moduleResolution": "node",
// Enable JSON imports.
Expand Down
12 changes: 11 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,30 @@
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"typesVersions": {
"*": {
"*": [
"./dist/*"
]
}
},
"bin": {
"x-satori": "bin/x-satori.mjs"
},
"files": [
"dist",
"bin"
],
"engines": {
"node": ">=14"
},
"scripts": {
"dev": "unbuild --stub",
"build": "unbuild && cpx src/yoga.wasm dist/shared",
"start": "x-satori",
"cz": "czg",
"lint": "eslint .",
"postinstall": "simple-git-hooks && cpx node_modules/yoga-wasm-web/dist/yoga.wasm src",
"prepare": "simple-git-hooks && cpx node_modules/yoga-wasm-web/dist/yoga.wasm src",
"prepack": "npm run build",
"release": "run-s release:bump release:publish",
"release:bump": "bumpp -y -c 'build: :bookmark: publish v%s'",
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
130 changes: 130 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions src/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,21 @@ import satori, { init } from 'satori/wasm'
import { html } from 'satori-html'
import initYoga from 'yoga-wasm-web'
import { dirname, resolve } from 'pathe'
import type { UserConfig } from './types'
import type { SatoriOptions } from './types'

export async function initEnv() {
const _dirname = typeof __dirname !== 'undefined'
? __dirname
: dirname(fileURLToPath(import.meta.url))

const yoga = await initYoga(
// yoga.wasm from yoga-wasm-web/dist/yoga.wasm
await readFile((resolve(_dirname, './yoga.wasm'))),
)
init(yoga)
}

export async function genSatoriSVG(opts: UserConfig, renderedHtmlStr: string) {
export async function genSatoriSVG(opts: SatoriOptions, renderedHtmlStr: string) {
return await satori(
html(renderedHtmlStr),
opts,
Expand Down
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { type SatoriOptions } from './types'
export * from './core'
4 changes: 2 additions & 2 deletions src/types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { SatoriOptions } from 'satori'
import type { SatoriOptions as OriginSatoriOptions } from 'satori'

export type UserConfig = SatoriOptions & {
export type SatoriOptions = OriginSatoriOptions & {
/**
* component props
*/
Expand Down
Loading

0 comments on commit 4a07b87

Please sign in to comment.