buner 1.0.5 → 1.0.7

package/dist/server.js

@@ -0,0 +1,171 @@
+import { createServer as createServer$1, loadEnv } from "vite";
+import fs$1 from "node:fs";
+import path$1 from "node:path";
+import express from "express";
+import serveStatic from "serve-static";
+import chalk from "chalk";
+import fs from "fs";
+import path from "path";
+import * as cheerio from "cheerio";
+import jsBeautify from "js-beautify";
+const createViteDevServer = ({ root: root2, baseUrl, hmrPort, isTest: isTest2 }) => {
+  const server = createServer$1({
+    root: root2,
+    base: baseUrl,
+    logLevel: isTest2 ? "error" : "info",
+    server: {
+      middlewareMode: true,
+      watch: {
+        // During tests we edit the files too fast and sometimes chokidar
+        // misses change events, so enforce polling for consistency
+        usePolling: true,
+        interval: 200
+      },
+      hmr: {
+        port: hmrPort
+      }
+    },
+    appType: "custom"
+  });
+  return server;
+};
+const beautifyOptions = {
+  indent_size: 2,
+  indent_char: " ",
+  keep_array_indentation: false,
+  break_chained_methods: false,
+  indent_scripts: "normal",
+  brace_style: "expand",
+  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"
+};
+const updateResourcePath = ($, tagName, attr) => {
+  $(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("/") && !href.startsWith("/assets/vendors/") && [".css", ".ico", ".js", ".webmanifest", ".svg"].includes(path.extname(href).toLowerCase()) && !/\.0x[a-z0-9]{8}\.\w+$/gi.test(href)) {
+        newPath += "?v=" + (/* @__PURE__ */ new Date()).getTime();
+      }
+      if (newPath != href) {
+        $(el).attr(attr, newPath);
+      }
+    }
+  });
+};
+const removeDuplicateAssets = ($, selector, attr, paths) => {
+  $(selector).each((_, el) => {
+    if ($(el).attr("data-pl-inplace") === "true") {
+      return;
+    }
+    const path2 = $(el).attr(attr);
+    if (!path2) {
+      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(path2)) {
+      $(el).remove();
+      return;
+    }
+    paths.push(path2);
+    $("head").append(el);
+  });
+};
+const _useRenderer = ({ app, indexProd, isProd: isProd2, viteDevServer, resolve }) => {
+  app.use(async (req, res) => {
+    try {
+      let template, render;
+      if (!isProd2) {
+        template = fs.readFileSync(resolve("index.html"), "utf-8");
+        template = await viteDevServer.transformIndexHtml(req.originalUrl, template);
+        render = (await viteDevServer.ssrLoadModule(resolve("src/entry-server.tsx"))).render;
+      } else {
+        template = indexProd;
+        render = (await import(resolve("dist/server/entry-server.js"))).render;
+      }
+      const context = {};
+      const output = render(req.originalUrl);
+      if (context.url) {
+        return res.redirect(301, context.url);
+      }
+      const html = template.replace("<!--app-html-->", output.html);
+      const $ = cheerio.load(html);
+      const paths = [];
+      removeDuplicateAssets($, "link[data-pl-require][href]", "href", paths);
+      removeDuplicateAssets($, "script[data-pl-require][src]", "src", paths);
+      updateResourcePath($, "link", "href");
+      updateResourcePath($, "script", "src");
+      updateResourcePath($, "img", "src");
+      res.status(200).set({ "Content-Type": "text/html" }).end(jsBeautify.html_beautify($.html(), beautifyOptions).replace("/* app-styles */", output.styles));
+    } catch (e) {
+      !isProd2 && viteDevServer.ssrFixStacktrace(e);
+      console.log(e.stack);
+      res.status(500).end(e.stack);
+    }
+  });
+};
+const argvModeIndex$1 = process.argv.indexOf("--mode");
+const mode$1 = argvModeIndex$1 >= 0 && argvModeIndex$1 < process.argv.length - 1 && !process.argv[argvModeIndex$1 + 1].startsWith("-") ? process.argv[argvModeIndex$1 + 1] : "production";
+process.env.MY_CUSTOM_SECRET = "API_KEY_4c2928b5a14b475d94c3579cbea06178";
+const isProd = process.env.NODE_ENV === "production";
+const createServer = async ({ root: root2, hmrPort, baseUrl, isTest: isTest2 }) => {
+  const resolve = (p) => path$1.join(root2, p);
+  const indexProd = isProd ? fs$1.readFileSync(resolve("index.html"), "utf-8") : "";
+  const app = express();
+  let viteDevServer;
+  if (!isProd) {
+    viteDevServer = await createViteDevServer({ root: root2, baseUrl, hmrPort, isTest: isTest2 });
+    app.use(viteDevServer.middlewares);
+  }
+  app.use("/assets/images", serveStatic(resolve("public/assets/images"), { index: false }));
+  app.use("/assets/fonts", serveStatic(resolve("public/assets/fonts"), { index: false }));
+  app.use("/assets/css", serveStatic(resolve("public/assets/css"), { index: false }));
+  app.use("/assets/js", serveStatic(resolve("public/assets/js"), { index: false }));
+  app.use("/assets/vendors", serveStatic(resolve("public/assets/vendors"), { index: false }));
+  app.use("/assets", serveStatic(resolve("dist/assets"), { index: false }));
+  app.use("/samples", serveStatic(resolve("public/samples"), { index: false }));
+  _useRenderer({ app, indexProd, isProd, viteDevServer, resolve });
+  return { app, viteDevServer };
+};
+const startServer = (props) => {
+  createServer(props).then(({ app }) => {
+    app.listen(props.port, () => {
+      const xpackEnv2 = loadEnv(mode$1, props.root);
+      console.log("Running on " + chalk.green("http://localhost:" + props.port + xpackEnv2.VITE_BASE_URL));
+    });
+  });
+};
+console.log("[INIT] server");
+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 root = process.cwd();
+const xpackEnv = loadEnv(mode, root);
+const isTest = !!xpackEnv.VITE_TEST_BUILD || process.env.NODE_ENV === "test";
+const port = xpackEnv.VITE_PORT ? parseInt(xpackEnv.VITE_PORT) : 5e3;
+if (!isTest) {
+  console.log(root);
+  startServer({
+    root,
+    isTest,
+    port,
+    hmrPort: port + 1,
+    baseUrl: xpackEnv.VITE_BASE_URL
+  });
+}

