tiendu 0.3.1 → 0.5.0

package/lib/local-preview.mjs

@@ -0,0 +1,350 @@
+import { createServer } from "node:http";
+import { Readable } from "node:stream";
+
+const DEFAULT_PORT = 9292;
+const MAX_PORT_ATTEMPTS = 20;
+const MAX_SSE_CLIENTS = 20;
+const RELOAD_DEBOUNCE_MS = 150;
+const HEARTBEAT_INTERVAL_MS = 15_000;
+const PROXY_TIMEOUT_MS = 30_000;
+const MAX_PROXY_REQUEST_BODY_BYTES = 2 * 1024 * 1024;
+
+const LIVE_RELOAD_PATH = "/__tiendu__/livereload.js";
+const EVENTS_PATH = "/__tiendu__/events";
+
+const LIVE_RELOAD_SCRIPT = `const source = new EventSource(${JSON.stringify(EVENTS_PATH)});
+let reloadTimer = null;
+
+source.addEventListener("reload", () => {
+  if (reloadTimer) clearTimeout(reloadTimer);
+  reloadTimer = setTimeout(() => window.location.reload(), 60);
+});
+`;
+
+const HOP_BY_HOP_HEADERS = new Set([
+  "connection",
+  "keep-alive",
+  "proxy-authenticate",
+  "proxy-authorization",
+  "te",
+  "trailer",
+  "transfer-encoding",
+  "upgrade",
+]);
+
+const readRequestBody = async (request) => {
+  const chunks = [];
+  let totalBytes = 0;
+
+  for await (const chunk of request) {
+    totalBytes += chunk.length;
+    if (totalBytes > MAX_PROXY_REQUEST_BODY_BYTES) {
+      const error = new Error("Local preview request body is too large.");
+      error.statusCode = 413;
+      throw error;
+    }
+
+    chunks.push(chunk);
+  }
+
+  if (chunks.length === 0) return undefined;
+  return Buffer.concat(chunks);
+};
+
+const createForwardHeaders = (request, previewHostname) => {
+  const headers = new Headers();
+
+  for (const [name, value] of Object.entries(request.headers)) {
+    if (value == null) continue;
+
+    const normalizedName = name.toLowerCase();
+    if (
+      HOP_BY_HOP_HEADERS.has(normalizedName) ||
+      normalizedName === "host" ||
+      normalizedName === "origin" ||
+      normalizedName === "referer" ||
+      normalizedName === "content-length"
+    ) {
+      continue;
+    }
+
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        headers.append(name, entry);
+      }
+      continue;
+    }
+
+    headers.set(name, value);
+  }
+
+  headers.set("host", previewHostname);
+  headers.set("x-forwarded-host", previewHostname);
+
+  return headers;
+};
+
+const isHtmlResponse = (headers) =>
+  (headers.get("content-type") ?? "").toLowerCase().includes("text/html");
+
+const isHtmlDocument = (html) => /<html\b|<!doctype\s+html/i.test(html);
+
+const injectLiveReloadScript = (html) => {
+  if (html.includes(LIVE_RELOAD_PATH)) return html;
+  if (!isHtmlDocument(html)) return html;
+
+  const scriptTag = `<script type="module" src="${LIVE_RELOAD_PATH}"></script>`;
+
+  if (html.includes("</head>")) {
+    return html.replace("</head>", `${scriptTag}</head>`);
+  }
+
+  if (html.includes("</body>")) {
+    return html.replace("</body>", `${scriptTag}</body>`);
+  }
+
+  return `${html}${scriptTag}`;
+};
+
+const rewriteSetCookie = (cookieValue) =>
+  cookieValue
+    .replace(/;\s*Secure/gi, "")
+    .replace(/;\s*Domain=[^;]+/gi, "");
+
+const rewriteLocationHeader = (locationValue, localOrigin, previewOrigin, upstreamOrigin) => {
+  if (!locationValue) return null;
+
+  try {
+    const locationUrl = new URL(locationValue, previewOrigin);
+    if (
+      locationUrl.origin === previewOrigin.origin ||
+      locationUrl.origin === upstreamOrigin.origin
+    ) {
+      return `${localOrigin.origin}${locationUrl.pathname}${locationUrl.search}${locationUrl.hash}`;
+    }
+
+    return locationValue;
+  } catch {
+    return locationValue;
+  }
+};
+
+const writeResponseHeaders = (response, serverResponse, context) => {
+  const { localOrigin, previewOrigin, upstreamOrigin } = context;
+
+  for (const [name, value] of response.headers) {
+    const normalizedName = name.toLowerCase();
+    if (
+      HOP_BY_HOP_HEADERS.has(normalizedName) ||
+      normalizedName === "content-length" ||
+      normalizedName === "content-encoding" ||
+      normalizedName === "set-cookie"
+    ) {
+      continue;
+    }
+
+    if (normalizedName === "location") {
+      const rewritten = rewriteLocationHeader(
+        value,
+        localOrigin,
+        previewOrigin,
+        upstreamOrigin,
+      );
+      if (rewritten) serverResponse.setHeader(name, rewritten);
+      continue;
+    }
+
+    serverResponse.setHeader(name, value);
+  }
+
+  const setCookies = response.headers.getSetCookie?.() ?? [];
+  if (setCookies.length > 0) {
+    serverResponse.setHeader(
+      "set-cookie",
+      setCookies.map(rewriteSetCookie),
+    );
+  }
+};
+
+const listenOnAvailablePort = (server, preferredPort) =>
+  new Promise((resolve, reject) => {
+    let currentPort = preferredPort;
+
+    const tryListen = () => {
+      const onError = (error) => {
+        server.off("listening", onListening);
+
+        if (error?.code === "EADDRINUSE" && currentPort < preferredPort + MAX_PORT_ATTEMPTS) {
+          currentPort += 1;
+          tryListen();
+          return;
+        }
+
+        reject(error);
+      };
+
+      const onListening = () => {
+        server.off("error", onError);
+        const address = server.address();
+        if (!address || typeof address === "string") {
+          reject(new Error("Could not determine local preview port."));
+          return;
+        }
+
+        resolve(address.port);
+      };
+
+      server.once("error", onError);
+      server.once("listening", onListening);
+      server.listen(currentPort, "localhost");
+    };
+
+    tryListen();
+  });
+
+export const startLocalPreviewServer = async ({
+  apiBaseUrl,
+  previewHostname,
+  port = DEFAULT_PORT,
+}) => {
+  const upstreamOrigin = new URL(apiBaseUrl);
+  const previewOrigin = new URL(`${upstreamOrigin.protocol}//${previewHostname}`);
+  const sseClients = new Set();
+  let reloadTimer = null;
+
+  const server = createServer(async (request, response) => {
+    if (!request.url) {
+      response.writeHead(400);
+      response.end("Missing request URL");
+      return;
+    }
+
+    const localOrigin = new URL(`http://${request.headers.host ?? `127.0.0.1:${port}`}`);
+    const requestUrl = new URL(request.url, localOrigin);
+
+    if (requestUrl.pathname === LIVE_RELOAD_PATH) {
+      response.writeHead(200, {
+        "content-type": "application/javascript; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      response.end(LIVE_RELOAD_SCRIPT);
+      return;
+    }
+
+    if (requestUrl.pathname === EVENTS_PATH) {
+      response.writeHead(200, {
+        "content-type": "text/event-stream; charset=utf-8",
+        "cache-control": "no-store",
+        connection: "keep-alive",
+      });
+      response.write("event: connected\ndata: ok\n\n");
+
+      if (sseClients.size >= MAX_SSE_CLIENTS) {
+        const oldestClient = sseClients.values().next().value;
+        oldestClient?.end();
+        if (oldestClient) {
+          sseClients.delete(oldestClient);
+        }
+      }
+
+      sseClients.add(response);
+
+      request.on("close", () => {
+        sseClients.delete(response);
+      });
+      return;
+    }
+
+    const targetUrl = new URL(requestUrl.pathname + requestUrl.search, upstreamOrigin);
+
+    try {
+      const body = await readRequestBody(request);
+      const upstreamResponse = await fetch(targetUrl, {
+        method: request.method,
+        headers: createForwardHeaders(request, previewHostname),
+        body,
+        redirect: "manual",
+        signal: AbortSignal.timeout(PROXY_TIMEOUT_MS),
+      });
+
+      if (isHtmlResponse(upstreamResponse.headers)) {
+        const html = injectLiveReloadScript(await upstreamResponse.text());
+        writeResponseHeaders(upstreamResponse, response, {
+          localOrigin,
+          previewOrigin,
+          upstreamOrigin,
+        });
+        response.statusCode = upstreamResponse.status;
+        response.setHeader("cache-control", "no-store");
+        response.setHeader("content-length", Buffer.byteLength(html, "utf-8"));
+        response.end(html);
+        return;
+      }
+
+      writeResponseHeaders(upstreamResponse, response, {
+        localOrigin,
+        previewOrigin,
+        upstreamOrigin,
+      });
+      response.statusCode = upstreamResponse.status;
+
+      if (!upstreamResponse.body) {
+        response.end();
+        return;
+      }
+
+      const proxyStream = Readable.fromWeb(upstreamResponse.body);
+      proxyStream.on("error", (error) => {
+        console.warn(`Local preview proxy stream error: ${error.message}`);
+        response.destroy(error);
+      });
+      proxyStream.pipe(response);
+    } catch (error) {
+      const statusCode = error.statusCode ?? 502;
+      response.writeHead(statusCode, { "content-type": "text/plain; charset=utf-8" });
+      response.end(`Local preview proxy error: ${error.message}`);
+    }
+  });
+
+  const heartbeat = setInterval(() => {
+    for (const client of sseClients) {
+      client.write(": ping\n\n");
+    }
+  }, HEARTBEAT_INTERVAL_MS);
+
+  const boundPort = await listenOnAvailablePort(server, port);
+
+  return {
+    url: `http://localhost:${boundPort}/`,
+    notifyReload() {
+      if (reloadTimer) clearTimeout(reloadTimer);
+
+      reloadTimer = setTimeout(() => {
+        reloadTimer = null;
+        for (const client of sseClients) {
+          client.write("event: reload\ndata: now\n\n");
+        }
+      }, RELOAD_DEBOUNCE_MS);
+    },
+    async close() {
+      if (reloadTimer) clearTimeout(reloadTimer);
+      clearInterval(heartbeat);
+
+      for (const client of sseClients) {
+        client.end();
+      }
+      sseClients.clear();
+
+      await new Promise((resolve, reject) => {
+        server.close((error) => {
+          if (error) {
+            reject(error);
+            return;
+          }
+
+          resolve();
+        });
+      });
+    },
+  };
+};

package/lib/postcss.mjs

@@ -0,0 +1,166 @@
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { fileExists } from "./fs-utils.mjs";
+import { rewriteCssAssetUrls } from "./assets.mjs";
+
+const POSTCSS_CONFIG_FILES = [
+  "postcss.config.mjs",
+  "postcss.config.js",
+  "postcss.config.cjs",
+  "postcss.config.json",
+];
+
+const getProjectRequire = (rootDir) =>
+  createRequire(path.join(rootDir, "package.json"));
+
+const unwrapModule = (moduleNamespace) => moduleNamespace?.default ?? moduleNamespace;
+
+const importProjectModule = async (rootDir, specifier) => {
+  try {
+    const requireFromProject = getProjectRequire(rootDir);
+    const resolvedPath = requireFromProject.resolve(specifier);
+    return await import(pathToFileURL(resolvedPath).href);
+  } catch {
+    return null;
+  }
+};
+
+const instantiatePlugin = async (rootDir, pluginEntry, pluginOptions) => {
+  if (!pluginEntry) return null;
+
+  if (typeof pluginEntry === "string") {
+    const moduleNamespace = await importProjectModule(rootDir, pluginEntry);
+    if (!moduleNamespace) {
+      throw new Error(
+        `Could not resolve PostCSS plugin "${pluginEntry}" from the theme project.`,
+      );
+    }
+
+    const pluginFactory = unwrapModule(moduleNamespace);
+    if (typeof pluginFactory === "function") {
+      return pluginOptions === undefined || pluginOptions === true
+        ? pluginFactory()
+        : pluginFactory(pluginOptions);
+    }
+
+    return pluginFactory;
+  }
+
+  if (Array.isArray(pluginEntry)) {
+    const [nestedEntry, nestedOptions] = pluginEntry;
+    return instantiatePlugin(rootDir, nestedEntry, nestedOptions);
+  }
+
+  if (typeof pluginEntry === "function") {
+    return pluginOptions === undefined
+      ? pluginEntry
+      : pluginEntry(pluginOptions);
+  }
+
+  return pluginEntry;
+};
+
+const normalizePlugins = async (rootDir, plugins) => {
+  if (!plugins) return [];
+
+  if (Array.isArray(plugins)) {
+    const resolvedPlugins = [];
+
+    for (const pluginEntry of plugins) {
+      const plugin = await instantiatePlugin(rootDir, pluginEntry);
+      if (plugin) resolvedPlugins.push(plugin);
+    }
+
+    return resolvedPlugins;
+  }
+
+  if (typeof plugins === "object") {
+    const resolvedPlugins = [];
+
+    for (const [pluginName, pluginOptions] of Object.entries(plugins)) {
+      if (!pluginOptions) continue;
+      const plugin = await instantiatePlugin(rootDir, pluginName, pluginOptions);
+      if (plugin) resolvedPlugins.push(plugin);
+    }
+
+    return resolvedPlugins;
+  }
+
+  return [];
+};
+
+const loadPostcssConfig = async (rootDir) => {
+  for (const configFile of POSTCSS_CONFIG_FILES) {
+    const configPath = path.join(rootDir, configFile);
+    if (!(await fileExists(configPath))) continue;
+
+    if (configFile.endsWith(".json")) {
+      const raw = await readFile(configPath, "utf-8");
+      return JSON.parse(raw);
+    }
+
+    const moduleNamespace = await import(pathToFileURL(configPath).href);
+    let config = unwrapModule(moduleNamespace);
+
+    if (typeof config === "function") {
+      config = await config({ env: process.env.NODE_ENV ?? "development" });
+    }
+
+    return config ?? null;
+  }
+
+  return null;
+};
+
+export const createCssPostCssPlugin = async (rootDir, { sourceDirs } = {}) => {
+  const postcssModule = await importProjectModule(rootDir, "postcss");
+  const postcss = postcssModule ? unwrapModule(postcssModule) : null;
+  const config = postcssModule ? await loadPostcssConfig(rootDir) : null;
+
+  let plugins = [];
+  if (config?.plugins) {
+    plugins = await normalizePlugins(rootDir, config.plugins);
+  } else if (postcssModule) {
+    const tailwindModule = await importProjectModule(rootDir, "@tailwindcss/postcss");
+    if (tailwindModule) {
+      const tailwindPluginFactory = unwrapModule(tailwindModule);
+      plugins = [
+        typeof tailwindPluginFactory === "function"
+          ? tailwindPluginFactory()
+          : tailwindPluginFactory,
+      ];
+    }
+  }
+
+  return {
+    name: "tiendu-postcss",
+    setup(build) {
+      build.onLoad({ filter: /\.css$/ }, async (args) => {
+        const source = await readFile(args.path, "utf-8");
+        const rewrittenSource = await rewriteCssAssetUrls(source, args.path, rootDir, sourceDirs);
+
+        if (!postcss || plugins.length === 0) {
+          return {
+            contents: rewrittenSource,
+            loader: "css",
+            resolveDir: path.dirname(args.path),
+            watchFiles: [args.path],
+          };
+        }
+
+        const result = await postcss(plugins).process(rewrittenSource, {
+          from: args.path,
+        });
+
+        return {
+          contents: result.css,
+          loader: "css",
+          resolveDir: path.dirname(args.path),
+          watchFiles: [args.path],
+        };
+      });
+    },
+  };
+};

package/lib/preview.mjs

@@ -2,7 +2,7 @@ import * as p from "@clack/prompts";
 import { loadConfigOrFail, writeConfig } from "./config.mjs";
 import { apiFetch } from "./api.mjs";
 
-const buildPreviewUrl = (apiBaseUrl, previewHostname) => {
+export const buildPreviewUrl = (apiBaseUrl, previewHostname) => {
   const base = new URL(apiBaseUrl);
   const hasExplicitPort = previewHostname.includes(":");
   return `${base.protocol}//${previewHostname}${!hasExplicitPort && base.port ? `:${base.port}` : ""}/`;
@@ -367,12 +367,22 @@ export const previewOpen = async () => {
   const url = buildPreviewUrl(config.apiBaseUrl, preview.previewHostname);
   spinner.stop(`Opening ${url}`);
 
-  const { exec } = await import("node:child_process");
-  const cmd =
-    process.platform === "darwin"
-      ? "open"
-      : process.platform === "win32"
-        ? "start"
-        : "xdg-open";
-  exec(`${cmd} ${url}`);
+  const { spawn } = await import("node:child_process");
+
+  if (process.platform === "win32") {
+    const child = spawn("cmd", ["/c", "start", "", url], {
+      detached: true,
+      stdio: "ignore",
+      windowsHide: true,
+    });
+    child.unref();
+    return;
+  }
+
+  const cmd = process.platform === "darwin" ? "open" : "xdg-open";
+  const child = spawn(cmd, [url], {
+    detached: true,
+    stdio: "ignore",
+  });
+  child.unref();
 };

package/lib/publish.mjs

@@ -1,8 +1,9 @@
 import * as p from "@clack/prompts";
-import { loadConfigOrFail, writeConfig } from "./config.mjs";
+import { loadConfigOrFail, writeConfig, isBuiltTheme } from "./config.mjs";
 import { publishPreview } from "./preview.mjs";
+import { push } from "./push.mjs";
 
-export const publish = async () => {
+export const publish = async ({ skipBuild = false } = {}) => {
   const { config, credentials } = await loadConfigOrFail();
 
   if (!config.previewKey) {
@@ -19,6 +20,15 @@ export const publish = async () => {
     process.exit(0);
   }
 
+  if (await isBuiltTheme()) {
+    p.log.info(
+      skipBuild
+        ? "Syncing existing dist/ output to the preview before publishing..."
+        : "Building and syncing the latest dist/ output before publishing...",
+    );
+    await push({ skipBuild });
+  }
+
   const spinner = p.spinner();
   spinner.start("Publishing preview...");