@zulaica/site-bundler 0.4.3

package/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "es2022": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "plugins": [
+    "prettier"
+  ],
+  "rules": {
+    "no-var": "error"
+  }
+}

package/.gitattributes

@@ -0,0 +1,7 @@
+# Configuration Files
+.vscode/*.json     linguist-language=JSON5
+.eslintrc.json     linguist-language=JSON5
+.prettierrc.json   linguist-language=JSON5
+
+# Generated Files
+package-lock.json  linguist-generated

package/.github/workflows/lint.yml

@@ -0,0 +1,17 @@
+name: Lint Code Base
+
+on: pull_request
+
+jobs:
+  lint_javascript:
+    name: Lint JavaScript Files
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out branch
+        uses: actions/checkout@v3
+      - name: Install Node.js
+        uses: volta-cli/action@v1
+      - name: Install dependencies
+        run: npm ci
+      - name: Run lint script
+        run: npm run lint

package/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2
+}

package/.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}

package/.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  },
+  "editor.formatOnSave": true,
+  "eslint.run": "onSave",
+  "files.exclude": {
+    "**/.git": true,
+    "**/node_modules": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true
+  },
+  "search.exclude": {},
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  }
+}

package/README.md

@@ -0,0 +1,13 @@
+# 👷 Site Bundler
+
+## Installation
+
+```console
+npm install github:zulaica/site-bundler#v0.4.3 --save-dev
+```
+
+## Usage
+
+```console
+site-bundler --input <source-directory> --output <destination-directory>
+```

package/lib/helpers/constants.mjs

@@ -0,0 +1,74 @@
+export const OPTIONS = Object.freeze({
+  babel: {
+    presets: [
+      [
+        '@babel/env',
+        {
+          targets: 'defaults',
+          modules: false
+        }
+      ]
+    ],
+    babelrc: false,
+    comments: false,
+    configFile: false,
+    minified: true
+  },
+  postcss: {
+    cssnano: {
+      preset: [
+        'advanced',
+        {
+          minifyFontValues: false,
+          normalizeUrl: false,
+          normalizeString: {
+            preferredQuote: 'single'
+          }
+        }
+      ]
+    },
+    url: [
+      {
+        filter: '**/*.woff2',
+        url: 'rebase'
+      },
+      {
+        filter: '**/*.woff',
+        url: 'rebase'
+      },
+      {
+        filter: '**/*.ttf',
+        url: 'rebase'
+      },
+      {
+        filter: '**/*.webp',
+        url: (asset) => asset.relativePath
+      },
+      {
+        filter: '**/*.jpg',
+        url: (asset) => asset.relativePath
+      }
+    ]
+  },
+  posthtml: {
+    htmlnano: {
+      collapseWhitespace: 'aggressive',
+      minifyJs: false,
+      removeComments: 'all',
+      removeEmptyAttributes: false
+    }
+  }
+});
+
+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

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

package/lib/helpers/loggers.mjs

@@ -0,0 +1,16 @@
+import { exit, stderr, stdout } from 'process';
+import { cursorTo } from 'readline';
+import { EMOJI } from './index.mjs';
+
+export const logError = (error) => {
+  stderr.write(`\n${EMOJI.noEntry} An error has occurred\n`);
+  stderr.write(error.toString());
+  exit(1);
+};
+
+export const logMessage = (message, update = false) => {
+  if (update) {
+    cursorTo(stdout, 0, null);
+  }
+  stdout.write(message);
+};

package/lib/index.mjs

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+import { Command } 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,
+  preflight,
+  processCSS,
+  processHTML,
+  processJS
+} from './modules/index.mjs';
+
+const require = createRequire(import.meta.url);
+const { version } = require('../package.json');
+
+(async () => {
+  const program = new Command();
+  program
+    .version(version)
+    .requiredOption('-i, --input <input>', 'The source directory')
+    .requiredOption('-o, --output <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;
+          }
+        }
+      );
+    });
+
+  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);
+    logMessage(`${EMOJI.package} Finished!`);
+  } catch (error) {
+    logError(error);
+  } finally {
+    logMessage('\n\n');
+  }
+})();

package/lib/modules/copyAssets.mjs

@@ -0,0 +1,36 @@
+import { cp, readdir } from 'fs/promises';
+import { EMOJI, logError, 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);
+  }
+
+  if (!assets.length) {
+    return;
+  }
+
+  try {
+    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
+      );
+    }
+  } catch (error) {
+    logError(error);
+  } finally {
+    logMessage('\n');
+  }
+};
+
+export default copyAssets;

package/lib/modules/index.mjs

@@ -0,0 +1,7 @@
+import copyAssets from './copyAssets.mjs';
+import preflight from './preflight.mjs';
+import processCSS from './processCSS.mjs';
+import processHTML from './processHTML.mjs';
+import processJS from './processJS.mjs';
+
+export { copyAssets, preflight, processCSS, processHTML, processJS };

package/lib/modules/preflight.mjs

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

package/lib/modules/processCSS.mjs

@@ -0,0 +1,33 @@
+import cssnanoPlugin from 'cssnano';
+import { readFile, writeFile } from 'fs/promises';
+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';
+
+const processCSS = async (input, output, file) => {
+  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');
+  }
+};
+
+export default processCSS;

package/lib/modules/processHTML.mjs

@@ -0,0 +1,25 @@
+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';
+
+const processHTML = async (input, output, file) => {
+  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');
+  }
+};
+
+export default processHTML;

package/lib/modules/processJS.mjs

@@ -0,0 +1,41 @@
+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';
+
+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) => {
+  logMessage(`${EMOJI.barChart} Processing scripts`);
+
+  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');
+  }
+};
+
+export default processJS;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@zulaica/site-bundler",
+  "author": "David Zulaica",
+  "version": "0.4.3",
+  "type": "module",
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "license": "UNLICENSED",
+  "bin": {
+    "site-bundler": "lib/index.mjs"
+  },
+  "scripts": {
+    "lint": "eslint \"lib/**\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zulaica/personal-website-bundler.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zulaica/personal-website-bundler/issues"
+  },
+  "homepage": "https://github.com/zulaica/personal-website-bundler#readme",
+  "volta": {
+    "node": "16.18.1",
+    "npm": "8.19.2"
+  },
+  "dependencies": {
+    "@babel/core": "7.21.0",
+    "@babel/parser": "7.21.2",
+    "@babel/preset-env": "7.20.2",
+    "commander": "10.0.0",
+    "cssnano": "5.1.15",
+    "cssnano-preset-advanced": "5.3.10",
+    "htmlnano": "2.0.3",
+    "postcss": "8.4.21",
+    "postcss-import": "15.1.0",
+    "postcss-preset-env": "8.0.1",
+    "postcss-url": "10.1.3",
+    "posthtml": "0.16.6",
+    "posthtml-hash": "1.2.2",
+    "rollup": "3.19.1"
+  },
+  "devDependencies": {
+    "eslint": "8.36.0",
+    "eslint-config-prettier": "8.7.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "prettier": "2.8.4"
+  },
+  "description": "",
+  "main": "index.mjs",
+  "directories": {
+    "lib": "lib"
+  }
+}