Fix #22 frozen themes again

pomber · pomber · commit 28d5da1c982a · 2023-04-20T20:14:02.000Z
diff --git a/.changeset/mean-countries-sparkle.md b/.changeset/mean-countries-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@code-hike/lighter": patch
+---
+
+Fix frozen themes again
diff --git a/lib/dist/browser.esm.mjs b/lib/dist/browser.esm.mjs
@@ -266,28 +266,34 @@ async function reallyLoadThemeByName(name) {
     }
 }
 function toFinalTheme(theme) {
-    var _a, _b;
     if (!theme) {
         return undefined;
     }
-    const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: ((_a = theme.settings) === null || _a === void 0 ? void 0 : _a.slice()) || ((_b = theme.tokenColors) === null || _b === void 0 ? void 0 : _b.slice()) || [], colors: theme.colors || {} });
+    const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {} });
     const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
     if (globalSetting) {
         const { foreground, background } = globalSetting.settings || {};
+        const newColors = {};
         if (foreground && !finalTheme.colors["editor.foreground"]) {
-            finalTheme.colors["editor.foreground"] = foreground;
+            newColors["editor.foreground"] = foreground;
         }
         if (background && !finalTheme.colors["editor.background"]) {
-            finalTheme.colors["editor.background"] = background;
+            newColors["editor.background"] = background;
+        }
+        if (Object.keys(newColors).length > 0) {
+            finalTheme.colors = Object.assign(Object.assign({}, finalTheme.colors), newColors);
         }
     }
     if (!globalSetting) {
-        finalTheme.settings.unshift({
-            settings: {
-                foreground: getColor(finalTheme, "editor.foreground"),
-                background: getColor(finalTheme, "editor.background"),
+        finalTheme.settings = [
+            {
+                settings: {
+                    foreground: getColor(finalTheme, "editor.foreground"),
+                    background: getColor(finalTheme, "editor.background"),
+                },
             },
-        });
+            ...finalTheme.settings,
+        ];
     }
     return finalTheme;
 }
diff --git a/lib/dist/index.cjs.js b/lib/dist/index.cjs.js
diff --git a/lib/dist/index.esm.mjs b/lib/dist/index.esm.mjs
@@ -614,28 +614,34 @@ async function reallyLoadThemeByName(name) {
     }
 }
 function toFinalTheme(theme) {
-    var _a, _b;
     if (!theme) {
         return undefined;
     }
-    const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: ((_a = theme.settings) === null || _a === void 0 ? void 0 : _a.slice()) || ((_b = theme.tokenColors) === null || _b === void 0 ? void 0 : _b.slice()) || [], colors: theme.colors || {} });
+    const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {} });
     const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
     if (globalSetting) {
         const { foreground, background } = globalSetting.settings || {};
+        const newColors = {};
         if (foreground && !finalTheme.colors["editor.foreground"]) {
-            finalTheme.colors["editor.foreground"] = foreground;
+            newColors["editor.foreground"] = foreground;
         }
         if (background && !finalTheme.colors["editor.background"]) {
-            finalTheme.colors["editor.background"] = background;
+            newColors["editor.background"] = background;
+        }
+        if (Object.keys(newColors).length > 0) {
+            finalTheme.colors = Object.assign(Object.assign({}, finalTheme.colors), newColors);
         }
     }
     if (!globalSetting) {
-        finalTheme.settings.unshift({
-            settings: {
-                foreground: getColor(finalTheme, "editor.foreground"),
-                background: getColor(finalTheme, "editor.background"),
+        finalTheme.settings = [
+            {
+                settings: {
+                    foreground: getColor(finalTheme, "editor.foreground"),
+                    background: getColor(finalTheme, "editor.background"),
+                },
             },
-        });
+            ...finalTheme.settings,
+        ];
     }
     return finalTheme;
 }
