npm - @upstart.gg/vite-plugins - Versions diffs - 0.1.61 → 0.1.62 - Mend

@upstart.gg/vite-plugins 0.1.61 → 0.1.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/page-meta.js +533 -0
package/dist/page-meta.js.map +1 -0
package/dist/site-meta.d.ts +28 -0
package/dist/site-meta.d.ts.map +1 -0
package/dist/site-meta.js +207 -0
package/dist/site-meta.js.map +1 -0
package/dist/upstart-editor-api.d.ts +135 -1
package/dist/upstart-editor-api.d.ts.map +1 -1
package/dist/upstart-editor-api.js +756 -1
package/dist/upstart-editor-api.js.map +1 -1
package/dist/vite-plugin-upstart-editor/runtime/index.d.ts.map +1 -1
package/dist/vite-plugin-upstart-editor/runtime/index.js +35 -0
package/dist/vite-plugin-upstart-editor/runtime/index.js.map +1 -1
package/dist/vite-plugin-upstart-editor/runtime/types.d.ts +3 -0
package/dist/vite-plugin-upstart-editor/runtime/types.d.ts.map +1 -1
package/package.json +8 -3
package/src/page-meta.ts +678 -0
package/src/site-meta.ts +226 -0
package/src/tests/site-meta.test.ts +158 -0
package/src/tests/upstart-editor-api-page-meta.test.ts +635 -0
package/src/upstart-editor-api.ts +941 -0
package/src/vite-plugin-upstart-editor/runtime/index.ts +38 -0
package/src/vite-plugin-upstart-editor/runtime/types.ts +2 -0

package/src/site-meta.ts ADDED Viewed

