poops 1.0.20 → 1.2.0

package/lib/postcss.js

@@ -0,0 +1,127 @@
+import { transform } from 'esbuild'
+import fs from 'node:fs'
+import {
+  pathExists,
+  mkPath,
+  insertMinSuffix,
+  buildStyleOutputFilePath,
+  fillBannerTemplate,
+  buildTime,
+  fileSize
+} from './utils/helpers.js'
+import log from './utils/log.js'
+
+let postcss
+
+async function loadPostCSS() {
+  if (postcss) return true
+  try {
+    postcss = (await import('postcss')).default
+    return true
+  } catch (err) {
+    log({ tag: 'postcss', error: true, text: 'Missing dependency. Install: npm i -D postcss' })
+    return false
+  }
+}
+
+async function resolvePlugins(plugins) {
+  if (!plugins || !plugins.length) return []
+
+  const resolved = []
+  for (const plugin of plugins) {
+    if (typeof plugin === 'string') {
+      try {
+        const mod = await import(plugin)
+        resolved.push((mod.default || mod)())
+      } catch (err) {
+        log({ tag: 'postcss', error: true, text: `Failed to load plugin: ${plugin}` })
+        throw err
+      }
+    } else if (Array.isArray(plugin)) {
+      const [name, options] = plugin
+      try {
+        const mod = await import(name)
+        resolved.push((mod.default || mod)(options))
+      } catch (err) {
+        log({ tag: 'postcss', error: true, text: `Failed to load plugin: ${name}` })
+        throw err
+      }
+    } else {
+      resolved.push(plugin)
+    }
+  }
+  return resolved
+}
+
+export default class PostCSS {
+  constructor(config) {
+    this.config = config
+    this.banner = config.banner ? fillBannerTemplate(config.banner) : null
+  }
+
+  async compile() {
+    if (!this.config.postcss) return
+    if (!(await loadPostCSS())) return
+
+    this.config.postcss = Array.isArray(this.config.postcss) ? this.config.postcss : [this.config.postcss]
+    for (const entry of this.config.postcss) {
+      if (entry.in && entry.out && pathExists(entry.in)) {
+        mkPath(entry.out)
+        await this.compileEntry(entry.in, entry.out, entry.options)
+      }
+    }
+  }
+
+  async compileEntry(infilePath, outfilePath, options = {}) {
+    outfilePath = buildStyleOutputFilePath(infilePath, outfilePath)
+
+    const input = fs.readFileSync(infilePath, 'utf-8')
+    const start = performance.now()
+
+    let result
+    try {
+      const plugins = await resolvePlugins(options.plugins)
+      const processor = postcss(plugins)
+      result = await processor.process(input, {
+        from: infilePath,
+        to: outfilePath
+      })
+    } catch (err) {
+      log({ tag: 'postcss', error: true, text: 'Failed compiling:', link: outfilePath })
+      console.error(err)
+      return
+    }
+
+    let css = result.css
+    if (this.banner) css = this.banner + '\n' + css
+    fs.writeFileSync(outfilePath, css)
+    const end = performance.now()
+    if (!options.justMinified) log({ tag: 'postcss', text: 'Compiled:', link: outfilePath, size: fileSize(outfilePath), time: buildTime(start, end) })
+
+    const minPath = insertMinSuffix(outfilePath)
+    if (options.minify) {
+      try {
+        const minStart = !options.justMinified ? performance.now() : start
+
+        const minified = await transform(css, {
+          loader: 'css',
+          minify: true
+        })
+
+        if (this.banner) minified.code = this.banner + '\n' + minified.code
+        fs.writeFileSync(minPath, minified.code)
+        const minEnd = performance.now()
+        log({ tag: 'postcss', text: 'Compiled:', link: minPath, size: fileSize(minPath), time: buildTime(minStart, minEnd) })
+      } catch (err) {
+        log({ tag: 'postcss', error: true, text: 'Failed compiling:', link: minPath })
+        console.error(err)
+      }
+
+      if (options.justMinified) {
+        fs.unlinkSync(outfilePath)
+      }
+    } else {
+      if (pathExists(minPath)) fs.unlinkSync(minPath)
+    }
+  }
+}

package/lib/reactor.js

