@absolutejs/absolute 0.8.15 → 0.9.1

package/dist/index.js

@@ -11,49 +11,337 @@ var TWO_THIRDS = 2 / 3;
 var DEFAULT_PORT = 3000;
 var DEFAULT_CHUNK_SIZE = 16384;
 // src/core/build.ts
-import { rm as rm2, mkdir as mkdir3, cp } from "fs/promises";
-import { basename as basename3, join as join3 } from "path";
-import { cwd, exit } from "process";
+import { rm as rm2, mkdir as mkdir4, cp } from "fs/promises";
+import { basename as basename4, join as join4, sep as sep3 } from "path";
+import { cwd as cwd3, env as env2, exit } from "process";
 var {$, build: bunBuild } = globalThis.Bun;
 
-// src/build/generateManifest.ts
-var generateManifest = (outputs, buildDirectoryAbsolute, svelteDirName) => {
-  const prefix = svelteDirName ? `(?:${svelteDirName}/)?` : "";
-  const pagesRegex = new RegExp(`^${prefix}pages/`);
-  const indexesRegex = new RegExp(`^${prefix}indexes/`);
-  return outputs.reduce((manifest, artifact) => {
-    let relativePath = artifact.path.startsWith(buildDirectoryAbsolute) ? artifact.path.slice(buildDirectoryAbsolute.length) : artifact.path;
-    relativePath = relativePath.replace(/^\/+/, "");
-    const segments = relativePath.split("/");
-    const fileWithHash = segments.pop();
-    if (!fileWithHash)
-      return manifest;
-    const [baseName] = fileWithHash.split(`.${artifact.hash}.`);
-    if (indexesRegex.test(relativePath)) {
-      manifest[`${baseName}Index`] = `/${relativePath}`;
-    } else if (pagesRegex.test(relativePath)) {
-      manifest[baseName] = artifact.path;
+// src/build/compileSvelte.ts
+import { mkdir, stat } from "fs/promises";
+import {
+  dirname,
+  join,
+  basename,
+  extname,
+  resolve,
+  relative,
+  sep
+} from "path";
+import { cwd, env } from "process";
+var {write, file, Transpiler } = globalThis.Bun;
+import { compile, compileModule, preprocess } from "svelte/compiler";
+var exists = async (filepath) => {
+  try {
+    await stat(filepath);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var resolveSvelte = async (spec, from) => {
+  const basePath = resolve(dirname(from), spec);
+  const explicit = /\.(svelte|svelte\.(?:ts|js))$/.test(basePath);
+  if (!explicit) {
+    const extensions = [".svelte", ".svelte.ts", ".svelte.js"];
+    const paths = extensions.map((ext) => `${basePath}${ext}`);
+    const checks = await Promise.all(paths.map(exists));
+    const match = paths.find((_, index) => checks[index]);
+    return match ?? null;
+  }
+  if (await exists(basePath))
+    return basePath;
+  if (!basePath.endsWith(".svelte"))
+    return null;
+  const tsPath = `${basePath}.ts`;
+  if (await exists(tsPath))
+    return tsPath;
+  const jsPath = `${basePath}.js`;
+  if (await exists(jsPath))
+    return jsPath;
+  return null;
+};
+var transpiler = new Transpiler({ loader: "ts", target: "browser" });
+var projectRoot = cwd();
+var compileSvelte = async (entryPoints, outRoot, cache = new Map) => {
+  const clientFolder = "client";
+  const indexFolder = "indexes";
+  const pagesFolder = "pages";
+  await Promise.all([clientFolder, indexFolder, pagesFolder].map((d) => mkdir(join(outRoot, d), { recursive: true })));
+  const dev = env.NODE_ENV === "development";
+  const build = async (src) => {
+    const memo = cache.get(src);
+    if (memo)
+      return memo;
+    const raw = await file(src).text();
+    const isModule = src.endsWith(".svelte.ts") || src.endsWith(".svelte.js");
+    const prepped = isModule ? raw : (await preprocess(raw, {})).code;
+    const transpiledCode = src.endsWith(".ts") || src.endsWith(".svelte.ts") ? transpiler.transformSync(prepped) : prepped;
+    const relDir = dirname(relative(projectRoot, src));
+    const baseName = basename(src).replace(/\.svelte(\.(ts|js))?$/, "");
+    const importPaths = Array.from(transpiledCode.matchAll(/from\s+['"]([^'"]+)['"]/g)).map((m) => m[1]).filter((p) => p !== undefined);
+    const resolveResults = await Promise.all(importPaths.map((p) => resolveSvelte(p, src)));
+    const childSources = resolveResults.filter((path) => path !== undefined);
+    await Promise.all(childSources.map((p) => build(p)));
+    const generate = (mode) => (isModule ? compileModule(transpiledCode, { dev, filename: src }).js.code : compile(transpiledCode, {
+      css: "injected",
+      dev,
+      filename: src,
+      generate: mode
+    }).js.code).replace(/\.svelte(?:\.(?:ts|js))?(['"])/g, ".js$1");
+    const ssrPath = join(outRoot, pagesFolder, relDir, `${baseName}.js`);
+    const clientPath = join(outRoot, clientFolder, relDir, `${baseName}.js`);
+    await Promise.all([
+      mkdir(dirname(ssrPath), { recursive: true }),
+      mkdir(dirname(clientPath), { recursive: true })
+    ]);
+    if (isModule) {
+      const bundle = generate("client");
+      await Promise.all([
+        write(ssrPath, bundle),
+        write(clientPath, bundle)
+      ]);
     } else {
-      manifest[baseName] = `/${relativePath}`;
+      const serverBundle = generate("server");
+      const clientBundle = generate("client");
+      await Promise.all([
+        write(ssrPath, serverBundle),
+        write(clientPath, clientBundle)
+      ]);
     }
-    return manifest;
-  }, {});
+    const built = { client: clientPath, ssr: ssrPath };
+    cache.set(src, built);
+    return built;
+  };
+  const roots = await Promise.all(entryPoints.map(build));
+  await Promise.all(roots.map(({ client }) => {
+    const relClientDir = dirname(relative(join(outRoot, clientFolder), client));
+    const name = basename(client, extname(client));
+    const indexDir = join(outRoot, indexFolder, relClientDir);
+    const importPathRaw = relative(indexDir, client).split(sep).join("/");
+    const importPath = importPathRaw.startsWith(".") ? importPathRaw : `./${importPathRaw}`;
+    const indexPath = join(indexDir, `${name}.js`);
+    const boot = `import C from "${importPath}";
+import { hydrate } from "svelte";
+hydrate(C,{target:document.body,props:window.__INITIAL_PROPS__??{}});`;
+    return mkdir(indexDir, { recursive: true }).then(() => write(indexPath, boot));
+  }));
+  return {
+    svelteClientPaths: roots.map(({ client }) => {
+      const rel = dirname(relative(join(outRoot, clientFolder), client));
+      return join(outRoot, indexFolder, rel, basename(client));
+    }),
+    svelteServerPaths: roots.map(({ ssr }) => ssr)
+  };
+};
+
+// src/build/compileVue.ts
+import { mkdir as mkdir2 } from "fs/promises";
+import { basename as basename2, dirname as dirname2, join as join2, relative as relative2, resolve as resolve2 } from "path";
+import { cwd as cwd2 } from "process";
+import {
+  parse,
+  compileScript,
+  compileTemplate,
+  compileStyle
+} from "@vue/compiler-sfc";
+var {file: file2, write: write2, Transpiler: Transpiler2 } = globalThis.Bun;
+
+// src/utils/stringModifiers.ts
+var normalizeSlug = (str) => str.trim().replace(/\s+/g, "-").replace(/[^A-Za-z0-9\-_]+/g, "").replace(/[-_]{2,}/g, "-");
+var toPascal = (str) => normalizeSlug(str).split(/[-_]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase()).join("");
+var toKebab = (str) => normalizeSlug(str).replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+// src/build/compileVue.ts
+var transpiler2 = new Transpiler2({ loader: "ts", target: "browser" });
+var projectRoot2 = cwd2();
+var extractImports = (sourceCode) => Array.from(sourceCode.matchAll(/import\s+[\s\S]+?['"]([^'"]+)['"]/g)).map((match) => match[1]).filter((importPath) => importPath !== undefined);
+var toJsFileName = (path) => {
+  if (path.endsWith(".vue")) {
+    return path.replace(/\.vue$/, ".js");
+  }
+  if (path.endsWith(".ts")) {
+    return path.replace(/\.ts$/, ".js");
+  }
+  return `${path}.js`;
+};
+var stripModuleExports = (sourceCode) => sourceCode.replace(/export\s+default/, "const script =").replace(/^export\s+/gm, "");
+var buildVueFile = async (absolutePath, outputDirs, cache, isEntryPage = false) => {
+  if (cache.has(absolutePath))
+    return cache.get(absolutePath);
+  const relativePath = relative2(projectRoot2, absolutePath).replace(/\\/g, "/");
+  const relativePathWithoutExt = relativePath.replace(/\.vue$/, "");
+  const componentName = basename2(absolutePath, ".vue");
+  const kebabId = toKebab(componentName);
+  const sourceCode = await file2(absolutePath).text();
+  const { descriptor } = parse(sourceCode, { filename: absolutePath });
+  const originalSetupCode = descriptor.scriptSetup?.content ?? descriptor.script?.content ?? "";
+  const relativeImports = extractImports(originalSetupCode);
+  const childVueImports = relativeImports.filter((importPath) => importPath.startsWith(".") && importPath.endsWith(".vue"));
+  const tsHelperImports = relativeImports.filter((importPath) => importPath.startsWith(".") && !importPath.endsWith(".vue"));
+  const childBuildResults = await Promise.all(childVueImports.map((importPath) => buildVueFile(resolve2(dirname2(absolutePath), importPath), outputDirs, cache, false)));
+  const compiledScript = compileScript(descriptor, {
+    id: kebabId,
+    inlineTemplate: false
+  });
+  const transformedScript = transpiler2.transformSync(stripModuleExports(compiledScript.content)).replace(/(['"])(\.{1,2}\/[^'"]+)(['"])/g, (_, quote, importPath, endQuote) => quote + toJsFileName(importPath) + endQuote);
+  const renderBlock = (forServer) => compileTemplate({
+    compilerOptions: {
+      bindingMetadata: compiledScript.bindings,
+      prefixIdentifiers: true
+    },
+    filename: absolutePath,
+    id: kebabId,
+    scoped: descriptor.styles.some((s) => s.scoped),
+    source: descriptor.template?.content ?? "",
+    ssr: forServer,
+    ssrCssVars: descriptor.cssVars
+  }).code.replace(/(['"])(\.{1,2}\/[^'"]+)(['"])/g, (_, quote, importPath, endQuote) => quote + toJsFileName(importPath) + endQuote);
+  const ownCssCodes = descriptor.styles.map((styleBlock) => compileStyle({
+    filename: absolutePath,
+    id: kebabId,
+    scoped: styleBlock.scoped,
+    source: styleBlock.content,
+    trim: true
+  }).code);
+  const aggregatedCssCodes = [
+    ...ownCssCodes,
+    ...childBuildResults.flatMap((result) => result.cssCodes)
+  ];
+  let emittedCssPaths = [];
+  if (isEntryPage && aggregatedCssCodes.length) {
+    const cssOutputPath = join2(outputDirs.css, `${toKebab(componentName)}.css`);
+    await mkdir2(dirname2(cssOutputPath), { recursive: true });
+    await write2(cssOutputPath, aggregatedCssCodes.join(`
+`));
+    emittedCssPaths = [cssOutputPath];
+  }
+  const buildModule = (renderCode, renderFunctionName) => {
+    const vueHeader = 'import { defineComponent } from "vue";';
+    return [
+      transformedScript,
+      renderCode,
+      vueHeader,
+      `export default defineComponent({ ...script, ${renderFunctionName} });`
+    ].join(`
+`);
+  };
+  const clientModuleCode = buildModule(renderBlock(false), "render");
+  const serverModuleCode = buildModule(renderBlock(true), "ssrRender");
+  const clientOutPath = join2(outputDirs.client, `${relativePathWithoutExt}.js`);
+  const serverOutPath = join2(outputDirs.server, `${relativePathWithoutExt}.js`);
+  await mkdir2(dirname2(clientOutPath), { recursive: true });
+  await mkdir2(dirname2(serverOutPath), { recursive: true });
+  await write2(clientOutPath, clientModuleCode);
+  await write2(serverOutPath, serverModuleCode);
+  const buildResult = {
+    clientPath: clientOutPath,
+    cssCodes: aggregatedCssCodes,
+    cssPaths: emittedCssPaths,
+    serverPath: serverOutPath,
+    tsHelperPaths: [
+      ...tsHelperImports.map((helper) => resolve2(dirname2(absolutePath), helper.endsWith(".ts") ? helper : `${helper}.ts`)),
+      ...childBuildResults.flatMap((result) => result.tsHelperPaths)
+    ]
+  };
+  cache.set(absolutePath, buildResult);
+  return buildResult;
+};
+var compileVue = async (pageEntryPoints, outputDirectory) => {
+  const clientDir = join2(outputDirectory, "client");
+  const indexDir = join2(outputDirectory, "indexes");
+  const pagesDir = join2(outputDirectory, "pages");
+  const stylesDir = join2(outputDirectory, "styles");
+  await Promise.all([
+    mkdir2(clientDir, { recursive: true }),
+    mkdir2(indexDir, { recursive: true }),
+    mkdir2(pagesDir, { recursive: true }),
+    mkdir2(stylesDir, { recursive: true })
+  ]);
+  const buildCache = new Map;
+  const tsHelperSet = new Set;
+  const pageResults = await Promise.all(pageEntryPoints.map(async (pageEntry) => {
+    const buildResult = await buildVueFile(resolve2(pageEntry), { client: clientDir, css: stylesDir, server: pagesDir }, buildCache, true);
+    buildResult.tsHelperPaths.forEach((p) => tsHelperSet.add(p));
+    const relPath = relative2(projectRoot2, pageEntry).replace(/\.vue$/, "");
+    const indexPath = join2(indexDir, `${relPath}.js`);
+    const clientEntryPath = join2(clientDir, `${relPath}.js`);
+    await mkdir2(dirname2(indexPath), { recursive: true });
+    await write2(indexPath, [
+      `import Comp from "${relative2(dirname2(indexPath), clientEntryPath)}";`,
+      'import { createSSRApp } from "vue";',
+      "const props = window.__INITIAL_PROPS__ ?? {};",
+      'createSSRApp(Comp, props).mount("#root");'
+    ].join(`
+`));
+    return {
+      cssPaths: buildResult.cssPaths,
+      indexPath,
+      serverPath: buildResult.serverPath
+    };
+  }));
+  await Promise.all(Array.from(tsHelperSet).map(async (src) => {
+    const code = transpiler2.transformSync(await file2(src).text());
+    const rel = relative2(projectRoot2, src).replace(/\.ts$/, ".js");
+    const clientDest = join2(clientDir, rel);
+    const serverDest = join2(pagesDir, rel);
+    await Promise.all([
+      mkdir2(dirname2(clientDest), { recursive: true }),
+      mkdir2(dirname2(serverDest), { recursive: true })
+    ]);
+    await Promise.all([
+      write2(clientDest, code),
+      write2(serverDest, code)
+    ]);
+  }));
+  return {
+    vueCssPaths: pageResults.flatMap((pageResult) => pageResult.cssPaths),
+    vueIndexPaths: pageResults.map((pageResult) => pageResult.indexPath),
+    vueServerPaths: pageResults.map((pageResult) => pageResult.serverPath)
+  };
 };
 
+// src/build/generateManifest.ts
+import { extname as extname2 } from "path";
+var generateManifest = (outputs, buildPath) => outputs.reduce((manifest, artifact) => {
+  let relative3 = artifact.path.startsWith(buildPath) ? artifact.path.slice(buildPath.length) : artifact.path;
+  relative3 = relative3.replace(/^\/+/, "");
+  const segments = relative3.split("/");
+  const fileWithHash = segments.pop();
+  if (!fileWithHash)
+    return manifest;
+  const [baseName] = fileWithHash.split(`.${artifact.hash}.`);
+  if (!baseName)
+    return manifest;
+  const ext = extname2(fileWithHash);
+  if (ext === ".css") {
+    manifest[`${toPascal(baseName)}CSS`] = `/${relative3}`;
+    return manifest;
+  }
+  const folder = segments.length > 1 ? segments[1] : segments[0];
+  if (folder === "indexes") {
+    manifest[`${baseName}Index`] = `/${relative3}`;
+  } else if (folder === "pages") {
+    manifest[baseName] ??= artifact.path;
+  } else {
+    manifest[baseName] = `/${relative3}`;
+  }
+  return manifest;
+}, {});
+
 // src/build/generateReactIndexes.ts
-import { mkdir, rm, writeFile } from "fs/promises";
-import { basename, join } from "path";
+import { mkdir as mkdir3, rm, writeFile } from "fs/promises";
+import { basename as basename3, join as join3 } from "path";
 var {Glob } = globalThis.Bun;
 var generateReactIndexFiles = async (reactPagesDirectory, reactIndexesDirectory) => {
   await rm(reactIndexesDirectory, { force: true, recursive: true });
-  await mkdir(reactIndexesDirectory);
+  await mkdir3(reactIndexesDirectory);
   const pagesGlob = new Glob("*.*");
   const files = [];
-  for await (const file of pagesGlob.scan({ cwd: reactPagesDirectory })) {
-    files.push(file);
+  for await (const file3 of pagesGlob.scan({ cwd: reactPagesDirectory })) {
+    files.push(file3);
   }
-  const promises = files.map(async (file) => {
-    const fileName = basename(file);
+  const promises = files.map(async (file3) => {
+    const fileName = basename3(file3);
     const [componentName] = fileName.split(".");
     const content = [
       `import { hydrateRoot } from 'react-dom/client';`,
@@ -71,7 +359,7 @@ var generateReactIndexFiles = async (reactPagesDirectory, reactIndexesDirectory)
       `hydrateRoot(document, <${componentName} {...window.__INITIAL_PROPS__} />);`
     ].join(`
 `);
-    return writeFile(join(reactIndexesDirectory, `${componentName}Index.tsx`), content);
+    return writeFile(join3(reactIndexesDirectory, `${componentName}.tsx`), content);
   });
   await Promise.all(promises);
 };
@@ -81,78 +369,32 @@ var {Glob: Glob2 } = globalThis.Bun;
 var scanEntryPoints = async (dir, pattern) => {
   const entryPaths = [];
   const glob = new Glob2(pattern);
-  for await (const file of glob.scan({ absolute: true, cwd: dir })) {
-    entryPaths.push(file);
+  for await (const file3 of glob.scan({ absolute: true, cwd: dir })) {
+    entryPaths.push(file3);
   }
   return entryPaths;
 };
 
-// src/build/updateScriptTags.ts
+// src/build/updateHTMLAssetPaths.ts
 import { readFile, writeFile as writeFile2 } from "fs/promises";
-var updateScriptTags = async (manifest, htmlDir) => {
+var updateHTMLAssetPaths = async (manifest, htmlDir) => {
   const htmlFiles = await scanEntryPoints(htmlDir, "*.html");
+  const assetRegex = /((?:<script[^>]+src=|<link[^>]*?rel=["']stylesheet["'][^>]*?href=)["'])(\/?(?:.*\/)?)([^./"']+)(?:\.[^."'/]+)?(\.(?:js|ts|css))(["'][^>]*>)/g;
   const tasks = htmlFiles.map(async (filePath) => {
     const original = await readFile(filePath, "utf8");
-    const updated = Object.entries(manifest).reduce((html, [scriptName, newPath]) => {
-      const esc = scriptName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      const regex = new RegExp(`(<script[^>]+src=["'])(/?(?:.*/)?${esc})(?:\\.[^."'/]+)?(\\.js)(["'][^>]*>)`, "g");
-      return html.replace(regex, (_, prefix, __, ___, suffix) => `${prefix}${newPath}${suffix}`);
-    }, original);
+    const updated = original.replace(assetRegex, (match, prefix, _dir, name, ext, suffix) => {
+      const key = ext === ".css" ? `${toPascal(name)}CSS` : name;
+      const newPath = manifest[key];
+      if (newPath)
+        return `${prefix}${newPath}${suffix}`;
+      console.error(`error: no manifest entry for ${ext.slice(1)} "${name}" referenced in ${filePath}`);
+      return match;
+    });
     await writeFile2(filePath, updated, "utf8");
   });
   await Promise.all(tasks);
 };
 
-// src/svelte/compileSvelte.ts
-import { mkdir as mkdir2 } from "fs/promises";
-import { basename as basename2, join as join2 } from "path";
-import { env } from "process";
-var {write, file } = globalThis.Bun;
-import { compile, preprocess } from "svelte/compiler";
-var compileSvelte = async (entryPoints, outputDirectory) => {
-  const pagesDir = join2(outputDirectory, "pages");
-  const clientDir = join2(outputDirectory, "client");
-  const indexesDir = join2(outputDirectory, "indexes");
-  await Promise.all([
-    mkdir2(clientDir, { recursive: true }),
-    mkdir2(indexesDir, { recursive: true })
-  ]);
-  const isDev = env.NODE_ENV === "development";
-  const builds = await Promise.all(entryPoints.map(async (entry) => {
-    const source = await file(entry).text();
-    const { code: pre } = await preprocess(source, {});
-    const name = basename2(entry, ".svelte");
-    const { js: ssrJs } = compile(pre, {
-      css: "injected",
-      dev: isDev,
-      filename: entry,
-      generate: "server"
-    });
-    const ssrPath = join2(pagesDir, `${name}.js`);
-    const { js: clientJs } = compile(pre, {
-      css: "injected",
-      dev: isDev,
-      filename: entry,
-      generate: "client"
-    });
-    const clientComponentPath = join2(clientDir, `${name}.js`);
-    const bootstrap = `import Component from "../client/${name}.js";
-import { hydrate } from "svelte";
-hydrate(Component,{target:document.body,props:window.__INITIAL_PROPS__??{}});`;
-    const clientIndexPath = join2(indexesDir, `${name}.js`);
-    await Promise.all([
-      write(ssrPath, ssrJs.code),
-      write(clientComponentPath, clientJs.code),
-      write(clientIndexPath, bootstrap)
-    ]);
-    return { clientIndexPath, ssrPath };
-  }));
-  return {
-    svelteClientPaths: builds.map(({ clientIndexPath }) => clientIndexPath),
-    svelteServerPaths: builds.map(({ ssrPath }) => ssrPath)
-  };
-};
-
 // src/utils/getDurationString.ts
 var getDurationString = (duration) => {
   let durationString;
@@ -167,152 +409,216 @@ var getDurationString = (duration) => {
 };
 
 // src/utils/validateSafePath.ts
-import { resolve, relative, sep } from "path";
+import { resolve as resolve3, relative as relative3, sep as sep2 } from "path";
 var validateSafePath = (targetPath, baseDirectory) => {
-  const absoluteBase = resolve(baseDirectory);
-  const absoluteTarget = resolve(baseDirectory, targetPath);
-  if (relative(absoluteBase, absoluteTarget).startsWith(`..${sep}`)) {
+  const absoluteBase = resolve3(baseDirectory);
+  const absoluteTarget = resolve3(baseDirectory, targetPath);
+  if (relative3(absoluteBase, absoluteTarget).startsWith(`..${sep2}`)) {
     throw new Error(`Unsafe path: ${targetPath}`);
   }
   return absoluteTarget;
 };
 
 // src/core/build.ts
+var commonAncestor = (paths, fallback) => {
+  if (paths.length === 0)
+    return fallback;
+  const segmentsList = paths.map((p) => p.split(sep3));
+  const [first] = segmentsList;
+  if (!first)
+    return fallback;
+  const commonSegments = first.filter((segment, index) => segmentsList.every((pathSegs) => pathSegs[index] === segment));
+  return commonSegments.length ? commonSegments.join(sep3) : fallback;
+};
+var isDev = env2.NODE_ENV === "development";
+var vueFeatureFlags = {
+  __VUE_OPTIONS_API__: "true",
+  __VUE_PROD_DEVTOOLS__: isDev ? "true" : "false",
+  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: isDev ? "true" : "false"
+};
 var build = async ({
   buildDirectory = "build",
-  assetsDirectory,
+  assetsDirectory = "assets",
   reactDirectory,
   htmlDirectory,
   htmxDirectory,
   svelteDirectory,
+  vueDirectory,
   tailwind,
   options
 }) => {
   const buildStart = performance.now();
-  const projectRoot = cwd();
-  const buildPath = validateSafePath(buildDirectory, projectRoot);
-  const assetsPath = assetsDirectory && validateSafePath(assetsDirectory, projectRoot);
-  const reactDirectoryPath = reactDirectory && validateSafePath(reactDirectory, projectRoot);
-  const htmlDirectoryPath = htmlDirectory && validateSafePath(htmlDirectory, projectRoot);
-  const htmxPath = htmxDirectory && validateSafePath(htmxDirectory, projectRoot);
-  const svelteDirectoryPath = svelteDirectory && validateSafePath(svelteDirectory, projectRoot);
-  const reactIndexesPath = reactDirectoryPath && join3(reactDirectoryPath, "indexes");
-  const reactPagesPath = reactDirectoryPath && join3(reactDirectoryPath, "pages");
-  const htmlPagesPath = htmlDirectoryPath && join3(htmlDirectoryPath, "pages");
-  const htmlScriptsPath = htmlDirectoryPath && join3(htmlDirectoryPath, "scripts");
-  const sveltePagesPath = svelteDirectoryPath && join3(svelteDirectoryPath, "pages");
-  const isSingleFrontend = [
-    reactDirectoryPath,
-    htmlDirectoryPath,
-    htmxPath,
-    svelteDirectoryPath
-  ].filter(Boolean).length === 1;
-  const isSvelteOnly = isSingleFrontend && svelteDirectoryPath !== undefined;
-  const serverOutDir = isSvelteOnly ? join3(buildPath, "pages") : buildPath;
-  const serverRoot = isSvelteOnly ? join3(svelteDirectoryPath, "pages") : undefined;
-  const svelteOutDir = isSingleFrontend ? buildPath : join3(buildPath, basename3(svelteDirectoryPath ?? ""));
-  const svelteDirName = svelteDirectoryPath && basename3(svelteDirectoryPath);
+  const projectRoot3 = cwd3();
+  const buildPath = validateSafePath(buildDirectory, projectRoot3);
+  const assetsPath = assetsDirectory && validateSafePath(assetsDirectory, projectRoot3);
+  const reactDir = reactDirectory && validateSafePath(reactDirectory, projectRoot3);
+  const htmlDir = htmlDirectory && validateSafePath(htmlDirectory, projectRoot3);
+  const htmxDir = htmxDirectory && validateSafePath(htmxDirectory, projectRoot3);
+  const svelteDir = svelteDirectory && validateSafePath(svelteDirectory, projectRoot3);
+  const vueDir = vueDirectory && validateSafePath(vueDirectory, projectRoot3);
+  const reactIndexesPath = reactDir && join4(reactDir, "indexes");
+  const reactPagesPath = reactDir && join4(reactDir, "pages");
+  const htmlPagesPath = htmlDir && join4(htmlDir, "pages");
+  const htmlScriptsPath = htmlDir && join4(htmlDir, "scripts");
+  const sveltePagesPath = svelteDir && join4(svelteDir, "pages");
+  const vuePagesPath = vueDir && join4(vueDir, "pages");
+  const frontends = [reactDir, htmlDir, htmxDir, svelteDir, vueDir].filter(Boolean);
+  const isSingle = frontends.length === 1;
+  let serverOutDir;
+  if (svelteDir)
+    serverOutDir = join4(buildPath, basename4(svelteDir), "pages");
+  else if (vueDir)
+    serverOutDir = join4(buildPath, basename4(vueDir), "pages");
+  let serverRoot;
+  if (svelteDir)
+    serverRoot = join4(svelteDir, "pages");
+  else if (vueDir)
+    serverRoot = join4(vueDir, "pages");
   await rm2(buildPath, { force: true, recursive: true });
-  await mkdir3(buildPath);
-  if (reactIndexesPath && reactPagesPath) {
+  await mkdir4(buildPath);
+  if (reactIndexesPath && reactPagesPath)
     await generateReactIndexFiles(reactPagesPath, reactIndexesPath);
-  }
-  if (assetsPath) {
-    await cp(assetsPath, join3(buildPath, "assets"), {
+  if (assetsPath)
+    await cp(assetsPath, join4(buildPath, "assets"), {
       force: true,
       recursive: true
     });
-  }
-  if (htmxPath) {
-    await mkdir3(join3(buildPath, "htmx"));
-    await cp(htmxPath, join3(buildPath, "htmx"), {
+  if (htmxDir) {
+    await mkdir4(join4(buildPath, "htmx"));
+    await cp(htmxDir, join4(buildPath, "htmx"), {
       force: true,
       recursive: true
     });
   }
-  if (tailwind) {
-    await $`bunx @tailwindcss/cli -i ${tailwind.input} -o ${join3(buildPath, tailwind.output)}`;
-  }
-  const reactEntryPoints = reactIndexesPath ? await scanEntryPoints(reactIndexesPath, "*.tsx") : [];
-  const svelteEntryPoints = sveltePagesPath ? await scanEntryPoints(sveltePagesPath, "*.svelte") : [];
-  const htmlEntryPoints = htmlScriptsPath ? await scanEntryPoints(htmlScriptsPath, "*.{js,ts}") : [];
-  const { svelteServerPaths, svelteClientPaths } = svelteDirectoryPath ? await compileSvelte(svelteEntryPoints, svelteDirectoryPath) : { svelteClientPaths: [], svelteServerPaths: [] };
-  const serverEntryPoints = [
-    ...reactEntryPoints,
-    ...htmlEntryPoints,
-    ...svelteServerPaths
+  if (tailwind)
+    await $`bunx @tailwindcss/cli -i ${tailwind.input} -o ${join4(buildPath, tailwind.output)}`;
+  const reactEntries = reactIndexesPath ? await scanEntryPoints(reactIndexesPath, "*.tsx") : [];
+  const htmlEntries = htmlScriptsPath ? await scanEntryPoints(htmlScriptsPath, "*.{js,ts}") : [];
+  const svelteEntries = sveltePagesPath ? await scanEntryPoints(sveltePagesPath, "*.svelte") : [];
+  const vueEntries = vuePagesPath ? await scanEntryPoints(vuePagesPath, "*.vue") : [];
+  const htmlCssEntries = htmlDir ? await scanEntryPoints(join4(htmlDir, "styles"), "*.css") : [];
+  const reactCssEntries = reactDir ? await scanEntryPoints(join4(reactDir, "styles"), "*.css") : [];
+  const svelteCssEntries = svelteDir ? await scanEntryPoints(join4(svelteDir, "styles"), "*.css") : [];
+  const { svelteServerPaths, svelteClientPaths } = svelteDir ? await compileSvelte(svelteEntries, svelteDir) : { svelteClientPaths: [], svelteServerPaths: [] };
+  const { vueServerPaths, vueIndexPaths, vueCssPaths } = vueDir ? await compileVue(vueEntries, vueDir) : { vueCssPaths: [], vueIndexPaths: [], vueServerPaths: [] };
+  const serverEntryPoints = [...svelteServerPaths, ...vueServerPaths];
+  const clientEntryPoints = [
+    ...reactEntries,
+    ...svelteClientPaths,
+    ...htmlEntries,
+    ...vueIndexPaths
   ];
-  if (serverEntryPoints.length === 0) {
-    console.warn("No server entry points found, skipping manifest generation");
-    return null;
+  const cssEntryPoints = [
+    ...vueCssPaths,
+    ...reactCssEntries,
+    ...svelteCssEntries,
+    ...htmlCssEntries
+  ];
+  if (serverEntryPoints.length === 0 && clientEntryPoints.length === 0) {
+    console.warn("No entry points found, manifest will be empty.");
+    return {};
+  }
+  let serverLogs = [];
+  let serverOutputs = [];
+  if (serverEntryPoints.length > 0) {
+    const { logs, outputs } = await bunBuild({
+      entrypoints: serverEntryPoints,
+      format: "esm",
+      naming: `[dir]/[name].[hash].[ext]`,
+      outdir: serverOutDir,
+      root: serverRoot,
+      target: "bun"
+    }).catch((err) => {
+      console.error("Server build failed:", err);
+      exit(1);
+    });
+    serverLogs = logs;
+    serverOutputs = outputs;
   }
-  const { logs: serverLogs, outputs: serverOutputs } = await bunBuild({
-    entrypoints: serverEntryPoints,
-    format: "esm",
-    naming: `[dir]/[name].[hash].[ext]`,
-    outdir: serverOutDir,
-    root: serverRoot,
-    target: "bun"
-  }).catch((error) => {
-    console.error("Server build failed:", error);
-    exit(1);
-  });
   let clientLogs = [];
   let clientOutputs = [];
-  if (svelteDirectoryPath) {
+  if (clientEntryPoints.length > 0) {
+    const roots = [reactDir, svelteDir, htmlDir, vueDir].filter((dir) => Boolean(dir));
+    const clientRoot = isSingle ? roots[0] ?? projectRoot3 : commonAncestor(roots, projectRoot3);
     const { logs, outputs } = await bunBuild({
-      entrypoints: svelteClientPaths,
+      define: vueDirectory ? vueFeatureFlags : undefined,
+      entrypoints: clientEntryPoints,
       format: "esm",
       naming: `[dir]/[name].[hash].[ext]`,
-      outdir: svelteOutDir,
-      root: svelteDirectoryPath,
+      outdir: buildPath,
+      root: clientRoot,
       target: "browser"
-    }).catch((error) => {
-      console.error("Client build failed:", error);
+    }).catch((err) => {
+      console.error("Client build failed:", err);
       exit(1);
     });
     clientLogs = logs;
     clientOutputs = outputs;
   }
-  [...serverLogs, ...clientLogs].forEach((log) => {
+  let cssLogs = [];
+  let cssOutputs = [];
+  if (cssEntryPoints.length > 0) {
+    const { logs, outputs } = await bunBuild({
+      entrypoints: cssEntryPoints,
+      naming: `[name].[hash].[ext]`,
+      outdir: join4(buildPath, basename4(assetsPath), "css"),
+      target: "browser"
+    }).catch((err) => {
+      console.error("CSS build failed:", err);
+      exit(1);
+    });
+    cssLogs = logs;
+    cssOutputs = outputs;
+  }
+  const allLogs = [...serverLogs, ...clientLogs, ...cssLogs];
+  for (const log of allLogs) {
     if (log.level === "error")
       console.error(log);
     else if (log.level === "warning")
       console.warn(log);
     else
       console.info(log);
-  });
-  const manifest = generateManifest([...serverOutputs, ...clientOutputs], buildPath, svelteDirName);
-  if (htmlDirectoryPath && htmlPagesPath) {
-    const outputHtmlPages = join3(buildPath, basename3(htmlDirectoryPath), "pages");
-    await mkdir3(outputHtmlPages, { recursive: true });
+  }
+  const manifest = generateManifest([...serverOutputs, ...clientOutputs, ...cssOutputs], buildPath);
+  if (htmlDir && htmlPagesPath) {
+    const outputHtmlPages = join4(buildPath, basename4(htmlDir), "pages");
+    await mkdir4(outputHtmlPages, { recursive: true });
     await cp(htmlPagesPath, outputHtmlPages, {
       force: true,
       recursive: true
     });
-    await updateScriptTags(manifest, outputHtmlPages);
+    await updateHTMLAssetPaths(manifest, outputHtmlPages);
   }
-  if (!options?.preserveIntermediateFiles && svelteDirectoryPath) {
-    await rm2(join3(svelteDirectoryPath, "indexes"), {
+  if (!options?.preserveIntermediateFiles && svelteDir) {
+    await rm2(join4(svelteDir, "indexes"), { force: true, recursive: true });
+    await rm2(join4(svelteDir, "client"), { force: true, recursive: true });
+    await Promise.all(svelteServerPaths.map((path) => rm2(path, { force: true })));
+    await rm2(join4(svelteDir, "pages", "example"), {
       force: true,
       recursive: true
     });
-    await rm2(join3(svelteDirectoryPath, "client"), {
+  }
+  if (!options?.preserveIntermediateFiles && vueDir) {
+    await rm2(join4(vueDir, "indexes"), { force: true, recursive: true });
+    await rm2(join4(vueDir, "client"), { force: true, recursive: true });
+    await rm2(join4(vueDir, "styles"), { force: true, recursive: true });
+    await Promise.all(vueServerPaths.map((path) => rm2(path, { force: true })));
+    await rm2(join4(vueDir, "pages", "example"), {
       force: true,
       recursive: true
     });
-    await Promise.all(svelteServerPaths.map((filePath) => rm2(filePath, { force: true })));
   }
-  if (!options?.preserveIntermediateFiles && reactIndexesPath) {
+  if (!options?.preserveIntermediateFiles && reactIndexesPath)
     await rm2(reactIndexesPath, { force: true, recursive: true });
-  }
   console.log(`Build completed in ${getDurationString(performance.now() - buildStart)}`);
   return manifest;
 };
 // src/core/pageHandlers.ts
-var {file: file2 } = globalThis.Bun;
+var {file: file3 } = globalThis.Bun;
 import { createElement } from "react";
 import { renderToReadableStream as renderReactToReadableStream } from "react-dom/server";
+import { createSSRApp, h } from "vue";
+import { renderToWebStream as renderVueToWebStream } from "vue/server-renderer";
 
 // src/svelte/renderToReadableStream.ts
 import { render } from "svelte/server";
@@ -326,7 +632,10 @@ var ESCAPE_LOOKUP = {
   ">": "\\u003E"
 };
 var ESCAPE_REGEX = /[&><\u2028\u2029]/g;
-var escapeScriptContent = (content) => content.replace(ESCAPE_REGEX, (char) => ESCAPE_LOOKUP[char]);
+var escapeScriptContent = (content) => content.replace(ESCAPE_REGEX, (char) => {
+  const escaped = ESCAPE_LOOKUP[char];
+  return escaped !== undefined ? escaped : char;
+});
 
 // src/svelte/renderToReadableStream.ts
 var renderToReadableStream = async (component, props, {
@@ -382,26 +691,54 @@ var handleReactPageRequest = async (pageComponent, index, ...props) => {
     headers: { "Content-Type": "text/html" }
   });
 };
-var handleSveltePageRequest = async (PageComponent, manifest, props) => {
-  const componentPath = PageComponent.toString();
-  const pathSegments = componentPath.split("/");
-  const lastSegment = pathSegments[pathSegments.length - 1] ?? "";
-  const componentName = lastSegment.replace(/\.svelte$/, "");
-  const pagePath = manifest[componentName];
-  const indexPath = manifest[`${componentName}Index`];
+var handleSveltePageRequest = async (_PageComponent, pagePath, indexPath, props) => {
   const { default: ImportedPageComponent } = await import(pagePath);
   const stream = await renderToReadableStream(ImportedPageComponent, props, {
-    bootstrapModules: [indexPath],
+    bootstrapModules: indexPath ? [indexPath] : [],
     bootstrapScriptContent: `window.__INITIAL_PROPS__=${JSON.stringify(props)}`
   });
   return new Response(stream, {
     headers: { "Content-Type": "text/html" }
   });
 };
-var handleHTMLPageRequest = (html) => file2(html);
+var handleVuePageRequest = async (_PageComponent, pagePath, indexPath, headTag = "<head></head>", ...props) => {
+  const [maybeProps] = props;
+  const { default: ImportedPageComponent } = await import(pagePath);
+  const app = createSSRApp({
+    render: () => h(ImportedPageComponent, maybeProps ?? {})
+  });
+  const bodyStream = renderVueToWebStream(app);
+  const head = `<!DOCTYPE html><html>${headTag}<body><div id="root">`;
+  const tail = `</div><script>window.__INITIAL_PROPS__=${JSON.stringify(maybeProps ?? {})}</script><script type="module" src="${indexPath}"></script></body></html>`;
+  const stream = new ReadableStream({
+    start(controller) {
+      controller.enqueue(head);
+      const reader = bodyStream.getReader();
+      const pumpLoop = () => {
+        reader.read().then(({ done, value }) => done ? (controller.enqueue(tail), controller.close()) : (controller.enqueue(value), pumpLoop())).catch((err) => controller.error(err));
+      };
+      pumpLoop();
+    }
+  });
+  return new Response(stream, {
+    headers: { "Content-Type": "text/html" }
+  });
+};
+var handleHTMLPageRequest = (html) => file3(html);
+var handlePageRequest = (PageComponent, ...props) => {
+  console.log("handlePageRequest coming soon.", PageComponent, props);
+};
+// src/core/lookup.ts
+var asset = (manifest, name) => {
+  const assetPath = manifest[name];
+  if (assetPath === undefined) {
+    throw new Error(`Asset "${name}" not found in manifest.`);
+  }
+  return assetPath;
+};
 // src/plugins/networkingPlugin.ts
 import { argv } from "process";
-var {env: env2 } = globalThis.Bun;
+var {env: env3 } = globalThis.Bun;
 
 // src/utils/networking.ts
 import os from "os";
@@ -416,8 +753,8 @@ var getLocalIPAddress = () => {
 };
 
 // src/plugins/networkingPlugin.ts
-var host = env2.HOST ?? "localhost";
-var port = env2.PORT ?? DEFAULT_PORT;
+var host = env3.HOST ?? "localhost";
+var port = env3.PORT ?? DEFAULT_PORT;
 var localIP;
 var args = argv;
 var hostFlag = args.includes("--host");
@@ -440,15 +777,37 @@ var networkingPlugin = (app) => app.listen({
 var pageRouterPlugin = () => {
   console.log("Page Router Plugin Not Implemented Yet");
 };
+// src/utils/generateHeadElement.ts
+var generateHeadElement = ({
+  cssPath,
+  title = "AbsoluteJS",
+  description = "A page created using AbsoluteJS",
+  font,
+  icon = "/assets/ico/favicon.ico"
+} = {}) => `<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <meta name="description" content="${description}">
+  <link rel="icon" href="${icon}" type="image/x-icon">
+  ${font ? `<link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=${font}:wght@100..900&display=swap" rel="stylesheet">` : ""}
+  ${cssPath ? `<link rel="stylesheet" href="${cssPath}" type="text/css">` : ""}
+</head>`;
 export {
-  updateScriptTags,
+  updateHTMLAssetPaths,
   pageRouterPlugin,
   networkingPlugin,
+  handleVuePageRequest,
   handleSveltePageRequest,
   handleReactPageRequest,
+  handlePageRequest,
   handleHTMLPageRequest,
   getLocalIPAddress,
+  generateHeadElement,
   build,
+  asset,
   TWO_THIRDS,
   TIME_PRECISION,
   SECONDS_IN_A_MINUTE,
@@ -461,5 +820,5 @@ export {
   DEFAULT_CHUNK_SIZE
 };
 
-//# debugId=F0D0DE61A724A5EB64756E2164756E21
+//# debugId=919FA38EE8B07AC264756E2164756E21
 //# sourceMappingURL=index.js.map