Skip to content

TypeScript Overview

The Phenix Design System uses TypeScript to provide a powerful, modular JavaScript library for DOM manipulation, UI components, and interactive features. This document provides an overview of how TypeScript is used within the framework.

Introduction

The Phenix JavaScript framework is built with TypeScript, providing type safety and modern JavaScript features while maintaining a familiar jQuery-like API. The framework follows a modular architecture that allows developers to use only the features they need.

typescript
// Basic usage example
Phenix('.element').addClass('active').on('click', function() {
    // Handle click event
});

Core Architecture

The Phenix TypeScript framework is built around two main constructs:

  1. The Phenix() Function - The main entry point that accepts selectors and returns PhenixElements
  2. The PhenixElements Class - Extends JavaScript's native Array to provide DOM manipulation methods
typescript
/*====> Phenix Object <====*/
export class PhenixElements extends Array<HTMLElement | Record <string, any>> {
    // DOM-ready method
    ready(callback: () => void): this { /* ... */ }
    
    // Class manipulation
    addClass(className: any) { /* ... */ }
    removeClass(className: string) { /* ... */ }
    toggleClass(className: string) { /* ... */ }
    
    // DOM traversal
    ancestor(target?) { /* ... */ }
    siblings(target?) { /* ... */ }
    next(target?, all_target?) { /* ... */ }
    prev(target?, all_target?) { /* ... */ }
    
    // Event handling
    on(event, callback, live?, timer?) { /* ... */ }
}

/*====> Main Phenix Function <====*/
const Phenix = (selector?:any) => {
    // Implementation details
    return new PhenixElements(...elements);
}

Key Features

  • Chainable DOM Manipulation - Methods can be chained for concise code
  • Event Handling - Simplified event binding and management
  • UI Components - Ready-to-use interactive components
  • Animations and Effects - Fade, slide, and custom animations
  • Form Validation - Built-in form validation utilities
  • Integration Support - WordPress, WooCommerce, and slider integrations
  • Type Safety - TypeScript provides type definitions for all methods and components

Core Modules

The Phenix TypeScript codebase is organized into several categories:

1. Core (index.ts)

The core module provides fundamental DOM manipulation methods:

typescript
// Class manipulation
Phenix('.element').addClass('new-class');
Phenix('.element').removeClass('old-class');
Phenix('.element').toggleClass('toggle-class');

// DOM traversal
const parent = Phenix('.child').ancestor();
const siblings = Phenix('.item').siblings();
const next = Phenix('.item').next();

// Event handling
Phenix('.button').on('click', function() {
  // Event handler code
});

// Attributes and styles
Phenix('.element').css({color: 'red', fontSize: '16px'});
Phenix('.element').setAttributes({id: 'main', 'data-value': '10'});

2. Features

Feature modules provide enhanced functionality:

ModuleFilePurpose
Animationsfeatures/animations.tsCSS-based animations triggered by viewport
Effectsfeatures/effects.tsUI effects like fade and slide
Scroll Effectsfeatures/effects-scroll.tsScroll-based effects and behaviors
Form Validationfeatures/validation.tsForm input validation
Collapsefeatures/collapse.tsCollapsible content sections
Counterfeatures/counter.tsAnimated number counters
Notificationsfeatures/notifications.tsToast notification system
Viewportfeatures/viewport.tsViewport detection utilities
Get Infofeatures/get-info.tsElement information utilities
Connectfeatures/connect.tsAJAX and data connection utilities

3. Components

UI component modules implement interactive elements:

ComponentFilePurpose
Tabscomponents/tabs.tsTabbed content navigation
Popupcomponents/popup.tsModal popup windows
Mediacomponents/media.tsMedia handling utilities
Timercomponents/timer.tsCountdown timers
Progresscomponents/progress.tsProgress indicators
Menucomponents/menu.tsNavigation menus
Ratingcomponents/rating.tsStar rating interface
DataTablecomponents/datatable.tsEnhanced data tables
Dropdowncomponents/dropdown.tsDropdown menus
Selectcomponents/select.tsEnhanced select inputs
Uploadercomponents/uploader.tsFile upload component

4. Integrations

Integration modules provide compatibility with third-party systems:

IntegrationFilePurpose
WordPressintegration/wordpress.tsWordPress-specific functionality
Blocksintegration/blocks.tsGutenberg blocks front-end scripts
WooCommerceintegration/woocommerce.tsWooCommerce integration
Sliderintegration/slider.tsSplide slider integration

| Utilities | integration/utilities.ts | General utility integrations | | Loader | integration/loader.ts | Page loading system |

Using the Framework

Basic Usage

html
<!-- Include the JavaScript file -->
<script src="path/to/phenix.js"></script>

<script>
  // Wait for DOM to be ready
  Phenix(document).ready(function() {
    // Initialize a component
    Phenix('.dropdown-toggle').dropdown();
    
    // Add event listeners
    Phenix('.menu-button').on('click', function() {
      Phenix('.side-menu').toggleClass('active');
    });
  });
</script>

Component Initialization

Most components are initialized by calling their corresponding method:

javascript
// Initialize tabs
Phenix('.tabs-container').tabs({
  active: 0,              // Show Tab # on Initial
  navigation: '.tabs-navigation',  // Navigation Selector
  hash_url: true          // Show Tab from URL #ID
});

// Initialize dropdown
Phenix('.dropdown-toggle').dropdown({
  effect: {
    type: "fade",         // Animation type: fade, slide
    duration: 300,        // Animation duration in ms
  },
  position: "bottom, start"  // Dropdown position
});

// Initialize popup modal
Phenix('.modal-trigger').popup({
  closeBtn: true,         // Show close button
  overlay: true,          // Show overlay
  overlayClose: true      // Close on overlay click
});

Custom Extensions

You can extend Phenix with your own functionality using the prototype pattern:

typescript
// Add a custom method
Phenix.prototype.highlight = function(color = 'yellow') {
  return this.forEach((element) => {
    element.style.backgroundColor = color;
  });
};

// Use your custom method
Phenix('.important-text').highlight();

Performance Considerations

The Phenix TypeScript framework is designed with performance in mind:

  • Methods are optimized to minimize DOM operations
  • Event delegation is used for better performance
  • Components only initialize when needed
  • Code is tree-shakable for modern bundlers

Browser Compatibility

The framework supports modern browsers:

  • Chrome 84+
  • Firefox 63+
  • Safari 12+
  • Edge 84+
  • iOS Safari 12.1+
  • Android Chrome 84+

Next Steps

Released under the MIT License.