package/dist/states.js

@@ -0,0 +1,41 @@
+import fs from "fs";
+import chokidar from "chokidar";
+import debounce from "debounce";
+import { glob } from "glob";
+const isWatch = process.argv.includes("--watch");
+const log = console.log.bind(console);
+const states = {};
+const buildStates = debounce(() => {
+  const output = [];
+  const keys = Object.keys(states);
+  [].forEach.call(keys, (key) => {
+    const state = states[key];
+    if (!state) {
+      return;
+    }
+    try {
+      output.push(JSON.parse(state));
+    } catch (error) {
+      console.log(error);
+    }
+  });
+  const json = JSON.stringify(output, null, "  ");
+  fs.writeFileSync("public/pl-states.json", json);
+}, 500);
+const setStates = (statePath) => {
+  const state = fs.readFileSync(statePath, "utf-8");
+  states[statePath] = state;
+  buildStates();
+};
+const removeStates = (statePath) => {
+  delete states[statePath];
+  buildStates();
+};
+if (isWatch) {
+  const watcher = chokidar.watch("src/**/*.states.json");
+  watcher.on("ready", () => {
+    log("States are ready!");
+  }).on("add", (path) => setStates(path)).on("change", (path) => setStates(path)).on("unlink", (path) => removeStates(path));
+} else {
+  glob.sync("src/**/*.states.json").forEach((path) => setStates(path));
+}

package/dist/styles.js