@@ -0,0 +1,169 @@
+import { build, transform } from 'esbuild'
+import { deepMerge } from 'book-of-spells'
+import {
+  pathExists,
+  mkPath,
+  insertMinSuffix,
+  pathContainsPathSegment,
+  fillBannerTemplate,
+  buildTime,
+  fileSize
+} from './utils/helpers.js'
+import fs from 'node:fs'
+import path from 'node:path'
+import { createRequire } from 'node:module'
+import log from './utils/log.js'
+
+export default class Reactor {
+  constructor(config) {
+    this.config = config
+    this.rendered = {}
+    this.renderedChanged = false
+    this.banner = config.banner ? fillBannerTemplate(config.banner, config.pkg) : null
+  }
+
+  async compile() {
+    if (!this.config.reactor) return
+    this.config.reactor = Array.isArray(this.config.reactor) ? this.config.reactor : [this.config.reactor]
+    const prevRendered = this.rendered
+    this.rendered = {}
+
+    for (const entry of this.config.reactor) {
+      if (entry.component && entry.inject && pathExists(entry.component)) {
+        await this.compileEntry(entry)
+      }
+    }
+
+    this.renderedChanged = JSON.stringify(this.rendered) !== JSON.stringify(prevRendered)
+  }
+
+  async compileEntry(entry) {
+    const { component, in: client, out, inject, options = {} } = entry
+
+    // --- Step 1: Server-side render the component ---
+    const tmpWrapper = component.replace(/(\.[^.]+)$/, `.reactor-tmp-${inject}$1`)
+    const tmpBundle = component.replace(/(\.[^.]+)$/, `.reactor-bundle-${inject}.cjs`)
+
+    const wrapperCode = `
+import { renderToString } from 'react-dom/server';
+import React from 'react';
+import Component from './${path.basename(component)}';
+export const html = renderToString(React.createElement(Component));
+`
+
+    try {
+      fs.writeFileSync(tmpWrapper, wrapperCode)
+
+      const renderStart = performance.now()
+      await build({
+        logLevel: 'error',
+        entryPoints: [tmpWrapper],
+        outfile: tmpBundle,
+        bundle: true,
+        platform: 'node',
+        format: 'cjs',
+        jsx: 'automatic',
+        nodePaths: this.config.includePaths
+      })
+
+      const bundlePath = path.resolve(tmpBundle)
+      const require = createRequire(import.meta.url)
+      delete require.cache[bundlePath]
+      const mod = require(bundlePath)
+      this.rendered[inject] = mod.html
+      const renderEnd = performance.now()
+
+      log({ tag: 'reactor', text: `Rendered: ${component} →`, link: inject, time: buildTime(renderStart, renderEnd) })
+    } catch (err) {
+      log({ tag: 'reactor', error: true, text: 'Failed rendering:', link: component })
+      console.error(err)
+    } finally {
+      if (fs.existsSync(tmpWrapper)) fs.unlinkSync(tmpWrapper)
+      if (fs.existsSync(tmpBundle)) fs.unlinkSync(tmpBundle)
+    }
+
+    // --- Step 2: Bundle the client entry for the browser ---
+    if (client && out && pathExists(client)) {
+      mkPath(out)
+
+      const opts = {
+        logLevel: 'error',
+        entryPoints: [client],
+        outfile: out,
+        bundle: true,
+        sourcemap: false,
+        minify: false,
+        format: 'iife',
+        target: 'es2019',
+        nodePaths: this.config.includePaths
+      }
+
+      if (this.banner) {
+        opts.banner = {
+          js: this.banner,
+          css: this.banner
+        }
+      }
+
+      if (options.format) opts.format = options.format
+      if (options.target) opts.target = options.target
+      if (options.nodePaths) opts.nodePaths = [...new Set([...opts.nodePaths, ...options.nodePaths])]
+      if (options.sourcemap) opts.sourcemap = options.sourcemap
+
+      const optionsClone = { ...options }
+      delete optionsClone.justMinified
+      delete optionsClone.minify
+
+      deepMerge(opts, optionsClone)
+
+      const esbuildStart = performance.now()
+      try {
+        await build(opts)
+      } catch (err) {
+        log({ tag: 'reactor', error: true, text: 'Failed compiling client:', link: out })
+        console.error(err)
+        return
+      }
+      const esbuildEnd = performance.now()
+
+      if (!options.justMinified) log({ tag: 'reactor', text: 'Compiled:', link: out, size: fileSize(out), time: buildTime(esbuildStart, esbuildEnd) })
+      if (options.sourcemap) log({ tag: 'reactor', text: 'Compiled:', link: `${out}.map` })
+
+      if (options.minify) {
+        const minPath = insertMinSuffix(out)
+        try {
+          const terserStart = performance.now()
+          const minifyResult = await transform(fs.readFileSync(out, 'utf-8'), {
+            minify: true,
+            loader: 'js'
+          })
+          const terserEnd = performance.now()
+
+          if (this.banner) minifyResult.code = this.banner + '\n' + minifyResult.code
+          fs.writeFileSync(minPath, minifyResult.code)
+          log({ tag: 'reactor', text: 'Compiled:', link: minPath, size: fileSize(minPath), time: buildTime(terserStart, terserEnd) })
+        } catch (err) {
+          log({ tag: 'reactor', error: true, text: 'Failed compiling:', link: minPath })
+          console.error(err)
+        }
+
+        if (options.justMinified) {
+          fs.unlinkSync(out)
+        }
+      } else {
+        const minPath = insertMinSuffix(out)
+        if (pathExists(minPath)) fs.unlinkSync(minPath)
+      }
+    }
+  }
+
+  getRendered() {
+    return this.rendered
+  }
+
+  belongsToReactor(file) {
+    if (!this.config.reactor) return false
+    const entries = Array.isArray(this.config.reactor) ? this.config.reactor : [this.config.reactor]
+    return entries.some(e => e.component && pathContainsPathSegment(file, path.dirname(e.component)))
+  }
+}