@@ -0,0 +1,226 @@
+import MagicString from "magic-string";
+import { parseSync } from "oxc-parser";
+/**
+ * Brings an existing site's `app/root.tsx` up to the version that renders the site-wide
+ * settings edited from the editor: the favicon and the social preview image.
+ *
+ * Sites created from the template already contain this code; sites created before it need a
+ * one-off upgrade. `root.tsx` is template-owned (the assistant never edits it), so the shapes
+ * matched here are stable — but every step still asserts what it found and the result is
+ * re-parsed, so a customized file is reported instead of being mangled.
+ */
+interface AstNode {
+  type: string;
+  start: number;
+  end: number;
+  [key: string]: unknown;
+}
+export type EnsureRootResult = { ok: true; code: string; changed: boolean } | { ok: false; reason: string };
+/**
+ * Icon files left untouched: an ICO is already small and an SVG scales on its own. Every
+ * other image is downscaled to a square PNG, because a favicon is drawn at about 16px and
+ * WebP is not accepted as an icon everywhere.
+ */
+export const FAVICON_PASS_THROUGH_TYPES = ["image/svg+xml", "image/x-icon", "image/vnd.microsoft.icon"];
+/** Extensions matching {@link FAVICON_PASS_THROUGH_TYPES}, for callers working from a filename. */
+export const FAVICON_PASS_THROUGH_EXTENSIONS = [".svg", ".ico"];
+/** Square size a favicon is downscaled to. */
+export const FAVICON_SIZE = 64;
+/**
+ * Name of the downscaled copy of a favicon source. Sources are often already called
+ * "favicon", so the suffix is only added when it would say something new.
+ */
+export function faviconFileName(sourceName: string): string {
+  const stem = sourceName.replace(/\.[^.]+$/, "");
+  return /favicon$/i.test(stem) ? `${stem}.png` : `${stem}-favicon.png`;
+}
+/** Marker proving the file already renders the site settings. */
+const MARKER = "siteAttributes.socialImage";
+const SITE_ATTRIBUTES_DECL =
+  "/** Site-wide settings edited from the editor's settings panel (favicon, social preview). */\n" +
+  "const siteAttributes = siteConfig as unknown as SiteAttributes;\n\n";
+const SOCIAL_META = `{/* Preview card shown when a page is shared on social networks or messaging apps.
+          React hoists these into <head>. Pages provide the title and description
+          themselves; crawlers fall back to <title> and <meta name="description">. */}
+      {siteAttributes.socialImage && (
+        <>
+          <meta property="og:image" content={\`\${origin}\${siteAttributes.socialImage}\`} />
+          <meta property="og:type" content="website" />
+          <meta name="twitter:card" content="summary_large_image" />
+        </>
+      )}`;
+function walk(node: unknown, visit: (n: AstNode) => void): void {
+  if (!node || typeof node !== "object") return;
+  if (Array.isArray(node)) {
+    for (const child of node) walk(child, visit);
+    return;
+  }
+  const n = node as AstNode;
+  if (typeof n.type === "string") visit(n);
+  for (const key in n) {
+    if (key === "type" || key === "start" || key === "end") continue;
+    const value = n[key];
+    if (value && typeof value === "object") walk(value, visit);
+  }
+}
+const propertyName = (prop: AstNode): string | null => {
+  const key = prop.key as AstNode | undefined;
+  if (key?.type === "Identifier") return key.name as string;
+  if (key?.type === "Literal" && typeof key.value === "string") return key.value;
+  return null;
+};
+/** Top-level `export …` declaration named `name`, whatever form it takes. */
+function findExport(program: AstNode, name: string): AstNode | null {
+  for (const statement of (program.body as AstNode[]) ?? []) {
+    const isDefault = statement.type === "ExportDefaultDeclaration";
+    if (statement.type !== "ExportNamedDeclaration" && !isDefault) continue;
+    const declaration = statement.declaration as AstNode | null;
+    if (!declaration) continue;
+    if (isDefault && name === "default") return declaration;
+    if (declaration.type === "FunctionDeclaration") {
+      const id = declaration.id as AstNode | null;
+      if (id?.type === "Identifier" && id.name === name) return declaration;
+    } else if (declaration.type === "VariableDeclaration") {
+      for (const decl of (declaration.declarations as AstNode[]) ?? []) {
+        const id = decl.id as AstNode;
+        if (id?.type === "Identifier" && id.name === name) return (decl.init as AstNode) ?? null;
+      }
+    }
+  }
+  return null;
+}
+/** Add a property to a destructuring pattern, unless it is already there. */
+function addToObjectPattern(s: MagicString, code: string, pattern: AstNode, name: string): boolean {
+  const properties = (pattern.properties as AstNode[]) ?? [];
+  if (properties.some((prop) => prop.type === "Property" && propertyName(prop) === name)) return false;
+  const last = properties[properties.length - 1];
+  if (!last) return false;
+  // Keep the source's layout: one property per line stays one property per line.
+  const multiline = code.slice(last.end, pattern.end).includes("\n");
+  const indent = multiline
+    ? (code.slice(code.lastIndexOf("\n", last.start) + 1, last.start).match(/^[ \t]*/)?.[0] ?? "")
+    : "";
+  s.appendLeft(last.end, multiline ? `,\n${indent}${name}` : `, ${name}`);
+  return true;
+}
+export function ensureRootSiteMeta(code: string, filePath: string): EnsureRootResult {
+  if (code.includes(MARKER)) return { ok: true, code, changed: false };
+  if (!code.includes("./config/site.json") || !code.includes("SiteAttributes")) {
+    return { ok: false, reason: "root.tsx does not read the site configuration" };
+  }
+  const program = parseSync(filePath, code, { sourceType: "module" }).program as unknown as AstNode;
+  const s = new MagicString(code);
+  // 1. Module-level view of site.json, shared by links() and the social preview.
+  const linksExport = findExport(program, "links");
+  if (!linksExport) return { ok: false, reason: "root.tsx has no links() export" };
+  const linksStatement = ((program.body as AstNode[]) ?? []).find(
+    (statement) => statement.start <= linksExport.start && statement.end >= linksExport.end,
+  );
+  s.appendLeft(linksStatement?.start ?? linksExport.start, SITE_ATTRIBUTES_DECL);
+  // 2. Favicon: drive the existing `rel: "icon"` entry from the config.
+  let faviconPatched = false;
+  walk(linksExport, (node) => {
+    if (faviconPatched || node.type !== "ObjectExpression") return;
+    const properties = (node.properties as AstNode[]) ?? [];
+    const rel = properties.find((prop) => propertyName(prop) === "rel");
+    const relValue = rel?.value as AstNode | undefined;
+    if (relValue?.type !== "Literal" || relValue.value !== "icon") return;
+    const href = properties.find((prop) => propertyName(prop) === "href");
+    const hrefValue = href?.value as AstNode | undefined;
+    if (hrefValue?.type !== "Literal" || typeof hrefValue.value !== "string") return;
+    s.overwrite(hrefValue.start, hrefValue.end, `siteAttributes.favicon ?? "${hrefValue.value}"`);
+    faviconPatched = true;
+  });
+  if (!faviconPatched) return { ok: false, reason: "root.tsx has no favicon link to update" };
+  // 3. The loader must expose the request origin: social crawlers need absolute image URLs.
+  const loader = findExport(program, "loader");
+  if (!loader) return { ok: false, reason: "root.tsx has no loader" };
+  const loaderParam = ((loader.params as AstNode[]) ?? [])[0];
+  if (loaderParam?.type !== "ObjectPattern") {
+    return { ok: false, reason: "root.tsx's loader does not destructure its arguments" };
+  }
+  addToObjectPattern(s, code, loaderParam, "request");
+  let originAdded = false;
+  walk(loader, (node) => {
+    if (originAdded || node.type !== "ReturnStatement") return;
+    let returned = node.argument as AstNode | null;
+    // The template returns `data({ … }, { headers })`; a plain object works too.
+    if (returned?.type === "CallExpression") {
+      returned = ((returned.arguments as AstNode[]) ?? [])[0] ?? null;
+    }
+    if (returned?.type !== "ObjectExpression") return;
+    const properties = (returned.properties as AstNode[]) ?? [];
+    const last = properties[properties.length - 1];
+    if (!last) return;
+    s.appendLeft(
+      last.end,
+      ",\n      // Social crawlers need absolute image URLs, and only the request knows the host.\n" +
+        "      origin: new URL(request.url).origin",
+    );
+    originAdded = true;
+  });
+  if (!originAdded) return { ok: false, reason: "root.tsx's loader does not return an object" };
+  // 4. Render the preview tags from the default export, which receives the loader data.
+  const app = findExport(program, "default");
+  if (!app || (app.type !== "FunctionDeclaration" && app.type !== "ArrowFunctionExpression")) {
+    return { ok: false, reason: "root.tsx has no default component" };
+  }
+  const appParam = ((app.params as AstNode[]) ?? [])[0];
+  if (appParam?.type !== "ObjectPattern") {
+    return { ok: false, reason: "root.tsx's component does not destructure its props" };
+  }
+  const loaderDataProp = ((appParam.properties as AstNode[]) ?? []).find(
+    (prop) => propertyName(prop) === "loaderData",
+  );
+  const loaderDataPattern = loaderDataProp?.value as AstNode | undefined;
+  if (loaderDataPattern?.type === "ObjectPattern") {
+    addToObjectPattern(s, code, loaderDataPattern, "origin");
+  } else if (loaderDataProp) {
+    return { ok: false, reason: "root.tsx's component does not destructure its loader data" };
+  } else {
+    addToObjectPattern(s, code, appParam, "loaderData");
+    return { ok: false, reason: "root.tsx's component does not receive loader data" };
+  }
+  let wrapped = false;
+  walk(app.body as AstNode, (node) => {
+    if (wrapped || node.type !== "ReturnStatement") return;
+    const returned = node.argument as AstNode | null;
+    if (!returned) return;
+    // `return (` keeps the expression on the return's own line, so no semicolon is inserted.
+    s.appendLeft(returned.start, `(\n    <>\n      ${SOCIAL_META}\n      `);
+    s.appendRight(returned.end, "\n    </>\n  )");
+    wrapped = true;
+  });
+  if (!wrapped) return { ok: false, reason: "root.tsx's component returns nothing" };
+  const next = s.toString();
+  try {
+    const check = parseSync(filePath, next, { sourceType: "module" });
+    if (check.errors.length > 0) {
+      return { ok: false, reason: "the upgraded root.tsx would not parse" };
+    }
+  } catch {
+    return { ok: false, reason: "the upgraded root.tsx would not parse" };
+  }
+  return { ok: true, code: next, changed: true };
+}

