Add record function through option -t

Resolve #4

Author: yuanchuan

bin/index.js

@@ -45,7 +45,8 @@ program
     .option('-o, --output <output>', 'Custom filename of the generated image')
     .option('-x, --scale <scale>', 'Scale factor of the generated image, defaults to `2`')
     .option('-s, --selector <selector>', 'CSS selector to target the rendered node, defaults to `css-doodle`')
-    .option('-d, --delay <delay>', 'Delay in milliseconds after the image is rendered')
+    .option('-d, --delay <delay>', 'Delay after the image is rendered, e.g, `2s`')
+    .option('-t, --time <time>', 'Record screen for a specific time, e.g, `10s')
     .action(handleRender);
 
 program

lib/handler.js

@@ -6,28 +6,32 @@ import { config, configPath, configDownloadPath } from './static.js'
 import { generateSVG, generateShape } from './generate.js';
 import { parse } from './parse.js';
 import { preview } from './preview/index.js';
-import { render } from './render.js';
+import { render } from './render/index.js';
 import { read } from './read.js';
 
 export async function handleRender(source, options) {
     const { content, error, type } = await read(source);
     if (error) {
         return console.error(error.message);
     }
-    let title = 'image';
+    options.type = type;
+    options.delay = readTime(options.delay, { max: 30 * 1000 }) || 0;
+    options.time = readTime(options.time, { max: 60 * 1000 }) || 0;
+    options.scale = Number(options.scale) || 2;
+    options.selector ??= 'css-doodle';
+
+    let title = options.time ? 'record' : 'image';
     if (source) {
         const basename = path.basename(source);
         const extname = path.extname(basename);
         title = extname ? basename.split(extname)[0] : basename;
     }
     options.title = title;
-    options.type = type;
 
     try {
         const start = Date.now();
         const output = await render(content, options);
         const time = (Date.now() - start) / 1000;
-
         if (output) {
             console.log(`Saved to ${output}. (${time}s)`);
         }
@@ -182,3 +186,17 @@ async function fetchResource(url) {
     let res = await fetch(url, { redirect: 'follow' });
     return Buffer.from(await res.arrayBuffer()).toString();
 }
+
+function readTime(number, options = {}) {
+    let result = 0;
+    if (/^(\d+)(ms)?$/.test(number)) {
+        result = Number(number.replace('ms', ''));
+    }
+    if (/^(\d+)s$/.test(number)) {
+        result = Number(number.replace('s','')) * 1000;
+    }
+    if (/^(\d+)m$/.test(number)) {
+        result = Number(number.replace('m', '')) * 60 * 1000;
+    }
+    return Math.min(result, options.max ?? Infinity);
+}

lib/render.js

@@ -0,0 +1,94 @@
+import { setTimeout } from 'node:timers/promises';
+
+import puppeteer from 'puppeteer';
+
+import { getCssDoodleLib, getBrowserPath, defaultAppArgs } from '../static.js';
+import { screenshot } from './screenshot.js';
+import { screencast } from './screencast.js';
+
+export async function render(code, options = {}) {
+    const args = [
+        ...defaultAppArgs,
+        '--start-maximized',
+    ];
+
+    if (options.type === 'codepen') {
+        args.push('--ignore-certificate-errors');
+    }
+
+    const settings = {
+        defaultViewport: null,
+        args,
+    };
+
+    let browserPath = getBrowserPath();
+    if (browserPath) {
+        settings.executablePath = browserPath;
+    }
+
+    const browser = await puppeteer.launch(settings);
+    const page = await browser.newPage();
+
+    switch (options.type) {
+        case 'css': case 'cssd': case 'stdin': {
+            page.setContent(buildHTML(code, getCssDoodleLib()));
+            break;
+        }
+        case 'html': {
+            page.setContent(code);
+            break;
+        }
+        case 'codepen': {
+            await page.goto(code);
+            const iframe = await page.$('iframe#result');
+            if (iframe) {
+                const code = await page.evaluate(el => el.getAttribute('srcdoc'), iframe);
+                page.setContent(code, { waitUntil: 'networkidle0' });
+            } else {
+                throw new Error('eroor: read CodePen failed');
+            }
+            break;
+        }
+        default: {
+            throw new Error('error: invalid type `${options.type}`');
+        }
+    }
+
+    if (!options.output) {
+        let tag = Date.now();
+        if (/^(css|cssd|stdin)$/.test(options.type)) {
+            tag = await page.$eval('css-doodle', el => el.seed);
+        }
+        options.output = `${options.title || 'screenshot'}-${tag}.png`;
+    }
+
+    if (options.delay) {
+        await setTimeout(options.delay);
+    }
+
+    const output = options.time
+        ? await screencast(page, options)
+        : await screenshot(page, options);
+
+    await browser.close();
+    return output;
+}
+
+function buildHTML(code, cssDoodleLib) {
+    return `<!doctype html>
+    <html>
+    <head>
+        <meta charset="utf-8">
+        <style>
+            html, body, #container { margin: 0; padding: 0; width: 100%; height: 100% }
+            body, #container { display: grid; place-items: center; }
+        </style>
+        <script>${cssDoodleLib}</script>
+    </head>
+    <body>
+        <div id="container">
+            <css-doodle><template>${code}</template></css-doodle>
+        </div>
+    </body>
+    </html>`;
+}

lib/render/index.js

@@ -0,0 +1,50 @@
+import { setTimeout } from 'node:timers/promises';
+
+const defaultWidth = 1600;
+const defaultHeight = 900;
+
+export async function screencast(page, options) {
+    let { scale, output, selector } = options;
+
+    await page.setViewport({
+        width: defaultWidth,
+        height: defaultHeight,
+        deviceScaleFactor: scale
+    });
+
+    const clip = await page.evaluate(selector => {
+        const element = document.querySelector(selector);
+        if (element) {
+            const { width, height, x, y } = element.getBoundingClientRect();
+            return {
+                x, y,
+                width,
+                height: height || width,
+            }
+        } else {
+            const doc = document.documentElement;
+            return {
+                x: 0, y: 0,
+                width: doc.scrollWidth,
+                height: doc.scrollHeight,
+            }
+        }
+    }, selector);
+
+    await page.setViewport({
+        width: Math.ceil(clip.width) || defaultWidth,
+        height: Math.ceil(clip.height) || defaultHeight,
+        deviceScaleFactor: scale
+    });
+
+    output = options.output.replace(/\.png$/, '.webm');
+    const recorder = await page.screencast({
+        path: output,
+        scale: scale,
+        clip
+    });
+
+    await setTimeout(options.time);
+    await recorder.stop();
+    return output;
+}