buner 0.0.2 → 1.0.0

package/migrate-scss.ts

@@ -0,0 +1,42 @@
+/* eslint-disable no-console */
+import { execSync } from 'child_process';
+
+import { glob } from 'glob';
+
+const migration = async () => {
+  const usableFiles = ['./xpack/styles/root.scss'];
+
+  const forwardableFiles = [
+    './src/assets/styles/style-base.scss',
+    './src/assets/styles/style.all.scss',
+    './src/assets/styles/00-abstracts/_abstracts.scss',
+    './src/assets/styles/01-mixins/_mixins.scss',
+    './src/assets/styles/02-base/_base.scss',
+  ];
+
+  for (const file of forwardableFiles) {
+    try {
+      console.log(`Migrating ${file}`);
+      execSync(`bunx sass-migrator --migrate-deps module --forward=all ${file}`, { stdio: 'inherit' });
+    } catch (err) {
+      console.error((err as Error).message);
+    }
+  }
+
+  const componentFiles = await glob(['./src/atoms/**/*.scss', './src/molecules/**/*.scss', './src/organisms/**/*.scss'], { nodir: true });
+
+  const allFiles = [...usableFiles, ...componentFiles];
+
+  for (const file of allFiles) {
+    try {
+      console.log(`Migrating ${file}`);
+      execSync(`bunx sass-migrator module --migrate-deps ${file}`, { stdio: 'inherit' });
+    } catch (err) {
+      console.error((err as Error).message);
+    }
+  }
+};
+
+migration().catch((err) => {
+  console.error('An error occurred during migration:', (err as Error).message);
+});

package/package.json

