network-terminal 1.0.5 → 1.0.7

package/src/index.ts

@@ -1,17 +0,0 @@
-export { NetworkTerminal } from './components/NetworkTerminal';
-export { Terminal } from './components/Terminal';
-export { TerminalHeader } from './components/TerminalHeader';
-export { LogEntry } from './components/LogEntry';
-export { useNetworkInterceptor } from './hooks/useNetworkInterceptor';
-export { formatJson, truncate, formatTime } from './utils/formatters';
-export { getStatusColor, getMethodColor } from './utils/colors';
-export { networkTerminal } from './vite-plugin';
-export type {
-  NetworkLog,
-  NetworkTerminalProps,
-  TerminalProps,
-  TerminalHeaderProps,
-  LogEntryProps,
-  UseNetworkInterceptorProps,
-} from './types';
-export type { NetworkTerminalPluginOptions } from './vite-plugin';

package/src/types.ts

@@ -1,50 +0,0 @@
-export interface NetworkLog {
-  id: string;
-  timestamp: Date;
-  method: string;
-  url: string;
-  status?: number;
-  statusText?: string;
-  requestHeaders?: Record<string, string>;
-  requestBody?: unknown;
-  responseBody?: unknown;
-  duration?: number;
-  error?: string;
-  type: 'fetch' | 'xhr';
-}
-
-export interface TerminalProps {
-  title: string;
-  logs: NetworkLog[];
-  type: 'request' | 'response';
-  onClear: () => void;
-  expanded: boolean;
-  onToggleExpand: () => void;
-}
-
-export interface LogEntryProps {
-  log: NetworkLog;
-  type: 'request' | 'response';
-}
-
-export interface TerminalHeaderProps {
-  title: string;
-  count: number;
-  expanded: boolean;
-  onClear: () => void;
-  onToggleExpand: () => void;
-}
-
-export interface UseNetworkInterceptorProps {
-  enabled: boolean;
-  onLogAdd: (log: NetworkLog) => void;
-  onLogUpdate: (id: string, updates: Partial<NetworkLog>) => void;
-}
-
-export interface NetworkTerminalProps {
-  maxLogs?: number;
-  defaultVisible?: boolean;
-  position?: 'bottom' | 'top';
-  height?: string;
-  zIndex?: number;
-}

package/src/utils/colors.ts

@@ -1,18 +0,0 @@
-export const getStatusColor = (status?: number): string => {
-  if (!status) return '#9ca3af'; // gray-400
-  if (status >= 200 && status < 300) return '#4ade80'; // green-400
-  if (status >= 300 && status < 400) return '#facc15'; // yellow-400
-  if (status >= 400 && status < 500) return '#fb923c'; // orange-400
-  return '#f87171'; // red-400
-};
-
-export const getMethodColor = (method: string): string => {
-  const colors: Record<string, string> = {
-    GET: '#22d3ee', // cyan-400
-    POST: '#4ade80', // green-400
-    PUT: '#facc15', // yellow-400
-    PATCH: '#fb923c', // orange-400
-    DELETE: '#f87171', // red-400
-  };
-  return colors[method.toUpperCase()] || '#9ca3af';
-};

package/src/utils/formatters.ts

