@dytsou/shorten-url 2.4.4 → 2.4.5

package/frontend/src/api.js

@@ -0,0 +1,272 @@
+export const DEFAULT_SETTINGS_PATH = "/settings";
+export const DEFAULT_SHORTEN_PATH = "/";
+export const WORKSPACE_TABS = [
+  { id: "shorten", label: "Shorten" },
+  { id: "settings", label: "Flagship" },
+];
+
+const FALLBACK_ORIGIN = "http://localhost";
+const LOCAL_HOSTNAMES = new Set(["localhost", "127.0.0.1", "[::1]", "::1"]);
+
+function firstNonEmpty(...values) {
+  return values.find((value) => typeof value === "string" && value.trim())?.trim() || "";
+}
+
+function readMeta(documentRef, name) {
+  const element = documentRef?.querySelector?.(`meta[name="${name}"]`);
+  return element?.getAttribute?.("content")?.trim() || "";
+}
+
+function readEnv(env, key) {
+  return typeof env?.[key] === "string" ? env[key].trim() : "";
+}
+
+function normalizeOrigin(value, fallback) {
+  if (!value) return fallback;
+
+  try {
+    const url = new URL(value);
+    if (
+      !["http:", "https:"].includes(url.protocol) ||
+      url.username ||
+      url.password ||
+      url.pathname !== "/" ||
+      url.search ||
+      url.hash
+    ) {
+      return fallback;
+    }
+    return url.origin;
+  } catch {
+    return fallback;
+  }
+}
+
+function isLocalOrigin(origin) {
+  try {
+    return LOCAL_HOSTNAMES.has(new URL(origin).hostname);
+  } catch {
+    return false;
+  }
+}
+
+function stripTrailingSlashes(pathname) {
+  let end = pathname.length;
+  while (end > 0 && pathname[end - 1] === "/") end -= 1;
+  return pathname.slice(0, end) || "/";
+}
+
+export function normalizePath(value, fallback = "/") {
+  const candidate = String(value || "").trim();
+  if (!candidate?.startsWith("/")) return fallback;
+
+  try {
+    const url = new URL(candidate, "https://shorten-url.invalid");
+    if (url.search || url.hash) return fallback;
+    return stripTrailingSlashes(url.pathname);
+  } catch {
+    return fallback;
+  }
+}
+
+export function nextWorkspaceTab(activeTab, key) {
+  if (key === "Home") return WORKSPACE_TABS[0].id;
+  if (key === "End") return WORKSPACE_TABS.at(-1).id;
+  if (!["ArrowLeft", "ArrowRight"].includes(key)) return null;
+
+  const currentIndex = WORKSPACE_TABS.findIndex(({ id }) => id === activeTab);
+  const direction = key === "ArrowRight" ? 1 : -1;
+  const nextIndex = (currentIndex + direction + WORKSPACE_TABS.length) % WORKSPACE_TABS.length;
+  return WORKSPACE_TABS[nextIndex].id;
+}
+
+export function createFrontendConfig({
+  windowRef = typeof window === "undefined" ? undefined : window,
+  documentRef = typeof document === "undefined" ? undefined : document,
+  env = import.meta.env || {},
+} = {}) {
+  const currentOrigin = windowRef?.location?.origin || FALLBACK_ORIGIN;
+  const configuredOrigin = firstNonEmpty(
+    readEnv(env, "VITE_WORKER_ORIGIN"),
+    readMeta(documentRef, "shorten-url-worker-origin")
+  );
+  const pathname = windowRef?.location?.pathname || "/";
+  const currentPath = normalizePath(pathname, "/");
+  const isDevRoute = currentPath === "/shorten";
+  const defaultHomePath = isDevRoute ? "/shorten" : "/";
+  const homePath = normalizePath(
+    firstNonEmpty(
+      readEnv(env, "VITE_WORKER_HOME_PATH"),
+      readMeta(documentRef, "shorten-url-home-path")
+    ),
+    defaultHomePath
+  );
+  const settingsPath = normalizePath(
+    firstNonEmpty(
+      readEnv(env, "VITE_WORKER_SETTINGS_PATH"),
+      readMeta(documentRef, "shorten-url-settings-path")
+    ),
+    DEFAULT_SETTINGS_PATH
+  );
+  const shortenApiPath = normalizePath(
+    firstNonEmpty(
+      readEnv(env, "VITE_WORKER_SHORTEN_PATH"),
+      readMeta(documentRef, "shorten-url-shorten-path")
+    ),
+    DEFAULT_SHORTEN_PATH
+  );
+  const workerOrigin = normalizeOrigin(configuredOrigin, currentOrigin);
+
+  return {
+    workerOrigin,
+    workerOriginConfigured: Boolean(configuredOrigin),
+    isLocalDevelopment: isLocalOrigin(currentOrigin) && !configuredOrigin,
+    homePath,
+    settingsPath,
+    shortenApiPath,
+  };
+}
+
+export function workerUrl(path, config) {
+  const workerOrigin = config?.workerOrigin || FALLBACK_ORIGIN;
+  const normalizedPath = normalizePath(path, "/");
+  return new URL(normalizedPath, `${workerOrigin}/`).href;
+}
+
+export function settingsApiUrl(endpoint, config) {
+  const suffix = String(endpoint || "").startsWith("/") ? endpoint : `/${endpoint}`;
+  return workerUrl(`${config.settingsPath}/api${suffix}`, config);
+}
+
+export class WorkerApiError extends Error {
+  constructor(message, status, body) {
+    super(message);
+    this.name = "WorkerApiError";
+    this.status = status;
+    this.body = body;
+  }
+}
+
+export function errorMessage(body, status, fallback = "The request could not be completed") {
+  let message = "";
+  if (typeof body?.message === "string") {
+    message = body.message.trim();
+  } else if (typeof body?.error === "string") {
+    message = body.error.trim();
+  }
+  if (message) return message;
+  return status ? `${fallback} (${status})` : fallback;
+}
+
+async function readResponseBody(response) {
+  if (typeof response?.text === "function") {
+    const raw = await response.text();
+    if (!raw) return {};
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return { message: raw.slice(0, 240) };
+    }
+  }
+  if (typeof response?.json === "function") return response.json();
+  return {};
+}
+
+export async function requestJson(
+  url,
+  { fetchImpl = globalThis.fetch, method = "GET", body, csrfToken } = {}
+) {
+  if (typeof fetchImpl !== "function") throw new Error("Fetch is not available");
+
+  const headers = { Accept: "application/json" };
+  if (body !== undefined) headers["Content-Type"] = "application/json";
+  if (csrfToken) headers["X-CSRF-Token"] = csrfToken;
+
+  const response = await fetchImpl(url, {
+    method,
+    headers,
+    credentials: "include",
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  const responseBody = await readResponseBody(response);
+  if (!response.ok) {
+    throw new WorkerApiError(
+      errorMessage(responseBody, response.status),
+      response.status,
+      responseBody
+    );
+  }
+  return responseBody;
+}
+
+export async function shortenUrl({ url, customSlug }, config, fetchImpl = globalThis.fetch) {
+  const payload = { url: url.trim() };
+  if (customSlug?.trim()) payload.custom_slug = customSlug.trim();
+
+  const result = await requestJson(workerUrl(config.shortenApiPath, config), {
+    fetchImpl,
+    method: "POST",
+    body: payload,
+  });
+  if (typeof result?.short_url !== "string" || !result.short_url) {
+    throw new WorkerApiError("The Worker returned an invalid short URL", 502, result);
+  }
+  return result.short_url;
+}
+
+export async function loadSettings(config, fetchImpl = globalThis.fetch) {
+  const [csrf, flags] = await Promise.all([
+    requestJson(settingsApiUrl("/csrf", config), { fetchImpl }),
+    requestJson(settingsApiUrl("/flags", config), { fetchImpl }),
+  ]);
+  if (typeof csrf?.csrfToken !== "string" || !csrf.csrfToken) {
+    throw new WorkerApiError("The settings session could not be established", 502, csrf);
+  }
+  const flag = Array.isArray(flags?.flags)
+    ? flags.flags.find((candidate) => candidate?.key === "shorten-routing") || null
+    : null;
+  return { csrfToken: csrf.csrfToken, flag };
+}
+
+export async function createShorteningFlag(
+  definition,
+  config,
+  csrfToken,
+  fetchImpl = globalThis.fetch
+) {
+  return requestJson(settingsApiUrl("/flag", config), {
+    fetchImpl,
+    method: "POST",
+    csrfToken,
+    body: definition,
+  });
+}
+
+export async function updateShorteningFlag(
+  definition,
+  expectedUpdatedAt,
+  config,
+  csrfToken,
+  fetchImpl = globalThis.fetch
+) {
+  return requestJson(settingsApiUrl("/flag/shorten-routing", config), {
+    fetchImpl,
+    method: "PUT",
+    csrfToken,
+    body: { ...definition, expectedUpdatedAt },
+  });
+}
+
+export async function publishShorteningFlag(
+  expectedUpdatedAt,
+  config,
+  csrfToken,
+  fetchImpl = globalThis.fetch
+) {
+  return requestJson(settingsApiUrl("/flag/shorten-routing/publish", config), {
+    fetchImpl,
+    method: "POST",
+    csrfToken,
+    body: { expectedUpdatedAt },
+  });
+}

package/frontend/src/local-flag-mock.js

@@ -0,0 +1,55 @@
+const STORAGE_KEY = "shorten-url:flagship-local-mock:v1";
+
+function storage() {
+  try {
+    if (!globalThis.localStorage) throw new Error("Local storage is unavailable");
+    return globalThis.localStorage;
+  } catch {
+    throw new Error("Browser storage is unavailable for the local Flagship mock.");
+  }
+}
+
+function readFlag() {
+  const serialized = storage().getItem(STORAGE_KEY);
+  if (!serialized) return null;
+
+  try {
+    const flag = JSON.parse(serialized);
+    return flag && typeof flag === "object" && !Array.isArray(flag) ? flag : null;
+  } catch {
+    throw new Error("The local Flagship mock data could not be read.");
+  }
+}
+
+function writeFlag(flag) {
+  try {
+    storage().setItem(STORAGE_KEY, JSON.stringify(flag));
+  } catch {
+    throw new Error("The local Flagship mock could not be saved.");
+  }
+  return { flag };
+}
+
+export function loadLocalFlagMock() {
+  return readFlag();
+}
+
+export function saveLocalFlagMock(definition) {
+  return writeFlag({ ...definition, status: "draft", updatedAt: new Date().toISOString() });
+}
+
+export function publishLocalFlagMock(expectedUpdatedAt) {
+  const current = readFlag();
+  if (!current) throw new Error("Save a local mock draft before publishing.");
+  if (current.updatedAt !== expectedUpdatedAt) {
+    throw new Error("The local mock changed. Reload it before publishing.");
+  }
+
+  const timestamp = new Date().toISOString();
+  return writeFlag({
+    ...current,
+    status: "published",
+    updatedAt: timestamp,
+    publishedAt: timestamp,
+  });
+}

package/frontend/src/main.jsx

@@ -0,0 +1,4 @@
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);