modernx-logger 1.1.1

package/README.md

@@ -0,0 +1,142 @@
+# ModernX Logger
+
+Redux logger plugin for ModernX applications, providing comprehensive debugging and state monitoring capabilities.
+
+## Features
+
+- **Redux Integration**: Seamless integration with ModernX's Redux-based state management
+- **Action Logging**: Real-time logging of all Redux actions with timestamps
+- **State Visualization**: Visual display of state changes and diffs
+- **Performance Monitoring**: Built-in performance tracking for actions
+- **Customizable Options**: Configurable logging levels and formats
+
+## Installation
+
+```bash
+npm install modernx-logger --save-dev
+```
+
+## Usage
+
+### Basic Setup
+
+```javascript
+import modernx from 'modernx';
+import logger from 'modernx-logger';
+
+const app = modernx({
+  plugins: [logger()],
+});
+```
+
+### Advanced Configuration
+
+```javascript
+import modernx from 'modernx';
+import logger from 'modernx-logger';
+
+const app = modernx({
+  plugins: [
+    logger({
+      collapsed: true,
+      duration: true,
+      timestamp: true,
+      level: 'info',
+      colors: {
+        title: false,
+        prevState: false,
+        action: false,
+        nextState: false,
+        error: false,
+      },
+    }),
+  ],
+});
+```
+
+### CLI Integration
+
+When creating a new ModernX project, you can include the logger automatically:
+
+```bash
+npx modernx create my-app --tools logger
+```
+
+## API Reference
+
+### Plugin Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `collapsed` | boolean | `true` | Collapse action groups |
+| `duration` | boolean | `true` | Show action duration |
+| `timestamp` | boolean | `true` | Include timestamp |
+| `level` | string | `'log'` | Logging level |
+| `colors` | object | `{}` | Custom color configuration |
+
+### Configuration Examples
+
+#### Development Environment
+
+```javascript
+logger({
+  collapsed: false,
+  duration: true,
+  timestamp: true,
+  level: 'debug',
+  colors: {
+    title: 'purple',
+    prevState: 'grey',
+    action: 'blue',
+    nextState: 'green',
+    error: 'red',
+  },
+});
+```
+
+#### Production Environment
+
+```javascript
+logger({
+  collapsed: true,
+  duration: false,
+  timestamp: false,
+  level: 'error',
+  colors: false,
+});
+```
+
+## Migration from DVA Logger
+
+If you're migrating from DVA, the ModernX logger provides the same API:
+
+```javascript
+// DVA Logger
+import { createLogger } from 'dva-logger';
+
+// ModernX Logger (API compatible)
+import logger from 'modernx-logger';
+
+// Usage is identical
+const app = modernx({
+  plugins: [logger()],
+});
+```
+
+## Development
+
+### Building
+
+```bash
+npm run build
+```
+
+### Testing
+
+```bash
+npm test
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "modernx-logger",
+  "version": "1.1.1",
+  "description": "Redux logger plugin for modernx",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "sideEffects": false,
+  "dependencies": {
+    "@babel/runtime": "^7.20.0",
+    "redux-logger": "^3.0.6"
+  },
+  "peerDependencies": {
+    "modernx": "^1.0.0"
+  },
+  "devDependencies": {
+    "modernx": "1.1.1"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/perlinson/modernx/tree/master/packages/modernx-logger"
+  },
+  "homepage": "https://github.com/perlinson/modernx",
+  "author": "perlinson <perlinson2024@gmail.com>",
+  "keywords": [
+    "modernx",
+    "modernx-plugin",
+    "logger",
+    "redux"
+  ],
+  "license": "MIT",
+  "gitHead": "f14cf7c9309547fc2d9013ac8baa5495e2641750"
+}

package/src/index.d.ts

@@ -0,0 +1,34 @@
+import { Middleware } from 'redux';
+
+export interface LoggerOptions {
+  collapsed?: boolean;
+  duration?: boolean;
+  timestamp?: boolean;
+  level?: 'log' | 'debug' | 'info' | 'warn' | 'error';
+  colors?: {
+    title?: string | boolean;
+    prevState?: string | boolean;
+    action?: string | boolean;
+    nextState?: string | boolean;
+    error?: string | boolean;
+  };
+  logger?: {
+    log: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+  };
+  actionTransformer?: (action: any) => any;
+  stateTransformer?: (state: any) => any;
+  errorTransformer?: (error: any) => any;
+  predicate?: (getState: () => any, action: any) => boolean;
+  diffPredicate?: (getState: () => any, action: any) => boolean;
+}
+
+export interface ModernXLoggerPlugin {
+  _handleActions: (handlers: any, defaultState: any) => Middleware;
+  onAction: Middleware;
+}
+
+declare function modernxLogger(options?: LoggerOptions): ModernXLoggerPlugin;
+
+export default modernxLogger;

package/src/index.js

@@ -0,0 +1,23 @@
+import { createLogger } from 'redux-logger';
+
+export default function(opts = {}) {
+  return {
+    _handleActions(handlers, defaultState) {
+      // Pass-through for action handlers
+      return (state = defaultState, action) => {
+        const { type } = action;
+        const handler = handlers[type];
+        if (handler) {
+          return handler(state, action);
+        }
+        return state;
+      };
+    },
+    onAction: createLogger({
+      collapsed: true,
+      duration: true,
+      timestamp: true,
+      ...opts,
+    }),
+  };
+}