fix(web): preserve community theme provenance

t3-code[bot] committed 3 months ago

Commit dd8a0db1 parent 62d13075 files · +75 −24Browse files

Unified · Split

5 files

apps/web/src/components/settings/ThemeSearchSection.tsx +34 −11
apps/web/src/openVsxThemes.test.ts +6 −0
apps/web/src/openVsxThemes.ts +2 −2
apps/web/src/themePalette.test.ts +16 −4
apps/web/src/themePalette.ts +17 −7

apps/web/src/components/settings/ThemeSearchSection.tsx+34−11

   getCustomThemes,
   installCustomTheme,
   removeCustomTheme,
+  updateCustomTheme,
   type ThemeDefinition,
 } from "../../themePalette";
 import { Button } from "../ui/button";
       try {
         const themes = await importOpenVsxThemeExtension(extension, controller.signal);
         if (controller.signal.aborted) return;
-        const existingIds = new Set(getCustomThemes().map((theme) => theme.id));
+        const existingById = new Map(getCustomThemes().map((theme) => [theme.id, theme]));
-        const missingThemes = themes.filter((theme) => !existingIds.has(theme.id));
+        const installedIds: string[] = [];
-        if (missingThemes.length === 0) {
+        const replaced: ThemeDefinition[] = [];
-          throw new Error(`${extension.name} is already added.`);
+        const imported: ThemeDefinition[] = [];
-        }
-        const installed: ThemeDefinition[] = [];
         try {
-          for (const theme of missingThemes) installed.push(installCustomTheme(theme));
+          for (const theme of themes) {
+            const existing = existingById.get(theme.id);
+            if (existing) {
+              replaced.push(existing);
+              imported.push(updateCustomTheme(theme));
+            } else {
+              const installed = installCustomTheme(theme);
+              installedIds.push(installed.id);
+              imported.push(installed);
+            }
+          }
         } catch (cause) {
-          for (const theme of installed) {
+          for (const themeId of installedIds) {
             try {
-              removeCustomTheme(theme.id);
+              removeCustomTheme(themeId);
+            } catch {
+              // Best effort rollback. The original storage failure is clearer.
+            }
+          }
+          for (const theme of replaced) {
+            try {
+              updateCustomTheme(theme);
             } catch {
               // Best effort rollback. The original storage failure is clearer.
             }
           }
           throw cause;
         }
-        onInstalled(installed);
+        onInstalled(imported);
       } catch (cause) {
         if (!controller.signal.aborted) {
           setError(cause instanceof Error ? cause.message : "That theme could not be added.");
         </Button>
       </form>
+      <div className="sr-only" role="status">
+        {isSearching
+          ? "Finding themes..."
+          : results
+            ? `${results.length} supported ${results.length === 1 ? "theme" : "themes"} found.`
+            : ""}
+      </div>
       {error ? (
         <div
           aria-live="polite"

apps/web/src/openVsxThemes.test.ts+6−0

     await expect(importOpenVsxThemeExtension(extension)).rejects.toThrow(
       "does not match its advertised license",
     );
+    Reflect.deleteProperty(packagedManifest, "license");
+    await rebuildPackage();
+    await expect(importOpenVsxThemeExtension(extension)).rejects.toThrow(
+      "does not match its advertised license",
+    );
   });
   it("stops import work when the request is cancelled", async () => {

apps/web/src/openVsxThemes.ts+2−2

@@ -651,8 +651,8 @@ export async function importOpenVsxThemeExtension( · 650 unmodified lines
651	throw new Error("That extension package does not match the selected Open VSX theme.");	651	throw new Error("That extension package does not match the selected Open VSX theme.");
652	}	652	}
653	if (	653	if (
654	typeof packagedManifest.license === "string" &&	654	typeof packagedManifest.license !== "string" \|\|
655	packagedManifest.license.trim() !== extension.license	655	packagedManifest.license.trim().toLowerCase() !== extension.license.toLowerCase()
656	) {	656	) {
657	throw new Error("That extension package does not match its advertised license.");	657	throw new Error("That extension package does not match its advertised license.");
658	}	658	}

apps/web/src/themePalette.test.ts+16−4

   });
   it("serializes a theme back into the importable file shape", () => {
-    const serialized = serializeThemeFile(T3_CHAT_THEME);
+    const theme = {
+      ...parseThemeFile({
+        version: THEME_FILE_VERSION,
+        id: "community-demo",
+        name: "Community Demo",
+        appearance: "dark",
+        colors: { canvas: "#111111" },
+      }),
+      collection: { id: "open-vsx:demo.theme", label: "Demo Theme" },
+    };
+    const serialized = serializeThemeFile(theme);
     expect(JSON.parse(serialized)).toMatchObject({
       version: THEME_FILE_VERSION,
-      id: T3_CHAT_THEME.id,
+      id: theme.id,
-      name: T3_CHAT_THEME.label,
+      name: theme.label,
-      appearance: "light",
+      appearance: "dark",
+      collection: theme.collection,
     });
+    expect(parseThemeFile(JSON.parse(serialized)).collection).toEqual(theme.collection);
   });
   it("keeps sidebar artwork opt-in through theme files", () => {

apps/web/src/themePalette.ts+17−7

   appearance: ThemeAppearance;
   colors: ThemeColorOverrides;
   variants?: ThemeVariantOverrides;
+  collection?: ThemeCollection;
   sidebarArtwork?: boolean;
   managed?: boolean;
 }>;
   return typeof value === "string" && value.trim().length > 0 && value.trim().length <= 48;
 }
+function parseThemeCollection(value: unknown): ThemeCollection | undefined {
+  return isRecord(value) &&
+    typeof value.id === "string" &&
+    /^[a-z0-9][a-z0-9.:-]{0,127}$/i.test(value.id) &&
+    isThemeLabel(value.label)
+    ? { id: value.id, label: value.label.trim() }
+    : undefined;
+}
 function parseStoredThemeColors(value: unknown, appearance: ThemeAppearance): ThemeColors | null {
   if (!isRecord(value)) return null;
   if (!colors) return null;
   const variants = parseStoredThemeVariants(value.variants, value.appearance);
   if (value.variants !== undefined && variants === null) return null;
-  const collection =
+  const collection = parseThemeCollection(value.collection);
-    isRecord(value.collection) &&
-    typeof value.collection.id === "string" &&
-    /^[a-z0-9][a-z0-9.:-]{0,127}$/i.test(value.collection.id) &&
-    isThemeLabel(value.collection.label)
-      ? { id: value.collection.id, label: value.collection.label.trim() }
-      : undefined;
   return {
     id: value.id,
   }
   const overrides = parseThemeColorOverrides(rawColors);
+  const collection = parseThemeCollection(value.collection);
+  if (value.collection !== undefined && !collection) {
+    throw new Error("Theme collections need a valid id and label.");
+  }
   const fallback = getDefaultThemeColors(appearance);
   const variants: Partial<Record<ThemeAppearance, ThemeColors>> = {};
     appearance,
     colors: { ...fallback, ...overrides },
     ...(Object.keys(variants).length > 0 ? { variants } : {}),
+    ...(collection ? { collection } : {}),
     ...(value.sidebarArtwork === true ? { sidebarArtwork: true } : {}),
     ...(value.managed === true ? { managed: true } : {}),
   };
     appearance: theme.appearance,
     colors: theme.colors,
     ...(theme.variants ? { variants: theme.variants } : {}),
+    ...(theme.collection ? { collection: theme.collection } : {}),
     ...(theme.sidebarArtwork ? { sidebarArtwork: true } : {}),
     ...(theme.managed ? { managed: true } : {}),
   };