poops 1.9.4 → 1.9.6

package/README.md

@@ -216,8 +216,8 @@ You can freely remove the properties that you don't need. For example, if you do
 
 Scripts are bundled with [esbuild](https://esbuild.github.io/). Supports `.js`, `.ts`, `.jsx`, and `.tsx` files out of the box — including React and other JSX frameworks. You can specify multiple scripts to bundle. Each script has the following properties:
 
-- `in` - the input path, can be a file path, an array of file paths, or a glob pattern (e.g. `"src/js/*.js"`). Globs must use `/` separators (even on Windows)
-- `out` - the output path, can be a directory or a file path. With multiple inputs it must be a directory — entry points from different directories nest their output under the common ancestor (esbuild's `outbase`)
+- `in` - the input path, can be a file path, an array of file paths, or a glob pattern (e.g. `"src/js/*.js"`, `"src/elements/*/index.{js,mjs,cjs,jsx,ts,tsx}"`). Globs must use `/` separators (even on Windows)
+- `out` - the output path, can be a directory or a file path. With multiple inputs it must be a directory — entry points from different directories nest their output under the common ancestor (esbuild's `outbase`). A **glob-matched** `index.*` is named after its directory instead, placed relative to the glob's static prefix: `"src/elements/*/index.js"` gives `<out>/accordion.js`, while `"src/*/accordion/index.js"` keeps the differing segment as `<out>/blocks/accordion.js`. A literal `in: "src/index.js"` keeps its own basename. To name outputs yourself, `out` can be a **template**: `{{dir}}` is the input's directory relative to the glob's static prefix, `{{name}}` its basename without extension. `"src/elements/*/widget.ts"` with `out: "dist/js/{{dir}}-{{name}}.js"` gives `dist/js/accordion-widget.js` and `dist/js/tabs-widget.js` — one bundle per match, named by you instead of by the common ancestor. The template's extension is honoured too, so `out: "dist/esm/{{dir}}.mjs"` writes `.mjs` files
 - `options` - the options for the bundler. You can apply most of the esbuild options that are not in conflict with Poops. See [esbuild's options](https://esbuild.github.io/api/#build-api) for more info.
 
 **Options:**
@@ -350,8 +350,8 @@ Poops does not need `react` or `react-dom` as its own dependency — they are re
 
 Styles are bundled with [Dart Sass](https://sass-lang.com/dart-sass). You can specify multiple styles to bundle. Each style has the following properties:
 
-- `in` - the input path, can be a file path, an array of file paths, or a glob pattern (e.g. `"src/scss/*.scss"`). Globs must use `/` separators (even on Windows) and skip Sass partials (`_*.scss`). Each matched file is compiled separately
-- `out` - the output path, can be a directory or a file path. With multiple inputs it must be a directory — each input compiles to `<out>/<basename>.css`, so inputs sharing a basename (e.g. `a/main.scss` and `b/main.scss`) will overwrite each other
+- `in` - the input path, can be a file path, an array of file paths, or a glob pattern (e.g. `"src/scss/*.scss"`, `"src/elements/*/index.{scss,sass,css}"`). Globs must use `/` separators (even on Windows) and skip Sass partials (`_*.scss`). Each matched file is compiled separately
+- `out` - the output path, can be a directory or a file path. With multiple inputs it must be a directory — each input compiles to `<out>/<basename>.css`, so inputs sharing a basename (e.g. `a/main.scss` and `b/main.scss`) will overwrite each other. A **glob-matched** `index.*` is named after its directory instead, placed relative to the glob's static prefix: `"src/elements/*/index.scss"` gives `<out>/accordion.css`, while `"src/*/accordion/index.scss"` keeps the differing segment as `<out>/blocks/accordion.css`. A literal `in: "src/scss/index.scss"` keeps its own basename. To name outputs yourself, `out` can be a **template**: `{{dir}}` is the input's directory relative to the glob's static prefix, `{{name}}` its basename without extension. `"src/elements/*/theme.scss"` with `out: "dist/{{dir}}-theme.css"` gives `dist/accordion-theme.css` and `dist/tabs-theme.css` — one output per match, instead of every `theme.scss` overwriting the same `theme.css`
 - `options` - the options for the bundler.
 
 **Options:**

package/lib/copy.js

@@ -34,7 +34,7 @@ export default class Copy {
 
       for (const inEntry of inEntries) {
         const hasGlobMagic = typeof hasMagic === 'function'
-          ? hasMagic(inEntry)
+          ? hasMagic(inEntry, { magicalBraces: true })
           : ['*', '?', '[', ']', '{', '}', '(', ')', '!'].some((ch) => inEntry.includes(ch))
         let matches = []
         try {

package/lib/scripts.js

@@ -3,12 +3,21 @@ import { globSync, hasMagic } from 'glob'
 import { deepMerge } from 'book-of-spells'
 import {
   pathExists,
+  mkDir,
   mkPath,
   pathForFile,
+  isIndexEntry,
+  globBase,
+  indexEntryOut,
+  entryBase,
+  hasOutTemplate,
+  outTemplateBase,
+  fillOutTemplateEntry,
   fillBannerTemplate,
   buildTime,
   fileSize
 } from './utils/helpers.js'
+import path from 'node:path'
 import minifyToFile from './utils/minify.js'
 import log from './utils/log.js'
 
@@ -27,26 +36,50 @@ export default class Scripts {
       // `in` may be an array of entry points — pathExists on an array throws
       const configured = Array.isArray(scriptEntry.in) ? scriptEntry.in : [scriptEntry.in]
       const entryPoints = []
+      // A templated `out` names one output per entry point. esbuild already
+      // takes a per-entry `out` relative to `outdir` — the same door the
+      // `index.*` rename goes through — so the template resolves into that.
+      const templated = hasOutTemplate(scriptEntry.out)
+      const outBase = templated ? outTemplateBase(scriptEntry.out) : null
       let missing = false
       for (const entry of configured) {
-        if (hasMagic(entry)) {
+        if (hasMagic(entry, { magicalBraces: true })) {
           // Globs must use `/` even on Windows; sort for deterministic build order
           const matches = globSync(entry, { posix: true }).sort()
           if (!matches.length) {
             log({ tag: 'script', error: true, text: 'Entry does not exist:', link: entry })
             missing = true
           }
-          entryPoints.push(...matches)
+          // A glob-matched `index.js` is named after its directory, relative to
+          // the glob's static prefix — otherwise every component collides on
+          // `index.js` or nests a level deep under esbuild's outbase. Literal
+          // entries keep their basename — see `isIndexEntry`.
+          const base = globBase(entry)
+          entryPoints.push(...matches.map(match => {
+            if (templated) return { in: match, out: fillOutTemplateEntry(scriptEntry.out, match, base, outBase) }
+            return isIndexEntry(match) ? { in: match, out: indexEntryOut(match, base) } : match
+          }))
         } else if (!pathExists(entry)) {
           log({ tag: 'script', error: true, text: 'Entry does not exist:', link: entry })
           missing = true
+        } else if (templated) {
+          entryPoints.push({ in: entry, out: fillOutTemplateEntry(scriptEntry.out, entry, entryBase(entry), outBase) })
         } else {
           entryPoints.push(entry)
         }
       }
       if (missing) continue
-      mkPath(scriptEntry.out)
-      await this.compileEntry(entryPoints, scriptEntry.out, scriptEntry.options)
+      let options = scriptEntry.options
+      if (templated) {
+        mkDir(outBase)
+        // esbuild appends its own extension, so a template asking for one other
+        // than `.js` has to be honoured through `outExtension` or it's ignored
+        const ext = path.posix.extname(scriptEntry.out)
+        if (ext && ext !== '.js') options = { outExtension: { '.js': ext }, ...options }
+      } else {
+        mkPath(scriptEntry.out)
+      }
+      await this.compileEntry(entryPoints, templated ? outBase : scriptEntry.out, options)
     }
   }
 
@@ -78,6 +111,9 @@ export default class Scripts {
         log({ tag: 'error', text: 'Cannot output multiple script files to a single file. Please specify an output directory path instead.' })
         process.exit(1)
       }
+      // An explicit `outfile` names the output itself, so drop any `{ in, out }`
+      // wrapper the glob resolver added — esbuild rejects the pair.
+      opts.entryPoints = infilePath.map(entry => entry.in || entry)
       opts.outfile = outfilePath
     }
 

package/lib/styles.js

@@ -5,6 +5,12 @@ import {
   mkPath,
   pathForFile,
   buildStyleOutputFilePath,
+  isIndexEntry,
+  globBase,
+  indexEntryOut,
+  entryBase,
+  hasOutTemplate,
+  fillOutTemplate,
   fillBannerTemplate,
   buildTime,
   fileSize
@@ -20,19 +26,27 @@ export default class Styles {
   constructor(config) {
     this.config = config
     this.banner = config.banner ? fillBannerTemplate(config.banner) : null
+    // The css files the last compile wrote. Globs and templated `out` name a
+    // file per match, so the config alone can't say what landed where — the
+    // livereload chain reads this to hot-swap exactly the stylesheets rebuilt.
+    this.outputs = []
   }
 
   async compile() {
     if (!this.config.styles) return
+    this.outputs = []
     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) continue
       // `in` may be an array of entry points and/or globs — same resolution as scripts
       const configured = Array.isArray(styleEntry.in) ? styleEntry.in : [styleEntry.in]
       const entryPoints = []
+      const indexEntries = new Map()
+      const bases = new Map()
+      const templated = hasOutTemplate(styleEntry.out)
       let missing = false
       for (const entry of configured) {
-        if (hasMagic(entry)) {
+        if (hasMagic(entry, { magicalBraces: true })) {
           // Globs must use `/` even on Windows; sort for deterministic build order.
           // Skip sass partials (_*.scss) — they are imports, not entry points.
           const matches = globSync(entry, { posix: true }).filter(match => !path.basename(match).startsWith('_')).sort()
@@ -40,21 +54,36 @@ export default class Styles {
             log({ tag: 'style', error: true, text: 'Entry does not exist:', link: entry })
             missing = true
           }
+          // A glob-matched `index.scss` is named after its directory, relative
+          // to the glob's static prefix — otherwise every component collides on
+          // `index.css`. Literal entries keep their basename — see `isIndexEntry`.
+          const base = globBase(entry)
+          for (const match of matches) {
+            if (isIndexEntry(match)) indexEntries.set(match, indexEntryOut(match, base))
+            bases.set(match, base)
+          }
           entryPoints.push(...matches)
         } else if (!pathExists(entry)) {
           log({ tag: 'style', error: true, text: 'Entry does not exist:', link: entry })
           missing = true
         } else {
+          bases.set(entry, entryBase(entry))
           entryPoints.push(entry)
         }
       }
       if (missing) continue
-      if (entryPoints.length > 1 && pathForFile(styleEntry.out)) {
+      // A templated `out` resolves to a different file per entry point, so the
+      // single-file guard doesn't apply to it
+      if (!templated && entryPoints.length > 1 && pathForFile(styleEntry.out)) {
         log({ tag: 'error', text: 'Cannot output multiple style files to a single file. Please specify an output directory path instead.' })
         process.exit(1)
       }
       for (const entryPoint of entryPoints) {
-        await this.compileEntry(entryPoint, styleEntry.out, styleEntry.options)
+        // Resolve the index rename here, where `out` is still known to be a dir
+        let out = styleEntry.out
+        if (templated) out = fillOutTemplate(out, entryPoint, bases.get(entryPoint))
+        else if (indexEntries.has(entryPoint) && !pathForFile(out)) out = path.join(out, `${indexEntries.get(entryPoint)}.css`)
+        await this.compileEntry(entryPoint, out, styleEntry.options)
       }
     }
   }
@@ -98,6 +127,7 @@ export default class Styles {
     const mapsrc = options.sourcemap ? `\n/*# sourceMappingURL=${path.basename(outfilePath)}.map */` : ''
     if (this.banner) compiledSass.css = this.banner + '\n' + compiledSass.css
     fs.writeFileSync(outfilePath, compiledSass.css + mapsrc)
+    this.outputs.push(outfilePath) // after the write — a failed compile has nothing to reload
     const stylesEnd = performance.now()
     if (!options.justMinified) log({ tag: 'style', text: 'Compiled:', link: outfilePath, size: fileSize(outfilePath), time: buildTime(stylesStart, stylesEnd) })
 

package/lib/utils/helpers.js

@@ -34,10 +34,77 @@ export function insertMinSuffix(filePath) {
   return path.join(path.dirname(filePath), `${name}.min${ext}`)
 }
 
+// `index` is a directory entry point — name the output after the directory, so
+// `src/elements/accordion/index.scss` outputs `accordion.css`. Only applied to
+// glob matches: a literal `in: 'src/index.js'` keeps its own basename, since
+// renaming it to `src.js` would silently move an explicitly named output.
+export function isIndexEntry(inputPath) {
+  const { dir, name } = path.parse(inputPath)
+  return name === 'index' && !!dir && dir !== '.' && dir !== '..'
+}
+
+// The static prefix of a glob — everything before its first magic segment.
+// `src/elements/*/index.ts` → `src/elements`, `src/*/accordion/index.ts` → `src`.
+// Derived from the pattern alone, so it doesn't shift with what happened to match.
+export function globBase(pattern) {
+  const parts = toPosix(pattern).split('/')
+  const magicAt = parts.findIndex(part => hasMagic(part, { magicalBraces: true }))
+  return parts.slice(0, magicAt === -1 ? -1 : magicAt).join('/')
+}
+
+// Extension-less output path for a glob-matched `index.*`: the directory name,
+// keeping whatever nesting the glob's static prefix doesn't already account for.
+// A glob spanning several groups (`src/*/accordion/index.ts`) therefore stays
+// apart as `blocks/accordion` and `elements/accordion` instead of colliding.
+export function indexEntryOut(inputPath, base) {
+  const dir = path.posix.dirname(toPosix(inputPath))
+  const rel = base ? path.posix.relative(base, dir) : dir
+  return rel || path.posix.basename(dir)
+}
+
+// The `index.*` rename only saves entry points named `index` — every other
+// glob match still collapses onto its own basename, so `src/elements/*/theme.scss`
+// writes `theme.css` once per element and the last one wins. An `out` carrying
+// `{{dir}}`/`{{name}}` names one output per match instead.
+export function hasOutTemplate(outputPath) {
+  return /{{\s*(dir|name)\s*}}/.test(outputPath)
+}
+
+// `{{dir}}` is the match's directory relative to the glob's static prefix (the
+// same name `index.*` entries get), `{{name}}` its extension-less basename.
+export function fillOutTemplate(template, inputPath, base) {
+  const { name } = path.parse(inputPath)
+  return template
+    .replace(/{{\s*dir\s*}}/g, indexEntryOut(inputPath, base))
+    .replace(/{{\s*name\s*}}/g, name)
+}
+
+// What an entry's outputs are named relative to: a glob's static prefix, or a
+// literal entry's own directory (so `{{dir}}` is that directory's name).
+export function entryBase(entry) {
+  return hasMagic(entry, { magicalBraces: true }) ? globBase(entry) : path.posix.dirname(toPosix(entry))
+}
+
+// The fixed directory a templated `out` writes into — everything before its
+// first token. Only the tail varies per entry point, so this is the one part
+// esbuild (and the watcher's output zones) can be handed up front.
+export function outTemplateBase(outputPath) {
+  return path.posix.dirname(toPosix(outputPath).replace(/\{\{.*$/, ''))
+}
+
+// esbuild names an entry point's output itself, from an `out` that is relative
+// to `outdir` and carries no extension. Resolve the `out` template into that
+// shape so a templated scripts `out` goes through the same machinery the
+// `index.*` rename already uses.
+export function fillOutTemplateEntry(template, inputPath, base, outBase) {
+  const filled = toPosix(fillOutTemplate(template, inputPath, base))
+  return path.posix.relative(outBase, filled).replace(/\.[^./]*$/, '')
+}
+
 export function buildStyleOutputFilePath(inputPath, outputPath) {
   if (pathForFile(outputPath)) return outputPath
   const { name } = path.parse(inputPath)
-  return path.join(path.join(outputPath, `${name}.css`))
+  return path.join(outputPath, `${name}.css`)
 }
 
 export function fillBannerTemplate(template, packagesPath) {
@@ -185,7 +252,7 @@ export function pathContainsPathSegment(filePath, segment) {
   // Watcher paths arrive with native separators, config segments with `/`
   filePath = toPosix(filePath)
   segment = stripDirNavSegments(segment)
-  if (hasMagic(segment)) {
+  if (hasMagic(segment, { magicalBraces: true })) {
     segment = convertGlobToRegex(segment)
     if (!segment) return false
     return segment.test(filePath)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poops",
   "description": "Straightforward, no-bullshit bundler for the web.",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "license": "MIT",
   "type": "module",
   "main": "poops.js",

package/poops.js

@@ -3,7 +3,7 @@
 import chokidar from 'chokidar'
 import Copy from './lib/copy.js'
 import runExec, { validateExec } from './lib/exec.js'
-import { pathExists, doesFileBelongToPath, pathContainsPathSegment, deriveWatchDirs, toPosix } from './lib/utils/helpers.js'
+import { pathExists, doesFileBelongToPath, pathContainsPathSegment, deriveWatchDirs, toPosix, hasOutTemplate, outTemplateBase } from './lib/utils/helpers.js'
 import http from 'node:http'
 import net from 'node:net'
 import os from 'node:os'
@@ -89,17 +89,15 @@ function reload(file) {
   }, 500)
 }
 
-// The css output paths of the styles entries — what the styles chain reports
-// to reload() so style edits hot-swap. A directory `out` maps to the entry
-// point's basename, mirroring how the styles compiler names its output file.
+// The css files the last styles compile actually wrote — what the styles chain
+// reports to reload() so style edits hot-swap. Read off the compiler rather
+// than guessed from the config: a glob or a templated `out` names one output
+// per match, and a guessed path the browser has no stylesheet for silently
+// downgrades the hot-swap to a full page reload.
 // toPosix: the livereload client matches these against URL paths, so Windows
 // backslashes would silently break the CSS hot-swap.
-function styleOutputs(config) {
-  return [config.styles].flat()
-    .filter((entry) => entry && entry.in && entry.out)
-    .map((entry) => toPosix(path.extname(entry.out)
-      ? entry.out
-      : path.join(entry.out, path.basename(entry.in).replace(/\.(sass|scss)$/i, '.css'))))
+function styleOutputs(styles) {
+  return styles.outputs.map(toPosix)
 }
 
 // Per-stage shell hooks (config.exec). Runs after a stage compiles in both
@@ -135,7 +133,11 @@ function setupWatchers(config, modules) {
   // the watch list, or every compile retriggers itself.
   const outputZones = [config.scripts, config.styles].flat()
     .filter((entry) => entry && entry.out)
-    .map((entry) => (path.extname(entry.out) ? path.dirname(entry.out) : entry.out))
+    // A templated `out` is only static up to its first token, so zone on that
+    // prefix — `dist/{{dir}}/theme.css` writes into `dist`, not `dist/{{dir}}`
+    .map((entry) => (hasOutTemplate(entry.out)
+      ? outTemplateBase(entry.out)
+      : (path.extname(entry.out) ? path.dirname(entry.out) : entry.out)))
     .filter((zone) => zone && zone !== '.')
   const isBuildOutput = (file) => outputZones.some((zone) => pathContainsPathSegment(file, zone))
 
@@ -161,7 +163,7 @@ function setupWatchers(config, modules) {
 
   const recompileStyles = coalesce(() => {
     modules.styles.compile().then(() => modules.postcss.compile())
-      .then(() => { hook('styles'); styleOutputs(config).forEach((out) => reload(out)) })
+      .then(() => { hook('styles'); styleOutputs(modules.styles).forEach((out) => reload(out)) })
       .catch(err => console.error(err))
   })