@@ -1,15 +1,143 @@
 {
-  "version": "0.0.2",
   "name": "buner",
-  "module": "index.ts",
+  "version": "1.0.0",
+  "description": "Frontend build toolkit for Vite + React SSR projects — SCSS pipeline, prerender, SSR dev server, and backend integration.",
   "type": "module",
-  "devDependencies": {
-    "@types/bun": "latest"
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/precise-alloy/buner.git"
+  },
+  "homepage": "https://www.npmjs.com/package/buner",
+  "keywords": [
+    "vite",
+    "react",
+    "ssr",
+    "scss",
+    "prerender",
+    "frontend",
+    "build-tool",
+    "cli"
+  ],
+  "bin": {
+    "buner": "./bin/buner.js"
+  },
+  "files": [
+    "bin",
+    "cli",
+    "xpack",
+    "public",
+    "server.ts",
+    "prerender.ts",
+    "integration.ts",
+    "styles.ts",
+    "scripts.ts",
+    "states.ts",
+    "migrate-scss.ts",
+    "vite.config.ts",
+    "index.html",
+    "tsconfig.json",
+    "eslint.config.mjs",
+    "types.d.ts",
+    ".env",
+    ".env.development",
+    ".env.eshn",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "bun run dev",
+    "predev": "bun upgrade",
+    "dev": "concurrently --kill-others \"bun styles.ts --watch\" \"bun states.ts --watch\" \"cross-env scriptOnly=true vite build --mode development --watch\" \"bun server.ts --mode development\"",
+    "serve": "bun server.ts",
+    "watch": "bun server.ts",
+    "build": "bun run build:static && bun run build:server",
+    "build:eshn": "bun run build:static:eshn && bun run build:server:eshn",
+    "preview": "vite preview",
+    "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",
+    "build:server:eshn": "vite build --ssr src/entry-server.tsx --outDir dist/server --mode eshn",
+    "build:static": "vite build --outDir dist/static",
+    "build:static:eshn": "vite build --outDir dist/static --mode eshn",
+    "generate": "bun states.ts && bun run styles && bun run build && bun prerender.ts --add-hash",
+    "eshn": "bun states.ts && bun run styles && bun run build:eshn && bun prerender.ts --add-hash --mode eshn",
+    "inte": "bun run styles && bun run build && bun prerender.ts && bun integration.ts",
+    "styles": "bun styles.ts",
+    "format": "prettier --write .",
+    "lint": "eslint --fix",
+    "cli:start": "vite build -c vite.cli.config.ts --watch",
+    "cli:build": "vite build -c vite.cli.config.ts"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^5.1.4",
+    "autoprefixer": "^10.4.27",
+    "chalk": "^5.5.0",
+    "cheerio": "^1.2.0",
+    "chokidar": "^4.0.3",
+    "commander": "^14.0.3",
+    "concurrently": "^9.2.0",
+    "cross-env": "^10.1.0",
+    "cssnano": "^7.1.0",
+    "debounce": "^3.0.0",
+    "express": "^5.2.1",
+    "glob": "^13.0.6",
+    "globby": "^16.1.1",
+    "js-beautify": "^1.15.4",
+    "lodash": "^4.17.21",
+    "magic-string": "^0.30.17",
+    "node-fetch": "^3.3.2",
+    "postcss": "^8.5.8",
+    "prompts": "^2.4.2",
+    "sass": "^1.89.2",
+    "slash": "^5.1.0",
+    "validate-npm-package-name": "^7.0.0",
+    "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "typescript": "^5"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.0",
+    "@next/eslint-plugin-next": "^16.0.8",
+    "@types/css": "^0.0.38",
+    "@types/debounce": "^1.2.4",
+    "@types/express": "^5.0.6",
+    "@types/js-beautify": "^1.14.3",
+    "@types/lodash": "^4.17.24",
+    "@types/node": "^24.11.0",
+    "@types/prettier": "^3.0.0",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.1.7",
+    "@types/validate-npm-package-name": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "css": "^3.0.0",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "^16.0.8",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^16.3.0",
+    "msw": "^2.12.10",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.6.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1",
+    "rollup": "^4.59.0",
+    "svgo": "^4.0.0"
   },
-  "publishConfig": {
-    "access": "public"
+  "msw": {
+    "workerDirectory": "public"
   }
 }

package/prerender.ts

@@ -0,0 +1,229 @@
+/* eslint-disable no-console */
+// Pre-render the app into static HTML.
+// run `npm run generate` and then `dist/static` can be served as a static site.
+
+import fs from 'fs';
+import path from 'path';
+import { pathToFileURL } from 'url';
+import crypto from 'node:crypto';
+
+import jsBeautify, { CSSBeautifyOptions, HTMLBeautifyOptions, JSBeautifyOptions } from 'js-beautify';
+import * as cheerio from 'cheerio';
+import slash from 'slash';
+import _ from 'lodash';
+import { loadEnv } from 'vite';
+import chalk from 'chalk';
+
+interface RenderedPage {
+  name: string;
+  url: string;
+  fileName: string;
+}
+const argvModeIndex = process.argv.indexOf('--mode');
+const mode =
+  argvModeIndex >= 0 && argvModeIndex < process.argv.length - 1 && !process.argv[argvModeIndex + 1].startsWith('-')
+    ? process.argv[argvModeIndex + 1]
+    : 'production';
+
+const projectRoot = process.cwd();
+const xpackEnv = loadEnv(mode, projectRoot);
+const toAbsolute = (p: string) => path.resolve(projectRoot, p);
+const log = console.log.bind(console);
+
+const template = fs.readFileSync(toAbsolute(process.env.VITE_TEMPLATE ?? 'dist/static/index.html'), 'utf-8');
+const { render, routesToPrerender } = await import(pathToFileURL(toAbsolute('./dist/server/entry-server.js')).href);
+
+const beautifyOptions: HTMLBeautifyOptions | JSBeautifyOptions | CSSBeautifyOptions = {
+  indent_size: 2,
+  indent_char: ' ',
+  keep_array_indentation: false,
+  break_chained_methods: false,
+  indent_scripts: 'normal',
+  brace_style: 'collapse',
+  space_before_conditional: true,
+  unescape_strings: false,
+  jslint_happy: false,
+  end_with_newline: false,
+  wrap_line_length: 0,
+  indent_inner_html: false,
+  comma_first: false,
+  e4x: false,
+  indent_empty_lines: false,
+  wrap_attributes: 'force',
+  max_preserve_newlines: 5,
+  preserve_newlines: true,
+};
+
+// determine routes to pre-render from src/pages
+
+const updateResourcePath = ($: cheerio.CheerioAPI, tagName: string, attr: string, addHash: boolean) => {
+  $(tagName).each((_, el) => {
+    const href = $(el).attr(attr);
+
+    if (href && href.startsWith('/')) {
+      let newPath = href;
+
+      if (process.env.VITE_DOMAIN) {
+        newPath = process.env.VITE_DOMAIN + newPath;
+      }
+
+      if (
+        href.startsWith(xpackEnv.VITE_BASE_URL) &&
+        !href.startsWith(xpackEnv.VITE_BASE_URL + 'assets/vendors/') &&
+        ['.css', '.ico', '.js', '.webmanifest', '.svg'].includes(path.extname(href).toLowerCase()) &&
+        !/\.0x[a-z0-9]{8}\.\w+$/gi.test(href)
+      ) {
+        const path = toAbsolute('dist/static/' + href.substring(xpackEnv.VITE_BASE_URL.length));
+
+        if (fs.existsSync(path)) {
+          const content = fs.readFileSync(path);
+          const sha1Hash = crypto.createHash('sha1');
+
+          sha1Hash.update(content);
+          const hash = sha1Hash.digest('base64url').substring(0, 10);
+
+          if (addHash) {
+            newPath += '?v=' + hash;
+          }
+        } else if (path.endsWith('mock-api.js')) {
+          // Skip
+        } else {
+          // Log warning
+          log(chalk.yellow('Cannot find:', path));
+        }
+      }
+
+      if (newPath != href) {
+        $(el).attr(attr, newPath);
+      }
+    }
+  });
+};
+
+const removeStyleBase = ($: cheerio.CheerioAPI) => {
+  $('link[rel="stylesheet"]').each((_, el) => {
+    const href = $(el).attr('href');
+
+    if (href?.includes('style-base')) {
+      $(el).remove();
+    }
+  });
+};
+
+const removeDuplicateAssets = ($: cheerio.CheerioAPI, selector: string, attr: string, paths: string[]) => {
+  $(selector).each((_, el) => {
+    if ($(el).attr('data-pl-inplace') === 'true') {
+      return;
+    }
+
+    const path = $(el).attr(attr);
+
+    if (!path) {
+      return;
+    }
+
+    const index = $(el).index();
+    const parent = $(el).parent().clone();
+    const child = parent.children()[index];
+
+    parent.empty();
+    parent.append(child);
+    const html = parent.html();
+
+    $(el).after('\n<!-- ' + html + ' -->');
+
+    if (paths.includes(path)) {
+      $(el).remove();
+
+      return;
+    }
+
+    paths.push(path);
+
+    $(el).removeAttr('data-pl-require');
+
+    if ($(el).attr('type') === 'module') {
+      const deferValue = $(el).attr('defer');
+
+      if ($(el).attr('defer') === '' || deferValue === 'defer' || deferValue === 'true') {
+        $(el).removeAttr('defer');
+      }
+    }
+
+    $('head').append(el);
+  });
+};
+
+const viteAbsoluteUrl = (remain: string, addExtension = false): string => {
+  const baseUrl = xpackEnv.VITE_BASE_URL;
+  const normalizedRemain =
+    (remain?.startsWith('/') ? remain : '/' + remain) + (addExtension && !remain.endsWith('/') ? (xpackEnv.VITE_PATH_EXTENSION ?? '') : '');
+
+  if (!baseUrl) {
+    return normalizedRemain;
+  }
+
+  if (!baseUrl.endsWith('/')) {
+    return baseUrl + normalizedRemain;
+  }
+
+  const len = baseUrl.length;
+
+  return baseUrl.substring(0, len - 1) + normalizedRemain;
+};
+
+const renderPage = async (renderedPages: RenderedPage[], addHash: boolean) => {
+  // pre-render each route...
+  for (const route of routesToPrerender) {
+    const output = await render(viteAbsoluteUrl(route.route, true));
+
+    const destLocalizedFolderPath = toAbsolute('dist/static');
+
+    let html = template.replace('<!--app-html-->', output.html ?? '').replace('@style.scss', '/assets/css/' + route.name + '.css');
+    const $ = cheerio.load(html);
+    const paths: string[] = [];
+
+    removeDuplicateAssets($, 'link[data-pl-require][href]', 'href', paths);
+    removeDuplicateAssets($, 'script[data-pl-require][src]', 'src', paths);
+    updateResourcePath($, 'link', 'href', addHash);
+    updateResourcePath($, 'script', 'src', addHash);
+    updateResourcePath($, 'img', 'src', addHash);
+    if (route.route === '/') {
+      removeStyleBase($);
+    }
+
+    $('head title').text(route.name);
+
+    const fileName = (route.route === '/' ? '/index' : route.route) + '.html';
+    const filePath = `${destLocalizedFolderPath}${fileName}`;
+
+    if (!fs.existsSync(path.dirname(filePath))) {
+      fs.mkdirSync(path.dirname(filePath), { recursive: true });
+    }
+
+    html = $.html();
+
+    html = jsBeautify.html_beautify(html, beautifyOptions);
+    html = html.replace('/* app-styles */', output.styles);
+
+    fs.writeFileSync(toAbsolute(filePath), html);
+    log('pre-rendered:', slash(filePath));
+
+    renderedPages.push({
+      name: _.kebabCase(fileName.replaceAll(/\.\w+$/gi, '')),
+      url: `${process.env.VITE_DOMAIN ?? ''}${fileName}`,
+      fileName: fileName,
+    });
+  }
+};
+
+(async () => {
+  const renderedPages: RenderedPage[] = [];
+  const pool: Promise<unknown>[] = [];
+
+  const addHash = !!process.argv.includes('--add-hash');
+
+  pool.push(renderPage(renderedPages, addHash));
+
+  await Promise.all(pool);
+})();

package/public/.nojekyll

@@ -0,0 +1 @@
+This file makes sure that Github Pages doesn't process mdBook's output.

package/public/400.html

@@ -0,0 +1 @@
+<h1>400</h1>

package/public/401.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.svg" />
+
+  <title>401 - Unauthorized</title>
+</head>
+
+<body>
+  <script>
+    const path = window.location.pathname;
+    if (path.toLowerCase() !== '/401.html') {
+      let encodedPath = encodeURIComponent(window.location.href);
+      window.location.href = '/.auth/login/github?post_login_redirect_uri=' + encodedPath;
+    }
+  </script>
+</body>
+
+</html>

package/public/403.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.svg" />
+
+  <title>403 - Forbidden</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css?family=Creepster|Nosifer|Roboto');
+  </style>
+  <style>
+    html {
+      background-color: #000121;
+      font-family: 'Roboto', sans-serif;
+
+    }
+
+    .maincontainer {
+      position: relative;
+      top: -50px;
+      transform: scale(0.8);
+      background: url("/__images__/haunted-house-background.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 700px 600px;
+      width: 800px;
+      height: 600px;
+      margin: 0px auto;
+      display: grid;
+    }
+
+    .foregroundimg {
+      position: relative;
+      width: 100%;
+      top: -230px;
+      z-index: 5;
+    }
+
+    .errorcode {
+      position: relative;
+      top: -200px;
+      font-family: 'Creepster', cursive;
+      color: white;
+      text-align: center;
+      font-size: 6em;
+      letter-spacing: 0.1em;
+    }
+
+    .errortext {
+      position: relative;
+      top: -260px;
+      color: #FBD130;
+      text-align: center;
+      text-transform: uppercase;
+      font-size: 1.8em;
+    }
+
+    .bat {
+      opacity: 0;
+      position: relative;
+      transform-origin: center;
+      z-index: 3;
+    }
+
+    .bat:nth-child(1) {
+      top: 380px;
+      left: 120px;
+      transform: scale(0.5);
+      animation: 13s 1s flyBat1 infinite linear;
+    }
+
+    .bat:nth-child(2) {
+      top: 280px;
+      left: 80px;
+      transform: scale(0.3);
+      animation: 8s 4s flyBat2 infinite linear;
+    }
+
+    .bat:nth-child(3) {
+      top: 200px;
+      left: 150px;
+      transform: scale(0.4);
+      animation: 12s 2s flyBat3 infinite linear;
+    }
+
+    .body {
+      position: relative;
+      width: 50px;
+      top: 12px;
+    }
+
+    .wing {
+      width: 150px;
+      position: relative;
+      transform-origin: right center;
+    }
+
+    .leftwing {
+      left: 30px;
+      animation: 0.8s flapLeft infinite ease-in-out;
+    }
+
+    .rightwing {
+      left: -180px;
+      transform: scaleX(-1);
+      animation: 0.8s flapRight infinite ease-in-out;
+    }
+
+    @keyframes flapLeft {
+      0% {
+        transform: rotateZ(0);
+      }
+
+      50% {
+        transform: rotateZ(10deg) rotateY(40deg);
+      }
+
+      100% {
+        transform: rotateZ(0);
+      }
+    }
+
+    @keyframes flapRight {
+      0% {
+        transform: scaleX(-1) rotateZ(0);
+      }
+
+      50% {
+        transform: scaleX(-1) rotateZ(10deg) rotateY(40deg);
+      }
+
+      100% {
+        transform: scaleX(-1) rotateZ(0);
+      }
+    }
+
+    @keyframes flyBat1 {
+      0% {
+        opacity: 1;
+        transform: scale(0.5)
+      }
+
+      25% {
+        opacity: 1;
+        transform: scale(0.5) translate(-400px, -330px)
+      }
+
+      50% {
+        opacity: 1;
+        transform: scale(0.5) translate(400px, -800px)
+      }
+
+      75% {
+        opacity: 1;
+        transform: scale(0.5) translate(600px, 100px)
+      }
+
+      100% {
+        opacity: 1;
+        transform: scale(0.5) translate(100px, 300px)
+      }
+    }
+
+    @keyframes flyBat2 {
+      0% {
+        opacity: 1;
+        transform: scale(0.3)
+      }
+
+      25% {
+        opacity: 1;
+        transform: scale(0.3) translate(200px, -330px)
+      }
+
+      50% {
+        opacity: 1;
+        transform: scale(0.3) translate(-300px, -800px)
+      }
+
+      75% {
+        opacity: 1;
+        transform: scale(0.3) translate(-400px, 100px)
+      }
+
+      100% {
+        opacity: 1;
+        transform: scale(0.3) translate(100px, 300px)
+      }
+    }
+
+    @keyframes flyBat3 {
+      0% {
+        opacity: 1;
+        transform: scale(0.4)
+      }
+
+      25% {
+        opacity: 1;
+        transform: scale(0.4) translate(-350px, -330px)
+      }
+
+      50% {
+        opacity: 1;
+        transform: scale(0.4) translate(400px, -800px)
+      }
+
+      75% {
+        opacity: 1;
+        transform: scale(0.4) translate(-600px, 100px)
+      }
+
+      100% {
+        opacity: 1;
+        transform: scale(0.4) translate(100px, 300px)
+      }
+    }
+  </style>
+  <script>
+    window.console = window.console || function (t) { };
+  </script>
+  <script>
+    if (document.location.search.match(/type=embed/gi)) {
+      window.parent.postMessage("resize", "*");
+    }
+  </script>
+</head>
+
+<body translate="no">
+  <div class="maincontainer">
+    <div class="bat">
+      <img class="wing leftwing" src="/__images__/bat-wing.png">
+      <img class="body" src="/__images__/bat-body.png" alt="bat">
+      <img class="wing rightwing" src="/__images__/bat-wing.png">
+    </div>
+    <div class="bat">
+      <img class="wing leftwing" src="/__images__/bat-wing.png">
+      <img class="body" src="/__images__/bat-body.png" alt="bat">
+      <img class="wing rightwing" src="/__images__/bat-wing.png">
+    </div>
+    <div class="bat">
+      <img class="wing leftwing" src="/__images__/bat-wing.png">
+      <img class="body" src="/__images__/bat-body.png" alt="bat">
+      <img class="wing rightwing" src="/__images__/bat-wing.png">
+    </div>
+    <img class="foregroundimg" src="/__images__/haunted-house-foreground.png" alt="haunted house">
+  </div>
+  <h1 class="errorcode">ERROR 403</h1>
+  <div class="errortext">This area is forbidden. Turn back now!</div>
+</body>
+
+</html>