Chore: Console debug package #33

.yarn/patches/pretify-deep-diff-npm-1.0.1-587f0078e3.patch

@@ -0,0 +1,25 @@
+diff --git a/lib/formatGroupedChanges.js b/lib/formatGroupedChanges.js
+index 55710cad43f465cb2ddb60abcd05b1c164aa3e11..aa1c98254dd3123ce48c362842eca09437bda01e 100644
+--- a/lib/formatGroupedChanges.js
++++ b/lib/formatGroupedChanges.js
+@@ -1,16 +1,16 @@
+ const formatGroupedChanges = (groupedChanges, locale, customTexts) => {
+     let result = '';
+     if (groupedChanges.added.length) {
+-        result += `${customTexts.addedTitle || locale.addedTitle}\n` + groupedChanges.added.join('\n') + '\n\n';
++        result += `${customTexts.addedTitle || locale.addedTitle}\n` + groupedChanges.added.join('\n') + '\n';
+     }
+     if (groupedChanges.deleted.length) {
+-        result += `${customTexts.deletedTitle || locale.deletedTitle}\n` + groupedChanges.deleted.join('\n') + '\n\n';
++        result += `${customTexts.deletedTitle || locale.deletedTitle}\n` + groupedChanges.deleted.join('\n') + '\n';
+     }
+     if (groupedChanges.edited.length) {
+-        result += `${customTexts.editedTitle || locale.editedTitle}\n` + groupedChanges.edited.join('\n') + '\n\n';
++        result += `${customTexts.editedTitle || locale.editedTitle}\n` + groupedChanges.edited.join('\n') + '\n';
+     }
+     if (groupedChanges.arrayChange.length) {
+-        result += `${customTexts.arrayChangeTitle || locale.arrayChangeTitle}\n` + groupedChanges.arrayChange.join('\n') + '\n\n';
++        result += `${customTexts.arrayChangeTitle || locale.arrayChangeTitle}\n` + groupedChanges.arrayChange.join('\n') + '\n';
+     }
+
+     return result.trim();

package.json

@@ -58,6 +58,7 @@
   },
   "resolutions": {
     "csstype@^3.1.3": "patch:csstype@npm%3A3.1.3#./.yarn/patches/csstype-npm-3.1.3-e9a1c85013.patch",
-    "csstype@^3.0.7": "patch:csstype@npm%3A3.1.3#./.yarn/patches/csstype-npm-3.1.3-e9a1c85013.patch"
+    "csstype@^3.0.7": "patch:csstype@npm%3A3.1.3#./.yarn/patches/csstype-npm-3.1.3-e9a1c85013.patch",
+    "pretify-deep-diff@npm:^1.0.0": "patch:pretify-deep-diff@npm%3A1.0.1#~/.yarn/patches/pretify-deep-diff-npm-1.0.1-587f0078e3.patch"
   }
 }

packages/css-additional-types/package.json

@@ -25,6 +25,7 @@
   },
   "prettier": "prettier-config-custom",
   "devDependencies": {
+    "@mincho/debug-log": "workspace:^",
     "eslint-config-custom": "workspace:^",
     "mdn-data": "git+https://github.com/mdn/data.git#7f0c865a3c4b5d891285c93308ee5c25cb5cfee8",
     "prettier-config-custom": "workspace:^",

packages/css/package.json

@@ -26,6 +26,7 @@
     "@mincho/transform-to-vanilla": "workspace:^"
   },
   "devDependencies": {
+    "@mincho/debug-log": "workspace:^",
     "@vanilla-extract/css": "^1.15.3",
     "eslint-config-custom": "workspace:^",
     "prettier-config-custom": "workspace:^",

packages/debug-log/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

packages/debug-log/.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "rvest.vs-code-prettier-eslint",
+    "augustocdias.tasks-shell-input",
+    "vitest.explorer"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}

packages/debug-log/.vscode/launch.json