@@ -1,26 +0,0 @@
-export const formatJson = (data: unknown): string => {
-  if (!data) return '';
-  try {
-    if (typeof data === 'string') {
-      const parsed = JSON.parse(data);
-      return JSON.stringify(parsed, null, 2);
-    }
-    return JSON.stringify(data, null, 2);
-  } catch {
-    return String(data);
-  }
-};
-
-export const truncate = (str: string, maxLength: number): string => {
-  if (str.length <= maxLength) return str;
-  return str.slice(0, maxLength) + '...';
-};
-
-export const formatTime = (date: Date): string => {
-  return date.toLocaleTimeString('en-US', {
-    hour12: false,
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
-};

package/src/vite-plugin.ts

@@ -1,88 +0,0 @@
-import type { Plugin } from 'vite';
-
-export interface NetworkTerminalPluginOptions {
-  /** Position of the terminal: 'top' or 'bottom' (default: 'bottom') */
-  position?: 'top' | 'bottom';
-  /** Maximum number of logs to keep (default: 100) */
-  maxLogs?: number;
-  /** Terminal height (default: '450px') */
-  height?: string;
-  /** CSS z-index (default: 9999) */
-  zIndex?: number;
-}
-
-const VIRTUAL_MODULE_ID = 'virtual:network-terminal';
-const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
-
-export function networkTerminal(options: NetworkTerminalPluginOptions = {}): Plugin {
-  const {
-    position = 'bottom',
-    maxLogs = 100,
-    height = '450px',
-    zIndex = 9999,
-  } = options;
-
-  return {
-    name: 'vite-plugin-network-terminal',
-    apply: 'serve', // Only apply during development
-
-    resolveId(id) {
-      if (id === VIRTUAL_MODULE_ID) {
-        return RESOLVED_VIRTUAL_MODULE_ID;
-      }
-    },
-
-    load(id) {
-      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
-        return `
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { NetworkTerminal } from 'network-terminal';
-
-function initNetworkTerminal() {
-  const containerId = '__network-terminal-root__';
-  let container = document.getElementById(containerId);
-
-  if (!container) {
-    container = document.createElement('div');
-    container.id = containerId;
-    document.body.appendChild(container);
-  }
-
-  const root = ReactDOM.createRoot(container);
-  root.render(
-    React.createElement(NetworkTerminal, {
-      position: '${position}',
-      maxLogs: ${maxLogs},
-      height: '${height}',
-      zIndex: ${zIndex},
-      defaultVisible: false,
-    })
-  );
-}
-
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initNetworkTerminal);
-} else {
-  initNetworkTerminal();
-}
-`;
-      }
-    },
-
-    transformIndexHtml(html) {
-      return {
-        html,
-        tags: [
-          {
-            tag: 'script',
-            attrs: { type: 'module', src: '/@id/__x00__virtual:network-terminal' },
-            injectTo: 'body',
-          },
-        ],
-      };
-    },
-  };
-}
-
-export default networkTerminal;

package/standalone/main.tsx

@@ -1,216 +0,0 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom/client';
-import { NetworkTerminal } from '../dist/index.mjs';
-
-const styles = {
-  container: {
-    padding: '40px',
-    maxWidth: '800px',
-    margin: '0 auto',
-  },
-  header: {
-    marginBottom: '40px',
-  },
-  title: {
-    fontSize: '32px',
-    fontWeight: 'bold',
-    color: '#4ade80',
-    fontFamily: 'monospace',
-    marginBottom: '8px',
-  },
-  subtitle: {
-    color: '#94a3b8',
-    fontSize: '16px',
-  },
-  section: {
-    background: '#1e293b',
-    borderRadius: '12px',
-    padding: '24px',
-    marginBottom: '24px',
-  },
-  sectionTitle: {
-    fontSize: '18px',
-    fontWeight: '600',
-    marginBottom: '16px',
-    color: '#f1f5f9',
-  },
-  buttonGroup: {
-    display: 'flex',
-    gap: '12px',
-    flexWrap: 'wrap' as const,
-  },
-  button: {
-    padding: '10px 20px',
-    borderRadius: '8px',
-    border: 'none',
-    cursor: 'pointer',
-    fontWeight: '500',
-    fontSize: '14px',
-    transition: 'all 0.2s',
-  },
-  getButton: {
-    background: '#22c55e',
-    color: '#000',
-  },
-  postButton: {
-    background: '#3b82f6',
-    color: '#fff',
-  },
-  putButton: {
-    background: '#f59e0b',
-    color: '#000',
-  },
-  deleteButton: {
-    background: '#ef4444',
-    color: '#fff',
-  },
-  errorButton: {
-    background: '#6b7280',
-    color: '#fff',
-  },
-  inputGroup: {
-    display: 'flex',
-    gap: '12px',
-    marginBottom: '16px',
-  },
-  input: {
-    flex: 1,
-    padding: '10px 16px',
-    borderRadius: '8px',
-    border: '1px solid #374151',
-    background: '#0f172a',
-    color: '#e2e8f0',
-    fontSize: '14px',
-  },
-  hint: {
-    marginTop: '24px',
-    padding: '16px',
-    background: '#0f172a',
-    borderRadius: '8px',
-    borderLeft: '4px solid #4ade80',
-  },
-  hintText: {
-    color: '#94a3b8',
-    fontSize: '14px',
-    fontFamily: 'monospace',
-  },
-  kbd: {
-    background: '#374151',
-    padding: '2px 8px',
-    borderRadius: '4px',
-    fontSize: '12px',
-    color: '#4ade80',
-  },
-};
-
-function App() {
-  const [customUrl, setCustomUrl] = useState('https://jsonplaceholder.typicode.com/posts/1');
-
-  const makeRequest = async (method: string, url: string, body?: object) => {
-    try {
-      const options: RequestInit = {
-        method,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      };
-      if (body) {
-        options.body = JSON.stringify(body);
-      }
-      await fetch(url, options);
-    } catch (error) {
-      console.error('Request failed:', error);
-    }
-  };
-
-  return (
-    <div style={styles.container}>
-      <div style={styles.header}>
-        <h1 style={styles.title}>&gt;_ Network Terminal</h1>
-        <p style={styles.subtitle}>Monitor your Fetch/XHR requests in real-time</p>
-      </div>
-
-      <div style={styles.section}>
-        <h2 style={styles.sectionTitle}>Quick Actions</h2>
-        <div style={styles.buttonGroup}>
-          <button
-            style={{ ...styles.button, ...styles.getButton }}
-            onClick={() => makeRequest('GET', 'https://jsonplaceholder.typicode.com/posts/1')}
-          >
-            GET Request
-          </button>
-          <button
-            style={{ ...styles.button, ...styles.postButton }}
-            onClick={() =>
-              makeRequest('POST', 'https://jsonplaceholder.typicode.com/posts', {
-                title: 'Test Post',
-                body: 'This is a test post body',
-                userId: 1,
-              })
-            }
-          >
-            POST Request
-          </button>
-          <button
-            style={{ ...styles.button, ...styles.putButton }}
-            onClick={() =>
-              makeRequest('PUT', 'https://jsonplaceholder.typicode.com/posts/1', {
-                id: 1,
-                title: 'Updated Title',
-                body: 'Updated body content',
-                userId: 1,
-              })
-            }
-          >
-            PUT Request
-          </button>
-          <button
-            style={{ ...styles.button, ...styles.deleteButton }}
-            onClick={() => makeRequest('DELETE', 'https://jsonplaceholder.typicode.com/posts/1')}
-          >
-            DELETE Request
-          </button>
-          <button
-            style={{ ...styles.button, ...styles.errorButton }}
-            onClick={() => makeRequest('GET', 'https://jsonplaceholder.typicode.com/invalid-endpoint')}
-          >
-            404 Error
-          </button>
-        </div>
-      </div>
-
-      <div style={styles.section}>
-        <h2 style={styles.sectionTitle}>Custom Request</h2>
-        <div style={styles.inputGroup}>
-          <input
-            type="text"
-            value={customUrl}
-            onChange={(e) => setCustomUrl(e.target.value)}
-            placeholder="Enter URL..."
-            style={styles.input}
-          />
-          <button
-            style={{ ...styles.button, ...styles.getButton }}
-            onClick={() => makeRequest('GET', customUrl)}
-          >
-            Send GET
-          </button>
-        </div>
-      </div>
-
-      <div style={styles.hint}>
-        <p style={styles.hintText}>
-          Press <span style={styles.kbd}>Ctrl+Shift+N</span> to toggle the Network Terminal
-        </p>
-      </div>
-
-      <NetworkTerminal defaultVisible={true} position="bottom" maxLogs={50} />
-    </div>
-  );
-}
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/standalone/vite.config.js

@@ -1,19 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      'react': path.resolve(__dirname, '../node_modules/react'),
-      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
-    },
-  },
-  optimizeDeps: {
-    include: ['react', 'react-dom', 'react-dom/client'],
-  },
-});