package/src/tests/site-meta.test.ts ADDED Viewed

@@ -0,0 +1,158 @@
+import { describe, test, expect, beforeEach, afterEach } from "vitest";
+import { ensureRootSiteMeta } from "../site-meta";
+import { UpstartEditorAPI } from "../upstart-editor-api";
+import fs from "fs/promises";
+import path from "path";
+import os from "os";
+/** The template's root.tsx, trimmed to the parts the upgrade touches. */
+const ROOT = `import { Links, Meta, Outlet, Scripts, data } from "react-router";
+import type { Route } from "./+types/root";
+import siteConfig from "./config/site.json" with { type: "json" };
+import type { SiteAttributes } from "@upstart.gg/sdk";
+export const links = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  // favicon
+  { rel: "icon", href: "/favicon.ico" },
+];
+export async function loader({
+  context,
+}: LoaderFunctionArgs<RouterContextProvider>) {
+  const env = toPublicEnv(context.get(envContext));
+  const locale = getLocale(context);
+  return data(
+    {
+      env,
+      locale,
+    },
+    { headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
+  );
+}
+export default function App({ loaderData: { locale } }: Route.ComponentProps) {
+  return <Outlet />;
+}
+`;
+describe("ensureRootSiteMeta", () => {
+  test("wires site.json into the favicon, the loader and the component", () => {
+    const result = ensureRootSiteMeta(ROOT, "app/root.tsx");
+    expect(result).toMatchObject({ ok: true, changed: true });
+    if (!result.ok) return;
+    expect(result.code).toContain("const siteAttributes = siteConfig as unknown as SiteAttributes;");
+    expect(result.code).toContain('{ rel: "icon", href: siteAttributes.favicon ?? "/favicon.ico" }');
+    expect(result.code).toContain("origin: new URL(request.url).origin");
+    expect(result.code).toContain("loaderData: { locale, origin }");
+    expect(result.code).toContain('<meta property="og:image"');
+    expect(result.code).toContain('<meta name="twitter:card" content="summary_large_image" />');
+    // The request must reach the loader for the origin to exist.
+    expect(result.code).toMatch(/loader\(\{\n\s*context,\n\s*request,\n\s*\}/);
+  });
+  test("is idempotent", () => {
+    const once = ensureRootSiteMeta(ROOT, "app/root.tsx");
+    expect(once.ok).toBe(true);
+    if (!once.ok) return;
+    const twice = ensureRootSiteMeta(once.code, "app/root.tsx");
+    expect(twice).toMatchObject({ ok: true, changed: false });
+    if (twice.ok) expect(twice.code).toBe(once.code);
+  });
+  test("refuses a root that does not read the site configuration", () => {
+    const result = ensureRootSiteMeta(
+      `export default function App() {\n  return <div />;\n}\n`,
+      "app/root.tsx",
+    );
+    expect(result).toMatchObject({ ok: false });
+  });
+  test("refuses a root whose links() has no favicon entry", () => {
+    const result = ensureRootSiteMeta(
+      ROOT.replace('  { rel: "icon", href: "/favicon.ico" },\n', ""),
+      "app/root.tsx",
+    );
+    expect(result).toMatchObject({ ok: false, reason: expect.stringContaining("favicon") });
+  });
+});
+describe("UpstartEditorAPI site meta", () => {
+  let tempDir: string;
+  let api: UpstartEditorAPI;
+  beforeEach(async () => {
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-site-test-"));
+    api = new UpstartEditorAPI(tempDir, path.join(tempDir, "registry.json"));
+    await fs.mkdir(path.join(tempDir, "app", "config"), { recursive: true });
+    await fs.writeFile(path.join(tempDir, "app", "root.tsx"), ROOT);
+    await fs.writeFile(
+      path.join(tempDir, "app", "config", "site.json"),
+      `${JSON.stringify({ label: "My site", defaultLanguage: "en" }, null, 2)}\n`,
+    );
+  });
+  afterEach(async () => {
+    await fs.rm(tempDir, { recursive: true, force: true });
+  });
+  const readConfig = async () =>
+    JSON.parse(await fs.readFile(path.join(tempDir, "app", "config", "site.json"), "utf-8"));
+  test("reports the current settings and that the site can be upgraded", async () => {
+    const result = await api.getSiteMeta({ action: "getSiteMeta" });
+    expect(result).toMatchObject({ success: true, favicon: null, socialImage: null, editable: true });
+  });
+  test("saves the paths and upgrades root.tsx once", async () => {
+    const first = await api.setSiteMeta({
+      action: "setSiteMeta",
+      socialImage: "/images/preview.webp",
+    });
+    expect(first.success).toBe(true);
+    if (!first.success) return;
+    // root.tsx + site.json
+    expect(first.filePaths).toHaveLength(2);
+    expect(await readConfig()).toMatchObject({ socialImage: "/images/preview.webp", label: "My site" });
+    const second = await api.setSiteMeta({ action: "setSiteMeta", favicon: "/images/icon.png" });
+    expect(second.success).toBe(true);
+    // root.tsx is already up to date, so only site.json changes this time.
+    if (second.success) expect(second.filePaths).toHaveLength(1);
+    expect(await readConfig()).toMatchObject({
+      socialImage: "/images/preview.webp",
+      favicon: "/images/icon.png",
+    });
+  });
+  test("clears a setting when passed null and leaves the other one alone", async () => {
+    await api.setSiteMeta({
+      action: "setSiteMeta",
+      favicon: "/images/icon.png",
+      socialImage: "/images/p.webp",
+    });
+    await api.setSiteMeta({ action: "setSiteMeta", favicon: null });
+    const config = await readConfig();
+    expect(config.favicon).toBeUndefined();
+    expect(config.socialImage).toBe("/images/p.webp");
+  });
+  test("rejects paths that escape the public folder", async () => {
+    const result = await api.setSiteMeta({ action: "setSiteMeta", favicon: "/../../etc/passwd" });
+    expect(result).toMatchObject({ success: false });
+  });
+  test("refuses to save when root.tsx cannot be upgraded", async () => {
+    await fs.writeFile(
+      path.join(tempDir, "app", "root.tsx"),
+      `export default function App() {\n  return <div />;\n}\n`,
+    );
+    const result = await api.setSiteMeta({ action: "setSiteMeta", favicon: "/images/icon.png" });
+    expect(result).toMatchObject({ success: false });
+    expect(await readConfig()).not.toHaveProperty("favicon");
+  });
+});