@upstart.gg/vite-plugins 0.1.60 → 0.1.62

package/src/tests/upstart-editor-api-page-meta.test.ts

@@ -0,0 +1,635 @@
+import { describe, test, expect, beforeEach, afterEach } from "vitest";
+import { UpstartEditorAPI } from "../upstart-editor-api";
+import fs from "fs/promises";
+import path from "path";
+import os from "os";
+
+describe("UpstartEditorAPI page meta", () => {
+  let tempDir: string;
+  let api: UpstartEditorAPI;
+
+  beforeEach(async () => {
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-meta-test-"));
+    api = new UpstartEditorAPI(tempDir, path.join(tempDir, "registry.json"));
+  });
+
+  afterEach(async () => {
+    await fs.rm(tempDir, { recursive: true, force: true });
+  });
+
+  async function writeFile(relativePath: string, content: string) {
+    const filePath = path.join(tempDir, relativePath);
+    await fs.mkdir(path.dirname(filePath), { recursive: true });
+    await fs.writeFile(filePath, content);
+    return filePath;
+  }
+
+  const writeRoute = (routeId: string, content: string) => writeFile(`app/${routeId}.tsx`, content);
+  const readRoute = (routeId: string) => fs.readFile(path.join(tempDir, "app", `${routeId}.tsx`), "utf-8");
+
+  const writeLocale = (language: string, data: Record<string, unknown>) =>
+    writeFile(`app/locales/${language}/translation.json`, `${JSON.stringify(data, null, 2)}\n`);
+
+  const readLocale = async (language: string) =>
+    JSON.parse(
+      await fs.readFile(path.join(tempDir, "app", "locales", language, "translation.json"), "utf-8"),
+    );
+
+  /** The shape the AI assistant generates: loader reads i18n, component renders the tags. */
+  const i18nRoute = (titleKey: string, descriptionKey: string, titleExpr = "{title}") => `
+import { getInstance } from "~/middlewares/i18next.server";
+import type { Route } from "./+types/_layout.about";
+
+export async function loader({ context }: Route.LoaderArgs) {
+  const i18n = getInstance(context);
+  return {
+    title: i18n.t("${titleKey}"),
+    description: i18n.t("${descriptionKey}"),
+  };
+}
+
+export default function AboutPage({ loaderData }: Route.ComponentProps) {
+  const { title, description } = loaderData;
+  return (
+    <>
+      <title>${titleExpr}</title>
+      <meta name="description" content={description} />
+      <h1>Hello</h1>
+    </>
+  );
+}
+`;
+
+  describe("getPageMeta — translated routes", () => {
+    test("reads the values from the locale files", async () => {
+      await writeRoute("routes/_layout.about", i18nRoute("about.meta.title", "about.meta.description"));
+      await writeLocale("en", {
+        "about.meta.title": "About us",
+        "about.meta.description": "Who we are",
+      });
+      await writeLocale("fr", {
+        "about.meta.title": "À propos",
+        "about.meta.description": "Qui sommes-nous",
+      });
+      await writeFile("app/config/site.json", JSON.stringify({ defaultLanguage: "en" }));
+
+      const result = await api.getPageMeta({ action: "getPageMeta", routeId: "routes/_layout.about" });
+
+      expect(result).toMatchObject({
+        success: true,
+        mode: "jsx",
+        language: "en",
+        languages: ["en", "fr"],
+        title: {
+          value: "About us",
+          editable: true,
+          translated: true,
+          i18nKey: "about.meta.title",
+          shared: false,
+        },
+        description: { value: "Who we are", editable: true, translated: true },
+        robotsIndexing: true,
+        robotsEditable: true,
+      });
+    });
+
+    test("reads another language on request", async () => {
+      await writeRoute("routes/_layout.about", i18nRoute("about.meta.title", "about.meta.description"));
+      await writeLocale("en", { "about.meta.title": "About us" });
+      await writeLocale("fr", { "about.meta.title": "À propos" });
+
+      const result = await api.getPageMeta({
+        action: "getPageMeta",
+        routeId: "routes/_layout.about",
+        language: "fr",
+      });
+
+      expect(result).toMatchObject({ success: true, language: "fr", title: { value: "À propos" } });
+    });
+
+    test("flags a key that is also used elsewhere as shared", async () => {
+      await writeRoute("routes/_layout.atelier", i18nRoute("atelier.title", "atelier.subtitle"));
+      await writeFile(
+        "app/components/Hero.tsx",
+        `export const Hero = () => <h1><Trans i18nKey="atelier.title" /></h1>;\n`,
+      );
+      await writeLocale("en", { "atelier.title": "Workshop", "atelier.subtitle": "Our workshop" });
+
+      const result = await api.getPageMeta({ action: "getPageMeta", routeId: "routes/_layout.atelier" });
+
+      expect(result).toMatchObject({
+        success: true,
+        title: { shared: true },
+        description: { shared: false },
+      });
+    });
+
+    test("keeps the static text around a composed title", async () => {
+      await writeRoute(
+        "routes/_layout.atelier",
+        i18nRoute("atelier.meta.title", "atelier.meta.description", "{`${title} | Acme`}"),
+      );
+      await writeLocale("en", { "atelier.meta.title": "Workshop" });
+
+      const result = await api.getPageMeta({ action: "getPageMeta", routeId: "routes/_layout.atelier" });
+
+      expect(result).toMatchObject({
+        success: true,
+        title: { value: "Workshop", editable: true, prefix: "", suffix: " | Acme" },
+      });
+    });
+
+    test("edits the first translated part of a title composed of several texts", async () => {
+      await writeRoute(
+        "routes/_layout._index",
+        `
+import { getInstance } from "~/middlewares/i18next.server";
+
+export async function loader({ context }) {
+  const i18n = getInstance(context);
+  return { title: i18n.t("site.title"), tagline: i18n.t("site.tagline") };
+}
+
+export default function HomePage({ loaderData }) {
+  const { title, tagline } = loaderData;
+  return (
+    <>
+      <title>{\`\${title} - \${tagline}\`}</title>
+    </>
+  );
+}
+`,
+      );
+      await writeLocale("en", { "site.title": "Acme", "site.tagline": "We build things" });
+
+      const result = await api.getPageMeta({ action: "getPageMeta", routeId: "routes/_layout._index" });
+
+      // The first addressable part is the value; the other translation is shown as context.
+      expect(result).toMatchObject({
+        success: true,
+        title: { value: "Acme", editable: true, i18nKey: "site.title", suffix: " - We build things" },
+      });
+    });
+
+    test("edits a title composed inside the loader", async () => {
+      await writeRoute(
+        "routes/_layout.cloud",
+        `
+import { getInstance } from "~/middlewares/i18next.server";
+
+export async function loader({ context }) {
+  const i18n = getInstance(context);
+  return { pageTitle: \`\${i18n.t("cloud.title")} — \${i18n.t("site.title")}\` };
+}
+
+export default function CloudPage({ loaderData }) {
+  const { pageTitle } = loaderData;
+  return (<><title>{pageTitle}</title></>);
+}
+`,
+      );
+      await writeLocale("en", { "cloud.title": "Your cloud", "site.title": "Acme" });
+
+      const result = await api.getPageMeta({ action: "getPageMeta", routeId: "routes/_layout.cloud" });
+
+      expect(result).toMatchObject({
+        success: true,
+        title: { value: "Your cloud", editable: true, i18nKey: "cloud.title", suffix: " — Acme" },
+      });
+    });
+
+    test("marks a database-driven title as read-only", async () => {
+      await writeRoute(
+        "routes/_layout.projects.$slug",
+        `
+export async function loader() {
+  const project = await getProject();
+  return { title: \`\${project.title} — Studio\`, description: project.summary };
+}
+export default function Project({ loaderData }) {
+  const { title, description } = loaderData;
+  return (<><title>{title}</title><meta name="description" content={description} /></>);
+}
+`,
+      );
+
+      const result = await api.getPageMeta({
+        action: "getPageMeta",
+        routeId: "routes/_layout.projects.$slug",
+      });
+
+      expect(result).toMatchObject({
+        success: true,
+        title: { editable: false },
+        description: { editable: false },
+      });
+      expect(result).toHaveProperty("title.reason");
+    });
+  });
+
+  describe("routes delegating to a shared SEO component", () => {
+    /** Some sites render their meta through a component instead of inline tags. */
+    const seoComponent = `
+export default function SeoHead({ title, description, image = "/og.png" }: Props) {
+  const fullTitle = \`\${title} | Acme\`;
+  return (
+    <>
+      <title>{fullTitle}</title>
+      <meta name="description" content={description} />
+      <meta property="og:image" content={image} />
+    </>
+  );
+}
+`;
+
+    const delegatingRoute = (descriptionExpr: string) => `
+import SeoHead from "~/components/SeoHead";
+import { getInstance } from "~/middlewares/i18next.server";
+
+export async function loader({ context }) {
+  const i18n = getInstance(context);
+  return { title: i18n.t("about.meta.title"), description: i18n.t("about.meta.description") };
+}
+
+export default function AboutPage({ loaderData }) {
+  const { title, description } = loaderData;
+  return (
+    <>
+      <SeoHead title={title} description={${descriptionExpr}} />
+      <h1>About</h1>
+    </>
+  );
+}
+`;
+
+    beforeEach(async () => {
+      await writeFile("app/components/SeoHead.tsx", seoComponent);
+      await writeLocale("en", {
+        "about.meta.title": "About us",
+        "about.meta.description": "Who we are",
+      });
+    });
+
+    test("resolves the values through the component's props", async () => {
+      await writeRoute("routes/_layout.about", delegatingRoute("description"));
+
+      const result = await api.getPageMeta({ action: "getPageMeta", routeId: "routes/_layout.about" });
+
+      expect(result).toMatchObject({
+        success: true,
+        mode: "jsx",
+        // The suffix is built inside the component, around the prop.
+        title: { value: "About us", editable: true, i18nKey: "about.meta.title", suffix: " | Acme" },
+        description: { value: "Who we are", editable: true, i18nKey: "about.meta.description" },
+      });
+    });
+
+    test("writes a translated value to the locale, leaving both source files alone", async () => {
+      await writeRoute("routes/_layout.about", delegatingRoute("description"));
+      const routeBefore = await readRoute("routes/_layout.about");
+
+      const result = await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.about",
+        language: "en",
+        title: "About our studio",
+        description: "Who we are",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      expect(result.success).toBe(true);
+      expect(await readLocale("en")).toMatchObject({ "about.meta.title": "About our studio" });
+      expect(await readRoute("routes/_layout.about")).toBe(routeBefore);
+      expect(await fs.readFile(path.join(tempDir, "app", "components", "SeoHead.tsx"), "utf-8")).toBe(
+        seoComponent,
+      );
+    });
+
+    test("edits a value the route passes as a plain string", async () => {
+      await writeRoute("routes/_layout.about", delegatingRoute('"Static description"'));
+
+      const before = await api.getPageMeta({ action: "getPageMeta", routeId: "routes/_layout.about" });
+      expect(before).toMatchObject({ description: { value: "Static description", translated: false } });
+
+      await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.about",
+        language: "en",
+        title: "About us",
+        description: "A new description",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      // The literal belongs to the route, not to the shared component.
+      expect(await readRoute("routes/_layout.about")).toContain('description={"A new description"}');
+      expect(await fs.readFile(path.join(tempDir, "app", "components", "SeoHead.tsx"), "utf-8")).toBe(
+        seoComponent,
+      );
+    });
+
+    test("adds page-specific tags next to the component rather than inside it", async () => {
+      await writeRoute("routes/_layout.about", delegatingRoute("description"));
+
+      await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.about",
+        language: "en",
+        title: "About us",
+        description: "Who we are",
+        keywords: "about, team",
+        robotsIndexing: false,
+      });
+
+      const code = await readRoute("routes/_layout.about");
+      expect(code).toContain('<meta name="keywords" content="about, team" />');
+      expect(code).toContain('<meta name="robots" content="noindex, nofollow" />');
+      expect(code.indexOf("<SeoHead")).toBeLessThan(code.indexOf('name="keywords"'));
+    });
+  });
+
+  describe("setPageMeta — translated routes", () => {
+    test("writes the value to the locale of the selected language only", async () => {
+      await writeRoute("routes/_layout.about", i18nRoute("about.meta.title", "about.meta.description"));
+      await writeLocale("en", { "about.meta.title": "About us", "about.meta.description": "Who we are" });
+      await writeLocale("fr", {
+        "about.meta.title": "À propos",
+        "about.meta.description": "Qui sommes-nous",
+      });
+
+      const result = await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.about",
+        language: "fr",
+        title: "À propos de nous",
+        description: "Qui sommes-nous",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      expect(result.success).toBe(true);
+      expect(await readLocale("fr")).toMatchObject({ "about.meta.title": "À propos de nous" });
+      expect(await readLocale("en")).toMatchObject({ "about.meta.title": "About us" });
+      // Only the locale changed — the route source was left alone.
+      expect(result.success && result.filePaths).toHaveLength(1);
+    });
+
+    test("moves a shared key onto a dedicated one instead of rewriting the shared text", async () => {
+      await writeRoute("routes/_layout.atelier", i18nRoute("atelier.title", "atelier.subtitle"));
+      await writeFile(
+        "app/components/Hero.tsx",
+        `export const Hero = () => <h1><Trans i18nKey="atelier.title" /></h1>;\n`,
+      );
+      await writeLocale("en", { "atelier.title": "Workshop", "atelier.subtitle": "Our workshop" });
+      await writeLocale("fr", { "atelier.title": "Atelier", "atelier.subtitle": "Notre atelier" });
+
+      const result = await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.atelier",
+        language: "en",
+        title: "Workshop — Acme",
+        description: "Our workshop",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      expect(result.success).toBe(true);
+      const code = await readRoute("routes/_layout.atelier");
+      // The loader now points at the page's own key…
+      expect(code).toContain(`i18n.t("atelier.meta.title")`);
+      expect(code).not.toContain(`i18n.t("atelier.title")`);
+      // …the heading keeps the original text in every language…
+      expect(await readLocale("en")).toMatchObject({
+        "atelier.title": "Workshop",
+        "atelier.meta.title": "Workshop — Acme",
+      });
+      // …and the untouched languages get the previous value copied over, not an empty string.
+      expect(await readLocale("fr")).toMatchObject({
+        "atelier.title": "Atelier",
+        "atelier.meta.title": "Atelier",
+      });
+    });
+
+    test("does not split a shared key when the value did not change", async () => {
+      await writeRoute("routes/_layout.atelier", i18nRoute("atelier.title", "atelier.subtitle"));
+      await writeFile("app/components/Hero.tsx", `<Trans i18nKey="atelier.title" />\n`);
+      await writeLocale("en", { "atelier.title": "Workshop", "atelier.subtitle": "Our workshop" });
+      const before = await readRoute("routes/_layout.atelier");
+
+      await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.atelier",
+        language: "en",
+        title: "Workshop",
+        description: "Our workshop",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      expect(await readRoute("routes/_layout.atelier")).toBe(before);
+      expect(await readLocale("en")).toEqual({
+        "atelier.title": "Workshop",
+        "atelier.subtitle": "Our workshop",
+      });
+    });
+
+    test("leaves languages that never translated the shared key untouched", async () => {
+      await writeRoute("routes/_layout.atelier", i18nRoute("atelier.title", "atelier.subtitle"));
+      await writeFile("app/components/Hero.tsx", `<Trans i18nKey="atelier.title" />\n`);
+      await writeLocale("fr", { "atelier.title": "Atelier", "atelier.subtitle": "Notre atelier" });
+      await writeLocale("en", { "dummy.example": "placeholder" });
+
+      await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.atelier",
+        language: "fr",
+        title: "Atelier & réparation",
+        description: "Notre atelier",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      expect(await readLocale("fr")).toMatchObject({ "atelier.meta.title": "Atelier & réparation" });
+      // No empty key created where the shared one did not exist either.
+      expect(await readLocale("en")).toEqual({ "dummy.example": "placeholder" });
+    });
+
+    test("adds and removes the keywords and robots tags", async () => {
+      await writeRoute("routes/_layout.about", i18nRoute("about.meta.title", "about.meta.description"));
+      await writeLocale("en", { "about.meta.title": "About us", "about.meta.description": "Who we are" });
+
+      await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.about",
+        language: "en",
+        title: "About us",
+        description: "Who we are",
+        keywords: "about, team",
+        robotsIndexing: false,
+      });
+
+      let code = await readRoute("routes/_layout.about");
+      expect(code).toContain(`<meta name="keywords" content="about, team" />`);
+      expect(code).toContain(`<meta name="robots" content="noindex, nofollow" />`);
+
+      await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.about",
+        language: "en",
+        title: "About us",
+        description: "Who we are",
+        keywords: "about, team",
+        robotsIndexing: true,
+      });
+
+      code = await readRoute("routes/_layout.about");
+      expect(code).toContain(`name="keywords"`);
+      expect(code).not.toContain(`name="robots"`);
+    });
+
+    test("rewrites a plain string title in the source", async () => {
+      await writeRoute(
+        "routes/_layout.legal",
+        `export default function Legal() {\n  return (<><title>Legal</title></>);\n}\n`,
+      );
+
+      await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_layout.legal",
+        language: "en",
+        title: "Legal notice",
+        description: "",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      expect(await readRoute("routes/_layout.legal")).toContain("<title>Legal notice</title>");
+    });
+  });
+
+  describe("meta export fallback", () => {
+    test("reads a static meta export when the route renders no meta tags", async () => {
+      await writeRoute(
+        "routes/about",
+        `export const meta = () => [
+  { title: "About us" },
+  { name: "description", content: "Who we are" },
+  { name: "robots", content: "noindex, nofollow" },
+];
+`,
+      );
+
+      const result = await api.getPageMeta({ action: "getPageMeta", routeId: "routes/about" });
+
+      expect(result).toMatchObject({
+        success: true,
+        mode: "meta-export",
+        title: { value: "About us", editable: true, translated: false },
+        description: { value: "Who we are" },
+        robotsIndexing: false,
+      });
+    });
+
+    test("creates a meta export after the imports when the route has none", async () => {
+      await writeRoute(
+        "routes/_index",
+        `import { Welcome } from "~/components/Welcome";
+
+export default function Index() {
+  return <Welcome />;
+}
+`,
+      );
+
+      const result = await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/_index",
+        language: "en",
+        title: "Home",
+        description: "The home page",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      expect(result.success).toBe(true);
+      const code = await readRoute("routes/_index");
+      expect(code).toContain(`export const meta = () => [\n  { title: "Home" },`);
+      expect(code).toContain(`{ name: "description", content: "The home page" },`);
+      expect(code).not.toContain("keywords");
+      expect(code.indexOf("export const meta")).toBeGreaterThan(code.indexOf("import"));
+    });
+
+    test("preserves unmanaged entries and drops cleared ones", async () => {
+      await writeRoute(
+        "routes/about",
+        `export const meta = () => [
+  { title: "Old title" },
+  { property: "og:image", content: "/og.png" },
+  { name: "keywords", content: "old" },
+];
+`,
+      );
+
+      await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/about",
+        language: "en",
+        title: "New title",
+        description: "",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      const code = await readRoute("routes/about");
+      expect(code).toContain(`{ title: "New title" },`);
+      expect(code).toContain(`{ property: "og:image", content: "/og.png" },`);
+      expect(code).not.toContain("keywords");
+    });
+
+    test("refuses to rewrite a computed meta export", async () => {
+      const original = `export const meta = ({ data }) => [{ title: data.title }];\n`;
+      await writeRoute("routes/post.$slug", original);
+
+      const result = await api.setPageMeta({
+        action: "setPageMeta",
+        routeId: "routes/post.$slug",
+        language: "en",
+        title: "Nope",
+        description: "",
+        keywords: "",
+        robotsIndexing: true,
+      });
+
+      expect(result.success).toBe(false);
+      expect(await readRoute("routes/post.$slug")).toBe(original);
+    });
+  });
+
+  test("accepts the punctuation flat-route ids use", async () => {
+    await writeRoute(
+      "routes/_layout.($lang)._index",
+      `export default function P() {\n  return <title>Home</title>;\n}\n`,
+    );
+
+    const result = await api.getPageMeta({
+      action: "getPageMeta",
+      routeId: "routes/_layout.($lang)._index",
+    });
+
+    expect(result).toMatchObject({ success: true, title: { value: "Home" } });
+  });
+
+  test("rejects route ids that escape the app directory", async () => {
+    const result = await api.setPageMeta({
+      action: "setPageMeta",
+      routeId: "../../etc/passwd",
+      language: "en",
+      title: "x",
+      description: "",
+      keywords: "",
+      robotsIndexing: true,
+    });
+    expect(result.success).toBe(false);
+  });
+});