fix: release

zhinjs · Jun 20, 2024 · fd5c109 · fd5c109
1 parent cffbba3
commit fd5c109
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/packages/services/screenshot/package.json b/packages/services/screenshot/package.json
@@ -18,6 +18,8 @@
   "dependencies": {
     "zhin": "workspace:^",
     "vue": "^3.4.29",
+    "sass": "latest",
+    "less": "latest",
     "esbuild": "^0.14.8",
     "cheerio": "^1.0.0-rc.12",
     "esbuild-plugin-vue3": "^0.4.2"

diff --git a/packages/services/screenshot/src/adapters/vueRenderer.ts b/packages/services/screenshot/src/adapters/vueRenderer.ts
@@ -47,6 +47,11 @@ export class VueRenderer extends Renderer {
       // 6 生成入口html
       let entryHTMLContent = await readFile(path.join(templatePath, 'index.html'), 'utf8');
       const outputJS = await readFile(path.join(templatePath, 'app.js'), 'utf8');
+      if (existsSync(path.join(templatePath, 'app.css'))) {
+        const cssFile = path.join(templatePath, 'app.css');
+        entryHTMLContent = entryHTMLContent.replace('{{STYLE}}', await readFile(cssFile, 'utf8'));
+        needRemoveFiles.push(cssFile);
+      }
       entryHTMLContent = entryHTMLContent.replace('{{SCRIPT}}', outputJS);
       // 7. 渲染
       const result = await htmlRenderer.rendering(entryHTMLContent, options);

diff --git a/packages/services/screenshot/template/index.html b/packages/services/screenshot/template/index.html
@@ -3,6 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
+  <style>
+      {{STYLE}}
+  </style>
 </head>
 <body>
   <div id="app"></div>

diff --git a/test/plugins/Test.vue b/test/plugins/Test.vue
@@ -1,7 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineProps<{
+  who: string;
+}>();
+</script>
 
 <template>
-  <div>hello world</div>
+  <div>hello {{ who }}</div>
 </template>
-
-<style scoped lang="less"></style>
+<style lang="scss">
+div {
+  color: red;
+}
+</style>
diff --git a/test/plugins/screenshot-test.ts b/test/plugins/screenshot-test.ts
@@ -1,12 +1,16 @@
 import { Plugin } from 'zhin';
+import fs from 'fs';
 import '@zhinjs/plugin-screenshot';
 import path from 'path';
 const screenshotTest = new Plugin('screenshot');
 screenshotTest.required('renderVue');
 screenshotTest.mounted(async () => {
   const result = await screenshotTest.renderVue(path.join(__dirname, 'Test.vue'), {
-    encoding: 'base64',
+    props: {
+      who: '张三',
+    },
+    encoding: 'binary',
   });
-  console.log(result);
+  fs.writeFileSync(path.join(__dirname, 'test.jpg'), result);
 });
 export default screenshotTest;