@visulima/colorize - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

@@ -0,1 +1,15 @@
+## @visulima/colorize [1.2.0](https://github.com/visulima/visulima/compare/@visulima/colorize@1.1.0...@visulima/colorize@1.2.0) (2024-02-18)
+
+
+### Features
+
+* added css support for the browser ([00bed6a](https://github.com/visulima/visulima/commit/00bed6a4d6ff6a6de8e72c63e19f5b6fb6ce1fa9))
+* added full support for no ansi supported browser ([2c08071](https://github.com/visulima/visulima/commit/2c080719ce5f82d1d3a804d495f456714ce1af81))
+* added full support for no ansi supported browser ([e53065f](https://github.com/visulima/visulima/commit/e53065fd252247e00553980cbea13fd79d2c4ac4))
+
+
+### Bug Fixes
+
+* added 99% of the feature ([d9ebe51](https://github.com/visulima/visulima/commit/d9ebe51d19511f4dc91d4c7743b45d423020be1d))
+
 ## @visulima/colorize [1.1.0](https://github.com/visulima/visulima/compare/@visulima/colorize@1.0.1...@visulima/colorize@1.1.0) (2024-02-13)
@@ -2,0 +16,0 @@

package.json

 {
     "name": "@visulima/colorize",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Terminal and Console string styling done right.",
@@ -11,3 +11,5 @@ "keywords": [
         "blue",
+        "browser",
         "chalk",
+        "chrome",
         "cli",
@@ -23,2 +25,3 @@ "color",
         "cyan",
+        "firefox",
         "FORCE_COLOR",
@@ -73,17 +76,24 @@ "formatting",
         ".": {
-            "browser": "./dist/index.js",
+            "browser": "./dist/index.server.js",
             "require": {
-                "types": "./dist/index.d.cts",
-                "default": "./dist/index.cjs"
+                "types": "./dist/index.server.d.cts",
+                "default": "./dist/index.server.cjs"
             },
             "import": {
-                "types": "./dist/index.d.ts",
-                "default": "./dist/index.js"
+                "types": "./dist/index.server.d.ts",
+                "default": "./dist/index.server.js"
             }
         },
+        "./browser": {
+            "browser": "./dist/index.browser.js",
+            "import": {
+                "types": "./dist/index.browser.d.ts",
+                "default": "./dist/index.browser.js"
+            }
+        },
         "./package.json": "./package.json"
     },
-    "main": "dist/index.cjs",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
+    "main": "dist/index.server.cjs",
+    "module": "dist/index.server.js",
+    "types": "dist/index.server.d.ts",
     "files": [
@@ -123,3 +133,3 @@ "dist/**",
         "@types/micromatch": "^4.0.6",
-        "@types/node": "18.18.8",
+        "@types/node": "18.18.14",
         "@vitest/coverage-v8": "^1.2.2",
@@ -178,7 +188,11 @@ "@vitest/ui": "^1.2.2",
         {
-            "source": "src/index.mts",
+            "source": "src/index.browser.ts",
             "format": "esm"
         },
         {
-            "source": "src/index.cts",
+            "source": "src/index.server.mts",
+            "format": "esm"
+        },
+        {
+            "source": "src/index.server.cts",
             "format": "cjs"
@@ -185,0 +199,0 @@ }

README.md

@@ -49,3 +49,3 @@ <div align="center">
 -   Supports the [environment variables](#cli-vars) `NO_COLOR` `FORCE_COLOR` and flags `--no-color` `--color`
--   Supports **Deno**, **Next.JS** runtimes and **Browser**
+-   Supports **Deno**, **Next.JS** runtimes and **Browser** (not only chrome) (currently multi nesting is not supported)
 -   Expressive API
@@ -114,2 +114,57 @@ -   Doesn't extend `String.prototype`
 
+### Browser
+
+> **Note:** It has the same API as in Node.js.
+
+> The return value of the browser version is an array of strings, not a string, because the browser console use the `%c` syntax for styling.
+> This is why you need the spread operator `...` to log the colorized string.
+
+```typescript
+// ESM default import
+import colorize from "@visulima/colorize/browser";
+// ESM named import
+import { red, green, blue } from "@visulima/colorize/browser";
+```
+
+Some examples:
+
+```typescript
+console.log(...colorize.green("Success!"));
+console.log(...green("Success!"));
+
+// template string
+console.log(...blue`Info!`);
+
+// chained syntax
+console.log(...green.bold`Success!`);
+
+// nested syntax
+console.log(...red`The ${blue.underline`file.js`} not found!`);
+```
+
+Workaround/Hack to not use the spread operator `...`.
+
+> Warning: But you will lose the correct file path and line number in the console.
+
+```typescript
+let consoleOverwritten = false;
+
+// Heck the window.console object to add colorized logging
+if (typeof navigator !== "undefined" && typeof window !== "undefined" && !consoleOverwritten) {
+    ["error", "group", "groupCollapsed", "info", "log", "trace", "warn"].forEach((o) => {
+        const originalMethod = (window.console as any)[o as keyof Console];
+
+        (window.console as any)[o as keyof Console] = (...args: any[]) => {
+            if (Array.isArray(args[0]) && args[0].length >= 2 && args[0][0].includes("%c")) {
+                originalMethod(...args[0]);
+            } else {
+                originalMethod(...args);
+            }
+        };
+    });
+
+    consoleOverwritten = true;
+}
+```
+
 ### API
@@ -272,2 +327,6 @@
 
+Browser
+
+![ansi256_browser](__assets__/browser.png)
+
 </center>
@@ -401,4 +460,6 @@
 
-Since Chrome 69, ANSI escape codes are natively supported in the developer console.
+Since Chrome 69 (every chrome based browser), ANSI escape codes are natively supported in the developer console.
 
+For other browsers (like firefox) we use the console style syntax command `%c`.
+
 ## Windows
@@ -405,0 +466,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

138890

increased by64.83%

Number of package files

13

increased by30%

Lines of code

322

increased by96.34%

Number of lines in readme file

605

increased by11.21%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes