{"id":31041702,"url":"https://github.com/rpdevjesco/micro-framework","last_synced_at":"2025-09-14T10:39:14.861Z","repository":{"id":311356898,"uuid":"1041809189","full_name":"RPDevJesco/micro-framework","owner":"RPDevJesco","description":"ZephyrJS is a tiny, DOM-first UI framework built on native Web Components.","archived":false,"fork":false,"pushed_at":"2025-09-09T21:18:49.000Z","size":530,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-10T00:58:42.052Z","etag":null,"topics":["dom-framework","html-css-javascript","ui","vanilla-js","webframework","webfrontend"],"latest_commit_sha":null,"homepage":"https://www.gamedevmadeeasy.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RPDevJesco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-21T03:38:49.000Z","updated_at":"2025-09-09T21:18:54.000Z","dependencies_parsed_at":"2025-09-09T23:09:18.744Z","dependency_job_id":"816a7760-981e-4d0f-bb7e-40229652e93e","html_url":"https://github.com/RPDevJesco/micro-framework","commit_stats":null,"previous_names":["rpdevjesco/micro-framework"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/RPDevJesco/micro-framework","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2Fmicro-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2Fmicro-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2Fmicro-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2Fmicro-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RPDevJesco","download_url":"https://codeload.github.com/RPDevJesco/micro-framework/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2Fmicro-framework/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275094398,"owners_count":25404446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-framework","html-css-javascript","ui","vanilla-js","webframework","webfrontend"],"created_at":"2025-09-14T10:39:12.782Z","updated_at":"2025-09-14T10:39:14.843Z","avatar_url":"https://github.com/RPDevJesco.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ZephyrJS\n\n\u003e A back-to-basics web component library that rediscovers forgotten performance principles\n\nZephyrJS is a lightweight, modern web component library that strips away the complexity modern frameworks have accumulated over the years. By returning to fundamental web principles and using the DOM as the natural state container, ZephyrJS delivers the performance and simplicity that many developers have forgotten was possible.\n\n## 🌟 Why ZephyrJS?\n\n### **Back to Web Fundamentals**\nWhile modern frameworks have added layers of abstraction, ZephyrJS returns to what the web platform already provides. By storing component state directly in DOM attributes—the way HTML was designed to work—this approach offers:\n\n- **Rediscovered Simplicity** - No complex state management patterns or learning curves\n- **Forgotten Performance** - Direct DOM manipulation without virtual DOM overhead\n- **Web Platform Native** - Works with the browser, not against it\n- **Zero Framework Lock-in** - Pure web standards that work anywhere\n\n### **Performance Through Simplicity**\nBy embracing what browsers already do efficiently, ZephyrJS achieves performance characteristics that complex frameworks have lost sight of:\n- **Minimal Bundle Size** - Core library is under 5KB gzipped\n- **Direct DOM Updates** - No virtual DOM overhead or reconciliation\n- **Efficient Rendering** - Only re-renders when attributes actually change\n- **Memory Optimized** - Automatic cleanup with AbortController signals\n\n### **Forgotten Developer Benefits**\nModern tooling has made us forget how simple web development can be:\n- **Transparent State** - All component state is visible in the DOM inspector\n- **No Build Step Required** - Works directly in browsers with ES modules\n- **Immediate Feedback** - Changes reflect instantly without compilation\n- **Standards Compliant** - Built on stable web APIs that won't change\n\n## 🚀 Quick Start\n\n### Visualization\n\nYou can see the framework used in an actual web setting via:\n```bash\nhttps://rpdevjesco.github.io/micro-framework/\n```\n\n###\n\n### Installation\n\n```bash\ngit clone https://github.com/RPDevJesco/micro-framework.git\ncd micro-framework\n```\n\n### Basic Usage\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cscript type=\"module\"\u003e\n        import { XButton, XInput, XCard } from 'zephyrjs';\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Components work immediately --\u003e\n    \u003cx-button label=\"Click me!\" variant=\"primary\"\u003e\u003c/x-button\u003e\n    \u003cx-input label=\"Your name\" placeholder=\"Enter name here\"\u003e\u003c/x-input\u003e\n    \n    \u003cx-card elevated hoverable\u003e\n        \u003cdiv slot=\"header\"\u003e\n            \u003ch3\u003eWelcome to ZephyrJS\u003c/h3\u003e\n        \u003c/div\u003e\n        \u003cdiv slot=\"body\"\u003e\n            \u003cp\u003eThis card responds to user interactions with zero JavaScript configuration.\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/x-card\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## 📦 Core Components\n\n### Form Elements\n- **`\u003cx-input\u003e`** - Smart input fields with validation\n- **`\u003cx-button\u003e`** - Accessible buttons with variants\n- **`\u003cx-select\u003e`** - Dropdown selectors with search\n- **`\u003cx-checkbox\u003e`** - Checkboxes with indeterminate state\n- **`\u003cx-textarea\u003e`** - Auto-resizing text areas\n- **`\u003cx-radio-group\u003e`** - Radio button groups\n- **`\u003cx-fieldset\u003e`** - Form grouping with validation\n\n### Layout \u0026 Navigation\n- **`\u003cx-tabs\u003e`** - Accessible tab navigation with keyboard support\n- **`\u003cx-card\u003e`** - Flexible content cards with multiple variants\n- **`\u003cx-dialog\u003e`** - Modal dialogs with focus management\n- **`\u003cx-splitter\u003e`** - Resizable panes with drag handles\n- **`\u003cx-masonry\u003e`** - Infinite masonry layouts with virtualization\n- **`\u003cx-content-grid\u003e`** - Responsive content grids with filtering\n- **`\u003cx-data-table\u003e`** - Sortable tables with pagination\n- **`\u003cx-scroll\u003e`** - Custom scrollable areas\n\n## 🏗️ The Philosophy: Less is More\n\n### **What Modern Frameworks Forgot**\n\nOver the years, web frameworks have accumulated complexity:\n- Virtual DOMs to \"fix\" DOM performance (that was never actually broken)\n- Complex state management systems to solve problems they created\n- Build steps and compilation for simple UI updates\n- Abstract patterns that hide the underlying web platform\n\n### **What ZephyrJS Remembers**\n\nZephyrJS returns to the core principles that made the web powerful in the first place:\n\n- **HTML attributes are perfect for component state** - They're observable, serializable, and debuggable\n- **The DOM is already a reactive system** - Attribute changes automatically trigger updates\n- **Browser APIs are mature and fast** - Custom Elements, observers, and events just work\n- **Simple code is maintainable code** - Less abstraction means fewer bugs\n\n### **The XBase Foundation**\n\nThe entire framework philosophy is embodied in our tiny base class:\n\nAll ZephyrJS components extend from `XBase`, a minimal custom element base class:\n\n```javascript\nexport default class XBase extends HTMLElement {\n    static observedAttributes = [];\n    #abort = new AbortController();\n\n    connectedCallback() {\n        this.onConnect?.(this.#abort.signal);\n        this.render?.();\n    }\n    \n    disconnectedCallback() { \n        this.#abort.abort(); \n    }\n\n    attributeChangedCallback() {\n        if (this.isConnected) this.render?.();\n    }\n\n    setAttr(name, v) { \n        v == null ? this.removeAttribute(name) : this.setAttribute(name, String(v)); \n    }\n}\n```\n\nThis tiny foundation provides:\n- **Automatic cleanup** with AbortController signals\n- **Efficient re-rendering** only when connected and attributes change\n- **Simple state management** with the `setAttr()` helper\n\n### Component Example\n\nHere's how a ZephyrJS component leverages DOM-as-state:\n\n```javascript\nexport default class XButton extends XBase {\n    static get observedAttributes() { \n        return ['label', 'disabled', 'variant']; \n    }\n\n    onConnect(signal) {\n        // Create internal button for semantics\n        const btn = this._btn = document.createElement('button');\n        btn.part = 'button';\n        \n        btn.addEventListener('click', (e) =\u003e {\n            if (this.hasAttribute('disabled')) return;\n            this.dispatchEvent(new CustomEvent('button-click', { \n                bubbles: true, \n                composed: true \n            }));\n        }, { signal });\n        \n        this.appendChild(btn);\n    }\n\n    render() {\n        const label = this.getAttribute('label');\n        const disabled = this.hasAttribute('disabled');\n        const variant = this.getAttribute('variant') ?? 'default';\n        \n        // State is visible in DOM attributes\n        this._btn.textContent = label ?? '';\n        this._btn.disabled = disabled;\n        this.dataset.variant = variant;\n        \n        // Styling via CSS custom properties\n        this._btn.style.background = variant === 'primary' \n            ? 'var(--x-accent)' \n            : 'white';\n    }\n}\n```\n\n### Event-Driven Communication\n\nComponents communicate through standard DOM events:\n\n```javascript\n// Listen for component events\ndocument.addEventListener('button-click', (e) =\u003e {\n    console.log('Button clicked:', e.target);\n});\n\ndocument.addEventListener('tab-changed', (e) =\u003e {\n    console.log('Active tab:', e.detail.activeTab);\n});\n\n// Programmatic control\nconst tabs = document.querySelector('x-tabs');\ntabs.setActiveTab('settings');\ntabs.addTab('new-tab', 'New Tab', '\u003cp\u003eContent\u003c/p\u003e');\n```\n\n## 🎨 Styling \u0026 Theming\n\n### CSS Custom Properties\n\nZephyrJS uses CSS custom properties for consistent theming:\n\n```css\n:root {\n    --x-accent: #4f46e5;\n    --x-font: system-ui, -apple-system, sans-serif;\n    --x-radius: 8px;\n    --x-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n```\n\n### CSS Parts\n\nStyle internal component parts with the `::part()` selector:\n\n```css\n/* Style the internal button of x-button */\nx-button::part(button) {\n    border-radius: 12px;\n    font-weight: 600;\n    transition: all 0.2s ease;\n}\n\nx-button::part(button):hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* Style tab panels */\nx-tabs::part(panel) {\n    background: #f8fafc;\n    border-radius: 8px;\n    padding: 24px;\n}\n```\n\n### Responsive Design\n\nComponents are mobile-first and responsive by default:\n\n```css\nx-card {\n    width: 100%;\n    max-width: 400px;\n}\n\n@media (min-width: 768px) {\n    x-card[variant=\"featured\"] {\n        max-width: 600px;\n    }\n}\n```\n\n## 🆚 Why This Approach Matters\n\n### **Performance Reality Check**\n\n| Approach | Bundle Size | Runtime Overhead | Memory Usage | Debugging |\n|----------|------------|------------------|--------------|-----------|\n| **ZephyrJS** | ~5KB | Direct DOM updates | Minimal | Browser DevTools |\n| **React** | ~42KB + React DOM | Virtual DOM reconciliation | State + VDOM tree | Requires React DevTools |\n| **Vue** | ~35KB | Proxy reactivity system | Reactive objects + templates | Vue DevTools needed |\n| **Angular** | ~130KB+ | Change detection cycles | DI containers + components | Complex debugging |\n\n### **The Modern Framework Problem**\n\n```javascript\n// Modern Framework: Hidden complexity\nconst [count, setCount] = useState(0);\nconst [loading, setLoading] = useState(false);\nconst [error, setError] = useState(null);\n\n// Where is this state? How do I debug it? \n// What happens when components unmount?\n// How do I serialize this for SSR?\n```\n\n```html\n\u003c!-- ZephyrJS: Transparent simplicity --\u003e\n\u003cx-button count=\"0\" loading=\"false\"\u003e\n  Click me\n\u003c/x-button\u003e\n\n\u003c!-- State is visible, serializable, debuggable --\u003e\n\u003c!-- Browser handles attribute changes automatically --\u003e\n```\n\n### **When Simplicity Wins**\n\nZephyrJS isn't trying to solve every possible use case. It's optimized for the 80% of applications that don't need:\n- Complex state management across hundreds of components\n- Heavy client-side routing with code splitting\n- Real-time collaborative editing with operational transforms\n- Massive applications with team scaling concerns\n\nFor these simpler use cases (which are most applications), going back to basics delivers better performance, easier debugging, and faster development.\n\n## 🎯 Perfect Use Cases\n\n### **Where ZephyrJS Excels**\n- **Content-heavy websites** - Blogs, marketing sites, documentation\n- **Dashboard and admin interfaces** - Forms, tables, simple interactions\n- **Progressive enhancement** - Adding interactivity to server-rendered pages\n- **Component libraries** - Reusable UI components for any framework\n- **Prototyping and demos** - Quick interactive mockups without build steps\n\n### **When to Choose Something Else**\n- **Complex SPAs** - Applications with intricate state management needs\n- **Real-time collaborative** - Apps requiring sophisticated synchronization\n- **Large teams** - Where TypeScript enforcement and patterns are critical\n- **Heavy data manipulation** - Applications doing complex client-side processing\n\n## ✨ Advanced Features (When You Need Them)\n\n### **Smart Performance Optimizations**\n\nEven with a back-to-basics approach, ZephyrJS includes smart optimizations where they actually matter:\n\n```html\n\u003c!-- Automatic virtualization for large lists --\u003e\n\u003cx-content-grid \n    virtual-height=\"400px\" \n    item-height=\"200\"\u003e\n    \u003c!-- Handles thousands of items efficiently --\u003e\n\u003c/x-content-grid\u003e\n\n\u003c!-- Built-in accessibility without configuration --\u003e\n\u003cx-tabs orientation=\"vertical\" aria-label=\"Settings\"\u003e\n    \u003c!-- ARIA attributes and keyboard nav work automatically --\u003e\n\u003c/x-tabs\u003e\n```\n\n### **Native Form Integration**\n\nComponents work seamlessly with native HTML forms - no special form libraries needed:\n\n```html\n\u003cform\u003e\n    \u003cx-input name=\"email\" type=\"email\" required\u003e\u003c/x-input\u003e\n    \u003cx-checkbox name=\"newsletter\" label=\"Subscribe\"\u003e\u003c/x-checkbox\u003e\n    \u003c!-- Form validation uses native constraint validation --\u003e\n    \u003cx-button type=\"submit\" label=\"Submit\"\u003e\u003c/x-button\u003e\n\u003c/form\u003e\n```\n\n## 🎓 The Learning Curve (Or Lack Thereof)\n\n### **If You Know HTML, You Know ZephyrJS**\n\n```html\n\u003c!-- Standard HTML --\u003e\n\u003cinput type=\"text\" value=\"hello\" disabled\u003e\n\u003cbutton onclick=\"handleClick()\"\u003eClick me\u003c/button\u003e\n\n\u003c!-- ZephyrJS components work the same way --\u003e\n\u003cx-input value=\"hello\" disabled\u003e\u003c/x-input\u003e  \n\u003cx-button label=\"Click me\" onclick=\"handleClick()\"\u003e\u003c/x-button\u003e\n```\n\n### **No New Concepts to Learn**\n- No JSX syntax or special templating\n- No hooks, lifecycle methods, or reactive declarations\n- No build configuration or webpack setup\n- No package.json dependencies beyond ZephyrJS itself\n\n### **Progressive Enhancement**\nStart with HTML, then enhance:\n\n```html\n\u003c!-- Start with static HTML --\u003e\n\u003cdiv class=\"tabs\"\u003e\n    \u003cbutton\u003eTab 1\u003c/button\u003e\n    \u003cbutton\u003eTab 2\u003c/button\u003e\n    \u003cdiv\u003eContent 1\u003c/div\u003e\n    \u003cdiv\u003eContent 2\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Enhance with one script tag --\u003e\n\u003cscript type=\"module\"\u003e\n    import { XTabs } from 'zephyrjs';\n\u003c/script\u003e\n\n\u003c!-- Replace when ready --\u003e\n\u003cx-tabs active=\"tab1\"\u003e\n    \u003cdiv tab-id=\"tab1\" tab-label=\"Tab 1\"\u003eContent 1\u003c/div\u003e\n    \u003cdiv tab-id=\"tab2\" tab-label=\"Tab 2\"\u003eContent 2\u003c/div\u003e\n\u003c/x-tabs\u003e\n```\n\n## 🛠️ Development\n\n### Prerequisites\n\n- Modern browser supporting Custom Elements\n\n### Local Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/RPDevJesco/micro-framework.git\ncd micro-framework\n```\n\n### Project Structure\n\n```\nmicro-framework/\n├── src/\n│   ├── core/\n│   │   └── XBase.js          # Base component class\n│   └── elements/\n│       ├── XButton.js        # Button component\n│       ├── XInput.js         # Input component\n│       ├── XCard.js          # Card component\n│       └── ...               # Other components\n├── examples/                 # Live examples\n├── tests/                    # Test suites\n└── docs/                     # Documentation\n```\n\n## 📚 Examples\n\nCheck out the `/examples` directory for comprehensive demonstrations:\n\n- **Form Examples** - Complete form interactions with validation\n- **Tab Examples** - Dynamic tab management and navigation\n- **Card Examples** - Various card layouts and interactions\n- **Masonry Gallery** - Infinite scroll image gallery\n- **Data Table** - Sortable, paginated data display\n\n## 🤝 Contributing\n\nWe welcome contributions! \n\n### Development Principles\n\n1. **Web Standards First** - Leverage native browser APIs\n2. **Performance Critical** - Every byte matters\n3. **Accessibility Required** - WCAG 2.1 compliance minimum\n4. **DOM-as-State** - No hidden internal state\n5. **Framework Agnostic** - Works everywhere\n\n## 📄 License\n\nMIT License\n\n**ZephyrJS: Rediscovering the performance and simplicity that web development once had.**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frpdevjesco%2Fmicro-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frpdevjesco%2Fmicro-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frpdevjesco%2Fmicro-framework/lists"}