poops 1.2.3 → 1.3.0

package/lib/styles.js

@@ -1,14 +1,13 @@
-import { transform } from 'esbuild'
 import fs from 'node:fs'
 import {
   pathExists,
   mkPath,
-  insertMinSuffix,
   buildStyleOutputFilePath,
   fillBannerTemplate,
   buildTime,
   fileSize
 } from './utils/helpers.js'
+import minifyToFile from './utils/minify.js'
 import path from 'node:path'
 import * as sass from 'sass'
 import log from './utils/log.js'
@@ -25,10 +24,13 @@ export default class Styles {
     if (!this.config.styles) return
     this.config.styles = Array.isArray(this.config.styles) ? this.config.styles : [this.config.styles]
     for (const styleEntry of this.config.styles) {
-      if (styleEntry.in && styleEntry.out && pathExists(styleEntry.in)) {
-        mkPath(styleEntry.out)
-        await this.compileEntry(styleEntry.in, styleEntry.out, styleEntry.options)
+      if (!styleEntry.in || !styleEntry.out) continue
+      if (!pathExists(styleEntry.in)) {
+        log({ tag: 'style', error: true, text: 'Entry does not exist:', link: styleEntry.in })
+        continue
       }
+      mkPath(styleEntry.out)
+      await this.compileEntry(styleEntry.in, styleEntry.out, styleEntry.options)
     }
   }
 
@@ -55,7 +57,7 @@ export default class Styles {
       opts.sourceMapIncludeSources = options.sourcemap
     }
 
-    outfilePath = buildStyleOutputFilePath(infilePath, outfilePath, options)
+    outfilePath = buildStyleOutputFilePath(infilePath, outfilePath)
 
     const stylesStart = performance.now()
     let compiledSass
@@ -79,30 +81,14 @@ export default class Styles {
       log({ tag: 'style', text: 'Compiled:', link: `${outfilePath}.map` })
     }
 
-    const minPath = insertMinSuffix(outfilePath)
-    if (options.minify) {
-      try {
-        const stylesMinStart = !options.justMinified ? performance.now() : stylesStart
-
-        const minified = await transform(compiledSass.css, {
-          loader: 'css',
-          minify: true
-        })
-
-        if (this.banner) minified.code = this.banner + '\n' + minified.code
-        fs.writeFileSync(minPath, minified.code)
-        const stylesMinEnd = performance.now()
-        log({ tag: 'style', text: 'Compiled:', link: minPath, size: fileSize(minPath), time: buildTime(stylesMinStart, stylesMinEnd) })
-      } catch (err) {
-        log({ tag: 'style', error: true, text: 'Failed compiling:', link: minPath })
-        console.error(err)
-      }
-
-      if (options.justMinified) {
-        fs.unlinkSync(outfilePath)
-      }
-    } else {
-      if (pathExists(minPath)) fs.unlinkSync(minPath)
-    }
+    await minifyToFile({
+      outfilePath,
+      loader: 'css',
+      code: compiledSass.css,
+      banner: this.banner,
+      tag: 'style',
+      options,
+      startTime: options.justMinified ? stylesStart : undefined
+    })
   }
 }

package/lib/utils/helpers.js

@@ -4,6 +4,10 @@ import path from 'node:path'
 import yaml from 'yaml'
 import { convertGlobToRegex } from 'book-of-spells'
 
+export function toPosix(filePath) {
+  return path.sep === '/' ? filePath : filePath.split(path.sep).join('/')
+}
+
 export function pathExists() {
   return fs.existsSync(path.join(...arguments))
 }
@@ -36,13 +40,6 @@ export function buildStyleOutputFilePath(inputPath, outputPath) {
   return path.join(path.join(outputPath, `${name}.css`))
 }
 
