@coraltravelcenter/b2c-landing-builder 2.0.0 → 2.1.0

package/README.md

@@ -81,6 +81,11 @@ export default {
 - стили: `css`, `scss`, `less`;
 - сайты: `coral`, `sunmar`.
 
+Зависимости выбранного стека устанавливаются локально в проект: `vue` и
+`@vitejs/plugin-vue` для Vue, `pug` для Pug, `less` для Less и `sass` для SCSS.
+Builder загружает Vue-плагин из проекта, поэтому Vue-зависимости не
+устанавливаются вместе с глобальным builder.
+
 Monkey URL, контейнер и CDN prefix не задаются вручную:
 
 - URL: `https://<домен-пресета>/monkey/*`;
@@ -129,20 +134,21 @@ package.json
 инициализации по умолчанию:
 
 ```js
-export default function hero(container) {
-  const block = container.querySelector(".hero");
+export default function hero() {
+  const block = document.querySelector(".hero");
   if (!block) return;
 
   // Инициализация блока.
 }
 ```
 
-Builder вставляет разметку, затем вызывает функцию. Этот контракт одинаков для
-dev, HMR и CMS build. Блок без JS допустим.
+Builder вставляет разметку, затем вызывает функцию без аргументов. Скрипт блока
+сам находит свою разметку в `document`. Этот контракт одинаков для dev и CMS
+build; дополнительные контейнеры builder не создаёт. Блок без JS допустим.
 
-## Ассеты
+## Изображения
 
-Файлы хранятся в `public/` и используются от корня:
+Изображения хранятся в `public/` и используются от корня:
 
 ```html
 <img src="/hero.webp" alt="">
@@ -155,7 +161,9 @@ dev, HMR и CMS build. Блок без JS допустим.
 ```
 
 В dev пути направляются на `http://127.0.0.1:5173`. При production build они
-преобразуются в `<assetsBase>/landing-pages/<project.name>/...`.
+преобразуются в `<assetsBase>/landing-pages/<project.name>/...`. Builder
+переписывает только изображения `jpg`, `jpeg`, `png`, `webp`, `avif`, `gif` и
+`svg`; остальные root-relative ресурсы не изменяются.
 
 ## Совместимость
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coraltravelcenter/b2c-landing-builder",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "CLI and build toolkit for B2C landing projects",
   "type": "module",
   "bin": {
@@ -28,13 +28,14 @@
     "pack:check": "npm pack --dry-run"
   },
   "dependencies": {
+    "typograf": "^7.7.0",
+    "vite": "^8.1.4",
+    "vite-plugin-monkey": "^8.0.6"
+  },
+  "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
     "less": "^4.6.7",
     "pug": "^3.0.4",
-    "sass": "^1.101.0",
-    "typograf": "^7.7.0",
-    "vite": "^8.1.4",
-    "vite-plugin-monkey": "^8.0.6",
     "vue": "^3.5.39"
   },
   "repository": {

package/src/blocks/add.mjs

@@ -13,7 +13,7 @@ function styleTemplate(key) {
 
 function scriptTemplate(key) {
   const functionName = key.replace(/-+/g, "_");
-  return `export default function ${functionName}(container) {\n  const block = container.querySelector(".${key}");\n  if (!block) return;\n}\n`;
+  return `export default function ${functionName}() {\n  const block = document.querySelector(".${key}");\n  if (!block) return;\n}\n`;
 }
 
 export function addBlock(key, config, root = process.cwd()) {

package/src/cli/index.mjs

@@ -37,12 +37,14 @@ export async function runCli(args) {
 
   if (command === "check") return check();
   if (command === "dev") {
-    await loadConfig();
+    const config = await loadConfig();
+    validateProject(config);
     const {startDevServer} = await import("../vite/config.mjs");
     return startDevServer();
   }
   if (command === "build") {
     const config = await loadConfig();
+    validateProject(config);
     const preset = resolvePreset(config.site.preset, {requireAssets: true});
     const {buildCms} = await import("../lib/build-cms.mjs");
     await buildCms({config});

package/src/config/validate-project.mjs

@@ -1,8 +1,31 @@
 import fs from "node:fs";
+import {createRequire} from "node:module";
 import path from "node:path";
 
 const BLOCK_KEY_RE = /^[a-z0-9][a-z0-9-_]*$/i;
 const DEFAULT_EXPORT_RE = /\bexport\s+default\s+(?:async\s+)?(?:function\b|\([^)]*\)\s*=>|[A-Za-z_$][\w$]*\s*=>|[A-Za-z_$][\w$]*\s*;?)/;
+const STACK_DEPENDENCIES = {
+  script: {vue: ["vue", "@vitejs/plugin-vue"]},
+  markup: {pug: ["pug"]},
+  styles: {less: ["less"], scss: ["sass"]},
+};
+
+function validateLocalDependencies(config, root) {
+  const projectRequire = createRequire(path.resolve(root, "package.json"));
+  const dependencies = Object.entries(STACK_DEPENDENCIES)
+    .flatMap(([section, values]) => values[config.stack[section]] || []);
+
+  for (const dependency of dependencies) {
+    try {
+      projectRequire.resolve(dependency);
+    } catch (error) {
+      throw new Error(
+        `Missing local dependency ${JSON.stringify(dependency)} for the configured stack. Run npm install in ${root}`,
+        {cause: error}
+      );
+    }
+  }
+}
 
 function readJson(filePath, label) {
   let source;
@@ -48,5 +71,6 @@ export function validateProject(config, root = process.cwd()) {
     }
   }
 
+  validateLocalDependencies(config, root);
   return {blocks: [...order.blocks]};
 }

package/src/lib/build-cms.mjs

@@ -1,12 +1,11 @@
 import fs from "node:fs";
 import path from "node:path";
 import {build} from "vite";
-import vue from "@vitejs/plugin-vue";
 
 import {cleanDir, ensureDir, existsFile, normalizeHtml, r, readBlocks} from "./_utils.mjs";
+import {loadProjectVuePlugin} from "./loadProjectVuePlugin.mjs";
 import {processMarkup} from "./processMarkup.mjs";
 import {renderPugFile} from "./pugMarkup.mjs";
-import {builderAliases} from "../vite/dependencies.mjs";
 
 const ORDER_FILE = r("src/order.json");
 
@@ -38,7 +37,6 @@ async function bundleCssInline(absCssPath) {
   const res = await build({
     configFile: false,
     logLevel: "silent",
-    resolve: {alias: builderAliases},
     plugins: [virtualCss],
     build: {
       write: false,
@@ -62,7 +60,7 @@ async function bundleCssInline(absCssPath) {
 
 // ---------- JS (+ CSS extracted from Vue/JS imports) ----------
 
-async function bundleJsInline(absJsPath) {
+async function bundleJsInline(absJsPath, stack) {
   const rel = "/" + path.relative(process.cwd(), absJsPath).replaceAll("\\", "/");
 
   const V_ID = "virtual:cms-js";
@@ -85,15 +83,17 @@ try { if (typeof init === "function") init(); } catch (e) { console.warn(e); }
     },
   };
 
+  const vue = stack.script === "vue"
+    ? await loadProjectVuePlugin(process.cwd())
+    : null;
   const res = await build({
     configFile: false,
     logLevel: "silent",
-    resolve: {alias: builderAliases},
-    plugins: [vue(), virtualJs],
+    plugins: [vue && vue(), virtualJs].filter(Boolean),
     build: {
       write: false,
       minify: "oxc",
-      cssCodeSplit: true,
+      cssCodeSplit: false,
       rollupOptions: {
         input: V_ID,
         output: {format: "iife"},
@@ -139,7 +139,7 @@ async function buildBlock(key, stack) {
   let js = "";
   let jsCss = "";
   if (existsFile(jsPath)) {
-    const out = await bundleJsInline(jsPath);
+    const out = await bundleJsInline(jsPath, stack);
     js = out.js || "";
     jsCss = out.css || "";
   }

package/src/lib/landingBlocksPlugin.mjs

@@ -13,26 +13,47 @@ function toVitePath(filePath) {
   return "/" + path.relative(process.cwd(), filePath).replaceAll("\\", "/");
 }
 
+function isInside(directory, filePath) {
+  const relative = path.relative(directory, filePath);
+  return Boolean(relative) && !relative.startsWith("..") && !path.isAbsolute(relative);
+}
+
 export function landingBlocksPlugin({root = process.cwd(), stack} = {}) {
   const orderFile = path.resolve(root, "src/order.json");
   const markupDir = path.resolve(root, "src/markup");
   const stylesDir = path.resolve(root, "src/styles");
   const scriptsDir = path.resolve(root, "src/scripts");
   const pugConfigFile = getPugConfigFile();
-  const watchedDirs = [markupDir, stylesDir, scriptsDir];
-
-  const affectsBlocks = (filePath) =>
+  const requiresFullReload = (filePath) =>
     filePath === orderFile ||
     filePath === pugConfigFile ||
-    watchedDirs.some((dir) => {
-      const relative = path.relative(dir, filePath);
-      return relative && !relative.startsWith("..") && !path.isAbsolute(relative);
-    });
+    isInside(markupDir, filePath) ||
+    isInside(scriptsDir, filePath);
+
+  const reloadPage = (server) => {
+    const virtualModule = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);
+    if (virtualModule) server.moduleGraph.invalidateModule(virtualModule);
+    server.ws.send({type: "full-reload", path: "*"});
+  };
 
   return {
     name: "landing-blocks",
     enforce: "pre",
 
+    configureServer(server) {
+      const reloadAddedOrRemovedFile = (filePath) => {
+        if (requiresFullReload(filePath)) reloadPage(server);
+      };
+
+      server.watcher.on("add", reloadAddedOrRemovedFile);
+      server.watcher.on("unlink", reloadAddedOrRemovedFile);
+
+      server.httpServer?.once("close", () => {
+        server.watcher.off("add", reloadAddedOrRemovedFile);
+        server.watcher.off("unlink", reloadAddedOrRemovedFile);
+      });
+    },
+
     resolveId(id) {
       if (id === VIRTUAL_ID) return RESOLVED_VIRTUAL_ID;
     },
@@ -84,14 +105,11 @@ export function landingBlocksPlugin({root = process.cwd(), stack} = {}) {
       return `${imports.join("\n")}\n\nexport default [${entries.join(", ")}];\n`;
     },
 
-    handleHotUpdate({file, server, modules}) {
-      if (!affectsBlocks(file)) return;
-
-      const virtualModule = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);
-      if (!virtualModule) return;
+    handleHotUpdate({file, server}) {
+      if (!requiresFullReload(file)) return;
 
-      server.moduleGraph.invalidateModule(virtualModule);
-      return [virtualModule, ...modules.filter((module) => module !== virtualModule)];
+      reloadPage(server);
+      return [];
     },
   };
 }

package/src/lib/loadProjectVuePlugin.mjs

@@ -0,0 +1,10 @@
+import {createRequire} from "node:module";
+import path from "node:path";
+import {pathToFileURL} from "node:url";
+
+export async function loadProjectVuePlugin(root = process.cwd()) {
+  const projectRequire = createRequire(path.resolve(root, "package.json"));
+  const pluginEntry = projectRequire.resolve("@vitejs/plugin-vue");
+  const pluginModule = await import(pathToFileURL(pluginEntry).href);
+  return pluginModule.default;
+}

package/src/lib/pugMarkup.mjs

@@ -1,17 +1,26 @@
 import fs from "node:fs";
+import {createRequire} from "node:module";
 import path from "node:path";
 
-import pug from "pug";
-
 import {existsFile, normalizeHtml, r} from "./_utils.mjs";
 
 const CONFIG_FILE = r("pug.rc");
+const projectRequire = createRequire(r("package.json"));
+
+function loadPug() {
+  try {
+    return projectRequire("pug");
+  } catch (error) {
+    throw new Error("Pug markup requires local dependency \"pug\". Run npm install.", {cause: error});
+  }
+}
 
 export function getPugConfigFile() {
   return CONFIG_FILE;
 }
 
 export function renderPugFile(filePath) {
+  const pug = loadPug();
   let config = {};
 
   if (existsFile(CONFIG_FILE)) {

package/src/lib/rewriteAssetsBuild.mjs

@@ -1,6 +1,8 @@
 import fs from "node:fs";
 import path from "node:path";
 
+import {rewriteHtmlImageAssets} from "./rewriteImageAssets.mjs";
+
 const ROOT = process.cwd();
 const CMS_DIR = path.resolve(ROOT, "@CMS");
 const ORDER_FILE = path.resolve(ROOT, "src/order.json");
@@ -35,116 +37,8 @@ if (/<[^>]+>/.test(rawPrefix)) {
   process.exit(0);
 }
 
-function normalizeBase(p) {
-  return String(p || "").trim().replace(/\/+$/, "");
-}
-
-function normalizeRelPrefix(p) {
-  let s = String(p || "").trim();
-  s = s.replace(/^\/+/, ""); // убрать leading /
-  s = s.replace(/\/+$/, ""); // убрать trailing /
-  return s;
-}
-
-const BASE = normalizeBase(CDN_BASE);
-const REL_PREFIX = normalizeRelPrefix(rawPrefix);
-const FULL_PREFIX = REL_PREFIX ? `${BASE}/${REL_PREFIX}` : BASE;
-
-function isSkippable(u) {
-  return (
-    /^https?:\/\//i.test(u) ||
-    u.startsWith("//") ||
-    u.startsWith("data:") ||
-    u.startsWith("blob:") ||
-    u.startsWith("mailto:") ||
-    u.startsWith("tel:") ||
-    u.startsWith("#")
-  );
-}
-
-function isRootRel(u) {
-  return typeof u === "string" && u.startsWith("/") && !u.startsWith("//");
-}
-
-function joinPrefix(u) {
-  if (!isRootRel(u) || isSkippable(u)) return u;
-  if (!REL_PREFIX) return BASE + u;
-  if (u === `/${REL_PREFIX}` || u.startsWith(`/${REL_PREFIX}/`)) return BASE + u;
-  return FULL_PREFIX + u; // u уже начинается с /
-}
-
-function rewriteSrcset(srcset) {
-  if (!srcset || typeof srcset !== "string") return srcset;
-  return srcset
-    .split(",")
-    .map((part) => part.trim())
-    .filter(Boolean)
-    .map((item) => {
-      const [url, ...rest] = item.split(/\s+/);
-      if (isSkippable(url)) return item;
-      return [joinPrefix(url), ...rest].join(" ");
-    })
-    .join(", ");
-}
-
-// --- CSS url(...) переписываем ТОЛЬКО для картинок по расширениям
-// поддержка query/hash: /a.webp?v=1#x
-const IMG_EXT_RE = /\.(?:jpe?g|png|webp)(?:[?#][^'")]*)?(?=['")\s]|$)/i;
-
-function rewriteCssUrls(cssText) {
-  if (!cssText || typeof cssText !== "string") return cssText;
-
-  return cssText.replace(
-    /url\(\s*(['"]?)([^'")]+)\1\s*\)/gi,
-    (m, q, u) => {
-      if (isSkippable(u)) return m;
-      if (!isRootRel(u)) return m;          // трогаем только "/..."
-      if (!IMG_EXT_RE.test(u)) return m;     // трогаем только jpg/png/webp
-      const next = joinPrefix(u);
-      return `url(${q}${next}${q})`;
-    }
-  );
-}
-
-function rewriteHtmlImages(html) {
-  let out = html;
-
-  // img src
-  out = out.replace(/\bsrc=(['"])([^'"]+)\1/gi, (m, q, v) => {
-    if (isSkippable(v)) return m;
-    if (!isRootRel(v)) return m;
-    // тут можно НЕ проверять расширение — img обычно и так картинка,
-    // но оставим правило "любое root-rel"
-    return `src=${q}${joinPrefix(v)}${q}`;
-  });
-
-  // img/srcset + source/srcset
-  out = out.replace(/\bsrcset=(['"])([\s\S]*?)\1/gi, (m, q, v) => {
-    return `srcset=${q}${rewriteSrcset(v)}${q}`;
-  });
-
-  // video poster
-  out = out.replace(/\bposter=(['"])([^'"]+)\1/gi, (m, q, v) => {
-    if (isSkippable(v)) return m;
-    if (!isRootRel(v)) return m;
-    // poster — картинка, можно без проверки расширения
-    return `poster=${q}${joinPrefix(v)}${q}`;
-  });
-
-  // inline style="...url('/x.webp')..."
-  out = out.replace(/\bstyle=(['"])([\s\S]*?)\1/gi, (m, q, v) => {
-    const next = rewriteCssUrls(v);
-    return `style=${q}${next}${q}`;
-  });
-
-  // <style>...</style>
-  out = out.replace(/<style\b[^>]*>([\s\S]*?)<\/style>/gi, (m, css) => {
-    const nextCss = rewriteCssUrls(css);
-    return m.replace(css, nextCss);
-  });
-
-  return out;
-}
+const BASE = String(CDN_BASE || "").trim().replace(/\/+$/, "");
+const REL_PREFIX = String(rawPrefix || "").trim().replace(/^\/+|\/+$/g, "");
 
 function listCmsHtmlFiles() {
   if (!fs.existsSync(CMS_DIR)) return [];
@@ -164,7 +58,10 @@ let changed = 0;
 
 for (const file of files) {
   const prev = fs.readFileSync(file, "utf8");
-  const next = rewriteHtmlImages(prev);
+  const next = rewriteHtmlImageAssets(prev, {
+    assetsBase: BASE,
+    assetsPrefix: REL_PREFIX,
+  });
 
   if (next !== prev) {
     fs.writeFileSync(file, next);

package/src/lib/rewriteAssetsDev.js

@@ -1,25 +1,46 @@
-export async function setupLocalCdnAssetRewrite({
-                                                  root, // HTMLElement
-                                                  cdnBase = "http://127.0.0.1:5173",
-                                                  enabled = true,
-                                                } = {}) {
-  if (!enabled || !root) return;
+import {isImageAssetUrl} from "./rewriteImageAssets.mjs";
+
+export function toLocalAssetUrl(url, cdnBase = "http://127.0.0.1:5173") {
+  if (
+    typeof url !== "string" ||
+    !url.startsWith("/") ||
+    url.startsWith("//") ||
+    !isImageAssetUrl(url)
+  ) {
+    return url;
+  }
+  return `${cdnBase.replace(/\/$/, "")}${url}`;
+}
 
-  const isAbs = (u) =>
-    /^https?:\/\//i.test(u) || u.startsWith("data:") || u.startsWith("blob:");
-  const isProtocolRelative = (u) => u.startsWith("//");
-  const isRootRel = (u) => u.startsWith("/") && !isProtocolRelative(u);
+export function rewriteLocalCssUrls(cssText, cdnBase = "http://127.0.0.1:5173") {
+  if (!cssText || typeof cssText !== "string" || !cssText.includes("url(")) return cssText;
 
-  const toCdn = (u) => (isRootRel(u) ? cdnBase.replace(/\/$/, "") + u : u);
+  return cssText.replace(
+    /url\(\s*(['"]?)(\/(?!\/)[^'")]+)\1\s*\)/g,
+    (match, quote, url) => `url(${quote}${toLocalAssetUrl(url, cdnBase)}${quote})`
+  );
+}
 
-  const rewriteCssUrls = (cssText) => {
-    if (!cssText || typeof cssText !== "string" || !cssText.includes("url(")) {
-      return cssText;
-    }
-    return cssText.replace(/url\((['"]?)(\/[^'")]+)\1\)/g, (m, q, p) => {
-      return `url(${q}${toCdn(p)}${q})`;
-    });
-  };
+export function rewriteLocalSrcset(srcset, cdnBase = "http://127.0.0.1:5173") {
+  if (!srcset || typeof srcset !== "string") return srcset;
+
+  return srcset
+    .split(",")
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .map((item) => {
+      const [url, ...rest] = item.split(/\s+/);
+      return [toLocalAssetUrl(url, cdnBase), ...rest].join(" ");
+    })
+    .join(", ");
+}
+
+export async function setupLocalCdnAssetRewrite({
+  root,
+  cdnBase = "http://127.0.0.1:5173",
+  enabled = true,
+} = {}) {
+  if (!enabled || !root) return;
 
   const rewriteStyleTag = (el) => {
     if (
@@ -29,49 +50,37 @@ export async function setupLocalCdnAssetRewrite({
       return;
     }
     const css = el.textContent || "";
-    const nextCss = rewriteCssUrls(css);
+    const nextCss = rewriteLocalCssUrls(css, cdnBase);
     if (nextCss !== css) el.textContent = nextCss;
   };
 
-  const rewriteSrcset = (srcset) => {
-    if (!srcset || typeof srcset !== "string") return srcset;
-    return srcset
-      .split(",")
-      .map((part) => part.trim())
-      .filter(Boolean)
-      .map((item) => {
-        const [url, ...rest] = item.split(/\s+/);
-        const nextUrl = toCdn(url);
-        return [nextUrl, ...rest].join(" ");
-      })
-      .join(", ");
-  };
-
   const rewriteEl = (el) => {
     if (!el || el.nodeType !== 1) return;
 
-    if (el.hasAttribute?.("src")) {
-      const src = el.getAttribute("src");
-      if (src && !isAbs(src) && isRootRel(src)) el.setAttribute("src", toCdn(src));
+    for (const attribute of ["src", "poster"]) {
+      if (!el.hasAttribute?.(attribute)) continue;
+      const value = el.getAttribute(attribute);
+      const nextValue = toLocalAssetUrl(value, cdnBase);
+      if (nextValue !== value) el.setAttribute(attribute, nextValue);
     }
 
     if (el.hasAttribute?.("srcset")) {
       const srcset = el.getAttribute("srcset");
-      const next = rewriteSrcset(srcset);
+      const next = rewriteLocalSrcset(srcset, cdnBase);
       if (next !== srcset) el.setAttribute("srcset", next);
     }
 
     // inline style url("/...")
     const style = el.getAttribute?.("style");
     if (style && style.includes("url(")) {
-      const nextStyle = rewriteCssUrls(style);
+      const nextStyle = rewriteLocalCssUrls(style, cdnBase);
       if (nextStyle !== style) el.setAttribute("style", nextStyle);
     }
   };
 
   const rewriteTree = (node) => {
     rewriteEl(node);
-    node?.querySelectorAll?.("[src],[srcset],[style]").forEach(rewriteEl);
+    node?.querySelectorAll?.("[src],[srcset],[poster],[style]").forEach(rewriteEl);
   };
 
   // 1) переписываем HTML внутри root
@@ -95,7 +104,7 @@ export async function setupLocalCdnAssetRewrite({
     childList: true,
     subtree: true,
     attributes: true,
-    attributeFilter: ["src", "srcset", "style"],
+    attributeFilter: ["src", "srcset", "poster", "style"],
   });
 
   // 4) наблюдаем за появлением новых style-тегов (HMR)

package/src/lib/rewriteImageAssets.mjs

@@ -0,0 +1,85 @@
+const IMAGE_EXTENSION_RE = /\.(?:avif|gif|jpe?g|png|svg|webp)(?:[?#][^\s]*)?$/i;
+
+function normalizeBase(value) {
+  return String(value || "").trim().replace(/\/+$/, "");
+}
+
+function normalizePrefix(value) {
+  return String(value || "").trim().replace(/^\/+|\/+$/g, "");
+}
+
+export function isImageAssetUrl(url) {
+  return typeof url === "string" && IMAGE_EXTENSION_RE.test(url.trim());
+}
+
+export function rewriteImageAssetUrl(url, {assetsBase, assetsPrefix} = {}) {
+  if (
+    typeof url !== "string" ||
+    !url.startsWith("/") ||
+    url.startsWith("//") ||
+    !isImageAssetUrl(url)
+  ) {
+    return url;
+  }
+
+  const base = normalizeBase(assetsBase);
+  const prefix = normalizePrefix(assetsPrefix);
+  if (!base) return url;
+  if (!prefix) return `${base}${url}`;
+  if (url === `/${prefix}` || url.startsWith(`/${prefix}/`)) return `${base}${url}`;
+  return `${base}/${prefix}${url}`;
+}
+
+export function rewriteImageSrcset(srcset, options) {
+  if (!srcset || typeof srcset !== "string") return srcset;
+
+  return srcset.replace(
+    /(^|,\s*)(\/(?!\/)[^\s,]+)(?=\s|,|$)/g,
+    (match, separator, url) => `${separator}${rewriteImageAssetUrl(url, options)}`
+  );
+}
+
+export function rewriteCssImageUrls(cssText, options) {
+  if (!cssText || typeof cssText !== "string") return cssText;
+
+  return cssText.replace(
+    /url\(\s*(['"]?)([^'")]+)\1\s*\)/gi,
+    (match, quote, url) => {
+      const nextUrl = rewriteImageAssetUrl(url, options);
+      return nextUrl === url ? match : `url(${quote}${nextUrl}${quote})`;
+    }
+  );
+}
+
+export function rewriteHtmlImageAssets(html, options) {
+  if (!html || typeof html !== "string") return html;
+
+  let output = html;
+
+  output = output.replace(/\bsrc=(['"])([^'"]+)\1/gi, (match, quote, url) => {
+    const nextUrl = rewriteImageAssetUrl(url, options);
+    return nextUrl === url ? match : `src=${quote}${nextUrl}${quote}`;
+  });
+
+  output = output.replace(/\bsrcset=(['"])([\s\S]*?)\1/gi, (match, quote, srcset) => {
+    const nextSrcset = rewriteImageSrcset(srcset, options);
+    return nextSrcset === srcset ? match : `srcset=${quote}${nextSrcset}${quote}`;
+  });
+
+  output = output.replace(/\bposter=(['"])([^'"]+)\1/gi, (match, quote, url) => {
+    const nextUrl = rewriteImageAssetUrl(url, options);
+    return nextUrl === url ? match : `poster=${quote}${nextUrl}${quote}`;
+  });
+
+  output = output.replace(/\bstyle=(['"])([\s\S]*?)\1/gi, (match, quote, css) => {
+    const nextCss = rewriteCssImageUrls(css, options);
+    return nextCss === css ? match : `style=${quote}${nextCss}${quote}`;
+  });
+
+  output = output.replace(/<style\b[^>]*>([\s\S]*?)<\/style>/gi, (match, css) => {
+    const nextCss = rewriteCssImageUrls(css, options);
+    return nextCss === css ? match : match.replace(css, nextCss);
+  });
+
+  return output;
+}

package/src/vite/client.js

@@ -2,7 +2,6 @@ import parts from "virtual:landing-blocks";
 import {setupLocalCdnAssetRewrite} from "../lib/rewriteAssetsDev.js";
 
 const FLAG = "monkeyMounted";
-let activeParts = parts;
 
 function mount(container, blocks) {
   if (container.dataset[FLAG] === "1") return;
@@ -13,7 +12,7 @@ function mount(container, blocks) {
   }
   container.dataset[FLAG] = "1";
   for (const part of blocks) {
-    if (typeof part?.init === "function") part.init(container);
+    if (typeof part?.init === "function") part.init();
   }
 }
 
@@ -32,17 +31,5 @@ function waitForContainer() {
 }
 
 const container = await waitForContainer();
-mount(container, activeParts);
+mount(container, parts);
 setupLocalCdnAssetRewrite({root: container, cdnBase: "http://127.0.0.1:5173"});
-
-if (import.meta.hot) {
-  import.meta.hot.accept("virtual:landing-blocks", (module) => {
-    if (!module?.default) return;
-    activeParts = module.default;
-    const host = document.querySelector("#monkey-app");
-    if (!host) return;
-    host.replaceChildren();
-    delete host.dataset[FLAG];
-    mount(host, activeParts);
-  });
-}

package/src/vite/config.mjs

@@ -1,14 +1,13 @@
 import {fileURLToPath} from "node:url";
 import path from "node:path";
 
-import vue from "@vitejs/plugin-vue";
 import {createServer} from "vite";
 import monkey from "vite-plugin-monkey";
 
 import {loadConfig} from "../config/load-config.mjs";
 import {resolvePreset} from "../config/resolve-preset.mjs";
 import {landingBlocksPlugin} from "../lib/landingBlocksPlugin.mjs";
-import {builderAliases} from "./dependencies.mjs";
+import {loadProjectVuePlugin} from "../lib/loadProjectVuePlugin.mjs";
 
 const clientEntry = fileURLToPath(new URL("./client.js", import.meta.url));
 const builderRoot = fileURLToPath(new URL("../../", import.meta.url));
@@ -18,11 +17,13 @@ export async function createViteConfig(root = process.cwd()) {
   const config = await loadConfig(root);
   const preset = resolvePreset(config.site.preset);
   const shouldOpen = process.env.B2C_NO_OPEN !== "1";
+  const vue = config.stack.script === "vue"
+    ? await loadProjectVuePlugin(root)
+    : null;
 
   return {
     root,
     configFile: false,
-    resolve: {alias: builderAliases},
     server: {
       host: "127.0.0.1",
       port: 5173,
@@ -32,7 +33,7 @@ export async function createViteConfig(root = process.cwd()) {
       fs: {allow: [root, builderRoot]},
     },
     plugins: [
-      config.stack.script === "vue" && vue(),
+      vue && vue(),
       landingBlocksPlugin({root, stack: config.stack}),
       monkey({
         entry: path.normalize(clientEntryUrl),

package/src/vite/dependencies.mjs

@@ -1,7 +0,0 @@
-import {fileURLToPath} from "node:url";
-
-export const vueEntry = fileURLToPath(import.meta.resolve("vue"));
-
-export const builderAliases = {
-  vue: vueEntry,
-};