@@ -0,0 +1,165 @@
+import fs from "fs";
+import path from "path";
+import { pathToFileURL, fileURLToPath } from "url";
+import { watch } from "chokidar";
+import * as sass from "sass";
+import slash from "slash";
+import debounce from "debounce";
+import { glob } from "glob";
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+const isWatch = process.argv.includes("--watch");
+const outDir = "./public/assets/css";
+if (!isWatch && fs.existsSync(outDir)) {
+  fs.rmSync(outDir, { force: true, recursive: true });
+}
+if (!fs.existsSync(outDir)) {
+  fs.mkdirSync(outDir, { recursive: true });
+}
+const log = console.log.bind(console);
+const prepareCssFileContent = ({
+  srcFile,
+  includeMixins = true,
+  includeAbstracts = true
+}) => {
+  return [
+    includeAbstracts ? slash(`@use '${path.relative(path.dirname(srcFile), path.resolve("src/assets/styles/00-abstracts/abstracts"))}' as *;
+`) : void 0,
+    includeMixins ? slash(`@use '${path.relative(path.dirname(srcFile), path.resolve("src/assets/styles/01-mixins/mixins"))}' as *;
+`) : void 0,
+    fs.readFileSync(srcFile, "utf-8")
+  ].filter(Boolean);
+};
+const stringOptions = (srcFile) => {
+  const options = {
+    sourceMap: true,
+    sourceMapIncludeSources: true,
+    syntax: "scss",
+    style: "compressed",
+    url: pathToFileURL(path.resolve(srcFile)),
+    importer: {
+      canonicalize(url) {
+        return new URL(url);
+      },
+      load(canonicalUrl) {
+        let filePath = fileURLToPath(canonicalUrl);
+        if (!filePath.endsWith(".scss")) {
+          const parentDir = path.dirname(filePath);
+          const fileName = path.basename(filePath);
+          filePath = path.join(parentDir, fileName + ".scss");
+          if (!fs.existsSync(filePath)) {
+            filePath = path.join(parentDir, "_" + fileName + ".scss");
+          }
+        }
+        if (!fs.existsSync(filePath)) return null;
+        if (filePath.includes("abstracts") || filePath.includes("_mixins") || filePath.includes("_base") || filePath.includes("xpack"))
+          return {
+            contents: fs.readFileSync(filePath, "utf-8"),
+            syntax: "scss"
+          };
+        let content = prepareCssFileContent({ srcFile: filePath });
+        if (filePath.includes("mixins")) {
+          content = prepareCssFileContent({ srcFile: filePath, includeMixins: false });
+        }
+        return {
+          contents: content.join(""),
+          syntax: "scss"
+        };
+      }
+    }
+  };
+  return options;
+};
+const compile = (srcFile, options) => {
+  if (options.isReady) {
+    log("compile:", slash(srcFile));
+  }
+  if (path.basename(srcFile).startsWith("_")) {
+    return;
+  }
+  const name = path.basename(srcFile) === "index.scss" ? path.basename(path.dirname(srcFile)) + ".css" : path.basename(srcFile).replace(/\.scss$/gi, ".css");
+  const outFile = (options.prefix ?? "") + name;
+  const cssStrings = srcFile.includes("xpack") ? [fs.readFileSync(srcFile, "utf-8")] : prepareCssFileContent({ srcFile });
+  if (srcFile.includes("style-base") || srcFile.includes("style-all")) {
+    glob.sync("./src/atoms/**/*.scss").forEach((atomPath) => {
+      if (!path.basename(atomPath).startsWith("_")) {
+        cssStrings.push(sass.compileString(prepareCssFileContent({ srcFile: atomPath }).join(""), stringOptions(atomPath)).css);
+      }
+    });
+    glob.sync("./src/molecules/**/*.scss").forEach((molPath) => {
+      if (!path.basename(molPath).startsWith("_")) {
+        cssStrings.push(sass.compileString(prepareCssFileContent({ srcFile: molPath }).join(""), stringOptions(molPath)).css);
+      }
+    });
+  }
+  sass.compileStringAsync(cssStrings.join(""), stringOptions(srcFile)).then((result) => postcssProcess(result, srcFile, outFile)).catch((error) => {
+    log(error);
+  });
+};
+const postcssProcess = (result, from, to) => {
+  const postcssOptions = { from: pathToFileURL(from).href, to, map: { prev: result.sourceMap, absolute: false } };
+  postcss([autoprefixer({ grid: true }), cssnano]).process(result.css, postcssOptions).then((result2) => {
+    fs.writeFileSync(path.join(outDir, to), result2.css + (result2.map ? `
+/*# sourceMappingURL=${to}.map */` : ""));
+    if (result2.map) {
+      fs.writeFileSync(path.join(outDir, to + ".map"), result2.map.toString());
+    }
+  });
+};
+const styleOrganisms = debounce((isReady) => {
+  const paths = glob.sync("src/organisms/**/*.scss", { nodir: true });
+  [].forEach.call(paths, (p) => styleOrganism(p, isReady));
+}, 200);
+const styleTemplates = debounce((isReady) => {
+  const paths = glob.sync("src/templates/**/*.scss", { nodir: true });
+  [].forEach.call(paths, (p) => styleTemplate(p, isReady));
+}, 200);
+const styleBase = debounce((isReady) => compile("src/assets/styles/style-base.scss", { isReady }), 200);
+const stylePlState = debounce((isReady) => compile("xpack/styles/pl-states.scss", { isReady }), 200);
+const styleRoot = debounce((isReady) => compile("xpack/styles/root.scss", { isReady }), 200);
+const styleOrganism = (srcFile, isReady) => compile(srcFile, { prefix: "b-", isReady });
+const styleTemplate = (srcFile, isReady) => compile(srcFile, { prefix: "p-", isReady });
+const sassCompile = (inputPath, isReady) => {
+  const p = slash(inputPath);
+  if (p.startsWith("src/assets/styles/00-abstracts/") || p.startsWith("src/assets/styles/01-mixins/")) {
+    styleBase(isReady);
+    styleOrganisms(isReady);
+    styleTemplates(isReady);
+    stylePlState(isReady);
+  }
+  if (p.startsWith("src/atoms") || p.startsWith("src/molecules") || p.startsWith("src/assets/styles/02-base")) {
+    styleBase(isReady);
+  }
+  if (p.startsWith("src/organisms")) {
+    if (path.basename(p).startsWith("_")) {
+      glob.sync(path.dirname(p) + "/*.scss", { nodir: true }).filter((p2) => !path.basename(p2).startsWith("_")).forEach((p2) => styleOrganism(p2, isReady));
+    } else {
+      styleOrganism(p, isReady);
+    }
+  }
+  if (p.startsWith("src/templates")) {
+    if (path.basename(p).startsWith("_")) {
+      glob.sync(path.dirname(p) + "/*.scss", { nodir: true }).filter((p2) => !path.basename(p2).startsWith("_")).forEach((p2) => styleTemplate(p2, isReady));
+    } else {
+      styleTemplate(p, isReady);
+    }
+  }
+  if (p.startsWith("xpack/styles/pl-states")) {
+    stylePlState(isReady);
+  } else if (p.startsWith("xpack/styles")) {
+    styleRoot(isReady);
+  }
+};
+if (isWatch) {
+  const watcher = watch(["src", "xpack/styles"], { ignored: (path2, stats) => !!stats?.isFile() && !path2.endsWith(".scss") });
+  let isReady = false;
+  watcher.on("ready", () => {
+    log("SCSS ready!");
+    isReady = true;
+  }).on("add", (path2) => sassCompile(path2, isReady)).on("change", (path2) => sassCompile(path2, isReady)).on("unlink", (path2) => log(`File ${path2} has been removed`));
+} else {
+  styleBase(true);
+  stylePlState(true);
+  glob.sync(["src/{organisms,templates}/**/*.scss", "xpack/styles/**/*.scss"]).filter((p) => !path.basename(p).startsWith("_")).forEach((path2) => sassCompile(path2, true));
+}

