shellfie 1.3.2 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shellfie",
-  "version": "1.3.2",
+  "version": "1.3.6",
   "description": "create beautiful terminal screenshots programmatically",
   "main": "shellfie.js",
   "directories": {
@@ -24,7 +24,7 @@
   "author": "Tal Hayut",
   "license": "MIT",
   "dependencies": {
-    "puppeteer": "^5.5.0",
+    "puppeteer": "latest",
     "xterm": "^4.14.1",
     "xterm-addon-fit": "^0.5.0"
   },

package/shellfie.js

@@ -5,98 +5,111 @@ const fs = require('fs').promises;
 const { getStyles } = require('./utils/styles');
 
 async function shellfie(data, config) {
-    try {
-        if (!data || data.length === 0) {
-            throw new Error('no data provided.\nshelffie needs a string || string[] to produce an image.')
-        }
-        const localPath = process.env.INIT_CWD || process.cwd();
-        const { name, location, style, theme, ext, puppeteerOptions, viewport, mode, rendererType } = getConfig(config, localPath);
-        const browser = await puppeteer.launch(puppeteerOptions);
-        const page = await browser.newPage();
+  try {
+    if (!data || data.length === 0) {
+      throw new Error('no data provided.\nshelffie needs a string || string[] to produce an image.');
+    }
+    const localPath = process.env.INIT_CWD || process.cwd();
+    const { 
+        name, 
+        location, 
+        style, 
+        theme, 
+        ext, 
+        puppeteerOptions, 
+        viewport, 
+        mode, 
+        rendererType 
+    } = getConfig(config,localPath);
+    const browser = await puppeteer.launch(puppeteerOptions);
+    const page = await browser.newPage();
 
-        await page.setViewport({ ...viewport, deviceScaleFactor: 4 });
-        // read html template
-        const templatePath = __dirname + '/template/template.html';
-        let html = await fs.readFile(templatePath, 'utf-8');
-        const lines = (Array.isArray(data) || mode === 'raw') ? data : data.split('\n');
+    await page.setViewport({ ...viewport, deviceScaleFactor: 4 });
+    // read html template
+    const templatePath = __dirname + '/template/template.html';
+    let html = await fs.readFile(templatePath, 'utf-8');
+    const lines = Array.isArray(data) || mode === 'raw' ? data : data.split('\n');
 
-        // inject js scripts
-        await page.addScriptTag({ path: require.resolve('xterm/lib/xterm.js') });
-        await page.addScriptTag({ path: require.resolve('xterm-addon-fit/lib/xterm-addon-fit.js') });
+    // inject js scripts
+    await page.addScriptTag({ path: require.resolve('xterm/lib/xterm.js') });
+    await page.addScriptTag({ path: require.resolve('xterm-addon-fit/lib/xterm-addon-fit.js') });
 
-        // set page html
-        await page.setContent(html);
-        await page.waitForSelector('.main');
-        page.on('console', txt => console.log(txt.text()));
-        
-        // setup terminal
-        await page.evaluate(({ options, lines, mode, viewport }) => {
-            const fit = new FitAddon.FitAddon();
-            const term = new Terminal({ ...options });
-            term.open(document.getElementById('terminal'));
-            term.loadAddon(fit);
-            term.writeln('');
-            
-            if (mode === 'default') {
-                lines.forEach(line => {
-                    line = line.replace(/\\x1.?\[/g, "\x1b[");
-                    line = `${line}\x1b[0m`;
-                    term.writeln(line);
-                });
-            } else {
-                if (Array.isArray(lines)) {
-                    lines = lines.length > 1 ? lines : lines[0]
-                }
-                lines = lines.replace(/\n/g, '\r\n');
-                term.write(lines.trim());
-            }
-            const height = viewport.height - 60;
-            document.querySelector('.xterm-screen').style.width = `${viewport.width}px`;
-            document.querySelector('.xterm-screen').style.height = `${height}px`;
-            fit.fit();
+    // set page html
+    await page.setContent(html);
+    await page.waitForSelector('.main');
+    page.on('console', (txt) => console.log(txt.text()));
 
-        }, { lines, mode, options: { theme, rendererType }, viewport });
-        
-        await page.evaluate((theme) => document.querySelector('.terminal').style.background = theme.background, theme);
-        const templateStyle = __dirname + '/template/template.css';
+    // setup terminal
+    await page.evaluate(
+      ({ options, lines, mode, viewport }) => {
+        const fit = new FitAddon.FitAddon();
+        const term = new Terminal({ ...options, convertEol: true });
+        term.open(document.getElementById('terminal'));
+        term.loadAddon(fit);
+        term.writeln('');
 
-        // inject user style
-        if (style) {
-            const styles = getStyles(style);
-            const className = rendererType === 'dom' ? '.terminal.xterm' : 'canvas';
-            const content = `${className} {${styles}}`
-            await page.addStyleTag({content})
+        if (mode === 'default') {
+          lines.forEach((line) => {
+            line = line.replace(/\\x1.?\[/g, "\x1b[");
+            line = `${line}\x1b[0m`;
+            term.writeln(line);
+          });
+        } else {
+          if (Array.isArray(lines)) {
+            lines = lines.length > 1 ? lines : lines[0];
+          }
+          lines = lines.replace(/\n/g, '\r\n');
+          term.write(lines.trim());
         }
+        const height = viewport.height - 60;
+        document.querySelector('.xterm-screen').style.width = `${viewport.width}px`;
+        document.querySelector('.xterm-screen').style.height = `${height}px`;
+        fit.fit();
+      },
+      { lines, mode, options: { theme, rendererType }, viewport }
+    );
 
-        // inject styles
-        await page.addStyleTag({ path: templateStyle });
-        await page.addStyleTag({ path: `${localPath}/node_modules/xterm/css/xterm.css` });
-        
+    await page.evaluate((theme) => (document.querySelector('.terminal').style.background = theme.background), theme);
+    const templateStyle = __dirname + '/template/template.css';
 
+    // inject user style
+    if (style) {
+      const styles = getStyles(style);
+      const className = rendererType === 'dom' ? '.terminal.xterm' : 'canvas';
+      const content = `${className} {${styles}}`;
+      console.log(content);
+      await page.addStyleTag({ content });
+    }
 
-        await page.evaluateHandle('document.fonts.ready');
-        
-        // crop image   
-        const clip = await (await page.$(".main")).boundingBox();
-        clip.height = Math.min(clip.height, page.viewport().height);
-        clip.width = Math.min(clip.width, page.viewport().width);
+    // inject styles
+    await page.addStyleTag({ path: templateStyle });
+    await page.addStyleTag({ path: `${localPath}/node_modules/xterm/css/xterm.css` });
 
-        await page.evaluate((height) => document.querySelector('.main').style.height = height, clip.height);
+    await page.evaluateHandle('document.fonts.ready');
 
-        // create shellfies dir
-        const pngsDir = path.resolve(location);
-        const exists = await fs.access(pngsDir).then(() => 1).catch(() => 0);
-        if (!exists) await fs.mkdir(pngsDir);
+    // crop image
+    const clip = await (await page.$('.main')).boundingBox();
+    clip.height = Math.min(clip.height, page.viewport().height);
+    clip.width = Math.min(clip.width, page.viewport().width);
 
-        // take screenshot
-        await page.screenshot({ path: `${pngsDir}/${name}.${ext}`, clip, omitBackground: true, type: ext });
-        await browser.close();
-    } catch (err) {
-        console.error(new Error(`\x1b[32mshellfie error: ${err.message}\x1b[0m`))
-        console.error(err.stack)
-        throw err;
-    }
-}
+    await page.evaluate((height) => (document.querySelector('.main').style.height = height), clip.height);
+
+    // create shellfies dir
+    const pngsDir = path.resolve(location);
+    const exists = await fs
+      .access(pngsDir)
+      .then(() => 1)
+      .catch(() => 0);
+    if (!exists) await fs.mkdir(pngsDir);
 
+    // take screenshot
+    await page.screenshot({ path: `${pngsDir}/${name}.${ext}`, clip, omitBackground: true, type: ext });
+    await browser.close();
+  } catch (err) {
+    console.error(new Error(`\x1b[32mshellfie error: ${err.message}\x1b[0m`));
+    console.error(err.stack);
+    throw err;
+  }
+}
 
-module.exports = shellfie
+module.exports = shellfie;

package/utils/styles.js

@@ -1,6 +1,9 @@
 function processLine(key, value) {
-    const [word] = key.match(/(^[a-z]|[A-Z0-9])[a-z]*/);
-    if (key !== word) key = `${word}-${key.replace(word, '').toLowerCase()}`;
+    const words = key.split(/(?=[A-Z])/);
+    if (words.length > 1) {
+      key = words.map(word => word.toLowerCase()).join('-')
+    }
+    
     return `${key}: ${value};`
 }