-export function buildScriptOutputFilePath(inputPath, outputPath) {
-  if (pathForFile(outputPath)) return outputPath
-  const { name, ext } = path.parse(inputPath)
-  const outExt = /\.(tsx?|jsx)$/i.test(ext) ? '.js' : ext
-  return path.join(outputPath, `${name}${outExt}`)
-}
-
 export function fillBannerTemplate(template, packagesPath) {
   packagesPath = packagesPath || process.cwd()
   const packagesFilePath = path.join(packagesPath, 'package.json')
@@ -63,13 +60,14 @@ export function fillBannerTemplate(template, packagesPath) {
 
 export function buildTime(start, end) {
   const time = Math.round(end - start)
-  if (time < 1000) return `${time}ms`
-  const seconds = Math.floor(time / 1000)
+  const minutes = Math.floor(time / 60000)
+  const seconds = Math.floor(time / 1000) % 60
   const ms = time % 1000
-  if (time < 60 * 1000) return `${seconds}s ${ms}ms`
-  const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = seconds % 60
-  return `${minutes}m ${remainingSeconds}s ${ms}ms`
+  const parts = []
+  if (minutes) parts.push(`${minutes}m`)
+  if (seconds) parts.push(`${seconds}s`)
+  if (ms) parts.push(`${ms}ms`)
+  return parts.join(' ') || '0ms'
 }
 
 export function fileSize(filePath) {
@@ -77,8 +75,12 @@ export function fileSize(filePath) {
   const fileSizeInBytes = stats.size
   if (fileSizeInBytes < 1000) return `${fileSizeInBytes}B`
   if (fileSizeInBytes < 1000 * 1000) return `${(fileSizeInBytes / 1000).toFixed(0)}KB`
-  if (fileSizeInBytes < 1000 * 1000 * 1000) return `${Math.floor(fileSizeInBytes / 1000 / 1000)}MB ${Math.floor((fileSizeInBytes % (1000 * 1000)) / 1000)}KB`
-  return fileSizeInBytes
+  if (fileSizeInBytes < 1000 * 1000 * 1000) {
+    const kb = Math.floor((fileSizeInBytes % (1000 * 1000)) / 1000)
+    return `${Math.floor(fileSizeInBytes / 1000 / 1000)}MB${kb ? ` ${kb}KB` : ''}`
+  }
+  const mb = Math.floor((fileSizeInBytes % (1000 * 1000 * 1000)) / 1000 / 1000)
+  return `${Math.floor(fileSizeInBytes / 1000 / 1000 / 1000)}GB${mb ? ` ${mb}MB` : ''}`
 }
 
 export function readJsonFile(filePath) {
@@ -146,10 +148,12 @@ export function copyDirectory(src, dest) {
 }
 
 export function stripDirNavSegments(filePath) {
-  return path.normalize(filePath).replace(/(\.\.\/|\.\/|\/\.\.|\.\.\\|\.\\|\\\.\.)/g, '')
+  return toPosix(path.normalize(filePath)).replace(/(\.\.\/|\.\/|\/\.\.|\.\.\\|\.\\|\\\.\.)/g, '')
 }
 
 export function pathContainsPathSegment(filePath, segment) {
+  // Watcher paths arrive with native separators, config segments with `/`
+  filePath = toPosix(filePath)
   segment = stripDirNavSegments(segment)
   if (hasMagic(segment)) {
     segment = convertGlobToRegex(segment)

package/lib/utils/log.js

@@ -8,6 +8,7 @@ const TAG_COLORS = {
   style: 'magentaBright',
   markup: 'cyanBright',
   copy: 'green',
+  image: 'greenBright',
   info: 'blue',
   error: 'redBright'
 }
@@ -18,18 +19,31 @@ const DEFAULT_COLOR = 'white'
  * @param {Object} options
  * @param {string} options.tag - Tag label (e.g. 'script', 'style', 'markup', 'reactor', 'copy', 'info')
  * @param {boolean} [options.error] - Whether this is an error message
+ * @param {boolean} [options.warn] - Whether this is a warning (does not fail the build)
  * @param {string} options.text - Main message text
  * @param {string} [options.link] - File path or URL to display underlined
  * @param {string} [options.size] - File size string
  * @param {string} [options.time] - Build time string
  */
-export default function log({ tag, error, text, link, size, time }) {
+let errorLogged = false
+
+// Build mode exits non-zero if any module reported an error, even ones
+// swallowed internally (log-and-continue). log() is the single point
+// every module error passes through, so the flag lives here.
+export function hasLoggedErrors() {
+  return errorLogged
+}
+
+export default function log({ tag, error, warn, text, link, size, time }) {
   if (tag === 'error') error = true
+  if (error) errorLogged = true
   const color = TAG_COLORS[tag] || DEFAULT_COLOR
   let msg = pstyle.paint(`{${color}.bold|[${tag}]}`)
 
   if (error) {
     msg += pstyle.paint(' {redBright.bold|[error]}')
+  } else if (warn) {
+    msg += pstyle.paint(' {yellowBright.bold|[warn]}')
   }
 
   msg += pstyle.paint(` {dim|${text}}`)

package/lib/utils/minify.js

@@ -0,0 +1,41 @@
+import { transform } from 'esbuild'
+import fs from 'node:fs'
+import { pathExists, insertMinSuffix, fileSize, buildTime } from './helpers.js'
+import log from './log.js'
+
+/**
+ * Shared post-compile minify step: writes `<name>.min<ext>` next to
+ * `outfilePath`, deletes the unminified file when `options.justMinified`,
+ * or deletes a stale `.min` file when minify is off.
+ *
+ * @param {Object} params
+ * @param {string} params.outfilePath - Compiled (unminified) output file
+ * @param {'js'|'css'} params.loader - esbuild transform loader
+ * @param {string} [params.code] - Source to minify; read from outfilePath when omitted
+ * @param {string} [params.banner] - Banner prepended to the minified code
+ * @param {string} params.tag - Log tag
+ * @param {Object} [params.options] - Entry options (`minify`, `justMinified`)
+ * @param {number} [params.startTime] - Timing start override (justMinified logs include compile time)
+ */
+export default async function minifyToFile({ outfilePath, loader, code, banner, tag, options = {}, startTime }) {
+  const minPath = insertMinSuffix(outfilePath)
+
+  if (!options.minify) {
+    if (pathExists(minPath)) fs.unlinkSync(minPath)
+    return
+  }
+
+  try {
+    const start = startTime ?? performance.now()
+    if (code == null) code = fs.readFileSync(outfilePath, 'utf-8')
+    const minified = await transform(code, { loader, minify: true })
+    if (banner) minified.code = banner + '\n' + minified.code
+    fs.writeFileSync(minPath, minified.code)
+    log({ tag, text: 'Compiled:', link: minPath, size: fileSize(minPath), time: buildTime(start, performance.now()) })
+  } catch (err) {
+    log({ tag, error: true, text: 'Failed compiling:', link: minPath })
+    console.error(err)
+  }
+
+  if (options.justMinified) fs.unlinkSync(outfilePath)
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poops",
   "description": "Straightforward, no-bullshit bundler for the web.",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "license": "MIT",
   "type": "module",
   "main": "poops.js",
@@ -34,16 +34,20 @@
     "static-site-generator"
   ],
   "peerDependencies": {
-    "postcss": "^8.0.0"
+    "postcss": "^8.0.0",
+    "poops-images": ">=1.2.0"
   },
   "peerDependenciesMeta": {
     "postcss": {
       "optional": true
+    },
+    "poops-images": {
+      "optional": true
     }
   },
   "scripts": {
     "build": "node ./poops.js -b",
-    "lint": "eslint ./poops.js",
+    "lint": "eslint .",
     "test": "NODE_OPTIONS='--experimental-vm-modules' jest"
   },
   "dependencies": {

package/poops.js

@@ -3,17 +3,18 @@
 import chokidar from 'chokidar'
 import connect from 'connect'
 import Copy from './lib/copy.js'
-import { pathExists, doesFileBelongToPath } from './lib/utils/helpers.js'
+import { pathExists, doesFileBelongToPath, pathContainsPathSegment } from './lib/utils/helpers.js'
 import http from 'node:http'
 import os from 'node:os'
 import fs from 'node:fs'
 import livereload from 'livereload'
 import Markups from './lib/markups.js'
+import Images from './lib/images.js'
 import path from 'node:path'
 import serveStatic from 'serve-static'
 import Reactor from './lib/reactor.js'
 import Scripts from './lib/scripts.js'
-import log, { styledLog } from './lib/utils/log.js'
+import log, { styledLog, hasLoggedErrors } from './lib/utils/log.js'
 import Styles from './lib/styles.js'
 import PostCSS from './lib/postcss.js'
 import Argoyle from 'argoyle'
@@ -72,7 +73,9 @@ function setupLiveReloadServer(config) {
 
   const liveReloadServer = livereload.createServer({
     exclusions: [...new Set(liveReloadExcludes)],
-    port: config.livereload_port
+    port: config.livereload_port,
+    exts: config.livereload.exts, // replaces the default watched extensions
+    extraExts: config.livereload.extraExts // adds to the defaults
   })
   styledLog(`🔃 {dim}LiveReload  :{/} ${liveReloadServer.config.port}`)
   console.log()
@@ -82,16 +85,27 @@ function setupLiveReloadServer(config) {
 function setupWatchers(config, modules) {
   if (!config.watch) return
 
-  // TODO: think about watching the updates of the config file itself, we can reload the config and recompile everything.
-  // TODO: ability to automatically create a watch list of directories if watch is set to true. The list will be generated from the `in` property of each task.
   // awaitWriteFinish: wait for saves to finish writing before recompiling, so a
   // mid-write (truncated/partial) file is never read. Fixes intermittent broken
-  // builds on editor save. ponytail: default thresholds are fine; bump if slow disks flake.
-  chokidar.watch(config.watch, {
-    ignoreInitial: true,
-    awaitWriteFinish: { stabilityThreshold: 150, pollInterval: 50 }
-  }).on('change', (file) => {
-    if (/(\.m?jsx?|\.tsx?)$/i.test(file)) {
+  // builds on editor save. Bump thresholds if slow disks flake.
+  // Shared by 'change' and 'add': editors with atomic saves (rename-write)
+  // fire unlink+add instead of change, so both events must trigger the same
+  // rebuilds. 'add' also covers genuinely new files (e.g. a new markup page).
+  // Rebuild branches shared by change/add/deletion: a deletion needs the same
+  // rebuilds (a deleted-but-still-imported file must surface the error).
+  // Scripts/styles outputs can land inside a watched dir (e.g. a Shopify
+  // theme's assets/): the compiler's own write must not retrigger that
+  // compiler, or watch loops forever. Zones are the dirs the compilers write
+  // into; only their own extensions are skipped there, so e.g. a hand-edited
+  // .liquid asset in the same dir still rebuilds markup.
+  const outputZones = [config.scripts, config.styles].flat()
+    .filter((entry) => entry && entry.out)
+    .map((entry) => (path.extname(entry.out) ? path.dirname(entry.out) : entry.out))
+    .filter((zone) => zone && zone !== '.')
+  const isBuildOutput = (file) => outputZones.some((zone) => pathContainsPathSegment(file, zone))
+
+  const rebuild = (file) => {
+    if (/(\.m?jsx?|\.tsx?)$/i.test(file) && !isBuildOutput(file)) {
       modules.scripts.compile().catch(err => console.error(err))
 
       if (modules.reactor.belongsToReactor(file)) {
@@ -103,33 +117,86 @@ function setupWatchers(config, modules) {
         }).catch(err => console.error(err))
       }
     }
-    if (/(\.sass|\.scss|\.css)$/i.test(file)) {
+    if (/(\.sass|\.scss|\.css)$/i.test(file) && !isBuildOutput(file)) {
       modules.styles.compile().then(() => modules.postcss.compile()).catch(err => console.error(err))
     }
     if (/(\.html|\.xml|\.rss|\.atom|\.njk|\.liquid|\.md)$/i.test(file)) {
       modules.markups.compile().then(() => modules.postcss.compile()).catch(err => console.error(err))
     }
 
-    // TODO: We can actually reload the page only if the data file from data has changed.
     if (/(\.json|\.ya?ml)$/i.test(file)) {
       modules.markups.reloadDataFiles().then(() => modules.markups.compile()).catch(err => console.error(err))
     }
+  }
 
+  // Source image extensions handled by poops-images. The doesFileBelongToPath
+  // guard (against config.images.in) also breaks the feedback loop: generated
+  // variants land in the `out` dir, never in `in`, so they don't retrigger.
+  const imageExtRe = /(\.jpe?g|\.png|\.tiff?|\.webp|\.heic|\.heif|\.svg|\.gif)$/i
+  const belongsToImages = (file) => imageExtRe.test(file) && doesFileBelongToPath(file, config.images)
+
+  const compileChanged = (file) => {
+    rebuild(file)
+    if (belongsToImages(file)) {
+      modules.images.compile()
+        .then(() => modules.markups.compile())
+        .then(() => modules.postcss.compile())
+        .catch(err => console.error(err))
+    }
     doesFileBelongToPath(file, config.copy) && modules.copy.execute().catch(err => console.error(err))
-  }).on('unlink', (file) => {
-    if (/(\.html|\.xml|\.rss|\.atom|\.njk|\.liquid|\.md)$/i.test(file)) {
-      modules.markups.compile().catch(err => console.error(err))
+  }
+
+  // Atomic-save editors (rename-write) fire unlink+add for every save, so an
+  // unlink only counts as a real deletion if no add for the same path follows
+  // within the settle window. Must outlive the 150ms awaitWriteFinish delay
+  // on 'add'. Fixed 300ms; make configurable if slow disks flake.
+  const UNLINK_SETTLE_MS = 300
+  const pendingUnlinks = new Map()
+
+  const scheduleUnlink = (target, handler) => {
+    clearTimeout(pendingUnlinks.get(target))
+    pendingUnlinks.set(target, setTimeout(() => {
+      pendingUnlinks.delete(target)
+      handler(target)
+    }, UNLINK_SETTLE_MS))
+  }
+
+  const handleDeleted = (file) => {
+    modules.markups.removeOutput(file)
+    if (belongsToImages(file)) {
+      // Deleted source: drop its variants + cache entry, then recompile markup
+      // so galleries/srcsets reading the image cache no longer reference it.
+      modules.images.remove(file)
+        .then(() => modules.markups.compile())
+        .then(() => modules.postcss.compile())
+        .catch(err => console.error(err))
     }
+    rebuild(file)
     modules.copy.unlink(file, doesFileBelongToPath(file, config.copy))
-  }).on('unlinkDir', (dirPath) => {
-    doesFileBelongToPath(dirPath, config.markup) && modules.markups.compile().catch(err => console.error(err))
-    modules.copy.unlink(dirPath, doesFileBelongToPath(dirPath, config.copy))
-  }).on('add', (file) => {
-    if (/(\.json|\.ya?ml)$/i.test(file)) {
-      modules.markups.reloadDataFiles().then(() => modules.markups.compile()).catch(err => console.error(err))
+  }
+
+  const handleDeletedDir = (dirPath) => {
+    modules.markups.removeOutput(dirPath)
+    if (doesFileBelongToPath(dirPath, config.markup)) {
+      modules.markups.compile().then(() => modules.postcss.compile()).catch(err => console.error(err))
     }
-    doesFileBelongToPath(file, config.copy) && modules.copy.execute().catch(err => console.error(err))
-  })
+    modules.copy.unlink(dirPath, doesFileBelongToPath(dirPath, config.copy))
+  }
+
+  chokidar.watch(config.watch, {
+    ignoreInitial: true,
+    awaitWriteFinish: { stabilityThreshold: 150, pollInterval: 50 }
+  }).on('change', compileChanged)
+    .on('add', (file) => {
+      const pending = pendingUnlinks.get(file)
+      if (pending) {
+        clearTimeout(pending)
+        pendingUnlinks.delete(file)
+      }
+      compileChanged(file)
+    })
+    .on('unlink', (file) => scheduleUnlink(file, handleDeleted))
+    .on('unlinkDir', (dirPath) => scheduleUnlink(dirPath, handleDeletedDir))
 }
 
 // Main function 💩
@@ -138,22 +205,32 @@ async function poops() {
   const postcss = new PostCSS(config)
   const reactor = new Reactor(config)
   const scripts = new Scripts(config)
+  const images = new Images(config)
   const markups = new Markups(config)
   const copy = new Copy(config)
 
-  try { await styles.compile() } catch (err) { console.error(err) }
-  try { await reactor.compile() } catch (err) { console.error(err) }
+  // Thrown errors are caught so one failing step doesn't stop the rest;
+  // `failed` + hasLoggedErrors() (module-internal, swallowed errors) decide
+  // the build exit code, so a broken compile can't ship as a green build.
+  let failed = false
+  const step = async(task) => {
+    try { await task() } catch (err) { failed = true; console.error(err) }
+  }
+
+  await step(() => styles.compile())
+  await step(() => reactor.compile())
   config.reactorData = reactor.getRendered()
-  try { await scripts.compile() } catch (err) { console.error(err) }
-  try { await markups.compile() } catch (err) { console.error(err) }
-  try { await postcss.compile() } catch (err) { console.error(err) }
-  try { await copy.execute() } catch (err) { console.error(err) }
+  await step(() => scripts.compile())
+  await step(() => images.compile()) // before markups: engines read the poops-images cache
+  await step(() => markups.compile())
+  await step(() => postcss.compile())
+  await step(() => copy.execute())
 
   if (build || (!config.watch && !config.livereload && !config.serve)) {
-    process.exit(0)
+    process.exit(failed || hasLoggedErrors() ? 1 : 0)
   }
 
-  setupWatchers(config, { styles, postcss, reactor, scripts, markups, copy })
+  setupWatchers(config, { styles, postcss, reactor, scripts, images, markups, copy })
 }
 
 // CLI Header
@@ -191,6 +268,12 @@ if (overrideBaseURL && config.markup) {
   config.markup.baseURL = overrideBaseURL
 }
 
+// poops-images resolves custom handlers/composites relative to the config file;
+// without this it would default to cwd. Matches poops-images' own loadConfig.
+if (config.images && typeof config.images === 'object' && config.images.configDir === undefined) {
+  config.images.configDir = path.dirname(configPath)
+}
+
 async function getAvailablePort(port, max) {
   while (port < max) {
     const status = await portscanner.checkPortStatus(port, 'localhost')
@@ -250,6 +333,11 @@ async function startServer() {
 // Start the webserver
 if (!build && config.serve) {
   startServer()
+} else if (!build && config.livereload) {
+  // livereload without serve: still needs the livereload server
+  resolveLiveReloadPort(config)
+    .then(poops)
+    .then(() => setupLiveReloadServer(config))
 } else {
   poops()
 }