@@ -0,0 +1,62 @@
+{
+  // From https://vitest.dev/guide/debugging#vs-code
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Current Test File",
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${input:GIT_ROOT}/node_modules/vitest/vitest.mjs",
+      "args": [
+        "watch", "${relativeFile}",
+
+        // https://vitest.dev/guide/improving-performance
+        "--no-isolate", "--no-file-parallelism",
+        "--pool", "threads", "--poolOptions.threads.singleThread"
+        // "--pool", "forks", "--poolOptions.forks.singleFork"
+      ],
+      "smartStep": true,
+      "outFiles": ["${workspaceRoot}/dist/**/*.js"],
+      "console": "integratedTerminal",
+      "cwd": "${workspaceRoot}",
+    },
+
+    // https://www.builder.io/blog/debug-nodejs
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Current Test File with Remote Debugger",
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${input:GIT_ROOT}/node_modules/vitest/vitest.mjs",
+      "args": [
+        "watch", "${relativeFile}",
+        "--inspect-brk", "--inspect",
+        "--no-isolate", "--no-file-parallelism",
+        "--pool", "threads", "--poolOptions.threads.singleThread"
+        // "--pool", "forks", "--poolOptions.forks.singleFork"
+      ],
+      "smartStep": true,
+      "outFiles": ["${workspaceRoot}/dist/**/*.js"],
+      "console": "integratedTerminal",
+      "cwd": "${workspaceRoot}",
+    }
+  ],
+
+  // Need to install `augustocdias.tasks-shell-input` extension
+  "inputs": [
+    {
+      "id": "GIT_ROOT",
+      "type": "command",
+      "command": "shellCommand.execute",
+      "args": {
+        "command": "git rev-parse --show-toplevel",
+        "useSingleResult": true,
+        "useFirstResult": true
+      }
+    }
+  ]
+}

packages/debug-log/.vscode/settings.json

@@ -0,0 +1,28 @@
+{
+  "git.openRepositoryInParentFolders": "always",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.tsdk": "../../node_modules/typescript/lib",
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+  "editor.formatOnPaste": false, // required
+  "editor.formatOnType": false, // required
+  "editor.formatOnSave": true, // optional
+  "editor.formatOnSaveMode": "file", // required to format on save
+  "files.autoSave": "onFocusChange", // optional but recommended
+  "vs-code-prettier-eslint.prettierLast": false, // set as "true" to run 'prettier' last not first
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "vscode-color-picker.languages": [
+    "html",
+    "css",
+    "python",
+    "jsonc",
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue"
+  ]
+}

packages/debug-log/README.md

@@ -0,0 +1,41 @@
+## debug-log
+
+This was created to make console debugging easier when you often need to compare JavaScript object values.
+
+### API
+#### `debugLog`
+
+The count is incremented automatically with each call.
+
+![debugLog](https://github.com/user-attachments/assets/a0a2b545-be99-4db2-98d9-cc4535563d8a)
+
+```typescript
+debugLog();
+console.log("test");
+
+debugLog("with title debugLog");
+console.log("test2");
+```
+
+#### `jsonLog`
+
+Output JSON with the debug log.
+If you just want to print JSON purely, use `jsonPrint`.
+
+![image](https://github.com/user-attachments/assets/e5bb7c93-baec-419c-8472-19b014d72ce0)
+
+```typescript
+jsonLog({ key1: true, key2: 1, key3: null, key4: "string" });
+jsonLog("with title jsonLog", { others: undefined });
+```
+
+#### `jsonExpect`
+
+Compare the JSON and show the differences.
+
+![image](https://github.com/user-attachments/assets/941dc0a8-aa9a-4196-877d-417a912e81d1)
+
+```typescript
+jsonExpect({ a: 1 }, { a: 2 });
+jsonExpect("with title jsonExpect", { b: 1 }, { c: "1" });
+```

packages/debug-log/eslint.config.js

@@ -0,0 +1,3 @@
+// @ts-check
+
+export { default } from "eslint-config-custom/typescript";

packages/debug-log/package.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@mincho/debug-log",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "typings": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "yarn g:clean",
+    "build": "yarn g:build",
+    "build:watch": "yarn g:build-watch",
+    "test": "yarn g:test",
+    "test:watch": "yarn g:test-watch",
+    "coverage": "yarn g:coverage",
+    "lint": "yarn g:lint",
+    "fix": "yarn g:fix",
+    "check": "yarn g:check"
+  },
+  "prettier": "prettier-config-custom",
+  "devDependencies": {
+    "@types/deep-diff": "^1",
+    "eslint-config-custom": "workspace:^",
+    "prettier-config-custom": "workspace:^",
+    "tsconfig-custom": "workspace:^",
+    "vite-config-custom": "workspace:^"
+  },
+  "dependencies": {
+    "@pinojs/json-colorizer": "^4.0.0",
+    "boxen": "^8.0.0",
+    "chalk": "^5.3.0",
+    "consola": "^3.2.3",
+    "deep-diff": "^1.0.2",
+    "pretify-deep-diff": "patch:pretify-deep-diff@npm%3A1.0.1#~/.yarn/patches/pretify-deep-diff-npm-1.0.1-587f0078e3.patch"
+  }
+}