跳到主要内容

jsxp

jsxp

jsxp 是一个可以在 tsx 环境中,使用 puppeteer 对 React （tsx） 组件进行截图的库

AlemonJS 默认统一使用 jsxp 调用 puppeteer 对 React 组件进行生成截图

ProjectStatusDescription
jsxpjsxp-s打包工具

若使用VScode进行开发：安装插件 ES7+ React/Redux/React-Native snippets

安装​

yarn add jsxp -W

配置​

.puppeteerrc.cjs
/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = require('jsxp/.puppeteerrc')
lvy.config.ts
import { defineConfig } from 'lvyjs'
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'
// add jsxp
import { createServer as useJSXP } from 'jsxp'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
export default defineConfig({
  plugins: [
    {
      name: 'jsxp',
      // use jsxp
      useApp: () => process.argv.include('--view') && useJSXP()
    }
  ]
})

组件​

@src/image/component/Word.tsx
import React from 'react'
export default ({ name }) => {
  return (
    <html>
      <body>
        <div> {name} </div>
      </body>
    </html>
  )
}
@src/image/index.tsx
import React from 'react'
import { render, ObtainProps } from 'jsxp'
import Word from '@src/image/component/Word'
export const pictureRender = (Props: ObtainProps<typeof Word>) => {
  return render({
    // html/hello/uid.html
    path: 'hello',
    name: `${uid}.html`,
    component: <Word {...Props} />
  })
}

发送​

@src/apps/word/res.ts
import { useSend, Image, Text } from 'alemonjs'
import { pictureRender } from '@/src/image/index'
export default OnResponse(
  async event => {
    const UID = event.UserID
    // pic
    const img = await pictureRender(UID, {
      name: 'Hello Word !'
    })
    // 创建
    const Send = useSend(event)
    if (typeof img == 'boolean') {
      Send(Text('生产失败'))
    } else {
      Send(Image(img))
    }
  },
  'message.create',
  /pic/
)

调试​

jsxp.config.tsx
import React from 'react'
import { join } from 'path'
import { defineConfig } from 'jsxp'
import { readFileSync } from 'fs'
import Word from '@src/image/conpomnent/Word'
export default defineConfig({
  routes: {
    '/AssMessage': {
      component: <Word />
    }
  }
})
lvy启动
npx lvy dev --view

CSS​

tailwind​

tailwind.config.js
/**
 *  @type {import('tailwindcss').Config}
 */
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}']
}

postcss​

CSS预处理

postcss.config.cjs
module.exports = {
  plugins: {
    // 允许使用import导入css文件
    'postcss-import': {},
    // 允许使用嵌套语法
    'postcss-simple-vars': {},
    // nested
    'postcss-nested': {},
    // tailwindcss
    'tailwindcss': {},
    // 增加浏览器前缀
    'autoprefixer': {},
    // 内联url资源
    'postcss-url': {
      url: 'inline'
    },
    // 压缩css
    'cssnano': {
      preset: 'default'
    }
  }
}

入口​

@src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  /* 默认边距 */
  margin: 0;
  padding: 0;
  /* margin重叠 */
  display: flex;
  flex-direction: column;
}
@src/image/component/Word.tsx
import React from 'react'
import { LinkStyleSheet } from 'jsxp'
import css_output from '@src/input.css'
export default ({ name }) => {
  return (
    <html>
      <head>
        <LinkStyleSheet src={css_output} />
      </head>
      <body>
        <div> {name} </div>
      </body>
    </html>
  )
}