package/index.html

@@ -38,7 +38,7 @@
 
   <body>
     <!--app-html-->
-    <script type="module" src="/xpack/react-loader-init.tsx"></script>
+    <script type="module" src="@xpack/react-loader-init.tsx"></script>
     <script type="module" defer src="#__BASE_URL__/assets/js/pl-states.js"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buner",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Frontend build toolkit for Vite + React SSR projects — SCSS pipeline, prerender, SSR dev server, and backend integration.",
   "type": "module",
   "license": "MIT",
@@ -20,20 +20,12 @@
     "cli"
   ],
   "bin": {
-    "buner": "./bin/buner.js"
+    "buner": "./dist/buner.js"
   },
   "files": [
-    "bin",
-    "cli",
+    "dist",
     "xpack",
     "public",
-    "server.ts",
-    "prerender.ts",
-    "integration.ts",
-    "styles.ts",
-    "scripts.ts",
-    "states.ts",
-    "migrate-scss.ts",
     "vite.config.ts",
     "index.html",
     "tsconfig.json",
@@ -91,7 +83,6 @@
     "prompts": "^2.4.2",
     "sass": "^1.89.2",
     "slash": "^5.1.0",
-    "tsx": "^4.19.0",
     "validate-npm-package-name": "^7.0.0",
     "vite": "^7.0.6"
   },

