Improve reading browserPath and css-doodle.

Author: yuanchuan

src/preview/index.js

@@ -3,7 +3,7 @@ import { spawn } from 'node:child_process';
 
 import puppeteer from 'puppeteer';
 
-import { previewServerPath, defaultAppArgs, config } from '../static.js';
+import { previewServerPath, getBrowserPath, defaultAppArgs, config } from '../static.js';
 
 const SIZE = '600,628';
 
@@ -47,13 +47,14 @@ export function preview(sourceFile, title, options = {}) {
                 ],
             };
 
-            if (config.browserPath) {
-                settings.executablePath = config.browserPath;
+            let browserPath = getBrowserPath();
+            if (browserPath) {
+                settings.executablePath = browserPath;
             }
 
             puppeteer.launch(settings)
                 .catch(e => {
-                    console.log(e.message);
+                    console.error(e.message);
                     serverProcess.kill();
                     process.exit(1);
                 });

src/preview/server.js

@@ -2,9 +2,10 @@ import { readFileSync } from 'node:fs';
 import { createServer } from 'http';
 import { WebSocketServer } from 'ws';
 import watch from 'node-watch';
-import { previewClient, cssDoodleLib } from '../static.js';
+import { previewClient, getCssDoodleLib } from '../static.js';
 
 const sourceFile = process.argv[2];
+const cssDoodleLib = getCssDoodleLib();
 const timers = {};
 
 if (!sourceFile) {

src/render.js

@@ -1,5 +1,5 @@
 import puppeteer from 'puppeteer';
-import { config, cssDoodleLib, defaultAppArgs } from './static.js';
+import { config, getCssDoodleLib, getBrowserPath, defaultAppArgs } from './static.js';
 
 export async function render(code, options = {}) {
     options.selector ??= 'css-doodle';
@@ -8,14 +8,15 @@ export async function render(code, options = {}) {
         args: defaultAppArgs
     };
 
-    if (config.browserPath) {
-        settings.executablePath = config.browserPath;
+    let browserPath = getBrowserPath();
+    if (browserPath) {
+        settings.executablePath = browserPath;
     }
 
     const browser = await puppeteer.launch(settings);
 
     const page = await browser.newPage();
-    await page.setContent(buildHTML(code, cssDoodleLib, options), { waitUntil: 'networkidle0', timeout: 5000 });
+    await page.setContent(buildHTML(code, getCssDoodleLib(), options), { waitUntil: 'networkidle0', timeout: 5000 });
 
     const data = await page.$eval(options.selector, el => {
         return {

src/static.js

@@ -40,11 +40,38 @@ function getDefaultAppArgs() {
     return args;
 }
 
+export function getCssDoodleLib() {
+    const libPath = config['css-doodle'];
+    if (libPath) {
+        if (fs.existsSync(libPath)) {
+            return fs.readFileSync(libPath, 'utf8');
+        } else {
+            console.warn(`[warn] css-doodle not found: ${libPath}. Use default css-doodle instead.`);
+            console.info('[info] Please check it with `config` command.\n');
+        }
+    }
+    return read('../node_modules/css-doodle/css-doodle.min.js');
+}
+
+export function getBrowserPath() {
+    const browserPath = config['browserPath']
+        || config['browser-path']
+        || config['executablePath']
+        || config['executable-path'];
+    if (browserPath) {
+        if (fs.existsSync(browserPath)) {
+            return browserPath;
+        } else {
+            console.warn(`[warn] Browser not found: ${browserPath}. Use default browser instead.`);
+            console.info('[info] Please check it with `config` command.\n');
+        }
+    }
+    return '';
+}
+
 export const config = JSON.parse(fs.readFileSync(configFilePath), 'utf8');
 export const configPath = configFilePath;
-
 export const pkg = JSON.parse(read('../package.json'));
-export const cssDoodleLib = read('../node_modules/css-doodle/css-doodle.min.js');
 export const previewClient = read('./preview/client.html');
 export const previewServerPath = join(root, './preview/server.js');
 export const defaultAppArgs = getDefaultAppArgs();