@akanjs/cli 3.1.0-rc.0 → 3.1.0-rc.2

package/index-kc8z134d.js

@@ -0,0 +1,248 @@
+// @bun
+import {
+  resolveSsrPageEntriesForApp
+} from "./index-2etqq75t.js";
+import {
+  bundleDefine,
+  CsrEntryFiles,
+  PagesEntrySourceGenerator,
+  PagesBundleBuilder
+} from "./index-nq045px5.js";
+
+// pkgs/@akanjs/devkit/frontendBuild/csrArtifactBuilder.ts
+import { mkdir, rm, unlink } from "fs/promises";
+import path from "path";
+class CsrArtifactBuilder {
+  #app;
+  #command;
+  #lang;
+  #cssAssets;
+  constructor(app, command = "start", lang = "en", { cssAssets = null } = {}) {
+    this.#app = app;
+    this.#command = command;
+    this.#lang = lang;
+    this.#cssAssets = cssAssets;
+  }
+  async build() {
+    const pageKeys = await this.#app.getPageKeys();
+    if (pageKeys.length === 0) {
+      this.#app.log(`[cli] no route files under ${this.#app.cwdPath}/page \u2014 skipping CSR build`);
+      return null;
+    }
+    const pageEntries = await resolveSsrPageEntriesForApp(this.#app, pageKeys);
+    const akanConfig = await this.#app.getConfig();
+    const cssAssets = await this.#loadCssAssets();
+    const basePaths = [...akanConfig.basePaths];
+    const htmlBasePaths = basePaths.length > 0 ? basePaths : [""];
+    await rm(this.#outputDir, { recursive: true, force: true });
+    await mkdir(this.#generatedDir, { recursive: true });
+    const generatedFiles = Object.fromEntries((await Promise.all(htmlBasePaths.map(async (basePath) => [
+      this.#createHtmlFile(basePath),
+      await this.#createEntryFile(basePath, CsrArtifactBuilder.pageEntriesForBasePath(pageEntries, basePath, basePaths))
+    ]))).flat());
+    const options = CsrArtifactBuilder.bundleOptions(this.#app, this.#command, akanConfig.optimizeImports);
+    const result = await Bun.build({
+      ...options,
+      entrypoints: htmlBasePaths.map((basePath) => this.#generatedPath(CsrArtifactBuilder.htmlFilename(basePath))),
+      files: generatedFiles,
+      root: this.#generatedDir,
+      outdir: this.#outputDir
+    });
+    if (!result.success) {
+      const logs = result.logs.map((log) => log.message).join(`
+`);
+      throw new Error(`[csr-build] failed${logs ? `
+${logs}` : ""}`);
+    }
+    await this.#inlineCsrArtifacts(cssAssets);
+    if (this.#command === "build")
+      await CsrArtifactBuilder.writePublicEnv(this.#app, options.define);
+    this.#app.verbose(`[csr-build] output -> ${this.#outputDir}`);
+    return { outputDir: this.#outputDir };
+  }
+  static bundleOptions(app, command, optimizeImports = []) {
+    return {
+      target: "browser",
+      splitting: false,
+      minify: true,
+      define: bundleDefine(app, command, "csr"),
+      optimizeImports,
+      plugins: [PagesBundleBuilder.createCssStubPlugin()]
+    };
+  }
+  static publicEnvPath(app) {
+    return path.join(app.dist.cwdPath, ".akan", "artifact", "csr-public-env.json");
+  }
+  static async writePublicEnv(app, define) {
+    const prefix = "process.env.";
+    const publicEnv = Object.fromEntries(Object.entries(define).filter(([key]) => key.startsWith(`${prefix}AKAN_PUBLIC_`)).map(([key, value]) => [key.slice(prefix.length), JSON.parse(value)]));
+    await Bun.write(CsrArtifactBuilder.publicEnvPath(app), `${JSON.stringify(publicEnv, null, 2)}
+`);
+  }
+  static pageEntriesForBasePath(pageEntries, basePath, basePaths) {
+    return CsrEntryFiles.pageEntriesForBasePath(pageEntries, basePath, basePaths);
+  }
+  static htmlFilename(basePath) {
+    return `${basePath || "index"}.html`;
+  }
+  static entryFilename(basePath) {
+    return CsrEntryFiles.entryFilename(basePath);
+  }
+  static basePathOfHtml(htmlPath) {
+    const name = path.basename(htmlPath, ".html");
+    return name === "index" ? "" : name;
+  }
+  get #outputDir() {
+    return path.join(this.#command === "build" ? this.#app.dist.cwdPath : this.#app.cwdPath, this.#command === "build" ? "csr" : ".akan/artifact/csr");
+  }
+  get #generatedDir() {
+    return path.join(this.#app.cwdPath, ".akan/generated/csr");
+  }
+  get #artifactDir() {
+    return path.join(this.#command === "build" ? this.#app.dist.cwdPath : this.#app.cwdPath, ".akan/artifact");
+  }
+  #generatedPath(filename) {
+    return path.join(this.#generatedDir, filename);
+  }
+  async#createEntryFile(basePath, pageEntries) {
+    return [
+      this.#generatedPath(CsrArtifactBuilder.entryFilename(basePath)),
+      `import { bootCsr } from "akanjs/webkit";
+${await PagesEntrySourceGenerator.generateStatic(pageEntries)}
+void bootCsr(pages);
+`
+    ];
+  }
+  #createHtmlFile(basePath) {
+    return [
+      this.#generatedPath(CsrArtifactBuilder.htmlFilename(basePath)),
+      `<!doctype html>
+<html lang="${this.#lang}">
+  <head>
+    <meta charset="utf-8" />
+    <title>${this.#app.name}</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./${CsrArtifactBuilder.entryFilename(basePath)}"></script>
+  </body>
+</html>
+  `
+    ];
+  }
+  async#loadCssAssets() {
+    if (this.#cssAssets)
+      return this.#cssAssets;
+    const artifactFile = Bun.file(path.join(this.#artifactDir, "base-artifact.json"));
+    if (!await artifactFile.exists())
+      return {};
+    const artifact = await artifactFile.json();
+    return artifact.cssAssets ?? {};
+  }
+  async#inlineCsrArtifacts(cssAssets) {
+    const jsFiles = new Set;
+    for (const htmlPath of await this.#listOutputFiles((filePath) => filePath.endsWith(".html"))) {
+      const htmlFile = Bun.file(htmlPath);
+      if (!await htmlFile.exists())
+        continue;
+      const basePath = CsrArtifactBuilder.basePathOfHtml(htmlPath);
+      const cssAsset = cssAssets[basePath];
+      if (!cssAsset) {
+        this.#app.logger.warn(`[csr-build] base-artifact.json has no compiled stylesheet for ${basePath || "root"}; ${path.basename(htmlPath)} ships without CSS`);
+      }
+      const inlined = await this.#inlineHtmlAssets(await htmlFile.text(), htmlPath, cssAsset);
+      for (const filePath of inlined.jsFiles)
+        jsFiles.add(filePath);
+      await Bun.write(htmlPath, inlined.html);
+    }
+    for (const filePath of jsFiles)
+      await unlink(filePath).catch(() => {
+        return;
+      });
+    const remainingAssets = await this.#listOutputFiles((filePath) => filePath.endsWith(".js") || filePath.endsWith(".css"));
+    if (remainingAssets.length > 0) {
+      throw new Error(`[csr-build] expected single-file HTML, but CSR assets remain:
+${remainingAssets.join(`
+`)}`);
+    }
+  }
+  async#inlineHtmlAssets(html, htmlPath, cssAsset) {
+    let next = html;
+    if (cssAsset) {
+      const css = await Bun.file(path.join(this.#artifactDir, cssAsset.cssRelPath)).text();
+      next = CsrArtifactBuilder.injectBeforeHeadEnd(next, CsrArtifactBuilder.createInlineStyle(css));
+    }
+    const jsFiles = [];
+    next = await CsrArtifactBuilder.replaceModuleScriptSrc(next, async (src) => {
+      const jsPath = CsrArtifactBuilder.resolveHtmlAssetPath(htmlPath, src);
+      jsFiles.push(jsPath);
+      return await Bun.file(jsPath).text();
+    });
+    return { html: next, jsFiles };
+  }
+  async#listOutputFiles(predicate) {
+    const glob = new Bun.Glob("**/*");
+    const files = [];
+    for await (const filePath of glob.scan({ cwd: this.#outputDir, absolute: true })) {
+      if (predicate(filePath))
+        files.push(filePath);
+    }
+    return files.sort();
+  }
+  static injectBeforeHeadEnd(html, snippet) {
+    const scannable = CsrArtifactBuilder.blankEmbeddedContent(html);
+    const headEnd = scannable.search(/<\/head\s*>/i);
+    if (headEnd !== -1)
+      return `${html.slice(0, headEnd)}${snippet}
+${html.slice(headEnd)}`;
+    const bodyStart = scannable.search(/<body(?:\s|>)/i);
+    if (bodyStart !== -1)
+      return `${html.slice(0, bodyStart)}${snippet}
+${html.slice(bodyStart)}`;
+    return `${html}
+${snippet}`;
+  }
+  static blankEmbeddedContent(html) {
+    return html.replace(/<script\b[^>]*>[\s\S]*?<\/script\s*>|<style\b[^>]*>[\s\S]*?<\/style\s*>|<!--[\s\S]*?-->/gi, (match) => " ".repeat(match.length));
+  }
+  static createInlineStyle(css) {
+    return `<style data-akan-css="active">
+${css.replace(/<\/style/gi, "<\\/style")}
+</style>`;
+  }
+  static async replaceModuleScriptSrc(html, loadScript) {
+    const scriptRe = /<script\b(?=[^>]*\btype=["']module["'])(?=[^>]*\bsrc=["']([^"']+)["'])[^>]*>\s*<\/script>/gi;
+    let result = "";
+    let lastIndex = 0;
+    let matched = false;
+    for (const match of html.matchAll(scriptRe)) {
+      const full = match[0];
+      const src = match[1];
+      if (match.index === undefined || !src)
+        continue;
+      matched = true;
+      result += html.slice(lastIndex, match.index);
+      result += `<script type="module">
+${CsrArtifactBuilder.escapeInlineScript(await loadScript(src))}
+</script>`;
+      lastIndex = match.index + full.length;
+    }
+    if (!matched)
+      return html;
+    return result + html.slice(lastIndex);
+  }
+  static escapeInlineScript(source) {
+    return source.replace(/<\/script/gi, "<\\/script");
+  }
+  static resolveHtmlAssetPath(htmlPath, src) {
+    if (/^[a-z][a-z0-9+.-]*:/i.test(src) || src.startsWith("//")) {
+      throw new Error(`[csr-build] cannot inline external script: ${src}`);
+    }
+    const normalized = src.startsWith("/") ? src.slice(1) : src;
+    return path.resolve(path.dirname(htmlPath), normalized);
+  }
+}
+
+export { CsrArtifactBuilder };