diff --git a/lib/src/theme.ts b/lib/src/theme.ts
@@ -54,27 +54,34 @@ function toFinalTheme(theme: RawTheme | undefined): FinalTheme | undefined {
     ...theme,
     name: theme.name || "unknown-theme",
     type: getColorScheme(theme),
-    settings: theme.settings?.slice() || theme.tokenColors?.slice() || [],
+    settings: theme.settings || theme.tokenColors || [],
     colors: theme.colors || {},
   };
 
   const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
   if (globalSetting) {
     const { foreground, background } = globalSetting.settings || {};
+    const newColors = {};
     if (foreground && !finalTheme.colors["editor.foreground"]) {
-      finalTheme.colors["editor.foreground"] = foreground;
+      newColors["editor.foreground"] = foreground;
     }
     if (background && !finalTheme.colors["editor.background"]) {
-      finalTheme.colors["editor.background"] = background;
+      newColors["editor.background"] = background;
+    }
+    if (Object.keys(newColors).length > 0) {
+      finalTheme.colors = { ...finalTheme.colors, ...newColors };
     }
   }
   if (!globalSetting) {
-    finalTheme.settings.unshift({
-      settings: {
-        foreground: getColor(finalTheme, "editor.foreground"),
-        background: getColor(finalTheme, "editor.background"),
+    finalTheme.settings = [
+      {
+        settings: {
+          foreground: getColor(finalTheme, "editor.foreground"),
+          background: getColor(finalTheme, "editor.background"),
+        },
       },
-    });
+      ...finalTheme.settings,
+    ];
   }
 
   return finalTheme;
diff --git a/lib/test/__snapshots__/browser.test.ts.snap b/lib/test/__snapshots__/browser.test.ts.snap
@@ -510,6 +510,53 @@ exports[`highlight with frozen theme 1`] = `
 }
 `;
 
+exports[`highlight with frozen theme with global setting 1`] = `
+{
+  "colors": {
+    "activeTabBackground": "#1E1E1E",
+    "activeTabBorder": "#1E1E1E",
+    "activeTabForeground": "#ffffff",
+    "activeTabTopBorder": undefined,
+    "background": "#1E1E1E",
+    "colorScheme": "dark",
+    "diffInsertedLineBackground": "#9bb95533",
+    "diffInsertedTextBackground": "#9ccc2c33",
+    "diffRemovedLineBackground": "#ff000033",
+    "diffRemovedTextBackground": "#ff000033",
+    "editorBackground": "#1E1E1E",
+    "editorGroupHeaderBackground": "#252526",
+    "foreground": "#bbbbbb",
+    "hoverTabBackground": "#2D2D2D",
+    "hoverTabForeground": "#ffffff80",
+    "iconForeground": "#C5C5C5",
+    "inactiveTabBackground": "#2D2D2D",
+    "inactiveTabForeground": "#ffffff80",
+    "lineNumberForeground": "#858585",
+    "listHoverBackground": "#2A2D2E",
+    "listHoverForeground": undefined,
+    "listSelectionBackground": "#37373D",
+    "listSelectionForeground": undefined,
+    "selectionBackground": "#264F78",
+    "sideBarBackground": "#252526",
+    "sideBarBorder": "#252526",
+    "sideBarForeground": "#bbbbbb",
+    "tabBorder": "#252526",
+    "tabsBorder": undefined,
+  },
+  "lang": "javascript",
+  "lines": [
+    [
+      {
+        "content": "x = 1",
+        "style": {
+          "color": "#BBBBBB",
+        },
+      },
+    ],
+  ],
+}
+`;
+
 exports[`highlight with scopes 1`] = `
 {
   "colors": {
diff --git a/lib/test/__snapshots__/cjs.test.ts.snap b/lib/test/__snapshots__/cjs.test.ts.snap
@@ -510,6 +510,53 @@ exports[`highlight with frozen theme 1`] = `
 }
 `;
 
+exports[`highlight with frozen theme with global setting 1`] = `
+{
+  "colors": {
+    "activeTabBackground": "#1E1E1E",
+    "activeTabBorder": "#1E1E1E",
+    "activeTabForeground": "#ffffff",
+    "activeTabTopBorder": undefined,
+    "background": "#1E1E1E",
+    "colorScheme": "dark",
+    "diffInsertedLineBackground": "#9bb95533",
+    "diffInsertedTextBackground": "#9ccc2c33",
+    "diffRemovedLineBackground": "#ff000033",
+    "diffRemovedTextBackground": "#ff000033",
+    "editorBackground": "#1E1E1E",
+    "editorGroupHeaderBackground": "#252526",
+    "foreground": "#bbbbbb",
+    "hoverTabBackground": "#2D2D2D",
+    "hoverTabForeground": "#ffffff80",
+    "iconForeground": "#C5C5C5",
+    "inactiveTabBackground": "#2D2D2D",
+    "inactiveTabForeground": "#ffffff80",
+    "lineNumberForeground": "#858585",
+    "listHoverBackground": "#2A2D2E",
+    "listHoverForeground": undefined,
+    "listSelectionBackground": "#37373D",
+    "listSelectionForeground": undefined,
+    "selectionBackground": "#264F78",
+    "sideBarBackground": "#252526",
+    "sideBarBorder": "#252526",
+    "sideBarForeground": "#bbbbbb",
+    "tabBorder": "#252526",
+    "tabsBorder": undefined,
+  },
+  "lang": "javascript",
+  "lines": [
+    [
+      {
+        "content": "x = 1",
+        "style": {
+          "color": "#BBBBBB",
+        },
+      },
+    ],
+  ],
+}
+`;
+
 exports[`highlight with scopes 1`] = `
 {
   "colors": {
diff --git a/lib/test/__snapshots__/esm.test.ts.snap b/lib/test/__snapshots__/esm.test.ts.snap
@@ -510,6 +510,53 @@ exports[`highlight with frozen theme 1`] = `
 }
 `;
 
+exports[`highlight with frozen theme with global setting 1`] = `
+{
+  "colors": {
+    "activeTabBackground": "#1E1E1E",
+    "activeTabBorder": "#1E1E1E",
+    "activeTabForeground": "#ffffff",
+    "activeTabTopBorder": undefined,
+    "background": "#1E1E1E",
+    "colorScheme": "dark",
+    "diffInsertedLineBackground": "#9bb95533",
+    "diffInsertedTextBackground": "#9ccc2c33",
+    "diffRemovedLineBackground": "#ff000033",
+    "diffRemovedTextBackground": "#ff000033",
+    "editorBackground": "#1E1E1E",
+    "editorGroupHeaderBackground": "#252526",
+    "foreground": "#bbbbbb",
+    "hoverTabBackground": "#2D2D2D",
+    "hoverTabForeground": "#ffffff80",
+    "iconForeground": "#C5C5C5",
+    "inactiveTabBackground": "#2D2D2D",
+    "inactiveTabForeground": "#ffffff80",
+    "lineNumberForeground": "#858585",
+    "listHoverBackground": "#2A2D2E",
+    "listHoverForeground": undefined,
+    "listSelectionBackground": "#37373D",
+    "listSelectionForeground": undefined,
+    "selectionBackground": "#264F78",
+    "sideBarBackground": "#252526",
+    "sideBarBorder": "#252526",
+    "sideBarForeground": "#bbbbbb",
+    "tabBorder": "#252526",
+    "tabsBorder": undefined,
+  },
+  "lang": "javascript",
+  "lines": [
+    [
+      {
+        "content": "x = 1",
+        "style": {
+          "color": "#BBBBBB",
+        },
+      },
+    ],
+  ],
+}
+`;
+
 exports[`highlight with scopes 1`] = `
 {
   "colors": {
diff --git a/lib/test/highlight.ts b/lib/test/highlight.ts
@@ -41,12 +41,19 @@ export function runTests({ highlight }) {
     const result = await highlight("x = 1", "js", {});
     expect(result).toMatchSnapshot();
   });
-
   test("highlight with frozen theme", async () => {
     const theme = Object.freeze({
-      tokenColors: Object.freeze([
-        { scope: ["comment"], settings: { foreground: "#8b949e" } },
-      ]),
+      colors: Object.freeze({}),
+      tokenColors: Object.freeze([]),
+    });
+    const result = await highlight("x = 1", "js", theme);
+    expect(result).toMatchSnapshot();
+  });
+
+  test("highlight with frozen theme with global setting", async () => {
+    const theme = Object.freeze({
+      colors: Object.freeze({}),
+      tokenColors: Object.freeze([{ settings: { foreground: "#bbbbbb" } }]),
     });
     const result = await highlight("x = 1", "js", theme);
     expect(result).toMatchSnapshot();

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@code-hike/lighter": patch
 +---
++
 +Fix frozen themes again
Original file line number	Diff line number	Diff line change
`@@ -266,28 +266,34 @@ async function reallyLoadThemeByName(name) {`
`266`	`266`	`}`
`267`	`267`	`}`
`268`	`268`	`function toFinalTheme(theme) {`
`269`		`- var _a, _b;`
`270`	`269`	`if (!theme) {`
`271`	`270`	`return undefined;`
`272`	`271`	`}`
`273`		`- const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name \|\| "unknown-theme", type: getColorScheme(theme), settings: ((_a = theme.settings) === null \|\| _a === void 0 ? void 0 : _a.slice()) \|\| ((_b = theme.tokenColors) === null \|\| _b === void 0 ? void 0 : _b.slice()) \|\| [], colors: theme.colors \|\| {} });`
	`272`	`+ const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name \|\| "unknown-theme", type: getColorScheme(theme), settings: theme.settings \|\| theme.tokenColors \|\| [], colors: theme.colors \|\| {} });`
`274`	`273`	`const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);`
`275`	`274`	`if (globalSetting) {`
`276`	`275`	`const { foreground, background } = globalSetting.settings \|\| {};`
	`276`	`+ const newColors = {};`
`277`	`277`	`if (foreground && !finalTheme.colors["editor.foreground"]) {`
`278`		`- finalTheme.colors["editor.foreground"] = foreground;`
	`278`	`+ newColors["editor.foreground"] = foreground;`
`279`	`279`	`}`
`280`	`280`	`if (background && !finalTheme.colors["editor.background"]) {`
`281`		`- finalTheme.colors["editor.background"] = background;`
	`281`	`+ newColors["editor.background"] = background;`
	`282`	`+ }`
	`283`	`+ if (Object.keys(newColors).length > 0) {`
	`284`	`+ finalTheme.colors = Object.assign(Object.assign({}, finalTheme.colors), newColors);`
`282`	`285`	`}`
`283`	`286`	`}`
`284`	`287`	`if (!globalSetting) {`
`285`		`- finalTheme.settings.unshift({`
`286`		`- settings: {`
`287`		`- foreground: getColor(finalTheme, "editor.foreground"),`
`288`		`- background: getColor(finalTheme, "editor.background"),`
	`288`	`+ finalTheme.settings = [`
	`289`	`+ {`
	`290`	`+ settings: {`
	`291`	`+ foreground: getColor(finalTheme, "editor.foreground"),`
	`292`	`+ background: getColor(finalTheme, "editor.background"),`
	`293`	`+ },`
`289`	`294`	`},`
`290`		`- });`
	`295`	`+ ...finalTheme.settings,`
	`296`	`+ ];`
`291`	`297`	`}`
`292`	`298`	`return finalTheme;`
`293`	`299`	`}`
Original file line number	Diff line number	Diff line change
`@@ -614,28 +614,34 @@ async function reallyLoadThemeByName(name) {`
`614`	`614`	`}`
`615`	`615`	`}`
`616`	`616`	`function toFinalTheme(theme) {`
`617`		`- var _a, _b;`
`618`	`617`	`if (!theme) {`
`619`	`618`	`return undefined;`
`620`	`619`	`}`
`621`		`- const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name \|\| "unknown-theme", type: getColorScheme(theme), settings: ((_a = theme.settings) === null \|\| _a === void 0 ? void 0 : _a.slice()) \|\| ((_b = theme.tokenColors) === null \|\| _b === void 0 ? void 0 : _b.slice()) \|\| [], colors: theme.colors \|\| {} });`
	`620`	`+ const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name \|\| "unknown-theme", type: getColorScheme(theme), settings: theme.settings \|\| theme.tokenColors \|\| [], colors: theme.colors \|\| {} });`
`622`	`621`	`const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);`
`623`	`622`	`if (globalSetting) {`
`624`	`623`	`const { foreground, background } = globalSetting.settings \|\| {};`
	`624`	`+ const newColors = {};`
`625`	`625`	`if (foreground && !finalTheme.colors["editor.foreground"]) {`
`626`		`- finalTheme.colors["editor.foreground"] = foreground;`
	`626`	`+ newColors["editor.foreground"] = foreground;`
`627`	`627`	`}`
`628`	`628`	`if (background && !finalTheme.colors["editor.background"]) {`
`629`		`- finalTheme.colors["editor.background"] = background;`
	`629`	`+ newColors["editor.background"] = background;`
	`630`	`+ }`
	`631`	`+ if (Object.keys(newColors).length > 0) {`
	`632`	`+ finalTheme.colors = Object.assign(Object.assign({}, finalTheme.colors), newColors);`
`630`	`633`	`}`
`631`	`634`	`}`
`632`	`635`	`if (!globalSetting) {`
`633`		`- finalTheme.settings.unshift({`
`634`		`- settings: {`
`635`		`- foreground: getColor(finalTheme, "editor.foreground"),`
`636`		`- background: getColor(finalTheme, "editor.background"),`
	`636`	`+ finalTheme.settings = [`
	`637`	`+ {`
	`638`	`+ settings: {`
	`639`	`+ foreground: getColor(finalTheme, "editor.foreground"),`
	`640`	`+ background: getColor(finalTheme, "editor.background"),`
	`641`	`+ },`
`637`	`642`	`},`
`638`		`- });`
	`643`	`+ ...finalTheme.settings,`
	`644`	`+ ];`
`639`	`645`	`}`
`640`	`646`	`return finalTheme;`
`641`	`647`	`}`