Merge pull request #6 from bruno-sartori/develop

Changes how images are consumed to decrease package size

.husky/pre-commit

@@ -1,4 +1,4 @@
-# npx lint-staged
+npx lint-staged
 
 red='\033[0;31m'
 green='\033[0;32m'

README.md

@@ -114,6 +114,19 @@ Please make sure all tests pass before submiting a PR
 
 ![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/test.jpg)
 
+## Roadmap 
+Would love Pull requests that build towards these objectives and even ideas for new objectives :3
+ - [x] ~~Decrease package size (As waifu images increase, we'll need to store them on a CDN or something like that)~~ Solved by using GitHub URL to the raw image LOL
+ - [x] Configure ESLint 
+ - [ ] Tests
+   - [ ] Resize (aparently jest-dom doesn't support getting element dimensions)
+   - [ ] !isNode (maybe find another way to determine if environment is nodejs or browser other than ```typeof process === 'object' && `${process}\` === '[object process]')```
+ - [ ] Add a CI pipeline that runs the tests
+ - [ ] Add more waifus! It would be very cool if some artist drew them for us :heart_eyes:
+ - [ ] Log levels
+ - [ ] Increase customization options
+ - [ ] Organize this mess I call code :laughing:
+
 ## Technologies used in this project
 
 | Name           | Description                                                                                                                             |

eslint.config.mjs

@@ -0,0 +1,22 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts}"]},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'prefer-spread': 'off',
+    'arrow-body-style': 'off',
+    'prefer-const': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-empty-function': 'off'
+    }
+  },
+];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsartori/weeb-logger",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "author": "Bruno Sartori <[email protected]>",
   "license": "MIT",
   "repository": {
@@ -14,6 +14,9 @@
     "dist"
   ],
   "scripts": {
+    "lint": "eslint src/**/*.ts",
+    "format": "eslint src/**/*.ts --fix",
+    "prebuild": "shx rm -rf dist && shx mkdir dist",
     "prepare-assets": "node ./scripts/generateBase64Assets.js",
     "build": "tsc",
     "prepublishOnly": "yarn build",
@@ -43,18 +46,25 @@
     "chalk": "4.1.2"
   },
   "devDependencies": {
-    "shx": "^0.3.4",
-    "copyfiles": "^2.4.1",
-    "ts-node": "^10.9.2",
-    "cross-env": "^7.0.3",
+    "@eslint/js": "^9.9.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.5.0",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.9.1",
+    "globals": "^15.9.0",
     "husky": "^9.1.5",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
-    "ts-jest-mock-import-meta": "1.2.0",
+    "shx": "^0.3.4",
     "ts-jest": "^29.2.4",
-    "typescript": "^5.5.4"
+    "ts-jest-mock-import-meta": "1.2.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.3.0"
+  },
+  "lint-staged": {
+    "src/*.{js,ts}": ["eslint --fix"]
   }
 }

src/CanvasHandler.ts

@@ -35,7 +35,7 @@ class WeebLoggerCanvasHandler {
     let lineArray: Array<{ line: string, x: number, y: number }> = []; // This is an array of lines, which the function will return
 
     // Lets iterate over each word
-    for (var n = 0; n < words.length; n++) {
+    for (let n = 0; n < words.length; n++) {
       // Create a test line, and measure it..
       testLine += `${words[n]} `;
       let metrics = this.ctx.measureText(testLine);

src/index.ts

@@ -4,7 +4,6 @@ import { BORDER_RADIUS, SCROLLBAR_WIDTH, WAIFU_SIZE, WAIFU_THEME } from './const
 import WeebLoggerCanvasHandler from './CanvasHandler'
 import { IWeebLog, IWeebLoggerConfig } from './interfaces';
 import { IWeebRequiredLoggerConfig, LogType } from './types';
-import waifus from './waifus.json';
 
 const isNode = typeof process === 'object' && `${process}` === '[object process]';
 
@@ -51,7 +50,7 @@ class WeebLogger {
         position: newConfig.containerStyle?.position ?? initialConfig.containerStyle.position,
         opacity: newConfig.containerStyle?.opacity ?? initialConfig.containerStyle.opacity,
         lineHeight: newConfig.containerStyle?.lineHeight ?? initialConfig.containerStyle?.lineHeight,
-      } || {},
+      },
       waifu: {
         showWaifu: newConfig.waifu?.showWaifu ?? initialConfig.waifu.showWaifu,
         name: newConfig.waifu?.name ?? initialConfig.waifu.name,
@@ -202,7 +201,7 @@ class WeebLogger {
         if (this.config.waifu.showWaifu) {
           const img = document.createElement('img');
           // @ts-ignore
-          img.src = `data:image/webp;base64, ${waifus[this.config.waifu.name]}`;
+          img.src = `https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/waifus/${this.config.waifu.name}_300.webp`;
           img.width = parseInt(WAIFU_SIZE[this.config.waifu.size], 10);
           img.height = parseInt(WAIFU_SIZE[this.config.waifu.size], 10);
           img.id = 'weeb-logger-waifu';
@@ -211,26 +210,26 @@ class WeebLogger {
         }
 
         switch (this.config.containerStyle.position) {
-          case 'top-right':
+          case 'top-right': {
             const resizerBottomLeft = document.createElement('div');
             resizerBottomLeft.className = 'resizer bottom-left';
             this.resizable.appendChild(resizerBottomLeft);
-            break;
-          case 'top-left':
+          } break;
+          case 'top-left': {
             const resizerBottomRight = document.createElement('div');
             resizerBottomRight.className = 'resizer bottom-right';
             this.resizable.appendChild(resizerBottomRight);
-            break;
-          case 'bottom-right':
+          } break;
+          case 'bottom-right': {
             const resizerTopLeft = document.createElement('div');
             resizerTopLeft.className = 'resizer top-left';
             this.resizable.appendChild(resizerTopLeft);
-            break;
-          case 'bottom-left':
+          } break;
+          case 'bottom-left': {
             const resizerTopRight = document.createElement('div');
             resizerTopRight.className = 'resizer top-right';
             this.resizable.appendChild(resizerTopRight);
-            break;
+          } break;
         }
 
         const container = document.createElement('div');