@code-hike/mini-editor - npm Package Compare versions

Comparing version 0.3.0-next.19 to 0.3.0-next.20

dist/editor-frame.d.ts

 import React from "react";
 import { Classes } from "@code-hike/classer";
-import { EditorTheme } from "@code-hike/smooth-code/dist/themes";
+import { EditorTheme } from "@code-hike/utils";
 export { EditorFrameProps, getPanelStyles, Snapshot, OutputPanel, TabsSnapshot, Tab, };
@@ -5,0 +5,0 @@ declare type Tab = {

dist/index.cjs.js

@@ -8,2 +8,3 @@ 'use strict';
 var classer = require('@code-hike/classer');
+var utils = require('@code-hike/utils');
 var miniTerminal = require('@code-hike/mini-terminal');
@@ -78,94 +79,2 @@ var smoothCode = require('@code-hike/smooth-code');
 
-var ColorName;
-(function (ColorName) {
-    ColorName[ColorName["EditorBackground"] = 0] = "EditorBackground";
-    ColorName[ColorName["ActiveTabBackground"] = 1] = "ActiveTabBackground";
-    ColorName[ColorName["ActiveTabForeground"] = 2] = "ActiveTabForeground";
-    ColorName[ColorName["InactiveTabBackground"] = 3] = "InactiveTabBackground";
-    ColorName[ColorName["InactiveTabForeground"] = 4] = "InactiveTabForeground";
-    ColorName[ColorName["EditorGroupBorder"] = 5] = "EditorGroupBorder";
-    ColorName[ColorName["EditorGroupHeaderBackground"] = 6] = "EditorGroupHeaderBackground";
-    ColorName[ColorName["TabBorder"] = 7] = "TabBorder";
-    ColorName[ColorName["ActiveTabBottomBorder"] = 8] = "ActiveTabBottomBorder";
-})(ColorName || (ColorName = {}));
-var contrastBorder = "#6FC3DF";
-// defaults from: https://github.com/microsoft/vscode/blob/main/src/vs/workbench/common/theme.ts
-// keys from : https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs
-function getColor(theme, colorName) {
-    var colors = theme.colors || {};
-    switch (colorName) {
-        case ColorName.EditorBackground:
-            return (colors["editor.background"] ||
-                getDefault(theme, {
-                    light: "#fffffe",
-                    dark: "#1E1E1E",
-                    hc: "#000000",
-                }));
-        case ColorName.ActiveTabBackground:
-            return (colors["tab.activeBackground"] ||
-                getColor(theme, ColorName.EditorBackground));
-        case ColorName.ActiveTabForeground:
-            return (colors["tab.activeForeground"] ||
-                getDefault(theme, {
-                    dark: "#ffffff",
-                    light: "#333333",
-                    hc: "#ffffff",
-                }));
-        case ColorName.InactiveTabBackground:
-            return (colors["tab.inactiveBackground"] ||
-                getDefault(theme, {
-                    dark: "#2D2D2D",
-                    light: "#ECECEC",
-                    hc: undefined,
-                }));
-        case ColorName.InactiveTabForeground:
-            return (colors["tab.inactiveForeground"] ||
-                getDefault(theme, {
-                    dark: transparent(getColor(theme, ColorName.ActiveTabForeground), 0.5),
-                    light: transparent(getColor(theme, ColorName.ActiveTabForeground), 0.7),
-                    hc: "#ffffff",
-                }));
-        case ColorName.TabBorder:
-            return (colors["tab.border"] ||
-                getDefault(theme, {
-                    dark: "#252526",
-                    light: "#F3F3F3",
-                    hc: contrastBorder,
-                }));
-        case ColorName.ActiveTabBottomBorder:
-            return (colors["tab.activeBorder"] ||
-                getColor(theme, ColorName.ActiveTabBackground));
-        case ColorName.EditorGroupBorder:
-            return (colors["editorGroup.border"] ||
-                getDefault(theme, {
-                    dark: "#444444",
-                    light: "#E7E7E7",
-                    hc: contrastBorder,
-                }));
-        case ColorName.EditorGroupHeaderBackground:
-            return (colors["editorGroupHeader.tabsBackground"] ||
-                getDefault(theme, {
-                    dark: "#252526",
-                    light: "#F3F3F3",
-                    hc: undefined,
-                }));
-        default:
-            return "#f00";
-    }
-}
-function transparent(color, opacity) {
-    var _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
-    return !color
-        ? color
-        : color + _opacity.toString(16).toUpperCase();
-}
-function getDefault(theme, defaults) {
-    var _a;
-    var themeType = (theme.type
-        ? theme.type
-        : ((_a = theme.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes("light")) ? "light"
-            : "dark");
-    return defaults[themeType];
-}
-
 var EditorFrame = React__default['default'].forwardRef(function InnerEditorFrame(_a, ref) {
@@ -175,3 +84,3 @@ var _b;
     classer.useClasser("ch-editor");
-    return (React__default['default'].createElement("div", __assign({ ref: ref }, rest, { className: "ch-frame ch-editor-frame", style: __assign({ background: getColor(theme, ColorName.EditorGroupHeaderBackground) }, style) }),
+    return (React__default['default'].createElement("div", __assign({ ref: ref }, rest, { className: "ch-frame ch-editor-frame", style: __assign({ background: utils.getColor(theme, utils.ColorName.EditorGroupHeaderBackground) }, style) }),
         React__default['default'].createElement("div", { className: "ch-frame-title-bar" },
@@ -194,3 +103,3 @@ React__default['default'].createElement(TabsContainer, { tabs: northPanel.tabs, showFrameButtons: true, button: button, panel: "north", theme: theme, onTabClick: onTabClick })),
                 height: "1px",
-                background: getColor(theme, ColorName.EditorGroupBorder),
+                background: utils.getColor(theme, utils.ColorName.EditorGroupBorder),
                 width: "100%",
@@ -203,9 +112,9 @@ top: 0,
             var title = _a.title, active = _a.active, style = _a.style;
-            return (React__default['default'].createElement("div", { key: title, title: title, "data-ch-tab": panel, className: c("", active ? "active" : "inactive"), style: __assign(__assign({}, style), { background: getColor(theme, active
-                        ? ColorName.ActiveTabBackground
-                        : ColorName.InactiveTabBackground), color: getColor(theme, active
-                        ? ColorName.ActiveTabForeground
-                        : ColorName.InactiveTabForeground), borderRightColor: getColor(theme, ColorName.TabBorder), borderBottomColor: getColor(theme, active
-                        ? ColorName.ActiveTabBottomBorder
-                        : ColorName.InactiveTabBackground) }), onClick: onTabClick && (function () { return onTabClick(title); }) },
+            return (React__default['default'].createElement("div", { key: title, title: title, "data-ch-tab": panel, className: c("", active ? "active" : "inactive"), style: __assign(__assign({}, style), { background: utils.getColor(theme, active
+                        ? utils.ColorName.ActiveTabBackground
+                        : utils.ColorName.InactiveTabBackground), color: utils.getColor(theme, active
+                        ? utils.ColorName.ActiveTabForeground
+                        : utils.ColorName.InactiveTabForeground), borderRightColor: utils.getColor(theme, utils.ColorName.TabBorder), borderBottomColor: utils.getColor(theme, active
+                        ? utils.ColorName.ActiveTabBottomBorder
+                        : utils.ColorName.InactiveTabBackground) }), onClick: onTabClick && (function () { return onTabClick(title); }) },
                 React__default['default'].createElement("div", null, title)));
@@ -212,0 +121,0 @@ }),

dist/index.esm.js

 import React from 'react';
 import { FrameButtons } from '@code-hike/mini-frame';
 import { useClasser } from '@code-hike/classer';
+import { getColor, ColorName } from '@code-hike/utils';
 import { InnerTerminal } from '@code-hike/mini-terminal';
@@ -69,94 +70,2 @@ import { CodeTween } from '@code-hike/smooth-code';
 
-var ColorName;
-(function (ColorName) {
-    ColorName[ColorName["EditorBackground"] = 0] = "EditorBackground";
-    ColorName[ColorName["ActiveTabBackground"] = 1] = "ActiveTabBackground";
-    ColorName[ColorName["ActiveTabForeground"] = 2] = "ActiveTabForeground";
-    ColorName[ColorName["InactiveTabBackground"] = 3] = "InactiveTabBackground";
-    ColorName[ColorName["InactiveTabForeground"] = 4] = "InactiveTabForeground";
-    ColorName[ColorName["EditorGroupBorder"] = 5] = "EditorGroupBorder";
-    ColorName[ColorName["EditorGroupHeaderBackground"] = 6] = "EditorGroupHeaderBackground";
-    ColorName[ColorName["TabBorder"] = 7] = "TabBorder";
-    ColorName[ColorName["ActiveTabBottomBorder"] = 8] = "ActiveTabBottomBorder";
-})(ColorName || (ColorName = {}));
-var contrastBorder = "#6FC3DF";
-// defaults from: https://github.com/microsoft/vscode/blob/main/src/vs/workbench/common/theme.ts
-// keys from : https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs
-function getColor(theme, colorName) {
-    var colors = theme.colors || {};
-    switch (colorName) {
-        case ColorName.EditorBackground:
-            return (colors["editor.background"] ||
-                getDefault(theme, {
-                    light: "#fffffe",
-                    dark: "#1E1E1E",
-                    hc: "#000000",
-                }));
-        case ColorName.ActiveTabBackground:
-            return (colors["tab.activeBackground"] ||
-                getColor(theme, ColorName.EditorBackground));
-        case ColorName.ActiveTabForeground:
-            return (colors["tab.activeForeground"] ||
-                getDefault(theme, {
-                    dark: "#ffffff",
-                    light: "#333333",
-                    hc: "#ffffff",
-                }));
-        case ColorName.InactiveTabBackground:
-            return (colors["tab.inactiveBackground"] ||
-                getDefault(theme, {
-                    dark: "#2D2D2D",
-                    light: "#ECECEC",
-                    hc: undefined,
-                }));
-        case ColorName.InactiveTabForeground:
-            return (colors["tab.inactiveForeground"] ||
-                getDefault(theme, {
-                    dark: transparent(getColor(theme, ColorName.ActiveTabForeground), 0.5),
-                    light: transparent(getColor(theme, ColorName.ActiveTabForeground), 0.7),
-                    hc: "#ffffff",
-                }));
-        case ColorName.TabBorder:
-            return (colors["tab.border"] ||
-                getDefault(theme, {
-                    dark: "#252526",
-                    light: "#F3F3F3",
-                    hc: contrastBorder,
-                }));
-        case ColorName.ActiveTabBottomBorder:
-            return (colors["tab.activeBorder"] ||
-                getColor(theme, ColorName.ActiveTabBackground));
-        case ColorName.EditorGroupBorder:
-            return (colors["editorGroup.border"] ||
-                getDefault(theme, {
-                    dark: "#444444",
-                    light: "#E7E7E7",
-                    hc: contrastBorder,
-                }));
-        case ColorName.EditorGroupHeaderBackground:
-            return (colors["editorGroupHeader.tabsBackground"] ||
-                getDefault(theme, {
-                    dark: "#252526",
-                    light: "#F3F3F3",
-                    hc: undefined,
-                }));
-        default:
-            return "#f00";
-    }
-}
-function transparent(color, opacity) {
-    var _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
-    return !color
-        ? color
-        : color + _opacity.toString(16).toUpperCase();
-}
-function getDefault(theme, defaults) {
-    var _a;
-    var themeType = (theme.type
-        ? theme.type
-        : ((_a = theme.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes("light")) ? "light"
-            : "dark");
-    return defaults[themeType];
-}
-
 var EditorFrame = React.forwardRef(function InnerEditorFrame(_a, ref) {
@@ -163,0 +72,0 @@ var _b;

package.json

 {
   "name": "@code-hike/mini-editor",
-  "version": "0.3.0-next.19",
+  "version": "0.3.0-next.20",
   "main": "dist/index.cjs.js",
@@ -15,3 +15,3 @@ "typings": "dist/index.d.ts",
   "devDependencies": {
-    "@code-hike/script": "0.3.0-next.19",
+    "@code-hike/script": "0.3.0-next.20",
     "@types/react": "^17.0.2",
@@ -21,6 +21,6 @@ "react": "^17.0.2"
   "dependencies": {
-    "@code-hike/classer": "0.3.0-next.19",
-    "@code-hike/mini-frame": "0.3.0-next.19",
-    "@code-hike/mini-terminal": "0.3.0-next.19",
-    "@code-hike/smooth-code": "0.3.0-next.19",
+    "@code-hike/classer": "0.3.0-next.20",
+    "@code-hike/mini-frame": "0.3.0-next.20",
+    "@code-hike/mini-terminal": "0.3.0-next.20",
+    "@code-hike/smooth-code": "0.3.0-next.20",
     "use-spring": "^0.2.3"
@@ -45,3 +45,3 @@ },
   },
-  "gitHead": "31e8622e544d27c18ac15465cb7eedb14b41d375"
+  "gitHead": "eb0f9519b43ee053534e07ac94026e01160c2eea"
 }

No alert changes

Worsened metrics

Total package byte prevSize

79547

decreased by-9.11%

Number of package files

16

decreased by-5.88%

Lines of code

1555

decreased by-11.14%

Dependency changes

• + Added@code-hike/classer@0.3.0-next.20(transitive)

• + Added@code-hike/highlighter@0.3.0-next.20(transitive)

• + Added@code-hike/mini-frame@0.3.0-next.20(transitive)

• + Added@code-hike/mini-terminal@0.3.0-next.20(transitive)

• + Added@code-hike/smooth-code@0.3.0-next.20(transitive)

• + Added@code-hike/utils@0.3.0-next.20(transitive)

• - Removed@code-hike/classer@0.3.0-next.19(transitive)

• - Removed@code-hike/highlighter@0.3.0-next.19(transitive)

• - Removed@code-hike/mini-frame@0.3.0-next.19(transitive)

• - Removed@code-hike/mini-terminal@0.3.0-next.19(transitive)

• - Removed@code-hike/smooth-code@0.3.0-next.19(transitive)

• - Removed@code-hike/utils@0.3.0-next.19(transitive)

• Updated@code-hike/classer@0.3.0-next.20

• Updated@code-hike/mini-frame@0.3.0-next.20

• Updated@code-hike/mini-terminal@0.3.0-next.20

• Updated@code-hike/smooth-code@0.3.0-next.20