@slipmatio/logger - npm Package Compare versions

Comparing version 0.0.9 to 0.1.0

CHANGES.md

 # Changelog
 
+### 0.1.0 - 2023-07-06
+
+- Refactor: revamped whole repo structure + tooling to match other Slipmat.io projects
+- Feat: added proper `logger.run()` support for Chromium-based browsers.
+- Chore: bumped all deps.
+
 ### 0.0.9 - 2020-11-07
@@ -4,0 +10,0 @@

package.json

 {
   "name": "@slipmatio/logger",
-  "version": "0.0.9",
-  "description": "Better console logging with TypScript support.",
-  "main": "index.js",
-  "module": "index.js",
-  "types": "index.d.ts",
-  "sideEffects": false,
+  "version": "0.1.0",
+  "description": "Better console logging with TypScript support",
+  "main": "./dist/logger.js",
+  "module": "./dist/logger.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/logger.mjs",
+      "require": "./dist/logger.js"
+    }
+  },
   "author": {
@@ -14,29 +19,10 @@ "name": "Ville Säävuori",
   "scripts": {
-    "build": "bash scripts/build.sh",
-    "build:types": "tsc --build tsconfig.json",
-    "cleanup": "bash scripts/cleanup.sh",
-    "lint": "prettier -c --parser typescript \"{src,tests,e2e}/**/*.[jt]s?(x)\"",
-    "lint:fix": "yarn run lint --write",
-    "release": "bash scripts/release.sh",
-    "size": "size-limit",
-    "test:unit": "jest --coverage",
-    "test": "yarn run build:types && yarn run test:unit"
+    "build": "vite build",
+    "dev": "vite",
+    "test": "vitest --coverage",
+    "test-e2e": "playwright test --ui",
+    "test-e2e-ci": "playwright test"
   },
   "files": [
-    "index.js",
-    "index.js.map",
-    "index.d.ts",
-    "index.d.ts.map",
-    "global/index.js",
-    "global/index.js.map",
-    "global/index.d.ts",
-    "global/index.d.ts.map",
-    "global/vue.js",
-    "global/vue.js.map",
-    "global/vue.d.ts",
-    "global/vue.d.ts.map",
-    "vue/index.js",
-    "vue/index.js.map",
-    "vue/index.d.ts",
-    "vue/index.d.ts.map",
+    "dist",
     "LICENSE",
@@ -51,2 +37,3 @@ "README.md",
     "vue",
+    "slipmatio",
     "typescript"
@@ -56,24 +43,34 @@ ],
   "devDependencies": {
-    "@types/jest": "^26.0.15",
-    "@types/jsdom": "^16.2.5",
-    "jest": "^26.6.3",
-    "pascalcase": "^1.0.0",
-    "prettier": "^2.1.2",
-    "size-limit": "^4.7.0",
-    "ts-jest": "^26.4.3",
-    "typescript": "^4.0.5",
-    "vue": "^3.0.2",
-    "yorkie": "^2.0.0"
+    "@playwright/test": "1.35.1",
+    "@types/node": "20.3.3",
+    "@vitejs/plugin-vue": "4.2.3",
+    "@vitest/coverage-v8": "0.32.4",
+    "@vue/test-utils": "2.4.0",
+    "happy-dom": "9.20.3",
+    "typescript": "5.1.6",
+    "vite": "4.3.9",
+    "vite-plugin-dts": "3.0.3",
+    "vitest": "0.32.4",
+    "vue": "3.3.4",
+    "vue-tsc": "1.8.3"
   },
-  "gitHooks": {
-    "pre-push": "yarn lint:fix"
+  "peerDependencies": {
+    "vue": "3"
   },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/slipmatio/logger.git"
+    "url": "git+https://github.com/slipmatio/logger.git"
   },
   "bugs": {
-    "url": "https://gitlab.com/slipmatio/logger/-/issues"
+    "url": "https://github.com/slipmatio/logger/issues"
   },
-  "homepage": "https://gitlab.com/slipmatio/logger"
-}
+  "homepage": "https://github.com/slipmatio/logger"
+}

README.md

@@ -10,3 +10,3 @@ # Better Logger
 - Nice looking and fully configurable output
-- Custom formatter for Vue 3
+- Custom formatter for Vue
 - Full TypeScript support
@@ -17,2 +17,8 @@ - Good test coverage
 
+Pnpm
+
+```sh
+pnpm add @slipmatio/logger
+```
+
 Yarn
@@ -30,32 +36,15 @@
 
-## Usage
+## Basic Usage
 