package/lib/scripts.js

@@ -1,10 +1,6 @@
-const { build, transform } = require('esbuild')
-const deepmerge = require('deepmerge')
-const helpers = require('./utils/helpers.js')
-const fs = require('node:fs')
-const PrintStyle = require('./utils/print-style.js')
-
-const {
+import { build, transform } from 'esbuild'
+import { deepMerge } from 'book-of-spells'
+import {
   pathExists,
   mkPath,
   pathForFile,
@@ -13,19 +9,20 @@ const {
   fillBannerTemplate,
   buildTime,
   fileSize
-} = helpers
-
-const pstyle = new PrintStyle()
+} from './utils/helpers.js'
+import fs from 'node:fs'
+import log from './utils/log.js'
 
-module.exports = class Scripts {
+export default class Scripts {
   constructor(config) {
     this.config = config
-    this.banner = fillBannerTemplate(config.banner, config.pkg)
+    this.banner = config.banner ? fillBannerTemplate(config.banner, config.pkg) : null
   }
 
   async compile() {
     if (!this.config.scripts) return
     this.config.scripts = Array.isArray(this.config.scripts) ? this.config.scripts : [this.config.scripts]
+
     for (const scriptEntry of this.config.scripts) {
       if (scriptEntry.in && scriptEntry.out && pathExists(scriptEntry.in)) {
         mkPath(scriptEntry.out)
@@ -34,7 +31,7 @@ module.exports = class Scripts {
     }
   }
 
-  async compileEntry(infilePath, outfilePath, options = {}) {
+  async compileEntry(infilePath, outfilePath, options = {}, tag = 'script') {
     if (!Array.isArray(infilePath)) infilePath = [infilePath]
 
     const opts = {
@@ -59,7 +56,7 @@ module.exports = class Scripts {
       opts.outdir = outfilePath
     } else {
       if (infilePath.length > 1) {
-        console.log(`${pstyle.redBright + pstyle.bold}[error]${pstyle.reset} Cannot output multiple ${pstyle.bold + pstyle.underline}script${pstyle.reset} files to a single file. Please specify an output directory path instead.`)
+        log({ tag: 'error', text: 'Cannot output multiple script files to a single file. Please specify an output directory path instead.' })
         process.exit(1)
       }
       opts.outfile = outfilePath
@@ -74,15 +71,15 @@ module.exports = class Scripts {
     delete optionsClone.justMinified
     delete optionsClone.minify
 
-    // TODO: Use my own implementation of deepmerge to reduce dependencies, and also my own deepclone
-    deepmerge(opts, optionsClone) // ability to pass other esbuild options `node_modules/esbuild/lib/main.d.ts`
+    deepMerge(opts, optionsClone) // ability to pass other esbuild options `node_modules/esbuild/lib/main.d.ts`
 
     const esbuildStart = performance.now()
     try {
       await build(opts)
     } catch (err) {
-      console.log(`${pstyle.yellowBright + pstyle.bold}[script]${pstyle.reset} ${pstyle.redBright}[error]${pstyle.reset} ${pstyle.dim}Failed compiling:${pstyle.reset} ${pstyle.italic + pstyle.underline}${outfilePath}${pstyle.reset + pstyle.bell}`)
-      console.log(err)
+      log({ tag, error: true, text: 'Failed compiling:', link: outfilePath })
+      console.error(err)
+      return
     }
     const esbuildEnd = performance.now()
 
@@ -90,8 +87,8 @@ module.exports = class Scripts {
       const newOutFilePath = buildScriptOutputFilePath(entry, outfilePath)
       const minPath = insertMinSuffix(newOutFilePath)
 
-      if (!options.justMinified) console.log(`${pstyle.yellowBright + pstyle.bold}[script]${pstyle.reset} ${pstyle.dim}Compiled:${pstyle.reset} ${pstyle.italic + pstyle.underline}${newOutFilePath}${pstyle.reset} ${pstyle.greenBright}${fileSize(newOutFilePath)}${pstyle.reset} ${pstyle.green}(${buildTime(esbuildStart, esbuildEnd)})${pstyle.reset}`)
-      if (options.sourcemap) console.log(`${pstyle.yellowBright + pstyle.bold}[script]${pstyle.reset} ${pstyle.dim}Compiled:${pstyle.reset} ${pstyle.italic + pstyle.underline}${newOutFilePath}.map${pstyle.reset}`)
+      if (!options.justMinified) log({ tag, text: 'Compiled:', link: newOutFilePath, size: fileSize(newOutFilePath), time: buildTime(esbuildStart, esbuildEnd) })
+      if (options.sourcemap) log({ tag, text: 'Compiled:', link: `${newOutFilePath}.map` })
 
       if (options.minify) {
         try {
@@ -104,10 +101,10 @@ module.exports = class Scripts {
 
           if (this.banner) minifyResult.code = this.banner + '\n' + minifyResult.code
           fs.writeFileSync(minPath, minifyResult.code)
-          console.log(`${pstyle.yellowBright + pstyle.bold}[script]${pstyle.reset} ${pstyle.dim}Compiled:${pstyle.reset} ${pstyle.italic + pstyle.underline}${minPath}${pstyle.reset} ${pstyle.greenBright}${fileSize(minPath)}${pstyle.reset} ${pstyle.green}(${buildTime(terserStart, terserEnd)})${pstyle.reset}`)
+          log({ tag, text: 'Compiled:', link: minPath, size: fileSize(minPath), time: buildTime(terserStart, terserEnd) })
         } catch (err) {
-          console.log(`${pstyle.yellowBright + pstyle.bold}[script]${pstyle.reset} ${pstyle.redBright}[error]${pstyle.reset} ${pstyle.dim}Failed compiling:${pstyle.reset} ${pstyle.italic + pstyle.underline}${minPath}${pstyle.reset + pstyle.bell}`)
-          console.log(err)
+          log({ tag, error: true, text: 'Failed compiling:', link: minPath })
+          console.error(err)
         }
 
         if (options.justMinified) {

package/lib/styles.js

@@ -1,110 +1,21 @@
-const { transform } = require('esbuild')
-const fs = require('node:fs')
-const helpers = require('./utils/helpers.js')
-const path = require('node:path')
-const { pathToFileURL } = require('node:url')
-const sass = require('sass')
-const PrintStyle = require('./utils/print-style.js')
-
-const {
+import { transform } from 'esbuild'
+import fs from 'node:fs'
+import {
   pathExists,
-  pathIsDirectory,
   mkPath,
   insertMinSuffix,
   buildStyleOutputFilePath,
   fillBannerTemplate,
   buildTime,
   fileSize
-} = helpers
-
-const pstyle = new PrintStyle()
-
-function tryToFindFile(filePath, extensions) {
-  const pathParts = path.parse(filePath)
-  if (pathParts.ext && pathParts.ext.length > 0 && extensions.includes(pathParts.ext.slice(1))) {
-    if (fs.existsSync(filePath)) return filePath
-  }
-
-  let fileExt = extensions.find(ext => fs.existsSync(`${filePath}.${ext}`))
-  if (fileExt) return `${filePath}.${fileExt}`
-
-  if (!pathParts.name.startsWith('_')) {
-    pathParts.name = `_${pathParts.name}`
-    const underscoredFilePath = path.format(pathParts)
-    fileExt = extensions.find(ext => fs.existsSync(`${underscoredFilePath}.${ext}`))
-    if (fileExt) return `${underscoredFilePath}.${fileExt}`
-  }
-
-  return null
-}
-
-function extractMainPathFromPackageJson(packageJsonPath) {
-  if (!pathExists(packageJsonPath, 'package.json')) return null
-
-  const pkg = require(path.join(process.cwd(), packageJsonPath, 'package.json'))
-
-  const mainPath = pkg.sass || pkg.scss || pkg.style || pkg.css || pkg.main
-  if (!mainPath) return null
-
-  return mainPath
-}
-
-function getPackagePath(url) {
-  const parts = path.parse(url)
-  if (!parts.dir) return null
-  const dirChunks = parts.dir.split(path.sep)
-  if (dirChunks.length === 0) return null
-  if (dirChunks[0].startsWith('@') && dirChunks.length > 1) {
-    return path.join(dirChunks[0], dirChunks[1])
-  }
-  return dirChunks[0]
-}
-
-function sassPathResolver(url, resolvePath, infilePath) {
-  // check if resole path, like `node_modules` exists
-  const resolvedPath = pathToFileURL(resolvePath)
-  if (!fs.existsSync(resolvedPath.pathname)) return null
-  const importPath = path.relative(process.cwd(), path.join(resolvedPath.pathname, url))
-
-  // 1. Maybe it's a directory?
-  if (pathExists(importPath) && pathIsDirectory(importPath)) {
-    // Try to find an index file within the directory
-    const correctIndexFile = tryToFindFile(path.join(importPath, 'index'), ['sass', 'scss', 'css'])
-    if (correctIndexFile) return new URL(correctIndexFile, resolvedPath)
-
-    // package.json discovery
-    const style = extractMainPathFromPackageJson(importPath)
-
-    const stylePath = new URL(path.join(importPath, style), resolvedPath)
-    if (fs.existsSync(stylePath)) return stylePath
-  }
-
-  // 2. Maybe it's a file?
-  if (pathExists(importPath)) return pathToFileURL(importPath)
-
-  // 2.1 Try to find the correct file with different formats
-  const correctFile = tryToFindFile(importPath, ['sass', 'scss', 'css'])
-  if (correctFile) return new URL(correctFile, resolvedPath)
-
-  // 2.2 Maybe it's a file within a package?
-  const packagePath = getPackagePath(url)
-  if (packagePath) {
-    const packageFullPath = path.relative(process.cwd(), path.join(resolvedPath.pathname, packagePath))
-    const stylePath = extractMainPathFromPackageJson(packageFullPath)
-
-    if (stylePath) {
-      const styleDir = path.dirname(stylePath)
-      const styleFinalPath = path.join(packageFullPath, styleDir, url.replace(packagePath, ''))
-
-      const correctPackageFile = tryToFindFile(styleFinalPath, ['sass', 'scss', 'css'])
-      if (correctPackageFile) return new URL(correctPackageFile, resolvedPath)
-    }
-  }
-
-  return null
-}
-
-module.exports = class Styles {
+} from './utils/helpers.js'
+import path from 'node:path'
+import * as sass from 'sass'
+import log from './utils/log.js'
+import { sassPathResolver } from 'sass-path-resolver'
+import { sassTokenImporter } from 'sass-token-importer'
+
+export default class Styles {
   constructor(config) {
     this.config = config
     this.banner = config.banner ? fillBannerTemplate(config.banner) : null
@@ -124,19 +35,19 @@ module.exports = class Styles {
   async compileEntry(infilePath, outfilePath, options = {}) {
     const includePaths = this.config.includePaths || []
 
+    const importers = [sassPathResolver(includePaths)]
+
+    if (options.tokenPaths) {
+      const tokenOpts = {}
+      if (options.tokenOutput) tokenOpts.output = options.tokenOutput
+      if (options.resolveAliases !== undefined) tokenOpts.resolveAliases = options.resolveAliases
+      importers.push(sassTokenImporter(options.tokenPaths, tokenOpts))
+    }
+
     const opts = {
       sourceMap: false,
       sourceMapIncludeSources: false,
-      importers: [{
-        // Resolve `includePaths`.
-        findFileUrl(url) {
-          for (const includePath of includePaths) {
-            const resolvedPath = sassPathResolver(url, includePath, infilePath)
-            if (resolvedPath && pathExists(resolvedPath.pathname)) return resolvedPath
-          }
-          return null
-        }
-      }]
+      importers
     }
 
     if (options.sourcemap) {
@@ -151,8 +62,8 @@ module.exports = class Styles {
     try {
       compiledSass = sass.compile(infilePath, opts)
     } catch (err) {
-      console.log(`${pstyle.magentaBright + pstyle.bold}[style]${pstyle.reset} ${pstyle.redBright}[error]${pstyle.reset} ${pstyle.dim}Failed compiling:${pstyle.reset} ${pstyle.italic + pstyle.underline}${outfilePath}${pstyle.reset + pstyle.bell}`)
-      console.log(err)
+      log({ tag: 'style', error: true, text: 'Failed compiling:', link: outfilePath })
+      console.error(err)
       return
     }
 
@@ -160,12 +71,12 @@ module.exports = class Styles {
     if (this.banner) compiledSass.css = this.banner + '\n' + compiledSass.css
     fs.writeFileSync(outfilePath, compiledSass.css + mapsrc)
     const stylesEnd = performance.now()
-    if (!options.justMinified) console.log(`${pstyle.magentaBright + pstyle.bold}[style]${pstyle.reset} ${pstyle.dim}Compiled:${pstyle.reset} ${pstyle.italic + pstyle.underline}${outfilePath}${pstyle.reset} ${pstyle.greenBright}${fileSize(outfilePath)}${pstyle.reset} ${pstyle.green}(${buildTime(stylesStart, stylesEnd)})${pstyle.reset}`)
+    if (!options.justMinified) log({ tag: 'style', text: 'Compiled:', link: outfilePath, size: fileSize(outfilePath), time: buildTime(stylesStart, stylesEnd) })
 
     if (compiledSass.sourceMap) {
       if (this.banner) compiledSass.sourceMap.mappings = ';' + compiledSass.sourceMap.mappings
       fs.writeFileSync(`${outfilePath}.map`, JSON.stringify(compiledSass.sourceMap))
-      console.log(`${pstyle.magentaBright + pstyle.bold}[style]${pstyle.reset} ${pstyle.dim}Compiled:${pstyle.reset} ${pstyle.italic + pstyle.underline}${outfilePath}.map${pstyle.reset}`)
+      log({ tag: 'style', text: 'Compiled:', link: `${outfilePath}.map` })
     }
 
     const minPath = insertMinSuffix(outfilePath)
@@ -181,10 +92,10 @@ module.exports = class Styles {
         if (this.banner) minified.code = this.banner + '\n' + minified.code
         fs.writeFileSync(minPath, minified.code)
         const stylesMinEnd = performance.now()
-        console.log(`${pstyle.magentaBright + pstyle.bold}[style]${pstyle.reset} ${pstyle.dim}Compiled:${pstyle.reset} ${pstyle.italic + pstyle.underline}${minPath}${pstyle.reset} ${pstyle.greenBright}${fileSize(minPath)}${pstyle.reset} ${pstyle.green}(${buildTime(stylesMinStart, stylesMinEnd)})${pstyle.reset}`)
+        log({ tag: 'style', text: 'Compiled:', link: minPath, size: fileSize(minPath), time: buildTime(stylesMinStart, stylesMinEnd) })
       } catch (err) {
-        console.log(`${pstyle.magentaBright + pstyle.bold}[style]${pstyle.reset} ${pstyle.redBright}[error]${pstyle.reset} ${pstyle.dim}Failed compiling:${pstyle.reset} ${pstyle.italic + pstyle.underline}${minPath}${pstyle.reset + pstyle.bell}`)
-        console.log(err)
+        log({ tag: 'style', error: true, text: 'Failed compiling:', link: minPath })
+        console.error(err)
       }
 
       if (options.justMinified) {