package/xpack/alias.ts

@@ -1,8 +1,9 @@
 import path from 'path';
 
-import { root, srcRoot } from './paths';
+import { root, srcRoot, packageRoot } from './paths';
 
 const alias = [
+  { find: '@src', replacement: srcRoot },
   { find: '@atoms', replacement: path.resolve(srcRoot, 'atoms') },
   { find: '@molecules', replacement: path.resolve(srcRoot, 'molecules') },
   { find: '@organisms', replacement: path.resolve(srcRoot, 'organisms') },
@@ -15,7 +16,7 @@ const alias = [
   { find: '@_http', replacement: path.resolve(srcRoot, '_http') },
   { find: '@_api', replacement: path.resolve(srcRoot, '_api') },
   { find: '@mocks', replacement: path.resolve(srcRoot, 'mocks') },
-  { find: '@xpack', replacement: path.resolve(root, 'xpack') },
+  { find: '@xpack', replacement: path.resolve(packageRoot, 'xpack') },
 ];
 
 export default alias;

package/xpack/hooks/options.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import { glob } from 'glob';
 import { PluginOption } from 'vite';
 
-import { root, mode } from '../paths';
+import { root, packageRoot, mode } from '../paths';
 const scriptOnly = process.env.scriptOnly;
 
 const options = (): PluginOption => {
@@ -16,7 +16,7 @@ const options = (): PluginOption => {
       inputs['index'] = `${root}/index.html`;
     }
 
-    const filePaths = glob.sync(['/src/assets/**/*.entry.ts', '/xpack/scripts/**/*.entry.ts'], { root: root });
+    const filePaths = glob.sync([`${root}/src/assets/**/*.entry.ts`, `${packageRoot}/xpack/scripts/**/*.entry.ts`]);
 
     [].forEach.call(filePaths, (filePath: string) => {
       const fileName = path.basename(filePath).toLowerCase();

package/xpack/hooks/transform-index-html.ts

@@ -1,16 +1,18 @@
 import { PluginOption } from 'vite';
 
+import { packageRoot } from '../paths';
+
 const transformIndexHtml = (baseUrl: string): PluginOption => {
   // console.log('[INIT] transformIndexHtml');
 
   return {
     name: 'xpack-transform-index-html',
-    enforce: 'post',
+    enforce: 'pre',
 
     transformIndexHtml(html) {
       // console.log('transformIndexHtml');
 
-      return html.replaceAll('#__BASE_URL__/', baseUrl);
+      return html.replaceAll('#__BASE_URL__/', baseUrl).replaceAll('@xpack/', `${packageRoot}/xpack/`);
     },
   };
 };

package/xpack/react-loader-init.tsx

@@ -1,4 +1,4 @@
-import { blocks } from '../src/react-loader';
+import { blocks } from '@src/react-loader';
 import { initReactLoader } from './react-loader';
 
 initReactLoader(blocks);

package/cli/README.md

@@ -1 +0,0 @@
-[![Build Status](https://episerver-es-emea.visualstudio.com/Alloy-Template/_apis/build/status%2FFE%20-%20Integration?branchName=fe-release)](https://episerver-es-emea.visualstudio.com/Alloy-Template/_build/latest?definitionId=28&branchName=fe-release)