@zulaica/site-bundler 0.5.1 → 0.6.0

package/README.md

@@ -9,5 +9,5 @@ npm install @zulaica/site-bundler --save-dev
 ## Usage
 
 ```sh
-site-bundler --input <source-directory> --output <destination-directory>
+site-bundler --input-dir <input-directory> --output-dir <output-directory>
 ```

package/lib/helpers/constants.mjs

@@ -1,3 +1,23 @@
+export const EMOJI = Object.freeze({
+  artistPalette: '\uD83C\uDFA8',
+  barChart: '\uD83D\uDCCA',
+  cardIndexDividers: '\uD83D\uDDC2',
+  constructionWorker: '\uD83D\uDC77',
+  fileCabinet: '\uD83D\uDDC4 ',
+  fileFolder: '\uD83D\uDCC1',
+  noEntry: '\u26D4\uFE0F',
+  package: '\uD83D\uDCE6',
+  wastebasket: '\ud83d\uddd1\ufe0f '
+});
+
+export const EXCLUSIONS = Object.freeze([
+  'index.html',
+  'script.hash.js',
+  'scripts',
+  'style.hash.css',
+  'styles'
+]);
+
 export const OPTIONS = Object.freeze({
   babel: {
     presets: [
@@ -59,16 +79,3 @@ export const OPTIONS = Object.freeze({
     }
   }
 });
-
-export const EMOJI = Object.freeze({
-  artistPalette: '\uD83C\uDFA8',
-  barChart: '\uD83D\uDCCA',
-  cardIndexDividers: '\uD83D\uDDC2',
-  construction: '\uD83D\uDEA7',
-  constructionWorker: '\uD83D\uDC77',
-  fileCabinet: '\uD83D\uDDC4 ',
-  fileFolder: '\uD83D\uDCC1',
-  noEntry: '\u26D4\uFE0F',
-  package: '\uD83D\uDCE6',
-  wastebasket: '\ud83d\uddd1\ufe0f '
-});

package/lib/helpers/index.mjs

@@ -1,4 +1,4 @@
-import { EMOJI, OPTIONS } from './constants.mjs';
+import { EMOJI, EXCLUSIONS, OPTIONS } from './constants.mjs';
 import { logError, logMessage } from './loggers.mjs';
 
-export { EMOJI, OPTIONS, logError, logMessage };
+export { EMOJI, EXCLUSIONS, OPTIONS, logError, logMessage };

package/lib/index.mjs

@@ -1,10 +1,7 @@
 #!/usr/bin/env node
 
-import { Command } from 'commander';
+import { program } from 'commander';
 import { readFile } from 'fs/promises';
-import { createRequire } from 'module';
-import { extname } from 'path';
-import posthtml from 'posthtml';
 import { EMOJI, logError, logMessage } from './helpers/index.mjs';
 import {
   copyAssets,
@@ -14,43 +11,24 @@ import {
   processJS
 } from './modules/index.mjs';
 
-const require = createRequire(import.meta.url);
-const { version } = require('../package.json');
-
 (async () => {
-  const program = new Command();
+  const { version } = JSON.parse(
+    await readFile(new URL('../package.json', import.meta.url))
+  );
   program
     .version(version)
-    .requiredOption('-i, --input <input>', 'The source directory')
-    .requiredOption('-o, --output <output>', 'The output directory')
+    .requiredOption('-i, --input-dir <input>', 'The input directory')
+    .requiredOption('-o, --output-dir <output>', 'The output directory')
     .parse();
-
-  const { input, output } = program.opts();
-  const files = { html: 'index.html', scripts: 'scripts', styles: 'styles' };
-  const data = await readFile(`${input}/index.html`, { encoding: 'utf8' });
-  posthtml()
-    .process(data)
-    .then(({ tree }) => {
-      tree.match(
-        [{ tag: 'script' }, { tag: 'link', attrs: { rel: 'stylesheet' } }],
-        (node) => {
-          if (node.attrs?.src || node.attrs?.href) {
-            const file = node.attrs.src ?? node.attrs.href;
-            const extension = extname(file).slice(1);
-            files[extension] = file;
-          }
-        }
-      );
-    });
+  const opts = program.opts();
 
   try {
     logMessage(`${EMOJI.constructionWorker} Site Bundler v${version}\n\n`);
-    logMessage(`${EMOJI.construction} Bundling release\n`);
-    await preflight(output);
-    await copyAssets(input, output, files);
-    await processCSS(input, output, files.css);
-    await processJS(input, output, files.js);
-    await processHTML(input, output, files.html);
+    await preflight(opts.outputDir);
+    await copyAssets(opts);
+    await processCSS(opts);
+    await processJS(opts);
+    await processHTML(opts);
     logMessage(`${EMOJI.package} Finished!`);
   } catch (error) {
     logError(error);

package/lib/modules/copyAssets.mjs

@@ -1,34 +1,27 @@
 import { cp, readdir } from 'fs/promises';
-import { EMOJI, logError, logMessage } from '../helpers/index.mjs';
+import { EMOJI, EXCLUSIONS, logMessage } from '../helpers/index.mjs';
 
-const copyAssets = async (input, output, files) => {
-  const assets = await readdir(input);
-  for (const file in files) {
-    assets.splice(assets.indexOf(files[file]), 1);
+const copyAssets = async ({ inputDir, outputDir }) => {
+  const assets = await readdir(inputDir);
+  for (const exclusion in EXCLUSIONS) {
+    assets.splice(assets.indexOf(exclusion), 1);
   }
 
-  if (!assets.length) {
-    return;
-  }
-
-  try {
+  if (assets.length) {
     logMessage(
       `${EMOJI.cardIndexDividers}  Copying assets (0/${assets.length})`
     );
     for (const [index, asset] of assets.entries()) {
-      await cp(`${input}/${asset}`, `${output}/${asset}`, {
-        recursive: true
-      });
       logMessage(
         `${EMOJI.cardIndexDividers}  Copying assets (${index + 1}/${
           assets.length
         })`,
         true
       );
+      await cp(`${inputDir}/${asset}`, `${outputDir}/${asset}`, {
+        recursive: true
+      });
     }
-  } catch (error) {
-    logError(error);
-  } finally {
     logMessage('\n');
   }
 };

package/lib/modules/preflight.mjs

@@ -1,30 +1,32 @@
 import { mkdir, readdir, rm } from 'fs/promises';
 import { EMOJI, logError, logMessage } from '../helpers/index.mjs';
 
-const preflight = async (output) => {
+const preflight = async (outputDir) => {
   try {
-    const files = await readdir(output);
-    logMessage(
-      `${EMOJI.wastebasket} Removing old release files (0/${files.length})`
-    );
-    for (const [index, file] of files.entries()) {
+    const files = await readdir(outputDir);
+
+    if (files.length) {
       logMessage(
-        `${EMOJI.wastebasket} Removing old release files (${index + 1}/${
-          files.length
-        })`,
-        true
+        `${EMOJI.wastebasket} Removing old ${outputDir} files (0/${files.length})`
       );
-      await rm(`${output}/${file}`, { recursive: true, force: true });
+      for (const [index, file] of files.entries()) {
+        logMessage(
+          `${EMOJI.wastebasket} Removing old ${outputDir} files (${index + 1}/${
+            files.length
+          })`,
+          true
+        );
+        await rm(`${outputDir}/${file}`, { recursive: true, force: true });
+      }
+      logMessage('\n');
     }
   } catch (error) {
     if (error.code === 'ENOENT') {
-      logMessage(`${EMOJI.fileFolder} Creating release directory`);
-      await mkdir(output);
+      logMessage(`${EMOJI.fileFolder} Creating ${outputDir} directory\n`);
+      await mkdir(outputDir);
     } else {
-      logError(error);
+      logError(`${error} \n`);
     }
-  } finally {
-    logMessage('\n');
   }
 };
 

package/lib/modules/processCSS.mjs

@@ -4,30 +4,29 @@ import postcss from 'postcss';
 import atImport from 'postcss-import';
 import postcssPresetEnv from 'postcss-preset-env';
 import url from 'postcss-url';
-import { EMOJI, logError, logMessage, OPTIONS } from '../helpers/index.mjs';
+import { EMOJI, OPTIONS, logMessage } from '../helpers/index.mjs';
 
-const processCSS = async (input, output, file) => {
+const processCSS = async ({ inputDir, outputDir }) => {
   logMessage(`${EMOJI.artistPalette} Processing styles`);
-  try {
-    const data = await readFile(`${input}/${file}`, {
-      encoding: 'utf8'
-    });
-    await postcss()
-      .use(atImport())
-      .use(postcssPresetEnv())
-      .use(url(OPTIONS.postcss.url))
-      .use(cssnanoPlugin(OPTIONS.postcss.cssnano))
-      .process(data, {
-        from: `${input}/${file}`
-      })
-      .then(({ css }) => {
-        writeFile(`${output}/${file}`, css, { encoding: 'utf8' });
-      });
-  } catch (error) {
-    logError(error);
-  } finally {
-    logMessage('\n');
-  }
+  const file = 'style.hash.css';
+  const input = `${inputDir}/${file}`;
+  const output = `${outputDir}/${file}`;
+
+  const data = await readFile(input, { encoding: 'utf8' });
+  const code = await _processData(input, data);
+  await writeFile(output, code);
+  logMessage('\n');
 };
 
+async function _processData(input, data) {
+  const { css } = await postcss()
+    .use(atImport())
+    .use(postcssPresetEnv())
+    .use(url(OPTIONS.postcss.url))
+    .use(cssnanoPlugin(OPTIONS.postcss.cssnano))
+    .process(data, { from: input });
+
+  return css;
+}
+
 export default processCSS;

package/lib/modules/processHTML.mjs

@@ -2,24 +2,27 @@ import { readFile, writeFile } from 'fs/promises';
 import htmlnano from 'htmlnano';
 import posthtml from 'posthtml';
 import { hash } from 'posthtml-hash';
-import { EMOJI, logError, logMessage, OPTIONS } from '../helpers/index.mjs';
+import { EMOJI, OPTIONS, logMessage } from '../helpers/index.mjs';
 
-const processHTML = async (input, output, file) => {
+const processHTML = async ({ inputDir, outputDir }) => {
   logMessage(`${EMOJI.fileCabinet} Processing HTML`);
-  try {
-    const data = await readFile(`${input}/${file}`, { encoding: 'utf8' });
-    await posthtml()
-      .use(htmlnano(OPTIONS.posthtml.htmlnano, htmlnano.presets.safe))
-      .use(hash({ path: output, pattern: new RegExp(/hash/) }))
-      .process(data)
-      .then(({ html }) => {
-        writeFile(`${output}/${file}`, html, { encoding: 'utf8' });
-      });
-  } catch (error) {
-    logError(error);
-  } finally {
-    logMessage('\n');
-  }
+  const file = 'index.html';
+  const input = `${inputDir}/${file}`;
+  const output = `${outputDir}/${file}`;
+
+  const data = await readFile(input, { encoding: 'utf8' });
+  const code = await _processData(outputDir, data);
+  await writeFile(output, code);
+  logMessage('\n');
 };
 
+async function _processData(outputDir, data) {
+  const { html } = await posthtml()
+    .use(htmlnano(OPTIONS.posthtml.htmlnano, htmlnano.presets.safe))
+    .use(hash({ path: outputDir, pattern: new RegExp(/hash/) }))
+    .process(data);
+
+  return html;
+}
+
 export default processHTML;

package/lib/modules/processJS.mjs

@@ -2,40 +2,32 @@ import { transformFromAstAsync } from '@babel/core';
 import { parse } from '@babel/parser';
 import { readFile, writeFile } from 'fs/promises';
 import { rollup } from 'rollup';
-import { EMOJI, logError, logMessage, OPTIONS } from '../helpers/index.mjs';
+import { EMOJI, OPTIONS, logMessage } from '../helpers/index.mjs';
 
-const bundleJS = async (input, output, file) => {
-  try {
-    const bundle = await rollup({
-      input: `${input}/${file}`
-    });
-    await bundle.write({
-      file: `${output}/${file}`
-    });
-    await bundle.close();
-  } catch (error) {
-    logError(error);
-  }
-};
-
-const processJS = async (input, output, file) => {
+const processJS = async ({ inputDir, outputDir }) => {
   logMessage(`${EMOJI.barChart} Processing scripts`);
+  const file = 'script.hash.js';
+  const input = `${inputDir}/${file}`;
+  const output = `${outputDir}/${file}`;
 
-  try {
-    await bundleJS(input, output, file);
-    const data = await readFile(`${output}/${file}`, {
-      encoding: 'utf8'
-    });
-    const ast = parse(data, {
-      sourceType: 'module'
-    });
-    const { code } = await transformFromAstAsync(ast, data, OPTIONS.babel);
-    await writeFile(`${output}/${file}`, code, { encoding: 'utf8' });
-  } catch (error) {
-    logError(error);
-  } finally {
-    logMessage('\n');
-  }
+  await _bundleJS(input, output);
+  const data = await readFile(output, { encoding: 'utf8' });
+  const code = await _processData(data);
+  await writeFile(output, code);
+  logMessage('\n');
 };
 
+async function _bundleJS(input, output) {
+  const bundle = await rollup({ input });
+  await bundle.write({ file: output });
+  await bundle.close();
+}
+
+async function _processData(data) {
+  const ast = parse(data, { sourceType: 'module' });
+  const { code } = await transformFromAstAsync(ast, data, OPTIONS.babel);
+
+  return code;
+}
+
 export default processJS;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zulaica/site-bundler",
   "author": "David Zulaica",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "engines": {
     "node": ">=18.19.1"