-The easiest way to use this logger is to install it globally from your main project file. It adds a `window.logger` object for you:
+The easiest way to use this logger is to use the `useLogger` or `useVueLogger` helpers. The helpers are configured to print only errors in production and print all but debug messages in development mode unless called with `debug=true`. You can also set the logger `name` attribute. Both arguments are optional:
 
 ```js
-import { useLogger } from '@slipmatio/logger/global'
+import { useLogger } from '@slipmatio/logger'
 
-useLogger()
+const logger = useLogger()
 ```
 
-or with Vue 3:
+Then just use `logger` wherever you want:
 
 ```js
-import { useLogger } from '@slipmatio/logger/global/vue'
-
-useLogger()
-```
-
-As this adds a global `logger` variable to your window object, you might need to add following to your `.eslintrc.js` or other linter config to make your linter and editor aware of it:
-
-```js
-// eslint config
-globals: {
-  logger: 'readonly',
-},
-```
-
-Then just use `logger` wherever you want, no extra imports or other steps required:
-
-```js
 logger.log('Hello World!')
@@ -68,44 +57,29 @@ // > Hello world!
 
-### Importing and using manually
+### Vue Logger
 
-You can also instantiate and import the logger manually. It works as you'd expect:
+Vue logger uses a special logger function that pretty prints ref, reactive, and computed objects for you so instead of unreadable garble you can read the logs easily.
 
 ```js
-import { Logger } from '@slipmatio/logger'
+import { ref, computed } from 'vue'
+import { useVueLogger } from '@slipmatio/logger'
 
-const logger = new Logger()
-```
+const logger = useVueLogger('vuelogger', true)
 
-If you export this `logger` from your main file, you can then import it manually wherever you want to use it. This requires the one extra import for each file but is more explicit and doesn't rely on `window` and doesn't need any special configuration for linters.
+const num = ref(1)
+const timesTwo = computed(() => num.value * 2)
 
-### Setting log level
-
-By default the log level is:
-
-```js
-process.env.NODE_ENV !== 'production' ? LogLevel.INFO : LogLevel.ERROR
+console.log('proxy objects', num, timesTwo)
+// > proxy objects  Object { __v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: 1, _value: 1 } Object { _setter: setter(), dep: undefined, __v_isRef: true, __v_isReadonly: true, _dirty: true, effect: {…}, _cacheable: true }
+logger.log('proxy objects', num, timesTwo)
+// > [vuelogger] proxy objects (ref): 1 (computed): 2
 ```
 
-in other words, when developing you will see anything but `debug` logs and in production only `error` and `critical` messages are shown.
+### Automatic Imports
 
-You can easily set the log level to work however you like by passing it as an argument to the constructor:
+Tip: use something like [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) with your bundler to automagically import your logger instance wherever you need it.
 
-```js
-import { useLogger, LogLevel } from '@slipmatio/logger/global'
+## Setting Up Manually
 
-// Log everything
-useLogger({
-  logLevel: logger.DEBUG,
-})
+You can also instantiate and import the logger manually. It works as you'd expect:
 
-// Log nothing
-useLogger({
-  logLevel: logger.OFF,
-})
-```
-
-## Options
-
-Here are the options and defaults for the Logger class. (The same options and defaults are used for `useLogger`.)
-
 ```js
@@ -117,4 +91,4 @@ import { Logger, LogLevel } from '@slipmatio/logger'
   logLevel: process.env.NODE_ENV !== 'production' ? LogLevel.INFO : LogLevel.ERROR,
-  name: '',
-  logFn: defaultLogger, // see source for implementation
+  name: 'mylogger',
+  logFn: myLogFn, // see source for implementation
 })
@@ -125,8 +99,6 @@ ```
 
-This project was originally born around 2016 and has been copy-pasted in various formats from project to project. As it has been helpful in so many projects, I finally decided to clean it up, convert to TypeScript and release as open source. So while the repo itself is new, the project is mature and ready for production.
+This project was originally born around 2016 and has been copy-pasted in various formats from project to project. As it has been helpful in so many projects, I finally decided to clean it up, convert to TypeScript and release as open source. Some parts of the code are a bit ugly, but it works well enough for most production needs. Contributions welcome!
 
-That said, the documentation is slim and I'm unexperienced in packaging JS applications so any help and feedback is surely appreciated!
+## Elsewhere
 
-## Support
-
 Follow [@uninen on Twitter](https://twitter.com/uninen)

New alerts

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

Improved metrics

Total package byte prevSize

88368

increased by298.23%

Lines of code

1876

increased by641.5%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

12

increased by20%

Number of package files

12

decreased by-40%

Number of lines in readme file

99

decreased by-22.05%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes