DevPages - Unified Development Tools Suite

Lightweight, modular development tools including state management, debugging utilities, and more.

🚀 Quick Start

Installation

# Install directly from GitHub
npm install git+https://github.com/study-groups/devpages-package.git

# Or with specific version
npm install git+https://github.com/study-groups/devpages-package.git#v1.0.0

Basic Usage

// Import everything
import devpages from 'devpages';

// Use state management
const store = devpages.statekit.createStore({
  user: { name: '', authenticated: false },
  ui: { theme: 'dark' }
});

// Use debug tools
const debugPanel = devpages.debug.createPanel({
  panels: ['css', 'dom', 'state']
});

// Connect them together
debugPanel.attachStore(store);

Module-Specific Imports

// Import individual modules
import { statekit, debug } from 'devpages';

// Or import from specific paths
import { createStore } from 'devpages/statekit';
import { createPanel } from 'devpages/debug';

📦 Modules

StateKit - Reactive State Management

import { statekit } from 'devpages';

// Create store
const store = statekit.createStore({
  count: 0,
  user: null
});

// Subscribe to changes
store.subscribe((state) => {
  console.log('State updated:', state);
});

// Update state
store.setState({ count: 1 });

// Lite version available
import { createStore } from 'devpages/statekit/lite';

Debug - Development Tools

import { debug } from 'devpages';

// Create debug panel
const panel = debug.createPanel({
  position: 'bottom-right',
  theme: 'dark'
});

// CSS Analysis
const cssAnalyzer = new debug.CSSAnalyzer({
  analyzeOnLoad: true,
  showUnusedRules: true
});

// DOM Analysis  
const domAnalyzer = new debug.DOMAnalyzer({
  trackChanges: true,
  showPerformanceMetrics: true
});

🔧 API Reference

StateKit API

• createStore(initialState) - Create reactive store
• store.getState() - Get current state
• store.setState(newState) - Update state
• store.subscribe(callback) - Listen to changes
• store.unsubscribe(callback) - Remove listener

Debug API

• createPanel(options) - Create debug panel
• CSSAnalyzer - Analyze CSS files and usage
• DOMAnalyzer - Analyze DOM structure and performance

📖 Examples

Complete App Setup

import devpages from 'devpages';

// Application state
const appStore = devpages.statekit.createStore({
  theme: 'dark',
  user: null,
  debug: process.env.NODE_ENV === 'development'
});

// Development debugging
if (appStore.getState().debug) {
  const debugPanel = devpages.debug.createPanel({
    panels: ['css', 'dom', 'state']
  });
  
  // Monitor state changes
  appStore.subscribe((state) => {
    debugPanel.log('State Change', state);
  });
}

// Theme management
appStore.subscribe((state) => {
  document.body.className = `theme-${state.theme}`;
});

Browser Usage (CDN)

<script src="https://unpkg.com/git+https://github.com/study-groups/devpages-package.git/dist/index.js"></script>
<script>
  // Available globally
  const store = devpages.statekit.createStore({ count: 0 });
  const panel = devpages.debug.createPanel();
</script>

🏗️ Building from Source

This package is built from individual modules in the devops repository.

# Development happens in:
devops/devpages/packages/devpages-statekit/
devops/devpages/packages/devpages-debug/

# Published unified package:
devops/devpages/published/devpages/ → devpages-package.git

📝 License

See LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please see the main devops repository for development setup.

📋 Changelog

v1.0.0 (2024-07-16)

• Initial unified package release
• StateKit reactive state management
• Debug panel with CSS/DOM analyzers
• TypeScript support
• Modular architecture